/* ============================================================ BLUEGREY — DESIGN TOKENS ------------------------------------------------------------ Single source of truth. Every colour, font, size, space, radius, border, shadow, easing and duration used anywhere on the site resolves to a variable defined here. Never inline an arbitrary value in component CSS. If a value is missing, add a token here first, then reference it. Palette and type stack are the decided brand (Bluegrey Brand Pack v1): Carbon / Ivory / Slate / Warm grey / Paper, with Flame for action and Brass for reward. The old bright blue is retired. ============================================================ */ :root { /* ---------------------------------------------------------- 0.1 COLOUR — raw palette (Brand Pack v1) ---------------------------------------------------------- */ --bg-0: #14181D; /* Carbon — page base / night surface */ --bg-deep: #0A0D12; /* deeper near-black — hero/showcase backdrop (WebTokens v1, deepened round 2) */ --bg-1: #1b2027; /* raised surface (step up) */ --bg-2: #222831; /* highest surface / hover */ --slate: #66798C; /* the brand colour — accents, links, icon tiles */ --slate-bright: #8AA0B5; /* brightened slate — links / focus / glow (WebTokens v1) */ --ivory: #E8E2D6; /* night ink — the logo's colour / body text */ --wgrey: #9A938B; /* warm grey — tertiary text, dividers */ --wgrey-mid: #C9C3B8; /* warm mid — secondary text on carbon (WebTokens v1) */ --wgrey-soft: #6E6862; /* muted warm grey — faint text / dividers */ --paper: #F4F1EA; /* day surface */ --flame: #FF4D2E; /* action — default. Filled. (Brand Pack §10) */ --flame-bright: #FF6A4F; /* flame hover (Brand Pack §10) */ --flame-pressed:#E03E22; /* flame pressed (Brand Pack §10) */ --brass: #C9954A; /* reward — pro / milestones. Keyline only */ --brass-fill: rgba(201, 149, 74, .10); /* brass keyline pill wash */ --text: #E8E2D6; /* body text -> Ivory */ --text-dim: #C9C3B8; /* secondary text -> warm mid (WebTokens v1) */ --ivory-bright: #F7F3EA; /* display headings on carbon — settle at FULL strength */ /* ---------------------------------------------------------- 0.1b Option B accent - SIGNED OFF by Grey 2026-07-03 (brand pack addendum: steel blue is the permanent BlueGrey web accent). The BlueGrey-owned bright blue (round-2 founders' decision, 2026-07-03): the liberal accent on dark, escalated from the slate-forward Option A. Deliberately NOT the stock iOS blue — steel hue ~213, lower saturation, luminous on carbon, sits with the warm ivory text. Slate stays the quiet brand colour (icons, structure); this blue carries links, secondary CTAs, glows, checkmarks, labels and the featured pricing treatment. Flame remains Buy-only. Flame and brass still never co-occur. ---------------------------------------------------------- */ --blue: #4A90E8; /* links / labels / checkmarks / accents */ --blue-bright: #79ACF0; /* hover text, focus ring */ --blue-btn: #2F6FC4; /* solid CTA fill (AA with white text) */ --blue-btn-hover: #3B7DD6; --blue-btn-pressed: #275FAB; --blue-glow: rgba(74, 144, 232, .32); /* button / card / featured-plan glow */ --blue-glow-strong: rgba(74, 144, 232, .45); --blue-glow-soft: rgba(74, 144, 232, .12); /* hero backdrop lift */ --blue-fill: rgba(74, 144, 232, .10); /* secondary CTA / chip wash */ --blue-edge: rgba(74, 144, 232, .55); /* keylines / featured borders */ --blue-paper: #245C9E; /* the same voice, readable on paper */ --line: rgba(154, 147, 139, .20); /* hairline borders -> warm-grey based */ /* ---------------------------------------------------------- 0.1c The Fellside mark (SITE-014.5, Grey 2026-09-23: "Fellside should have the TM. It should be coloured with the lime green on the dark blue background"). The product name renders as Fellside + a superscript TM from ONE function (markNames in layout.js); the name is lime on every dark surface, and on the paper bands it drops to the darker lime step because the bright lime fails APCA on paper (Lc 23.6 on --paper, 31.9 on white). Measured (APCA-W3, text on background): #B6CF3A on carbon -69.7, surface -68.7, raised -67.4, deep -70.5 #6B7B1E on paper 64.2, white 72.5, paper-raised 57.9 TM only, never (R): the filing covers BLUEGREY, not Fellside. ---------------------------------------------------------- */ --lime: #B6CF3A; /* the Fellside name on dark */ --lime-paper: #6B7B1E; /* the same voice on paper, APCA >= 60 */ --mark-color: var(--lime); --mark-tm-size: 0.66em; /* the superscript TM against its name (SITE-016.1: 10% larger, one weight heavier, the name's colour) */ /* ---------------------------------------------------------- 0.2 COLOUR — semantic roles (reference these, not raw) ---------------------------------------------------------- */ --color-page: var(--bg-0); --color-surface: var(--bg-1); --color-surface-raised: var(--bg-2); --color-text: var(--text); --color-text-secondary: var(--text-dim); --color-text-muted: var(--wgrey-soft); --color-text-hi: var(--ivory-bright); /* display headings settle here, never dimmer */ --color-accent: var(--slate); /* the quiet brand colour — icons, structure */ --color-accent-bright: var(--blue); /* Option B: links / labels / accents on dark */ --color-accent-fill: var(--blue-fill); /* secondary CTA wash */ --color-on-accent: #ffffff; /* text on a solid blue button */ --color-border: var(--line); --color-border-strong: rgba(154, 147, 139, .32); /* dividers, toolpaths */ --color-border-bright: var(--blue-edge); /* hover / focus / featured edge */ --color-focus: var(--blue-bright); /* status accents stay in the brand family — no green/red gloss */ --color-ok: var(--blue); --color-muted-fill: rgba(102, 121, 140, .10); /* slate-tinted fill */ /* signals (loud + rare): flame acts, brass rewards, never together. Button states are EXPLICIT colour tokens, not filter:brightness — a filter does nothing visible to a solid fill (Brand Pack §10). */ --color-action: var(--flame); --color-action-hover: var(--flame-bright); --color-action-pressed: var(--flame-pressed); --color-on-action: #ffffff; /* text on a filled flame button */ --color-reward: var(--brass); --color-reward-fill: var(--brass-fill); /* input focus glow (blue) + error (flame) — see base.css .field */ --color-input-focus: var(--blue); --shadow-input-focus: 0 0 0 3px rgba(74, 144, 232, .22); --color-input-error: var(--flame); --shadow-input-error: 0 0 0 3px rgba(255, 77, 46, .18); /* translucent page base for the sticky, blurred header (carbon @ .86) */ --color-page-translucent: rgba(20, 24, 29, .86); /* condensing header bar (2026-07-03, founder call — supersedes the pill, BlueGrey_HeaderOptions_v1 Option C): fixed full-width bar, 72px faint carbon wash at rest, condensing to 52px carbon glass once scrolled */ --header-h: 72px; --header-h-condensed: 52px; --header-bg: rgba(20, 24, 29, .35); --header-bg-scrolled: rgba(20, 24, 29, .85); --header-blur: blur(6px); --header-blur-scrolled: blur(14px); --dur-header: 350ms; --shadow-header: 0 8px 24px -16px rgba(0, 0, 0, .55); /* soft, tighter than --shadow-pop */ /* ---------------------------------------------------------- 1.0 TYPE — families (locked brand choices, Brand Pack v1) ---------------------------------------------------------- */ --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Roboto Mono", monospace; /* ---------------------------------------------------------- 1.1 TYPE — weights Display contrast comes from 400 vs 800; 600 for UI buttons. ---------------------------------------------------------- */ --weight-regular: 400; --weight-medium: 500; /* body emphasis, small-caps labels */ --weight-semibold: 600; /* UI buttons (Inter), mid display (Manrope) */ --weight-bold: 800; /* display headings (Manrope heavy) */ /* ---------------------------------------------------------- 1.2 TYPE — scale (body 16px -> hero display 96px, ~6x) ---------------------------------------------------------- */ --text-2xs: 0.6875rem; /* 11px — spec micro-labels */ --text-xs: 0.75rem; /* 12px — section numbers, captions */ --text-sm: 0.875rem; /* 14px — meta, fine print */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead paragraph */ --text-lg: 1.5rem; /* 24px — sub-heads */ --text-xl: 2rem; /* 32px — H3 */ --text-2xl: 3rem; /* 48px — H2 */ --text-3xl: 4.5rem; /* 72px — display */ --text-4xl: 6rem; /* 96px — hero display */ /* ---------------------------------------------------------- 1.3 TYPE — line height ---------------------------------------------------------- */ --leading-tight: 1.05; /* large display */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.6; /* body */ /* ---------------------------------------------------------- 1.4 TYPE — tracking (letter-spacing) ---------------------------------------------------------- */ --tracking-tight: -0.02em; /* large display */ --tracking-normal: 0; --tracking-wide: 0.08em; /* small caps / mono labels */ --tracking-spec: 0.18em; /* wide spec labels (use sparingly) */ /* ---------------------------------------------------------- 2.0 SPACE — 8pt scale (4px half-step at the bottom) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 — major section breathing room */ /* ---------------------------------------------------------- 2.1 LAYOUT — measures ---------------------------------------------------------- */ /* SITE-014.1: the page container is fluid, 94% of the viewport up to 88rem (1408px), so the site works on a big screen, a laptop and a phone; the reading column stays at --maxw-prose. Media, grids and bands use the wider box; body copy does not. */ --maxw-content: min(94vw, 88rem); /* the Products mega menu (SITE-014.1): panel width, rail width, hover-intent delays */ --mega-w: 60rem; --mega-rail-w: 15rem; --delay-menu-open: 120ms; --delay-menu-close: 220ms; --delay-menu-switch: 140ms; --maxw-wide: 84rem; /* 1344px — full-bleed feature rows */ --maxw-prose: 42rem; /* 672px — readable text column */ --gutter: var(--space-5); /* mobile-first side padding */ --gutter-lg: var(--space-8); /* ---------------------------------------------------------- 3.0 RADII ---------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; /* controls: buttons, inputs (WebTokens scale 8/16/22) */ --radius-lg: 16px; /* cards */ --radius-panel: 22px; /* hero / showcase panels */ --radius-pill: 999px; --logo-h: 1.125rem; /* 18px: a vendor mark in a software pill sits this tall at its own shape (SITE-017.2) */ /* ---------------------------------------------------------- 4.0 ELEVATION — 1px-border system Surfaces step up by BACKGROUND, not by drop shadow. Shadows are reserved for focus rings and floating menus. ---------------------------------------------------------- */ --border-hairline: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); --border-bright: 1px solid var(--color-border-bright); --elev-0-bg: var(--bg-0); --elev-1-bg: var(--bg-1); --elev-2-bg: var(--bg-2); --shadow-none: none; /* crisp, clearly visible focus ring: 2px page-coloured gap + 2px bright ring */ --shadow-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--blue-bright); --shadow-pop: 0 8px 24px -12px rgba(0, 0, 0, .6); /* dropdown menus + toasts */ --shadow-card-hover: 0 6px 26px -12px var(--blue-glow); /* soft blue glow on card hover */ /* paper cards: fill + a barely-there resting shadow lifts them (Brand Pack §10) */ --shadow-card-rest: 0 1px 2px rgba(20, 24, 29, .05), 0 6px 18px -14px rgba(20, 24, 29, .30); /* solid blue CTAs glow softly (his buttons glow; ours glow in our blue). Flame keeps its own treatment — no glow tokens point at flame. */ --shadow-btn-glow: 0 4px 18px -6px var(--blue-glow); --shadow-btn-glow-hover: 0 8px 28px -8px var(--blue-glow-strong); /* featured pricing tier: decisively raised + lit */ --shadow-plan-featured: 0 0 0 1px var(--blue-edge), 0 18px 48px -18px var(--blue-glow-strong); /* ---------------------------------------------------------- 5.0 MOTION — easings ---------------------------------------------------------- */ /* THE EASING SYSTEM (look-and-feel round, 2026-07-03, audit D3): three named curves, sitewide, no raw "ease"/"linear" anywhere. --ease-out for exits/reveals, --ease-soft-spring for arrivals and hovers (a whisker of overshoot, settles gently), --ease-swift for small UI moves. The older names below alias into the system. */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft-spring: cubic-bezier(.22, 1.18, .36, 1); --ease-swift: cubic-bezier(.4, 0, .2, 1); --ease-standard: var(--ease-swift); --ease-out-expo: var(--ease-out); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* legacy; prefer --ease-soft-spring */ /* ---------------------------------------------------------- 5.1 MOTION — durations ---------------------------------------------------------- */ --dur-press: 120ms; /* button press feedback (Brand Pack §11: 120-160ms) */ --dur-fast: 150ms; /* also the pill mark's colour change (SITE-017.2) */ --dur-hover: 180ms; /* card/button hover (industrial, quick) */ --dur-toast: 240ms; /* toast slide-up (Brand Pack §11: reveals 200-260ms) */ --dur-base: 300ms; /* reveal choreography (audit D2): opacity fades on --ease-out while the rise settles on the soft spring, slightly longer */ --dur-reveal: 700ms; /* reveal opacity */ --dur-reveal-rise: 950ms; /* reveal translate (soft spring) */ --reveal-rise: 26px; /* arrival rise distance */ --stagger-cap: 600ms; /* total sibling spread never exceeds this */ --dur-drift: 42s; /* background glow drift (long, gentle) */ /* SITE-016.1: the ticker band. A marquee has to run at one speed or it lurches, so it is the one place a linear curve is sanctioned; it pauses on hover and does not move at all under prefers-reduced-motion. */ --dur-ticker: 56s; --ease-ticker: linear; /* tooltips appear on sustained hover after a deliberate delay (Brand Pack §11) */ --delay-tip: 1s; /* ---------------------------------------------------------- 5.2 MOTION — stagger step (multiplied by element --i) ---------------------------------------------------------- */ --stagger-step: 80ms; --stagger-reveal: 80ms; /* scroll-reveal sibling stagger (audit D2) */ /* ---------------------------------------------------------- 5.3 MOTION — composite transitions (convenience) ---------------------------------------------------------- */ --transition-colors: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); --transition-lift: transform var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-standard); /* ---------------------------------------------------------- 6.0 MOTIF — toolpath linework (CNC cut-lines) The background is now flat Carbon: the faint engineering grid and drifting glows are retired with the earlier direction. The toolpath connector remains available. ---------------------------------------------------------- */ --toolpath-color: var(--color-border-strong); --toolpath-width: 1px; --toolpath-dash: 6 6; /* SVG stroke-dasharray */ /* ---------------------------------------------------------- 6.1 BACKGROUND FX — faint graph-paper grid + a single slow slate radial glow (reintroduced, kept very faint; disabled under prefers-reduced-motion). See base.css .page-fx. ---------------------------------------------------------- */ --grid-line: rgba(154, 147, 139, .035); /* warm-grey, barely there */ --grid-cell: 34px; /* graph-paper cell */ --glow-color: rgba(74, 144, 232, .09); /* the accent blue, very low opacity */ /* showcase ambient glow behind a product frame on carbon — large soft blurred blue, fakes depth without flame (Brand Pack §13) */ --showcase-glow: rgba(74, 144, 232, .15); /* ---------------------------------------------------------- 6.2 WEBTOKENS v1 — slate glass + deep hero gradient (BlueGrey_WebTokens-Draft_v1.css; overrides the brand pack where they differ. Accent = Option A, slate-forward.) ---------------------------------------------------------- */ --surface-glass: rgba(255, 255, 255, .03); --surface-glass-hover: rgba(255, 255, 255, .06); --surface-glass-border: rgba(122, 165, 220, .18); /* hairline blue-slate, not white */ --glass-blur: blur(12px); --accent-glow: var(--blue-glow); /* Option B blue glow */ --accent-gradient: linear-gradient(135deg, var(--blue) 0%, var(--blue-btn) 100%); /* the deep backdrop: carbon lifting from a near-black centre, with a faint blue cast at the top edge — depth, not decoration */ --bg-hero: radial-gradient(72rem 30rem at 50% -8rem, var(--blue-glow-soft), transparent 62%), radial-gradient(circle at 50% -10%, #212933 0%, var(--bg-deep) 66%); /* showcase tints — restrained branded tiles, never a rainbow */ --tile-slate: #243039; --tile-carbon: var(--bg-deep); --tile-warm: #2A2620; --tile-blue: #1C2A3D; /* muted blue-tinted tile (Option B) */ /* nest-animation placeholder parts — restrained branded tints: deep slate, warm neutral and the Option B blue. Never flame, no rainbow. */ --part-slate: rgba(102, 121, 140, .78); --part-blue: rgba(74, 144, 232, .58); --part-warm: rgba(201, 195, 184, .32); --part-1: var(--part-slate); --part-2: var(--part-blue); --part-3: var(--part-warm); --sheet-line: rgba(122, 165, 220, .30); --sheet-fill: rgba(10, 13, 18, .40); /* SITE-008.1: the real-nest SVGs ("B, cut lines"). Their own tokens rather than borrowing --blue-glow-soft, which is the hero backdrop at the same value: a nest part is not a glow, and tuning one must not move the other. */ --nest-part-fill: rgba(74, 144, 232, .12); /* cut-line part wash */ --nest-container-fill: rgba(232, 226, 214, .14); /* ivory wash: what a part nests INSIDE */ /* the nest-collapse loop: one full pass */ --dur-nest: 7s; /* spotlight-card hover field (audit D5): cursor-tracked radial on dark-zone card grids, low-opacity accent, desktop only */ --spot-glow: rgba(74, 144, 232, .12); --spot-size: 300px; /* card "faces" (audit D7/12): each product card carries a muted tinted mini-diagram tile until a real shot lands. Dark-band values here; the paper band remaps them light. Never flame. */ --viz-bg1: #1D2733; /* blue-slate tile */ --viz-bg2: #232B33; /* slate tile (the audit's green/lavender demo tints are NOT adopted: brand family only) */ --viz-bg3: #2A2620; /* warm neutral */ --viz-shape: rgba(138, 160, 181, .55); --viz-shape-blue: rgba(74, 144, 232, .50); --viz-shape-soft: rgba(201, 195, 184, .30); /* ---------------------------------------------------------- 7.0 Z-INDEX — single scale ---------------------------------------------------------- */ --z-base: 0; --z-nav: 100; --z-menu: 200; --z-modal: 300; }