/* ============================================================================= Austra Digital v12 — layout/type system measured from the licensed Framer reference, recoloured to Austra cobalt, plus the v12 motion/interaction layer specified in docs/ANIMATION-BRIEF-v12.md. Rules held throughout: · every pre-animation hidden state is gated behind .js-enabled, so with JS disabled the page renders fully visible · .js-fallback (set by the net) force-unhides everything · prefers-reduced-motion collapses every sequence to its final visible state · no animation of width/height/top/left during scroll — transform+opacity only ========================================================================== */ /* Self-hosted Archivo (variable, latin subset). Single file covers 300–800; no Google Fonts dependency — fully offline. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo.woff2') format('woff2'); } :root { /* surfaces */ --bg: #fbfbfc; --card: #ffffff; --band: #f1f2f4; --ink: #131519; /* deep charcoal — CTA band */ /* text */ --text: #24272d; --muted: #4e535b; --tertiary: #666c76; /* lines + accent v15 keeps v14's monochrome discipline — labels stay silver-grey — and gives ONE colour to the things that mean "act" or "active": CTAs, prices, ticks, the rail, active states. Emerald is applied as a GRADIENT on surfaces (buttons, badges, dots, rails) and as a SOLID on text, because a gradient on text makes contrast unverifiable. --accent is the solid; --grad-* are the surface stops. */ --hairline: #d6d9de; --accent: #3d444e; /* brushed steel — 9.5:1 on the page, 8.8:1 on band sections */ --accent-dk: #2f353d; --accent-mid:#5a616c; /* silver-grey, for labels — unchanged from v14 */ /* SILVER FOLLOWS THE GOLD INVERSION, NOT THE COBALT RULE. Polished metal is a LIGHT surface, so it cannot carry white text — it carries a near-black label. And silver as TEXT is impossible: a darkened silver is just grey, so the solid becomes the brushed steel above. v17b lifts the whole ramp. The material still comes from --metal-inset, not from colour, but the face now sits close to the page at the lit corner and only separates at the shaded one. The SILHOUETTE is carried by the bottom stop plus the cast shadow — not by darkening the face. Stops vs --on-metal: #f8fafc = 17.3 · #edf1f6 = 16.0 · #cfd6e0 = 12.4. Composited under the label, worst case in any state: 13.0:1. Darkest composited face pixel vs the page: 1.63:1, down from 2.11:1 in v17a — lighter, but still a defined object. An earlier attempt that ENDED light (~1.06:1 everywhere) dissolved into the page; this one only STARTS light. That is the whole difference. */ --on-metal: #14161a; /* the label colour on any metal surface */ --gem-lit: #ffffff; /* brightest polish — decoration only (hero rail) */ --grad-a: #f8fafc; /* lit corner — 17.3:1 vs --on-metal */ --grad-m: #edf1f6; /* body — 16.0:1 */ --grad-b: #cfd6e0; /* shaded corner — 12.4:1, and 1.42:1 vs the page */ --grad: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-m) 48%, var(--grad-b) 100%); /* Hover brightening, painted on ::after and cross-faded with OPACITY — background-image does not interpolate, and opacity is the one property this build is happy to animate. Directional, so the shaded corner (and therefore the silhouette) survives the hover. */ --metal-sheen: linear-gradient(135deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, 0) 100%); --metal-edge:rgba(20, 22, 26, .16); /* the cut edge — used by .pc-badge */ --metal-back:#aab2be; /* fallback body only; 8.5:1 vs --on-metal if ::before ever fails to paint. No longer shows as the rim. */ --metal-rim: rgba(72, 80, 92, .55); /* the pressed rim. A rim reads as pressed because it is darker THAN THE FACE, not because it is near-black. Steel, not #3a414b. */ /* THE MATERIAL. All in em so .btn-sm and .drawer-cta get a proportionally smaller bevel. Two dark layers pulled back (.22->.13, .20->.12) and two white layers pushed up (.30->.42, .28->.34) — the dome survives, the weight does not. */ --metal-inset: -0.05em -0.05em 0.05em 0 inset rgba(20, 22, 26, .13), 0 0 0.05em 0.2em inset rgba(255, 255, 255, .42), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, .34), -0.075em -0.22em 0.22em 0.08em inset rgba(20, 22, 26, .12); /* PRESSED. Layer 1 is a spread-only inset ring — it draws the rim by REPAINTING, not by moving geometry. So `inset` never animates (the file's own header rule forbids animating top/left), border-radius draws and antialiases the curve itself, and the em unit still scales it. This replaces BOTH the reference's clip-path and v17a's inset:-1px->1px. */ --metal-inset-in: 0 0 0 0.075em inset var(--metal-rim), 0.09em 0.13em 0.10em 0 inset rgba(20, 22, 26, .28), -0.03em -0.04em 0.07em 0.02em inset rgba(20, 22, 26, .22), 0.20em 0.20em 0.20em 0 inset rgba(20, 22, 26, .16), 0 0 0.05em 0.42em inset rgba(255, 255, 255, .22), -0.075em -0.12em 0.20em 0.10em inset rgba(20, 22, 26, .12); --metal-lite:#d8dee6; /* silver on charcoal — 13.5:1 on the CTA band */ /* facet colours for the .gem field — LIGHT-SURFACE set (must be darker than the page or they vanish). Flipped to a light set on the charcoal band. */ --gf-a: #c0c7d1; --gf-b: #9aa3ae; --gf-c: #6f7784; --silver: #c3c9d1; --silver-lt: #e7eaee; /* radii */ --r-card: 40px; --r-round: 99px; /* rhythm */ --container: 1440px; --pad: 96px; --sec-gap: 72px; --grid-gap: 20px; --lift: 48px; /* section overlap */ /* INTERACTIVE BOUNDARIES — one ramp, three steps, mirroring the primary's rest -> hover -> press escalation. Every value clears 3:1 (WCAG 1.4.11) on all three light surfaces the page uses. --hairline (1.37:1 on the page, 1.26:1 on --band) stays DECORATIVE and is never a control boundary again. --edge 3.36 page · 3.47 card · 3.10 band --edge-on 4.56 page · 4.72 card · 4.21 band --accent 9.51 page · 9.83 card · 8.78 band #8b919b (v14's value) was retired from control borders: it measures 2.83:1 on --band, and .btn-ghost and .faq-ico both sit on --band. */ --edge: #848a94; --edge-on: #6d747e; /* The focus ring colour is a VARIABLE so dark surfaces can re-point it. --accent is 9.51:1 on the page but 1.86:1 on the footer ink — a focus indicator you cannot see is not a focus indicator. */ --focus: var(--accent); /* ---- SHADOW TEST (v17e) — REVERT BY SETTING THESE FOUR BACK --------------- was: --sh-a .30 --sh-b .34 --sh-hover .40 --sh-lift .26 Deeper hover shadow on light sections, and the same shape inverted to WHITE on dark ones — on --ink a black shadow is invisible, so a raised object on the CTA band and the footer had no lift at all. Every consumer reads these tokens, so this whole experiment is four numbers wide. */ --sh-a: .42; --sh-b: .48; --sh-hover: .58; --sh-lift: .36; --sh: rgba(20, 30, 70, var(--sh-b)); --sh-tight: rgba(20, 30, 70, var(--sh-a)); --sh-deep: rgba(20, 30, 70, var(--sh-hover)); --sh-ghost: rgba(20, 30, 70, var(--sh-lift)); /* motion */ --e-out: cubic-bezier(.22, 1, .36, 1); --e-back: cubic-bezier(.34, 1.4, .64, 1); /* ---- MARKER FAMILY ------------------------------------------------------- Every circular marker on this site is one of two things: a STATE DOT with nothing inside it, or a MARK DISC that carries a glyph. Before this there were 8 diameters, 5 ring specs, 7 transition lists and 5 "active" scales across 14 markers. Sizes still differ by role — a 1px-rail dot and a 64px numbered token are not the same object — but the GRAMMAR is now shared: one radius, one ring rule, three states, one active increment. Tier A states: idle = hairline ring, no fill done = filled silver, silver ring live = metal face + accent ring + halo (an ::after, so it is revealed by OPACITY and can therefore animate) */ --dot-xs: 8px; /* inline with text: .status-pill .dot, .ts-dot */ --dot-sm: 9px; /* on the hero rail: .fn-dot — 9 keeps top:3 centred on the 1px rail at 7.5px. Do not change to 10. */ --dot-md: 14px; /* sequence nodes: .sn-dot, .badge-core */ --mark-md: 22px; /* glyph discs: .tick, .cmp-x */ --dot-ring: 2px; /* >= 12px */ --dot-ring-thin: 1.5px; /* < 12px */ --dot-idle: var(--hairline); --dot-done: #aab2bd; --dot-mute: #e3e6ea; /* the recede, on decorative graphics only */ --dot-pop: 1.15; /* tier A */ --mark-pop: 1.08; /* tier B — 15% of 22px shoves the baseline, 15% of 8px does not. Equal visual increment, not equal factor. */ --dot-t: box-shadow .3s linear, background-color .3s linear, transform .3s var(--e-back); /* The ONLY two hues on this site, and they exist for exactly one component: the x/tick comparison, where a red and a green are adjacent and opposed. Chosen for LIGHTNESS as much as hue — #a3453b sits at --tertiary's greyscale value and #1c5340 at --accent's, so desaturating the page preserves the existing "left column is lighter" hierarchy (1.48:1 grey). Measured: x 5.07:1 on its disc, tick 7.30:1 on its disc; both >= 3:1 for WCAG 1.4.11 and both >= 4.5:1 if ever used as text. NOTE: for a protanope these two are 1.11:1 — the SAME COLOUR. The glyph shape carries the meaning; colour is a bonus for those who can see it. Never reduce these marks to two coloured dots. */ --mark-no: #a3453b; --mark-yes: #1c5340; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 18px; font-weight: 300; line-height: 1.5; } img, svg { max-width: 100%; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: normal; } /* h1-h5 set margin, weight and tracking but never line-height, so 33 heading elements were inheriting body's 1.5 — a 34px heading carrying 51px of leading. Specificity (0,0,1), so any component that already decided still wins. */ h3, h4, h5 { line-height: 1.2; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } /* The skip link was a metal surface with no material — background: var(--grad) and no shadow, so it read as a flat swatch rather than the same object as the button. The bevel is in em and body font-size is 18px, so it scales for free. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background-image: var(--grad); background-color: var(--metal-back); color: var(--on-metal); padding: 12px 20px; border-radius: 0 0 var(--r-round) 0; box-shadow: var(--metal-inset), 0 0.40em 0.90em -0.55em var(--sh); } .skip:focus { left: 0; } /* :focus, not :focus-visible — a skip link must show for every focus path, and is never mouse-focused. */ /* Focus ring. Drawn 3px OUTSIDE the control, so on .btn-primary it lands on the page background, never on the metal face. outline follows border-radius, so pills get a pill ring with no clip-path. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* Arriving at /#how from another page, the browser's native hash jump lands the section at 0 — underneath the 112px fixed header. Clicking the same link in-page, Lenis lands it at 112. Same anchor, two different results depending on how you got there. */ section[id], .cta-band[id], main[id] { scroll-margin-top: 112px; } /* ============================================================================= MARKER FAMILY — the shared recipe. Tokens live in :root. ========================================================================== */ .status-pill .dot, .ts-dot, .fn-dot, .sn-dot, .badge-core { border-radius: var(--r-round); background: var(--dot-fill, transparent); box-shadow: inset 0 0 0 var(--dot-ring, 2px) var(--dot-line, var(--dot-idle)); transition: var(--dot-t); } .status-pill .dot, .ts-dot { position: relative; display: inline-block; flex: none; } /* THE LIVE OVERLAY. One rule, one property: "lit" is opacity 1, everywhere. A background-image cannot be interpolated, so the metal face has to live on a pseudo if any state is ever going to animate — and on the hero rail it is. */ .status-pill .dot::after, .ts-dot::after, .fn-dot::after, .sn-dot::after, .badge-core::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--grad); box-shadow: inset 0 0 0 var(--dot-ring, 2px) var(--accent), 0 0 0 3px rgba(61, 68, 78, .13); opacity: 0; transition: opacity .3s linear; } .status-pill .dot, .ts-dot { width: var(--dot-xs); height: var(--dot-xs); --dot-ring: var(--dot-ring-thin); } .fn-dot { width: var(--dot-sm); height: var(--dot-sm); --dot-ring: var(--dot-ring-thin); } .sn-dot, .badge-core { width: var(--dot-md); height: var(--dot-md); } /* Dark surfaces re-point the token. --metal-lite is 13.50:1 on the footer ink. .qform is a WHITE panel nested inside .cta-band, so it must reset to --accent (--metal-lite would be 1.35:1 on white). Inheritance handles the nesting. */ .footer, .cta-band { --focus: var(--metal-lite); } .qform, .form-done { --focus: var(--accent); } /* ---------- layout primitives ---------- */ .container { max-width: var(--container); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .section { padding: var(--sec-gap) 0; position: relative; } /* Layered section transition: each section rises over the previous one with rounded top corners. Backgrounds alternate so the seam is visible. */ .sec-lift { border-radius: var(--r-card) var(--r-card) 0 0; margin-top: calc(var(--lift) * -1); padding-top: calc(var(--sec-gap) + var(--lift)); background: var(--bg); z-index: 1; } #system, #process, #team, #faq { background: var(--band); } /* ---------- type scale ---------- */ /* Was a flat 42px in an otherwise fluid file, which made the page's h1 SMALLER than its h2 from 621px to 1167px (ratio 0.81 at 621-900), with an 89% jump across the single pixel between 620 and 621. Fluid, so the ladder holds at every width. -0.015em tracking re-wraps nothing (verified at 10 viewports — negative tracking can only remove wraps, never add them). */ h2 { font-size: clamp(30px, 2.9vw, 42px); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase; } .eyebrow { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--accent-mid); margin-bottom: 14px; } .lead { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--muted); } .sec-head { max-width: 940px; margin-bottom: 44px; } .sec-lead { margin-top: 18px; max-width: 68ch; } /* ---------- buttons ---------- */ .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 400; line-height: 1; padding: 18px 30px; border-radius: var(--r-round); border: 1px solid transparent; cursor: pointer; transition: background-color .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .35s var(--e-out), box-shadow .35s var(--e-out); } .btn-primary { isolation: isolate; background: var(--metal-back); /* fallback body only — never seen */ color: var(--on-metal); border-color: transparent; font-weight: 500; /* the site's shadow family: blue-tinted, wide blur, heavy negative spread. In em so .btn-sm scales with it. This is .review's shadow, sized down. */ box-shadow: 0 0.06em 0.10em -0.045em var(--sh-tight), 0 0.40em 0.90em -0.55em var(--sh); /* --e-back for the lift (matches .sn-dot / .review), --e-out for the shadow, linear for colour. No `ease` — it appears nowhere else in this file. */ transition: transform .35s var(--e-back), box-shadow .35s var(--e-out), color .3s linear; } /* THE FACE. -1px, not 0: an absolutely positioned pseudo resolves inset against the PADDING box, so at inset:0 the .btn 1px border leaks the body. inset is now CONSTANT in every state — the press is box-shadow only. */ .btn-primary::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background-image: var(--grad); box-shadow: var(--metal-inset); transition: box-shadow .35s var(--e-out); } /* THE SHEEN. The third layer, free on .btn. Opacity only. */ .btn-primary::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; background-image: var(--metal-sheen); opacity: 0; transition: opacity .35s linear; } /* HOVER = lift and brighten, like every other hover on this site. The cast shadow GROWS (cards gain shadow on hover here; nothing loses it). Geometry does not change, so there is no jitter and no disagreement with .arw, which is also moving outward at .38s var(--e-out). */ .btn-primary:hover, .btn-primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0.06em 0.10em -0.045em var(--sh-ghost), 0 0.72em 1.45em -0.60em var(--sh-deep); } .btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; } /* .btn:active MUST stay ABOVE .btn-primary:active — identical specificity, so the later rule wins. Having it below silently killed the primary's press. */ .btn:active { transform: scale(.985); box-shadow: none; } /* ACTIVE = the press, which is where the skeuomorphism belongs. The face takes the pressed stack including its rim ring, the lift is given back, and the button settles onto the page. .985 matches .btn — one press speed for both buttons sitting together in .hero-cta. .12s because a press under the finger is a state change, not a transition. */ .btn-primary:active { transform: translateY(0) scale(.985); box-shadow: 0 0.045em 0.09em -0.03em var(--sh); transition-duration: .12s; } .btn-primary:active::before { box-shadow: var(--metal-inset-in); transition-duration: .12s; } .btn-primary:active::after { opacity: .3; transition-duration: .12s; } .btn-sm { font-size: 16px; padding: 12px 22px; } .btn-block { width: 100%; justify-content: center; } /* SECONDARY — the primary's gesture, one volume down. The old hover filled solid var(--text): a 14.5:1 slab standing next to a metal face whose darkest pixel is 1.63:1 against the page. The secondary action became the highest-contrast object on the screen, so the eye went to "See client work" instead of the primary CTA. And the old REST border was --hairline at 1.37:1 — below the 3:1 that identifies a control at all, which is WHY hover had to shout. Separation is now by MATERIAL, not gesture: the primary is the only filled object with a cast shadow, in every state. */ .btn-ghost { background: transparent; color: var(--text); border-color: var(--edge); /* 3.36 page · 3.47 card · 3.10 band */ overflow: hidden; transition: color .3s linear, border-color .3s linear, transform .35s var(--e-back), box-shadow .35s var(--e-out); } /* border-radius on the pseudo, not just overflow:hidden — the curve is then drawn and antialiased by border-radius (no clip-path, no rectangular overflow clip). */ .btn-ghost::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(61, 68, 78, .09); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--e-out), box-shadow .35s var(--e-out); } /* label 12.54:1 on the composited fill · border 8.24:1 · fill vs page 1.15:1 */ .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 0.30em 0.60em -0.55em var(--sh-ghost); } .btn-ghost:hover::before, .btn-ghost:focus-visible::before { transform: scaleX(1); } /* MUST declare transform explicitly and MUST stay below :hover. .btn:active is further up the file at identical specificity, so a :hover transform with no matching :active transform silently kills the press — the same trap that killed .btn-primary:active in v17a. */ .btn-ghost:active { transform: translateY(0) scale(.985); border-color: var(--accent-dk); box-shadow: none; transition-duration: .12s; } .btn-ghost:active::before { transform: scaleX(1); box-shadow: inset 0 .09em .16em -.02em rgba(20, 22, 26, .18); transition-duration: .12s; } /* DISABLED — main.js sets #formSubmit.disabled during submit, and there was NO disabled style at all: measured live, the button kept cursor:pointer, the full metal face, the full cast shadow and a 12.38:1 label — identical to armed. opacity is deliberately NOT used: this build's verification counts text below opacity 1, and dimming a label is what the five safety nets exist to prevent. The light goes out of the MATERIAL instead. Label 12.38 -> 6.54:1, still well over AA, and main.js swaps it to "Sending…" so it says so in words too. */ .btn:disabled, .btn[aria-disabled="true"] { cursor: default; } .btn:disabled:hover, .btn:disabled:active, .btn[aria-disabled="true"]:hover { transform: none; } .btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus-visible, .btn-primary:disabled:active { color: var(--muted); background: #e9ecf1; box-shadow: none; transform: none; } .btn-primary:disabled::before { background-image: none; background-color: #e9ecf1; box-shadow: 0 0 0 1px inset var(--silver); } .btn-primary:disabled::after, .btn-primary:disabled:hover::after { opacity: 0; } .btn-primary:disabled .arw::before { transform: none; opacity: 1; } .btn-primary:disabled .arw::after { opacity: 0; } /* arrow swap: existing arrow exits upper-right, replacement enters lower-left */ .arw { position: relative; display: inline-block; flex: none; width: 1.05em; height: 1.25em; overflow: hidden; line-height: 1.25em; font-size: 1em; } .arw::before, .arw::after { content: '\2192'; position: absolute; inset: 0; text-align: center; line-height: 1.25em; transition: transform .38s var(--e-out), opacity .3s linear; } .arw::after { transform: translate3d(-110%, 110%, 0); opacity: 0; } .btn:hover .arw::before, .btn:focus-visible .arw::before { transform: translate3d(110%, -110%, 0); opacity: 0; } .btn:hover .arw::after, .btn:focus-visible .arw::after { transform: none; opacity: 1; } .arw-sm { font-size: .95em; } /* ============================================================================= NAV — transparent rounded shell → translucent blur, hides on scroll-down ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: 20px; padding-bottom: 4px; transition: transform .35s cubic-bezier(.4, 0, .2, 1), padding-top .3s var(--e-out); } .nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px; padding: 0 10px 0 22px; border: 1px solid transparent; border-radius: var(--r-round); transition: background-color .35s var(--e-out), border-color .35s var(--e-out), box-shadow .35s var(--e-out), backdrop-filter .35s var(--e-out); } .nav.is-stuck { padding-top: 12px; } .nav.is-stuck .nav-shell { background: rgba(252, 252, 252, .84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--hairline); box-shadow: 0 12px 34px -22px rgba(20, 30, 70, .38); } .nav.is-hidden { transform: translateY(-130%); } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; } .brand-mark { width: 18px; height: 18px; border-radius: var(--r-round); background: var(--grad); display: inline-block; } .nav-links { display: flex; gap: 32px; } .nav-links a { font-size: 17px; font-weight: 300; color: var(--muted); transition: color .25s linear, transform .25s var(--e-out); display: inline-block; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); transform: translateY(-1px); } /* a lifted thing must come back down when you press it — same .12s as the button */ .nav-links a:active { transform: translateY(0); transition-duration: .12s; } .nav-links a.is-active { color: var(--text); } .nav-right { display: flex; align-items: center; gap: 14px; } /* Below 900px this is the primary navigation control and it had a 1.37:1 boundary, no hover and no press. Press is scale(.94), not .985: the site's press is ~3px of travel on a 200-330px button, and .985 on a 44px square is 0.7px — sub-pixel, i.e. no feedback. Constant displacement, not constant ratio. */ .burger { display: none; width: 44px; height: 44px; border-radius: var(--r-round); border: 1px solid var(--edge); background: var(--card); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; transition: border-color .25s linear, background-color .25s linear, transform .25s var(--e-back); } .burger span { display: block; width: 18px; height: 1px; background: var(--text); transition: transform .3s var(--e-out); } .burger:hover { border-color: var(--edge-on); background: #f3f5f8; } .burger:active { transform: scale(.94); transition-duration: .12s; } .burger[aria-expanded="true"] { border-color: var(--accent); } .burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); } .drawer { position: fixed; top: 86px; left: 0; right: 0; z-index: 99; padding: 0 var(--pad); } .drawer[hidden] { display: none; } .drawer-inner { background: rgba(252, 252, 252, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--hairline); border-radius: 28px; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 16px; } .drawer a { font-size: 20px; color: var(--muted); transition: color .25s linear; } /* nav-links and foot-col both darken on hover AND focus; the drawer had neither. */ .drawer a:not(.btn):hover, .drawer a:not(.btn):focus-visible { color: var(--text); } .drawer .drawer-cta { align-self: flex-start; color: var(--on-metal); } /* ============================================================================= 1. HERO ========================================================================== */ /* 132, not 156: the nav shell ends at 86px, so this still leaves 46px of clear air above the pill, and it is the SAME value the <=900px breakpoint already uses — one number for the hero's top inset instead of two. Buys 24px of fold, which is what puts the whole rail plus its captions above a 900px viewport. */ .hero { position: relative; overflow: hidden; padding: 132px 0 var(--sec-gap); } .hero-bg { position: absolute; left: -8%; right: -8%; top: -14%; height: 128%; background: radial-gradient(46% 42% at 72% 12%, rgba(61, 68, 78, .07), transparent 70%), radial-gradient(52% 46% at 12% 44%, rgba(120, 130, 155, .12), transparent 72%); z-index: 0; pointer-events: none; } /* --- faceted gem field --------------------------------------------------- HARD-stop conic gradients radiating from a point, like the cut of a stone — here reading as polished metal catching light rather than a gem. The drama in a gem comes from sharp luminance jumps between adjacent facets, so this is deliberately NOT heavily blurred — a soft wash would read as a smudge, not a stone. Kept at low opacity so it is a texture behind the layout rather than a picture in front of it. Decorative only: no text ever sits on the lit facets. --------------------- */ .gem { position: absolute; inset: -25% -12% auto; height: 150%; z-index: 0; pointer-events: none; opacity: .15; filter: blur(26px) saturate(106%); /* Masked out of the middle: the facets belong at the edges of the frame, not across the headline. Keeps the refraction as peripheral atmosphere. */ -webkit-mask-image: radial-gradient(115% 95% at 46% 46%, transparent 0%, transparent 34%, #000 82%); mask-image: radial-gradient(115% 95% at 46% 46%, transparent 0%, transparent 34%, #000 82%); background: conic-gradient(from 198deg at 74% 8%, var(--gf-a) 0deg 9deg, transparent 9deg 21deg, var(--gf-b) 21deg 27deg, transparent 27deg 44deg, var(--gf-a) 44deg 51deg, transparent 51deg 68deg, var(--gf-c) 68deg 77deg, transparent 77deg 96deg, var(--gf-a) 96deg 103deg, transparent 103deg 124deg, var(--gf-b) 124deg 132deg, transparent 132deg 360deg), conic-gradient(from 22deg at 14% 66%, var(--gf-a) 0deg 7deg, transparent 7deg 26deg, var(--gf-b) 26deg 34deg, transparent 34deg 55deg, var(--gf-a) 55deg 61deg, transparent 61deg 84deg, var(--gf-c) 84deg 93deg, transparent 93deg 360deg); } .hero .gem { height: 138%; } /* on the charcoal CTA panel the same cut reads as light trapped inside the stone */ .cta-band .gem { /* flipped: on charcoal the facets have to be LIGHTER than the surface */ --gf-a: #ffffff; --gf-b: #d8dee6; --gf-c: #aab2bd; inset: 0 0 auto; height: 100%; opacity: .26; filter: blur(32px) saturate(112%); -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, transparent 0%, transparent 26%, #000 76%); mask-image: radial-gradient(110% 100% at 50% 50%, transparent 0%, transparent 26%, #000 76%); } .hero > .container { position: relative; z-index: 1; } .hero-copy { position: relative; } /* THE META ROW. The pill and the eyebrow were stacked: 44 + 26 + 27 + 14 = 111px and two lines of text before the promise, both of which say "Melbourne". They are the same KIND of thing — orientation, not argument — so they are now one row and one glance. align-items: center because the pill is a 44px object and the eyebrow a 24px line; baseline would hang the pill. flex-wrap means that below ~1274px the eyebrow drops under the pill by itself, with no media query. */ .hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px; } .hero-meta .status-pill { margin-bottom: 0; } /* The eyebrow was 18px/300 — the same size AND weight as the lead beneath it and as body copy, separated only by 1.45 units of contrast (6.04 vs 7.49:1). That is not a label, that is a first sentence. At 16px it matches the pill it now sits beside, so the row reads as one piece of furniture. Colour untouched: still 6.04:1. The ch cap is removed because it wrapped 16px type to two lines and un-levelled the row. */ .hero .eyebrow { font-size: 16px; line-height: 24px; margin-bottom: 0; max-width: none; } .status-pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 9px 18px; font-size: 16px; font-weight: 300; color: var(--muted); background: var(--card); margin-bottom: 26px; } /* "we are open" IS the live state — said in the family's words */ .status-pill .dot::after { opacity: 1; } /* 52px capped from a 1444px viewport up, against a 42px UPPERCASE h2, is a ratio of 1.24 — and uppercase carries more apparent mass per line, so the headline was barely louder than the section headings below it. 60px takes the ratio to 1.43. 4.4vw (not 3.6) keeps it growing to the cap instead of stalling early. line-height 1.04: 1.1 is body-copy leading and it opened a visible river between two 60px lines. max-width 34ch keeps the natural break long-over-short. */ .hero-title { font-size: clamp(38px, 4.4vw, 60px); font-weight: 600; line-height: 1.04; letter-spacing: -0.012em; max-width: 34ch; margin: 0 0 24px; } /* The flex row put .btn-primary's left edge at x=814.3 while every other line in the hero started at x=168.5 — the primary action was 646px off the axis the eye is already travelling down, and level with the paragraph's FIRST line rather than after it. It also needed 1082px of content width, so it silently collapsed to this same stacked layout below a ~1274px viewport: the hero had two personalities either side of a width nobody chose. Now it has one. */ .hero-body { display: block; margin-bottom: 32px; } .hero-body .lead { max-width: 58ch; margin-bottom: 32px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } .trust-strip { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 28px; margin-bottom: 44px; border-top: 1px solid var(--hairline); } .trust-strip li { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 300; color: var(--tertiary); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 8px 18px; background: var(--card); transition: color .28s linear, border-color .28s linear; } .trust-strip li:hover { color: var(--text); border-color: #aeb6c1; } .trust-strip li:hover .ts-dot { transform: scale(var(--dot-pop)); } .trust-strip li:hover .ts-dot::after { opacity: 1; } /* These are
  • , not controls — the boundary deliberately stays --hairline; a 3:1 edge would make static decoration look clickable. Only the mechanics change: the padding shift was NOT in the transition list, so the content snapped 2px while the colour eased over .28s. The transform transition below was already declared and never driven by anything — this wires it, which also takes the shift off the layout path. */ .trust-strip li > *:not(.ts-dot) { transition: transform .28s var(--e-out); } .trust-strip li:hover > *:not(.ts-dot) { transform: translateX(2px); } /* ---------- 2. hero system preview ---------- */ /* 4px scale. The hero's spacing ran 26/14/4/28/40/28/44 — seven values, no common step. Now 20/24/32/32/24/32. Hero-scoped so about.html's .page-head is untouched. */ .hero .trust-strip { padding-top: 24px; margin-bottom: 32px; } /* HORIZONTAL padding stays 40px: .flow-fill's width is a percentage of .flow-rail and main.js measures --rail off the dots, so narrowing the card horizontally would move both. Only the vertical padding changes. */ .flow-card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 32px 40px; } .flow-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); margin-bottom: 26px; } .flow-t { font-size: 22px; font-weight: 600; } .flow-s { font-size: 16px; font-weight: 300; color: var(--tertiary); } .flow-rail { position: relative; } /* The rail draws once on load and then STAYS lit — the glow is the point. A soft dot loops along it afterwards. */ .flow-fill { position: absolute; top: 7px; left: 7px; height: 1px; /* THE LIT LINE MUST END WHERE THE RAIL ENDS. `calc(100% - 14px)` ran it 202px (17% of the rail) past "Customer" into empty space — measured: the grey track ends at 956.8px, the lit line ended at 1159px. With five equal 1fr columns the last dot's left edge is exactly 80% + 0.8 x gap; +8px covers the last node's hairline stub, -7px for the left inset. Exact at any width, resize-proof, no JS. */ width: calc(80% + var(--grid-gap) * 0.8 + 1px); background: linear-gradient(90deg, var(--accent), var(--gem-lit) 50%, var(--accent)); box-shadow: 0 0 8px rgba(154, 163, 176, .8); z-index: 4; transform-origin: left center; } .js-enabled .flow-fill { transform: scaleX(0); } /* THE LIGHT. Same 9x9 box as .fn-dot, so at every beat it sits exactly ON the node instead of near it — the light and the lit dot are the same object. */ .flow-laser { position: absolute; top: 3px; left: 0; width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--r-round); background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 0 10px 3px rgba(170, 178, 189, .85), 0 0 26px 8px rgba(223, 228, 235, .5); opacity: 0; z-index: 5; pointer-events: none; will-change: transform, opacity; } /* comet trail — proportional to the rail, not a fixed 88px */ .flow-laser::before { content: ''; position: absolute; right: 60%; top: 50%; width: calc(var(--rail, 880px) / 10); height: 3px; margin-top: -1.5px; border-radius: var(--r-round); background: linear-gradient(90deg, rgba(138, 146, 158, 0), rgba(138, 146, 158, .85)); /* THE TRAIL WAS LEAVING THE CARD. At 1600: --rail 911px, so the trail is 91.09px wide at right: 60% of a 9px light. Parked on "Visitors" (the first 10% of every 4.8s cycle) its left edge sits at 122.0px while .flow-card's left edge is 168.5px with overflow: visible — a 46.5px grey streak hanging on the page background, on the card whose whole argument is that nothing leaks. Fixed with OPACITY, not clipping: clipping the rail would also cut the first dot's 3px halo and the lit line's 8px glow. The trail fades in across 10% -> 18% of the cycle; the light departs at 10% and by 18% has travelled 135px, so all 91px of trail is inside the rail before it is visible at all. It also reads better — the comet streaks because it is moving, instead of dragging a tail while parked. */ opacity: 0; } .flow-rail.is-live .flow-laser::before { animation: flowTrail 4.8s linear infinite; } @keyframes flowTrail { 0%, 10% { opacity: 0 } 18%, 60% { opacity: 1 } 66%, 100% { opacity: 0 } } /* CONSTANT VELOCITY. The old cubic-bezier(.62,0,.38,1) made the light crawl to node 2 in 1.091s, whip through 3 and 4 in 0.301s each, then crawl 1.091s to node 5 — a 3.6x velocity swing, which is why it read as a whip rather than a signal moving through a system. Linear across 10%->64% of 4.8s gives five equal 648ms beats. The life moves to the ENDS instead: the light fades up sitting on "Visitors", holds, travels, then holds lit on "Customer" before fading in place. It departs from a node and arrives at a node. */ .flow-rail.is-live .flow-laser { animation: flowLaser 4.8s linear infinite; } @keyframes flowLaser { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 4%, 10% { transform: translate3d(0, 0, 0); opacity: 1; } 64%, 76% { transform: translate3d(var(--rail, 0px), 0, 0); opacity: 1; } 88%, 100% { transform: translate3d(var(--rail, 0px), 0, 0); opacity: 0; } } /* THE PASS LIGHTS EACH NODE — and they hold lit TOGETHER at the end of every cycle before decaying as one. That is the section's whole argument, animated: the light travels, and then the system is connected. Crossing times are arithmetic, not guesses: node k arrives at 10% + 13.5k of the cycle. */ .flow-rail.is-live .flow-node:nth-child(1) .fn-dot::after { animation: fnLit1 4.8s linear infinite; } .flow-rail.is-live .flow-node:nth-child(2) .fn-dot::after { animation: fnLit2 4.8s linear infinite; } .flow-rail.is-live .flow-node:nth-child(3) .fn-dot::after { animation: fnLit3 4.8s linear infinite; } .flow-rail.is-live .flow-node:nth-child(4) .fn-dot::after { animation: fnLit4 4.8s linear infinite; } .flow-rail.is-live .flow-node:nth-child(5) .fn-dot::after { animation: fnLit5 4.8s linear infinite; } /* one class pauses the light and every node light together, always in phase */ .flow-rail.is-paused .flow-laser, .flow-rail.is-paused .flow-laser::before, .flow-rail.is-paused .fn-dot::after { animation-play-state: paused; } @keyframes fnLit1 { 0%, 4% { opacity: 0 } 9%, 78% { opacity: 1 } 90%, 100% { opacity: 0 } } @keyframes fnLit2 { 0%, 21.5%{ opacity: 0 } 26.5%, 78% { opacity: 1 } 90%, 100% { opacity: 0 } } @keyframes fnLit3 { 0%, 35% { opacity: 0 } 40%, 78% { opacity: 1 } 90%, 100% { opacity: 0 } } @keyframes fnLit4 { 0%, 48.5%{ opacity: 0 } 53.5%, 78% { opacity: 1 } 90%, 100% { opacity: 0 } } @keyframes fnLit5 { 0%, 62% { opacity: 0 } 67%, 78% { opacity: 1 } 90%, 100% { opacity: 0 } } .flow-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--grid-gap); position: relative; z-index: 3; } .flow-node { position: relative; padding-top: 26px; transition: transform .3s var(--e-out); } .flow-node::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 1px; background: var(--hairline); transition: background-color .3s linear; } .flow-node:first-child::before { left: 7px; } .flow-node:last-child::before { right: calc(100% - 8px); } .fn-dot { position: absolute; top: 3px; left: 0; } /* "is-key" = the parts we own. It used to paint --accent on BOTH the dot and the label — the same colour the travelling light uses, so the emphasis and the animation were fighting over one meaning. It is now the family's DONE state (filled silver); --accent means LIVE and nothing else. The label goes back to --text: 14.5:1, up from --accent's 9.5:1. */ .flow-node.is-key .fn-dot { --dot-fill: var(--dot-done); --dot-line: var(--dot-done); } .fn-lbl { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; transition: color .3s linear; } .fn-side { display: block; font-size: 16px; font-weight: 300; color: var(--tertiary); line-height: 1.45; transition: color .3s linear; } /* HOVER. Replaces `.flow-track:hover .flow-node { opacity: .65 }`, which dimmed real text — the one thing this build promises never to do. The tell now lives entirely in the DOT and the CONNECTOR, both aria-hidden decorative graphics with no contrast obligation. Every label stays at opacity 1 and its own colour, and the ONE text change in the whole interaction makes text DARKER: .fn-side 5.1:1 -> 7.5:1. The hovered node LIFTS, because every other hover on this site lifts and nothing else here scales a block of type (scaling text by 3.5% resamples the glyphs). */ .flow-track:hover .fn-dot { --dot-line: var(--dot-mute); } .flow-track:hover .flow-node::before { background: var(--dot-mute); } .flow-track .flow-node:hover { transform: translateY(-2px); } .flow-track .flow-node:hover::before { background: var(--accent-mid); } .flow-track .flow-node:hover .fn-dot { --dot-line: var(--accent); transform: scale(var(--dot-pop)); } .flow-track .flow-node:hover .fn-dot::after { opacity: 1; } .flow-track .flow-node:hover .fn-side { color: var(--muted); } .flow-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hairline); } .tag { font-size: 15px; font-weight: 300; color: var(--tertiary); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 7px 16px; } .tag-accent { color: var(--accent); border-color: var(--accent); } .tag { transition: color .25s linear, border-color .25s linear, transform .3s var(--e-out); } .tag:hover { color: var(--text); border-color: #aeb6c1; transform: translateY(-2px); } .tag-accent:hover { color: var(--accent-dk); border-color: var(--accent); } /* ============================================================================= 3. RECOGNITION ========================================================================== */ .recog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .recog-item { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 30px 32px; transition: transform .3s var(--e-back), border-color .3s linear, box-shadow .3s var(--e-out); } .recog-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(61, 68, 78, .07), transparent 62%); opacity: 0; transition: opacity .3s linear; } .recog-item p { font-size: 18px; font-weight: 300; line-height: 1.5; transition: transform .3s var(--e-out); } .recog-item:hover { transform: translateY(-6px); border-color: #aeb6c1; box-shadow: 0 16px 34px -20px rgba(20, 30, 70, .3); } .recog-item:hover::after { opacity: 1; } .recog-item:hover p { transform: translateY(-2px); } .recog-item:hover .tick { transform: scale(1.12); } /* Tier B — a mark disc: a 22px token that CARRIES A GLYPH. Shares the family's radius, transition and pop; the size differs because the job differs. */ .tick, .cmp-x { flex: none; position: relative; width: var(--mark-md); height: var(--mark-md); border-radius: var(--r-round); transition: transform .3s var(--e-back), background-color .3s linear; } .tick { margin-top: 3px; background: rgba(61, 68, 78, .12); } /* 6x10 at 1.8px = 28.8 stroke-px, matching the cross's 2 x 9 at 1.6px = 28.8. Rendered in greyscale the old 5x9 at 1.6px carried 29% LESS ink than the x, so the "bad" mark visually outweighed the "good" one. Equalised — and stroke mass then becomes a second non-colour channel on top of the shape. */ .tick::after { content: ''; position: absolute; left: 6.5px; top: 4px; width: 6px; height: 10px; border: solid var(--accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); } .recog-close { margin-top: 34px; max-width: 76ch; font-size: 18px; font-weight: 300; color: var(--muted); } .recog-close strong { font-weight: 600; color: var(--text); } /* ============================================================================= 4. GROWTH SYSTEM — sticky, scroll-scrubbed five-stage sequence ========================================================================== */ .sys-sec { padding-top: 26px; } .sys-scroll { position: relative; height: 260vh; } .sys-sticky { position: sticky; top: 11vh; height: 84vh; display: flex; align-items: center; } /* The rail column is sized to its content plus breathing room, not to a share of the grid. At 1.08fr/.92fr it was 541px wide holding ~130px of ink — 476px of void that read as a column that failed to load — while the h2 beside it broke to three lines. */ /* 208, not 292. The rail's labels only need 152.7px ("Follow up" + 38px pad); the 292 was set by .sys-done's single 274.1px line, which is opacity: 0 until the pin is 90% done — so for 90% of the scroll the reader saw 139.3px of void (47.7% of the column) beside every label. Measured after: 55.3px. */ .sys-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 208px); gap: 80px; align-items: center; width: 100%; } /* The section heading rides in the sticky column beside the changing stage. */ .sys-head { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--hairline); } .sys-head h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.12; max-width: 23em; } .sys-lead { margin-top: 14px; max-width: 50ch; font-size: 17px; } /* Tabular figures so "/ 05" cannot shift sideways when the stage number changes, and the live number in --text (13.4:1) rather than silver. */ .sys-count { font-size: 15px; font-weight: 400; letter-spacing: .1em; color: var(--accent-mid); margin-bottom: 14px; font-variant-numeric: tabular-nums; } .sys-count #sysNum { color: var(--text); font-weight: 600; } .sys-of { color: var(--tertiary); } /* 268px was ~100px taller than any real pane, which lifted the whole block and left a hole under the tags. Tallest measured: 167px at 1600, 210px at 1024 (where the tags wrap to two rows). 216px clears both. */ .sys-panes { position: relative; min-height: 226px; } .sys-pane h3 { font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; line-height: .95; text-transform: uppercase; margin-bottom: 14px; } /* the promise line and the tags were 20/300/--muted vs 17/300/--muted — two of three signals identical. Separated by colour alone: 6.91 -> 13.36:1. */ .sys-pane > p { font-size: 20px; font-weight: 300; color: var(--text); max-width: 46ch; margin-bottom: 26px; } /* DETERMINISTIC WRAPPING. Convert needs 829.1px for one row and 1280px can never offer more than 785, so a single row is unreachable at laptop widths — the fix is to make every stage wrap the SAME way instead of only one of them. The safe window is 466.7px (below it Convert breaks to three rows) to 590.0px (above it Improve fits one row and becomes the odd one out); 528 is the midpoint, +/-11.7%, which survives font-metric drift. Above 1400 there is room for all five on one row, so the cap is lifted there instead. */ .sys-tags { display: flex; flex-wrap: wrap; gap: 10px; max-width: 528px; } .sys-tags li { font-size: 17px; font-weight: 300; color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-round); padding: 10px 22px; background: var(--card); transition: transform .3s var(--e-out), border-color .3s linear, color .3s linear; } .sys-pane.is-active .sys-tags li:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); } /* Panes stack only while JS drives them; with JS off they flow as five blocks. */ .js-enabled .sys-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s var(--e-out), transform .45s var(--e-out); } .js-enabled .sys-pane.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .34s linear .1s, transform .5s var(--e-out) .06s; } .js-enabled .sys-pane.is-prev { transform: translateY(-14px); } .sys-rail { position: relative; padding-left: 38px; } .sys-line { position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--hairline); } /* Was --grad-a -> --accent. --grad-a is #f8fafc: 1.07:1 on this section's #f1f2f4 band, so the COMPLETED part of the progress line was invisible and only its leading edge read as progress. Silver-grey -> steel: 5.58:1 at the top, 8.78:1 at the leading edge. */ .sys-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--accent-mid), var(--accent)); transition: height .18s linear; } .sys-track { display: grid; gap: 26px; } .sys-node { position: relative; display: flex; align-items: center; gap: 14px; } .sn-dot { position: absolute; left: -38px; top: 50%; margin-top: -7px; /* opaque fill: the .sys-line rail passes UNDER this dot and must be masked */ --dot-fill: var(--band); /* This rail sits on --band, not on white, and the family's "live = metal face" renders NEAR-WHITE at 14px there (measured 1.07:1) — it would make the active marker the palest thing on the rail while completed dots sat solid. So the recipe is kept and its VALUES are re-pointed: idle #868c96 = 3.02:1, done --accent-mid = 5.58:1, live --accent = 8.78:1. Same grammar, values that survive the surface. */ --dot-line: #868c96; } .sn-lbl { font-size: clamp(20px, 2vw, 26px); font-weight: 600; color: var(--tertiary); transition: color .35s linear, transform .35s var(--e-out); } .sys-node.is-done .sn-dot { --dot-fill: var(--accent-mid); --dot-line: var(--accent-mid); } /* Completed stages read as "done, de-emphasised" via COLOUR, never opacity — text must always compute to opacity 1. */ .sys-node.is-done .sn-lbl { color: var(--muted); } .sys-node.is-active .sn-dot { --dot-fill: var(--accent); transform: scale(1.18); /* the ring and the halo in one declaration — a repaint, no geometry moves */ box-shadow: inset 0 0 0 var(--dot-ring) var(--accent), 0 0 0 6px rgba(61, 68, 78, .13); } .sys-node.is-active .sn-lbl { color: var(--text); } .sys-node:hover .sn-lbl { color: var(--accent); transform: translateX(3px); } .sys-node:hover .sn-dot { --dot-line: var(--accent); } /* Tag cascade — TRANSFORM ONLY. The tags never get their own opacity, so this adds ZERO new hidden-text surface: their visibility is entirely the pane's. Desktop-gated because below 1024px the scroll engine never sets is-active. */ @media (min-width: 1024px) { .js-enabled .sys-tags li { transform: translateY(12px); transition: transform .46s var(--e-out), border-color .3s linear, color .3s linear; } .js-enabled .sys-pane.is-active .sys-tags li { transform: none; } .js-enabled .sys-pane.is-active .sys-tags li:nth-child(1) { transition-delay: .12s; } .js-enabled .sys-pane.is-active .sys-tags li:nth-child(2) { transition-delay: .18s; } .js-enabled .sys-pane.is-active .sys-tags li:nth-child(3) { transition-delay: .24s; } .js-enabled .sys-pane.is-active .sys-tags li:nth-child(4) { transition-delay: .30s; } /* (0,5,1) beats the rule above (0,4,1), so hover always wins */ .js-enabled .sys-pane.is-active .sys-tags li:hover { transform: translateY(-3px); transition-delay: 0s; } } @media (min-width: 1400px) { .sys-tags { max-width: none; } .sys-panes { min-height: 170px; } } .sys-done { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 18px; font-weight: 600; color: var(--accent); } .js-enabled .sys-done { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--e-out), transform .5s var(--e-out); } .js-enabled .sys-scroll.is-complete .sys-done { opacity: 1; transform: none; } /* ============================================================================= 5. SELECTED CLIENT WORK ========================================================================== */ .case-lead { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px; } .case-lead-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--hairline); } .case-lead-top h3 { font-size: 30px; font-weight: 600; } .case-meta { font-size: 16px; font-weight: 300; color: var(--tertiary); } .case-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } .case-col .k { font-size: 16px; font-weight: 600; color: var(--accent-mid); margin-bottom: 10px; } .case-col p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); } .case-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: var(--grid-gap) 0; padding: 26px 34px; border: 1px dashed var(--hairline); border-radius: var(--r-card); } .case-cta p { font-size: 17px; font-weight: 300; color: var(--muted); } .case-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .case-mini { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; } .case-sector { font-size: 16px; font-weight: 300; color: var(--accent-mid); margin-bottom: 8px; transition: color .3s linear; } .case-mini h4 { font-size: 26px; font-weight: 600; margin-bottom: 24px; transition: transform .4s var(--e-out); } .case-line { padding: 16px 0; border-top: 1px solid var(--hairline); } .case-line .l { display: block; font-size: 15px; font-weight: 400; color: var(--tertiary); margin-bottom: 6px; } .case-line .case-body { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); } .case-mini:hover h4 { transform: translateX(6px); } /* ============================================================================= 6. PROCESS — sticky heading, progress line, step activation ========================================================================== */ .proc-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } .proc-head { position: sticky; top: 140px; } .proc-steps { position: relative; } .proc-line { position: absolute; left: 31px; top: 40px; bottom: 40px; width: 2px; background: var(--hairline); } .proc-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--grad-a), var(--accent)); transition: height .2s linear; } .pstep { position: relative; display: flex; gap: 28px; align-items: flex-start; padding: 30px 14px 30px 0; border-top: 1px solid var(--hairline); transition: background-color .35s linear; } .pstep:first-child { border-top: 0; } .pnum { position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; background: var(--band); color: var(--tertiary); box-shadow: inset 0 0 0 var(--dot-ring) var(--dot-line, var(--dot-idle)); transition: background-color .4s var(--e-out), box-shadow .4s var(--e-out), color .4s var(--e-out), transform .45s var(--e-back); } .pbody h4 { font-size: 24px; font-weight: 600; margin-bottom: 10px; transition: color .35s linear, transform .35s var(--e-out); } .pbody p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--muted); transition: opacity .35s linear, transform .35s var(--e-out); } .js-enabled .pstep .pnum { transform: scale(.88); } .js-enabled .pbody h4 { color: var(--tertiary); } /* was `opacity: .55` — 2.51:1 on real body text, while fully on screen. Only scroll progress cleared it, so "Improve" (the step that says we keep working after launch) was the greyest thing in the section. The step still arrives: the tell is the 10px rise plus the number and heading, all of which already animate. Text opacity is not a design tool in this build. */ .js-enabled .pbody p { transform: translateY(10px); } /* family rule: a live ring is --accent everywhere. --accent is DARKER than the --accent-mid v17b used, so the edge against the lightened face gets stronger. */ .js-enabled .pstep.is-on .pnum { background: var(--grad); --dot-line: var(--accent); color: var(--on-metal); transform: scale(1); } .js-enabled .pstep.is-on .pbody h4 { color: var(--text); } .js-enabled .pstep.is-on .pbody p { transform: none; } .pstep:hover { background: rgba(61, 68, 78, .04); } .pstep:hover .pnum { transform: translateX(4px) scale(1); } .pstep:hover .pbody h4 { transform: translateX(8px); color: var(--text); } .pstep:hover .pbody p { transform: none; } /* ============================================================================= 7. FIX / REBUILD / GROW — sticky card stack ========================================================================== */ .cur-toggle { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid var(--edge); border-radius: var(--r-round); background: var(--card); } .cur-btn { font: inherit; font-size: 15px; font-weight: 400; padding: 8px 18px; border: 0; border-radius: var(--r-round); background: transparent; color: var(--tertiary); cursor: pointer; transition: background-color .25s linear, color .25s linear, transform .25s var(--e-back); } /* the unselected segment had no hover state at all — the one genuinely dead control on the page. Wash keeps the label at 13.35:1. */ .cur-btn:hover { background: rgba(61, 68, 78, .07); color: var(--text); } /* scale(.96) for the same reason as .burger: .985 on a ~64px segment is 1px. */ .cur-btn:active { transform: scale(.96); transition-duration: .12s; } /* The flat --accent fill STAYS. Metal would be the "consistent" answer (.pnum.is-on and .pc-badge both use var(--grad) for selected) and was rejected on measurement: a metal segment against the white track is 1.42:1, the flat fill is 9.83:1. On a segmented control the selected state IS the information. */ .cur-btn.is-on { background: var(--accent); color: #fff; } .cur-btn.is-on:hover { background: var(--accent-dk); color: #fff; } .price-stack { padding-bottom: 4vh; } /* Holds the LAST card (Grow) pinned for a beat instead of letting it scroll straight past. Must be an in-flow box, not parent padding — sticky is constrained by the containing block's CONTENT box. */ .price-tail { height: 46vh; } .price-slot { position: sticky; top: 132px; } .price-slot + .price-slot { margin-top: 52vh; } .price-card { position: relative; max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.35fr .85fr; gap: 52px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px 48px; box-shadow: 0 24px 60px -40px rgba(20, 30, 70, .5); transform-origin: center top; transition: transform .45s var(--e-out), border-color .3s linear, box-shadow .4s var(--e-out); } .price-card.is-featured { border-color: var(--accent); } /* ---------- cursor spotlight ------------------------------------------------- A soft cobalt highlight that follows the pointer inside every card surface. Purely decorative: it is opacity on a pseudo-element, never on text, and it is skipped entirely on touch and under reduced motion. --------------------- */ .flow-card, .case-lead, .case-mini, .price-card, .review, .team-panel, .quote-block { position: relative; } .flow-card::after, .case-lead::after, .case-mini::after, .price-card::after, .review::after, .team-panel::after, .quote-block::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s linear; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 68, 78, .09), transparent 62%); } .flow-card:hover::after, .case-lead:hover::after, .case-mini:hover::after, .price-card:hover::after, .review:hover::after, .team-panel:hover::after, .quote-block:hover::after { opacity: 1; } /* Covered-card veil for the sticky stack. Darkens the card WITHOUT touching the opacity of any text node — text always computes to opacity 1. */ .price-card::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: #0e1118; opacity: var(--cover, 0); } .price-card:hover { border-color: #aeb6c1; box-shadow: 0 28px 64px -34px rgba(20, 30, 70, .42); } .price-card.is-featured:hover { border-color: var(--accent); } .pc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .pc-top h3 { font-size: 34px; font-weight: 700; text-transform: uppercase; } .pc-badge { font-size: 14px; font-weight: 500; color: var(--on-metal); background: var(--grad); box-shadow: var(--metal-inset), 0 1px 3px rgba(20, 22, 26, .22); border: 1px solid var(--metal-edge); border-radius: var(--r-round); padding: 6px 14px; } .pc-for { font-size: 17px; font-weight: 300; color: var(--muted); margin-bottom: 24px; } .pc-list { display: grid; } .pc-list li { font-size: 17px; font-weight: 300; color: var(--muted); padding: 12px 0 12px 20px; border-top: 1px solid var(--hairline); position: relative; transition: transform .3s var(--e-out), color .3s linear; } /* Chevron drawn with borders, not a glyph, so assistive tech has nothing to read. */ .pc-list li::before { content: ''; position: absolute; left: 1px; top: 21px; width: 5px; height: 5px; border: solid var(--accent); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); } .price-card:hover .pc-list li { transform: translateX(3px); color: var(--text); } .pc-side { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; } .pc-price { text-align: right; } .pc-from { display: block; font-size: 15px; font-weight: 300; color: var(--tertiary); margin-bottom: 8px; } .pc-amt { display: block; font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent); transition: color .3s linear; } .pc-per { font-size: 18px; font-weight: 300; color: var(--tertiary); } .pc-alt { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; color: var(--tertiary); } .price-card:hover .pc-amt { color: var(--accent-dk); } .price-note { margin-top: 34px; max-width: 82ch; font-size: 16px; font-weight: 300; color: var(--tertiary); } /* ============================================================================= 8. ONE ACCOUNTABLE TEAM ========================================================================== */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px var(--grid-gap); align-items: start; } .team-copy .lead { margin-top: 18px; max-width: 62ch; } .team-cta { margin-top: 30px; } .check-list { margin-top: 30px; display: grid; gap: 14px; } .check-row { display: flex; gap: 14px; align-items: flex-start; transition: transform .3s var(--e-out); } .check-row p { font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--muted); transition: color .3s linear; } .check-row:hover { transform: translateX(3px); } .check-row:hover p { color: var(--text); } .team-panel { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 44px; position: relative; } .tp-head { font-size: 16px; font-weight: 600; color: var(--accent-mid); text-transform: uppercase; margin-bottom: 24px; } .tp-rows { position: relative; padding-left: 24px; } .tp-line { position: absolute; left: 3px; top: 16px; bottom: 16px; width: 2px; background: var(--hairline); } .tp-line-fill { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--grad-a), var(--accent)); transition: height 1.1s var(--e-out) .25s; } .tp-rows.is-on .tp-line-fill { height: 100%; } .tp-row { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 20px 14px; border-top: 1px solid var(--hairline); transition: opacity .4s linear, padding .4s var(--e-out); } .tp-row::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(61, 68, 78, .10), rgba(61, 68, 78, 0)); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--e-out); } .tp-k { position: relative; z-index: 1; font-size: 22px; font-weight: 600; min-width: 150px; transition: transform .4s var(--e-out), color .3s linear; } .tp-d { position: relative; z-index: 1; font-size: 17px; font-weight: 300; color: var(--muted); transition: transform .4s var(--e-out), color .3s linear; } .tp-arw { position: relative; z-index: 1; margin-left: auto; width: 18px; height: 18px; flex: none; border: solid var(--accent); border-width: 1.6px 1.6px 0 0; transform: rotate(45deg) translate3d(-6px, 6px, 0); opacity: 0; transition: transform .4s var(--e-out), opacity .3s linear; } /* was `.tp-rows:hover .tp-row { opacity: .62 }` — the last dim-text hover on the site, and it dimmed .tp-k and .tp-d, both real text. The recede now runs on the row's hairline only; every label keeps opacity 1 and its own colour, and the hovered row's text still goes DARKER (see .tp-k / .tp-d below). */ .tp-rows:hover .tp-row { border-color: var(--dot-mute); } .tp-rows .tp-row:hover { padding-left: 22px; padding-right: 6px; } .tp-row:hover::before { transform: scaleX(1); } .tp-row:hover .tp-k { transform: translateX(8px); color: var(--accent); } .tp-row:hover .tp-d { transform: translateX(-3px); color: var(--text); } .tp-row:hover .tp-arw { transform: rotate(45deg) translate3d(0, 0, 0); opacity: 1; } /* rotating circular badge */ .badge-wrap { position: relative; width: 144px; height: 144px; margin-top: 38px; } .rot-badge { display: block; width: 144px; height: 144px; } /* letter-spacing tuned so the string measures 335px against the 339px circular path — any longer and the text truncates mid-word. Re-measure if edited. */ .badge-text { font-size: 11px; font-weight: 600; fill: var(--accent); letter-spacing: 0.75px; } .badge-ring { fill: none; stroke: var(--hairline); stroke-width: 1; } /* the badge core and an active stage node are now literally the same object */ .badge-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .badge-core::after { opacity: 1; } /* ============================================================================= 9. TESTIMONIALS — static 3-up grid (three real reviews; no autoplay carousel) ========================================================================== */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .review { margin: 0; position: relative; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; transition: transform .4s var(--e-back), border-color .3s linear, box-shadow .4s var(--e-out); } .rv-mark { font-size: 56px; line-height: .6; font-weight: 700; color: var(--hairline); transition: color .3s linear; } /* flex: 1 1 auto — the cards are all exactly the same height, but space-between was centring the middle child, so the three quotes started at 99 / 124 / 139px and their attributions at 268 / 290 / 290px. Nothing aligned across three identically-sized cards. */ .review blockquote { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 300; line-height: 1.45; color: var(--text); } .review figcaption { display: grid; gap: 4px; padding-top: 24px; border-top: 1px solid var(--hairline); } .rv-who { font-size: 17px; font-weight: 600; } .rv-role { font-size: 15px; font-weight: 300; color: var(--tertiary); } .rv-src { font-size: 15px; font-weight: 300; color: var(--accent-mid); transition: color .3s linear; } .review:hover { transform: translateY(-4px); border-color: #aeb6c1; box-shadow: 0 16px 36px -22px rgba(20, 30, 70, .3); } .review:hover .rv-mark { color: var(--accent); } .review:hover .rv-src { color: var(--accent-dk); } /* ============================================================================= 10. FAQ ========================================================================== */ .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } .faq-head { position: sticky; top: 140px; } .faq-list { border-top: 1px solid var(--hairline); } .faq-row { border-bottom: 1px solid var(--hairline); transition: border-color .3s linear; } .faq-row.is-open { border-bottom-color: var(--accent); } .faq-row h3 { margin: 0; font-weight: inherit; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; font-size: 22px; font-weight: 600; color: var(--text); transition: padding-left .32s var(--e-out), color .3s linear; } .faq-q:hover, .faq-q:focus-visible { padding-left: 6px; color: var(--accent); } /* the row is a