/* ============================================================ RAPIDSITE STUDIO — editorial poster aesthetic cream / black / one orange ------------------------------------------------------------ Single source of truth lives in :root. Every colour, type size, radius, shadow and spacing value below pulls from a token — no section should introduce a one-off value. ============================================================ */ /* ---------- the two families, served from this origin ---------- They used to come from fonts.googleapis.com, which cost the page a render-blocking stylesheet on a third-party origin before a single word could paint - and, because first layout waited on it, every lazy image below the fold was judged to be in the viewport and fetched at once. Hosting them here removes both: the faces are declared in this sheet, which the page is already waiting for, and the three files the first screen needs are preloaded from the document. Only latin and latin-ext are carried; the Cyrillic, Devanagari and Vietnamese cuts Google also serves have nothing to set on this site. unicode-range is kept exactly as Google wrote it, so a browser still downloads only the subsets a page actually needs. swap, not block: the fallback stack is a system sans, so a line of copy is readable from the first paint and re-sets when the real face lands. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/poppins-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---------- brand palette (single source of truth) ---------- */ --black: #111111; --cream: #f2ede4; --orange: #f5641e; /* tonal supports (warm, derived from the three brand colours) */ --ink: var(--black); /* legacy alias used across the sheet */ --charcoal: #1b1916; /* raised surface on black */ --cream-deep: #e8e1d3; /* deeper cream — connect section */ --cream-panel: #faf6ee; /* raised card/pill on cream */ --cream-side: #f1e9de; /* icon strips + cta-banner field */ --cream-plate: #ebe2d4; /* sampled from cream-back1.webp - the field ground */ --cream-mute: #d8d1c7; /* cream stepped back - secondary copy on the dark plate */ /* Cream held 15% off full, mixed toward the ground rather than to an alpha: this is the running copy that sits over a photograph, and an alpha would let every line pick up whatever happens to be behind it - warmer where the frame is lit, colder where it is not. Mixing to the black holds one flat tone the whole way down a block. Resolves to #d0ccc4. */ --cream-soft: color-mix(in srgb, var(--cream) 85%, var(--black)); --orange-dark: #dd5316; /* text greys — checked for WCAG AA */ --muted: #5c584f; /* muted body on cream (6.1:1) */ --muted-light: #a8a294; /* muted body on black (7.4:1) */ /* rgba channels — lets shadows/glows pull from one source */ --black-rgb: 17, 17, 17; --orange-rgb: 245, 100, 30; --cream-rgb: 242, 237, 228; --white-rgb: 255, 255, 255; /* the top-edge highlight on raised cream panels */ /* ---------- type ---------- Two families now: Poppins -> the headline, every section heading, all running copy, the nav and every button IBM Plex Mono -> section labels, pills, meta, micro-UI Display and body land on one face again. Nothing is left to tell the two roles apart but scale, weight and tracking, which is what the steps in the scale below are for - a heading is a heading because it is large and tracked tight, not because it is a different typeface. Poppins is NOT variable: Google serves it as discrete cuts, so every weight a rule asks for has to be in the request in index.html or the browser will synthesise it. The four in use are 300/400/500/700, and 600 is requested too so a rule can reach for it without a second round trip. The mono is untouched - it is a monospace role, and Poppins cannot fill it. */ --font-hero: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* Weights are tokens so the two roles can differ without hunting rules. Both roles land on 700. Headline and section headings share a face again, so scale and tracking are what tell them apart - the hero is far larger and tracked open, the headings tracked tight. */ --fw-hero: 700; --fw-display: 700; /* ---------- responsive type scale ---------- Fluid steps. Each one interpolates between its size at a 360px viewport and its size at 1440px. The middle term is `rem + vw`, never bare vw, so the scale still answers to browser zoom and to a user's default font size (WCAG 1.4.4). The px range each step spans is in the comment. slope = (max - min) / (1440 - 360) preferred = (min - slope * 360)/16 rem + slope * 100 vw Display steps climb at a ~1.24 ratio. Their clamp minimum sits a step under the 360px value on purpose, so a headline keeps shrinking on a 320px phone instead of overflowing it. */ --fs-hero: clamp(2rem, 1.2083rem + 3.5185vw, 4.375rem); /* 32 -> 70 */ --fs-mega: clamp(1.75rem, 1.333rem + 2.963vw, 4rem); /* 32 -> 64 */ --fs-h1: clamp(1.625rem, 1.417rem + 2.037vw, 3.25rem); /* 30 -> 52 */ --fs-h2: clamp(1.5rem, 1.292rem + 1.481vw, 2.625rem); /* 26 -> 42 */ --fs-h3: clamp(1.25rem, 1.125rem + 1.111vw, 2.125rem); /* 22 -> 34 */ --fs-h4: clamp(1.0625rem, 0.938rem + 0.833vw, 1.6875rem); /* 18 -> 27 */ --fs-h5: clamp(0.9375rem, 0.875rem + 0.556vw, 1.375rem); /* 16 -> 22 */ /* Body and UI steps floor at their 360px value: running copy should never shrink below its small-screen size, it should only rewrap. */ --fs-lead: clamp(1.0625rem, 0.979rem + 0.370vw, 1.3125rem); /* 17 -> 21 */ /* Running copy is flat 17px at every width: it used to floor at 16 on a phone, which is where the text is read most and least forgiving. The secondary step keeps a size between them so cards and lists still sit under page copy, and it no longer drops below 16 anywhere. */ --fs-body: 1.0625rem; /* 17 flat */ --fs-body-sm: 1rem; /* 16 flat */ --fs-label: clamp(0.75rem, 0.729rem + 0.093vw, 0.8125rem); /* 12 -> 13 mono section labels */ --fs-ui: clamp(0.75rem, 0.733rem + 0.074vw, 0.8rem); /* 12 -> 12.8 buttons / pills */ --fs-ui-sm: clamp(0.6875rem, 0.677rem + 0.046vw, 0.719rem); /* 11 -> 11.5 */ --fs-meta: clamp(0.8125rem, 0.771rem + 0.185vw, 0.9375rem); /* 13 -> 15 row meta / captions */ --fs-micro: clamp(0.5625rem, 0.542rem + 0.231vw, 0.75rem); /* 9.5 -> 12 gallery pills / micro labels */ /* rhythm — four roles, tight at the top of the scale and opening as the type gets smaller, which is the whole of the editorial rule: the larger the type, the less leading it needs. hero the headline is sentence case, so it carries descenders and the rows cannot close below the em box the way an all-caps stack can. 1.0 is the floor that clears a "y" over the row beneath while still binding the three rows into one block. It opens once more at 720px, where a row can be a fragment rather than a whole line. display every section heading. Set in caps, so there are no descenders to clear and 1.1 sits at the tight end of the editorial band without letting the rows drift apart. heading card and step titles, two or three words at h5/h3 — near enough to reading size that they want real leading, not display leading. lead decks and pull quotes at h4 and up. Large running copy needs less than small running copy; 1.5 is where a 27px line stops feeling double-spaced. body everything at reading size. Poppins has a tall x-height and near-circular bowls that want air, and 1.7 is the middle of the 1.6-1.8 band the page is set to. */ --lh-hero: 1.0; --lh-display: 1.1; --lh-heading: 1.25; --lh-lead: 1.5; --lh-body: 1.7; /* Poppins is geometric and sets wide on its own. At display size the default fit reads loose, so the headline is tracked in harder than any other role - tight enough to bind each row into a single mass, stopping short of the point where the round lowercase (e, a, o) starts to close up. */ --ls-hero: -0.04em; --ls-display: -0.02em; /* card and step titles sit between display and reading size: enough of a negative to stay punchy, short of the point where 16-22px starts to clot */ --ls-heading: -0.015em; /* Small uppercase is the one place tracking has to go the other way — caps set at label size read as a solid block without it. The mono eyebrows take the widest fit; uppercase headings at h5 and the UI chrome take less. */ --ls-label: 0.18em; --ls-caps: 0.03em; --ls-ui: 0.1em; /* ---------- layout ---------- */ /* The reading measure. In ch so it tracks the face and size actually set rather than a fixed pixel column — but the figure is calibrated, not copied: the ch unit is the width of "0", and Poppins' zero is wider than its average lowercase letter, so a literal 65ch cap renders well past 65 real characters. 55ch is the value that measures ~65 of them in this face, which is the middle of the 55-75 band. Re-measured in the browser against Poppins, not carried over. Every block of running copy is capped by this or by a tighter, deliberately chosen figure; nothing runs the full container width. */ --measure: 55ch; --container: 84rem; --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(5rem, 12vh, 9rem); /* radii */ --radius-pill: 999px; --radius-card: 16px; --radius-panel: 1.5rem; /* elevation */ --shadow-card: 0 18px 40px -24px rgba(var(--black-rgb), 0.45); --shadow-card-hover: 0 30px 55px -28px rgba(var(--black-rgb), 0.5); /* the same drop, warmed: a second orange throw under the panel plus a hairline of light on its top edge, so a lit card still sits in the page's shadow language instead of glowing free of it */ --shadow-lit: 0 18px 40px -24px rgba(var(--black-rgb), 0.45), 0 14px 34px -22px rgba(var(--orange-rgb), 0.28), inset 0 1px 0 rgba(var(--white-rgb), 0.8); --shadow-lit-hover: 0 28px 56px -26px rgba(var(--black-rgb), 0.5), 0 20px 44px -20px rgba(var(--orange-rgb), 0.45), inset 0 1px 0 rgba(var(--white-rgb), 0.92); /* soft-UI, held at about a tenth of the usual strength: one light source at the upper left and its answering shadow at the lower right. Enough to make a dark surface read as moulded out of the page; not enough to turn the section into plastic. Used by the work gallery only. */ --soft-light: rgba(var(--cream-rgb), 0.05); --soft-dark: rgba(0, 0, 0, 0.55); --shadow-soft-raised: -5px -5px 14px var(--soft-light), 6px 9px 20px var(--soft-dark); --shadow-soft-pressed: inset 3px 3px 8px var(--soft-dark), inset -2px -2px 6px var(--soft-light); /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; background: var(--cream); color: var(--ink); line-height: var(--lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Nothing may push a column past the viewport on a 320px screen: display type is the usual culprit, since a single long word cannot rewrap out of trouble. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--orange); color: var(--cream); } /* ---------- reveal system ---------- */ [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); } [data-reveal].in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .marquee-track { animation: none !important; } .orbit-ring { animation: none !important; } .hero-object__art { animation: none !important; } } /* ---------- keyboard: the skip link and the default focus ring ---------- The link is in the flow rather than display:none, because a hidden element cannot take focus; it is simply lifted off the top of the screen until it does, and then drops into the corner over the header. The ring underneath it is a fallback, not an override: the components that draw their own focus state - the service rows, the buttons, the FAQ heads - already match :focus-visible with a more specific selector and keep winning. This one only catches what is left, which is mostly plain links in the nav, the footer and the running copy, where the UA's own ring is nearly invisible against this much black. */ .skip-link { position: absolute; top: 0; left: 0; z-index: 200; transform: translateY(-140%); margin: 0.6rem; padding: 0.85rem 1.35rem; background: var(--orange); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--ls-ui); border-radius: var(--radius-pill); text-decoration: none; transition: transform 0.2s var(--ease-out); } /* :focus as well as :focus-visible. The link is only reachable by keyboard in the first place, and a skip link that stays hidden when something focuses it programmatically - a fragment jump, a browser restoring focus - is a skip link that fails exactly when it is needed. */ .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; } /* ---------- shared: section label ---------- */ .section-label { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin-bottom: clamp(2rem, 5vw, 4rem); } .section-label-light { color: var(--muted-light); } .label-bar { width: 2.5rem; height: 0.55rem; background: var(--orange); display: inline-block; flex-shrink: 0; } /* ---------- shared: the section corner mark ---------- The studio mark stamped into the top-right corner of every banded section. Three things make it read as a mark rather than as a stain. It is small and crisp instead of large and faint - the glyph is a blocky monogram, and at poster size a low alpha only ever resolves into a grey rectangle, because what you see is its bounding area rather than its shape. It sits in the section's top padding, clear of the content, so it never lands behind a heading or a button in one section and on bare ground in the next. And the orange disc keeps several times the alpha of the letterform, so the one piece of the logo that is unmistakably ours stays legible when the rest of it has sunk into the surface. The right offset resolves to the page container's edge on a full-bleed section and to the gutter on a section that is itself the container, which is what puts every mark on the same vertical line down the page however its own section is built. Centred sections narrower than the viewport fall out of the same expression without a special case. */ .section-mark { /* sized once, because the vertical placement below is derived from it */ --mark-size: clamp(2.75rem, 4.6vw, 4.5rem); --mark-pt: var(--section-y); /* the host section's top padding */ --mark-gap: clamp(0.6rem, 1.6vh, 1.1rem); position: absolute; z-index: -1; /* The mark hangs from the *bottom* of the section's top padding rather than from the section's edge: it clears the first line of content by --mark-gap at every viewport height, instead of sitting at a fixed inset that a short viewport would push straight into a heading or, in .connect, behind the solid form panel. The max() is the floor for viewports too short to give the mark a band of its own. */ top: max(clamp(0.75rem, 2vh, 1.25rem), calc(var(--mark-pt) - var(--mark-size) * 0.99 - var(--mark-gap))); right: max(var(--gutter), (100% - var(--container)) / 2); width: var(--mark-size); aspect-ratio: 975 / 965; height: auto; pointer-events: none; overflow: visible; } /* the light ground wants slightly less of the letterform than the dark one: ink on cream carries further than cream on ink at the same alpha */ .section-mark--light { --mark-ink: var(--cream); --mark-ink-o: 0.085; --mark-dot-o: 0.42; } .section-mark:not(.section-mark--light) { --mark-ink: var(--ink); --mark-ink-o: 0.08; --mark-dot-o: 0.3; } /* The sprite is referenced, never rendered. It may not be display:none - a pointing into a display:none tree renders nothing in some engines - so it is collapsed to zero instead. */ .mark-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- shared: button system ---------- One geometry for every text button. Roles: .btn-solid → primary (solid black, blooms orange) .btn-ghost → secondary (outline, fills on hover) .btn-accent → accent (solid orange — for dark surfaces) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; /* 700, same as the nav - see .main-nav on why the weight is up here */ font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 700; letter-spacing: var(--ls-ui); text-transform: uppercase; padding: 0.9em 1.8em; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .btn svg { width: 1.05rem; transition: transform 0.3s var(--ease-out); } .btn:hover svg { transform: translateX(4px); } .btn-solid { background: var(--ink); color: var(--cream); border-color: var(--ink); } .btn-solid:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); } .btn-accent { background: var(--orange); color: var(--ink); border-color: var(--orange); } .btn-accent:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: translateY(-2px); } u { text-decoration-thickness: 2px; text-underline-offset: 0.18em; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); transition: transform 0.5s var(--ease-out), background 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out); } .site-header.is-hidden { transform: translateY(-100%); } /* ---------- header over the hero ---------- The bar is fixed, so the hero's frame already runs up to the top edge of the viewport behind it - all this state does is stop painting cream over it. What goes down instead is a scrim that starts at 26% black under the row of controls and falls away to nothing by the foot of the bar. It is a gradient rather than a flat tint and there is no bottom rule, and that is the whole trick: either one would end on a hard horizontal line across the picture. This ends on nothing. It sits at a quarter rather than the half it used to, because with the bar this much shorter the type sits closer to the top of the frame, where the vignette is already dark - the scrim only has to lift the controls off the plate, not black it out. Everything in the bar inverts to cream to sit on it. The class comes off again once the hero has scrolled past, because below it the page is cream and the bar has to go back to reading dark-on-light. */ .site-header.over-hero { background: linear-gradient( 180deg, rgba(17, 17, 17, 0.26) 0%, rgba(17, 17, 17, 0.20) 45%, rgba(17, 17, 17, 0.08) 78%, rgba(17, 17, 17, 0) 100% ); backdrop-filter: none; border-bottom-color: transparent; color: var(--cream); } /* The blur cannot go on the bar itself: a uniform backdrop-filter stops dead at the foot of the box and draws exactly the horizontal seam across the picture that the gradient above is written to avoid. So it goes on a layer of its own, behind the scrim, and that layer is masked with the same falloff - 6px of blur under the controls, nothing at all by the bottom edge. The photograph runs on through unbroken. It carries a second weight of black as well, and only on the right. Both plates the bar goes transparent over are lit from the right - the banner's object shot most of all, where the glass burns hardest at about the point the CTA sits - so a scrim that falls only downwards leaves the one control on the bar that is itself a solid colour sitting on the brightest thing behind it: orange on orange, with nothing between them. This runs the other way, nothing at all across the left half where the wall is already dark and the nav reads clean, then down to the button. It rides on this layer rather than in the bar's own gradient because a sideways scrim written there would end on a hard horizontal line at the foot of the bar, which is the one thing the whole arrangement exists to avoid: here it inherits the same mask, so it fades out downwards exactly as everything else does. */ .site-header.over-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, 0.16) 68%, rgba(17, 17, 17, 0.30) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); pointer-events: none; } .site-header.over-hero .logo-mark { color: var(--cream); } .site-header.over-hero .main-nav a { color: var(--cream); } .site-header.over-hero .main-nav a:hover { background: var(--cream); color: var(--ink); } /* the page's solid button is ink-on-cream, which sinks into the frame - same inversion the hero's own buttons take */ .site-header.over-hero .header-cta { /* The accent, same as the hero's own primary directly below it — the bar's button and "See our work" are the same offer, so they now read as one thing said twice rather than two different-coloured pills. It sits a few points off full strength for the reason the cream did: flat colour at full strength outweighed the logo and the nav put together and read as the subject of the bar rather than one of three things in it. */ background: color-mix(in srgb, var(--orange) 94%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--orange) 94%, transparent); } .site-header.over-hero .header-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .site-header.over-hero .nav-toggle span { background: var(--cream); } .header-inner { display: flex; align-items: center; justify-content: space-between; /* ~74px of bar. The tallest thing in the row is the CTA, so the block padding is measured off that, and it is not symmetrical: the scrim behind it is already fading out across the bottom third, so an even value left a visible run of empty tinted frame under the controls. The foot gives up the difference. */ padding: 1rem var(--gutter) 0.85rem; max-width: var(--container); margin: 0 auto; } .logo { font-family: var(--font-display); font-weight: var(--fw-display); font-size: 1.35rem; letter-spacing: var(--ls-display); display: inline-flex; align-items: center; gap: 0.55rem; } .logo sup { color: var(--orange); font-size: 0.6em; } .logo-mark { width: 2.1rem; height: 2.1rem; flex-shrink: 0; color: var(--ink); transition: transform 0.45s var(--ease-out); } .logo:hover .logo-mark { transform: rotate(-6deg) scale(1.08); } .main-nav { display: flex; align-items: center; /* No container. The links sit straight on the bar: no capsule, no fill and no hairline round them, so the only thing drawing the middle of the header is the type. The gap opens from 0.2rem because without an enclosing shape the links need daylight of their own to read as five separate items rather than one run of caps. */ gap: 0.35rem; /* Matching the buttons: the interactive chrome speaks in one voice. The page is one face now, so what separates this from a heading is that it is small, uppercase and tracked wide - not the typeface. 700 because uppercase text this small and tracked this wide needs the weight to hold its colour. Poppins does ship a 500, unlike the Lato this replaced, so this is a live choice rather than the only cut available. */ font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--ls-ui); } .main-nav a { position: relative; padding: 0.62em 1.15em; border-radius: var(--radius-pill); color: var(--ink); transition: background 0.28s var(--ease-out), color 0.28s var(--ease-out); } .main-nav a:hover { background: var(--ink); color: var(--cream); } /* The bar's button is the same button as everywhere else on the page, but it is the only one that has to share a line with the logo and the nav. At the page's full 0.9em/1.8em it sat taller than the pill and dominated the row, so it takes a trim here and only here. */ .header-cta { padding: 0.78em 1.5em; } .nav-toggle { display: none; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; isolation: isolate; /* The photographic ground. One frame, one flat scrim, nothing else on top of it: the plate is already dark and softly lit, so all that is left to do is seat the type on it. 15% of brand black is the whole treatment - it holds cream copy well clear of AA over the lit middle, and it is light enough to leave the grain its micro-contrast. Past about 20% this frame stops reading as a lit surface and starts reading as a soft black rectangle, which is the flatness the scrim is meant to avoid. */ background-color: var(--black); background-image: linear-gradient(rgba(17, 17, 17, 0.15), rgba(17, 17, 17, 0.15)), url("../assets/img/hero-back2.webp"); background-repeat: no-repeat; background-size: cover; background-position: center; /* the section is dark now, so the whole block inverts off one declaration */ color: var(--cream); padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(5rem, 10vh, 8rem); min-height: 86svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* What is left of the crop at desk widths comes off the top and the bottom. It is split 80/20 rather than centred: four fifths off the top, which is empty vignette, and a fifth off the foot, which is little enough that the orange arcs still land whole in the corner. Below this width the box turns portrait, the crop comes in from the sides instead and the vertical anchor stops mattering — so it is only set here. */ @media (min-width: 901px) { /* The box runs wider than the 3:2 frame at these widths, so `cover` crops it top and bottom and the taller the box, the more of the picture survives. 88% of the viewport is the balance struck: enough of the frame to keep the vignette breathing around the light, and short enough that the section below shows at the foot of the first screen rather than the hero sealing it off. The crop that is left comes off the top and the bottom evenly, so the vignette stays symmetrical. Set here rather than in the base rule because below this width the box is already portrait, and there a taller box means a tighter crop, not a looser one. */ .hero { min-height: 88svh; } } .hero-inner { /* The hero is a split now: everything that is read sits in the left half, the object holds the right. It runs to the page container rather than the old narrower measure - a centred column wanted a short measure, a split wants the full width, and the copy's own measure is set on the column instead. The two halves are even, and the object is centred on the height of the copy beside it rather than stacked above or below anything. */ max-width: var(--container); margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem); position: relative; z-index: 1; } /* the reading column. Left-ranged, top to bottom: headline, deck, buttons. */ .hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } /* ---------- the object ---------- One copy, in the right half of the split, centred on the copy beside it. Nothing is layered through the type any more: the object holds its own column, which is what the composition asks for now. It is sized off the column rather than the viewport, with a ceiling so it stops growing before it starts to read as wallpaper on a wide screen, and it is decorative, so it never takes a pointer or a caret. */ .hero-object { position: relative; width: 100%; max-width: 34rem; justify-self: center; pointer-events: none; -webkit-user-select: none; user-select: none; /* the stage the tilt is read against. Far enough back that leaning the solid toward the cursor reads as depth rather than as the picture being sheared. */ perspective: 1100px; /* the plate behind it is dark and near flat, so without a shadow the object floats with nothing under it - this is a seat, not a glow. It sits on the wrapper, which never turns, so the shadow keeps falling straight down while the solid rolls above it. */ filter: drop-shadow(0 30px 70px rgba(var(--black-rgb), 0.75)); } /* ---------- the turn ---------- The cube is rendered corner-on, standing on one of its body diagonals, and a solid seen down that axis repeats every third of a turn - so turning the picture in its own plane reads as the cube rolling on that diagonal rather than as a flat image being spun. Only the light gives it away, and it is diffuse enough not to. One turn every 48 seconds: slow enough that nothing about it asks to be watched, fast enough that the object is visibly alive if you rest on it for a second. Linear, because a solid turning under its own weight has no easing in it - any ease here would read as a loop restarting. The origin is the cube's own centre, not the frame's: the render sits a little right of centre and a little high in its box, and turning about the box centre would swing the whole solid in a small orbit instead of letting it turn on the spot. */ .hero-object__art { width: 100%; height: auto; transform-origin: 52% 48%; animation: hero-object-turn 48s linear infinite; /* the wrapper's drop-shadow has to be re-drawn as this moves, so hand the turn to its own layer and keep that work off the main thread */ will-change: transform; } @keyframes hero-object-turn { to { transform: rotate(360deg); } } /* once the hero has scrolled off, there is nothing to keep turning for, and a full-size filtered image re-rastering every frame for an empty screen is the one part of this that is not free. Driven from js/main.js. */ .hero-object.is-turn-paused .hero-object__art { animation-play-state: paused; } /* ---------- the same turn, handed to the cursor ---------- With a fine pointer on the page the turn stops being a keyframe and becomes a number js/main.js integrates every frame, so the cursor can push on it: circle the solid and it follows your hand, flick it and it keeps going the way you threw it, leave it alone and it settles back to the same slow drift it had before — in whichever direction it was last sent. The keyframe has to come off for that, because an animation outranks the inline transform the loop writes. Only ever set from script, so a page without JS keeps the automatic turn exactly as it was. */ .hero-object.is-steerable { pointer-events: auto; cursor: grab; } .hero-object.is-steerable.is-grabbed { cursor: grabbing; } .hero-object.is-steerable .hero-object__art { animation: none; } /* The nudge. It rides just above the cursor rather than sitting in a fixed spot on the object: the joke is that the solid is asking to be handled, and a label pinned to the corner of the frame reads as a caption instead. It never takes the pointer itself — the whole area under it has to stay grabbable — and it is drawn on the cream so it holds against the dark plate and the lit part of the frame alike. */ .hero-object__nudge { position: absolute; left: var(--nudge-x, 50%); top: var(--nudge-y, 50%); transform: translate(-50%, calc(-100% - 0.9rem)) scale(0.94); transform-origin: 50% 120%; z-index: 2; pointer-events: none; white-space: nowrap; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--black); background: var(--cream); padding: 0.45em 0.85em; border-radius: 999px; box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.35); opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .hero-object.is-nudging .hero-object__nudge { opacity: 1; visibility: visible; transform: translate(-50%, calc(-100% - 0.9rem)) scale(1); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; } /* Poppins at 700, sentence case. The section headings are the same face and weight but set in caps, so case and scale are what separate the headline from them. The running copy underneath is that same face again, so the drop in size and weight is all that sets it apart. */ .hero-title { font-family: var(--font-hero); font-weight: var(--fw-hero); font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-hero); text-align: left; } .hero-sub { /* Deliberately under the page measure: supporting copy stays clearly narrower than the headline column above it. The deck is set at 700, so it runs a touch under --measure to land on the same ~65-character line. */ max-width: min(54ch, 100%); /* Ranged left, ragged right. The deck was justified when it sat centred under a centred headline and had to read as a rectangle; in a left-ranged column the ragged edge is the point, and justifying a measure this narrow only opens rivers. */ text-align: left; hyphens: none; text-wrap: pretty; /* 36 -> 48px. The tightened headline leading gives back roughly a descender's worth of space under the last row, so the gap to the sub is set here rather than inherited from the line box — and it scales with the headline, so a smaller hero takes a proportionally smaller gap. */ margin-top: clamp(2.25rem, 4vh, 3rem); /* Held at a flat 18px on purpose rather than pulled from a fluid step: the hero sub is the one line meant to stay quiet under the headline at every width, so it does not grow with the viewport. Stepped down from 19px now the deck is set at a regular weight: a lighter cut at the old size read thin and wide rather than refined. */ font-size: 1.125rem; /* A notch above --lh-body (1.7). Light type wants more air between the rows or the block greys into a slab; the extra leading is what makes a regular weight read as editorial rather than merely small. */ line-height: 1.8; /* The ground under this paragraph is a photograph, so the deck is set a step off full cream rather than at it: it reads as the secondary voice under the headline and still clears AA over the frame - measured against the pixels actually behind it, 6.1:1 at the single brightest point of the lit middle and 8.6:1 across all but the top 5% of the block, so most of the paragraph is clearing AAA. See --cream-soft for why this is a flat tone rather than cream at an alpha. The shadow is a seat, not a halo: one short, dark, near-invisible drop that stops the letterforms grinding against the grain, with nothing wide enough to read as a plate. */ color: var(--cream-soft); text-shadow: 0 1px 3px rgba(var(--black-rgb), 0.68); /* 300 - Poppins Light, the same cut the about panel's copy takes, so the two blocks of running copy on the page's two photographic panels now read at one weight. The deck came down from 700 to 400 to stop the weight doing the work contrast should do; this is the last step on that ramp. Poppins is served in discrete cuts (300/400/500/600/700), so 300 is genuinely the lightest thing available - a requested 450 would resolve up to 500, heavier, not lighter. The seat below is deepened again with the drop, on the same reasoning it was deepened at 400: colour contrast is unchanged by weight, but thinner strokes have less area to hold it against a lit, grainy ground. */ font-weight: 300; /* Regular weight at this size closes the counters slightly against the texture behind it. A hair of tracking opens the line back up. */ letter-spacing: 0.008em; } .hero-actions { display: flex; gap: 0.9rem; margin-top: clamp(1.8rem, 4vh, 2.8rem); flex-wrap: wrap; justify-content: flex-start; } /* The page's two buttons are ink-on-cream, which is the wrong way round on a dark ground - a black fill sinks into the plate and the ghost's black rule disappears into it. Same two shapes and the same spacing, inverted: the solid takes the cream, the ghost outlines in it, and both still land on the orange or the cream on hover, so the interaction reads as it does elsewhere on the page. */ /* The primary leads with the accent. It used to rest in cream and only reach the orange on hover, which spent the brand colour on a state most visitors never trigger and left the two hero buttons telling apart by fill alone. The two states are simply swapped: orange at rest, cream on hover. Ink text on both — ink on the orange is 5.3:1 and ink on the cream is far past it, where cream text on the orange would not have cleared AA at this size. */ .hero .btn-solid { background: var(--orange); color: var(--ink); border-color: var(--orange); } .hero .btn-solid:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } .hero .btn-ghost { color: var(--cream); border-color: color-mix(in srgb, var(--cream) 55%, transparent); } .hero .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } /* one row each at full width; once a row has to wrap on a phone, balance keeps the two halves even instead of leaving a single word stranded. The two inline media chips that used to ride between these words are gone - the headline is plain text end to end now, so nothing here has to make room for artwork overhanging the cap height, and the frame has stopped moving. */ .hero-line { display: block; text-wrap: balance; } .hero-scrollhint { position: absolute; bottom: 1.5rem; left: var(--gutter); font-family: var(--font-mono); font-size: var(--fs-ui-sm); text-transform: uppercase; letter-spacing: 0.2em; /* the black-panel muted grey, not the cream-panel one: this label now sits on the dark frame like the ones in the intro and footer do */ color: var(--muted-light); display: flex; align-items: center; gap: 0.8rem; } .hint-bar { width: 3rem; height: 1px; background: color-mix(in srgb, var(--cream) 30%, transparent); position: relative; overflow: hidden; } .hint-bar::after { content: ""; position: absolute; inset: 0; background: var(--orange); animation: hint-slide 2s var(--ease-out) infinite; } @keyframes hint-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ============================================================ MARQUEE ============================================================ */ .marquee { background: var(--orange); color: var(--ink); overflow: hidden; padding: 0.9rem 0; border-block: 3px solid var(--ink); margin-block: clamp(2rem, 5vh, 4rem) 0; position: relative; z-index: 5; } /* The gap above is cream breathing space between two cream-ground sections. Under the hero there is no cream to breathe: the strip reads as a seam between the dark frame and the orange bar, so the bar is butted straight up against the foot of the photograph instead. */ .hero + .marquee { margin-top: 0; } /* Same case, one page over: on /services the printed field ends where the bar begins, and the gap above the bar is there to separate two cream sections, which these are not. Closing it lets the plate butt straight against the bar's own black rule — a seam between two materials, which is what the field wants at an end it does not have to fade into. */ .cream-field + .marquee { margin-top: 0; } .marquee-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: marquee 22s linear infinite; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--ls-display); white-space: nowrap; } .marquee-track i { font-style: normal; font-size: 0.8em; } @keyframes marquee { to { transform: translateX(calc(-100% / 3)); } } /* ============================================================ INTRO — full-bleed black panel ============================================================ */ .intro { /* the studio photograph carries the panel, with two scrims stacked over it. Scrim one is the brand ramp: heaviest across the empty left wall, thinnest over the orange arch on the right, so the single warm accent in the frame keeps its colour instead of being flattened into the black. Scrim two runs vertically, and it is here because this panel centres its type rather than setting it left - the horizontal ramp alone leaves the right shoulder of the headline sitting on the lit arch. It stays thin through the middle so the arch and the cream stone survive, and closes to solid at the foot so the panel still meets the cream field below on the same clean black edge it always had. */ --about-scrim-top: 0.30; --about-scrim-mid: 0.22; --about-scrim-foot: 0.50; --about-scrim-base: 0.86; background-color: var(--ink); background-image: linear-gradient(180deg, rgba(17, 17, 17, var(--about-scrim-top)) 0%, rgba(17, 17, 17, var(--about-scrim-mid)) 20%, rgba(17, 17, 17, var(--about-scrim-mid)) 58%, rgba(17, 17, 17, var(--about-scrim-foot)) 82%, rgba(17, 17, 17, var(--about-scrim-base)) 100%), linear-gradient(90deg, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.72) 35%, rgba(17, 17, 17, 0.38) 65%, rgba(17, 17, 17, 0.12) 100%), url("../assets/img/about-section-background.webp"); background-repeat: no-repeat; background-size: cover; /* held a little above centre: when the panel is much wider than it is tall the frame crops top and bottom, and the arch lives in the upper half */ background-position: 50% 45%; color: var(--cream); padding: clamp(6rem, 14vh, 10rem) var(--gutter); padding-top: clamp(8rem, 18vh, 13rem); margin-top: calc(-1 * clamp(2rem, 5vh, 4rem)); position: relative; z-index: 1; overflow: hidden; } /* Below the desk widths the panel turns portrait and the frame crops in from the sides instead, so the window walks right to keep the arch in it. The scrim thickens a step at the same time: the measure now runs nearly edge to edge, so more of the type lands on lit ground than it does on desktop. */ @media (max-width: 900px) { .intro { --about-scrim-top: 0.40; --about-scrim-mid: 0.36; --about-scrim-foot: 0.60; --about-scrim-base: 0.90; background-position: 65% 45%; } } @media (max-width: 560px) { /* phone: only about a third of the frame survives the crop, so the window centres on the arch itself rather than on the room */ .intro { background-position: 72% 45%; } } .intro-inner { /* One rhythm for the whole panel: heading, both paragraphs and the sign-off are separated by the same step, and the button takes a clean multiple of it. Nothing in here sets its own ad-hoc margin. */ --intro-gap: clamp(1.15rem, 2.6vh, 1.6rem); /* narrower than it was (58rem). Centred copy needs a shorter column than ranged copy to keep both rags readable, and the panel now carries four short blocks rather than two long ones. */ max-width: 46rem; margin: 0 auto; text-align: center; } .intro-title { /* bold and unchanged: the heading is the one heavy thing in the panel, and the lighter copy below is what makes it read as heavy */ text-wrap: balance; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; margin-bottom: var(--intro-gap); } .intro-title em { font-style: normal; color: var(--orange); } .intro-copy { /* a deck at --fs-lead, a step down from the h4 it used to take. The copy is shorter now, so it does not need the size to hold the panel — and the smaller step is what lets the line open up without the block growing. */ max-width: 42ch; margin-inline: auto; font-size: var(--fs-lead); /* above the page's --lh-lead (1.5). Light type wants more room between the rows than book weight does, and this is where the block stops reading as a paragraph and starts reading as a statement. */ line-height: 1.65; /* Poppins Light. The brief asked for 400-450, but the face is not variable: the cuts loaded are 300/400/500/600/700, and CSS resolves a requested 450 upward to 500 — heavier, not lighter. 400 is what this already was. So 300 is the only step on the ramp that actually reads lighter, and at this size it carries cleanly on the scrim. */ font-weight: 300; /* the negative tracking came off with the weight: tightening light type is what makes it look thin rather than refined */ letter-spacing: 0; /* The same step off full cream the hero deck takes, and for the same reason: this panel is a photograph too, with the arch lit behind the right shoulder of the measure. Held at 5.3:1 against the single brightest pixel behind the block and 10.8:1 across all but the top 5% of it. The sign-off line below stays further back again, so the panel still reads heading / copy / sign-off rather than two blocks at one tone. */ color: var(--cream-soft); /* short centred statement, so even rows beat a ragged last one. This is also what keeps the breaks deliberate without a single
in the markup, so nothing snaps awkwardly on a narrow screen. */ text-wrap: balance; } .intro-copy + .intro-copy { margin-top: var(--intro-gap); } /* single closing line under the paragraph — a step down from the body so the panel reads headline / support / sign-off rather than three equal blocks */ .intro-close { max-width: 38ch; margin-inline: auto; margin-top: var(--intro-gap); font-size: var(--fs-body); line-height: 1.65; /* held at book weight, not the 300 above: this line is smaller and already stepped back to 72% of the cream, and light type at both of those at once stops holding its own on a photographic ground */ font-weight: 400; color: color-mix(in srgb, var(--cream) 72%, transparent); text-wrap: balance; } .intro-copy u { text-decoration-color: color-mix(in srgb, var(--cream) 45%, transparent); transition: text-decoration-color 0.4s, color 0.4s; } .intro-copy u:hover { text-decoration-color: var(--orange); color: var(--orange); } /* orbit button — the corner mark on the about panel. Drawn to the Figma reference (node 148:5384), which is a 150px frame; the ratios below are that frame's numbers carried straight over, so the mark holds its proportions at every size rather than only at one. */ .orbit-btn { /* tops out at the reference's own 150px */ --size: clamp(6.5rem, 10vw, 9.375rem); /* Lifted out of the flow and pinned to the panel's bottom-right corner. It takes the same --gutter every other edge element on the page takes, so it lines up with the section's own margin rather than floating at a figure of its own. .intro is position:relative and clips, so the corner it lands in is the corner of the black plate. */ position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 6vh, 4.5rem); width: var(--size); height: var(--size); display: grid; place-items: center; /* over the panel's scrims, which sit on the section background */ z-index: 2; } .orbit-ring { position: absolute; inset: 0; animation: spin 14s linear infinite; } /* The two hairlines. Stroke width is in the viewBox's user units, not px, so it scales down with the mark instead of holding a fixed weight as --size shrinks — a rule that stayed 1px while the circle halved would read heavy. */ .orbit-rule { fill: none; /* the reference strikes these in white on flat dark; here they land on a photograph, so the cream steps back to keep them a rule rather than a border cut around the mark */ stroke: color-mix(in srgb, var(--cream) 55%, transparent); stroke-width: 0.93; } .orbit-ring text { font-family: var(--font-mono); /* 11 user units on a 150 frame, tracked to close the loop: the label runs twice around a 100-unit circle, and at this size and tracking the second pass meets the first instead of leaving a gap under the spin. */ font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; fill: var(--cream); } @keyframes spin { to { transform: rotate(360deg); } } .orbit-core { /* 37.26 / 150 from the reference. The disc is deliberately small against the ring — that gap is what gives the two hairlines and the label room to read as three separate rings rather than one thick band. */ width: 24.8%; height: 24.8%; background: var(--orange); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: transform 0.45s var(--ease-out), background 0.3s; } /* 14.26 / 37.26 — the arrow's share of the disc in the reference */ .orbit-core svg { width: 38%; } .orbit-btn:hover .orbit-core { transform: scale(1.15) rotate(45deg); background: var(--cream); } /* The footer's copy of the mark. It is pinned to the corner of the footer's top block rather than sitting in the flow, so it costs the footer no height of its own and lands on the same hard-right edge the directory column above it already ends on. A size below the about panel's, because this one closes the page rather than opening the argument, and it is read next to link lists rather than a headline. */ .orbit-btn.orbit-btn--footer { --size: clamp(6.05rem, 8.8vw, 8.25rem); /* Lifted out of the flow and pinned to the corner of the footer's top block, the same move the about panel's copy makes. In the flow it pushed the footer taller by its own height; out here it costs nothing, and it lands in the space the directory already leaves — the services column is the long one, so the corner under the connect list is empty at every width the two-column footer holds. Half a gutter past the container edge is as far out as it can go and still sit inside the footer's padding: the section clips, and a mark with its edge cut off is a mistake, not a bleed. */ position: absolute; right: calc(var(--gutter) * -0.5); /* half a line under the block's foot: the band between the last link and the top of the wordmark is a little taller than the mark, and this centres it in that band rather than leaving all of the slack on one side */ bottom: -0.5rem; margin: 0; } /* the footer's own black, not a photograph: the hairlines can hold their nominal weight of cream here without cutting a hard border round the mark */ .orbit-btn--footer .orbit-rule { stroke: color-mix(in srgb, var(--cream) 45%, transparent); } /* Under this width the panel is no longer wide enough for the mark to clear the copy column beside it — the column is clamped at 46rem and centred, so the space either side of it runs out before the gutter does. It comes back into the flow underneath, centred, which is where it sat before the corner. */ @media (max-width: 1080px) { .orbit-btn { position: static; margin: clamp(2.75rem, 6vh, 4rem) auto 0; } } /* ============================================================ CREAM FIELD — the printed ground under the services list The plate is an element rather than a background on the section because it has to run the full width of the viewport while the section stays clamped to the grid, and because a background on a section paints under every negative-index child in it (the corner mark included) instead of behind the section as a whole. The field is bounded by black on both sides — .intro above, .portfolio below — so the plate butts against them with no fade at either end. A fade here is what read as the abrupt band under the intro: it let the page cream show through in a strip between the black edge and the plate. The plate is tiled at the image's own size rather than scaled to cover. cream-back1 is a grain, not a picture: it carries no drawing, and it reads the same at every edge (its four borders and its centre are within one value of each other), so it repeats with nothing to give the joins away. Tiling is what keeps the grain at the density it was authored at - the field runs two to three times the image's height, so cover would blow the texture up by that factor and soften it into a plain wash, which is the one thing this surface is here to avoid. Nothing in the image asks for a particular anchor, so the tile starts at the top-left of the field and runs from there; that also keeps the phase of the grain fixed to the top black edge instead of shifting as the field grows. The colour underneath is sampled from the image, so a slow-loading or unsupported texture leaves the same ground rather than a different material. ============================================================ */ .cream-field { position: relative; isolation: isolate; } /* The plate is a class rather than an element of .cream-field because a second field takes the same ground: .why and .process share one below, on their own wrapper, so the surface can be laid with the same rule wherever it is wanted rather than being tied to this element. Any section that wants the printed ground needs three things — position, isolation, and this element as its first child, so it paints under the corner mark rather than over it. */ .cream-plate { position: absolute; inset: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); pointer-events: none; background: url("../assets/img/cream-back1.webp") top left / auto repeat, var(--cream-plate); } /* The field butts against a black band at both ends wherever it can, which is why neither plate carries a fade. The lower field no longer can: the section under it is cream too, so the grain and the plate's slightly warmer tone simply stopped, and the join read as a printed edge across the page. This fades the plate out into exactly the colour that follows it rather than into nothing - fading to transparent would reveal the body's lighter cream and put a pale strip where the seam had been. Painted after the plate at the same depth, so it lies over the texture and under everything readable. */ .cream-field--fade-out::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 100vw; height: clamp(4rem, 9vh, 7rem); transform: translateX(-50%); pointer-events: none; background: linear-gradient(to bottom, transparent, var(--cream-deep)); } /* ============================================================ SERVICES — hover-preview rows The section keeps the page's cream ground: nothing here paints a surface. Every colour is pulled from the three brand tokens, and the hover state reuses the orange-band language the studio already speaks in the marquee and the label bars. ============================================================ */ .services { padding: var(--section-y) 0 clamp(2.5rem, 5vh, 4rem); width: 85%; margin: 0 auto; overflow: hidden; /* keeps a cursor-tracked preview from widening the page */ } /* ---------- intro: label + heading on the left, work link on the right ---------- */ .services-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .showcase__intro { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end; justify-content: space-between; } /* the heading column shrinks first so the work link keeps its seat on the same line; below ~18rem of room it drops and the link follows underneath */ .showcase__intro > div { flex: 1 1 18rem; min-width: 0; } .services-head .section-label { margin-bottom: clamp(0.9rem, 2vh, 1.35rem); } .showcase__heading { font-family: var(--font-display); font-weight: var(--fw-display); /* every section heading on the page sits on one step, --fs-h2, so the hero is the only type that outranks a section. Was --fs-h1. */ font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); color: var(--ink); } .showcase__heading em { font-style: normal; color: var(--orange); } /* the manual break only earns its keep once the line has room to matter */ .showcase__break { display: none; } @media (min-width: 620px) { .showcase__break { display: inline; } } .showcase__all { display: inline-flex; align-items: center; gap: 0.85rem; flex-shrink: 0; padding: 0.4rem 0.4rem 0.4rem 1.4rem; font-family: var(--font-mono); font-size: var(--fs-ui); font-weight: 500; letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--radius-pill); transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .showcase__all svg { width: 2.3rem; height: 2.3rem; padding: 0.6rem; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--orange); color: var(--black); transition: transform 0.45s var(--ease-out); } .showcase__all:hover, .showcase__all:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--cream); transform: translateY(-2px); } /* the corner arrow swings a quarter turn and becomes a plain "go right" */ .showcase__all:hover svg, .showcase__all:focus-visible svg { transform: rotate(45deg); } /* ---------- the rows ---------- */ .showcase__list { max-width: var(--container); margin: clamp(2.25rem, 5.5vh, 3.5rem) auto 0; padding: 0 var(--gutter); } .project-row { position: relative; z-index: 0; /* own stacking context, so hovered rows can lift */ display: flex; align-items: center; gap: clamp(0.85rem, 2.5vw, 2.25rem); padding: clamp(1.15rem, 2.8vh, 1.9rem) clamp(0.4rem, 1.2vw, 1rem); border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); } /* the opening rule rides the row, not the list, so every hairline in the stack starts and stops on the same two verticals as the heading above */ .project-row:first-child { border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); } .project-row:hover, .project-row:focus-visible { z-index: 3; /* lift the preview over its neighbours */ } .project-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; } .project-row__number { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.15em; color: var(--orange); transition: color 0.35s var(--ease-out), transform 0.5s var(--ease-out); } .project-row:hover .project-row__number, .project-row:focus-visible .project-row__number { color: var(--ink); transform: translateX(3px); } .project-row__title { position: relative; z-index: 0; /* own stacking context: the marker sits under the word */ margin-right: auto; font-family: var(--font-display); /* the display cut, like every other heading on the page. It was a one-off 300 before - still Poppins, but Light against a sheet set in Bold reads as a second typeface rather than a lighter one, which is the one thing the move to a single family was meant to stop. These titles are the same role as the FAQ questions and the process steps, so they take the same token. */ font-weight: var(--fw-display); font-size: var(--fs-h3); text-transform: uppercase; /* large caps still want a little air between the letters, and the title can now run to three words and wrap, so it needs real leading under it */ letter-spacing: var(--ls-caps); line-height: var(--lh-heading); } /* orange marker, hugging the words rather than washing the whole row — it wipes in from the left edge of the title on hover */ .project-row__title::before { content: ""; position: absolute; inset: 0.09em -0.22em 0.07em -0.16em; z-index: -1; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-out); } .project-row:hover .project-row__title::before, .project-row:focus-visible .project-row__title::before { transform: scaleX(1); } /* The meta is a sentence now, not a two-word tag — so it drops the mono caps and the nowrap it used to get away with. Uppercase is for labels; a line of caps this long is read letter by letter. Capped well under the page measure so it stays a caption beside the title rather than a second paragraph. */ .project-row__meta { flex: 0 1 auto; max-width: 34ch; font-size: var(--fs-meta); line-height: var(--lh-lead); color: var(--muted); /* it is a right-hand caption column: the title pushes it over with an auto margin, so it has to set to the right edge or a wrapped second line leaves a hole between the caption and the arrow it sits against */ text-align: right; text-wrap: pretty; transition: color 0.35s var(--ease-out); } .project-row:hover .project-row__meta, .project-row:focus-visible .project-row__meta { color: var(--ink); } .project-row__button { width: clamp(2.5rem, 3.6vw, 3.1rem); aspect-ratio: 1; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-pill); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); color: var(--ink); transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.5s var(--ease-out); } .project-row__button svg { width: 46%; height: 46%; } .project-row:hover .project-row__button, .project-row:focus-visible .project-row__button { background: var(--ink); border-color: var(--ink); color: var(--orange); transform: rotate(45deg); } /* cursor-tracked preview. --px / --rot are driven by js/main.js; the reveal itself is pure CSS, so the object still works with the script disabled. These are cut-out 3D marks, not photographs — so there is no card around them: they float over the orange wash and the drop-shadow does the seating. */ .project-row__preview { position: absolute; top: 50%; left: 0; z-index: 2; width: clamp(7.5rem, 12vw, 11.5rem); aspect-ratio: 1; margin: 0; pointer-events: none; opacity: 0; /* a slight lean, so the mark reads as tumbling along the row rather than parked on it — then --rot adds the lag from the pointer on top */ transform: translate3d(var(--px, 0px), -50%, 0) rotate(-3deg) rotate(var(--rot, 0deg)); transition: opacity 0.3s var(--ease-out); will-change: transform, opacity; } .project-row__preview img { width: 100%; height: 100%; object-fit: contain; /* the shadow is cast by the cut-out itself, so it follows the silhouette instead of boxing it — doubled up for a tight contact + a soft throw */ filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.42)) drop-shadow(0 18px 22px rgba(var(--black-rgb), 0.22)); transform: scale(0.72) rotate(-14deg); transition: transform 0.75s var(--ease-out); } .project-row:hover .project-row__preview, .project-row:focus-visible .project-row__preview { opacity: 1; } .project-row:hover .project-row__preview img, .project-row:focus-visible .project-row__preview img { transform: scale(1) rotate(0deg); } /* touch: there is no hover to give, so the row drops the preview altogether. It used to be promoted to a permanent thumbnail here, and that is what the marks cannot carry: they are cut-outs, each with its own silhouette and its own margin inside its frame, so one fixed box renders them at visibly different sizes down the list — the cube fills its square, the flatter marks sit small inside theirs, and the column reads as a mistake rather than as a set. Sized to match, they would need the art re-cropped, not the CSS adjusted. The tap still gets the wash and the title's rule. The pointer preview above is untouched: this branch never applies to it. */ @media (hover: none) { .project-row__preview { display: none; } .project-row:active .project-row__title::before { transform: scaleX(1); } } @media (max-width: 900px) { .project-row__meta { display: none; } } @media (prefers-reduced-motion: reduce) { .project-row__title::before { transition: none; } .project-row__preview img { transform: none; transition: none; } .project-row:hover .project-row__number, .project-row:hover .project-row__button, .project-row:focus-visible .project-row__number, .project-row:focus-visible .project-row__button { transform: none; } } /* ---------- foot ---------- */ .services-foot { max-width: var(--container); margin: clamp(1.5rem, 3.5vh, 2.5rem) auto 0; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; } @media (min-width: 768px) { .services-foot { flex-direction: row; justify-content: space-between; align-items: center; } } /* Three sentences, so it is set as running copy rather than as a mono label: at this length the old uppercase treatment was a wall. One step under page body, on a short measure, so it still reads as an aside to the list above. */ .services-foot p { max-width: 54ch; color: var(--muted); font-size: var(--fs-body-sm); line-height: var(--lh-body); text-wrap: pretty; } .services-cta { height: 3.4rem; width: 3.4rem; flex-shrink: 0; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); display: grid; place-items: center; color: var(--ink); transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out), transform 0.35s var(--ease-out); } .services-cta svg { width: 1.3rem; transition: transform 0.3s var(--ease-out); } .services-cta:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: translateY(-2px); } .services-cta:hover svg { transform: translateX(3px); } /* ============================================================ WORK / PORTFOLIO — black, three-column scroll gallery ============================================================ */ .portfolio { position: relative; isolation: isolate; background: var(--ink); color: var(--cream); padding: var(--section-y) var(--gutter); /* clip, not hidden. `hidden` would make this section a scroll container, and a sticky element resolves against the nearest one - which would leave the gallery's stage stuck to a box that never scrolls, i.e. not stuck at all. `clip` cuts the same bleed without creating a scrollport. */ overflow: clip; } .portfolio-head { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto clamp(2.5rem, 6vh, 4rem); display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-end; justify-content: space-between; } .portfolio-title { font-family: var(--font-display); font-weight: var(--fw-display); /* one step for every section heading — see .showcase__heading. Was --fs-h1. */ font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); margin-top: 0.5rem; } .portfolio-title span { color: var(--orange); } /* stays a mono caption — two short clauses, which is the length uppercase can carry. Held to a caption measure so it never runs the width of the head. */ .portfolio-note { max-width: 34ch; margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: var(--ls-ui); line-height: var(--lh-body); color: var(--muted-light); text-align: right; } /* One sentence of the note is mode-specific. The wide one is the default, so nothing about the desktop note changes; the narrow one is only ever shown inside the reel's own query, which means reduced motion at that width gets neither instruction - and a static column of cards needs no instruction. */ .portfolio-note-swipe { display: none; } @media (max-width: 900px) { .portfolio-note-scroll { display: none; } } @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .portfolio-note-swipe { display: inline; } } /* ---------- the work gallery ---------- Three layouts, and the stylesheet owns all of them. What is written here is the static one: three columns of cards in ordinary flow, no stage, no travel, which is what reduced motion is left with. The wide scroll stage and the narrow reel are both switched on by media queries further down rather than by script, so the height the section occupies is settled in the first layout pass and nothing below it moves when main.js starts measuring. */ .pgal { position: relative; z-index: 1; max-width: var(--container); margin: clamp(2rem, 5vh, 3.5rem) auto 0; } .pgal-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 2.2vw, 2.25rem); align-items: start; } /* The columns run past both ends of the stage, so they are dissolved into the black rather than cut on a line - and the top fade doubles as the ground the fixed header sits on while the section is on screen. These are painted caps rather than a mask on the stage. What they show is identical: masking to transparent here would reveal this section's flat ink, and flat ink is exactly what the gradients paint. What they cost is not - a mask makes the whole stuck screen a masked layer for the compositor to redo every frame of the scrub, where two gradient strips are painted once and then only composited. Shown only where there is a stage; the static fallbacks have no edge to soften. */ .pgal-stage::before, .pgal-stage::after { content: ""; position: absolute; inset-inline: 0; z-index: 3; display: none; pointer-events: none; } .pgal-stage::before { top: 0; height: 9%; background: linear-gradient(180deg, var(--ink), transparent); } .pgal-stage::after { bottom: 0; height: 10%; background: linear-gradient(0deg, var(--ink), transparent); } .pgal-track { display: flex; flex-direction: column; gap: clamp(1.4rem, 2.2vw, 2.25rem); } /* the card keeps the old showreel's plate, reflowed into a column: the same top-lit surface and the same soft-UI pair moulding it out of the black ground */ .pgal-card { position: relative; background: linear-gradient( 180deg, color-mix(in srgb, var(--cream) 7%, var(--charcoal)) 0%, var(--charcoal) 42% ); border-radius: var(--radius-card); overflow: hidden; box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.5), var(--shadow-soft-raised), 0 2px 6px -2px rgba(0, 0, 0, 0.7), 0 26px 44px -26px rgba(0, 0, 0, 0.95); transition: box-shadow 0.55s var(--ease-out); } /* The card does not lift on hover the way the old reel card did. Here it is moving under the cursor for the whole of the scrub, and a translate on hover would fire and unfire every time a column carried a card past the pointer. What is left is everything that reads without moving the box: the image pushes in, the scrim lifts, the chip fills. */ .pgal-card:hover { box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.5), -7px -7px 20px rgba(var(--cream-rgb), 0.07), 0 4px 10px -4px rgba(0, 0, 0, 0.75), 0 34px 56px -30px rgba(0, 0, 0, 1), 0 22px 54px -30px rgba(var(--orange-rgb), 0.5); } /* Every frame is cut to its own image's ratio, passed in as --ar on the card, so `cover` crops nothing and the columns take their rhythm from the work rather than from one imposed box - a 3:2 screenshot sits next to a square product shot and neither is letterboxed or trimmed to fit the other. */ .pgal-media { position: relative; aspect-ratio: var(--ar, 3 / 2); background: var(--black); overflow: hidden; } .pgal-media img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform 0.8s var(--ease-out); } .pgal-card:hover .pgal-media img { transform: scale(1.04); } /* the scrim carries the well too: an inset shadow drawn over the image, which is the only way to recess a replaced element - it paints above its own background, so an inset on .pgal-media would sit behind the picture */ .pgal-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.42) 100%); box-shadow: var(--shadow-soft-pressed); opacity: 0.78; transition: opacity 0.5s var(--ease-out); pointer-events: none; } .pgal-card:hover .pgal-media::after { opacity: 0.5; } /* the Qwick card is one app on two phones. Each render is 3:4 and half of a 3:2 box is exactly 3:4, so the pair tiles the frame edge to edge with no crop and no letterbox; both plates are shot on black, so the seam between them and the frame's own black is invisible. */ .pgal-media--duo img { position: absolute; top: 0; width: 50%; height: 100%; } .pgal-media--duo img:first-of-type { left: 0; } .pgal-media--duo img:last-of-type { left: 50%; } /* label over name, the same order the page uses everywhere else: a mono eyebrow and then the thing it names. Stacked rather than run on one line so a two-word project never has to be truncated in a narrow column. */ .pgal-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.95rem 1.05rem 1.1rem; } .pgal-pill { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-ui); color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); border-radius: var(--radius-pill); padding: 0.4em 0.85em; /* the chip is moulded from the card face, same light as the plate */ background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 5%, var(--charcoal)), var(--charcoal)); box-shadow: -2px -2px 5px var(--soft-light), 2px 3px 7px var(--soft-dark), inset 0 1px 0 rgba(var(--cream-rgb), 0.07); transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } .pgal-card:hover .pgal-pill { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: inset 0 1px 0 rgba(var(--white-rgb), 0.25); } .pgal-name { font-size: var(--fs-body-sm); font-weight: 500; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--cream); } /* ---------- the scroll stage, wide ---------- One screen, stuck to the top of the viewport, with --pgal-scroll of page height running under it. The three tracks are scrubbed through that height by js/main.js: the outer two start wound to their foot and unwind downward, so they travel against the page, and the middle one runs the ordinary way. The query is the same string main.js passes to matchMedia(), so the sheet and the script can never disagree about which mode the section is in. */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .pgal { /* The travel, reserved as page height here and nowhere else. It is set to one number: the distance the TALLEST column has to cover. Do that and the arithmetic falls out - that column moves its own height over exactly that much page, which is 1:1 with the scroll, so the middle column reads as ordinary page scroll at every screen size rather than only at the one this was tuned on. The two outer columns are shorter, so they come back down at 0.8 and 0.9 of it, which is the opposing move. A plain vh figure cannot do this. Column height follows the viewport's WIDTH (the cards are a fraction of it) while a vh figure follows its height, so the two come apart the moment the window is not the shape it was tuned on - the same sheet ran at 0.2x on a 2560x1440 screen and 1.5x on a 1440x700 one before this. So the column is modelled instead. Its height is linear in viewport width - 114vw + 346px fits the twelve cards authored below to within a few px from 1024 up - until .pgal reaches its 84rem cap, past which the columns stop growing and the height plateaus at 2010px. Subtract the screen the stage occupies and that is the travel. These three numbers describe THIS set of cards. Add or remove one, or change the aspect of one, and they want re-measuring: the console will tell you, since the number wanted is just the tallest track's height less the stage's. */ --pgal-scroll: max(0px, min(114vw + 346px, 2010px) - 100svh); height: calc(100svh + var(--pgal-scroll)); } .pgal-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .pgal-stage::before, .pgal-stage::after { display: block; } /* While a column is moving its cards do not take the pointer. A card sliding under a still cursor would otherwise pick up and drop :hover over and over, and the hover state animates a large blurred shadow - the one thing on the card that costs a real repaint. Profiling a scrub with the cursor resting on a column showed twice as many long frames as one with it off to the side. The flag comes off the moment the columns settle, so hovering a card you have actually stopped on is unaffected. */ .pgal-stage.is-moving .pgal-card { pointer-events: none; } /* the browser is told once that these move, rather than working it out from the first transform of every scrub */ .pgal-track { will-change: transform; } } /* Out of the page in every mode but the reel's — see the rule inside the reel query, which is the only place it is shown. display:none rather than visibility so it is out of the tab order too: a control for a row that is not moving is worse than no control. */ .pgal-play { display: none; } /* ---------- the reel, narrow ---------- No stage at all below 901px. Two columns of small cards travelling against each other is a great deal of movement inside a phone's width, and a card two fifths of the screen wide is a thumbnail — twelve of them read as a texture rather than as twelve pieces of work. So the columns are unwrapped with display:contents, which drops all twelve cards into .pgal-stage as one flex row in document order, and that row drifts leftward with a finger able to throw it along. One card at a time, near enough the width of the screen, and the section costs its own height instead of a screen plus two and a half of travel. Everything below the query is the mobile view only: the wide stage above is untouched by any of it. */ @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .pgal { /* full width rather than inside the section's gutter: the row is meant to run off both edges of the screen, so the screen is what it is measured in. It is also the clip — the row itself is what moves, and a moving box cannot be its own window. */ max-width: none; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; /* the card plates carry a shadow that falls below them; without this the clip would cut it off square against the section ground */ padding-block: 0 clamp(0.9rem, 3vw, 1.5rem); /* Across is the reel's, down is still the page's. Declaring it means a vertical swipe scrolls the page with no wait for the handler to decide, and a horizontal one comes through as pointer events the reel can read — so the reel never has to cancel a gesture to claim it. */ touch-action: pan-y; cursor: grab; } .pgal.is-dragging { cursor: grabbing; } .pgal-stage { /* the row, and the thing that moves. width:max-content so it is as long as its cards rather than as wide as the screen it overflows. */ display: flex; align-items: stretch; width: max-content; gap: clamp(0.7rem, 2.4vw, 1.1rem); will-change: transform; /* One height for every card's picture, and the width left to follow each image's own ratio — which is the same bargain the wide columns strike the other way up. Nothing is cropped: a screenshot comes out wide, a square mockup square, a portrait narrow, and the row keeps one unbroken line along its top and bottom instead of a ragged one. */ --reel-h: clamp(9.5rem, 44vw, 16rem); } /* the columns stop being boxes: their cards become the row's own children */ .pgal-col, .pgal-track { display: contents; } .pgal-card { /* the card is as wide as its picture is at that height. --ar is a pair of numbers, so it multiplies straight into the calc. */ flex: 0 0 auto; width: calc(var(--reel-h) * var(--ar)); } /* the top and bottom fades belong to the wide stage; across here they are on .pgal, which is the part that holds still */ .pgal-stage::before, .pgal-stage::after { display: none; } /* The row runs past both ends of the screen, so it is dissolved into the section's ink rather than cut on a line. Painted strips rather than a mask on .pgal for the same reason the wide stage paints its own: what they show is identical over a flat ground, and a mask would make the whole clipping box a masked layer for the compositor to redo every frame the row moves. */ .pgal::before, .pgal::after { content: ""; position: absolute; inset-block: 0; z-index: 3; width: clamp(1.25rem, 5vw, 2.5rem); pointer-events: none; } .pgal::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); } .pgal::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); } /* the caption is set to a card around two thirds the desktop width: the name drops to the caption step so a two-word project still sets on one or two lines rather than four, and the padding comes in to match */ .pgal-foot { gap: 0.45rem; padding: 0.7rem 0.75rem 0.8rem; } .pgal-name { font-size: var(--fs-meta); } /* a card the finger is throwing is not a card the finger is choosing: the hover states are for a mouse, and a phone would otherwise stick them on for as long as the touch lasts */ .pgal-card { pointer-events: none; } /* The stop. Keyed to is-reel, which the script only sets while the row is actually drifting, and it sits outside .pgal so the reel's own drag handler never sees the tap. Set as a quiet mono chip under the right end of the row: it is a control, not a call, so it takes the muted ink and lights to the accent only on the press. */ .pgal.is-reel + .pgal-play { /* a flex box rather than a block so the chip can be given a real target height - the mono micro type would otherwise set a control 26px tall, which is a poor thing to hand someone who needs it */ display: flex; align-items: center; justify-content: center; min-height: 2.75rem; width: fit-content; margin: clamp(0.75rem, 2.5vw, 1.1rem) 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-ui); color: var(--muted-light); background: transparent; border: 1px solid rgba(var(--cream-rgb), 0.22); border-radius: var(--radius-pill); padding: 0 1.5em; cursor: pointer; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .pgal.is-reel + .pgal-play:hover, .pgal.is-reel + .pgal-play:focus-visible { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); } } /* ---------- reduced motion, narrow: one column ---------- No reel either — a row that drifts on its own is exactly what this preference is asking not to be given. The columns are unwrapped with display:contents and all twelve cards fall into a single file in document order, which is already interleaved across the three columns rather than three runs of one kind of work. Capped to a reading width so a square mockup does not become the largest thing on the page. (Reduced motion on a wide screen keeps the plain three-column grid the base rules already describe.) */ @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .pgal-stage { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } .pgal-col, .pgal-track { display: contents; } } .portfolio-foot { position: relative; z-index: 1; max-width: var(--container); margin: clamp(2rem, 5vh, 3.5rem) auto 0; display: flex; justify-content: center; } .portfolio-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-ui); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-ui); color: var(--orange); border: 1.5px solid color-mix(in srgb, var(--orange) 50%, transparent); border-radius: var(--radius-pill); padding: 0.9em 1.8em; background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 5%, var(--charcoal)), var(--charcoal)); box-shadow: var(--shadow-soft-raised), inset 0 1px 0 rgba(var(--cream-rgb), 0.07); transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out); } .portfolio-cta svg { width: 1.05rem; transition: transform 0.3s var(--ease-out); } .portfolio-cta:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-soft-raised), 0 14px 34px -18px rgba(var(--orange-rgb), 0.75); } .portfolio-cta:hover svg { transform: translateX(4px); } /* the button takes the press: raised state swaps for the inset pair */ .portfolio-cta:active { transform: translateY(0); box-shadow: var(--shadow-soft-pressed); } @media (max-width: 560px) { .portfolio-note { text-align: left; margin-left: 0; } } /* ============================================================ WHY CHOOSE US — cream, image cluster left / the argument right The band that answers "why you" before .process answers "how". It shares one .cream-field with .process rather than carrying a plate of its own, so the printed ground runs unbroken across both and the grain never restarts mid-field. Only position and isolation are needed here: they hold the corner mark above the wrapper's plate, since both sit at z-index -1 and the isolation is what stops this section's mark falling behind it. The composition is the Figma's, translated into the page's own language. Every overlap is a percentage of the stage rather than a fixed offset, so the cluster keeps its proportions from 1440 down to the point where there is no longer room to overlap in at all — at which point the two loose pieces stop floating and stack under the plate instead. ============================================================ */ .why { position: relative; isolation: isolate; padding: var(--section-y) var(--gutter) clamp(3rem, 7vh, 5rem); max-width: var(--container); margin: 0 auto; } /* the label introduces the whole band rather than a heading directly beneath it, so it keeps the wider shared gap rather than the tight head gap */ .why > .section-label { margin-bottom: clamp(2rem, 5vw, 3.25rem); } .why-grid { display: grid; /* the stage is given slightly less than the copy: a photo carries at a smaller size than a paragraph does, and the copy column has to hold a heading, a deck, a plate and a footer row without any of them cramping */ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } /* ---------- the image cluster ---------- */ .why-stage { position: relative; /* the room the framed inset hangs into below the main plate */ padding-bottom: clamp(2rem, 6%, 3.5rem); } .why-shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); } .why-shot img { width: 100%; height: 100%; object-fit: cover; } /* The main plate is indented from the left so the stat card has an edge to break without hanging into the page gutter — the Figma hangs it outside the column, which a fluid grid cannot do without risking overflow at the narrow end. Indenting the photo instead buys the same overlap and stays on grid. */ .why-shot--main { margin-left: 14%; aspect-ratio: 460 / 514; box-shadow: var(--shadow-card); } /* the second photo, framed in the accent and dropped below the plate's bottom-right corner so the group has a diagonal to read along */ .why-shot--inset { position: absolute; right: 0; bottom: 0; z-index: 1; width: 42%; aspect-ratio: 203 / 257; border: 4px solid var(--orange); box-shadow: var(--shadow-card-hover); } /* Until the 560px block below, this wrapper generates no box at all: the inset and the stat card resolve their absolute positions against .why-stage exactly as if they were its own children. It exists only so both can be pulled out of the composition together at the narrow end. */ .why-cluster { display: contents; } /* the one lit surface in the section — orange plate, ink type, which is the page's accent convention (see .btn-accent) rather than the white-on-orange the reference used */ .why-stat { position: absolute; left: 0; top: 14%; z-index: 2; width: min(58%, 15.5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; padding: 1.05rem 1.2rem; background: var(--orange); color: var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); } /* the exported glyph is white, which is the one colour that cannot sit on the accent. brightness(0) drives any colour to black while leaving the alpha alone, so the icon lands on the same ink as the type beside it. */ .why-stat__ico { width: clamp(1.9rem, 3.2vw, 2.6rem); height: auto; filter: brightness(0); opacity: 0.82; } .why-stat__body { min-width: 0; } .why-stat__num { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--ls-heading); } .why-stat__label { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: var(--fs-ui-sm); text-transform: uppercase; letter-spacing: var(--ls-ui); line-height: 1.4; /* the label is a fixed six words set in tracked caps, so it lands within a word of the card's width at almost every size and drops a one-word last line. Balanced, it splits evenly instead. */ text-wrap: balance; } /* ---------- the argument ---------- */ .why-copy { min-width: 0; } .why-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; } .why-title span { color: var(--orange); } .why-lead { max-width: var(--measure); margin-top: clamp(1.1rem, 2.5vh, 1.6rem); color: var(--muted); line-height: var(--lh-body); text-wrap: pretty; } /* The three proofs take a dark plate on the cream, which is the same contrast the reference used and the reverse of the ground around it — the one block in the band you cannot skim past. The accent rule down its leading edge is the label bar at section scale. */ .why-points { margin-top: clamp(1.8rem, 4vh, 2.6rem); padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.35rem, 3vw, 1.9rem); background: var(--charcoal); border-left: 4px solid var(--orange); border-radius: 0 var(--radius-card) var(--radius-card) 0; box-shadow: var(--shadow-card); display: grid; gap: 0.8rem; } .why-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--cream-mute); text-wrap: pretty; } .why-points svg { width: 1.15rem; height: 1.15rem; color: var(--orange); /* optically centred on the first line rather than its box */ margin-top: 0.3em; } .why-points strong { color: var(--cream); font-weight: 600; } /* ---------- footer row: the call, and who is behind it ---------- */ .why-foot { margin-top: clamp(1.8rem, 4vh, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.1rem, 3vw, 2.25rem); } .why-sign { margin: 0; display: flex; align-items: center; gap: 0.9rem; } /* the ring is drawn in shadow rather than in border and padding: a padded border would round the border box and leave the photo square inside it */ .why-sign img { width: clamp(3rem, 5vw, 3.6rem); height: clamp(3rem, 5vw, 3.6rem); border-radius: var(--radius-pill); object-fit: cover; box-shadow: 0 0 0 3px var(--cream-plate), 0 0 0 5px var(--orange); } .why-sign__name { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: var(--ls-caps); line-height: 1.2; } .why-sign__role { display: block; margin-top: 0.2rem; font-family: var(--font-mono); font-size: var(--fs-ui-sm); text-transform: uppercase; letter-spacing: var(--ls-ui); color: var(--muted); } /* ============================================================ PROCESS The section takes the same printed ground as the services field, and shares it with .why: the plate is no longer this section's own child but the wrapper's, and one plate spans the pair. What stays here is the position and the isolation — each keeps the corner mark above that plate rather than behind it, since both sit at z-index -1. ============================================================ */ .process { position: relative; isolation: isolate; padding: var(--section-y) var(--gutter); max-width: var(--container); margin: 0 auto; } /* the label sat alone above the steps before; it now introduces a heading, so it takes the tighter label gap the other section heads use */ .process-head { max-width: 46rem; } .process-head .section-label { margin-bottom: clamp(0.9rem, 2vh, 1.35rem); } .process-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; text-wrap: balance; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; border-top: 2px solid var(--ink); } .process-step { position: relative; overflow: hidden; padding: 2rem 1.75rem 2.5rem 0; border-right: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); padding-left: 1.75rem; } .process-step:first-child { padding-left: 0; } .process-step:last-child { border-right: none; } /* soft accent glow behind each step - a warm bloom from the icon corner, faint enough to read as light on the cream, not as a filled card. It lifts a touch on hover so the whole step warms with the icon. */ .process-step::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 55% at 82% 6%, rgba(var(--orange-rgb), 0.10) 0%, transparent 62%), radial-gradient(85% 65% at 10% 104%, rgba(var(--orange-rgb), 0.05) 0%, transparent 70%); opacity: 0.8; transition: opacity 0.45s var(--ease-out); } .process-step:hover::before { opacity: 1; } /* decorative watermark icon, top-right — neutral by default, blooms orange on hover */ .process-ico { position: absolute; top: 1.6rem; right: 1.25rem; width: clamp(2.6rem, 4.5vw, 3.6rem); height: auto; z-index: 0; opacity: 0.14; filter: grayscale(1) brightness(0.35); transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out), transform 0.5s var(--ease-out); pointer-events: none; } /* Listen (01) and Build (03) icons 10% larger */ .process-step:nth-child(1) .process-ico, .process-step:nth-child(3) .process-ico { width: clamp(2.86rem, 4.95vw, 3.96rem); } .process-step:last-child .process-ico { right: 0; } .process-step:hover .process-ico { opacity: 0.85; filter: grayscale(0) brightness(1); transform: translateY(-3px) rotate(-4deg); } .process-num, .process-step h3, .process-step p { position: relative; z-index: 1; } .process-num { font-family: var(--font-display); font-weight: var(--fw-display); /* --fs-h1 taken down 8%. Scaling the token rather than pinning a size keeps the step fluid, so the numeral still interpolates with the viewport and still sits in a fixed relation to every other h1-scale thing on the page - it is just a consistent 8% quieter than it was at each width. The stroke stays at 1.5px: 8% of it is a sixth of a pixel, and hairline strokes below 1.5 render unevenly across browsers. */ font-size: calc(var(--fs-h1) * 0.92); color: transparent; -webkit-text-stroke: 1.5px var(--ink); display: block; line-height: 1; transition: color 0.4s; } .process-step:hover .process-num { color: var(--orange); -webkit-text-stroke-color: var(--orange); } .process-step h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h5); margin: 1.2rem 0 0.5rem; text-transform: uppercase; line-height: var(--lh-heading); letter-spacing: var(--ls-caps); } .process-step p { /* four columns hold the measure on their own, but the list drops to two columns at 900 and one at 720 — where a step would otherwise run the full container width */ max-width: var(--measure); font-size: var(--fs-body-sm); color: var(--muted); line-height: var(--lh-body); text-wrap: pretty; } /* ============================================================ FAQ + CONTACT ============================================================ */ .connect { background: var(--cream-deep); padding: var(--section-y) var(--gutter); border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .connect-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .connect-heading { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-display); line-height: var(--lh-display); margin-bottom: clamp(2rem, 5vh, 3.5rem); } .connect-heading-light { color: var(--cream); } /* ---- FAQ accordion ---- Each question is its own raised card rather than a row in one ruled list. The column sits beside a solid dark plate now, and a single hairline-ruled list reads as unbuilt next to that much mass - a stack of separate cards answers it with weight of its own. The card carries the horizontal padding and the button keeps the vertical, so an open answer stays inside the same plate as the question that opened it. */ .faq-list { display: flex; flex-direction: column; gap: 0; /* the heavier rule that opens the list, the way a printed table of contents opens on one */ border-top: 2px solid var(--ink); } .faq-item { background: none; border: 0; /* one hairline between questions and nothing else: no plate, no corner, no drop. The list sits straight on the warm ground it is printed on. */ border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 0; padding: 0; box-shadow: none; } /* the open row takes the accent on its question only — the rule underneath is structure, and tinting it would make the list look like it had lost a row */ .faq-item.open .faq-q { color: var(--orange); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; padding: clamp(1.4rem, 3vh, 2rem) 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h5); text-transform: uppercase; /* caps at 22px want a positive fit — the display tracking is cut for 40px+ and closes these questions up */ letter-spacing: var(--ls-caps); line-height: var(--lh-heading); color: var(--ink); transition: color 0.3s var(--ease-out); } .faq-q:hover { color: var(--orange); } /* plus icon that rotates to an x on open */ .faq-icon { position: relative; width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform 0.35s var(--ease-out); } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; transition: transform 0.35s var(--ease-out); } .faq-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .faq-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .faq-item.open .faq-icon { transform: rotate(135deg); } .faq-a { overflow: hidden; height: 0; opacity: 0; transition: height 0.35s var(--ease-out), opacity 0.3s var(--ease-out); } .faq-item.open .faq-a { opacity: 1; } .faq-a-inner { padding-bottom: clamp(1.4rem, 3vh, 2rem); } .faq-a-inner p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); max-width: var(--measure); text-wrap: pretty; } /* ---- contact panel ---- */ .contact-panel { background: var(--ink); color: var(--cream); border-radius: var(--radius-panel); padding: clamp(2rem, 4vw, 3.2rem); } .contact-panel .section-label { color: var(--muted-light); } /* gap was 2rem. Each field already reserves a line under it for its validation message, so the space between one control and the next label was that reserve plus a full 2rem on top - the stack read padded rather than airy. */ .contact-form { display: flex; flex-direction: column; gap: 1.3rem; } .field { position: relative; } /* Two controls to a line - the first/last name pair, which is the only pair in the form whose labels are short enough to hold a half column at every width the panel reaches. The column gap is the same 1.3rem the form stacks with, so a pair reads as one interval wide rather than a tighter or looser one, and grid rows keep the two halves' baselines together even when only one of them has an error message showing. */ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; } .field input, .field textarea, .field select { width: 100%; background: none; border: none; border-bottom: 1.5px solid color-mix(in srgb, var(--cream) 30%, transparent); /* 0.7rem before. This lands the text controls at 45px, a pixel over the 44px floor for a comfortable touch target, so the padding does not come down any further. The select renders ~4px shorter than the rest whatever it is given - a UA line-height difference that predates this - which is why the arrow below is positioned against the select's own box rather than a shared one. */ padding: 0.55rem 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--cream); border-radius: 0; transition: border-color 0.3s var(--ease-out); } .field textarea { resize: vertical; min-height: 3rem; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--orange); } /* Autofill. A browser that has filled a field paints its own plate and its own dark text over it - Chrome a pale blue, Firefox a pale yellow - which on this panel reads as a lit box dropped onto the black, with the value in near-black on top of it. background-color cannot be set on a filled control, the UA rule wins, so the plate is covered instead: an inset shadow with a spread wide enough to flood the box, in the same --ink the panel is painted with, so it is invisible against it. The glyphs need -webkit-text-fill-color rather than color, which the UA style also overrides, and the long transition outruns the UA's own fade back to its colour after the field is filled. Two rules rather than one list: :autofill is the standard pseudo-class and :-webkit-autofill the prefixed one, and a browser that does not know a selector throws out the whole rule it appears in - so listing them together would lose the declarations in every browser that only knows one of them. */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field textarea:-webkit-autofill, .field select:-webkit-autofill { -webkit-text-fill-color: var(--cream); box-shadow: 0 0 0 100px var(--ink) inset; caret-color: var(--cream); transition: background-color 9999s ease-in-out 0s; } .field input:autofill, .field input:autofill:hover, .field input:autofill:focus, .field textarea:autofill, .field select:autofill { -webkit-text-fill-color: var(--cream); box-shadow: 0 0 0 100px var(--ink) inset; caret-color: var(--cream); transition: background-color 9999s ease-in-out 0s; } /* floating labels */ .field label { position: absolute; left: 0; /* matches the control's top padding: the resting label has to sit on the same line the typed value will, so this moves whenever that padding does */ top: 0.55rem; font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: 0.02em; color: var(--muted-light); pointer-events: none; transition: transform 0.28s var(--ease-out), font-size 0.28s var(--ease-out), color 0.28s var(--ease-out); transform-origin: left center; } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field select:focus + label, .field select:valid + label { /* 1.6rem before. The label now starts 0.15rem higher, so the float shortens by the same amount and the raised label ends up exactly where it used to. */ transform: translateY(-1.45rem); font-size: var(--fs-ui-sm); text-transform: uppercase; letter-spacing: 0.14em; color: var(--orange); } /* custom select */ .field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2rem; } .field select option { background: var(--ink); color: var(--cream); } .field-select { position: relative; } .select-arrow { position: absolute; right: 0.2rem; /* centred on a 44px control rather than the old 49px one */ top: 0.85rem; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); pointer-events: none; transition: transform 0.3s var(--ease-out); } .field-select:focus-within .select-arrow { transform: rotate(225deg); top: 1.05rem; } /* validation */ .field-msg { display: block; font-family: var(--font-mono); font-size: var(--fs-ui-sm); letter-spacing: 0.06em; color: var(--orange); margin-top: 0.3rem; /* Left at 0.9rem on purpose while everything around it came down. This is the space held open for a validation message so the form does not jump when one appears, and it is already 5px short of the line it has to hold - taking it lower to save height would buy ~6px and make that jump worse. */ min-height: 0.9rem; opacity: 0; transform: translateY(-4px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .field.invalid .field-msg { opacity: 1; transform: translateY(0); } .field.invalid input, .field.invalid textarea, .field.invalid select { border-bottom-color: var(--orange); } /* submit — accent button on the dark panel */ .form-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--orange); color: var(--ink); border: 1.5px solid var(--orange); cursor: pointer; /* a real