/* ============================================================================ KRUSH ORGANICS — PLATINUM PDP — DESIGN TOKENS ---------------------------------------------------------------------------- Single source of truth for the redesigned Platinum product page. Every color, type ramp, spacing unit, radius, shadow, motion value, and container width lives here. Build subagents import this FIRST, then layer typography.css → components.css → motion.css on top. Naming: kebab-case, semantic (e.g. --color-surface-cream, not --color-f8f5f0). Light mode is the default. Dark sections use the "brand-dark" surface layered on top — we don't ship a full dark mode for this PDP. Verified brand values (DO NOT change without Blake's sign-off): - Font: Poppins 300/400/600/700, body weight 300 (brand fingerprint) - Greens: #629D42 / #5A9C3A / #689E48 / #E5EFE0 - All other tokens are extensions designed to elevate Platinum to the "Hyro-elite" benchmark established in recon/benchmarks.md. ============================================================================ */ :root { /* ========================================================================== 1. COLOR — BRAND GREENS (verified from live krushorganics.com) ========================================================================== */ --color-brand-green: #629D42; /* primary CTA, brand anchor */ --color-brand-green-hover: #5A9C3A; /* CTA hover, deeper variant */ --color-brand-green-link: #689E48; /* inline links, slightly brighter */ --color-brand-green-tint: #E5EFE0; /* soft section wash */ /* Green ramp (extrapolated for full design freedom) */ --color-green-50: #F4F9F0; --color-green-100: #E5EFE0; /* same as brand-green-tint */ --color-green-200: #C7DDB8; --color-green-300: #A5C988; --color-green-400: #84B45F; --color-green-500: #629D42; /* same as brand-green */ --color-green-600: #558735; --color-green-700: #44702A; --color-green-800: #345621; --color-green-900: #243C17; --color-green-950: #14220C; /* ========================================================================== 2. COLOR — PLATINUM ACCENT PALETTE ---------------------------------------------------------------------------- OPINIONATED DECISION: Platinum is rendered as a cool gunmetal-to-champagne ramp, NOT chrome-silver. Chrome reads cheap (auto parts catalog). We want "Rolex Datejust" not "wheel rim". Champagne warmth (#E8DCC4 tip) prevents it from going clinical. Use sparingly: edges, borders, tier-card accents, guarantee medallion, hero metallic glints. Never as a flat fill. ========================================================================== */ --color-platinum-50: #F7F6F2; /* almost-white champagne */ --color-platinum-100: #ECE8DE; /* pale champagne */ --color-platinum-200: #D9D2C0; /* warm pale silver */ --color-platinum-300: #BFB69E; /* silver-champagne */ --color-platinum-400: #9E9683; /* mid taupe-silver */ --color-platinum-500: #7C7567; /* gunmetal-warm */ --color-platinum-600: #5E584E; /* deep gunmetal */ --color-platinum-700: #423E37; /* near-black with warmth */ --color-platinum-800: #2A2823; --color-platinum-900: #181714; /* Platinum gradient — THE accent. Use on tier-3 card, guarantee badge, etc. */ --gradient-platinum: linear-gradient( 135deg, #ECE8DE 0%, /* champagne highlight */ #D9D2C0 18%, #9E9683 45%, #5E584E 72%, #423E37 100% /* gunmetal shadow */ ); /* Platinum shimmer gradient — for the animated platinum-shimmer effect. Used by motion.css on premium accents. Keep subtle. */ --gradient-platinum-shimmer: linear-gradient( 110deg, transparent 0%, transparent 35%, rgba(236, 232, 222, 0.6) 48%, rgba(255, 252, 245, 0.9) 50%, rgba(236, 232, 222, 0.6) 52%, transparent 65%, transparent 100% ); /* Edge-light gradient — for the platinum-tinted border of premium tier card */ --gradient-platinum-edge: linear-gradient( 180deg, #ECE8DE 0%, #9E9683 50%, #5E584E 100% ); /* ========================================================================== 3. COLOR — NEUTRALS (full 50→950 ramp) ---------------------------------------------------------------------------- Slightly warm-cool blend (hue ~30°, very low sat) so it sits with both the cream surface and the green brand without clashing. ========================================================================== */ --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAF8; --color-neutral-100: #F4F3EF; --color-neutral-200: #E8E6DF; --color-neutral-300: #D5D2C8; --color-neutral-400: #B3AFA1; --color-neutral-500: #8A8678; --color-neutral-600: #6B6759; --color-neutral-700: #4F4C42; --color-neutral-800: #353329; /* preferred body text on cream */ --color-neutral-900: #1F1E19; /* preferred display/heading */ --color-neutral-950: #0F0E0B; /* dark-section background */ /* ========================================================================== 4. COLOR — SURFACES ---------------------------------------------------------------------------- OPINIONATED DECISION: Cream (#F8F5F0) is the DEFAULT page background, not white. Every premium benchmark (Hyro, JSHealth, Seed, Manscaped) uses a tinted surface. Stark white is the tell of a Shopify template. Cream is the tell of intentional design. White is reserved for cards, buy-box, and the photographic product canvas. Brand-dark surface used for press band and one "credibility" deep-scroll moment. ========================================================================== */ --color-surface-cream: #F8F5F0; /* DEFAULT page background */ --color-surface-cream-deep: #F0EBE0; /* warmer cream (cards on cream) */ --color-surface-white: #FFFFFF; /* product canvas, buy-box */ --color-surface-off-white: #FAFAF8; /* subtle alt surface */ --color-surface-tint-green: #E5EFE0; /* green-wash section background */ --color-surface-tint-mint: #EDF4E8; /* lighter green wash variant */ --color-surface-brand-dark: #1F2A1A; /* dark-green section (press band, credibility) */ --color-surface-ink: #0F0E0B; /* deepest dark surface */ --color-surface-overlay: rgba(15, 14, 11, 0.6); /* modal/scrim */ /* ========================================================================== 5. COLOR — TEXT (semantic) ========================================================================== */ --color-text-high: #1F1E19; /* headings, primary copy */ --color-text-body: #353329; /* body text on cream/white */ --color-text-mid: #6B6759; /* secondary, captions */ --color-text-low: #8A8678; /* meta, placeholder */ --color-text-inverse: #F8F5F0; /* text on dark surfaces */ --color-text-inverse-mid: #C7C3B5; /* secondary on dark */ --color-text-link: #689E48; /* inline links */ --color-text-link-hover: #5A9C3A; --color-text-accent: #629D42; /* emphasis in body */ /* ========================================================================== 6. COLOR — BORDERS / DIVIDERS ========================================================================== */ --color-border-hairline: rgba(31, 30, 25, 0.08); /* dividers */ --color-border-soft: rgba(31, 30, 25, 0.12); /* card borders */ --color-border-default: #D5D2C8; /* form fields */ --color-border-strong: #B3AFA1; /* focus rings (non-brand) */ --color-border-brand: #629D42; /* selected/active */ --color-border-platinum: #BFB69E; /* premium accents */ --color-border-on-dark: rgba(248, 245, 240, 0.14); /* ========================================================================== 7. COLOR — SEMANTIC (status) ========================================================================== */ --color-success: #2F8F4E; --color-success-bg: #DCEFE0; --color-warning: #B8762A; --color-warning-bg: #FBEED1; --color-error: #B8362A; --color-error-bg: #FBE0DC; --color-info: #2A6FB8; --color-info-bg: #DCE7F4; /* ========================================================================== 8. TYPOGRAPHY — FAMILIES ---------------------------------------------------------------------------- Brand-locked: Poppins for everything. Single typeface = brand fingerprint. No serif pairing — keeps it "calm modern wellness" not "apothecary". ========================================================================== */ --font-poppins: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-body: var(--font-poppins); --font-display: var(--font-poppins); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ========================================================================== 9. TYPOGRAPHY — WEIGHTS ---------------------------------------------------------------------------- OPINIONATED DECISION: Body stays at 300 (brand-verified). DO NOT lift to 400 just because it feels "more legible" — the lightness IS the Krush visual signature. We compensate for the lightness by upping line-height to 1.65 on body, which gives crisp legibility at 16px on a cream surface. ========================================================================== */ --weight-light: 300; /* body, links, default paragraph */ --weight-regular: 400; /* display headings, hero H1, H2 */ --weight-medium: 500; /* (reserved — not used by current brand, but available for tabular figures, badge text) */ --weight-semibold: 600; /* primary CTA, H3, tier card price */ --weight-bold: 700; /* secondary CTA, eyebrow labels, badges */ /* ========================================================================== 10. TYPOGRAPHY — SIZE RAMP (fluid, clamp-based) ---------------------------------------------------------------------------- Modular scale ratio: 1.25 (Major Third), but we use clamp() to fluidly interpolate between mobile minimum and desktop maximum. This means H1 reads at ~40px on mobile and ~80px on desktop without media queries. ========================================================================== */ /* Display (hero only) */ --text-display: clamp(3rem, 1.5rem + 6vw, 5.5rem); /* 48 → 88px */ --leading-display: 1.02; --tracking-display: -0.025em; /* H1 */ --text-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem); /* 36 → 68px */ --leading-h1: 1.08; --tracking-h1: -0.02em; /* H2 */ --text-h2: clamp(1.75rem, 1rem + 3vw, 3rem); /* 28 → 48px */ --leading-h2: 1.15; --tracking-h2: -0.018em; /* H3 */ --text-h3: clamp(1.375rem, 0.9rem + 1.8vw, 2rem); /* 22 → 32px */ --leading-h3: 1.25; --tracking-h3: -0.012em; /* H4 */ --text-h4: clamp(1.125rem, 0.9rem + 0.9vw, 1.375rem); /* 18 → 22px */ --leading-h4: 1.35; --tracking-h4: -0.005em; /* Body lead — emphasised paragraph below H1 */ --text-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); /* 17 → 20px */ --leading-lead: 1.55; /* Body */ --text-body: 1rem; /* 16px — anchor */ --leading-body: 1.65; /* generous, compensates for 300 weight */ --tracking-body: 0.005em; /* Small / meta */ --text-small: 0.875rem; /* 14px */ --leading-small: 1.55; --tracking-small: 0.01em; /* Micro / caption */ --text-micro: 0.75rem; /* 12px */ --leading-micro: 1.5; --tracking-micro: 0.04em; /* Eyebrow / all-caps label */ --text-eyebrow: 0.75rem; /* 12px */ --leading-eyebrow: 1.3; --tracking-eyebrow: 0.14em; /* wide tracking on caps */ --weight-eyebrow: var(--weight-bold); /* ========================================================================== 11. SPACING — 4-based scale ---------------------------------------------------------------------------- Use the named tokens for component-level consistency. Section padding has its own scale further down — different rhythm. ========================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* Section padding (vertical rhythm — mobile → desktop via clamp) */ --section-py-sm: clamp(2.5rem, 1.5rem + 3vw, 4rem); /* compact section */ --section-py-md: clamp(3.5rem, 2rem + 5vw, 6rem); /* default section */ --section-py-lg: clamp(5rem, 3rem + 7vw, 8rem); /* statement section */ --section-py-xl: clamp(6rem, 3rem + 9vw, 10rem); /* hero / monumental */ /* Within-section element rhythm */ --section-gap-tight: var(--space-4); --section-gap-default: var(--space-8); --section-gap-loose: var(--space-12); --section-gap-roomy: var(--space-20); /* ========================================================================== 12. RADII ---------------------------------------------------------------------------- OPINIONATED DECISION: Radii skew GENEROUS but not bubbly. 14px on cards, 12px on buttons — premium DTC tells. Avoid 4-6px (looks SaaS-template). Avoid >20px on rectangles (looks playful, not premium). ========================================================================== */ --radius-xs: 4px; /* badges, tooltip arrows */ --radius-sm: 8px; /* small chips, form inputs */ --radius-md: 12px; /* buttons, segmented controls */ --radius-lg: 14px; /* cards (default), tier cards */ --radius-xl: 20px; /* large feature cards, hero panels */ --radius-2xl: 28px; /* statement modules */ --radius-pill: 9999px; /* pills, badges, circular */ --radius-full: 9999px; /* alias */ /* ========================================================================== 13. SHADOWS — 5-level scale + premium platinum tint ---------------------------------------------------------------------------- Shadows tinted slightly warm (matches cream surface) — pure-black shadow on cream reads cold/grey. The platinum shadow is for the tier-3 card and the guarantee medallion — premium-only. ========================================================================== */ --shadow-xs: 0 1px 2px rgba(31, 30, 25, 0.04); --shadow-sm: 0 2px 4px rgba(31, 30, 25, 0.05), 0 1px 2px rgba(31, 30, 25, 0.03); --shadow-md: 0 6px 12px -2px rgba(31, 30, 25, 0.07), 0 3px 6px -3px rgba(31, 30, 25, 0.04); --shadow-lg: 0 14px 28px -6px rgba(31, 30, 25, 0.10), 0 6px 12px -4px rgba(31, 30, 25, 0.05); --shadow-xl: 0 28px 56px -12px rgba(31, 30, 25, 0.14), 0 12px 24px -8px rgba(31, 30, 25, 0.07); /* Premium — for tier-3 card, guarantee medallion, hero product float */ --shadow-premium: 0 1px 1px rgba(94, 88, 78, 0.12), /* contact shadow */ 0 20px 40px -16px rgba(66, 62, 55, 0.22), /* main lift */ 0 40px 80px -32px rgba(66, 62, 55, 0.18), /* atmospheric */ inset 0 1px 0 rgba(255, 252, 245, 0.6); /* top-edge highlight */ /* Focus ring shadow (accessibility) */ --shadow-focus: 0 0 0 3px rgba(98, 157, 66, 0.35); --shadow-focus-platinum: 0 0 0 3px rgba(191, 182, 158, 0.5); /* ========================================================================== 14. MOTION — durations + easings ========================================================================== */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-glide: 720ms; /* scroll reveals, hero parallax */ --duration-shimmer: 2800ms; /* platinum shimmer cycle */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* general purpose */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* leaving the screen */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* entering the screen */ --ease-in-out: cubic-bezier(0.55, 0, 0.45, 1); /* state changes */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* button press, micro */ --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* scroll reveals — feels rich */ /* ========================================================================== 15. CONTAINER WIDTHS + LAYOUT ========================================================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-prose: 65ch; /* long-form readability anchor */ --container-max: 1280px; /* page max width (default) */ /* Horizontal page gutter — fluid */ --gutter: clamp(1rem, 4vw, 2.5rem); /* ========================================================================== 16. Z-INDEX SCALE ========================================================================== */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; /* sticky add-to-cart bar */ --z-overlay: 500; /* page-level overlays */ --z-modal: 1000; --z-toast: 1500; --z-tooltip: 2000; /* ========================================================================== 17. BREAKPOINTS (for reference inside @media, not used as vars) ---------------------------------------------------------------------------- - sm: 640px small phones / large phones landscape - md: 768px tablet portrait - lg: 1024px tablet landscape / small laptop - xl: 1280px desktop (design canvas) - 2xl: 1536px large desktop ========================================================================== */ } /* ============================================================================ BRAND-DARK SCOPE ---------------------------------------------------------------------------- Apply `.scope-dark` on a section to flip text/border tokens for legibility on the dark green surface. We do NOT redefine the brand greens (CTAs stay on brand). Press band + credibility section use this scope. ============================================================================ */ .scope-dark { --color-text-high: #F8F5F0; --color-text-body: #E8E6DF; --color-text-mid: #B3AFA1; --color-text-low: #8A8678; --color-border-hairline: rgba(248, 245, 240, 0.10); --color-border-soft: rgba(248, 245, 240, 0.16); --color-surface-white: rgba(248, 245, 240, 0.04); /* "card" on dark = subtle frosted */ background: var(--color-surface-brand-dark); color: var(--color-text-body); } /* ============================================================================ GLOBAL RESET-LITE + ROOT DEFAULTS ---------------------------------------------------------------------------- Just enough to make tokens "just work" in the build phase. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-text-body); background: var(--color-surface-cream); } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font-family: inherit; } /* Selection — uses brand green, not browser default */ ::selection { background: var(--color-brand-green); color: var(--color-surface-white); } /* Reduce-motion safety net (motion.css extends this) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }