/* ============================================================================ variables.css — DESIGN TOKENS (single source of truth for the whole site) ---------------------------------------------------------------------------- WHAT LIVES HERE - Colour palette (as space-separated RGB channels, so Tailwind can apply opacity modifiers such as `bg-primary/40`) - Spacing scale, border radii, shadows, blurs, transitions, z-index layers - Font family + font size tokens are declared in typography.css HOW IT CONNECTS assets/js/tailwind.config.js maps every Tailwind colour to `rgb(var(--color-x-rgb) / )`, so changing a value HERE changes both the Tailwind utility classes and the plain CSS in main.css. HOW TO RE-SKIN THE SITE Edit the RGB triplets below. Nothing else needs to change. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND / LEGACY COLOURS Used by: navbar, hero, body background, active nav link. ------------------------------------------------------------------ */ --primary-bg: #2b3524; /* background — deep forest green */ --primary-bg-rgb: 43 53 36; /* same colour as channels (hero scrim) */ --text-light: #f5f5f5; /* default body text colour */ --active-gold: #e2d88c; /* navbar active/hover link colour */ --hero-copy: #d1d5cb; /* hero sub-headline paragraph colour */ /* ------------------------------------------------------------------ 2. MATERIAL-STYLE COLOUR ROLES (RGB channels) These mirror the Material 3 "role" naming used across the markup. Format is `R G B` (no commas) so Tailwind can emit rgb(... / alpha). ------------------------------------------------------------------ */ --color-primary-rgb: 255 255 255; /* #ffffff surfaces on top / white text */ --color-on-primary-rgb: 48 49 45; /* #30312d text placed on `primary` */ --color-primary-container-rgb: 228 226 221; /* #e4e2dd */ --color-on-primary-container-rgb: 101 101 96; /* #656560 */ --color-primary-fixed-rgb: 228 226 221; /* #e4e2dd light "paper" section background */ --color-on-primary-fixed-rgb: 27 28 24; /* #1b1c18 */ --color-primary-fixed-dim-rgb: 200 198 193; /* #c8c6c1 */ --color-on-primary-fixed-variant-rgb: 71 71 67; /* #474743 */ --color-inverse-primary-rgb: 95 95 90; /* #5f5f5a */ --color-secondary-rgb: 187 205 163; /* #bbcda3 sage accent (labels, icons, dots) */ --color-on-secondary-rgb: 39 52 23; /* #273417 */ --color-secondary-container-rgb: 63 78 46; /* #3f4e2e */ --color-on-secondary-container-rgb: 173 190 150; /* #adbe96 */ --color-secondary-fixed-rgb: 215 233 190; /* #d7e9be pill/badge background */ --color-on-secondary-fixed-rgb: 18 31 5; /* #121f05 dark section background */ --color-secondary-fixed-dim-rgb: 187 205 163; /* #bbcda3 */ --color-on-secondary-fixed-variant-rgb: 61 75 44; /* #3d4b2c */ --color-tertiary-rgb: 255 255 255; /* #ffffff */ --color-on-tertiary-rgb: 50 49 39; /* #323127 */ --color-tertiary-container-rgb: 231 227 211; /* #e7e3d3 */ --color-on-tertiary-container-rgb: 103 101 89; /* #676559 */ --color-tertiary-fixed-rgb: 231 227 211; /* #e7e3d3 */ --color-on-tertiary-fixed-rgb: 29 28 19; /* #1d1c13 */ --color-tertiary-fixed-dim-rgb: 202 199 184; /* #cac7b8 */ --color-on-tertiary-fixed-variant-rgb: 73 71 60; /* #49473c */ --color-error-rgb: 255 180 171; /* #ffb4ab */ --color-on-error-rgb: 105 0 5; /* #690005 */ --color-error-container-rgb: 147 0 10; /* #93000a */ --color-on-error-container-rgb: 255 218 214; /* #ffdad6 */ --color-background-rgb: 20 19 19; /* #141313 scrim gradients over hero images */ --color-on-background-rgb: 229 226 224; /* #e5e2e0 */ --color-surface-rgb: 20 19 19; /* #141313 footer background */ --color-on-surface-rgb: 229 226 224; /* #e5e2e0 body copy on dark surfaces */ --color-surface-variant-rgb: 53 52 52; /* #353434 */ --color-on-surface-variant-rgb: 199 199 191; /* #c7c7bf muted body copy */ --color-surface-dim-rgb: 20 19 19; /* #141313 */ --color-surface-bright-rgb: 58 57 56; /* #3a3938 */ --color-surface-tint-rgb: 200 198 193; /* #c8c6c1 */ --color-surface-container-lowest-rgb: 14 14 14; /* #0e0e0e */ --color-surface-container-low-rgb: 28 27 27; /* #1c1b1b */ --color-surface-container-rgb: 32 31 31; /* #201f1f glass card base */ --color-surface-container-high-rgb: 43 42 41; /* #2b2a29 */ --color-surface-container-highest-rgb: 53 52 52; /* #353434 */ --color-inverse-surface-rgb: 229 226 224; /* #e5e2e0 testimonial section background */ --color-inverse-on-surface-rgb: 49 48 48; /* #313030 */ --color-outline-rgb: 145 145 138; /* #91918a */ --color-outline-variant-rgb: 70 71 65; /* #464741 */ /* ------------------------------------------------------------------ 3. FOREST SCALE — the solid section backgrounds Replaces every hardcoded `bg-[#....]` that used to sit in the markup. ------------------------------------------------------------------ */ --color-forest-950-rgb: 45 56 33; /* #2D3821 Editorial quote break background */ --color-forest-900-rgb: 53 66 39; /* #354227 Kids Club "Community Impact" card */ --color-forest-800-rgb: 61 75 44; /* #3D4B2C Editorial + Volunteer Intro sections */ --color-forest-700-rgb: 63 78 46; /* #3f4e2e Education, Kids Club, Initiatives */ --color-forest-600-rgb: 69 83 52; /* #455334 Strategic Roadmap section */ /* ------------------------------------------------------------------ 4. STANDALONE ACCENTS ------------------------------------------------------------------ */ --color-ivory-rgb: 248 246 240; /* #F8F6F0 Initiatives headline / body copy */ --color-forest-deep-rgb: 63 78 46; /* #3f4e2e legacy alias of forest-700 */ --color-accent-yellow-rgb: 255 230 109; /* #ffe66d "COCO SOCIAL FUND" highlight in hero */ --color-whatsapp-rgb: 37 211 102; /* #25D366 floating WhatsApp button */ /* Neutral channels used to build shadows / glows without hardcoding rgba() */ --color-shadow-rgb: 0 0 0; /* black — all elevation shadows */ --color-glow-rgb: 255 255 255; /* white — hover glow on CTA buttons */ /* ------------------------------------------------------------------ 5. GLASSMORPHISM SURFACES Used by: .main-navbar, .glass-nav, mobile menu, popup overlay. ------------------------------------------------------------------ */ --glass-bg: rgb(var(--color-glow-rgb) / 0.12); --glass-border: rgb(var(--color-glow-rgb) / 0.2); --glass-nav-bg: rgb(var(--color-surface-rgb) / 0.4); --glass-nav-border: rgb(var(--color-glow-rgb) / 0.15); --glass-blur: 16px; --glass-blur-strong: 24px; /* Border colours the Program Overview tilt swaps between (animations.js assigns these as `var(...)`, so no colour is hardcoded in JavaScript). */ --card-border-rest: rgb(var(--color-glow-rgb) / 0.12); --card-border-hover: rgb(var(--color-glow-rgb) / 0.3); --mobile-menu-bg: rgb(30 38 25 / 0.95); /* dropdown panel below 1100px */ --mobile-menu-border: rgb(var(--color-glow-rgb) / 0.15); /* ------------------------------------------------------------------ 6. SPACING SCALE (also mirrored into tailwind.config.js) ------------------------------------------------------------------ */ --space-gutter: 24px; /* grid gutter between columns */ --space-section-gap: 8rem; /* vertical rhythm between sections */ --space-element-gap: 1.5rem; /* gap inside a content block */ --space-container-padding: 4rem; /* desktop horizontal page padding */ --space-margin-mobile: 20px; /* mobile horizontal page padding */ /* ------------------------------------------------------------------ 7. BORDER RADIUS ------------------------------------------------------------------ */ --radius-default: 1rem; --radius-lg: 2rem; --radius-xl: 3rem; --radius-full: 9999px; --radius-pill: 50px; /* navbar capsule */ --radius-button: 30px; /* DONATE button */ --radius-popup: 12px; /* lightbox image */ /* ------------------------------------------------------------------ 8. ELEVATION / SHADOWS ------------------------------------------------------------------ */ --shadow-glass-xl: 0 32px 64px rgb(var(--color-shadow-rgb) / 0.4); --shadow-pillar: 0 20px 40px rgb(var(--color-shadow-rgb) / 0.2); --shadow-article: 0 20px 50px rgb(var(--color-shadow-rgb) / 0.1); --shadow-article-hover: 0 40px 80px rgb(var(--color-shadow-rgb) / 0.2); --shadow-popup: 0 25px 50px -12px rgb(var(--color-shadow-rgb) / 0.5); --shadow-bubble: 0 8px 24px rgb(var(--color-shadow-rgb) / 0.25); --shadow-float: 0 8px 24px rgb(var(--color-shadow-rgb) / 0.3); --shadow-float-hover: 0 10px 28px rgb(var(--color-shadow-rgb) / 0.35); --shadow-glow-strong: 0 0 30px rgb(var(--color-glow-rgb) / 0.3); --shadow-glow-soft: 0 0 40px rgb(var(--color-glow-rgb) / 0.2); /* Text drop-shadows — keep copy readable on top of the Program Overview videos. Consumed by Tailwind's `drop-shadow-text-*` utilities. */ --shadow-text-xs: 0 2px 4px rgb(var(--color-shadow-rgb) / 0.9); --shadow-text-sm: 0 2px 6px rgb(var(--color-shadow-rgb) / 0.9); --shadow-text-md: 0 2px 8px rgb(var(--color-shadow-rgb) / 0.9); /* Ambient glow keyframe endpoints (Program Overview "Join the Movement") */ --shadow-ambient-min: 0 0 20px rgb(var(--color-secondary-rgb) / 0.1); --shadow-ambient-max: 0 0 40px rgb(var(--color-secondary-rgb) / 0.2); /* ------------------------------------------------------------------ 9. TRANSITIONS & EASING ------------------------------------------------------------------ */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* reveal / fade-up */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* scroll reveals */ --ease-cinematic: cubic-bezier(0.2, 0.8, 0.2, 1); /* mini-hero entrance */ --ease-back: cubic-bezier(0.68, -0.6, 0.32, 1.6); /* hamburger icon */ --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1); /* philosophy card */ --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease-in-out; --transition-reveal: 0.8s var(--ease-out-expo); /* ------------------------------------------------------------------ 10. Z-INDEX LAYERS ------------------------------------------------------------------ */ --z-hero-video: 0; --z-hero-scrim: 1; --z-hero-content: 2; --z-whatsapp-float: 998; --z-navbar: 1000; --z-navbar-toggle: 1001; --z-popup: 9999; /* ------------------------------------------------------------------ 11. COMPONENT-SPECIFIC SIZES ------------------------------------------------------------------ */ --navbar-top-offset: 20px; --navbar-width: min(92vw, 1280px); --ticker-duration: 60s; /* partner marquee loop speed */ --ticker-logo-height: 56px; --whatsapp-icon-size: 60px; --whatsapp-icon-size-mobile: 52px; /* Responsive breakpoint used by the navbar media query (documentation only — CSS media queries cannot read custom properties). */ --breakpoint-navbar: 1100px; }