body { margin: 0; background: #f1ebe0; } a { color: #241f1c; text-decoration: none; } a:hover { color: #ff5c35; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* hero photo stack */ @keyframes dak-spin { to { transform: rotate(360deg); } } .dak-photo { position: relative; flex: none; } .dak-back, .dak-polaroid { transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .dak-back { position: absolute; inset: 0; border: 2px solid #241f1c; background: #e7dfd2; transform: rotate(4deg) translate(14px, 6px); transition: transform .6s cubic-bezier(.2, .8, .2, 1), background .4s, box-shadow .4s; } .dak-polaroid { position: relative; background: #fbf7f1; padding: 14px; box-shadow: 0 2px 4px rgba(36, 31, 28, 0.10), 0 18px 40px rgba(36, 31, 28, 0.22); transform: rotate(-3deg); } .dak-photo:hover .dak-polaroid { transform: rotate(-0.5deg) translateY(-6px); } .dak-photo:hover .dak-back { transform: rotate(7deg) translate(26px, 10px); background: #ddd1bd; box-shadow: 0 14px 30px rgba(36, 31, 28, 0.20); } .dak-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.28; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .dak-tape { position: absolute; width: 112px; height: 30px; background: oklch(0.85 0.05 75 / 0.85); box-shadow: 0 1px 3px rgba(36, 31, 28, 0.15); clip-path: polygon(0 12%, 5% 0, 95% 0, 100% 14%, 97% 50%, 100% 86%, 95% 100%, 5% 100%, 0 88%, 3% 50%); z-index: 1; } .dak-badge { position: absolute; right: -48px; bottom: 13%; width: 112px; height: 112px; border-radius: 50%; background: #241f1c; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(36, 31, 28, 0.28); z-index: 2; } .dak-badge svg { position: absolute; inset: 0; animation: dak-spin 24s linear infinite; } @media (prefers-reduced-motion: reduce) { .dak-badge svg { animation: none; } } /* navbar pills */ .dak-nav { padding: 6px 14px; border: 1.5px solid #241f1c; border-radius: 999px; transition: background .2s, color .2s; } .dak-nav:hover { background: #241f1c; color: #f1ebe0; } .dak-nav-hot { background: #ff5c35; } /* contact buttons */ .dak-cta { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; box-sizing: border-box; background: #241f1c; color: #f1ebe0; border-radius: 999px; font-family: 'Fragment Mono', monospace; font-size: 12px; letter-spacing: 0.08em; } .dak-cta:hover { background: #ff5c35; color: #241f1c; } .dak-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border: 1.5px solid #241f1c; border-radius: 999px; } .dak-ic:hover { background: #241f1c; color: #f1ebe0; } .dak-cta svg, .dak-ic svg, .dak-row svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dak-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(241, 235, 224, 0.25); padding-bottom: 9px; color: #f1ebe0; } .dak-row:hover { color: #ff5c35; } .dak-row svg { width: 16px; height: 16px; } @media (max-width: 760px) { .dak-hello { grid-template-columns: minmax(0, 1fr) !important; } } /* outside-work gallery: two counter-drifting bands. CSS drift by default; the script at the end of adds .dak-js and takes over with rAF + drag/momentum */ .dak-drift { margin: 0; display: flex; flex-direction: column; gap: 16px; } .dak-band { --k: 1; overflow: hidden; overflow: clip visible; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .dak-band.is-drag { cursor: grabbing; } .dak-band-a { --h: 260; } .dak-band-b { --h: 180; } .dak-track { display: flex; width: max-content; animation: mq 110s linear infinite; will-change: transform; } .dak-band-b .dak-track { animation-duration: 140s; animation-direction: reverse; } .dak-band:hover .dak-track { animation-play-state: paused; } .dak-drift.dak-js .dak-track { animation: none; } .dak-tile { position: relative; flex: none; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); margin-right: 16px; overflow: hidden; background: repeating-linear-gradient(150deg, #e2d9cd 0 8px, #f1ebe0 8px 16px); transition: transform 600ms cubic-bezier(.22, .7, .25, 1); } .dak-tile:hover { transform: scale(1.03); } .dak-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; } .dak-cap, .dak-kind { position: absolute; left: 10px; max-width: calc(100% - 20px); box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Fragment Mono', monospace; font-size: 11px; line-height: 1.3; padding: 4px 8px; } .dak-cap { bottom: 10px; background: #241f1c; color: #f1ebe0; } .dak-kind { top: 10px; background: #ff5c35; color: #241f1c; letter-spacing: 0.1em; } @media (max-width: 760px) { .dak-band-a { --k: 0.6923; } .dak-band-b { --k: 0.7222; } } @media (prefers-reduced-motion: reduce) { .dak-track { animation: none; } } /* projects: index (left) + stage (right) in a screen-tall section, content centred. Radios drive it; the script at the end auto-advances. The stage's height comes from its content (16:9 media + the tallest slide's text, all slides stacked in one grid cell) and the rows stretch to match. Stage width tracks viewport height so everything fits: (100svh - ≈400px) × 16/9, capped at 60%. */ .dak-proj { height: min(100svh, 820px); min-height: 600px; max-width: 1240px; margin: 0 auto; padding: 52px 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: safe center; } .dak-pa { display: grid; grid-template-columns: minmax(0, 1fr) clamp(460px, calc((100svh - 400px) * 16 / 9 + 28px), 60%); gap: 32px; } .dak-pa>input { position: absolute; opacity: 0; pointer-events: none; } .dak-plist { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; } .dak-prow { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: center; padding: 10px 18px; background: #fbf7f1; border: 2px solid #241f1c; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s; } .dak-prow:hover { transform: translate(-4px, -4px) rotate(-0.5deg); box-shadow: 8px 8px 0 #ff5c35; } .dak-prow:nth-child(even):hover { transform: translate(-4px, -4px) rotate(0.5deg); } .dak-prow .n { font-family: 'Fragment Mono', monospace; font-size: 12px; opacity: 0.5; padding-top: 0.6em; } .dak-prow .t { font-family: 'Darker Grotesque', sans-serif; font-size: clamp(24px, 4.2svh, 36px); font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; } .dak-prow .m { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(6px, 1svh, 10px); font-family: 'Fragment Mono', monospace; font-size: clamp(11px, 1.5svh, 13px); } .dak-prow .m>span:first-child { opacity: 0.6; } .dak-prow .m .dak-chip { padding: 2px 7px; } #dak-p1:checked~.dak-plist [for=dak-p1], #dak-p2:checked~.dak-plist [for=dak-p2], #dak-p3:checked~.dak-plist [for=dak-p3], #dak-p4:checked~.dak-plist [for=dak-p4] { background: #241f1c; color: #f1ebe0; } #dak-p1:checked~.dak-plist [for=dak-p1] .n, #dak-p2:checked~.dak-plist [for=dak-p2] .n, #dak-p3:checked~.dak-plist [for=dak-p3] .n, #dak-p4:checked~.dak-plist [for=dak-p4] .n { color: #ff5c35; opacity: 1; } .dak-pa>input:focus-visible~.dak-plist { outline: 2px dashed #ff5c35; outline-offset: 6px; } .dak-stage { display: grid; padding: 14px; background: #241f1c; color: #f1ebe0; } .dak-slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; } .dak-shot { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111216; } .dak-shot img, .dak-shot video { display: block; width: 100%; height: 100%; object-fit: cover; } .dak-shot.fit img { object-fit: contain; } .dak-shot.ph { background: repeating-linear-gradient(150deg, #e2d9cd 0 9px, #f1ebe0 9px 18px); } .dak-shot.ph span { position: absolute; left: 12px; bottom: 10px; font-family: 'Fragment Mono', monospace; font-size: 10px; color: #241f1c; opacity: 0.6; } .dak-detail { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 0 4px 2px; } .dak-detail p { margin: 0; font-size: clamp(13.5px, 1.9svh, 16px); line-height: 1.55; opacity: 0.88; max-width: 70ch; } .dak-copy { display: flex; flex-direction: column; gap: 10px; } .dak-what { font-family: 'Fragment Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: #ff5c35; margin-bottom: 3px; } .dak-out.no { color: #ff5c35; } .dak-slide .dak-link { color: #f1ebe0; border-color: #f1ebe0; } .dak-slide .dak-link:hover { background: #ff5c35; border-color: #ff5c35; color: #241f1c; } #dak-p1:checked~.dak-stage .s1, #dak-p2:checked~.dak-stage .s2, #dak-p3:checked~.dak-stage .s3, #dak-p4:checked~.dak-stage .s4 { opacity: 1; visibility: visible; } .dak-chip { font-family: 'Fragment Mono', monospace; font-size: 11px; background: #ff5c35; color: #241f1c; padding: 4px 8px; } .dak-link { font-family: 'Fragment Mono', monospace; font-size: 11px; letter-spacing: 0.08em; border: 1.5px solid #241f1c; border-radius: 999px; padding: 6px 12px; } .dak-link:hover { background: #241f1c; color: #f1ebe0; } .dak-box { align-self: center; margin-top: 10px; display: inline-flex; align-items: center; line-height: 1; font-family: 'Fragment Mono', monospace; font-size: 11px; letter-spacing: 0.06em; padding: 6px 9px; border: 1.5px solid #241f1c; background: #fbf7f1; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s; } .dak-box:hover { background: #241f1c; color: #f1ebe0; transform: translate(-3px, -3px); box-shadow: 5px 5px 0 #ff5c35; } .dak-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .dak-wip { display: inline-flex; align-items: center; gap: 6px; font-family: 'Fragment Mono', monospace; font-size: 11px; letter-spacing: 0.06em; padding: 3px 9px; border: 1.5px dashed currentColor; opacity: 0.7; } .dak-wip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } @media (max-width: 900px) { .dak-proj { height: auto; min-height: 0; } .dak-pa { grid-template-columns: minmax(0, 1fr); gap: 24px; } .dak-plist { grid-template-rows: none; } .dak-prow { padding: 16px 18px; } .dak-stage { grid-row: 1; } } /* pop-up hover on work rows: lift, slight tilt, hard offset shadow */ .dak-role { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1); } .dak-role:hover { transform: translate(-4px, -4px) rotate(-0.4deg); box-shadow: 8px 8px 0 #241f1c; } .dak-role:nth-child(even):hover { transform: translate(-4px, -4px) rotate(0.4deg); } /* work rows */ .dak-role { display: grid; grid-template-columns: 64px minmax(0, 1fr) 160px; gap: 26px; align-items: start; background: #fbf7f1; border: 2px solid #241f1c; padding: 22px 26px; } .dak-logo { width: 64px; height: 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 11px; background: #fff; border: 2px solid #241f1c; border-radius: 16px; box-shadow: 3px 3px 0 #241f1c; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .dak-logo img { display: block; max-width: 100%; max-height: 100%; } .dak-role:hover .dak-logo { transform: scale(1.06); box-shadow: 4px 4px 0 #ff5c35; } .dak-role-title { font-family: 'Darker Grotesque', sans-serif; font-size: 34px; font-weight: 800; line-height: 1; margin: 4px 0 8px; } .dak-org { font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 400; opacity: 0.55; } .dak-role p { margin: 0; font-size: 15px; line-height: 1.65; max-width: 62ch; } .dak-when { font-family: 'Fragment Mono', monospace; font-size: 12px; line-height: 1.8; text-align: right; padding-top: 6px; } .dak-now { display: inline-block; background: #ff5c35; padding: 1px 8px; font-size: 10px; letter-spacing: 0.16em; margin-bottom: 4px; } .dak-sub { border-left: 2px solid #e2d9cd; padding-left: 14px; margin-top: 12px; } .dak-sub-title { font-weight: 600; font-size: 15px; margin-bottom: 3px; } .dak-sub-title span { font-family: 'Fragment Mono', monospace; font-size: 11px; font-weight: 400; opacity: 0.55; margin-left: 8px; } @media (max-width: 760px) { .dak-role { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px; } .dak-logo { width: 52px; height: 52px; padding: 9px; } .dak-when { grid-column: 2; text-align: left; padding-top: 0; } } /* ── reveal animations ──────────────────────────────────────────────── .js-anim is set on by the inline script in , so nothing is hidden when JS is off. Elements get [data-reveal] from main.js, then .is-in once they are on screen (hero: straight after load). */ .js-anim [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); will-change: opacity, transform; } .js-anim [data-reveal].is-in { opacity: 1; transform: none; } /* the polaroid arrives with a little more travel and a settle */ .js-anim .dak-photo[data-reveal] { transform: translateY(26px) scale(.985); } @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim .dak-photo[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* optical centring: the polaroid's tilt and the badge make it sit low, so lift it a touch */ .dak-photo { position: relative; top: -8px; } /* brand marks are solid, not line drawings */ .dak-cta svg.dak-brand, .dak-ic svg.dak-brand, .dak-row svg.dak-brand { fill: currentColor; stroke: none; }