/* ========================================================================== DRIP VAULT — DESIGN TOKENS -------------------------------------------------------------------------- Every colour, font, size and timing in the site comes from this file. Change a value here and it updates everywhere. THEME: light by default, with black BANDS. The site is white so product photos — shot on a light grey backdrop — sit in it naturally, and black garments read clearly against them. Black is used deliberately rather than everywhere: the announcement bar, the marquee, the editorial band, the About hero, the language gate and the footer. HOW THE BANDS WORK Components never use raw colours. They use the semantic tokens below — --bg, --ink, --text, --line and so on. `.theme-dark` redefines those same tokens for everything inside it, so a button, a heading or a form placed in a dark band inverts by itself. To make any section black, add the class:
…
NAMING --bg the ground a section sits on --ink the strongest foreground: headings, primary buttons --text body copy, a step softer than ink A primary button is `background: var(--ink); color: var(--bg)` — black on white pages, white in dark bands, with no extra rule. ========================================================================== */ :root { /* ---- Ground ------------------------------------------------------------ */ --bg: #FFFFFF; /* Page */ --surface-1: #F6F6F4; /* Lifted section bands — a warm off-white */ --surface-2: #F0F0ED; /* Panels */ --surface-3: #E8E8E4; /* Hover, pressed, selected */ /* ---- Product photography backdrop ------------------------------------- THE ONE COLOUR TO SHOOT ON. Every product image tile is filled with this, so a photo whose background is exactly #F2F2F0 merges into its tile with no visible edge. Deliberately NOT redefined by .theme-dark: the photos have a fixed background, so the tile behind them must not change. Why not pure white: half the catalogue is white tees, and a white tee on #FFFFFF loses its silhouette exactly the way a black tee does on black. */ --photo-bg: #F2F2F0; /* ---- Type --------------------------------------------------------------- Contrast on white: --text 14:1, --muted 7.8:1, --faint 4.9:1 — every step clears WCAG AA for body-size text, including the small uppercase labels that use --faint. */ --ink: #0A0A0A; --text: #2B2B30; --muted: #50525A; --faint: #6E7077; /* ---- Lines + tints ------------------------------------------------------ Always ink at low alpha rather than a flat grey, so a hairline picks up whatever surface it sits on. Tints are the same idea for fills — hover washes and pressed states. */ --line: rgba(10, 10, 10, 0.08); --line-strong: rgba(10, 10, 10, 0.14); --line-bright: rgba(10, 10, 10, 0.32); --tint-1: rgba(10, 10, 10, 0.03); --tint-2: rgba(10, 10, 10, 0.05); --tint-3: rgba(10, 10, 10, 0.08); /* ---- Chrome ------------------------------------------------------------ The brushed-metal gradient on display type ("Vault" in the wordmark and hero). On white it becomes gunmetal — ink at the edges with a cool grey sheen through the middle. In dark bands it turns back to silver. */ --chrome-hi: #0A0A0A; --chrome-mid: #33363D; --chrome-lo: #848A94; --chrome: linear-gradient(158deg, var(--chrome-hi) 0%, var(--chrome-mid) 30%, var(--chrome-lo) 56%, var(--chrome-mid) 76%, var(--chrome-hi) 100%); /* ---- Accent ------------------------------------------------------------ Electric blue, used ONLY for interaction — hover, focus, active, and the small "vault is open" dot. Deepened from the dark theme's #6E9BFF so it clears 4.5:1 on white; the lighter blue failed as a focus ring here. */ --accent: #2F5FFF; --accent-soft: #5C80FF; --accent-deep: #1E46D6; --accent-ink: #FFFFFF; /* text sitting ON the accent */ --accent-line: rgba(47, 95, 255, 0.35); --glow: rgba(47, 95, 255, 0.28); --glow-soft: rgba(47, 95, 255, 0.12); /* WhatsApp green. Deliberately NOT derived from --accent: people recognise this colour before they read the label, and on the button that carries every order that recognition is worth more than palette purity. Used only for ordering, or it stops meaning "this opens WhatsApp". --wa-text exists because #25D366 is unreadable as TEXT on white (1.9:1). As a button fill with dark ink on top it is fine. */ --wa: #25D366; --wa-deep: #1DA851; --wa-ink: #04120A; --wa-text: #117A3B; --danger: #C93434; /* ---- Glass + panels ---------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.74); --glass-bg-alt: #F7F7F5; --glass-brd: rgba(10, 10, 10, 0.08); --glass-blur: blur(18px) saturate(170%); --panel-glass: rgba(255, 255, 255, 0.94); /* drawers */ --bar-glass: rgba(255, 255, 255, 0.82); /* sticky shop toolbar */ --field-bg: #FFFFFF; --field-bg-focus: #FFFFFF; --scrim: rgba(10, 10, 10, 0.45); /* ---- Elevation --------------------------------------------------------- On white, shadows do the depth work again (on black they were nearly invisible). Kept soft and long — a hard short shadow reads as cheap. */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06), 0 4px 12px rgba(10, 10, 10, 0.05); --shadow-md: 0 14px 34px -14px rgba(10, 10, 10, 0.20); --shadow-lg: 0 30px 70px -22px rgba(10, 10, 10, 0.26); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.8); --ring-glow: 0 0 0 1px var(--glow), 0 12px 44px var(--glow-soft); /* ---- Hero atmosphere --------------------------------------------------- */ --hero-aura: radial-gradient(circle, rgba(47, 95, 255, 0.07) 0%, rgba(47, 95, 255, 0.02) 40%, transparent 68%); --hero-grid: rgba(10, 10, 10, 0.045); /* A soft white halo behind the masthead keeps it crisp over the vault lines. */ --hero-vignette: radial-gradient(ellipse 62% 52% at 50% 48%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 45%, transparent 75%); --scroll-thumb: #D4D4D0; --scroll-thumb-hover: #B4B4AF; /* Legacy aliases — a few rules still read these. */ --bg-alt: var(--surface-1); --fg: var(--text); --fg-muted: var(--muted); --rule: var(--line); /* ---- Typography -------------------------------------------------------- Display: Archivo, a grotesk with a variable width axis — the hero pushes it wide and heavy. Body: Inter. Both fall back to the system UI stack. */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial Black', Helvetica, Arial, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* Fluid scale between 375px and 1440px. */ --t-hero: clamp(3.6rem, 15vw, 13.5rem); --t-display: clamp(2.5rem, 6.4vw, 5.5rem); --t-h2: clamp(1.9rem, 4vw, 3rem); --t-h3: clamp(1.15rem, 1.9vw, 1.4rem); --t-h4: clamp(1.2rem, 1.8vw, 1.45rem); --t-h5: 1.15rem; --t-body: clamp(0.95rem, 1.05vw, 1.0625rem); --t-small: 0.8125rem; --t-micro: 0.6875rem; --track-hero: -0.045em; --track-tight: -0.028em; --track-mid: 0.14em; --track-wide: 0.24em; --weight-display: 800; --weight-hero: 900; /* ---- Spacing ----------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4.5rem, 9vw, 9.5rem); /* ---- Layout ------------------------------------------------------------ */ --page-max: 1440px; --text-max: 62ch; --gutter: clamp(1.25rem, 4.5vw, 4rem); --header-h: 76px; /* ---- Radii ------------------------------------------------------------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------------ --ease-expo is for the big moments (headline masks, image unveils, the vault doors): it moves most of the way almost at once, then settles for a long time. That long settle is what reads as expensive. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-expo: cubic-bezier(0.19, 1, 0.22, 1); --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 900ms; --dur-reveal: 1150ms; --z-header: 100; --z-drawer: 200; --z-overlay: 300; color-scheme: light; } /* ========================================================================== DARK BANDS Every semantic token, redefined. Anything that DERIVES from another token (--chrome, the aliases) must be restated here too: a custom property is resolved where it is declared, so a gradient computed on :root would carry the light values into this band unless it is re-declared inside it. ========================================================================== */ .theme-dark { --bg: #0A0A0A; --surface-1: #101013; --surface-2: #16161A; --surface-3: #1F1F25; --ink: #FFFFFF; --text: #F3F4F6; --muted: #9A9CA5; --faint: #75777F; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --line-bright: rgba(255, 255, 255, 0.30); --tint-1: rgba(255, 255, 255, 0.04); --tint-2: rgba(255, 255, 255, 0.06); --tint-3: rgba(255, 255, 255, 0.09); --chrome-hi: #FFFFFF; --chrome-mid: #DFE3EA; --chrome-lo: #9AA2B2; --chrome: linear-gradient(158deg, var(--chrome-hi) 0%, var(--chrome-mid) 30%, var(--chrome-lo) 58%, var(--chrome-mid) 78%, var(--chrome-hi) 100%); --accent: #6E9BFF; --accent-soft: #A8C1FF; --accent-deep: #3B63C7; --accent-ink: #05070F; --accent-line: rgba(110, 155, 255, 0.4); --glow: rgba(110, 155, 255, 0.42); --glow-soft: rgba(110, 155, 255, 0.16); --wa-text: #25D366; --danger: #FF7A7A; --glass-bg: rgba(255, 255, 255, 0.045); --glass-bg-alt: rgba(255, 255, 255, 0.028); --glass-brd: rgba(255, 255, 255, 0.10); --glass-blur: blur(22px) saturate(150%); --panel-glass: rgba(16, 16, 19, 0.86); --bar-glass: rgba(16, 16, 19, 0.72); --field-bg: rgba(255, 255, 255, 0.04); --field-bg-focus: rgba(255, 255, 255, 0.06); --scrim: rgba(0, 0, 0, 0.72); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.55); --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.65); --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.75); --edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.10); --ring-glow: 0 0 0 1px var(--glow), 0 12px 44px var(--glow-soft); --bg-alt: var(--surface-1); --fg: var(--text); --fg-muted: var(--muted); --rule: var(--line); color-scheme: dark; color: var(--text); background-color: var(--bg); } /* Reduced motion: collapse durations rather than removing transitions, so state changes still register — they just don't animate. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }