/* ========================================================================== Bits N Pixels — Design tokens, reset and primitives -------------------------------------------------------------------------- Brand colours are carried over from the existing site: accent #FF7D16 (orange) accent-alt #F73232 (red, gradient partner) dark base #1E1B1B / surface #242122 / hairline #353233 sand #E9DBC5 (warm neutral highlight) Both themes are defined here. `:root` holds the shared scale; the palette lives in [data-theme="light"] / [data-theme="dark"] so the toggle only ever swaps one attribute on . ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; /* The off-canvas mobile menu sits at translateX(100%), which would otherwise add a viewport's worth of horizontal scroll. `clip` removes it without breaking position: sticky, which `hidden` would. */ overflow-x: clip; } body { min-height: 100vh; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :where(a) { color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 2. Shared scale — identical in both themes -------------------------------------------------------------------------- */ :root { /* Brand constants */ --brand-orange: #ff7d16; --brand-red: #f73232; --brand-sand: #e9dbc5; --brand-gradient: linear-gradient(16deg, #f73232 0%, #ff7d16 100%); --brand-gradient-r: linear-gradient(16deg, #ff7d16 0%, #f73232 100%); /* Type */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fluid type scale */ --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: clamp(1.0625rem, 0.5vw + 0.95rem, 1.125rem); --fs-lg: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem); --fs-xl: clamp(1.5rem, 1.4vw + 1.15rem, 2rem); --fs-2xl: clamp(1.875rem, 2.2vw + 1.3rem, 2.75rem); --fs-3xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.75rem); --fs-4xl: clamp(2.75rem, 5vw + 1.35rem, 5rem); --lh-tight: 1.12; --lh-snug: 1.3; --lh-base: 1.65; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; /* Section rhythm */ --section-y: clamp(3.5rem, 7vw, 7rem); /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* Layout */ --container: 1240px; --container-wide: 1440px; --container-prose: 74ch; --gutter: clamp(1rem, 4vw, 2.5rem); /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms; --header-h: 78px; --z-header: 100; --z-menu: 110; --z-modal: 200; } /* -------------------------------------------------------------------------- 3. Dark palette (default) -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --bg: #1e1b1b; --bg-alt: #191616; --surface: #242122; --surface-2: #2b2728; --surface-hover: #302b2c; --text: #ffffff; --text-muted: #c2c2c2; --text-subtle: #8f8888; --border: #353233; --border-strong: #453f40; --accent: #ff7d16; --accent-hover: #ff9440; --accent-contrast: #1a1212; /* text on an orange fill */ --accent-soft: rgba(255, 125, 22, 0.14); --accent-ring: rgba(255, 125, 22, 0.42); --sand: #e9dbc5; --success: #4caf50; --warning: #f0b429; --danger: #f4544f; --info: #4aa3f0; --success-soft: rgba(76, 175, 80, 0.15); --warning-soft: rgba(240, 180, 41, 0.15); --danger-soft: rgba(244, 84, 79, 0.15); --info-soft: rgba(74, 163, 240, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-accent: 0 12px 34px rgba(255, 125, 22, 0.28); --header-bg: rgba(30, 27, 27, 0.82); --glow: radial-gradient(60% 60% at 50% 0%, rgba(255, 125, 22, 0.16) 0%, rgba(30, 27, 27, 0) 70%); --hairline: rgba(255, 255, 255, 0.06); } /* -------------------------------------------------------------------------- 4. Light palette -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-alt: #faf7f4; --surface: #ffffff; --surface-2: #f6f2ee; --surface-hover: #f1ebe5; --text: #1a1616; --text-muted: #554d4d; --text-subtle: #7d7373; --border: #e8e1da; --border-strong: #d5cbc2; /* On white, pure #ff7d16 fails contrast for small text, so links and inline accent text use a darkened tone. Fills keep the brand orange. */ --accent: #c2560a; --accent-hover: #a4470a; --accent-contrast: #ffffff; --accent-soft: rgba(255, 125, 22, 0.12); --accent-ring: rgba(255, 125, 22, 0.4); --sand: #8a7550; --success: #1f7a33; --warning: #9a6700; --danger: #c0392b; --info: #1667c2; --success-soft: rgba(31, 122, 51, 0.1); --warning-soft: rgba(154, 103, 0, 0.1); --danger-soft: rgba(192, 57, 43, 0.1); --info-soft: rgba(22, 103, 194, 0.1); --shadow-sm: 0 1px 2px rgba(26, 22, 22, 0.06); --shadow-md: 0 8px 24px rgba(26, 22, 22, 0.08); --shadow-lg: 0 24px 60px rgba(26, 22, 22, 0.12); --shadow-accent: 0 12px 34px rgba(255, 125, 22, 0.25); --header-bg: rgba(255, 255, 255, 0.86); --glow: radial-gradient(60% 60% at 50% 0%, rgba(255, 125, 22, 0.1) 0%, rgba(255, 255, 255, 0) 70%); --hairline: rgba(26, 22, 22, 0.06); } /* -------------------------------------------------------------------------- 5. Base elements -------------------------------------------------------------------------- */ body { font-family: var(--font-sans); font-size: var(--fs-base); background-color: var(--bg); color: var(--text); transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--text); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } p { color: var(--text-muted); } a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--accent-hover); } strong, b { font-weight: 700; color: var(--text); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.15em 0.4em; color: var(--text); } ::selection { background: var(--brand-orange); color: #1a1212; } :focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; border-radius: var(--r-sm); } /* Skip link for keyboard users */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-modal); background: var(--accent); color: var(--accent-contrast); padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) 0; font-weight: 600; } .skip-link:focus { left: 0; color: var(--accent-contrast); } /* -------------------------------------------------------------------------- 6. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: 900px; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .section--alt { background: var(--bg-alt); } .prose { max-width: var(--container-prose); } .grid { display: grid; gap: var(--sp-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .flex { display: flex; gap: var(--sp-4); } .flex--between { justify-content: space-between; } .flex--center { align-items: center; justify-content: center; } .flex--middle { align-items: center; } .flex--wrap { flex-wrap: wrap; } .flex--col { flex-direction: column; } .stack > * + * { margin-top: var(--sp-4); } .stack--lg > * + * { margin-top: var(--sp-6); } /* -------------------------------------------------------------------------- 7. Utilities -------------------------------------------------------------------------- */ .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .text-accent { color: var(--accent); } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .lead { font-size: var(--fs-md); color: var(--text-muted); line-height: 1.7; } /* Gradient headline treatment — the site's signature */ .text-gradient { background: var(--brand-gradient-r); -webkit-background-clip: text; background-clip: text; color: transparent; /* Fallback for engines that ignore background-clip */ -webkit-text-fill-color: transparent; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .w-full { width: 100%; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .hide-md { display: none !important; } } @media (max-width: 640px) { .hide-sm { display: none !important; } } /* -------------------------------------------------------------------------- 8. Scroll reveal — progressive enhancement. Elements start hidden only when JS is available to reveal them, so the site remains fully readable with JS disabled. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }