/* ============================================================ DISPLAY FACE - self hosted. Declared here, not in each page head, because system.css is linked by every page: the display face can never go missing from a page again, and a new page cannot be built without it. Anton is SIL Open Font License, so self hosting is permitted. Two subsets only, latin and latin-ext. The unicode-range on each means a browser fetches latin-ext solely when the page actually uses an extended character. Vietnamese is not carried. font-display: swap renders fallback text first and swaps Anton in on arrival, so a slow font never blanks a heading. TO FORK: replace both files and the family name, then change --font-header below. ============================================================ */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ ASSEMBLY LINE - SYSTEM.CSS (FOUNDATION) v1.1.0 The token layer. This is the ONLY file you edit to rebrand. TO FORK FOR A NEW CLIENT: 1. Change the ROLE VALUES block (surfaces, ink, accent). 2. Change the BRAND block VALUES (never the names). 3. Change the two --font-* values. 4. Do NOT touch the type scale, spacing, or the clamp middles unless you are regenerating them per the rules below. UNIT POLICY: - All lengths in rem. Exceptions: 1-2px borders and hairlines, and values that must be optically pixel-locked. GENERATION RULES (read before editing any clamp): - clamp() middle terms are GENERATED, never hand-typed. slope = (max - min) / (1600 - 375) * 100 -> vw term intercept = min - slope * 3.75 -> rem term (px/16) - Fluid range is 375px -> 1600px viewport. - Every preferred term mixes rem + vw (WCAG 1.4.4 zoom safety). ============================================================ */ :root { /* ========================================================== ROLE VALUES - the themable surface. Swap these per client. Component CSS only ever references these role names, never the raw hex, so changing a value here recolours everything. ========================================================== */ /* Surfaces (light) */ --surface-1: #FFFFFF; /* cards, primary surfaces */ --surface-2: #F0EFEB; /* page canvas */ --surface-3: #EEF1F5; /* recessed / alternate sections */ /* Surfaces (dark) - ascending lightness */ --surface-black: #0A0E14; /* footer - soft black, breaks from the navy band above */ --surface-dark: #021B34; /* dark section base */ --surface-dark-2: #032446; /* cards on dark */ --surface-dark-3: #052F5A; /* elevated dark / hover */ /* Ink (text on light) */ --ink-1: #121317; /* primary body */ --ink-2: #3A4248; /* muted body */ --ink-3: #6B747B; /* secondary / metadata */ --ink-heading: #021B34; /* headings - Prussian Blue, matches --brand-1 */ /* Greys */ --grey-1: #E3E7EC; --grey-2: #B9C0C8; --grey-3: #8A929A; /* Accent (single chromatic action colour) */ --accent: #1057FF; --accent-hover: #0D46CC; --accent-tint: #EBF1FF; /* Text on dark surfaces */ --on-dark: #FFFFFF; --on-dark-2: #B9C0C8; --ghost-on-dark: rgba(255,255,255,0.07); /* Type set over photography, where pure white glares against the grain and the highlights. Flat dark surfaces keep using --on-dark. */ --on-dark-soft: #FAFAFA; /* Borders & grid lines */ --border-1: #E3E7EC; --border-2: #D8DDE3; --border-3: #CDD3DA; --border-on-dark: rgba(255,255,255,0.12); --border-on-dark-strong: rgba(255,255,255,0.22); --grid-line: rgba(18,19,23,0.06); --grid-line-on-dark: rgba(255,255,255,0.06); /* Status */ --status-ok: #00A676; --status-ok-bg: rgba(0,166,118,0.12); --status-error: #D7263D; --status-error-bg: rgba(215,38,61,0.12); --status-warn: #FFB400; --status-warn-bg: rgba(255,180,0,0.14); --rating: #FBBC04; /* Google review-star gold. Third-party colour kept exact so the stars read as Google's, not ours. */ /* Focus ring */ --focus-ring: 0 0 0 3px var(--accent-tint); /* Fonts */ --font-header: "Anton", sans-serif; --font-body: 'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; /* Oversized condensed display face for photographic heroes. Anton: single weight, heavy condensed, which is what the hero was measured against. Loaded per page rather than globally, since only the photo hero uses it. The fallbacks are the narrowest faces that ship on Windows and macOS, so a failed webfont degrades to something condensed rather than to a wide grotesque that rewraps the headline. */ --font-display: "Anton", Impact, "Haettenschweiler", "Arial Narrow", sans-serif; --font-accent-serif: Georgia, serif; /* decorative watermark numerals only, not a brand face */ /* ========================================================== BRAND - client's named one-off colours. Hand-placed exceptions, NOT roles. Change the VALUES per client, never the names - components and pages reference the numbers. Used for section backgrounds and rare emphasis, never as the systematic accent. ========================================================== */ --brand-1: #021B34; /* Prussian Blue */ --brand-2: #CF000E; /* Brick Ember */ --brand-3: #E40134; /* Classic Crimson */ --brand-3-dark: #B60029; /* Crimson at 80%, for hover on filled buttons */ --brand-4: #0D0000; /* Coffee Bean */ --brand-5: #829AC2; /* Wisteria Blue */ --brand-6: #FFF100; /* e.g. highlighter yellow */ --brand-7: #C62E65; /* e.g. pink / rare emphasis */ /* Third-party marks. Set by the owning brand, not the client: do not rebrand these. */ --whatsapp: #25D366; /* WhatsApp green */ --whatsapp-dark: #1DA851; /* hover */ /* ========================================================== LAYOUT Container tiers: wide 1800 / default 1300 / narrow 1100 / reading 900. "ultrawide" is RESERVED for a future tier above wide - do not improvise a name if one appears. ========================================================== */ --container-wide: 112.5rem; /* 1800px */ --container-normal: 81.25rem; /* 1300px - the unmarked default */ --container-narrow: 68.75rem; /* 1100px */ --container-reading: 56.25rem; /* 900px - prose measure */ --reading-narrow: 43.75rem; /* 700px - tighter prose blocks */ --container-full: calc(var(--container-normal) + 3.75rem); --gutter: 1.875rem; /* 30px */ /* Header geometry (nav + mobile menu derive from these) */ --header-offset: 0rem; /* nav is flush to the top edge; kept as a token because --header-height derives from it */ --header-bar-height: 5.5rem; /* the nav bar itself, 5rem + 10% */ --header-height: calc(var(--header-offset) + var(--header-bar-height)); /* Static space (utilities depend on these) */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-ml: 2rem; /* 32px */ --space-lg: 3rem; /* 48px */ --space-xl: 5rem; /* 80px */ /* Fluid space (generated; migration target for new work) */ --space-fluid-s: clamp(1rem, 0.85rem + 0.65vw, 1.5rem); /* 16 -> 24 */ --space-fluid-m: clamp(1.5rem, 1.04rem + 1.96vw, 3rem); /* 24 -> 48 */ --space-fluid-l: clamp(2.5rem, 1.73rem + 3.27vw, 5rem); /* 40 -> 80 */ --space-fluid-xl: clamp(3.75rem, 2.6rem + 4.9vw, 7.5rem); /* 60 -> 120 */ --space-section: clamp(4.75rem, 4.119rem + 2.694vw, 6.8125rem); /* 76 -> 109 */ /* Radius */ --radius-card: 1.5625rem; /* 25px */ --radius-ui: 0.75rem; /* 12px */ --radius-pill: 9999px; /* Shadows */ --shadow-card: 0 2px 8px rgba(20,24,27,0.06); --shadow-lift: 0 8px 24px rgba(20,24,27,0.10); /* Motion */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --dur-fast: 0.2s; --dur-med: 0.3s; /* ========================================================== FLUID TYPE SCALE (generated) step 375px 1600px role -2 12.5 13.5 xs -1 14.0 15.3 small body 0 16.0 18.0 body body-lg 20.0 22.5 large body (1.25x body) 1 18.5 24.0 subhead 2 20.0 28.0 h6 3 22.0 38.0 h5 4 25.0 50.0 h4 5 28.0 67.0 h3 5.5 30.0 78.0 h2 6 32.0 89.0 h1 7 38.0 119.0 hero ========================================================== */ --step--2: clamp(0.781rem, 0.762rem + 0.082vw, 0.844rem); --step--1: clamp(0.875rem, 0.850rem + 0.106vw, 0.956rem); --step-0: clamp(1rem, 0.962rem + 0.163vw, 1.125rem); --step-1: clamp(1.156rem, 1.051rem + 0.449vw, 1.5rem); --step-2: clamp(1.25rem, 1.097rem + 0.653vw, 1.75rem); --step-3: clamp(1.375rem, 1.069rem + 1.306vw, 2.375rem); --step-4: clamp(1.563rem, 1.084rem + 2.041vw, 3.125rem); --step-5: clamp(1.75rem, 1.004rem + 3.184vw, 4.188rem); --step-5-5: clamp(1.875rem, 0.957rem + 3.918vw, 4.875rem); --step-6: clamp(2rem, 0.910rem + 4.653vw, 5.563rem); --step-7: clamp(2.375rem, 0.827rem + 6.612vw, 7.438rem); /* Component type (generated, non-scale) */ --text-stat: clamp(2.25rem, 1.829rem + 1.796vw, 3.625rem); /* 36 -> 58 */ --text-body-lg: clamp(1.25rem, 1.202rem + 0.204vw, 1.406rem); /* 20 -> 22.5 */ /* Micro type (static by design - uppercase labels) */ --text-caption: 0.8125rem; /* 13px */ --text-label: 0.75rem; /* 12px */ --text-micro: 0.6875rem; /* 11px */ --text-nav: 1.125rem; /* 18px */ /* Semantic mapping - components reference THESE, never steps */ --text-hero: calc(var(--step-7) * 0.7); --text-h1: calc(var(--step-6) * 0.7); --text-h2: calc(var(--step-5-5) * 0.7); --text-h3: calc(var(--step-5) * 0.7); --text-h4: calc(var(--step-4) * 0.7); --text-h5: calc(var(--step-3) * 0.7); --text-h6: calc(var(--step-2) * 0.7); --text-subhead: var(--step-1); --text-body: var(--step-0); --text-body-sm: var(--step--1); --text-body-xs: var(--step--2); /* Leading (tightens as size grows) */ --leading-hero: calc(1.03 * 1.25); --leading-h1: calc(1.06 * 1.25); --leading-h2: calc(1.1 * 1.25); --leading-h3: calc(1.18 * 1.25); --leading-h4: calc(1.25 * 1.25); --leading-h5: 1.35; --leading-h6: 1.4; --leading-subhead: 1.6; --leading-body: 1.8; --leading-ui: 1.6; /* non-paragraph interface text */ /* Tracking */ --tracking-display: -0.02em; --tracking-caps: 0.06em; /* Header measure (default: uncapped) */ --header-measure: 100%; } /* ============================================================ TYPE APPLICATION - one place each property is set. To vary type in a context, REASSIGN the tokens in that scope. Never write raw values. This is the ONLY heading-size API: - Tags carry MEANING and are remappable per scope (e.g. .blog-body { --text-h2: var(--step-4); }). - .size-* classes are ABSOLUTE overrides that bypass remapping - use only when the visual must differ from the semantic level. ============================================================ */ h1, h2, h3, h4, h5, h6 { margin: 0; max-width: var(--header-measure); text-wrap: balance; color: var(--ink-heading); } h1, h2, h3, h4 { font-family: var(--font-header); font-weight: 400; text-transform: uppercase; } h5, h6 { font-family: var(--font-body); font-weight: 700; } h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: calc(var(--tracking-display) + 2px); } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: calc(var(--tracking-display) + 3px); } h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: calc(var(--tracking-display) + 3px); } h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: 3px; } h5 { font-size: var(--text-h5); line-height: var(--leading-h5); } h6 { font-size: var(--text-h6); line-height: var(--leading-h6); } .t-hero { font-family: var(--font-header); font-weight: 400; text-transform: uppercase; font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); max-width: var(--header-measure); text-wrap: balance; color: var(--ink-heading); } .t-subhead { font-size: var(--text-subhead); line-height: var(--leading-subhead); font-weight: 400; } .t-body { font-size: var(--text-body); line-height: var(--leading-body); } .t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body); } /* Size utilities - decouple visual size from heading level. Tag by MEANING (h2 because it's a section heading), then size with these if the visual needs to differ. These bind to steps directly: scoped semantic remaps do NOT affect them. */ .size-hero { font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); } .size-h1 { font-size: var(--step-6); line-height: var(--leading-h1); letter-spacing: var(--tracking-display); } .size-h2 { font-size: var(--step-5-5); line-height: var(--leading-h2); letter-spacing: var(--tracking-display); } .size-h3 { font-size: var(--step-5); line-height: var(--leading-h3); letter-spacing: var(--tracking-display); } .size-h4 { font-size: var(--step-4); line-height: var(--leading-h4); } .size-h5 { font-size: var(--step-3); line-height: var(--leading-h5); } .size-h6 { font-size: var(--step-2); line-height: var(--leading-h6); } /* ============================================================ HEADER MEASURE MODIFIERS - cap heading width to force wraps. Measure caps width WITHOUT centering; .reading (main.css) caps AND centers a standalone text block. ============================================================ */ .measure-95 { --header-measure: 95%; } .measure-90 { --header-measure: 90%; } .measure-85 { --header-measure: 85%; } .measure-80 { --header-measure: 80%; } .measure-75 { --header-measure: 75%; } .measure-70 { --header-measure: 70%; } .measure-65 { --header-measure: 65%; } .measure-60 { --header-measure: 60%; } .measure-55 { --header-measure: 55%; } .measure-50 { --header-measure: 50%; } .measure-tight { --header-measure: 15ch; } .measure-std { --header-measure: 20ch; } .measure-wide { --header-measure: 24ch; } /* Deliberate line breaks without
*/ .line { display: inline-block; }