/* ===================================================================== Sundog Aerial · Elevation design tokens Updated Sep 27, 2026 · source: style guide boards 01–08 + 03 (responsive) Colors: primitives (the palette, 15 colors) first, then semantic tokens built from them. HOW TO USE 1. Fonts are self-hosted — no needed. The @font-face block below declares them from public/fonts/ (woff2, latin + latin-ext). Updated Oct 11, 2026: dropped the Google Fonts stylesheet/preconnect for privacy + performance (no third-party request). To add a weight: download its woff2 to public/fonts/ and add a matching @font-face rule here. 2. Link this file first, then the component and page CSS. 3. Dark is the default. Light mode swaps color tokens only: set data-theme="light" (or "dark") on . With no saved choice, the site follows the visitor's system setting. Rule: components use semantic tokens only; colors only from this file. No tints or new shades without a decision. OPEN DECISION items are marked inline. ===================================================================== */ /* ===================================================================== SELF-HOSTED FONTS · woff2, latin + latin-ext (Oct 11, 2026) 5 families: Big Shoulders Display 900, Space Grotesk 500/600, Archivo 400/500/700, Orbitron 800, Montserrat 500. Files in public/fonts/. unicode-range keeps each subset request on demand. ===================================================================== */ @font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/big-shoulders-display-900-latin.woff2") format("woff2"); /* latin */ 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: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/big-shoulders-display-900-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500-latin.woff2") format("woff2"); /* latin */ 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: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-600-latin.woff2") format("woff2"); /* latin */ 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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-600-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400-latin.woff2") format("woff2"); /* latin */ 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: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500-latin.woff2") format("woff2"); /* latin */ 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: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700-latin.woff2") format("woff2"); /* latin */ 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: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Orbitron"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/orbitron-800-latin.woff2") format("woff2"); /* latin (Google ships Orbitron latin only) */ 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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin.woff2") format("woff2"); /* latin */ 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: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500-latin-ext.woff2") format("woff2"); /* latin-ext */ 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ================================================================== 1. PRIMITIVE COLORS (the palette) Raw values, named for the color, not the job. Only the semantic tokens below use these. Components never use them directly. ================================================================== */ /* Navy family (darkest → lightest) */ --color-near-black: #0B1119; --color-dark-navy: #0F1926; --color-navy: #14202F; --color-navy-light: #1C2B3D; --color-navy-lighter: #22344A; /* hover surface + lines on Well */ --color-slate: #34445A; /* Steel family */ --color-steel: #5E6D81; --color-light-steel: #A8B4C2; /* Sky tints (light mode surfaces) */ --color-sky-20: #E9EFF3; --color-sky-15: #EEF3F6; /* Neutrals */ --color-bone: #F1EEE7; --color-white: #FFFFFF; /* Gold family */ --color-gold: #E8A04A; --color-logo-gold: #F2AE30; --color-gold-dark: #935C1A; /* Channels for see-through colors: rgb(var(--rgb-gold) / .14) */ --rgb-near-black: 11 17 25; --rgb-gold: 232 160 74; --rgb-bone: 241 238 231; /* Not in this file on purpose: Butter Yellow #F4F2D7 (social media only). */ /* ================================================================== 2. SEMANTIC COLORS (what components use) Named for the job. Dark mode values here; light mode swaps them at the bottom of the file. ================================================================== */ /* Surfaces (darkest → lightest: Well → Page → Raised) */ --color-page: var(--color-navy); /* default page background */ --color-raised: var(--color-navy-light); /* cards, panels, choices, estimate card */ --color-well: var(--color-dark-navy); /* bands, photo wells, inputs, notes, sticky bars */ --color-hover: var(--color-navy-lighter); /* hover STATE on Raised (not a surface) */ /* Lines */ --color-line: var(--color-slate); /* borders on Raised, dividers on Navy */ --color-line-well: var(--color-navy-lighter); /* borders on Well, section rules, footer © row (same as hover) */ --color-border-control: var(--color-steel); /* inputs, hover border on choices, photo frame */ /* Text */ --color-text: var(--color-bone); /* every heading and paragraph */ --color-meta: var(--color-light-steel); /* labels, captions, placeholders, fine print */ /* Accent */ --color-accent: var(--color-gold); /* eyebrows, prices, icons, links, selected border, focus */ --color-accent-fill: var(--color-gold); /* primary button fill (same in both modes) */ --color-on-accent: var(--color-near-black); /* label on the Gold fill */ --color-accent-hover: var(--color-logo-gold); /* OPEN DECISION (hover for Gold buttons/links) */ --color-wash: rgb(var(--rgb-gold) / .14); /* selected fill; always with the 2px accent border */ /* Mode-independent */ --color-on-hero: var(--color-bone); /* hero text stays Bone in both modes */ --color-logo-sub: var(--color-white); /* "AERIAL LLC" (Navy in light mode) */ /* Gradients & scrims */ /* The sky's three blue stops live only here, not in the palette */ --gradient-sky: linear-gradient(180deg, var(--color-near-black) 0%, var(--color-navy) 24%, #2E4A5E 56%, #4A6483 80%, #8FB0C2 100%); --scrim-hero: linear-gradient(180deg, rgb(var(--rgb-near-black) / .55) 0%, rgb(var(--rgb-near-black) / .15) 40%, rgb(var(--rgb-near-black) / .7) 100%); --scrim-header: linear-gradient(180deg, rgb(var(--rgb-near-black) / .6), transparent); --scrim-caption:linear-gradient(180deg, transparent, rgb(var(--rgb-near-black) / .7)); --scrim-chip: rgb(var(--rgb-near-black) / .55); --scrim-play: rgb(var(--rgb-near-black) / .55); /* ------------------------------------------------------------------ TYPE · Families & weights ------------------------------------------------------------------ */ --font-display: "Big Shoulders Display", sans-serif; /* Display, H1 */ --font-heading: "Space Grotesk", sans-serif; /* H2, H3, Eyebrow */ --font-body: "Archivo", sans-serif; /* body, UI, meta */ --font-logo: "Orbitron", sans-serif; /* wordmark only */ --font-logo-sub:"Montserrat", sans-serif; /* wordmark sub-line only */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 900; /* TYPE · Sizes (desktop ≥ 1025) · scale 104/64/40/24/18/16/14/12 */ --text-display: 104px; /* 01 Display / Hero */ --text-display-home: 132px; /* Home page hero headline only (approved Sep 26) */ --text-h1: 64px; /* 02 H1 / Page title */ --text-h2: 40px; /* 03 H2 / Section headline */ --text-h3: 24px; /* 04 H3 / Card title */ --text-eyebrow: 14px; /* 05 Eyebrow / Tag */ --text-lead: 18px; /* 06 Body Large */ --text-body: 16px; /* 07 Body */ --text-button: 14px; /* 08 Button / CTA label, section links */ --text-meta: 14px; /* 09 Meta / Specs */ --text-micro: 12px; /* 10 Micro / Footer */ /* TYPE · Line heights */ --leading-display: .85; --leading-h1: .92; --leading-h2: 1.08; --leading-h3: 1.15; --leading-lead: 1.7; --leading-body: 1.65; --leading-meta: 1.5; --leading-micro: 1.4; /* TYPE · Letter spacing */ --tracking-display: -.01em; /* Display + H1, UPPERCASE */ --tracking-h2: -.02em; --tracking-h3: -.01em; --tracking-eyebrow: .12em; /* UPPERCASE */ --tracking-body: .01em; /* Body + Body Large */ --tracking-button: .04em; /* UPPERCASE */ --tracking-meta: .03em; --measure: 62ch; /* max line length for body copy */ /* ------------------------------------------------------------------ SPACE · 4px grid (board 04) ------------------------------------------------------------------ */ --space-4: 4px; /* nudge: hover arrow shift */ --space-8: 8px; /* label → field; stacked rows */ --space-12: 12px; /* icon → label; image chip inset */ --space-16: 16px; /* grid gaps (quote); heading → content */ --space-20: 20px; /* mobile panel padding; mobile gutter */ --space-24: 24px; /* desktop grid gaps; panel padding */ --space-32: 32px; /* card side padding; button side padding */ --space-40: 40px; /* section heading block → content; tablet gutter */ --space-48: 48px; /* between quote steps */ --space-64: 64px; /* desktop gutter; mobile section padding */ --space-80: 80px; /* split-band gap (Why-us) */ --space-96: 96px; /* band padding; header height */ --space-112:112px; /* Navy section padding */ /* LAYOUT */ --content-max: 1200px; --gutter: 64px; /* 40 tablet · 20 mobile */ --section-pad: 112px; /* every section, Navy or Well band · 64 mobile (Sep 27) */ --section-head-gap: 40px; /* heading block → content */ --grid-gap: 24px; /* 16 mobile */ --card-pad-y: 36px; /* service card · 20 mobile */ --card-pad-x: 32px; /* service card · 20 mobile */ --panel-pad: 24px; /* 20 mobile */ --header-h: 96px; /* 64 mobile */ /* ------------------------------------------------------------------ SHAPE, CONTROLS, FOCUS, MOTION ------------------------------------------------------------------ */ --radius: 0; /* 0 everywhere (circles: logo, play button only) */ --line: 1px; --bar: 3px; /* Gold top/left bar on notes, CTA panel, estimate card */ --control-h: 56px; /* primary button */ --control-h-sm: 48px; /* small/secondary buttons, inputs, tabs */ --control-h-nav: 44px; /* header "Get a quote" */ --tap-min: 48px; --focus-ring: 0 0 0 2px var(--color-page), 0 0 0 4px var(--color-accent); --focus-outline: 2px solid var(--color-accent); --focus-offset: 3px; --dur-control: 150ms; /* buttons, choices, inputs */ --dur-card: 200ms; /* cards, section links */ --ease: ease; --nudge: 4px; /* arrow shift on hover/focus */ } /* ---- Tablet (641–1024): only Display and H1 step down ---- */ @media (max-width: 1024px) { :root { --gutter: 40px; --text-display: 80px; --text-display-home: 80px; --text-h1: 56px; } } /* ---- Mobile (≤ 640): H2 and H3 also step down ---- */ @media (max-width: 640px) { :root { --gutter: 20px; --section-pad: 64px; --grid-gap: 16px; --card-pad-y: 20px; --card-pad-x: 20px; --panel-pad: 20px; --header-h: 64px; --text-display: 56px; --leading-display: .9; --text-display-home: 56px; --text-h1: 44px; --leading-h1: .95; --text-h2: 32px; --leading-h2: 1.1; --text-h3: 20px; --leading-h3: 1.2; } } /* ---- Light mode: color tokens only (approved; light boards) ---- */ [data-theme="light"] { --color-page: var(--color-sky-15); --color-raised: var(--color-white); --color-well: var(--color-sky-20); --color-hover: var(--color-white); /* no hover surface: only the border changes */ --color-line: var(--color-light-steel); /* one line color in light mode */ --color-line-well: var(--color-light-steel); --color-border-control: var(--color-steel); --color-text: var(--color-navy); --color-meta: var(--color-steel); --color-accent: var(--color-gold-dark); /* text, icons, lines, focus */ --color-logo-sub: var(--color-navy); /* accent-fill, on-accent, wash, sky, on-hero: unchanged */ } /* No saved choice: follow the system setting */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-page: var(--color-sky-15); --color-raised: var(--color-white); --color-well: var(--color-sky-20); --color-hover: var(--color-white); --color-line: var(--color-light-steel); --color-line-well: var(--color-light-steel); --color-text: var(--color-navy); --color-meta: var(--color-steel); --color-accent: var(--color-gold-dark); --color-logo-sub: var(--color-navy); } } /* Reduced motion: no parallax, nudges or transitions */ @media (prefers-reduced-motion: reduce) { :root { --dur-control: 0ms; --dur-card: 0ms; --nudge: 0px; } }