/* ========================================================================== DAILY LEAF — VARIABLES -------------------------------------------------------------------------- Every value used anywhere on the site is declared here. Change a value in this file and it updates across all 29 pages. Nothing else in the CSS contains a raw colour or size. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. BRAND COLOURS --------------------------------------------------------------------- */ --green: #62B44B; --green-accent: #8FD16C; --green-dark: #4A8F38; --green-darker: #356828; --green-tint: #EFF7EB; --green-tint-2: #DCEDD3; --dark: #1D1D1D; --white: #FFFFFF; --secondary: #F8F8F8; --border: #EAEAEA; --success: #4CAF50; /* --------------------------------------------------------------------- 2. NEUTRAL RAMP --------------------------------------------------------------------- */ --n-0: #FFFFFF; --n-50: #FBFBFB; --n-100: #F8F8F8; --n-200: #EAEAEA; --n-300: #DCDCDC; --n-400: #B8B8B8; --n-500: #8C8C8C; --n-600: #6B6B6B; --n-700: #4A4A4A; --n-800: #2E2E2E; --n-900: #1D1D1D; /* --------------------------------------------------------------------- 3. SEMANTIC ROLES --------------------------------------------------------------------- */ --text-primary: var(--n-900); --text-secondary: var(--n-600); --text-muted: var(--n-500); --text-inverse: var(--white); --text-brand: var(--green); --surface: var(--white); --surface-alt: var(--secondary); --surface-dark: var(--dark); --surface-tint: var(--green-tint); --line: var(--border); --line-strong: var(--n-300); --danger: #D64545; --warning: #E0921E; --info: #2F80C4; /* --------------------------------------------------------------------- 4. PER-PRODUCT ACCENTS Applied by adding a theme class to , e.g. class="theme-biotin". Only the benefits band, concern band and small product marks use these. Header, footer, buttons and cards always stay brand green. --------------------------------------------------------------------- */ --accent: var(--green); --accent-tint: var(--green-tint); --accent-deep: var(--green-darker); /* --------------------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------------------- */ --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --fs-display-xl: 4.5rem; --fs-display-l: 3.5rem; --fs-h1: 2.75rem; --fs-h2: 2.125rem; --fs-h3: 1.375rem; --fs-h4: 1.0625rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-label: 0.75rem; --fs-price: 1.5rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --tracking-tight: -0.03em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.08em; --measure: 68ch; --measure-narrow: 52ch; /* --------------------------------------------------------------------- 6. SPACING — 4px base --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --section-y: 48px; --section-y-lg: 64px; --section-y-sm: 24px; /* --------------------------------------------------------------------- 7. LAYOUT --------------------------------------------------------------------- */ --container: 1240px; --container-wide: 1440px; --container-narrow: 820px; --gutter: 40px; --header-h: 76px; --announce-h: 40px; /* --------------------------------------------------------------------- 8. RADIUS --------------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; /* --------------------------------------------------------------------- 9. SHADOWS — soft and low, Apple-style --------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(29, 29, 29, 0.04); --shadow-sm: 0 2px 8px rgba(29, 29, 29, 0.05); --shadow-md: 0 8px 28px rgba(29, 29, 29, 0.07); --shadow-lg: 0 18px 48px rgba(29, 29, 29, 0.10); --shadow-xl: 0 32px 80px rgba(29, 29, 29, 0.13); --shadow-green: 0 10px 30px rgba(98, 180, 75, 0.28); /* --------------------------------------------------------------------- 10. MOTION --------------------------------------------------------------------- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms; --dur-slower: 900ms; /* --------------------------------------------------------------------- 11. GLASS --------------------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.90); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: saturate(180%) blur(20px); /* --------------------------------------------------------------------- 12. Z-INDEX --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-toast: 500; } /* ========================================================================= PRODUCT THEMES Add one of these classes to on a product page. ========================================================================= */ .theme-men-testo { --accent: #2F7FC4; --accent-tint: #E7F1FA; --accent-deep: #17527F; } .theme-calcium { --accent: #3A6FA8; --accent-tint: #E8EFF7; --accent-deep: #1E4571; } .theme-zma { --accent: #D9902A; --accent-tint: #FCF4E6; --accent-deep: #8C5810; } .theme-fish-oil { --accent: #E08240; --accent-tint: #FDF1E8; --accent-deep: #8E4A17; } .theme-multivitamin{ --accent: #62B44B; --accent-tint: #EFF7EB; --accent-deep: #356828; } .theme-liver-detox { --accent: #3F9E63; --accent-tint: #EAF6EF; --accent-deep: #1F5C37; } .theme-joint { --accent: #4FA07C; --accent-tint: #EBF6F1; --accent-deep: #245C42; } .theme-biotin { --accent: #7B5BC4; --accent-tint: #F0EBFA; --accent-deep: #422C7A; }