/** Shopify CDN: Minification failed Line 137:53 Unexpected "/" **/ /* ColdCake - design tokens. THE single source of truth for custom properties. Loaded LAST (from sections/cc-global-css.liquid, which renders in footer-group on every page). Custom properties resolve at computed-value time, so a :root block in a late sheet applies document-wide exactly like one in the head. That is why this file can own the token layer without layout/theme.liquid ever being opened. HARD RULE FOR THIS FILE: it copies the value that currently WINS in the cascade, never the value that was intended. Getting that backwards silently repaints the site. Two known traps, both handled below: - --cc-paper: layout/theme.liquid asks for #FFF6E6, coldcake-base.css overrides it to var(--cc-cream) = #FFECD1, and base.css is emitted later, so #FFECD1 wins. - --cc-border (#1A1A1A29, 16% ink) is NOT the hairline (10% ink). Different value, consumed by .cc-pal-cream/soft/ink as --cc-bd. Never aliased to --cc-ink-hair. Known and deliberately left alone: the colour pickers in the theme editor (settings.color_cream etc, read by theme.liquid) are already dead, because base.css redeclares the same names later. Their values happen to be identical today, so nothing renders wrong. Making them live again would hand the founder a lever that repaints the site by accident. Documented, not fixed. */ :root { /* ---------- Colour: surfaces and ink ---------- */ --cc-cream: #FFECD1; --cc-ink: #1A1A1A; --cc-coral: #E84A28; --cc-soft: #F4DEB8; --cc-coral-2: #C53D1F; --cc-black: var(--cc-ink); --cc-paper: var(--cc-cream); /* the winner. NOT #FFF6E6 */ --cc-cream-soft: var(--cc-soft); /* ---------- Colour: status ---------- */ --cc-success: #2E7D5B; --cc-warning: #D49A2C; --cc-error: #B83A2E; --cc-info: #4A5566; /* ---------- Colour: lines and soft ink ---------- One hairline value, three names, because three names are already in use across 81 sections. Aliasing costs nothing and stops a fourth notation appearing. */ --cc-hair: rgba(26, 26, 26, 0.10); --cc-hairline: var(--cc-hair); --cc-ink-hair: var(--cc-hair); --cc-hair-inverse: rgba(255, 236, 209, 0.15); --cc-ink-soft: rgba(26, 26, 26, 0.70); --cc-gray-warm: rgba(26, 26, 26, 0.70); --cc-gray-mid: rgba(26, 26, 26, 0.85); /* Border tokens from layout/theme.liquid. 16% ink, consumed by .cc-pal-* as --cc-bd. Kept at their own values on purpose. */ --cc-border: #1A1A1A29; --cc-border-inverse: #FFECD126; /* ---------- Typography: one stack, both legacy names point at it ---------- coldcake-base.css declares --font-*; layout/theme.liquid declares --cc-font-* with DIFFERENT fallback chains. Sections use them roughly 50/50. When Fraunces loads, both already resolve to the same face, so unifying them is a provably zero-pixel change; it only repairs the degraded, font-failed case. Both names survive forever as aliases, so no section ever has to change which one it uses. */ --cc-stack-display: 'Fraunces', 'Iowan Old Style', 'Charter', Georgia, serif; --cc-stack-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; --cc-stack-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: var(--cc-stack-display); --font-body: var(--cc-stack-body); --font-mono: var(--cc-stack-mono); --cc-font-display: var(--cc-stack-display); --cc-font-body: var(--cc-stack-body); --cc-font-mono: var(--cc-stack-mono); /* ---------- Label scale (NEW) ---------- The 76 small-uppercase label classes currently span 7 font sizes and 10 letter spacings. The two real clusters are .15em (coldcake-base.css) and .18em (cc-* sections). Naming them is a pure rename at zero computed change. The five outliers move later, one class per push, each with its own before/after crop. */ --cc-label-sm: 10px; --cc-label: 11px; --cc-label-lg: 12px; --cc-track-tight: 0.12em; --cc-track: 0.15em; --cc-track-wide: 0.18em; /* ---------- Spacing (NEW - no spacing token existed at all) ---------- Every gap and padding in the theme is currently an inline clamp() or a literal px. */ --cc-sp-1: 4px; --cc-sp-2: 8px; --cc-sp-3: 12px; --cc-sp-4: 16px; --cc-sp-5: 20px; --cc-sp-6: 24px; --cc-sp-8: 32px; --cc-sp-10: 40px; /* Section rhythm. These three are the values ALREADY in use, named rather than changed: --cc-band matches 6 sections (cc-card-grid, cc-compare-table, cc-manifesto, cc-tier-quiz, cc-why-grid, cc-op-maat-form) and is the most common of the 19 rhythms in the theme. Nothing is retimed by declaring them. */ --cc-band-sm: clamp(40px, 4.5vw, 80px); --cc-band: clamp(48px, 5.5vw, 96px); --cc-band-lg: clamp(56px, 6.5vw, 112px); /* ---------- Radius ---------- */ --cc-radius: 12px; /* inputs, select, textarea */ --cc-radius-lg: 16px; /* cards, tiers, panels, image stages */ --cc-radius-card: 16px; /* alias for --cc-radius-lg */ --cc-radius-pill: 999px; /* buttons, chips, nav CTA */ /* ---------- Motion ---------- */ --cc-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --cc-dur-fast: 120ms; --cc-dur: 240ms; --cc-dur-slow: 480ms; --cc-t-base: 240ms; /* legacy alias */ /* ---------- Layout ---------- */ --cc-max: min(96vw, 1680px); --cc-gutter: clamp(20px, 3.5vw, 72px); } /* ---------- Breakpoints: documented, NOT tokenised ---------- var() is invalid inside a media-query prelude, so @media (max-width: var(--x)) simply does not work. There is no way to tokenise these without a Liquid-rendered stylesheet or a build step, and changing any value moves layout at some viewport width by definition. So the 16 existing max-widths are frozen and recorded here. New code picks one of the five clusters below, or uses a container query. 600px base .tier-grid/.field-row, cc-op-maat-form, cc-smaken-grid, cc-hoe-bewijs, cc-plans-grid 720px base nav, .stat-strip, .stat, .timeline 880px base .hero-grid/.steps/.grid-*/.pdp-grid/.contact-grid/.footer-grid, cc-why-grid, cc-hero (also the only min-width in the theme) 1000px cc-why-grid, cc-op-maat-form, cc-hoe-bewijs 1080px base .tier-grid, cc-plans-grid Outliers left in place, not migrated: 1100, 900, 860, 820, 800, 768, 760, 740, 680, 640, 480. */