/* ===================================================================== telMAX Lander · Design Tokens --------------------------------------------------------------------- Single source of truth for colour, type, spacing, motion. Brand values come from telMAX Brand Guidelines Q1 2026 (residential). Production must use Proxima Nova + Quincy CF (licensed). This file uses Montserrat as the production-approved fallback (per the brand guideline, system-fonts page) and Fraunces as a humanist serif italic stand-in for Quincy CF in this design preview only. When the licensed fonts are deployed, only the --font-* variables below need to change. ===================================================================== */ :root { /* ----------------------------------------------------------------- 1. COLOUR — residential palette (Brand Guidelines Q1 2026) ----------------------------------------------------------------- */ --tmx-deep-green: #1B3D38; /* primary surface */ --tmx-deep-green-90: #234540; /* hover lift on Deep Green */ --tmx-deep-green-80: #2C504A; /* lifted card on dark */ --tmx-deep-green-darker:#142D29; /* footer / hero gradient bottom */ --tmx-light-speed: #F9F9EB; /* warm cream — body surface */ --tmx-light-speed-95: #F4F4E5; /* hover on cream */ --tmx-limewire: #EEF985; /* italic emphasis + primary CTA fill */ --tmx-limewire-90: #E5F26E; /* CTA hover */ --tmx-mauve-it: #B7B5F5; /* contrast section */ --tmx-mauve-it-95: #C4C2F7; --tmx-grey-matter: #1F1F1F; /* body copy on light surfaces */ --tmx-white: #FFFFFF; /* Functional / supportive (not in brand palette — derived for UI utility) */ --tmx-ink: #1B2014; /* near-black, used on Light Speed */ --tmx-ink-soft: #4A4F40; /* muted text on cream */ --tmx-line-soft: #E0DDC9; /* divider on Light Speed */ --tmx-line-soft-d: rgba(255,255,255,0.14); /* divider on Deep Green */ /* States — use sparingly, palette-aware */ --tmx-success-bg: #E6F2D9; --tmx-success-fg: #2B4D17; --tmx-warning-bg: #FFF1C2; --tmx-warning-fg: #5C4400; --tmx-error-bg: #FCE0DA; --tmx-error-fg: #7A1A07; /* Surfaces / elevation */ --tmx-surface-cream: var(--tmx-light-speed); --tmx-surface-paper: #FFFFFF; --tmx-surface-dark: var(--tmx-deep-green); --tmx-surface-mauve: var(--tmx-mauve-it); /* ----------------------------------------------------------------- 2. TYPOGRAPHY ----------------------------------------------------------------- Production: --font-sans: "Proxima Nova", Montserrat, system-ui, sans-serif; --font-serif: "Quincy CF", Fraunces, Georgia, serif; Preview (this file): Montserrat + Fraunces via Google Fonts (loaded in ). ----------------------------------------------------------------- */ --tmx-font-sans: "Montserrat", "Helvetica Neue", system-ui, -apple-system, sans-serif; --tmx-font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; /* Weights (Proxima Nova hierarchy mapped onto Montserrat) */ --tmx-fw-regular: 400; --tmx-fw-medium: 500; --tmx-fw-semibold: 600; --tmx-fw-bold: 700; /* Type scale (px → rem; root = 16px) */ --tmx-fs-12: 0.75rem; /* 12px — micro / fine print */ --tmx-fs-13: 0.8125rem; /* 13px — captions */ --tmx-fs-14: 0.875rem; /* 14px — secondary body */ --tmx-fs-15: 0.9375rem; /* 15px — body */ --tmx-fs-16: 1rem; /* 16px — base body */ --tmx-fs-18: 1.125rem; /* 18px — body-large */ --tmx-fs-20: 1.25rem; /* 20px — subhead */ --tmx-fs-24: 1.5rem; /* 24px — H4 */ --tmx-fs-28: 1.75rem; /* 28px — H3 */ --tmx-fs-32: 2rem; /* 32px — H2 mobile */ --tmx-fs-40: 2.5rem; /* 40px — H2 desktop */ --tmx-fs-48: 3rem; /* 48px — H1 mobile */ --tmx-fs-64: 4rem; /* 64px — H1 desktop */ --tmx-fs-80: 5rem; /* 80px — display */ /* Line heights — guideline: H1 100%, H2 110%, body 120% */ --tmx-lh-tight: 1.0; /* H1 */ --tmx-lh-snug: 1.1; /* H2 */ --tmx-lh-base: 1.2; /* sub / lede */ --tmx-lh-relaxed: 1.5; /* long-form body */ --tmx-lh-loose: 1.7; /* fine print */ /* Letter spacing — guideline: 2% tracking on body and CTA */ --tmx-ls-tight: -0.025em; --tmx-ls-snug: -0.015em; --tmx-ls-normal: 0; --tmx-ls-body: 0.02em; /* 2% — guideline body/CTA */ --tmx-ls-wide: 0.08em; /* eyebrow / kicker */ --tmx-ls-wider: 0.14em; /* small caps / micro labels */ /* ----------------------------------------------------------------- 3. SPACING — based on 4px unit ----------------------------------------------------------------- */ --tmx-sp-0: 0; --tmx-sp-1: 0.25rem; /* 4 */ --tmx-sp-2: 0.5rem; /* 8 */ --tmx-sp-3: 0.75rem; /* 12 */ --tmx-sp-4: 1rem; /* 16 */ --tmx-sp-5: 1.25rem; /* 20 */ --tmx-sp-6: 1.5rem; /* 24 */ --tmx-sp-8: 2rem; /* 32 */ --tmx-sp-10: 2.5rem; /* 40 */ --tmx-sp-12: 3rem; /* 48 */ --tmx-sp-16: 4rem; /* 64 */ --tmx-sp-20: 5rem; /* 80 */ --tmx-sp-24: 6rem; /* 96 */ --tmx-sp-32: 8rem; /* 128 */ /* Layout */ --tmx-content-max: 1200px; --tmx-content-narrow: 720px; --tmx-gutter-mobile: var(--tmx-sp-5); --tmx-gutter-tablet: var(--tmx-sp-8); --tmx-gutter-desktop: var(--tmx-sp-10); /* Section rhythm */ --tmx-section-py-mobile: var(--tmx-sp-16); --tmx-section-py-desktop: var(--tmx-sp-24); /* ----------------------------------------------------------------- 4. RADIUS ----------------------------------------------------------------- */ --tmx-r-0: 0; --tmx-r-2: 2px; --tmx-r-4: 4px; --tmx-r-6: 6px; --tmx-r-8: 8px; --tmx-r-12: 12px; --tmx-r-16: 16px; --tmx-r-20: 20px; --tmx-r-24: 24px; --tmx-r-pill: 999px; /* ----------------------------------------------------------------- 5. ELEVATION (shadow) ----------------------------------------------------------------- Quiet, neutral shadows. No brand-coloured drop shadows. ----------------------------------------------------------------- */ --tmx-shadow-1: 0 1px 2px rgba(15, 23, 17, 0.06), 0 1px 1px rgba(15, 23, 17, 0.04); --tmx-shadow-2: 0 2px 6px rgba(15, 23, 17, 0.08), 0 1px 2px rgba(15, 23, 17, 0.06); --tmx-shadow-3: 0 6px 16px rgba(15, 23, 17, 0.10), 0 2px 4px rgba(15, 23, 17, 0.06); --tmx-shadow-4: 0 16px 32px rgba(15, 23, 17, 0.12), 0 4px 8px rgba(15, 23, 17, 0.06); --tmx-shadow-5: 0 24px 56px rgba(15, 23, 17, 0.18), 0 8px 16px rgba(15, 23, 17, 0.08); --tmx-shadow-focus: 0 0 0 3px rgba(238, 249, 133, 0.6); /* Limewire focus ring */ --tmx-shadow-focus-on-light: 0 0 0 3px rgba(27, 61, 56, 0.4); /* Deep Green focus */ /* ----------------------------------------------------------------- 6. MOTION ----------------------------------------------------------------- Three durations only. Prefer ease-out for entry, ease-in for exit. Respect prefers-reduced-motion (handled in components.css). ----------------------------------------------------------------- */ --tmx-motion-snap: 120ms; /* button press, focus state */ --tmx-motion-smooth: 240ms; /* card hover, expand/collapse */ --tmx-motion-lazy: 420ms; /* large layout transitions */ --tmx-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --tmx-ease-in: cubic-bezier(0.55, 0, 1, 0.45); --tmx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ----------------------------------------------------------------- 7. Z-INDEX ----------------------------------------------------------------- */ --tmx-z-base: 1; --tmx-z-sticky: 20; --tmx-z-overlay: 40; --tmx-z-modal: 50; --tmx-z-toast: 60; } /* ===================================================================== 8. BREAKPOINTS — for reference only; CSS uses raw media queries. --------------------------------------------------------------------- sm: 640px — large phone landscape / phablet md: 768px — tablet portrait (also where mobile→tablet layout flips) lg: 1024px — tablet landscape / small laptop xl: 1280px — desktop (canonical desktop layout) 2xl: 1536px — wide desktop (wider gutters, content stays at max-1200) ===================================================================== */ /* ===================================================================== 9. DARK MODE — placeholder. Brand guideline does not currently define a dark mode. The lander runs on Deep Green background already on its hero / footer; toggling further would require brand approval. This block left intentionally empty as a hook for future work. ===================================================================== */ @media (prefers-color-scheme: dark) { /* No-op — brand-locked. See README §dark-mode for rationale. */ } /* ===================================================================== Reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --tmx-motion-snap: 0ms; --tmx-motion-smooth: 0ms; --tmx-motion-lazy: 0ms; } }