/* ================================================================== 01 - VARIABLES Design tokens. The single source of truth for the whole theme. Nothing in this file paints anything on screen. Every other stylesheet reads from here, so changing a value here changes it everywhere. Never hardcode a colour or a size in another file. ================================================================== */ :root { /* ------------------------------------------------------------ BRAND PALETTE Sampled from the WaxOrbit design. ------------------------------------------------------------ */ /* Deep space background - the base every page sits on */ --wo-bg: #140E2A; --wo-bg-deep: #0F0A20; /* footer, page edges */ --wo-bg-soft: #1B1338; /* section bands, trust bar */ /* Surfaces - cards, panels, tab bodies */ --wo-surface: #241A4D; --wo-surface-2: #2E2361; /* raised / hover state */ --wo-surface-3: #3A2D78; /* pressed / active state */ /* Nebula - the lit purple used on hero panel and card imagery */ --wo-nebula-1: #4C3A8C; --wo-nebula-2: #5B4BA8; --wo-nebula-3: #6E5CC4; /* Primary action - Add to cart, active pills, links */ --wo-primary: #7C5CFF; --wo-primary-hover: #8F73FF; --wo-primary-active: #6A48F0; --wo-primary-soft: rgba(124, 92, 255, 0.16); --wo-primary-line: rgba(124, 92, 255, 0.38); /* Accent gold - Sale badge, prices, eyebrow labels, Buy Now */ --wo-gold: #F5C542; --wo-gold-hover: #FFD65C; --wo-gold-soft: rgba(245, 197, 66, 0.14); /* Text */ --wo-text: #FFFFFF; --wo-text-muted: #C3BADF; --wo-text-dim: #9289B8; --wo-text-on-gold: #2A1F05; --wo-text-on-primary: #FFFFFF; /* Lines and dividers - always translucent so they sit on any bg */ --wo-line: rgba(255, 255, 255, 0.10); --wo-line-strong: rgba(255, 255, 255, 0.18); --wo-line-faint: rgba(255, 255, 255, 0.06); /* Status */ --wo-success: #4ADE80; --wo-error: #FF6B6B; --wo-warning: #F5C542; --wo-star: #F5C542; /* ------------------------------------------------------------ GRADIENTS ------------------------------------------------------------ */ --wo-grad-hero: linear-gradient(160deg, var(--wo-nebula-1) 0%, var(--wo-nebula-2) 55%, #3E2F73 100%); --wo-grad-card: linear-gradient(165deg, #4A3A85 0%, #382B6B 100%); --wo-grad-primary: linear-gradient(135deg, var(--wo-primary) 0%, #6A48F0 100%); --wo-grad-gold: linear-gradient(135deg, #FFD65C 0%, var(--wo-gold) 100%); --wo-grad-surface: linear-gradient(180deg, var(--wo-surface) 0%, #1E1642 100%); --wo-grad-fade-top: linear-gradient(180deg, rgba(20, 14, 42, 0) 0%, var(--wo-bg) 100%); /* ------------------------------------------------------------ TYPEFACES Fraunces - display serif. Logo, headings, product names. Inter - body, UI, buttons, form fields. ------------------------------------------------------------ */ --wo-font-display: 'Aladin', 'Georgia', cursive; --wo-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --wo-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Weights */ --wo-weight-normal: 400; --wo-weight-medium: 500; --wo-weight-semibold: 600; --wo-weight-bold: 700; /* ------------------------------------------------------------ TYPE SCALE clamp(min, preferred, max) - fluid between mobile and desktop with no breakpoint needed. Headings never overflow on 320px. ------------------------------------------------------------ */ /* Scaled up roughly 8-10% from the original values. Small text gains proportionally more than large, because 12px labels were the least comfortable to read while the display sizes were already generous - a flat percentage would have made headings overbearing before the body copy became comfortable. */ --wo-text-xs: 0.8125rem; /* 13px - badges, meta */ --wo-text-sm: 0.875rem; /* 14px - card body, labels */ --wo-text-base: 1rem; /* 16px - body copy */ --wo-text-md: 1.0625rem; /* 17px - lead paragraphs */ --wo-text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); --wo-text-xl: clamp(1.375rem, 1vw + 1.06rem, 1.625rem); /* card titles */ --wo-text-2xl: clamp(1.625rem, 1.6vw + 1.2rem, 2.125rem); /* sub-section titles */ --wo-text-3xl: clamp(2rem, 2.6vw + 1.3rem, 3rem); /* section titles */ --wo-text-4xl: clamp(2.375rem, 4vw + 1.3rem, 3.75rem); /* page titles */ --wo-text-5xl: clamp(2.875rem, 6vw + 1.1rem, 5.25rem); /* hero logotype */ /* Line heights */ --wo-leading-tight: 1.1; --wo-leading-snug: 1.28; --wo-leading-normal: 1.55; --wo-leading-relaxed: 1.75; /* Letter spacing */ --wo-tracking-tight: 0.03em; --wo-tracking-normal: 0; --wo-tracking-wide: 0.04em; --wo-tracking-wider: 0.14em; /* eyebrow labels: SHOP / EXPLORE */ /* ------------------------------------------------------------ SPACING SCALE 4px base. Section padding is fluid so mobile isn't cramped and desktop isn't tight. ------------------------------------------------------------ */ --wo-space-1: 0.25rem; /* 4px */ --wo-space-2: 0.5rem; /* 8px */ --wo-space-3: 0.75rem; /* 12px */ --wo-space-4: 1rem; /* 16px */ --wo-space-5: 1.25rem; /* 20px */ --wo-space-6: 1.5rem; /* 24px */ --wo-space-8: 2rem; /* 32px */ --wo-space-10: 2.5rem; /* 40px */ --wo-space-12: 3rem; /* 48px */ --wo-space-16: 4rem; /* 64px */ --wo-space-20: 5rem; /* 80px */ --wo-space-24: 6rem; /* 96px */ /* Fluid rhythm */ --wo-gutter: clamp(1rem, 4vw, 2rem); /* page side padding */ --wo-gap: clamp(1rem, 2vw, 1.75rem); /* grid gap */ --wo-section-y: clamp(3.5rem, 8vw, 7rem); /* vertical section padding */ --wo-section-y-sm: clamp(2.5rem, 5vw, 4rem); /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ --wo-container: 1280px; /* default max width */ --wo-container-wide: 1480px; /* shop grid, hero */ --wo-container-narrow: 760px; /* blog post, about copy */ --wo-header-height: 72px; --wo-header-offset: 96px; /* space below floating navbar */ /* ------------------------------------------------------------ RADII Pill-heavy design: buttons and nav are fully rounded. ------------------------------------------------------------ */ --wo-radius-xs: 6px; --wo-radius-sm: 10px; --wo-radius: 14px; --wo-radius-md: 18px; --wo-radius-lg: 24px; --wo-radius-xl: 32px; --wo-radius-pill: 999px; --wo-radius-circle: 50%; /* ------------------------------------------------------------ SHADOWS & GLOWS ------------------------------------------------------------ */ --wo-shadow-sm: 0 2px 8px rgba(8, 4, 22, 0.35); --wo-shadow: 0 8px 24px rgba(8, 4, 22, 0.42); --wo-shadow-lg: 0 18px 46px rgba(8, 4, 22, 0.52); --wo-shadow-header: 0 6px 30px rgba(8, 4, 22, 0.45); --wo-glow-primary: 0 6px 26px rgba(124, 92, 255, 0.42); --wo-glow-gold: 0 6px 26px rgba(245, 197, 66, 0.34); --wo-ring: 0 0 0 3px rgba(124, 92, 255, 0.55); /* focus ring */ /* ------------------------------------------------------------ MOTION ------------------------------------------------------------ */ --wo-ease: cubic-bezier(0.4, 0, 0.2, 1); --wo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --wo-duration-fast: 140ms; --wo-duration: 240ms; --wo-duration-slow: 420ms; --wo-transition: var(--wo-duration) var(--wo-ease); /* ------------------------------------------------------------ Z-INDEX Declared in one place so nothing ever fights for stacking. ------------------------------------------------------------ */ --wo-z-stars: 0; --wo-z-content: 1; --wo-z-sticky: 100; --wo-z-header: 200; --wo-z-drawer: 300; --wo-z-overlay: 400; --wo-z-modal: 500; --wo-z-toast: 600; } /* ================================================================== BREAKPOINT REFERENCE CSS variables cannot be used inside @media queries, so these values are written literally in 12-responsive.css. Keeping the list here so there is still one place to read them. --bp-xs 480px single column -> 2 column product grid --bp-sm 600px card padding grows, 2 col footer --bp-md 768px hamburger disappears, tabs go inline --bp-lg 992px hero splits, 3 col product grid --bp-xl 1200px full desktop, 4 col grid, 4 col footer --bp-2xl 1440px wide container unlocks Method: mobile first. Base styles = phone. Media queries only ever use min-width and only ever add. ================================================================== */ /* ================================================================== REDUCED MOTION Users who ask for less motion get a still starfield and instant transitions, not a broken layout. ================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --wo-duration-fast: 1ms; --wo-duration: 1ms; --wo-duration-slow: 1ms; } }