/* ============================================================ NITRO RABBIT LABS — DESIGN SYSTEM ENTRY POINT Order: tokens -> base. Page/component styles live in site.css. Webfonts (Inter + JetBrains Mono) are loaded via to Google Fonts in index.html . System fallbacks below keep the page readable if the network fonts fail to load. ============================================================ */ /* ============================================================ COLOR TOKENS Source: Brand & Color Style Guide v1.0 (May 2026), §04–07 ============================================================ */ :root { /* ---- Primary palette (non-negotiable; every layout carries ≥2) ---- */ --nrl-nitro-red: #E63946; /* Energy / CTA */ --nrl-rabbit-blue: #6FA5C7; /* Intelligence */ --nrl-labs-green: #8FC97E; /* Discovery / OK */ /* ---- Secondary palette (illustration / chart fills) ---- */ --nrl-coral-burst: #F08A7E; /* Mascot fur, warm fills */ --nrl-goggle-mint: #B8E5A8; /* Highlights, success */ /* ---- Accent palette (sparks, decoration) ---- */ --nrl-spark-yellow: #F4C73E; /* Sparks, micro-highlight */ --nrl-cloud-blue: #A8C8E0; /* Decorative clouds */ /* ---- Neutrals & surfaces ---- */ --nrl-carbon: #0F0F10; /* Default hero surface */ --nrl-lab-coat: #FAFAF7; /* Editorial surface */ --nrl-workshop-gray:#C5C7CA; /* Borders, mascot fur */ /* ---- Tints / shades (derived, for hovers, states, fills) ---- */ --nrl-red-700: #C32C38; --nrl-red-800: #B02531; /* AA text on --nrl-red-100 */ --nrl-red-300: #F08A93; --nrl-red-100: #FBDCDF; --nrl-blue-700: #4E83A6; --nrl-blue-100: #E2EEF5; --nrl-green-700: #6BAE57; --nrl-green-100: #E7F3E1; --nrl-yellow-100: #FDF3D2; /* ---- Ink scale (text on light) ---- */ --nrl-ink: #0F0F10; /* INK — primary text */ --nrl-soft-ink: #4A4B4E; /* SOFT_INK — secondary text */ --nrl-faint-ink: #68696D; /* captions, meta (AA on light) */ --nrl-line: #E6E6E2; /* hairline borders on light */ --nrl-line-strong: #C5C7CA; /* workshop-gray border */ /* ---- Ink-on-dark scale ---- */ --nrl-on-carbon: #FAFAF7; --nrl-on-carbon-soft: #B6B7B9; --nrl-on-carbon-faint: #7C7E82; --nrl-carbon-line: #2A2A2C; --nrl-carbon-elevate: #18181A; /* raised surface on carbon */ /* ============================================================ SEMANTIC ALIASES — prefer these in product code ============================================================ */ --surface-page: var(--nrl-lab-coat); --surface-card: #FFFFFF; --surface-sunken: #F2F2EE; --surface-inverse: var(--nrl-carbon); --surface-inverse-2: var(--nrl-carbon-elevate); --text-strong: var(--nrl-ink); --text-body: var(--nrl-soft-ink); --text-muted: var(--nrl-faint-ink); --text-inverse: var(--nrl-on-carbon); --text-on-red: var(--nrl-lab-coat); --border-subtle: var(--nrl-line); --border-strong: var(--nrl-line-strong); /* ---- Accent ink: accent-coloured TEXT on light surfaces ---- Raw --nrl-rabbit-blue / --nrl-labs-green are far under 4.5:1 at body size, so accent text uses these darkened mixes instead. Measured: blue 5.39:1 / green 4.94:1 on --surface-page, 5.02 / 4.60 on --surface-sunken, 5.64 / 5.17 on --surface-card (white). Defined once here; site.css, product-page.css and platform-page.css reference them. */ --accent-ink-blue: color-mix(in srgb, var(--nrl-blue-700) 80%, var(--nrl-carbon)); --accent-ink-green: color-mix(in srgb, var(--nrl-green-700) 66%, var(--nrl-carbon)); --action-primary: var(--nrl-nitro-red); --action-primary-hover: var(--nrl-red-700); --action-primary-tint: var(--nrl-red-100); --focus-ring: var(--nrl-rabbit-blue); --state-success: var(--nrl-labs-green); --state-success-tint: var(--nrl-green-100); --state-info: var(--nrl-rabbit-blue); --state-warning: var(--nrl-spark-yellow); --state-danger: var(--nrl-nitro-red); } /* ============================================================ TYPOGRAPHY TOKENS Source: Brand Guide v1.0 §09. Two-family system: display shouts, text explains, mono for code. ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* ---- Weights ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Type scale (px → rem @16) — H1/H2 use display, tight tracking ---- */ --fs-display: 3.5rem; /* 56 — hero display */ --fs-h1: 3rem; /* 48 — H1 */ --fs-h2: 1.875rem; /* 30 — section */ --fs-h3: 1.125rem; /* 18 — sub */ --fs-lead: 1.25rem; /* 20 — lead para */ --fs-body: 1rem; /* 16 — body */ --fs-body-sm: 0.875rem; /* 14 */ --fs-eyebrow: 0.6875rem;/* 11 — caps eyebrow */ --fs-caption: 0.8125rem;/* 13 — caption */ --fs-mono: 0.875rem; /* 14 — code */ /* ---- Line heights ---- */ --lh-tight: 1.05; /* display */ --lh-snug: 1.2; /* headings */ --lh-normal: 1.5; /* body */ --lh-mono: 1.45; /* ---- Tracking ---- */ --tracking-display: -0.01em; --tracking-tight: -0.005em; --tracking-normal: 0; --tracking-eyebrow: 0.05em; --tracking-caps: 0.08em; } /* ============================================================ SPACING, RADII, SHADOW, MOTION TOKENS ============================================================ */ :root { /* ---- Spacing scale (4px base grid) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ---- Radii — friendly but not pill-soft; bunny is round, UI is crisp ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; --radius-circle: 50%; /* ---- Borders ---- */ --border-hairline: 1px solid var(--border-subtle); --border-default: 1.5px solid var(--border-subtle); /* ---- Shadows — soft, neutral, no color casts ---- */ --shadow-xs: 0 1px 2px rgba(15,15,16,0.06); --shadow-sm: 0 2px 8px rgba(15,15,16,0.07); --shadow-md: 0 6px 20px rgba(15,15,16,0.10); --shadow-lg: 0 18px 48px rgba(15,15,16,0.16); --shadow-pop: 0 10px 30px rgba(230,57,70,0.22); /* red CTA glow, sparingly */ /* ---- Focus ---- */ /* Two-layer ring: carbon inner keeps it visible on light/red surfaces, spark-yellow outer reads ~12:1 on carbon. Meets WCAG 1.4.11 (3:1) everywhere. */ --ring: 0 0 0 2px var(--nrl-carbon), 0 0 0 4px var(--nrl-spark-yellow); /* ---- Motion — kinetic: quick in, gentle settle ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ---- Layout ---- */ --container: 1200px; --container-narrow: 760px; } /* ============================================================ BASE / RESET / PRIMITIVES Lightweight element defaults that express the brand voice. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Headings: display family, tight tracking ---- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); margin: 0 0 0.5em; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-wrap: pretty; } h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--nrl-red-700); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--fs-mono); } /* ---- Utility primitives the brand leans on ---- */ .nrl-eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--nrl-spark-yellow); } .nrl-eyebrow--red { color: var(--nrl-nitro-red); } .nrl-eyebrow--ink { color: var(--text-muted); } .nrl-display { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--text-strong); } /* Carbon surface helper — the brand's signature hero canvas */ .nrl-on-carbon { background: var(--surface-inverse); color: var(--text-inverse); } .nrl-on-carbon h1, .nrl-on-carbon h2, .nrl-on-carbon h3 { color: var(--text-inverse); } ::selection { background: color-mix(in srgb, var(--nrl-spark-yellow) 70%, transparent); color: var(--nrl-carbon); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); } /* Accessibility: visually hidden (screen-reader only) content */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Accessibility: visible skip link when focused */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: 10px 16px; background: var(--nrl-nitro-red); color: #fff; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: var(--fw-bold); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); text-decoration: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }