/* ============================================================ BURDS NERDS — Brand System v1.0 Locked: March 2026 Usage: Link this file first in every page . All tokens are available as CSS custom properties. Dark mode switches automatically via prefers-color-scheme. Override with [data-theme="dark"] on for a manual toggle. ============================================================ */ /* ------------------------------------------------------------ 1. FONT IMPORTS Served via jsDelivr (fontsource) — no Google Fonts dependency. ------------------------------------------------------------ */ @import url('https://cdn.jsdelivr.net/npm/@fontsource/syne@5/700.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/syne@5/800.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5/400.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5/500.css'); @import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5/600.css'); /* ------------------------------------------------------------ 2. LIGHT MODE TOKENS (default) ------------------------------------------------------------ */ :root { /* --- Color: Backgrounds --- */ --bn-bg: #FAFAF7; /* Page background — warm off-white */ --bn-surf: #F0EDE6; /* Cards, nav, section fills */ --bn-surf-2: #E8E4DB; /* Deeper surface — hover states, stripes */ --bn-acc-subtle: #F5EDD6; /* Gold-tinted surface — callouts, footer */ /* --- Color: Text --- */ --bn-text: #1A1818; /* Primary — headlines, body */ --bn-text-muted: #706D66; /* Secondary — captions, meta, placeholders */ --bn-text-faint: #A8A49E; /* Tertiary — disabled, hint text */ /* --- Color: Accent (Warm Gold) --- */ --bn-acc: #B8860B; /* Primary accent — CTAs, links, highlights */ --bn-acc-hover: #9A7009; /* Accent hover/active state */ --bn-acc-on: #FAFAF7; /* Text on accent background */ /* --- Color: Border --- */ --bn-bdr: #E2DDD6; /* Default border — cards, dividers */ --bn-bdr-strong: #C8C2B8; /* Emphasized border — focus rings, active */ /* --- Color: Logo --- */ --bn-logo-circle: #1A1818; /* Circle/square fill */ --bn-logo-letter: #FAFAF7; /* Letter fill inside circle */ --bn-logo-word: #1A1818; /* Wordmark text color (header, no circle) */ /* --- Typography: Families --- */ --bn-font-display: 'Syne', sans-serif; /* Headlines, display, H1–H3 */ --bn-font-body: 'Inter', sans-serif; /* Body, UI, labels, captions */ /* --- Typography: Display scale (Syne) --- */ --bn-fs-display: clamp(36px, 5vw, 56px); /* Hero headline */ --bn-fw-display: 800; --bn-lh-display: 1.0; --bn-ls-display: -0.025em; /* --- Typography: Heading scale (Syne) --- */ --bn-fs-h1: clamp(26px, 3.5vw, 36px); --bn-fw-h1: 800; --bn-lh-h1: 1.1; --bn-ls-h1: -0.02em; --bn-fs-h2: clamp(20px, 2.5vw, 26px); --bn-fw-h2: 700; --bn-lh-h2: 1.2; --bn-ls-h2: -0.015em; --bn-fs-h3: clamp(16px, 2vw, 20px); --bn-fw-h3: 700; --bn-lh-h3: 1.3; --bn-ls-h3: -0.01em; /* --- Typography: Body scale (Inter) --- */ --bn-fs-body: 16px; --bn-fw-body: 400; --bn-lh-body: 1.7; --bn-fs-body-sm: 14px; --bn-lh-body-sm: 1.6; --bn-fs-label: 11px; --bn-fw-label: 600; --bn-ls-label: 0.1em; /* Always uppercase with this tracking */ --bn-fs-caption: 12px; --bn-fw-caption: 400; --bn-lh-caption: 1.5; /* --- Spacing scale --- */ --bn-space-1: 4px; --bn-space-2: 8px; --bn-space-3: 12px; --bn-space-4: 16px; --bn-space-5: 24px; --bn-space-6: 32px; --bn-space-7: 48px; --bn-space-8: 64px; --bn-space-9: 96px; --bn-space-10: 128px; /* --- Border radius --- */ --bn-radius-sm: 4px; /* Buttons, tags */ --bn-radius-md: 8px; /* Cards, inputs */ --bn-radius-lg: 12px; /* Large cards, modals */ --bn-radius-full: 9999px; /* Pills, avatars */ /* --- Transitions --- */ --bn-ease: cubic-bezier(0.4, 0, 0.2, 1); --bn-duration: 160ms; --bn-transition: var(--bn-duration) var(--bn-ease); /* --- Depth: Grain texture --- SVG fractalNoise at 256×256 — tile seamlessly via background-size. Apply via background-image + mix-blend-mode: overlay on pseudo-elements. Opacity 0.02–0.06 depending on section darkness. -------------------- */ --bn-grain-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ 3. DARK MODE TOKENS Auto-applies via prefers-color-scheme. Manual override: add data-theme="dark" to . ------------------------------------------------------------ */ /* Dark mode — driven entirely by JS setting data-theme="dark" on . No media query. The JS reads system preference on load and sets the attribute, so this selector is the single source of truth. */ [data-theme="dark"] { --bn-bg: #111010; --bn-surf: #1E1C1A; --bn-surf-2: #272420; --bn-acc-subtle: #3D3020; /* Lightened: #2A2318 was too close to --bn-bg (#111010) */ --bn-text: #F0EDE6; --bn-text-muted: #8A8480; --bn-text-faint: #5A5854; --bn-acc: #D4A017; --bn-acc-hover: #E8B420; --bn-acc-on: #111010; --bn-bdr: #2E2B28; --bn-bdr-strong: #48443E; --bn-logo-circle: #F0EDE6; --bn-logo-letter: #111010; --bn-logo-word: #F0EDE6; } /* ------------------------------------------------------------ 4. BASE RESET & DEFAULTS ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background-color: var(--bn-bg); color: var(--bn-text); font-family: var(--bn-font-body); font-size: var(--bn-fs-body); font-weight: var(--bn-fw-body); line-height: var(--bn-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--bn-transition), color var(--bn-transition); } img, video, svg { display: block; max-width: 100%; } a { color: var(--bn-acc); text-decoration: underline; text-underline-offset: 3px; transition: color var(--bn-transition); } a:hover { color: var(--bn-acc-hover); } /* ------------------------------------------------------------ 5. TYPOGRAPHY UTILITY CLASSES ------------------------------------------------------------ */ /* Display — hero headline */ .bn-display { font-family: var(--bn-font-display); font-size: var(--bn-fs-display); font-weight: var(--bn-fw-display); line-height: var(--bn-lh-display); letter-spacing: var(--bn-ls-display); color: var(--bn-text); } /* Headings */ .bn-h1 { font-family: var(--bn-font-display); font-size: var(--bn-fs-h1); font-weight: var(--bn-fw-h1); line-height: var(--bn-lh-h1); letter-spacing: var(--bn-ls-h1); color: var(--bn-text); } .bn-h2 { font-family: var(--bn-font-display); font-size: var(--bn-fs-h2); font-weight: var(--bn-fw-h2); line-height: var(--bn-lh-h2); letter-spacing: var(--bn-ls-h2); color: var(--bn-text); } .bn-h3 { font-family: var(--bn-font-display); font-size: var(--bn-fs-h3); font-weight: var(--bn-fw-h3); line-height: var(--bn-lh-h3); letter-spacing: var(--bn-ls-h3); color: var(--bn-text); } /* Body */ .bn-body { font-size: var(--bn-fs-body); line-height: var(--bn-lh-body); color: var(--bn-text-muted); } .bn-body-sm { font-size: var(--bn-fs-body-sm); line-height: var(--bn-lh-body-sm); color: var(--bn-text-muted); } /* Label — always uppercase */ .bn-label { font-family: var(--bn-font-body); font-size: var(--bn-fs-label); font-weight: var(--bn-fw-label); letter-spacing: var(--bn-ls-label); text-transform: uppercase; color: var(--bn-acc); } /* Caption */ .bn-caption { font-size: var(--bn-fs-caption); font-weight: var(--bn-fw-caption); line-height: var(--bn-lh-caption); color: var(--bn-text-muted); } /* Accent color modifier */ .bn-accent { color: var(--bn-acc); } /* ------------------------------------------------------------ 6. COMPONENT UTILITY CLASSES ------------------------------------------------------------ */ /* Primary button */ .bn-btn { display: inline-flex; align-items: center; gap: var(--bn-space-2); background: var(--bn-acc); color: var(--bn-acc-on); font-family: var(--bn-font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; padding: 12px 24px; border-radius: var(--bn-radius-sm); border: none; cursor: pointer; transition: background var(--bn-transition), transform var(--bn-transition); } .bn-btn:hover { background: var(--bn-acc-hover); color: var(--bn-acc-on); transform: translateY(-1px); } .bn-btn:active { transform: translateY(0); } /* Ghost button */ .bn-btn-ghost { display: inline-flex; align-items: center; gap: var(--bn-space-2); background: transparent; color: var(--bn-acc); font-family: var(--bn-font-body); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 0; border: none; cursor: pointer; transition: color var(--bn-transition); } .bn-btn-ghost:hover { color: var(--bn-acc-hover); } /* Card */ .bn-card { background: var(--bn-surf); border: 0.5px solid var(--bn-bdr); border-radius: var(--bn-radius-md); padding: var(--bn-space-5); transition: border-color var(--bn-transition); } .bn-card:hover { border-color: var(--bn-bdr-strong); } /* Accent rule — the gold bar used above service cards */ .bn-rule { width: 24px; height: 3px; background: var(--bn-acc); border-radius: 1px; margin-bottom: var(--bn-space-3); } /* Section wrapper */ .bn-section { padding: var(--bn-space-9) var(--bn-space-6); max-width: 1200px; margin: 0 auto; } /* Tinted section (uses accent subtle bg) */ .bn-section-tinted { background: var(--bn-acc-subtle); } /* ------------------------------------------------------------ 7. DARK MODE TOGGLE (JS hook) Add/remove data-theme="dark" on via JS. Example toggle script (add before ): const toggle = document.getElementById('theme-toggle'); const root = document.documentElement; toggle.addEventListener('click', () => { const isDark = root.getAttribute('data-theme') === 'dark'; root.setAttribute('data-theme', isDark ? 'light' : 'dark'); localStorage.setItem('bn-theme', isDark ? 'light' : 'dark'); }); // On page load, restore saved preference: const saved = localStorage.getItem('bn-theme'); if (saved) root.setAttribute('data-theme', saved); ------------------------------------------------------------ */ /* ------------------------------------------------------------ 8. ACCESSIBILITY ------------------------------------------------------------ */ /* Focus ring — keyboard navigation */ :focus-visible { outline: 2px solid var(--bn-acc); outline-offset: 3px; border-radius: var(--bn-radius-sm); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }