/* ========================================================================== SAM Enterprises Canada Ltd. — Design Tokens (P1 · v2.0) Derived from approved Brand Assets (E:\sam\), verified against sampled logo pixels + computed WCAG contrast. ART DIRECTION — "Technical Precision" The logo's own description names its geometry: precise cuts, balanced engineering. The UI language follows from that, not from trends: · Structure is drawn with HAIRLINES, not shadows. · Gold behaves like a CIRCUIT TRACE — thin, deliberate, ≤5% of surface. · Monospace carries indices and labels, like a drawing schedule. · Composition is ASYMMETRIC on an engineering grid; never centered by default. · Motion changes LINES and COLOR, never lifts or floats objects. ========================================================================== */ :root { /* ---------- NAVY ---------- #0B2A4A = Brand Board declared Primary. #0F1E30 = sampled wordmark ink (deepest text ink). */ --navy-950: #060D16; --navy-900: #0A1826; --navy-800: #0F1E30; /* sampled logo ink */ --navy-700: #0B2A4A; /* BRAND PRIMARY */ --navy-600: #14395F; --navy-500: #1E4E7C; --navy-300: #6B93BB; --navy-200: #A8C3DA; --navy-100: #D9E5EF; --navy-50: #F2F6FA; /* ---------- GOLD ---------- #D4A017 = Brand Board declared Accent. Sampled range #C49236–#DAA742. ⚠ HARD RULE: gold-500 on white = 2.38:1 → never text on light surfaces. Gold text on white MUST use gold-700 (#8A6410 = 5.37:1). */ --gold-800: #6B4D0C; --gold-700: #8A6410; /* only gold approved for text on white */ --gold-600: #A87D13; --gold-500: #D4A017; /* ACCENT — rules, marks, on-navy text */ --gold-400: #E0B441; --gold-200: #F4DFAC; --gold-100: #FAF1DC; /* ---------- NEUTRAL ---------- */ --slate-900: #1F2A37; /* Brand Board declared Secondary */ --slate-700: #3D4A5C; --slate-600: #4A5A6E; /* secondary text on white — 7.05:1 */ --slate-500: #6B7A8F; /* meta — 4.6:1 */ --slate-400: #97A3B4; --slate-300: #C3CCD8; --slate-200: #E4E9EF; --slate-100: #F1F4F8; --slate-50: #F7F9FB; --white: #FFFFFF; /* ---------- SEMANTIC ROLES ---------- */ --bg-page: var(--white); --bg-subtle: var(--slate-50); --bg-inverse: var(--navy-800); --bg-inverse-2: var(--navy-900); --text-primary: var(--navy-800); --text-secondary: var(--slate-600); --text-meta: var(--slate-500); --text-inverse: var(--white); --text-on-navy: rgba(255,255,255,.72); --text-accent: var(--gold-700); /* gold text on LIGHT */ --text-accent-dk: var(--gold-400); /* gold text on DARK */ /* Hairlines carry the structure. */ --line: #E4E9EF; --line-strong: #C3CCD8; --line-gold: var(--gold-500); --line-on-dark: rgba(255,255,255,.13); --line-on-dark-2:rgba(255,255,255,.26); --success: #1F7A4D; --danger: #B32020; /* ---------- TYPOGRAPHY ---------- Deliberately NOT Inter/Montserrat/Poppins/Roboto — those read as template. Archivo → industrial American grotesque. Variable width axis lets headlines run slightly condensed, echoing the wordmark's tight, engineered proportions. Strong, not decorative. IBM Plex Sans→ drawn for an engineering brand. High legibility at small sizes, distinct from the Helvetica/Inter default look. IBM Plex Mono→ indices, labels, specs. This is the signature move: it makes the page read as a technical document. All three are OFL — free to self-host on cPanel, no licensing exposure. */ --font-display: 'Archivo', 'Archivo Expanded', 'Segoe UI', system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Extreme scale contrast: architectural headlines vs. quiet body. */ --fs-display: clamp(2.75rem, 1.35rem + 5.6vw, 6rem); --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 3rem); --fs-h3: clamp(1.1875rem, 1.06rem + 0.5vw, 1.5rem); --fs-h4: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-lead: clamp(1.0625rem, 1rem + 0.34vw, 1.1875rem); --fs-body: 1rem; --fs-small: 0.9375rem; --fs-xs: 0.8125rem; --fs-micro: 0.6875rem; /* mono labels */ --lh-tight: 0.98; --lh-heading: 1.1; --lh-snug: 1.4; --lh-body: 1.72; --ls-display: -0.035em; --ls-heading: -0.022em; --ls-label: 0.16em; /* mono labels — brand signature */ --ls-button: 0.06em; /* ---------- SPACING (4px base) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---------- VERTICAL RHYTHM ---------- One scale drives every section boundary. Previous values peaked at 136px per side (272px between sections) which read as drift rather than calm. These land at ~84px desktop / ~52px mobile per side — still generous, but the page now holds together as one document. token mobile 375 tablet 768 desktop 1440 cap --section-y 52 60 84 96 --section-y-tight 40 46 60 64 --section-y-hero 36 44 59 60 --shead-gap 32 38 51 52 */ --section-y: clamp(3.25rem, 2rem + 3.6vw, 6rem); --section-y-tight: clamp(2.5rem, 1.8rem + 2.2vw, 4rem); --section-y-hero: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); --shead-gap: clamp(2rem, 1.4rem + 2vw, 3.25rem); /* ---------- RADIUS ---------- Near-zero. The logo is cut, not rounded. Rounded corners are the fastest way to look like a UI kit. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 3px; /* ---------- ELEVATION ---------- Only the mobile drawer earns a shadow (it genuinely floats). Everything else is separated by hairlines and whitespace. */ --shadow-drawer: -24px 0 64px rgba(6,13,22,.34); /* ---------- MOTION ---------- Lines extend, colours invert. Nothing lifts, floats, glows, or bounces. */ --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 460ms; --ease: cubic-bezier(.22, 1, .36, 1); --ease-linear: cubic-bezier(.4, 0, .2, 1); /* ---------- LAYOUT ---------- */ --container: 1280px; --container-narrow: 780px; --gutter: 1.5rem; --header-h: 82px; /* mobile: gives the lockup room to breathe */ --hairline: 1px; } @media (min-width: 768px) { :root { --gutter: 2.5rem; --header-h: 84px; } } @media (min-width: 1280px) { :root { --gutter: 4rem; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } html { scroll-behavior: auto; } }