/* ───────────────────────────────────────────────────────────────────────── * utbarvape.com · tokens.css — Dual Split DNA (twin-tank teal/coral on mint paper) * Engineering-ready CSS variables for 11ty + core.css rewrite. * All consumer-facing UI reads from these tokens. * 2026-07-03 · v1.0 * ───────────────────────────────────────────────────────────────────────── */ :root { /* ── SUBSTRATE ─────────────────────────────────────────────── */ --ubx-paper: #F3FAF8; /* primary page background */ --ubx-paper-deep: #E7F3EF; /* nested surfaces */ --ubx-paper-warm: #EDF6F1; /* warmer alt surface */ /* ── INK SCALE (text, chrome, borders) ─────────────────────── */ --ubx-ink: #12211E; /* primary text · chrome */ --ubx-ink-2: #31413D; /* body text */ --ubx-ink-3: #66756F; /* muted / labels */ --ubx-ink-4: #A3B0AB; /* very muted */ --ubx-hair: rgba(18, 33, 30, 0.08); /* hairline borders */ --ubx-hair-2: rgba(18, 33, 30, 0.14); /* stronger hairlines */ /* ── GLASS (cards, panels, sticky chrome) ──────────────────── */ --ubx-glass: rgba(255, 255, 255, 0.55); --ubx-glass-deep: rgba(255, 255, 255, 0.76); --ubx-glass-edge: rgba(255, 255, 255, 0.88); --ubx-glass-blur: blur(28px) saturate(135%); --ubx-glass-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 24px 70px -20px rgba(14, 158, 138, 0.20), 0 2px 4px rgba(18, 33, 30, 0.05); /* ── DIFFUSE CHROMA (ambience only — never on chrome/CTAs) ─ */ --ubx-c-rose: #F4536E; --ubx-c-magenta: #C77DDB; --ubx-c-lavender: #7BD9C9; --ubx-c-sky: #0E9E8A; --ubx-c-cyan: #22C3A6; --ubx-c-mint: #55D6B8; --ubx-c-lime: #B8D432; --ubx-c-amber: #F49D3E; --ubx-c-peach: #F4536E; /* ── FLAVOR FAMILY HUES (low-friction, sit on cream) ───────── */ --ubx-f-iced: #0E9E8A; --ubx-f-sour: #B8D432; --ubx-f-mint: #22C3A6; --ubx-f-tropical: #F49D3E; --ubx-f-berry: #F4536E; --ubx-f-peach: #C77DDB; --ubx-f-sig: #8A8F98; --ubx-f-iced-deep: #1F5879; --ubx-f-sour-deep: #565E0E; --ubx-f-mint-deep: #1F5A3C; --ubx-f-tropical-deep: #6D3608; --ubx-f-berry-deep: #6E153D; --ubx-f-peach-deep: #6E3F1C; --ubx-f-sig-deep: #1A1812; /* ── SIGNAL (functional, never atmospheric) ─────────────────── */ --ubx-signal-ok: #1F9D5C; /* in-stock dot · success toast */ --ubx-signal-warn: #C97A1B; /* low-stock dot · pending */ --ubx-signal-err: #C73B3B; /* OOS · warning callout · error */ --ubx-signal-info: #1FA4FF; /* info callout */ /* ── TYPE STACKS ───────────────────────────────────────────── */ --ubx-font-display: "Space Grotesk", system-ui, sans-serif; --ubx-font-body: "Karla", -apple-system, "Segoe UI", system-ui, sans-serif; --ubx-font-serif: "Karla", serif; --ubx-font-mono: "Fira Code", ui-monospace, monospace; /* ── TYPE SCALE ────────────────────────────────────────────── */ --ubx-fs-h1-xl: 96px; --ubx-fs-h1: 68px; --ubx-fs-h2: 40px; --ubx-fs-h3: 28px; --ubx-fs-h4: 20px; --ubx-fs-lead: 18px; --ubx-fs-body: 14px; --ubx-fs-small: 12px; --ubx-fs-micro: 11px; --ubx-fs-mono-sm: 10px; /* ── LINE HEIGHTS ──────────────────────────────────────────── */ --ubx-lh-tight: 1.02; --ubx-lh-snug: 1.2; --ubx-lh-body: 1.55; --ubx-lh-loose: 1.7; /* ── TRACKING ──────────────────────────────────────────────── */ --ubx-tr-display: -0.022em; --ubx-tr-body: -0.005em; --ubx-tr-mono: 0.06em; /* ── RADII ─────────────────────────────────────────────────── */ --ubx-r-xs: 6px; --ubx-r-sm: 10px; --ubx-r-md: 16px; --ubx-r-lg: 14px; --ubx-r-xl: 24px; --ubx-r-pill: 999px; /* ── SPACING SCALE ─────────────────────────────────────────── */ --ubx-s-1: 4px; --ubx-s-2: 8px; --ubx-s-3: 12px; --ubx-s-4: 16px; --ubx-s-5: 20px; --ubx-s-6: 24px; --ubx-s-8: 32px; --ubx-s-10: 40px; --ubx-s-12: 48px; --ubx-s-16: 64px; --ubx-s-20: 80px; /* ── LAYOUT WIDTHS ─────────────────────────────────────────── */ --ubx-max-w: 1160px; /* most pages */ --ubx-max-w-nb: 920px; /* article/guide narrow body */ --ubx-pad-x: 52px; /* desktop horizontal pad */ --ubx-pad-x-md: 32px; /* tablet */ --ubx-pad-x-sm: 20px; /* mobile */ /* ── ELEVATION (cards above ambience) ────────────────────── */ --ubx-elev-1: 0 1px 2px rgba(18,33,30,.04); --ubx-elev-2: 0 8px 24px -8px rgba(18,33,30,.10); --ubx-elev-3: 0 24px 70px -20px rgba(14,158,138,.20); /* ── MOTION ────────────────────────────────────────────────── */ --ubx-ease: cubic-bezier(.2, .8, .25, 1); --ubx-ease-out: cubic-bezier(.16, 1, .3, 1); --ubx-dur-fast: 120ms; --ubx-dur-base: 200ms; --ubx-dur-slow: 360ms; /* ── Z-LAYERS ──────────────────────────────────────────────── */ --ubx-z-base: 0; --ubx-z-sticky: 10; --ubx-z-overlay: 20; --ubx-z-modal: 40; --ubx-z-toast: 60; } /* ── reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ubx-paper); color: var(--ubx-ink); font: 420 var(--ubx-fs-body) / var(--ubx-lh-body) var(--ubx-font-body); letter-spacing: var(--ubx-tr-body); -webkit-font-smoothing: antialiased; } /* ── breakpoints (engineering reference) ───────────────────────── --ubx-bp-sm: 375px · mobile baseline (70% of traffic) --ubx-bp-md: 768px · tablet --ubx-bp-lg: 1024px · desktop entry --ubx-bp-xl: 1280px · canonical desktop --ubx-bp-2xl: 1440px · large desktop */ /* ── motion notes (for engineering · §12 deliverable) ──────────── FAQ accordion → height transition 200ms var(--ubx-ease-out) Sticky tab transitions → background-position 120ms ease-out Sticky cart pill → translateY(100% → 0) 240ms var(--ubx-ease) on scrollPast hero Flavor card hover → translateY(-2px) 160ms; reveal note opacity 200ms Search modal entry → fade + scale 0.96→1 in 200ms Peel-reveal effect → SVG mask radial-gradient 600ms ease-out on pointer-drag */ /* ── Dual Split accents (CTA teal / tank-B coral) ─────────────── */ :root { --ubx-accent: #0E9E8A; --ubx-accent-deep: #0B7F6F; --ubx-accent-soft: rgba(14, 158, 138, 0.10); --ubx-accent-tint: #E2F4F0; --ubx-accent-b: #F4536E; --ubx-red: #C73B3B; }