/** Shopify CDN: Minification failed Line 47:0 All "@import" rules must come first **/ /* ============================================================ BROWNIEGOD — base.css (SETTINGS + BASE layer) Consolidated design tokens, resets, base typography, section themes and type utilities. This is the single source of truth for the Shopify theme's foundations. Load order: base.css → components.css Consolidation notes (vs. legacy colors_and_type.css + crowdfund.css): • Merged two conflicting :root blocks into one token set. • Removed unused tokens: --surface, --surface-alt, --fg-muted, --fg-subtle, --ease-snap, --web-accent(-soft), --shadow-menu, --bg-black, --gold, and the --pair-* indirection layer. • Tonal theming is now driven directly by .bg-theme--* classes setting --bg/--fg; components read those + currentColor. • Display type sizes are tokenised (--display-*) to match real page usage; off-scale inline clamp() values are retired. • Green "live" status is now the --status-live token (was a hardcoded #22c55e in two places). • One sanctioned elevation: --shadow-float (floating UI only). ============================================================ */ /* ---------- FONTS ---------- Files live alongside this CSS in /assets. On Shopify, swap the url() for {{ 'midnight-sans-rd-12-black.ttf' | asset_url }} etc. */ @font-face { font-family: 'Midnight Sans RD'; src: url('midnight-sans-rd-12-black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Exposure -10'; src: url('Exposure-10-205TF.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Exposure -10'; src: url('Exposure-10-Italic-205TF.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* Web-font fallbacks if the licensed faces fail to load */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* ============================================================ 1 · COLOR — palette (V1.5, simplified pink system) ============================================================ */ --bg-blush: #fbe7ee; /* palest pink — light ground */ --bg-dark-pink: #ff1a3b; /* signal pink — actions / accents */ --bg-berry: #c8102e; /* deep cranberry — "earned" dark ground */ --bg-almond: #fcf9f2; /* soft off-white — primary web backdrop */ --bg-ink: #231c16; /* warm espresso off-black — ALL type */ /* ---------- Web surface (digital default) ---------- */ --web-bg: var(--bg-almond); --web-fg: var(--bg-ink); --web-ink-soft: color-mix(in oklch, var(--bg-ink) 70%, var(--bg-almond)); --web-hairline: color-mix(in oklch, var(--bg-ink) 12%, transparent); /* ---------- Active ground (set by .bg-theme--* ; components read these) ---------- */ --bg: var(--web-bg); --fg: var(--web-fg); --border: color-mix(in oklch, var(--fg) 16%, transparent); /* ---------- Status ---------- */ --status-live: #22c55e; /* the only off-palette colour; live-campaign pulse */ /* ============================================================ 2 · TYPE ============================================================ */ /* Display: Midnight Sans RD 12 Black (fallback Anton). Body: Exposure -10 Regular (fallback Inter). */ --font-display: 'Midnight Sans RD', 'Anton', 'Bebas Neue', 'Impact', sans-serif; --font-body: 'Exposure -10', 'Inter', 'Helvetica Neue', sans-serif; /* Display scale — CAPS, reconciled to real usage */ --display-hero: clamp(54px, 8.5vw, 124px); /* page hero (h1) */ --display-xl: clamp(40px, 6.5vw, 108px); /* full-bleed CTA banners */ --display-lg: clamp(38px, 5.5vw, 84px); /* section openers (h2) */ --display-md: clamp(34px, 5vw, 72px); /* sub-section / product titles */ --display-sm: clamp(30px, 3vw, 42px); /* card titles (h3) */ --display-xs: clamp(22px, 2.2vw, 26px); /* small headings / step titles */ --display-leading: 0.85; --display-tracking: 0.005em; /* Body scale — Exposure / Inter */ --body-lede: clamp(18px, 2vw, 22px); /* intros */ --body-lg: 24px; /* sub-headings */ --body-md: 18px; /* body copy */ --body-sm: 14px; /* captions / meta */ --body-xs: 12px; /* fine print */ --body-leading: 1.45; --body-tracking: 0.02em; /* ============================================================ 3 · SPACING — 4px base scale ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Vertical section rhythm */ --section-y: clamp(56px, 7vw, 104px); --section-y-tight: clamp(40px, 5vw, 68px); /* ============================================================ 4 · RADII — pill-led; cards 8–16px (brand is curvy/flat) ============================================================ */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 9999px; /* ============================================================ 5 · ELEVATION — flat brand; ONE sanctioned float ============================================================ */ --shadow-none: none; --shadow-float: 0 18px 40px -12px color-mix(in oklch, var(--bg-ink) 28%, transparent); /* ============================================================ 6 · MOTION ============================================================ */ --ease-soft: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* ============================================================ 7 · LAYOUT ============================================================ */ --container: 1240px; --container-narrow: 880px; --gutter: clamp(20px, 5vw, 56px); } /* ============================================================ RESET / GLOBAL ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--web-bg); color: var(--web-fg); font-family: var(--font-body); font-size: var(--body-md); line-height: var(--body-leading); letter-spacing: var(--body-tracking); -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; display: block; } /* ============================================================ SECTION THEMES — the tonal-pair engine. Apply to a
(or any block); descendant components read --bg / --fg / currentColor. Four pairs, do not cross. "Almond" is the neutral (formerly "Cream"). ============================================================ */ .bg-theme--almond { --bg: var(--bg-almond); --fg: var(--bg-ink); background: var(--bg); color: var(--fg); } .bg-theme--blush { --bg: var(--bg-blush); --fg: var(--bg-dark-pink); background: var(--bg); color: var(--fg); } .bg-theme--berry { --bg: var(--bg-berry); --fg: var(--bg-blush); background: var(--bg); color: var(--fg); } .bg-theme--pink-inv { --bg: var(--bg-dark-pink); --fg: var(--bg-blush); background: var(--bg); color: var(--fg); } /* ============================================================ LAYOUT HELPERS ============================================================ */ .bg-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .bg-container--narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } .bg-section { padding-block: var(--section-y); position: relative; } .bg-section--tight { padding-block: var(--section-y-tight); } /* ============================================================ BASE TYPOGRAPHY ============================================================ */ /* Display headings default to centred ALL CAPS (brand rule). Override text-align where copy is functional/left-set. */ h1, h2, h3, .bg-display { font-family: var(--font-display); text-transform: uppercase; line-height: var(--display-leading); letter-spacing: var(--display-tracking); font-weight: 900; text-align: center; margin: 0; text-wrap: balance; } h1 { font-size: var(--display-hero); } h2 { font-size: var(--display-lg); } h3 { font-size: var(--display-sm); } /* Display size utilities (decoupled from heading level) */ .bg-display--hero { font-size: var(--display-hero); } .bg-display--xl { font-size: var(--display-xl); } .bg-display--lg { font-size: var(--display-lg); } .bg-display--md { font-size: var(--display-md); } .bg-display--sm { font-size: var(--display-sm); } .bg-display--xs { font-size: var(--display-xs); } /* Sub-heading — Title Case, body family */ h4, .bg-subheading { font-family: var(--font-body); font-size: var(--body-lg); font-weight: 500; line-height: 1.15; margin: 0; } /* Body + copy utilities */ p { font-size: var(--body-md); line-height: var(--body-leading); } .bg-lede { font-family: var(--font-body); font-size: var(--body-lede); line-height: 1.4; letter-spacing: 0.01em; } .bg-body-sm { font-size: var(--body-sm); } .bg-caption { font-size: var(--body-xs); letter-spacing: 0.04em; } em { font-style: italic; } /* Eyebrow / kicker — body family, tracked caps, with rule(s) */ .bg-kicker { font-family: var(--font-body); font-size: var(--body-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 10px; } .bg-kicker::before, .bg-kicker--flanked::after { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: 0.5; } /* Small-caps superscript supplementary word inside a CAPS headline (e.g. the "IN" / "TO" in "BAKED IN LONDON"). Was .sc / .smallcaps. */ .bg-sc { font-size: 0.42em; vertical-align: 0.58em; text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 0.05em; letter-spacing: 0.03em; } /* Hairline divider */ .bg-divider { height: 1px; border: 0; background: color-mix(in oklch, currentColor 18%, transparent); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }