/* ============================================================ C&R — Colors & Type Source of truth: notes/brand-tokens.md + claude-design/Project Export/colors_and_type.css ============================================================ */ /* Fonts ------------------------------------------------------- */ /* Loaded via in each page (parallel, after the preconnects) rather than @import here — @import chains the fetch after this file parses, which delays the swap and causes layout shift (CLS). */ /* Metric-matched fallbacks — Arial scaled so it occupies the same line-width as the web font, so the swap-in re-wraps to the same line count (no reflow / no CLS). size-adjust ratios measured against Arial: Poppins 112.1%, Satoshi 102.7%. */ @font-face { font-family: 'Poppins-fb'; src: local('Arial'); size-adjust: 112.1%; } @font-face { font-family: 'Satoshi-fb'; src: local('Arial'); size-adjust: 102.7%; } :root { /* Brand allow-list — nothing else. */ --navy: #1B1442; --green: #61CC6B; --green-rgb: 97, 204, 107; /* same green, as an rgb triplet for rgba() — lets sub-brand themes remap translucent accents */ --cyan: #00C7FF; --grey: #F0F0F0; --white: #FFFFFF; /* Jet Washing division accents (C&R Design System, 2026-06-15). Line Marking keeps green; Jet Washing pages (.theme-jetwash) remap the green tokens to these. Mid jet on light surfaces; the lighter sky on navy. */ --jet: #1C9CD4; --jet-rgb: 28, 156, 212; --jet-sky: #67BDE0; --jet-sky-rgb: 103, 189, 224; --jet-hover: #1789BD; /* Navy-deep — sanctioned secondary navy per notes/brand-tokens.md (added 2026-05-17). Use for atmospheric backdrops, depth-creating panels, hero sections, and CTA panels that echo the hero. */ --navy-deep: #0E0930; /* Interaction states */ --navy-hover: #2A1F5C; --green-hover: #52BC5C; /* Functional */ --fg: var(--navy); --fg-muted: #5A5470; --bg: var(--white); --hairline: #E4E4EC; --hairline-on-dark: rgba(255, 255, 255, .14); --surface-soft: #F7F7F5; --surface-cream: #F2F2EE; /* Typography */ --font-display: 'Poppins', 'Poppins-fb', system-ui, -apple-system, Segoe UI, sans-serif; --font-body: 'Satoshi', 'Satoshi-fb', system-ui, -apple-system, Segoe UI, sans-serif; --fs-hero: clamp(48px, 7vw, 96px); --fs-h1: clamp(36px, 5vw, 64px); --fs-h2: clamp(28px, 3.4vw, 44px); --fs-h3: 22px; --fs-body-lg: 19px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --lh-tight: 1.08; --lh-snug: 1.2; --lh-normal: 1.55; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --radius: 3px; --container: 1440px; --page-pad: 40px; --dur: 180ms; --ease-out: cubic-bezier(.2, .7, .2, 1); } /* Base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--white); color: var(--fg); font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; } a { color: inherit; } ::selection { background: var(--green); color: var(--navy); } /* Skip link (a11y) -------------------------------------------- */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--navy); color: var(--white); padding: 8px 16px; z-index: 1000; text-decoration: none; font-family: var(--font-display); font-weight: 600; } .skip-link:focus { top: 0; } /* Typography classes ----------------------------------------- */ .hero-type { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: -0.03em; margin: 0; } .h1 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; } .h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.015em; margin: 0; } .h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0; } .eyebrow { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: var(--w-medium); color: var(--fg-muted); } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); } .body { font-size: var(--fs-body); line-height: var(--lh-normal); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); } .caption { font-size: var(--fs-caption); color: var(--fg-muted); } /* Section surfaces ------------------------------------------- */ .on-navy { background: var(--navy); color: var(--white); } .on-grey { background: var(--grey); color: var(--fg); } .on-green { background: var(--green); color: var(--navy); } .on-navy .caption { color: rgba(255, 255, 255, .7); } .on-navy a:not(.btn) { color: var(--white); } /* Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; font-family: var(--font-display); font-weight: var(--w-semibold); font-size: 14px; letter-spacing: 0.03em; text-decoration: none; border-radius: var(--radius); border: none; cursor: pointer; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); white-space: nowrap; } .btn-primary { background: var(--green); color: var(--navy); } .btn-primary:hover { background: var(--green-hover); } .btn-navy { background: var(--navy); color: var(--white); } .btn-navy:hover { background: var(--navy-hover); } .btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; padding: 12px 21px; } .btn-ghost:hover { background: currentColor; color: var(--navy); } .on-navy .btn-ghost:hover { color: var(--navy); background: var(--white); } /* Inputs ---------------------------------------------------- */ .input { display: block; width: 100%; padding: 12px 14px; font-family: var(--font-body); font-weight: var(--w-medium); font-size: 15px; color: var(--fg); background: var(--grey); border: 1px solid transparent; border-radius: var(--radius); outline: none; transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); } .input::placeholder { color: var(--fg-muted); } .input:focus { border-color: var(--navy); background: var(--white); } /* Helpers --------------------------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--page-pad); } .hairline { border: 0; border-top: 1px solid var(--hairline); } .on-navy .hairline { border-top-color: var(--hairline-on-dark); } /* Focus ring — consistent across keyboard nav */ :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }