/* ========================================================================== kraflex | variables.css -------------------------------------------------------------------------- The single source of truth for the whole site. Change a value here and it updates everywhere. Nothing else to edit. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND COLOURS ------------------------------------------------------------------ */ --clr-orange: #F58220; /* kraflex Orange - primary accent */ --clr-orange-dark: #D96A0F; /* hover / pressed states */ --clr-orange-light: #FFA351; /* highlights, icon fills */ --clr-orange-soft: #FFF3E8; /* tinted backgrounds */ --clr-charcoal: #1E2226; /* Industrial Charcoal - main dark */ --clr-charcoal-deep: #14171A; /* footer, deepest surfaces */ --clr-charcoal-soft: #2B3036; /* raised dark cards */ --clr-steel-700: #3A434C; /* dark steel */ --clr-steel-500: #5A6570; /* muted body text on light */ --clr-steel-300: #98A3AD; /* muted text on dark */ --clr-steel-200: #D7DDE3; /* borders, hairlines */ --clr-steel-100: #EEF1F4; /* light section background */ --clr-white: #FFFFFF; --clr-ink: #14171A; /* default body text */ /* Accents taken from the logo mark */ --clr-flame-red: #E23B26; --clr-badge-navy: #1B1F8C; /* Semantic aliases - use THESE in the CSS, not raw names above ------- */ --bg-page: var(--clr-white); --bg-alt: var(--clr-steel-100); --bg-dark: var(--clr-charcoal); --bg-darker: var(--clr-charcoal-deep); --text-body: var(--clr-ink); --text-muted: var(--clr-steel-500); --text-on-dark: #E7ECF1; --text-muted-dark: var(--clr-steel-300); --border-soft: var(--clr-steel-200); --accent: var(--clr-orange); --focus-ring: var(--clr-orange-light); /* ------------------------------------------------------------------ 2. TYPOGRAPHY ------------------------------------------------------------------ */ --font-heading: 'Barlow Condensed', 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace; /* Fluid type scale - clamp(min, preferred, max). Because these scale with the viewport, phones, laptops, desktops and TVs all get sensible sizes without extra media queries. */ --fs-display: clamp(2.25rem, 1.30rem + 4.2vw, 5.25rem); /* hero H1 */ --fs-h1: clamp(2.00rem, 1.35rem + 2.8vw, 4.00rem); --fs-h2: clamp(1.65rem, 1.20rem + 1.9vw, 3.00rem); --fs-h3: clamp(1.30rem, 1.10rem + 0.9vw, 1.95rem); --fs-h4: clamp(1.10rem, 1.02rem + 0.4vw, 1.35rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.45vw, 1.40rem); /* intro copy */ --fs-body: clamp(1.00rem, 0.96rem + 0.20vw, 1.15rem); --fs-small: clamp(0.875rem, 0.85rem + 0.12vw, 1.00rem); --fs-micro: clamp(0.75rem, 0.73rem + 0.10vw, 0.875rem); --lh-tight: 1.05; --lh-snug: 1.25; --lh-normal: 1.65; --ls-wide: 0.08em; /* eyebrow / label letter-spacing */ --ls-wider: 0.16em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* ------------------------------------------------------------------ 3. SPACING - strict 8px grid ------------------------------------------------------------------ */ --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 2.5rem; /* 40px */ --sp-6: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-10: 5rem; /* 80px */ --sp-12: 6rem; /* 96px */ --sp-16: 8rem; /* 128px */ /* Vertical rhythm for full-width sections - shrinks on phones */ --section-y: clamp(var(--sp-8), 5vw, var(--sp-16)); --gutter: clamp(var(--sp-2), 4vw, var(--sp-6)); /* ------------------------------------------------------------------ 4. CONTAINERS ------------------------------------------------------------------ */ --container-xl: 1440px; /* wide marketing rows */ --container-lg: 1200px; /* default page width */ --container-md: 960px; /* text-heavy sections */ --container-sm: 768px; /* long-form reading width */ /* ------------------------------------------------------------------ 5. RADII, BORDERS, SHADOWS ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06), 0 2px 6px rgba(20, 23, 26, 0.05); --shadow-md: 0 4px 12px rgba(20, 23, 26, 0.08), 0 12px 28px rgba(20, 23, 26, 0.07); --shadow-lg: 0 10px 24px rgba(20, 23, 26, 0.10), 0 28px 60px rgba(20, 23, 26, 0.12); --shadow-orange: 0 8px 22px rgba(245, 130, 32, 0.32); /* ------------------------------------------------------------------ 6. MOTION ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.18s; --dur-base: 0.32s; --dur-slow: 0.6s; /* ------------------------------------------------------------------ 7. LAYERS ------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-lightbox: 400; --z-toast: 500; /* ------------------------------------------------------------------ 8. COMPONENT SIZING ------------------------------------------------------------------ */ --header-h: 72px; /* mobile header height (JS reads this too) */ --tap-min: 44px; /* minimum touch target - accessibility */ /* Logo sizes. These are the PHONE values; they step up at each breakpoint in responsive.css. To make the logo bigger everywhere, raise these two AND the matching --header-h, so the header grows with it. Rule of thumb: --header-h should be at least --logo-h + 24px. */ --logo-h: 42px; /* header logo height */ --logo-h-footer: 48px; /* footer logo height */ } /* ========================================================================== OPTIONAL DARK THEME Add to switch. Everything below just re-points the semantic aliases; no component CSS needs to change. ========================================================================== */ [data-theme="dark"] { --bg-page: var(--clr-charcoal); --bg-alt: var(--clr-charcoal-soft); --bg-dark: var(--clr-charcoal-deep); --bg-darker: #0D0F11; --text-body: #E7ECF1; --text-muted: var(--clr-steel-300); --border-soft: #39424B; color-scheme: dark; }