/* ============================================================ MASQINOX STEELS TRADING FZE — Editorial Industrial Design system: Fraunces (display serif) + Hanken Grotesk (body) + JetBrains Mono (technical specs) Palette: Masqinox navy · brand blue · cool steel paper ============================================================ */ /* ------------------------------------------------------------ Self-hosted webfonts — no runtime request to Google. These are the exact .woff2 binaries Google's font CDN was serving (Fraunces v38, Hanken Grotesk, JetBrains Mono), downloaded once and committed, so the rendering is identical to before rather than merely similar. The @font-face descriptors below — including every unicode-range subset — are Google's own, unchanged. Fraunces is kept as the FULL variable font: the design depends on its opsz (9-144), SOFT (0-100) and WONK (0-1) axes via font-variation-settings, and a static instance would not carry them. File names contain a content hash, so they are safe to cache forever. Regenerate with scripts/fetch_fonts.py if a family is ever updated; it prints a replacement for everything between the two markers below. ------------------------------------------------------------ */ /* BEGIN self-hosted webfonts */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-italic-vietnamese.52cd2d19be.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-italic-latin-ext.356dfdbe2d.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: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-italic-latin.04a14ea380.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: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-normal-vietnamese.5847b622f5.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-normal-latin-ext.e9521563d0.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: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/fraunces-normal-latin.7e74484902.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: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-italic-cyrillic-ext.39b6cc87d1.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-italic-vietnamese.9cc0e526c3.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-italic-latin-ext.8f7c62f4f3.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: 'Hanken Grotesk'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-italic-latin.bb432642d7.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: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-normal-cyrillic-ext.7ba47c7827.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-normal-vietnamese.992b5d147e.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-normal-latin-ext.768af2923e.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: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-normal-latin.e9201eddf1.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic-ext.62213be8a7.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic.e17cfd15fb.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-greek.0a557721b1.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-vietnamese.c89b9cc0bc.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin-ext.db5ff4db83.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin.83c005d49d.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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic-ext.62213be8a7.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic.e17cfd15fb.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-greek.0a557721b1.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-vietnamese.c89b9cc0bc.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin-ext.db5ff4db83.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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin.83c005d49d.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: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic-ext.62213be8a7.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-cyrillic.e17cfd15fb.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-greek.0a557721b1.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-vietnamese.c89b9cc0bc.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin-ext.db5ff4db83.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: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-normal-latin.83c005d49d.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; } /* END self-hosted webfonts */ :root { /* Palette — pulled from company logo */ --ink: #0b2447; /* Masqinox navy (logo wordmark) */ --ink-soft: #173a6b; --ink-fade: #5b6b80; --paper: #f5f7fa; /* cool steel white */ --paper-deep: #e6ebf2; /* The brand blue from the logo's M. It was called --blue, and aliased as --blue for rules written against an older palette: three names, none of them the colour. --blue was the most used token on the site, 49 times, rendering blue. A name that contradicts its value is a trap for whoever picks the next colour, and an alias that contradicts BOTH is worse. */ --blue: #0c488a; --blue-bright: #1f66b8; --blue-deep: #083566; /* The brand blue is for the paper ground. On the ink ground it is only 2.69:1 -- under the 3:1 WCAG AA asks even of large text. This is the same hue lightened until it clears 4.5:1 (4.58:1), so it stays valid if the text it carries ever shrinks. (axe-core, 2026-09-19) */ --accent-on-ink: #4a8ede; /* WhatsApp brand green. Not a Masqinox colour -- it belongs to WhatsApp and is used only on controls that open WhatsApp, so the button reads as the thing it launches. The footer's inline call icons already used the same value hardcoded; this is now the only place it is written down. */ --whatsapp: #25d366; /* WeChat brand green, same reasoning as --whatsapp above: not a Masqinox colour, used only on the control that opens the WeChat panel. Its hover step, --wechat-deep, sits beside --whatsapp-deep below. */ --wechat: #07c160; /* Palette completed 2026-09-19. These nine hues were in use as raw literals with no token; #fff alone appeared nine times. The colour gate below now refuses any hue that is not declared here, and refuses an rgba() whose RGB triplet does not match one of them -- which is what keeps the alpha variants in step with their base colour, since CSS cannot express that relationship without relative-colour syntax this site does not rely on. */ --white: #ffffff; --black: #000000; --ink-deep: #081428; /* deeper than --ink; scrims over photography */ --char: #1a1d1f; /* neutral charcoal, one scrim */ --danger: #b3261e; /* form validation */ --success: #1d7a46; /* form success */ --sky: #b9d3f2; /* light blue on dark ink */ --map-1: #e9edf2; /* coverage map choropleth, lightest */ --map-2: #dbe3ed; --map-3: #c7d7ea; --map-4: #b9cde6; /* darkest */ /* Elevation and rings. Seven jobs, named for the job. Before this there were nine box-shadow literals and no two elements shared one -- every shadow on the site was bespoke, which is not a design decision, it is nine of them. */ /* Four elevations. There were seven, each used EXACTLY ONCE -- a token per element is a naming convention, not a system, and it cannot be reused because nothing else is allowed to look like it. The three merged into --shadow-raised were "panel", "form" and "drawer": navy shadows in one visual family (.35/.4/.45 at three geometries) lifting a card, a form and a drawer -- the same idea three times. The two merged into --ring were "focus" and "beacon": identical geometry at two alphas. Both merges take an EXISTING value rather than a new average, so every shadow on the site is one that already shipped somewhere. */ --shadow-float: 0 10px 30px -10px rgba(0,0,0,0.3); /* the floating WhatsApp button */ --shadow-raised: 0 24px 60px -36px rgba(11,36,71,.35); /* anything lifted off the page */ --ring: 0 0 0 3px rgba(12,72,138,.12); /* focus, and the map beacon */ --ring-error: 0 0 0 3px rgba(179,38,30,.12); /* invalid input -- a different hue, so it stays */ /* A hairline that separates a DARK control from a DARK backdrop. The floating stack is fixed over whatever happens to scroll under it, and the navy mail and phone buttons disappear into the hero photograph and any dark section. The two green buttons carry their own contrast and do not get this -- the asymmetry is the point, not an oversight. 0.5px: 1.5px was read as heavy, halved to 0.75, then taken down again. This is the practical floor -- below it the line stops resolving on a 1x display at all. A sub-pixel width behaves differently per display: on a phone at 2x or 3x it lands on 1-1.5 DEVICE pixels and stays crisp, which is the case that prompted this; on a 1x desktop monitor it antialiases to a fainter-than-1px line. That is acceptable, because the problem being solved is a dark PHOTO behind the stack, and photos go full-bleed on phones. It is invisible over the light page ground, which is correct -- there is nothing there to separate from. */ --ring-hairline: 0 0 0 .5px rgba(255,255,255,.92); --whatsapp-deep: #1da851; --wechat-deep: #06a552; --rule: rgba(11, 36, 71, 0.12); --rule-strong: rgba(11, 36, 71, 0.25); /* Type */ /* Spacing */ --gutter: clamp(20px, 4vw, 56px); --max-w: 1440px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); } /* ========================================================================== TYPE SYSTEM -- the single source of truth for typography. Specification: TYPOGRAPHY-AUDIT.md (16 roles, approved 2026-09-18). Three layers; components consume only the third. primitive tokens --font-* / --size-* reusable raw values semantic tokens --type-* a primitive bound to a role role classes .t-* the only place a component's typography may be declared A role block carries its component selectors alongside the role class, so one declaration block serves both the markup class and the existing component selector -- and no container rule can outrank a role. Responsive scaling belongs to the TOKEN layer (see the media block below), never to a component font-size. Adding a font-size anywhere outside this block or the documented exceptions is a build failure (Gate B). ========================================================================== */ :root{ /* ---- primitive: families ---- */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- primitive: sizes ---- */ --size-hero: clamp(2.6rem, 8vw, 7.5rem); --size-page: clamp(2.8rem, 6.4vw, 6rem); --size-cta: clamp(2.2rem, 5.5vw, 5rem); --size-section: clamp(1.8rem, 4vw, 3.2rem); --size-sub: clamp(1.8rem, 3.2vw, 2.6rem); --size-row: clamp(1.3rem, 2.5vw, 2rem); --size-card: clamp(1.25rem, 1.8vw, 1.5rem); --size-lead: clamp(1.25rem, 2vw, 1.65rem); --size-numeral: clamp(2.2rem, 4.4vw, 3.8rem); --size-body-lg: clamp(1rem, 1.3vw, 1.15rem); --size-body: 1rem; --size-body-sm: 0.9rem; --size-caption: 0.82rem; --size-eyebrow: 0.7rem; --size-index: 0.85rem; --size-meta: 0.64rem; /* ---- semantic: role -> primitive ---- */ --type-hero-display: var(--size-hero); --type-page-title: var(--size-page); --type-cta-display: var(--size-cta); --type-section: var(--size-section); --type-subsection: var(--size-sub); --type-row-title: var(--size-row); --type-card-title: var(--size-card); --type-lead: var(--size-lead); --type-numeral: var(--size-numeral); --type-body-lg: var(--size-body-lg); --type-body: var(--size-body); --type-body-sm: var(--size-body-sm); --type-caption: var(--size-caption); --type-eyebrow: var(--size-eyebrow); --type-index: var(--size-index); --type-meta: var(--size-meta); } /* On a screen tall enough to have a real hero, the two hero-scale roles are budgeted against viewport HEIGHT so the opening fits one screen on a short laptop. No width-only clamp can express that. Redefining the token keeps the rule in the type system rather than scattering a font-size into a component media query. */ @media (min-width: 901px){ :root{ --size-hero: clamp(2.6rem, min(7.2vw, 11.5vh), 7.5rem); --size-numeral: clamp(1.9rem, min(3.6vw, 6.4vh), 3.6rem); } } /* -------- HOW A ROLE WINS ------------------------------------------------- The role class sits at specificity (0,1,0). Every component selector beside it is wrapped in :where(), which contributes ZERO specificity -- so a component selector acts as a default that any explicit role class on the element overrides. This is load-bearing, not tidiness. Before it, `.footer-col p` (0,1,1) beat `.footer-tagline` (0,1,0) and the tagline rendered at 14.72px instead of the 11.52px it declared; the same collision hit `.footer-note`, `.coverage-line` and the `.eyebrow` inside `.pvd-intro`. Four elements had never once displayed at their own declared size. ------------------------------------------------------------------------ */ /* NOTE: .split-lead and .contact-card-note are NOT listed beside their roles below. Each sits inside a container another role owns (.split-text p, .contact-card p); inside :where() both are (0,0,0), so the later block would always win regardless of which is more specific. They carry their role class in the markup instead, at (0,1,0), which is unambiguous. */ /* -------- DISPLAY -- Fraunces ------------------------------------------- */ /* The brand statement. Line-height stays 0.92 rather than the 0.95 of the other display roles: inside the height budget above, 0.95 adds ~4px of leading per line and can push the hero past one screen. */ .t-hero-display, :where(.hero-headline){ font-family: var(--font-display); font-size: var(--type-hero-display); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0; line-height: 0.92; letter-spacing: -0.035em; } /* Identifies an internal page. */ .t-page-title, :where(.page-hero h1){ font-family: var(--font-display); font-size: var(--type-page-title); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30; line-height: 0.95; letter-spacing: -0.035em; } /* Closes the page. Deliberately distinct from the page title. */ .t-cta-display, :where(.cta-block h2){ font-family: var(--font-display); font-size: var(--type-cta-display); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30; line-height: 0.95; letter-spacing: -0.035em; } .t-section, :where(.section-title){ font-family: var(--font-display); font-size: var(--type-section); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30; line-height: 1; letter-spacing: -0.025em; } .t-subsection, :where(.coverage-intro h3, .usecase-title, .pvd-title, .gallery-banner-line){ font-family: var(--font-display); font-size: var(--type-subsection); font-weight: 300; font-variation-settings: 'opsz' 144, 'SOFT' 30; line-height: 1.05; letter-spacing: -0.025em; } .t-row-title, :where(.industries-list .ind-name){ font-family: var(--font-display); font-size: var(--type-row-title); font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 30; line-height: 1.1; letter-spacing: -0.02em; } .t-card-title, :where(.product-card-name, .pillar h2, .why-grid h3, .services-list li, .legal h2, .nav-panel li a){ font-family: var(--font-display); font-size: var(--type-card-title); font-weight: 400; font-variation-settings: 'opsz' 144, 'SOFT' 40; line-height: 1.1; letter-spacing: -0.015em; } .t-lead, :where(.hero-h1){ font-family: var(--font-display); font-size: var(--type-lead); font-weight: 300; font-variation-settings: 'opsz' 30, 'SOFT' 50; line-height: 1.35; letter-spacing: -0.01em; } .t-numeral, :where(.hero-stat-num) { font-family: var(--font-display); font-size: var(--type-numeral); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 30; line-height: 1; letter-spacing: -0.035em; } /* -------- BODY -- Hanken Grotesk ---------------------------------------- */ .t-body-lg, :where(.page-hero-lead, .cta-block-side p, .services-intro p, .enquiry-side p, .coverage-intro-body p){ font-family: var(--font-body); font-size: var(--type-body-lg); font-weight: 400; line-height: 1.6; letter-spacing: 0; } /* Form controls sit here deliberately: under 16px, iOS Safari zooms the viewport on focus -- which the enquiry form did on every field. */ .t-body, :where(.split-text p, .pvd-intro p, .contact-card a, .contact-card p, .legal p, .legal li, .enquiry-points li, .gcc-group li, .field input, .field select, .field textarea){ font-family: var(--font-body); font-size: var(--type-body); font-weight: 400; line-height: 1.65; letter-spacing: 0; } .t-body-sm, :where(.wechat-panel-title, .nav-links a, .nav-cta, .btn, .accordion-caption, .footer-col a, .footer-col p, .footer-note, .enquiry-fallback, .enquiry-status, .pillar p, .why-grid p, .product-card-desc, .gcc-note){ font-family: var(--font-body); font-size: var(--type-body-sm); font-weight: 400; line-height: 1.5; letter-spacing: 0; } .t-caption, :where(.wechat-panel-id, .services-list li small, .field-error, .enquiry-wa-note){ font-family: var(--font-body); font-size: var(--type-caption); font-weight: 400; line-height: 1.45; letter-spacing: 0; } /* -------- UTILITY -- JetBrains Mono -------------------------------------- */ /* Short, tertiary, uppercase labels ONLY. Never instructions, legal copy, form controls, error messages, task-critical navigation or substantive prose -- Gate B rejects those. Body copy and controls stay at 16px. */ .t-eyebrow, :where(.eyebrow, .manifesto-marker, .product-card-link, .product-card-num, .pillar-num, .why-num, .pvd-swatch-label, .contact-card h3, .gcc-group h3, .gcc-stage, .gcc-replay, .usecase-kicker, .gallery-banner-kicker, .gallery-tile figcaption, .hero-image-caption, .hero-stat-label, .footer-tagline, .industries-list .ind-num, .legal-meta, .field label, .services-list li span){ font-family: var(--font-mono); font-size: var(--type-eyebrow); font-weight: 500; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase; } .t-index, :where(.section-num){ font-family: var(--font-mono); font-size: var(--type-index); font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: none; } .t-meta, :where(.footer-bottom, .usecase-note, .uc-tile figcaption, .nav-brand-meta, .accordion-label em, .gcc-group li i, .footer-note .lbl, .footer-warehouse span, .quick-contact > :is(a, button)::after){ font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; } /* -------- DOCUMENTED EXCEPTIONS ------------------------------------------ Outside the scale because of a property of the ELEMENT, not a preference. Gate B reads this list; adding to it without a matching entry in TYPOGRAPHY-AUDIT.md section 6 fails the build. .hero-subline height-budgeted with the hero it belongs to .accordion-label fixed-width tile under white-space: nowrap .usecase-num outlined numeral -- a graphic made of type .coverage-line the one deliberate Fraunces italic accent .cta-block::before decorative oversized watermark glyph *-num small relative superscript on a statistic .nav-cta @720 a control in a width-constrained nav bar figcaption @520 caption overlay inside a fixed photo tile .gcc-* @560 absolutely-positioned chips over the map ------------------------------------------------------------------------ */ .coverage-line { line-height: 1.55; } /* ===================== end TYPE SYSTEM =================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); font-feature-settings: "ss01", "cv11", "ss03"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; position: relative; } /* Paper grain texture overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(12, 72, 138, 0.025) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(11, 36, 71, 0.025) 0%, transparent 50%); pointer-events: none; z-index: 1; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } /* ============================================================ Typography utilities ============================================================ */ .eyebrow { color: var(--ink-fade); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--ink-fade); } /* ============================================================ Layout primitives ============================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } .section { padding: clamp(48px, 6vw, 96px) 0; position: relative; z-index: 2; } .section-tight { padding: clamp(32px, 4vw, 64px) 0; } /* ============================================================ Navigation ============================================================ */ /* The
landmark wrapping .nav is the STICKY element, not .nav itself. A sticky box only travels inside its containing block, and
is exactly as tall as .nav — so leaving the sticky on .nav gave it zero room and the bar scrolled away with the page (regression caught 2026-09-18). */ header { top: 0; z-index: 100; } .nav { background: rgba(245, 247, 250, 0.92); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); z-index: 100; border-bottom: 1px solid var(--rule); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .nav-brand img { width: auto; display: block; } @media (min-width: 1081px) { .nav-brand img { height: 46px; } } .nav-brand-meta { color: var(--ink-fade); display: none; padding-left: 12px; border-left: 1px solid var(--rule); } @media (min-width: 901px) { .nav-brand-meta { display: inline-block; } } .footer-brand-logo { display: block; height: auto; } .nav-links { display: flex; gap: clamp(16px, 2.4vw, 36px); list-style: none; align-items: center; } .nav-links a { color: var(--ink); position: relative; padding: 4px 2px; transition: color 200ms var(--ease); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--blue); transition: right 300ms var(--ease-out-strong); } .nav-links a:hover { color: var(--blue); } .nav-links a:hover::after, .nav-links a.active::after { right: 0; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--ink); color: var(--paper); transition: background 200ms var(--ease), transform 200ms var(--ease); } .nav-cta:hover { background: var(--blue); transform: translateY(-1px); } .nav-cta svg { width: 14px; height: 14px; transition: transform 200ms var(--ease); } .nav-cta:hover svg { transform: translateX(3px); } @media (max-width: 720px) { .nav-links li:nth-child(2), .nav-links li:nth-child(3) { display: none; } .nav-cta { padding: 8px 12px; font-size: 0.75rem; } } /* ============================================================ Hero (homepage) ============================================================ */ .hero { padding: clamp(40px, 5vw, 70px) 0 clamp(32px, 4vw, 60px); position: relative; overflow: hidden; } .hero-grid { display: grid; gap: clamp(24px, 5vw, 80px); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } /* Homepage H1 — states what the business is and where. Sits above the brand tagline, which is now a

. Deliberately readable, not an eyebrow. */ .hero-h1 { color: var(--ink); max-width: 30ch; /* balance the two lines rather than breaking after the ampersand */ text-wrap: balance; } .hero-headline em { font-style: italic; color: var(--blue); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; font-weight: 400; } .hero-subline { font-family: var(--font-body); font-size: clamp(0.95rem, 1.1vw, 1.05rem); max-width: 460px; color: var(--ink-soft); line-height: 1.55; } .hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .hero-image-wrap { position: relative; overflow: hidden; } .hero-image-wrap img { object-fit: cover; filter: contrast(1.05) saturate(0.9); transform: scale(1.02); } .hero-image-caption { position: absolute; bottom: 16px; left: 16px; right: 16px; color: rgba(245, 247, 250, 0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.6); display: flex; justify-content: space-between; } /* Button styles */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; transition: all 250ms var(--ease); position: relative; border: 1px solid currentColor; } .btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-ink:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); } .btn-paper { background: transparent; color: var(--ink); } .btn-paper:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn svg { width: 16px; height: 16px; transition: transform 250ms var(--ease); } .btn:hover svg { transform: translateX(4px); } /* ============================================================ Stats strip ============================================================ */ .stats { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: clamp(40px, 6vw, 80px) 0; background: var(--paper); } .stats-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 60px); } @media (max-width: 720px) { .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; } } /* ============================================================ Section headers (numbered) ============================================================ */ .section-header { display: grid; gap: clamp(20px, 3vw, 50px); align-items: baseline; margin-bottom: clamp(30px, 5vw, 70px); border-top: 1px solid var(--rule-strong); padding-top: 32px; } .section-num { color: var(--blue); } .section-title { /* typography supplied by its role class */ } .section-title em { font-style: italic; color: var(--blue); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; } /* ============================================================ Manifesto / About content ============================================================ */ .manifesto { display: grid; grid-template-columns: 100px 1fr 1fr; gap: clamp(20px, 3vw, 50px); align-items: start; } @media (max-width: 820px) { .manifesto { grid-template-columns: 1fr; } } .manifesto-marker { color: var(--ink-fade); } .manifesto-marker strong { color: var(--ink); font-weight: 600; display: block; } .manifesto-body p { margin-bottom: 1.2em; color: var(--ink-soft); } .manifesto-body p:first-child { color: var(--ink); } .manifesto-body p:first-child em { font-style: italic; color: var(--blue); } /* ============================================================ Product grid (Home) ============================================================ */ .product-grid { display: grid; gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .product-card { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 24px 24px; display: flex; flex-direction: column; background: var(--paper); transition: background 350ms var(--ease); cursor: pointer; position: relative; } .product-card:hover { background: var(--paper-deep); } .product-card-num { color: var(--ink-fade); margin-bottom: 16px; } .product-card-img { margin-bottom: 20px; overflow: hidden; position: relative; } .product-card-img img { width: 100%; height: 100%; transition: transform 600ms var(--ease-out-strong); } .product-card:hover .product-card-img img { transform: scale(1.05) rotate(-2deg); } .product-card-name { margin-bottom: 8px; } .product-card-desc { color: var(--ink-fade); margin-bottom: 16px; flex: 1; } .product-card-link { color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } .product-card-link::after { content: '→'; transition: transform 250ms var(--ease); } .product-card:hover .product-card-link { color: var(--blue); } .product-card:hover .product-card-link::after { transform: translateX(4px); } /* ============================================================ Editorial photo block ============================================================ */ /* ============================================================ Industries list ============================================================ */ .industries-list { list-style: none; } .industries-list li { border-top: 1px solid var(--rule); padding: clamp(20px, 3vw, 36px) 0; display: grid; grid-template-columns: 80px 1fr; gap: clamp(20px, 3vw, 50px); align-items: center; transition: padding-left 300ms var(--ease), color 300ms var(--ease); cursor: default; } .industries-list li:last-child { border-bottom: 1px solid var(--rule); } .industries-list li:hover { padding-left: 16px; color: var(--blue); } .industries-list .ind-num { color: var(--ink-fade); } .industries-list .ind-name { /* typography supplied by its role class */ } /* ============================================================ CTA Block ============================================================ */ .cta-block { background: var(--ink); color: var(--paper); padding: clamp(60px, 9vw, 130px) var(--gutter); position: relative; overflow: hidden; } .cta-block-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; } @media (max-width: 820px) { .cta-block-inner { grid-template-columns: 1fr; } } .cta-block h2 { /* typography supplied by its role class */ } .cta-block h2 em { font-style: italic; color: var(--accent-on-ink); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; } .cta-block-side p { color: rgba(245, 247, 250, 0.75); margin-bottom: 32px; } .cta-block .btn-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); } .cta-block .btn-ink:hover { background: var(--blue); color: var(--paper); border-color: var(--blue); } /* Decorative oversized number behind CTA */ .cta-block::before { content: none; position: absolute; font-family: var(--font-display); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 90, 'WONK' 1; font-size: 35vw; font-weight: 300; color: rgba(12, 72, 138, 0.05); bottom: -15vw; right: -5vw; line-height: 0.85; pointer-events: none; user-select: none; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--paper-deep); border-top: 1px solid var(--rule); } .footer-grid { display: grid; } /* second sub-heading inside a footer column (e.g. Follow, under Email) */ .footer-col ul { list-style: none; } .footer-col a { color: var(--ink); transition: color 200ms var(--ease); display: inline-flex; } .footer-col a:hover { color: var(--blue); } .footer-bottom { border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-fade); } /* ============================================================ Page hero (about/products/contact) ============================================================ */ .page-hero { border-bottom: 1px solid var(--rule); } .page-hero-grid { display: grid; gap: clamp(24px, 5vw, 80px); } .page-hero h1 { /* typography supplied by its role class */ } .page-hero h1 em { font-style: italic; color: var(--blue); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; } /* ============================================================ Products page — Bento grid + PVD swatches ============================================================ */ /* Hover-reveal subtitle (tagline only — product name is baked into image plate) */ /* product name is in the image plate */ /* Bento sizing classes */ /* PVD finish swatches */ .pvd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } @media (max-width: 720px) { .pvd-grid { grid-template-columns: repeat(2, 1fr); } } .pvd-swatch { aspect-ratio: 1; position: relative; overflow: hidden; border-right: 1px solid var(--paper); border-bottom: 1px solid var(--paper); } .pvd-swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out-strong); } .pvd-swatch:hover img { transform: scale(1.08); } .pvd-swatch-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: var(--paper); display: flex; justify-content: space-between; align-items: flex-end; } /* ============================================================ Contact page specifics ============================================================ */ /* ============================================================ About page — Timeline / numbered chapters ============================================================ */ /* ============================================================ Quick-contact floating stack ============================================================ */ /* The