/* ================================================================= * VOODOO VODKA — DESIGN TOKENS * * Every color, font, spacing, motion curve, and shadow used across * the site. Defined as CSS custom properties so the entire brand * can be tuned from one file. * * The palette is lifted off the flower crown (Blueprint Ch. 04): * a warm Ink and a warm Bone are the only two surfaces; Marigold * leads but never floods; Plum is reserved for ceremony; the four * petal accents are family-coded; Garnet is compliance/error only. * No pure #000000 or #FFFFFF anywhere. * * Legacy token names (--vv-midnight, --vv-gold, --vv-cathedral …) * are kept as ALIASES that resolve to the new canonical values, so * existing stylesheets keep working while pages are rebuilt onto the * canonical names (--vv-ink, --vv-marigold, --vv-plum, petals). * * Pour with purpose. * ================================================================= */ :root { /* ----------------------------------------------------------------- * 1. THE COLOR LAW — canonical palette (Blueprint Ch. 04) * Two surfaces only. Pure black and pure white are forbidden; * every surface carries warmth. * --------------------------------------------------------------- */ --vv-ink: #15100E; /* Warm near-black. Brand-world & shelf. */ --vv-ink-2: #1D1714; /* Surface elevation +1 */ --vv-ink-3: #261E1A; /* Surface elevation +2 */ --vv-bone: #F6EFE2; /* Warm paper. Long-form reading surface. */ --vv-bone-2: #FBF6EC; /* Lighter parchment, raised cards on Bone */ --vv-marigold: #F2A341; /* Hero accent — the flower crown. ~10% max. */ --vv-marigold-bright: #F7B85C; /* Hover / active glow */ --vv-marigold-deep: #C9802B; /* Pressed, tarnished, meta-on-bone */ --marigold-deep: #D9822B; /* Rev3 — pressed/active states for motion hovers */ /* Rev4 — THE single warm metallic note. Antiqued, desaturated brushed * brass: lower chroma and slightly deeper than marigold (brass/bronze * register, not bright orange). #F2A341 is deliberately NOT redefined — * marigold is referenced site-wide; brass is introduced beside it so the * warm note can be placed deliberately. The brand now leans monochrome * (Ink, Bone, plum) with brass as the one warm note per frame; marigold * is demoted to a rare highlight (e.g. CTA hover bloom). * Contrast (WCAG 2.2 AA, verified): on Ink #15100E ≈ 6.1:1 — passes AA * normal text ✓. On Bone #F6EFE2 ≈ 2.7:1 — DECORATIVE / large-display * only; functional/legal text on Bone stays on the Ink/Archivo pairing. */ --vv-brass: #B08D57; /* Warm note — AA on Ink; decorative on Bone */ --vv-brass-bright: #C4A06A; /* Hover lift of brass (still desaturated) */ --vv-brass-deep: #8A6C40; /* Pressed / deeper brass */ --vv-brass-tint-30: rgba(176,141,87,0.30); --vv-brass-tint-12: rgba(176,141,87,0.12); --vv-brass-tint-08: rgba(176,141,87,0.08); --vv-brass-glow: rgba(176,141,87,0.20); /* Rev3 motion easings — weighted & warm, never a spring */ --ease-warm: cubic-bezier(.22, 1, .36, 1); --ease-weighted: cubic-bezier(.65, .05, .36, 1); --vv-plum: #3A2350; /* Ceremony only — age gate, wax seal, footer */ --vv-plum-deep: #2A1A3B; /* Deep plum — pressed ceremonial states */ /* The four petal accents — family-coded, never mixed. */ --vv-jade: #2FA98A; /* Bright — fresh, citrus, daytime */ --vv-fuchsia: #C0397E; /* Warm — rich, cozy, for two */ --vv-violet: #7A4FB0; /* Bold — spirit-forward, after dark */ --vv-sky: #5EC6D6; /* Easy — tall, simple, anytime */ --vv-garnet: #7A1F2B; /* Urgent, error, compliance flags ONLY */ --vv-silver: #9C9285; /* Meta text, disabled states (warm grey) */ /* ----------------------------------------------------------------- * 1b. LEGACY ALIASES → canonical * Kept so base/components/layout/pages CSS render in the new palette * without a find-replace. Remove a row once nothing references it. * --------------------------------------------------------------- */ --vv-midnight: var(--vv-ink); --vv-midnight-2: var(--vv-ink-2); --vv-midnight-3: var(--vv-ink-3); --vv-cathedral: var(--vv-plum); --vv-cathedral-deep: var(--vv-plum-deep); --vv-whisper: #241B2E; /* card bg on Ink — a warm plum-ink */ /* Rev4 — the "gold" accent ROLE is demoted to brass. The whole site uses * these aliases for its warm accents (headings via base, links, eyebrows, * borders, cards), so repointing them here demotes marigold everywhere in * one move. The literal marigold hue stays defined as --vv-marigold* and is * referenced EXPLICITLY only for the rare highlight (CTA hover, focus ring). */ /* Rev5 — Fault #1: gold is connective tissue, not a rare accent. The "gold" * ROLE now resolves to Bone so eyebrows, card titles, footer heads, links and * the rest stop reading as gold everywhere. --vv-gold-deep stays a MUTED brass * (the brief permits "muted brass at low opacity" for non-primary). The rare * warm note lives in explicit --vv-brass (drop caps) and --vv-marigold (focus). */ --vv-gold: var(--vv-bone); --vv-gold-bright: var(--vv-bone); --vv-gold-deep: var(--vv-brass-deep); --vv-gold-darkest: #7A5520; --vv-candle: var(--vv-bone-2); /* Petal family aliases (old ritual accent names → new families) */ --vv-emerald: var(--vv-jade); /* Blessings → Bright */ --vv-magenta: var(--vv-fuchsia); /* Bindings → Warm */ --vv-iris: var(--vv-violet); /* Summonings → Bold */ --vv-cypress: var(--vv-sky); /* Reckonings → Easy */ /* ----------------------------------------------------------------- * 2. FAMILY TOKENS — semantic petal mapping * Cocktails, cards, and filters borrow their family color from here. * --------------------------------------------------------------- */ --vv-family-bright: var(--vv-jade); --vv-family-warm: var(--vv-fuchsia); --vv-family-bold: var(--vv-violet); --vv-family-easy: var(--vv-sky); /* ----------------------------------------------------------------- * 3. ALPHA TINTS * Pre-composed transparencies for overlays and glass effects. * --------------------------------------------------------------- */ --vv-bone-90: rgba(246,239,226,0.90); --vv-bone-70: rgba(246,239,226,0.70); --vv-bone-50: rgba(246,239,226,0.50); --vv-bone-30: rgba(246,239,226,0.30); /* Rev4 — warm tints/glow demoted from marigold to brass (atmosphere, faint * fills, hairline glows). Lower, desaturated; favour deep shadow over halo. */ --vv-gold-tint-30: rgba(176,141,87,0.30); --vv-gold-tint-20: rgba(176,141,87,0.20); --vv-gold-tint-12: rgba(176,141,87,0.12); --vv-gold-tint-08: rgba(176,141,87,0.08); --vv-gold-glow: rgba(176,141,87,0.22); /* canonical marigold tint aliases */ --vv-marigold-tint-12: var(--vv-gold-tint-12); --vv-marigold-glow: var(--vv-gold-glow); --vv-cathedral-tint: rgba(58,35,80,0.45); --vv-cathedral-glow: rgba(122,79,176,0.28); --vv-plum-tint: var(--vv-cathedral-tint); --vv-midnight-veil: rgba(21,16,14,0.85); --vv-midnight-haze: rgba(21,16,14,0.55); --vv-ink-veil: var(--vv-midnight-veil); --vv-border: rgba(246,239,226,0.08); /* Rev4 — warm borders demoted from marigold to desaturated brass */ --vv-border-gold: rgba(176,141,87,0.36); --vv-border-strong: rgba(176,141,87,0.52); /* ----------------------------------------------------------------- * 4. GRADIENTS * Restrained, painterly. Plum glow is for ceremony surfaces. * --------------------------------------------------------------- */ --vv-grad-gold: linear-gradient(135deg, var(--vv-marigold-deep) 0%, var(--vv-marigold) 50%, var(--vv-marigold-bright) 100%); --vv-grad-gold-warm: linear-gradient(180deg, var(--vv-marigold-bright) 0%, var(--vv-marigold) 100%); --vv-grad-cathedral: linear-gradient(180deg, var(--vv-plum) 0%, var(--vv-ink) 100%); --vv-grad-plum: var(--vv-grad-cathedral); --vv-grad-midnight: linear-gradient(180deg, var(--vv-ink) 0%, #0E0A08 100%); --vv-grad-altar: radial-gradient(ellipse at 50% 30%, var(--vv-plum) 0%, var(--vv-ink) 62%, #0E0A08 100%); --vv-grad-veil: linear-gradient(180deg, transparent 0%, var(--vv-midnight-veil) 80%); --vv-grad-rule: linear-gradient(to right, transparent 0%, var(--vv-brass) 20%, var(--vv-brass) 80%, transparent 100%); /* Rev4 — brass hairline, was marigold */ /* ----------------------------------------------------------------- * 5. TYPOGRAPHY — Font Stacks (Rev3: high-contrast Didone system) * Display — Abril Fatface (wordmark stand-in, hero & chapter * titles, family names, drop caps; TITLE CASE, never caps) * Editorial — Playfair Display (taglines, pull quotes, story openers, * Quatrine lines, card & recipe titles; italic) * Body — Cormorant Garamond (long-form body, story & product copy, * recipe text; set generously, ~19px / 1.6) * UI / spec — Archivo (the only sans: eyebrows, nav, buttons, * forms, table headers, specs, legal/compliance) * The packaged logotype is sacrosanct; Abril stands in only where the * logo art is not placed. * --------------------------------------------------------------- */ --vv-font-display: 'Abril Fatface', Georgia, 'Times New Roman', serif; --vv-font-ritual: 'Playfair Display', Georgia, serif; /* legacy var name kept — italic voice */ --vv-font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --vv-font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --vv-font-mono: 'JetBrains Mono', 'Menlo', 'Courier New', monospace; /* Legacy aliases → canonical Didone roles (downstream refs keep working) */ --vv-font-anton: var(--vv-font-display); /* was Anton → Abril Fatface */ --vv-font-fraunces: var(--vv-font-ritual); /* was Fraunces → Playfair italic */ --vv-font-archivo: var(--vv-font-ui); /* Archivo — UI / spec only */ /* ----------------------------------------------------------------- * 6. TYPOGRAPHY — Sizes (modular, fluid where it matters) * --------------------------------------------------------------- */ /* Rev5 — display pulled down ~25%; confidence is in restraint, not size. Mins stay well above the 28px (1.75rem) Abril floor. */ --vv-fs-hero: clamp(2.75rem, 5vw + 0.5rem, 5.75rem); /* Homepage hero */ --vv-fs-display: clamp(2.25rem, 3.5vw + 0.75rem, 4.25rem); /* Chapter / page titles */ --vv-fs-h1: clamp(2.25rem, 3vw + 1rem, 4rem); --vv-fs-h2: clamp(1.875rem, 2vw + 1rem, 2.75rem); --vv-fs-h3: clamp(1.75rem, 1vw + 1rem, 1.875rem); /* ≥28px — Abril floor */ --vv-fs-h4: 1.375rem; --vv-fs-lead: 1.375rem; --vv-fs-body: 1.1875rem; /* ~19px — Cormorant set generously (unchanged) */ --vv-fs-small: 0.8125rem; /* Rev4 — supporting type trimmed for air (~13px) */ --vv-fs-meta: 0.75rem; /* Rev4 — meta trimmed (~12px) */ --vv-fs-eyebrow: 0.625rem; /* Rev5 — eyebrows whisper (smaller) */ --vv-fs-nav: 0.8125rem; /* ----------------------------------------------------------------- * 7. TYPOGRAPHY — Weights * --------------------------------------------------------------- */ --vv-fw-regular: 400; --vv-fw-medium: 500; --vv-fw-semibold: 600; --vv-fw-bold: 700; /* ----------------------------------------------------------------- * 8. TYPOGRAPHY — Letter spacing * Anton gets modest tracking; Archivo body sits near 0; eyebrows * are heavily tracked. * --------------------------------------------------------------- */ --vv-ls-hero: 0.01em; --vv-ls-display: 0.02em; --vv-ls-headline: 0.02em; --vv-ls-body: 0; --vv-ls-snug: 0.01em; --vv-ls-meta: 0.14em; /* Rev4 — wider */ --vv-ls-nav: 0.16em; /* Rev4 — wider */ --vv-ls-eyebrow: 0.4em; /* Rev5 — wider still; eyebrows whisper (was 0.34em) */ --vv-ls-ritual: 0.38em; /* Rev4 — wider small-caps eyebrow tags (was 0.32em) */ /* ----------------------------------------------------------------- * 9. TYPOGRAPHY — Line heights * --------------------------------------------------------------- */ --vv-lh-display: 1.02; --vv-lh-tight: 1.2; --vv-lh-snug: 1.4; --vv-lh-normal: 1.6; --vv-lh-relaxed: 1.75; /* ----------------------------------------------------------------- * 10. SPACING SCALE — 8px vertical rhythm (Blueprint grid) * --------------------------------------------------------------- */ --vv-space-1: 0.25rem; /* 4px */ --vv-space-2: 0.5rem; /* 8px */ --vv-space-3: 0.75rem; /* 12px */ --vv-space-4: 1rem; /* 16px */ --vv-space-5: 1.5rem; /* 24px */ --vv-space-6: 2rem; /* 32px */ --vv-space-7: 3rem; /* 48px */ --vv-space-8: 4rem; /* 64px — section padding, mobile */ --vv-space-9: 6rem; /* 96px */ --vv-space-10: 7.5rem; /* 120px — section padding, desktop */ --vv-space-11: 12rem; /* 192px */ /* ----------------------------------------------------------------- * 11. RADIUS — sharp by default, luxury restraint * --------------------------------------------------------------- */ --vv-radius-none: 0; --vv-radius-xs: 2px; --vv-radius-sm: 4px; --vv-radius-md: 6px; /* button corners, Blueprint component library */ --vv-radius-pill: 999px; /* ----------------------------------------------------------------- * 12. SHADOWS — warm, subtle; cast in Ink, never harsh black * --------------------------------------------------------------- */ --vv-shadow-sm: 0 2px 8px rgba(21,16,14,0.40); --vv-shadow-md: 0 8px 24px rgba(21,16,14,0.50); --vv-shadow-lg: 0 16px 48px rgba(21,16,14,0.62); --vv-shadow-xl: 0 24px 64px rgba(21,16,14,0.72); --vv-shadow-glow-gold: 0 0 16px var(--vv-brass-glow); /* Rev4 — glow tamed & desaturated to brass; favour deep shadow over halo */ --vv-shadow-glow-cath: 0 0 32px var(--vv-cathedral-glow); /* Rev5 push — image-depth pass. A soft, low, MATTE pool that lifts bone panels off the Ink ground (single-source shadow per the brief, never a glossy drop), plus the shared film-grain so it can ride over imagery too. */ --vv-lift: 0 28px 55px -30px rgba(8,5,4,0.62); --vv-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ----------------------------------------------------------------- * 13. MOTION — curves & durations * Page transitions are a soft marigold wipe ~500ms. All motion * resolves instantly under prefers-reduced-motion (section 17). * --------------------------------------------------------------- */ --vv-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); --vv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --vv-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --vv-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --vv-ease-candlelight: cubic-bezier(0.4, 0.0, 0.2, 1); --vv-dur-fast: 180ms; --vv-dur-base: 360ms; --vv-dur-slow: 620ms; --vv-dur-wipe: 700ms; /* Rev4 — slower brass/ink page-transition wipe (was 500ms marigold) */ --vv-dur-ceremony: 1200ms; /* legacy alias — large reveals */ --vv-dur-eternal: 2400ms; /* atmosphere, ambient loops */ /* ----------------------------------------------------------------- * 14. LAYOUT — 1280px max content, mobile-first 375px * --------------------------------------------------------------- */ --vv-max-width: 1280px; --vv-max-width-prose: 720px; --vv-max-width-narrow: 960px; --vv-nav-height: 88px; --vv-nav-height-mobile: 72px; /* ----------------------------------------------------------------- * 15. Z-INDEX SCALE — single source of truth * --------------------------------------------------------------- */ --vv-z-base: 1; --vv-z-raised: 10; --vv-z-sticky: 100; --vv-z-nav: 1000; --vv-z-mobile-menu: 999; --vv-z-lightbox: 9500; --vv-z-loader: 9800; /* marigold-flower loading mark */ --vv-z-toast: 10000; --vv-z-agegate: 100000; /* the first thing every visitor meets */ /* ----------------------------------------------------------------- * 16. THRESHOLD HOUR — "One Evening at the House" (Rev6, additive) * The site is one evening: the palette never changes, only the light. * Hour identity is carried ONLY by (a) Evening Line ticks/label, * (b) the 1px rule inside an Hour Stamp, (c) a ≤5% ambient radial behind * a staged section — never text, never fills, never buttons. Every hue * below resolves to an existing, contrast-checked accent; no new palette. * --------------------------------------------------------------- */ /* Hour ambience — used as a radial tint laid over Ink at ≤6% alpha only. */ --vv-hour-golden: var(--vv-marigold-deep); /* #C9802B — Golden Hour */ --vv-hour-dusk: var(--vv-fuchsia); /* Dusk */ --vv-hour-candle: var(--vv-brass); /* Candlelight */ --vv-hour-string: var(--vv-jade); /* String Light */ --vv-hour-dark: var(--vv-violet); /* After Dark */ --vv-hour-tint-alpha: 0.05; /* section ambient radial — never higher */ /* Type moments — full-bleed display + ledger chapter numerals. */ --vv-size-display-xl: clamp(3.5rem, 9vw, 7.5rem); --vv-size-numeral: clamp(6rem, 14vw, 11rem); /* Acts — vertical breath between staged sections, + signature durations. Owner-directed (final visual pass): the Rev6 value (8–14rem) read as dead air on every long-scroll; halved SITE-WIDE. Routes may still tighten further (club) via a scoped override. */ --vv-space-act: clamp(4.5rem, 9vh, 7.5rem); --vv-dur-reveal: 450ms; /* headline/panel settle cap (playbook 5.9) */ --vv-dur-pour: 700ms; /* signature luminance wipe (Vodka + PDP hero) */ /* ----------------------------------------------------------------- * 17. RUNTIME VARIABLES — mutated by JS; declared for safe reference * --------------------------------------------------------------- */ --vv-scroll-progress: 0; --vv-hour-glow: transparent; /* route light note — set per body hour class */ } /* ----------------------------------------------------------------- * 17. REDUCED MOTION * Respect user preference. Resolve all motion to its end state. * --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --vv-dur-fast: 0ms; --vv-dur-base: 0ms; --vv-dur-slow: 0ms; --vv-dur-wipe: 0ms; --vv-dur-ceremony: 0ms; --vv-dur-reveal: 0ms; --vv-dur-pour: 0ms; } }