/* ============================================================ GDS — Garage Door Solutions Design System Tokens: Color + Typography + Spacing + Radii + Shadow + Motion ============================================================ */ /* Fonts: Inter Variable shipped locally; Space Grotesk + JetBrains Mono via Google Fonts CDN. See fonts/README.md for substitution notes. */ @font-face { font-family: "Inter"; src: url("./fonts/InterVariable.woff2") format("woff2-variations"), url("./fonts/InterVariable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("./fonts/InterVariable-Italic.woff2") format("woff2-variations"), url("./fonts/InterVariable-Italic.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } /* Space Grotesk + JetBrains Mono are loaded via a non-render-blocking in each page (a CSS @import here was render-blocking and, placed after @font-face, invalid). See build/fonts.mjs. */ :root { /* ---------- Brand core (extracted from logo) ---------- */ --brand-blue: #205BF2; /* Electric blue — primary, signature */ --brand-blue-bright: #4F7CFF; /* Hover / glow */ --brand-blue-deep: #0B2E99; /* Pressed / depth */ --brand-maple-red: #DD0033; /* Maple flame, warm anchor */ --brand-maple-orng: #FE8415; /* Maple flame, ember */ --brand-white: #FFFFFF; /* ---------- Neutrals — matte black scale (dark-mode-first) ---------- */ --ink-0: #0A0A0C; /* matte black, page bg */ --ink-1: #111114; /* card bg */ --ink-2: #18181D; /* elevated card */ --ink-3: #232329; /* hairline-strong / divider */ --ink-4: #2E2E36; /* border */ --ink-5: #4A4A55; /* muted icon */ --ink-6: #7A7A86; /* secondary text */ --ink-7: #B5B5BE; /* tertiary text */ --ink-8: #E4E4E8; /* primary text on dark */ --ink-9: #F6F6F8; /* high-contrast text */ /* ---------- Semantic foreground / background ---------- */ --bg: var(--ink-0); --bg-elev: var(--ink-1); --bg-elev-2: var(--ink-2); --bg-glass: rgba(24, 24, 29, 0.62); /* glassmorphism panel */ --bg-grid: rgba(255, 255, 255, 0.04); /* grid line on dark */ --fg: var(--ink-9); /* primary text */ --fg-muted: var(--ink-7); /* body secondary */ --fg-dim: var(--ink-6); /* labels, meta */ --fg-faint: var(--ink-5); /* placeholders */ --fg-invert: var(--ink-0); /* text on accent button */ --border: var(--ink-4); --border-soft: var(--ink-3); --hairline: rgba(255, 255, 255, 0.08); /* ---------- Accent / status ---------- */ --accent: var(--brand-blue); --accent-hover: var(--brand-blue-bright); --accent-press: var(--brand-blue-deep); --accent-glow: 0 0 0 1px rgba(32, 91, 242, 0.45), 0 8px 28px -8px rgba(32, 91, 242, 0.55); /* @kind shadow */ --success: #1FBA75; /* job complete / online tech */ --warning: #F2B23A; /* needs attention */ --danger: var(--brand-maple-red); /* emergency, urgent */ --info: #5EA8FF; /* ---------- Signature gradients ---------- */ --grad-flame: linear-gradient(135deg, #DD0033 0%, #FE8415 100%); /* @kind color */ --grad-blue: linear-gradient(135deg, #205BF2 0%, #4F7CFF 100%); /* @kind color */ --grad-night: linear-gradient(180deg, #0A0A0C 0%, #15151B 100%); /* @kind color */ --grad-aurora: radial-gradient(60% 50% at 50% 0%, rgba(32, 91, 242, 0.35), transparent 70%); /* @kind color */ /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- Spacing (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- Elevation / Shadow ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px -4px rgba(0,0,0,0.5); --shadow-lg: 0 16px 48px -12px rgba(0,0,0,0.6); --shadow-xl: 0 32px 80px -16px rgba(0,0,0,0.7); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); --shadow-glow-blue: 0 0 32px -4px rgba(32, 91, 242, 0.45); --shadow-glow-flame: 0 0 32px -4px rgba(254, 132, 21, 0.4); /* ---------- Motion ---------- */ /* --ease-out is the default ease (GSAP "power3.out") */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* --ease-industrial: signature ease — heavy door open/close */ --ease-industrial: cubic-bezier(0.85, 0, 0.15, 1); /* @kind other */ --dur-instant: 80ms; /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 240ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --dur-deliberate: 720ms; /* @kind other */ /* ---------- Typography families ---------- */ --font-display: "Space Grotesk", "SF Pro Display", system-ui, -apple-system, sans-serif; --font-body: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- Typography scale ---------- */ /* Display — for hero, large marketing moments */ --fs-display-xl: clamp(64px, 9vw, 128px); /* @kind font */ --fs-display-lg: clamp(48px, 6vw, 88px); /* @kind font */ --fs-display-md: clamp(40px, 5vw, 64px); /* @kind font */ /* Headings */ --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-h6: 14px; /* Body */ --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-micro: 11px; /* Letter spacing */ --tracking-tight: -0.02em; /* @kind font */ --tracking-snug: -0.01em; /* @kind font */ --tracking-normal: 0; /* @kind font */ --tracking-wide: 0.04em; /* @kind font */ /* --tracking-wider: eyebrow / all-caps labels */ --tracking-wider: 0.12em; /* @kind font */ /* Line height */ --lh-tight: 1.05; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-base: 1.5; /* @kind font */ --lh-loose: 1.7; /* @kind font */ } /* ============================================================ Semantic element styles — apply by default on any descendant ============================================================ */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display class — opt-in for hero text */ .display, .display-xl, .display-lg, .display-md { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg); } .display-xl { font-size: var(--fs-display-xl); } .display-lg { font-size: var(--fs-display-lg); } .display-md { font-size: var(--fs-display-md); } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg); margin: 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--fg); margin: 0; } h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); color: var(--fg); margin: 0; } h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--fg); margin: 0; } h5, .h5 { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: 600; color: var(--fg); margin: 0; } p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-muted); margin: 0; } p.lead { font-size: var(--fs-body-lg); color: var(--ink-8); line-height: var(--lh-base); } /* Eyebrow / uppercase tracked label — used heavily for industrial signage */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-dim); } .eyebrow.accent { color: var(--accent); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-8); background: var(--ink-2); padding: 2px 6px; border-radius: var(--radius-xs); border: 1px solid var(--ink-3); } /* Light-mode override (optional, but defined for completeness) */ .theme-light { --bg: #F6F6F8; --bg-elev: #FFFFFF; --bg-elev-2: #FFFFFF; --bg-glass: rgba(255, 255, 255, 0.7); --bg-grid: rgba(0, 0, 0, 0.05); --fg: #0A0A0C; --fg-muted: #2E2E36; --fg-dim: #4A4A55; --fg-faint: #7A7A86; --fg-invert: #FFFFFF; --border: #E4E4E8; --border-soft: #EFEFF2; --hairline: rgba(0,0,0,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px -4px rgba(0,0,0,0.1); --shadow-lg: 0 16px 48px -12px rgba(0,0,0,0.15); }