@charset "UTF-8"; /* ========================================================================== drmdfsl.fay.com.bd — deep ocean 1. Tokens 5. Hero / the tree 9. Blog 2. Reset 6. Home sections 10. Contact 3. Type 7. Footer 11. Lightbox 4. Masthead 8. About / Work 12. Motion + responsive ========================================================================== */ /* 1. Tokens --------------------------------------------------------------- */ :root { --ink: #04121b; --ink-2: #071d29; --ink-3: #0b2a3a; --ink-4: #10394d; --line: rgba(143, 211, 240, .13); --line-2: rgba(143, 211, 240, .26); --sky: #4fb3de; --sky-2: #7acbee; --sea: #1b6f98; --sea-2: #2f92c2; --sand: #f0e3ac; --gold: #e4b45e; --paper: #e8f3f9; --paper-2: #9cb7c6; --paper-3: #6f8b9c; --font-display: "Fraunces", "Tiro Bangla", Georgia, "Times New Roman", serif; --font-text: "Inter", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --shell: 1200px; --gut: clamp(1.15rem, 4vw, 2.75rem); --radius: 18px; --radius-s: 11px; --lh-tight: 1.06; --lh-body: 1.68; --ls-head: -.022em; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .55s; } /* Bengali needs more leading and no negative tracking. */ .is-bn { --lh-tight: 1.3; --lh-body: 1.95; --ls-head: 0; } /* 2. Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--ink-4) var(--ink); } body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-text); font-size: clamp(1rem, .96rem + .2vw, 1.075rem); line-height: var(--lh-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden: `hidden` would turn into a scroll container and break the sticky hero pin. */ overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; border-radius: 0; } button { background: none; border: 0; cursor: pointer; } ::selection { background: var(--sky); color: var(--ink); } :focus-visible { outline: 2px solid var(--sky-2); outline-offset: 3px; border-radius: 4px; } .shell { width: min(100% - var(--gut) * 2, var(--shell)); margin-inline: auto; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; top: .6rem; left: .6rem; z-index: 200; padding: .7rem 1.1rem; background: var(--sky); color: var(--ink); font-weight: 600; border-radius: 8px; transform: translateY(-160%); transition: transform .2s var(--ease); } .skip:focus { transform: none; } /* Reading progress rail */ .progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; } .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sea), var(--sky), var(--sand)); transform-origin: 0 50%; } /* 3. Type ----------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-head); margin: 0; text-wrap: balance; } .is-en h1, .is-en h2, .is-en h3 { font-variation-settings: "SOFT" 0, "WONK" 0; } .h-display { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem); } .h-xl { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.85rem); } .h-lg { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.7rem); } .h-md { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } .lede { font-size: clamp(1.06rem, 1rem + .5vw, 1.32rem); color: var(--paper-2); max-width: 58ch; } .is-bn .lede { max-width: 52ch; } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-text); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); margin: 0 0 1.1rem; } .is-bn .eyebrow { letter-spacing: .06em; text-transform: none; font-size: .85rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; } .section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; } .section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); } .section__head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* Buttons */ .btn { --btn-bg: var(--sky); --btn-fg: #041722; display: inline-flex; align-items: center; gap: .55rem; padding: .92rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: .95rem; letter-spacing: .005em; border-radius: 100px; position: relative; overflow: hidden; isolation: isolate; transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sky-2); transform: translateY(101%); transition: transform .42s var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(79, 179, 222, .6); } .btn:hover::after { transform: none; } .btn svg { flex: none; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); } .btn--ghost::after { background: rgba(143, 211, 240, .1); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sky), 0 12px 30px -16px rgba(79, 179, 222, .5); } .btn--sand { --btn-bg: var(--sand); --btn-fg: #221c06; } .btn--sand::after { background: #fff1c2; } .btn--sm { padding: .62rem 1.15rem; font-size: .88rem; } /* Text link with a wiping underline */ .tlink { display: inline-flex; align-items: center; gap: .45rem; color: var(--sky); font-weight: 500; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--ease-out), color .3s; padding-bottom: 2px; } .tlink:hover { background-size: 100% 1px; color: var(--sky-2); } .tlink svg { transition: transform .35s var(--ease-out); } .tlink:hover svg { transform: translateX(4px); } /* Scroll-in reveal, used everywhere except the hero */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: var(--rd, 0ms); } .reveal.in { opacity: 1; transform: none; } /* 4. Masthead ------------------------------------------------------------- */ .masthead { position: fixed; inset: 0 0 auto 0; z-index: 110; padding-block: 1.05rem; transition: padding .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); } .masthead::before { content: ""; position: absolute; inset: 0; background: rgba(4, 18, 27, .72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s var(--ease); } .masthead.is-stuck { padding-block: .6rem; } .masthead.is-stuck::before { opacity: 1; } .masthead.is-hidden { transform: translateY(-105%); transition: transform .45s var(--ease); } .masthead__in { position: relative; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .logo { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .logo__mark { width: 34px; color: var(--sky); display: block; transition: transform .5s var(--ease-out); } .logo__mark svg { width: 100%; height: auto; overflow: visible; } .logo:hover .logo__mark { transform: translateY(-2px) rotate(-3deg); } .logo__leaf { transform-origin: 38px 9px; transition: transform .5s var(--ease-out); } .logo:hover .logo__leaf { transform: rotate(-14deg) scale(1.12); } .logo__word { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.03em; color: var(--paper); } .logo__word span { color: var(--paper-3); } .nav { margin-inline: auto; } .nav ul { display: flex; gap: clamp(.4rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0; } .nav a { position: relative; display: block; padding: .45rem .35rem; font-size: .95rem; font-weight: 500; color: var(--paper-2); transition: color .3s; } .nav a::after { content: ""; position: absolute; left: .35rem; right: .35rem; bottom: .1rem; height: 1px; background: var(--sky); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease-out); } .nav a:hover { color: var(--paper); } .nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .nav a[aria-current="page"] { color: var(--paper); } .nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--sand); } .masthead__end { display: flex; align-items: center; gap: .6rem; flex: none; } .langswitch { display: inline-flex; align-items: center; padding: .42rem .8rem; font-size: .82rem; font-weight: 600; color: var(--paper-2); border: 1px solid var(--line-2); border-radius: 100px; transition: color .3s, border-color .3s, background-color .3s; } .langswitch:hover { color: var(--ink); background: var(--sand); border-color: var(--sand); } .burger { display: none; width: 42px; height: 42px; position: relative; } .burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--paper); transition: transform .4s var(--ease-out), opacity .25s; } .burger span:first-child { top: 17px; } .burger span:last-child { top: 24px; } .burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* Mobile drawer */ .mobilenav { position: fixed; inset: 0; z-index: 109; background: var(--ink); padding: 7rem var(--gut) 2.5rem; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transition: opacity .35s var(--ease); } .mobilenav[hidden] { display: none; } .mobilenav.is-open { opacity: 1; } .mobilenav ul { list-style: none; margin: 0; padding: 0; } .mobilenav li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 55ms); } .mobilenav.is-open li { opacity: 1; transform: none; } .mobilenav a { display: flex; align-items: baseline; gap: 1rem; padding: 1.05rem 0; font-family: var(--font-display); font-size: clamp(1.7rem, 8vw, 2.5rem); letter-spacing: var(--ls-head); } .mobilenav a[aria-current="page"] { color: var(--sky); } .mobilenav__no { font-family: var(--font-mono); font-size: .72rem; color: var(--paper-3); letter-spacing: .1em; } .mobilenav__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--paper-2); font-size: .92rem; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out) .3s, transform .5s var(--ease-out) .3s; } .mobilenav.is-open .mobilenav__foot { opacity: 1; transform: none; } /* 5. Hero / the tree ------------------------------------------------------ */ .hero { position: relative; height: 265vh; /* the scroll budget the growth is spread over */ } .hero__pin { position: sticky; top: 0; height: 100svh; min-height: 34rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.5rem, 1.5vh, 1.4rem); padding: 5.5rem var(--gut) 2rem; overflow: hidden; } /* Backdrop: deep water, a faint grid nodding to his own banner, and a glow. */ .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 46% at 50% 46%, rgba(27, 111, 152, .30), transparent 72%), radial-gradient(90% 70% at 50% 120%, rgba(240, 227, 172, .07), transparent 65%), var(--ink); } .hero__bg::before { content: ""; position: absolute; inset: -10%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(58% 52% at 50% 48%, #000 12%, transparent 76%); -webkit-mask-image: radial-gradient(58% 52% at 50% 48%, #000 12%, transparent 76%); opacity: .8; transform: translate3d(0, calc(var(--p, 0) * -34px), 0); } .hero__copy { position: relative; z-index: 3; text-align: center; max-width: 40rem; } .hero__kicker { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sky); margin: 0 0 .85rem; } .is-bn .hero__kicker { letter-spacing: .12em; text-transform: none; font-family: var(--font-text); font-size: .9rem; } /* Capped against viewport height too: on a short window the headline must not eat the space the tree needs. */ .hero h1 { font-size: min(clamp(2.05rem, 1.1rem + 4.2vw, 4.15rem), 8.6svh); margin: 0; } .hero h1 span { display: block; overflow: hidden; /* Room for descenders, taken back so the line spacing is unchanged. */ padding-bottom: .14em; margin-bottom: -.14em; } .hero h1 span b { display: block; font-weight: inherit; transform: translateY(102%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms + 150ms); } .hero.is-ready h1 span b { transform: none; } .hero h1 em { font-style: italic; color: var(--sand); } /* The stage holds one SVG: portrait, branches, leaves and the seven words. */ /* The stage owns the space; the SVG is absolutely placed inside it so it can never impose its own 4:3 height on the flex column. */ .hero__stage { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; min-height: 0; } .tree { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .tree__glow { opacity: calc(.25 + var(--p, 0) * .5); } /* No transform-box here. The rotate() attribute that starts the dash at twelve o'clock resolves against the viewBox; fill-box would move the whole circle. */ .tree__ring { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--g, 0))); } .tree__b { fill: none; stroke: var(--sky); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--g, 0))); filter: drop-shadow(0 0 9px rgba(79, 179, 222, .45)); } .tree__t { fill: none; stroke: var(--sea-2); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--g, 0))); } .tree__leaf { fill: var(--sand); transform-box: fill-box; transform-origin: 50% 50%; opacity: var(--g, 0); transform: scale(var(--g, 0)); } .tree__node { fill: var(--ink); stroke: var(--sky); stroke-width: 2.4; transform-box: fill-box; transform-origin: 50% 50%; opacity: var(--g, 0); transform: scale(calc(.4 + var(--g, 0) * .6)); } .tree__word { font-family: var(--font-display); font-weight: 600; fill: var(--paper); letter-spacing: -.01em; text-anchor: middle; opacity: var(--g, 0); transform: translateY(calc((1 - var(--g, 0)) * 14px)); transform-box: fill-box; } .tree__word--sand { fill: var(--sand); } .is-bn .tree__word { letter-spacing: 0; } /* Stroke and type are in viewBox units, so each arrangement sets its own to land on the same number of screen pixels. */ .tree--wide .tree__b { stroke-width: 3.1; } .tree--wide .tree__t { stroke-width: 2.5; } .tree--wide .tree__ring { stroke-width: 1.4; } .tree--wide .tree__word { font-size: 36px; } .is-bn .tree--wide .tree__word { font-size: 39px; } .tree--tall .tree__b { stroke-width: 7; } .tree--tall .tree__t { stroke-width: 5.4; } .tree--tall .tree__ring { stroke-width: 3; } .tree--tall .tree__word { font-size: 52px; } .is-bn .tree--tall .tree__word { font-size: 55px; } /* A slow push through the whole pin, so the last stretch of scroll is never a still frame. */ .tree__grove { transform-box: view-box; transform-origin: var(--ox) var(--oy); transform: scale(calc(1 + var(--p, 0) * .06)); } /* One arrangement at a time: wide for landscape, tall for a phone. */ .tree--tall { display: none; } @media (max-width: 700px) { .tree--wide { display: none; } .tree--tall { display: block; } } .hero__foot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; opacity: var(--fade, 0); transform: translateY(calc((1 - var(--fade, 0)) * 18px)); will-change: opacity, transform; } .hero__foot .lede { font-size: 1.02rem; max-width: 42rem; } .hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; } /* 6. Home sections -------------------------------------------------------- */ /* Manifesto: four lines that step down and across like hours of a day, each wiping up from behind a mask. The stagger keeps it from reading as a block of text sitting in an empty column. */ .manifesto { background: linear-gradient(180deg, var(--ink), var(--ink-2) 60%, var(--ink)); } .manifesto .shell { display: grid; gap: clamp(1.2rem, 3vw, 3.5rem); grid-template-columns: minmax(0, 1fr); } .manifesto .eyebrow { margin-bottom: 0; } .manifesto__lines { list-style: none; margin: 0; padding-left: clamp(1rem, 2.4vw, 2.1rem); border-left: 1px solid var(--line-2); } .manifesto__lines li { overflow: hidden; padding-block: .14em; margin-left: calc(var(--i, 0) * clamp(0rem, 3.4vw, 4rem)); } .manifesto__lines span { display: block; font-family: var(--font-display); font-size: clamp(1.45rem, .9rem + 2.3vw, 2.85rem); line-height: 1.2; letter-spacing: var(--ls-head); transform: translateY(105%); opacity: .2; transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); transition-delay: calc(var(--i) * 145ms); } .manifesto.in .manifesto__lines span { transform: none; opacity: 1; } .manifesto__lines li:last-child span { color: var(--sand); font-style: italic; } .is-bn .manifesto__lines li:last-child span { font-style: normal; } @media (min-width: 861px) { .manifesto .shell { grid-template-columns: auto minmax(0, 1fr); align-items: start; } .manifesto .eyebrow { margin-top: .9rem; } } /* Two rhythms running side by side: a pulse and a line of ink. */ .duo { display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--line); background: var(--ink-2); overflow: hidden; } .duo__pane { position: relative; min-height: clamp(8.5rem, 17vw, 13rem); display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 2.8rem) 1rem; isolation: isolate; transition: background-color .5s var(--ease); } .duo__pane + .duo__pane { border-left: 1px solid var(--line); } .duo__pane:hover { background: rgba(143, 211, 240, .04); } .duo__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .85; } .duo__line path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900 900; } /* Offset in time, so one is drawing while the other is clearing. */ .duo__ecg { stroke: var(--sky); filter: drop-shadow(0 0 10px rgba(79, 179, 222, .5)); animation: trace 7s linear infinite; } .duo__ink { stroke: var(--sand); filter: drop-shadow(0 0 10px rgba(240, 227, 172, .3)); animation: trace 7s linear infinite 3.5s; } @keyframes trace { from { stroke-dashoffset: 900; } to { stroke-dashoffset: -900; } } .duo__word { font-family: var(--font-display); font-size: clamp(1.8rem, 1.05rem + 3.4vw, 3.4rem); letter-spacing: var(--ls-head); line-height: 1; } .duo__pane--poet .duo__word { color: var(--sand); font-style: italic; } .is-bn .duo__pane--poet .duo__word { font-style: normal; } @media (max-width: 560px) { .duo { grid-template-columns: 1fr; } .duo__pane + .duo__pane { border-left: 0; border-top: 1px solid var(--line); } } /* Three lives */ .lives__grid { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .life { background: var(--ink); padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.4rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; gap: .9rem; position: relative; isolation: isolate; transition: background-color .5s var(--ease); } .life::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: linear-gradient(90deg, var(--sky), var(--sand)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); } .life:hover { background: var(--ink-2); } .life:hover::before { transform: scaleX(1); } .life__no { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; color: var(--sky); } .is-bn .life__no { font-family: var(--font-text); letter-spacing: .1em; } .life h3 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); } .life p { color: var(--paper-2); font-size: .98rem; flex: 1; } /* Post cards */ .cards { display: grid; gap: clamp(1.1rem, 2.2vw, 1.9rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .card { position: relative; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .4s var(--ease), transform .5s var(--ease-out); } .card:hover { border-color: var(--line-2); transform: translateY(-4px); } .card__media { position: relative; aspect-ratio: 16 / 9; background: var(--ink-3); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), opacity .4s; } .card:hover .card__media img { transform: scale(1.05); } .card__media--empty { display: grid; place-items: center; background: radial-gradient(70% 90% at 30% 10%, rgba(27, 111, 152, .5), transparent 70%), var(--ink-3); } .card__media--empty span { font-family: var(--font-display); font-size: 2.6rem; color: rgba(240, 227, 172, .32); } .card__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 35%, rgba(4, 18, 27, .55)); } .card__play i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(4, 18, 27, .66); border: 1px solid var(--line-2); backdrop-filter: blur(6px); transition: transform .4s var(--ease-out), background-color .3s; } .card__play i::before { content: ""; width: 0; height: 0; border-left: 13px solid var(--paper); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; } .card:hover .card__play i { transform: scale(1.1); background: var(--sky); } .card:hover .card__play i::before { border-left-color: var(--ink); } .card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .card__meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .76rem; letter-spacing: .05em; color: var(--paper-3); } .is-bn .card__meta { font-size: .84rem; letter-spacing: 0; } .card h3 { font-size: 1.24rem; line-height: 1.24; } .card__excerpt { color: var(--paper-2); font-size: .93rem; margin: 0; } .card__link { position: absolute; inset: 0; } .card__link:focus-visible { outline-offset: -4px; } .tag { display: inline-flex; align-items: center; padding: .2rem .6rem; border: 1px solid var(--line-2); border-radius: 100px; font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--sky); } .is-bn .tag { font-size: .8rem; letter-spacing: 0; } .tag--video { color: var(--sand); border-color: rgba(240, 227, 172, .35); } .section__more { margin-top: clamp(1.8rem, 3vw, 2.6rem); } /* Work teaser: screenshots that drift inside their frames */ .teaser__grid { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; } .shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); aspect-ratio: 16 / 10; } .shot img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 0; transform: translate3d(0, calc(var(--drift, 0) * -10%), 0); will-change: transform; } .shot figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1.2rem 1.1rem; background: linear-gradient(transparent, rgba(4, 18, 27, .92) 55%); font-size: .92rem; color: var(--paper); } .shot figcaption b { display: block; font-weight: 600; } .shot figcaption em { font-style: normal; color: var(--paper-3); font-size: .84rem; } /* Photo rail */ .frames__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; } .frames__hint { font-size: .8rem; color: var(--paper-3); display: inline-flex; align-items: center; gap: .5rem; } .frames__hint::before { content: ""; width: 34px; height: 1px; background: currentColor; } .rail { display: flex; gap: clamp(.7rem, 1.5vw, 1.1rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gut); padding-bottom: 1.2rem; margin-inline: calc(var(--gut) * -1); scrollbar-width: thin; cursor: grab; } .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .rail::-webkit-scrollbar { height: 4px; } .rail::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; } .rail__item { flex: none; width: clamp(15rem, 32vw, 24rem); scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--ink-2); border: 1px solid var(--line); } .rail__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease-out); } .rail__item:hover img { transform: scale(1.04); } .rail__item figcaption { position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .9rem; background: linear-gradient(transparent, rgba(4, 18, 27, .9)); font-size: .86rem; color: var(--paper-2); } /* Close */ .close { text-align: center; } .close blockquote { margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 26ch; font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1rem + 1.8vw, 2.2rem); line-height: 1.34; color: var(--sand); } .close blockquote::before { content: "“"; opacity: .5; } .close blockquote::after { content: "”"; opacity: .5; } .close h2 { max-width: 20ch; margin-inline: auto; } .close .btn { margin-top: 2rem; } /* 7. Footer --------------------------------------------------------------- */ .foot { border-top: 1px solid var(--line); background: var(--ink-2); padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem; position: relative; } .foot__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); padding-bottom: clamp(2rem, 4vw, 3rem); } .foot__blurb { color: var(--paper-2); max-width: 30ch; margin: 1rem 0 1.4rem; font-size: .95rem; } .foot__h { font-family: var(--font-text); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); margin: 0 0 1.1rem; } .is-bn .foot__h { letter-spacing: .05em; text-transform: none; font-size: .86rem; } .foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .foot__col a { color: var(--paper-2); transition: color .3s; } .foot__col a:hover { color: var(--sky); } .socials { display: flex; gap: .55rem; list-style: none; margin: 0; padding: 0; } .socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--paper-2); transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease-out); } .socials a:hover { color: var(--ink); background: var(--sky); border-color: var(--sky); transform: translateY(-3px); } .foot__base { border-top: 1px solid var(--line); padding-top: 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--paper-3); } .foot__base p { margin: 0; } .totop { display: inline-flex; align-items: center; gap: .45rem; color: var(--paper-2); transition: color .3s; } .totop:hover { color: var(--sky); } .totop svg { transition: transform .35s var(--ease-out); } .totop:hover svg { transform: translateY(-3px); } /* 8. Page heads, About, Work ---------------------------------------------- */ .pagehead { padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; } .pagehead::before { content: ""; position: absolute; inset: -40% 0 auto; height: 130%; background: radial-gradient(50% 55% at 22% 40%, rgba(27, 111, 152, .28), transparent 70%); pointer-events: none; } .pagehead > * { position: relative; } .pagehead h1 { max-width: 18ch; } .pagehead .lede { margin-top: 1.4rem; } .about__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; } .about__body p { color: var(--paper-2); } .about__body p:first-child::first-letter { float: left; font-family: var(--font-display); font-size: 3.4em; line-height: .82; padding: .06em .12em 0 0; color: var(--sand); } .is-bn .about__body p:first-child::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; } .about__portrait { position: sticky; top: 6.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .about__portrait img { width: 100%; } .facts { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); } .facts li { display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; } .facts b { font-weight: 500; color: var(--paper-3); } .facts span { color: var(--paper); } /* Work projects */ .project { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 5rem); } .project__head { display: grid; gap: clamp(1.2rem, 3vw, 3rem); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); } .project__title { display: flex; flex-direction: column; gap: .8rem; } .project__title h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); } .project__kicker { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .3rem .75rem; border-radius: 100px; background: rgba(79, 179, 222, .12); border: 1px solid var(--line-2); color: var(--sky); font-size: .76rem; font-weight: 600; letter-spacing: .08em; } .is-bn .project__kicker { font-size: .85rem; letter-spacing: 0; } .project__kicker i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pip 2.4s ease-in-out infinite; } @keyframes pip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .project__tagline { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); color: var(--sand); } .project__body p { color: var(--paper-2); } .services { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .1rem; } .services li { display: flex; align-items: flex-start; gap: .8rem; padding: .72rem 0; border-bottom: 1px solid var(--line); color: var(--paper-2); font-size: .96rem; } .services li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .62em; border-radius: 50%; background: var(--sky); } .sites { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .site { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); display: flex; flex-direction: column; } .site__shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); } .site__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .9s var(--ease-out); } .site:hover .site__shot img { transform: scale(1.04); } .site__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .site__body h4 { font-size: 1.2rem; } .site__body p { color: var(--paper-2); font-size: .92rem; flex: 1; } .site__meta { color: var(--sky); font-size: .82rem; } .site__links { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .5rem; } .thumbs { display: flex; gap: .5rem; padding: 0 1.4rem 1.4rem; } .thumbs button { flex: 1; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; transition: border-color .3s, transform .3s var(--ease-out); } .thumbs button:hover { border-color: var(--sky); transform: translateY(-2px); } .thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .callout { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.6rem, 3vw, 2.6rem); border: 1px solid var(--line-2); border-radius: var(--radius); background: linear-gradient(140deg, rgba(27, 111, 152, .2), transparent 60%), var(--ink-2); display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .callout p { margin: 0; color: var(--paper-2); max-width: 46ch; } .fay { position: relative; overflow: hidden; } .fay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 20%, rgba(240, 227, 172, .1), transparent 65%); pointer-events: none; } .fay__body { max-width: 62ch; } .fay__body p { color: var(--paper-2); font-size: 1.04rem; } .fay__body p:first-child { color: var(--paper); font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1.1vw, 1.85rem); line-height: 1.4; } /* 9. Blog ----------------------------------------------------------------- */ .filters { display: flex; gap: .5rem; flex-wrap: wrap; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4vw, 3rem); } .filters a { padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 100px; font-size: .88rem; color: var(--paper-2); transition: color .3s, border-color .3s, background-color .3s; } .filters a:hover { color: var(--paper); border-color: var(--line-2); } .filters a[aria-current] { background: var(--sky); border-color: var(--sky); color: var(--ink); font-weight: 600; } .filters__sep { width: 1px; background: var(--line); margin-inline: .4rem; } .empty { padding: 4rem 0; text-align: center; color: var(--paper-3); font-family: var(--font-display); font-size: 1.3rem; } .pager { display: flex; gap: .6rem; justify-content: center; margin-top: 3rem; } .pager a, .pager span { min-width: 42px; padding: .5rem .8rem; text-align: center; border: 1px solid var(--line); border-radius: 9px; color: var(--paper-2); font-size: .9rem; } .pager a:hover { border-color: var(--sky); color: var(--paper); } .pager [aria-current] { background: var(--ink-3); color: var(--paper); border-color: var(--line-2); } /* Single post */ .post { padding-top: clamp(7.5rem, 13vw, 10rem); } .post__head { max-width: 46rem; margin-inline: auto; text-align: center; } .post__meta { display: flex; gap: .8rem; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--paper-3); font-size: .85rem; margin-top: 1.3rem; } .post__cover { margin: clamp(2.2rem, 5vw, 3.6rem) auto 0; max-width: 62rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .post__video { position: relative; aspect-ratio: 16 / 9; background: var(--ink-3); } .post__video iframe, .post__video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .post__video button { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(4, 18, 27, .15), rgba(4, 18, 27, .6)); } .post__video button i { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 18, 27, .7); border: 1px solid var(--line-2); transition: transform .4s var(--ease-out), background-color .3s; } .post__video button i::before { content: ""; border-left: 18px solid var(--paper); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; } .post__video button:hover i { transform: scale(1.08); background: var(--sky); } .post__video button:hover i::before { border-left-color: var(--ink); } .prose { max-width: 40rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; font-size: 1.09rem; color: var(--paper-2); } .is-bn .prose { font-size: 1.14rem; } .prose h2, .prose h3 { color: var(--paper); margin: 2.2em 0 .7em; } .prose h2 { font-size: 1.7rem; } .prose h3 { font-size: 1.32rem; } .prose a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; } .prose img { border-radius: var(--radius-s); margin-block: 1.6em; } .prose blockquote { margin: 1.8em 0; padding-left: 1.4em; border-left: 2px solid var(--sand); font-family: var(--font-display); font-style: italic; font-size: 1.2em; line-height: 1.5; color: var(--sand); } .is-bn .prose blockquote { font-style: normal; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .5em; } .prose hr { border: 0; height: 1px; background: var(--line); margin: 2.5em 0; } /* A poem keeps its own line breaks and centre axis. */ .prose--verse { text-align: center; font-family: var(--font-display); font-size: 1.22rem; line-height: 2.05; color: var(--paper); } .post__foot { max-width: 40rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .share { display: flex; align-items: center; gap: .6rem; } .share span { font-size: .82rem; color: var(--paper-3); } .share a, .share button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--paper-2); transition: color .3s, background-color .3s, border-color .3s; } .share a:hover, .share button:hover { color: var(--ink); background: var(--sky); border-color: var(--sky); } /* 10. Contact ------------------------------------------------------------- */ .contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: .45rem; } .field label { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--paper-2); } .is-bn .field label { letter-spacing: 0; font-size: .92rem; } .field input, .field textarea, .field select { width: 100%; padding: .85rem 1rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--paper); transition: border-color .3s, background-color .3s; } .field textarea { min-height: 9.5rem; resize: vertical; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--paper-3) 50%), linear-gradient(135deg, var(--paper-3) 50%, transparent 50%); background-position: right 1.1rem top 1.35rem, right .8rem top 1.35rem; background-size: 6px 6px; background-repeat: no-repeat; } .field input::placeholder, .field textarea::placeholder { color: var(--paper-3); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sky); background: var(--ink-3); outline: none; } .field--half { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; } .hp { position: absolute; left: -9999px; opacity: 0; } .notice { padding: 1rem 1.2rem; border-radius: var(--radius-s); border: 1px solid var(--line-2); background: var(--ink-2); font-size: .95rem; } .notice--ok { border-color: rgba(79, 179, 222, .5); background: rgba(79, 179, 222, .1); } .notice--bad { border-color: rgba(228, 180, 94, .5); background: rgba(228, 180, 94, .1); color: var(--sand); } .channels { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .channels li { border-bottom: 1px solid var(--line); } .channels li:first-child { border-top: 1px solid var(--line); } .channels a { display: flex; align-items: center; gap: 1rem; padding: 1.05rem .2rem; color: var(--paper); transition: padding-left .35s var(--ease-out), color .3s; } .channels a:hover { padding-left: .8rem; color: var(--sky); } .channels i { flex: none; color: var(--sky); display: grid; place-items: center; } .channels b { display: block; font-weight: 500; font-size: .98rem; } .channels em { font-style: normal; font-size: .8rem; color: var(--paper-3); } .channels a > span { flex: 1; } .availability { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--paper-2); } .availability i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(79, 179, 222, .6); animation: ping 2.6s ease-out infinite; } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(79, 179, 222, .55); } 70% { box-shadow: 0 0 0 11px rgba(79, 179, 222, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 179, 222, 0); } } /* 11. Lightbox ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(2, 10, 16, .94); backdrop-filter: blur(8px); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity .3s var(--ease); } .lightbox[hidden] { display: none; } .lightbox.is-open { opacity: 1; } .lightbox__stage { margin: 0; max-width: 100%; max-height: 100%; } .lightbox__stage img { max-width: 100%; max-height: 82svh; width: auto; border-radius: var(--radius-s); transform: scale(.97); transition: transform .4s var(--ease-out); } .lightbox.is-open .lightbox__stage img { transform: none; } .lightbox__stage figcaption { text-align: center; margin-top: 1rem; color: var(--paper-2); font-size: .9rem; } .lightbox__close, .lightbox__nav { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--paper); background: rgba(4, 18, 27, .6); transition: background-color .3s, color .3s, transform .3s; } .lightbox__close { top: 1.2rem; right: 1.2rem; } .lightbox__nav--prev { left: 1.2rem; top: 50%; transform: translateY(-50%); } .lightbox__nav--next { right: 1.2rem; top: 50%; transform: translateY(-50%); } .lightbox__close:hover, .lightbox__nav:hover { background: var(--sky); color: var(--ink); } .lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); } .lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); } .lightbox.is-single .lightbox__nav { display: none; } /* 404 */ .oops { min-height: 72svh; display: grid; place-content: center; text-align: center; gap: 1.2rem; padding-top: 6rem; } .oops__code { font-family: var(--font-display); font-size: clamp(5rem, 20vw, 11rem); line-height: 1; color: var(--ink-4); } /* 12. Motion + responsive ------------------------------------------------- */ @media (max-width: 1020px) { .about__grid, .contact__grid, .project__head { grid-template-columns: 1fr; } .about__portrait { position: static; max-width: 26rem; margin-inline: auto; } .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .nav { display: none; } .masthead__cta { display: none; } .burger { display: block; } /* The hidden nav took its auto margin with it, so push the end group over. */ .masthead__end { margin-left: auto; } .hero { height: 245vh; } .hero__foot .lede { font-size: .95rem; } } @media (max-width: 560px) { .field--half { grid-template-columns: 1fr; } .facts li { grid-template-columns: 1fr; gap: .15rem; } .foot__grid { grid-template-columns: 1fr; } .callout { flex-direction: column; align-items: flex-start; } .thumbs { flex-wrap: wrap; } .thumbs button { flex: 1 1 calc(50% - .25rem); } } @media (hover: none) { .card:hover { transform: none; } .btn:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* Show the finished tree instead of animating it, and stop pinning. */ .hero { height: auto; } .hero__pin { position: static; height: auto; min-height: 100svh; } .tree__b, .tree__t, .tree__ring { stroke-dashoffset: 0 !important; } .tree__leaf, .tree__node, .tree__word { opacity: 1 !important; transform: none !important; } .hero__foot { opacity: 1 !important; transform: none !important; } .hero h1 span b { transform: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .manifesto__lines span { transform: none !important; opacity: 1 !important; } .duo__line path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } .shot img { transform: none !important; } } /* Anything JS-driven must still be readable if JS never runs. */ .no-js .tree__b, .no-js .tree__t, .no-js .tree__ring { stroke-dashoffset: 0; } .no-js .tree__leaf, .no-js .tree__node, .no-js .tree__word { opacity: 1; transform: none; } .no-js .hero__foot { opacity: 1; transform: none; } .no-js .hero h1 span b { transform: none; } .no-js .reveal { opacity: 1; transform: none; } .no-js .manifesto__lines span { transform: none; opacity: 1; } .no-js .hero { height: auto; } .no-js .hero__pin { position: static; height: auto; }