:root { /* --- Surfaces ------------------------------------------------------ */ --ca-cream: #FFF8EE; /* page background */ --ca-sand: #FDECD3; /* banded sections, review strip */ --ca-sky: #E3F3FB; /* feature block background */ --ca-white: #FFFFFF; /* cards */ --ca-peach: #FFF3E0; /* specials panel gradient start */ --ca-lilac: #F1EAFB; /* section tint */ --ca-cream-warm: #FFF3D6; /* events & specials band */ /* --- Ink ----------------------------------------------------------- */ --ca-ink: #14192B; /* headings, high contrast text */ --ca-body: #23283B; /* body copy */ --ca-muted: #52586B; /* secondary copy */ --ca-faint: #8A93A8; /* captions, meta, disabled */ --ca-faint-warm: #8A7A5F; /* meta on sand backgrounds */ /* --- Brand --------------------------------------------------------- */ --ca-orange: #F2672B; /* primary action */ --ca-orange-dark: #D6531D; /* hover, links on light */ --ca-amber: #FFB25E; /* hero highlight */ --ca-teal: #0E9C93; /* accent, footer, "open" state */ --ca-yellow: #F4B400; /* review stars */ --ca-purple: #6D4FD1; /* hero ambient glow */ --ca-red: #E0392B; /* emphasis notices */ /* --- Derived / alpha ----------------------------------------------- */ --ca-hairline: rgba(20, 25, 43, 0.08); --ca-hairline-mid: rgba(20, 25, 43, 0.10); --ca-hairline-str: rgba(20, 25, 43, 0.18); --ca-tint: rgba(20, 25, 43, 0.04); --ca-tint-hover: rgba(20, 25, 43, 0.06); --ca-teal-tint: rgba(14, 156, 147, 0.07); --ca-teal-line: rgba(14, 156, 147, 0.35); --ca-orange-line: rgba(242, 103, 43, 0.30); --ca-scrim: rgba(20, 25, 43, 0.55); --ca-on-dark: rgba(255, 255, 255, 0.85); --ca-on-dark-soft: rgba(255, 255, 255, 0.75); --ca-on-dark-line: rgba(255, 255, 255, 0.25); /* --- Type ---------------------------------------------------------- */ --ca-font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --ca-font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --ca-font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Fluid scale — min/max pairs match the prototype's clamp() values */ --ca-text-xs: 11px; /* Eyebrow labels. One value, so they cannot drift apart again. */ --ca-text-eyebrow: var(--ca-text-label); /* alias, older markup */ --ca-text-sm: 12px; --ca-text-base: 15px; --ca-text-md: 16px; --ca-text-lg: 17px; --ca-text-h3: clamp(19px, 3vw, 24px); --ca-text-h2: clamp(28px, 5vw, 50px); --ca-text-h1: clamp(32px, 7vw, 60px); --ca-text-hero: clamp(30px, 6vw, 64px); --ca-tracking-eyebrow: 0.14em; --ca-tracking-tight: -0.01em; --ca-tracking-tightest: -0.03em; --ca-tracking-tighter: -0.03em; /* --- Space --------------------------------------------------------- */ /* --- Measure ------------------------------------------------------- */ /* * One measure for every section. Location pages used to be 100px narrower * than everything else, so the hero, the review strip and the store panels * all sat on slightly different edges. They now share a single value. */ /* ---------------------------------------------------------------- * Measure * * One width for every section on the site. Change it here and the * whole site follows — heroes, bands, grids, the lot. * ------------------------------------------------------------- */ --ca-width: 1200px; /* the site measure */ --ca-width-narrow: 980px; /* denser sections, e.g. forms */ --ca-width-prose: 820px; /* long-form reading */ --ca-width-tight: var(--ca-width); /* alias, kept for older markup */ --ca-measure: 62ch; /* a paragraph's comfortable line length */ /* * The gutter scales with the viewport: 16px on a phone, 40px on a wide * screen. Taken from the prototype's own clamp. */ --ca-gutter: clamp(16px, 4vw, 40px); /* * How far a corner ornament sits in from the edge of a framed panel — the * gallery mascot, the hero eyebrow. One value so opposite corners of the * same panel agree. */ --ca-corner-inset: clamp(10px, 2vw, 20px); /* ---------------------------------------------------------------- * Breakpoints * * Custom properties cannot be used inside a media query, so these are * documentation rather than something the CSS reads — but they are the * only widths the theme should use. Ad-hoc values were making the site * behave differently at 640px and 700px for no reason anyone intended. * * 520px phone * 700px phone landscape / small tablet — grids go single column * 820px tablet — header stacks * 980px small laptop * 1200px the measure; nothing above needs a query * ------------------------------------------------------------- */ --ca-card-pad: clamp(22px, 4vw, 32px); --ca-panel-pad: clamp(18px, 3vw, 24px); /* ---------------------------------------------------------------- * Vertical rhythm * ------------------------------------------------------------- */ /* * One number decides how far apart every section on the site sits: the * same 16px that separates the store info card from its map. * * It is expressed as the *gap between* two sections. Section padding is * half of it, because two adjacent sections each contribute their own — * so the visible gap is the token, not double it. Change this one value * and the whole site's rhythm follows. */ --ca-section-gap: 16px; /* * The old padding-based spacing, now zero. * * Padding could not give a consistent gap: a tinted band needs internal room * so its text is not against the edge of the colour, and that room was * adding to the gap — so a plain pair sat 16px apart while a tinted pair sat * 52px apart. Separating the two fixes it: the gap is a margin between * sections, the room inside a tint is padding, and neither affects the other. * * Kept as aliases so existing rules resolve; they simply contribute nothing. */ --ca-section-y: 0px; --ca-section-y-sm: 0px; --ca-section-y-lg: 0px; /* The room inside a section that carries a background colour. */ --ca-section-pad: clamp(28px, 4vw, 44px); --ca-heading-gap: clamp(24px, 3.5vw, 38px); --ca-label-gap: 12px; --ca-gap: 16px; /* ---------------------------------------------------------------- * Type scale for sections * * Section headings share one size, so a band and a grid look like the * same site. Blocks pick a variant, never a raw px value. * ------------------------------------------------------------- */ --ca-text-section: clamp(24px, 3.6vw, 40px); --ca-text-section-lg: clamp(28px, 4.6vw, 48px); --ca-text-section-sm: clamp(20px, 2.6vw, 28px); --ca-text-lede: clamp(15px, 1.7vw, 17px); /* The section kicker: "// Why families love Catch Air". */ --ca-text-label: clamp(12px, 1.3vw, 14px); /* The status pill, which the prototype sets smaller than a section label. */ --ca-text-pill: 11px; --ca-tracking-label: 0.16em; /* --- Radii --------------------------------------------------------- */ --ca-r-sm: 12px; --ca-r-md: 16px; --ca-r-lg: 20px; --ca-r-xl: 24px; --ca-r-2xl: 28px; --ca-r-pill: 100px; /* --- Elevation ----------------------------------------------------- */ --ca-shadow-sm: 0 6px 16px rgba(20, 25, 43, 0.04); --ca-shadow-md: 0 8px 20px rgba(20, 25, 43, 0.05); --ca-shadow-lg: 0 16px 40px rgba(20, 25, 43, 0.12); --ca-shadow-xl: 0 20px 50px rgba(20, 25, 43, 0.18); --ca-shadow-modal: 0 30px 70px rgba(0, 0, 0, 0.35); /* --- Motion -------------------------------------------------------- */ --ca-ease: cubic-bezier(0.4, 0, 0.2, 1); /* * Marquee speed as seconds per card, not a fixed duration. * * A fixed duration means a two-card rail crawls and a ten-card rail is a * blur — the same animation covering very different distances. Multiplying * by the card count keeps the actual speed constant however many there are, * which is what "scrolls too quickly" was really about. */ --ca-marquee-per-item: 9s; /* How far the edge fade reaches into a horizontal scroller. */ --ca-edge-fade: clamp(24px, 6vw, 72px); /* --- Layers -------------------------------------------------------- */ --ca-z-header: 60; --ca-z-sticky: 70; --ca-z-modal: 200; --ca-status-open: var(--ca-teal); --ca-status-soon: var(--ca-orange); --ca-status-closed: var(--ca-faint); } @media (prefers-reduced-motion: reduce) { :root { --ca-dur-fast: 0.01ms; --ca-dur: 0.01ms; --ca-dur-slow: 0.01ms; } }