/* ========================================================================== XPLOROO · Design Foundation variables.css — Global design tokens (:root custom properties) -------------------------------------------------------------------------- Visual theme: dark, premium, immersive "experiential travel" aesthetic. Inspired by the Fandiem design language — near-black cool-toned canvas, layered surfaces, a signature violet → magenta gradient, neon glows, glassmorphic panels, fully-rounded pill controls and soft rounded cards. This file defines tokens ONLY. Never hard-code a color, size, radius or timing anywhere else — always reference a token from here so the entire platform can be re-themed from a single source of truth. ========================================================================== */ :root { /* ====================================================================== 1. COLOR — RAW PALETTE (primitive scales) Reference these to build semantic tokens; avoid using raw scales directly in components. ====================================================================== */ /* Brand · Violet (primary) */ --violet-50: #f3effe; --violet-100: #e5dbfd; --violet-200: #c9b5fb; --violet-300: #ab8bf7; --violet-400: #9163f1; --violet-500: #7c3aed; /* core primary */ --violet-600: #6d28d9; --violet-700: #5b21b6; --violet-800: #4a1d95; --violet-900: #2e1065; /* Brand · Magenta / Pink (secondary) */ --magenta-50: #fdf0f8; --magenta-100: #fbdcf0; --magenta-200: #f8b9e1; --magenta-300: #f486cd; --magenta-400: #ef54b4; --magenta-500: #ec4899; /* core secondary */ --magenta-600: #d6277f; --magenta-700: #b01a66; --magenta-800: #8c1852; --magenta-900: #611038; /* Accent · Cyan / Teal (tertiary — "GAIN ENTRIES" ticket) */ --cyan-50: #ecfeff; --cyan-100: #cff9fe; --cyan-200: #a3f1fb; --cyan-300: #67e4f4; --cyan-400: #22d3ee; /* core accent */ --cyan-500: #0bb8d6; --cyan-600: #0894b3; --cyan-700: #0e7690; --cyan-800: #155e75; --cyan-900: #164e63; /* Accent · Coral (warm — "DONATE" ticket) */ --coral-400: #ff7a7a; --coral-500: #fb5a5a; --coral-600: #e23b3b; /* Neutrals · cool near-black → white ramp (canvas & text) */ --ink-950: #08080c; /* deepest canvas */ --ink-900: #0c0c12; --ink-850: #101018; --ink-800: #14141d; --ink-750: #191922; --ink-700: #1f1f2b; --ink-600: #2a2a38; --ink-500: #3a3a4c; --ink-400: #55556b; --ink-300: #7a7a92; --ink-200: #a1a1b5; --ink-100: #cbcbd8; --ink-50: #eaeaf1; --white: #ffffff; --black: #000000; /* Feedback / status */ --success-500: #22c55e; --warning-500: #f59e0b; --danger-500: #ef4444; --info-500: #3b82f6; /* ====================================================================== 2. COLOR — SEMANTIC TOKENS (use these in components) ====================================================================== */ /* Brand */ --color-primary: var(--violet-500); --color-primary-hover: var(--violet-400); --color-primary-active: var(--violet-600); --color-primary-subtle: rgba(124, 58, 237, 0.14); --color-secondary: var(--magenta-500); --color-secondary-hover: var(--magenta-400); --color-secondary-active: var(--magenta-600); --color-secondary-subtle: rgba(236, 72, 153, 0.14); --color-accent: var(--cyan-400); --color-accent-hover: var(--cyan-300); --color-accent-subtle: rgba(34, 211, 238, 0.14); --color-warm: var(--coral-500); /* Text */ --color-text: var(--ink-50); /* default body text */ --color-text-strong: var(--white); /* headings / emphasis */ --color-text-muted: var(--ink-200); /* secondary copy */ --color-text-subtle: var(--ink-300); /* captions / meta */ --color-text-disabled: var(--ink-400); --color-text-inverse: var(--ink-900); /* text on light fills */ --color-text-on-primary: var(--white); --color-link: var(--violet-300); --color-link-hover: var(--magenta-300); /* Surfaces (elevation layers over the canvas) */ --color-bg: #000000; /* page canvas — pure black, flat throughout */ --color-surface: var(--ink-850); /* base card / panel */ --color-surface-2: var(--ink-800); /* raised surface */ --color-surface-3: var(--ink-750); /* popovers / menus */ --color-surface-inset: var(--ink-900); /* wells / inputs bg */ --color-surface-hover: var(--ink-700); /* Premium bordered panels (About/Footer/Recent Winners containers, and the Trending Packages / Ending Soon / Travel Stories cards) — deliberately pure black in dark mode; themed to pure white in light mode below. */ --surface-panel: #000000; /* Borders & dividers (alpha so they read on any surface) */ --color-border: rgba(255, 255, 255, 0.32); --color-border-strong: rgba(255, 255, 255, 0.45); --color-border-subtle: rgba(255, 255, 255, 0.04); --color-border-brand: rgba(124, 58, 237, 0.55); --color-divider: rgba(255, 255, 255, 0.06); /* Overlays & scrims */ --color-overlay: rgba(6, 6, 12, 0.72); --color-overlay-soft: rgba(6, 6, 12, 0.45); --color-backdrop-blur: 14px; /* Feedback semantic */ --color-success: var(--success-500); --color-warning: var(--warning-500); --color-danger: var(--danger-500); --color-info: var(--info-500); /* Focus ring color */ --color-focus: var(--violet-400); /* ====================================================================== 3. GRADIENTS ====================================================================== */ --gradient-brand: linear-gradient(135deg, var(--magenta-500) 0%, var(--violet-500) 100%); --gradient-brand-hover: linear-gradient(135deg, var(--magenta-400) 0%, var(--violet-400) 100%); --gradient-brand-vivid: linear-gradient(120deg, #ff4fb0 0%, #b23cf0 50%, #6d28d9 100%); --gradient-accent: linear-gradient(135deg, var(--cyan-400) 0%, var(--violet-500) 100%); --gradient-sunset: linear-gradient(120deg, var(--coral-500) 0%, var(--magenta-500) 55%, var(--violet-500) 100%); --gradient-text: linear-gradient(90deg, #f486cd 0%, #ab8bf7 100%); /* Ambient page/aura background — intentionally disabled. The canvas is a single flat black from Hero to Footer; no decorative page-level wash. */ --gradient-aura: none; --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%); --gradient-hairline: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); /* ====================================================================== 4. TYPOGRAPHY Display / headings: "Sora" (heavy geometric grotesque) Body / UI: "Inter" Numeric / labels: "Space Grotesk" (tabular, ticket-style figures) ====================================================================== */ --font-display: "Sora", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Grotesk", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Font sizes — fluid modular scale (~1.2 minor third), clamp for responsiveness */ --fs-2xs: 0.6875rem; /* 11px micro labels */ --fs-xs: 0.75rem; /* 12px captions */ --fs-sm: 0.875rem; /* 14px small / meta */ --fs-base: 1rem; /* 16px body */ --fs-md: 1.125rem; /* 18px lead body */ --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20→24 subheading */ --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24→32 h4 */ --fs-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem); /* 30→44 h3 */ --fs-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem); /* 36→60 h2 */ --fs-4xl: clamp(2.75rem, 1.9rem + 4vw, 5rem); /* 44→80 h1 */ --fs-5xl: clamp(3.5rem, 2.2rem + 6vw, 6.5rem); /* 56→104 hero display */ /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Line heights */ --lh-none: 1; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Letter spacing */ --ls-tighter: -0.03em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; --ls-widest: 0.14em; /* uppercase eyebrows / tags */ /* Paragraph max measure */ --measure: 68ch; /* ====================================================================== 5. SPACING — 8px base scale (with 4px half-steps) ====================================================================== */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ /* Section rhythm */ --section-gap: clamp(2.2rem, 1.6rem + 3.1vw, 4.7rem); /* ~37% smaller, was clamp(3.5rem, 2.5rem + 5vw, 7.5rem) */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* ====================================================================== 6. BORDER RADIUS ====================================================================== */ --radius-xs: 0.25rem; /* 4px */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px default card */ --radius-xl: 1.25rem; /* 20px */ --radius-2xl: 1.5rem; /* 24px large panels */ --radius-3xl: 2rem; /* 32px hero container */ --radius-pill: 999px; /* fully rounded controls */ --radius-full: 50%; /* circles / avatars */ /* ====================================================================== 7. SHADOWS (elevation) ====================================================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.48); --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 32px rgba(0, 0, 0, 0.45); /* ====================================================================== 8. GLOW (neon accent halos) ====================================================================== */ --glow-primary: 0 0 0 1px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(124, 58, 237, 0.45); --glow-secondary: 0 0 0 1px rgba(236, 72, 153, 0.35), 0 8px 32px rgba(236, 72, 153, 0.45); --glow-accent: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 8px 32px rgba(34, 211, 238, 0.40); --glow-brand: 0 10px 40px rgba(180, 60, 200, 0.45); --glow-soft: 0 0 24px rgba(124, 58, 237, 0.30); --glow-strong: 0 0 48px rgba(236, 72, 153, 0.45); --glow-focus: 0 0 0 4px rgba(124, 58, 237, 0.35); /* ====================================================================== 9. GLASSMORPHISM ====================================================================== */ --glass-bg: rgba(20, 20, 29, 0.55); --glass-bg-strong: rgba(20, 20, 29, 0.78); --glass-bg-light: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.32); --glass-highlight: rgba(255, 255, 255, 0.10); --glass-blur: 16px; --glass-blur-strong: 28px; --glass-saturate: 140%; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); /* ====================================================================== 10. BACKGROUND SYSTEM ====================================================================== */ --bg-canvas: var(--color-bg); --bg-image-aura: var(--gradient-aura); --bg-grid: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); --bg-grid-size: 64px 64px; --bg-noise-opacity: 0.03; /* ====================================================================== 11. LAYOUT — container widths & breakpoints Breakpoints are documented here as tokens; media queries live in the stylesheets that consume them (custom media not universally supported). xs < 480px sm ≥ 480px md ≥ 768px lg ≥ 1024px xl ≥ 1280px 2xl ≥ 1536px ====================================================================== */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* default site container */ --container-2xl: 1360px; --container-max: 1520px; /* wide / hero shells */ --container-pad: var(--gutter); /* ====================================================================== 12. MOTION — transitions & easing ====================================================================== */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate / entrances */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */ --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-slower: 560ms; --transition-base: all var(--dur-base) var(--ease-standard); --transition-colors: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); --transition-transform: transform var(--dur-base) var(--ease-out); /* ====================================================================== 13. COMPONENT TOKENS (shared control sizing) ====================================================================== */ --control-height-sm: 2.25rem; /* 36px */ --control-height: 2.75rem; /* 44px */ --control-height-lg: 3.25rem; /* 52px */ --control-pad-x: 1.25rem; --field-bg: var(--color-surface-inset); --field-border: var(--color-border); --field-radius: var(--radius-md); /* ====================================================================== 14. Z-INDEX SCALE ====================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-max: 9999; /* Global smooth-scroll offset for sticky header */ --scroll-offset: 88px; } /* ============================================================================ LIGHT THEME — activated by [data-theme="light"] on (see header.js). Dark is the default (no attribute needed). Every component already reads colors from these semantic tokens, so re-declaring them here re-themes the entire site — header, hero, trending packages, ending soon, recent winners, about us, travel stories and footer — from one source of truth. Anything not re-declared (brand hues, gradients, shadows, glows, spacing, radii, motion) stays identical in both themes on purpose. ============================================================================ */ :root[data-theme="light"] { /* Text */ --color-text: #1c1c22; --color-text-strong: #000000; --color-text-muted: #55555f; --color-text-subtle: #75757f; --color-text-disabled: #a6a6ae; --color-text-inverse: var(--white); --color-link: var(--violet-600); --color-link-hover: var(--magenta-600); /* Surfaces */ --color-bg: #ffffff; --color-surface: #f4f4f6; --color-surface-2: #ececef; --color-surface-3: #e3e3e8; --color-surface-inset: #eef0f3; --color-surface-hover: #e6e6ea; --surface-panel: #ffffff; /* Borders & dividers — dark-alpha so they read on a light surface */ --color-border: rgba(17, 17, 23, 0.16); --color-border-strong: rgba(17, 17, 23, 0.30); --color-border-subtle: rgba(17, 17, 23, 0.06); --color-divider: rgba(17, 17, 23, 0.08); /* Overlays stay dark in both themes (scrims dim content, regardless of the surface underneath) */ --color-overlay: rgba(6, 6, 12, 0.55); --color-overlay-soft: rgba(6, 6, 12, 0.32); /* Glassmorphism — light-surface glass instead of dark-surface glass */ --glass-bg: rgba(255, 255, 255, 0.6); --glass-bg-strong: rgba(255, 255, 255, 0.82); --glass-bg-light: rgba(17, 17, 23, 0.04); --glass-border: rgba(17, 17, 23, 0.16); --glass-highlight: rgba(255, 255, 255, 0.5); /* Shadows are tuned for a light canvas — softer, lower-alpha so cards don't look muddy on white */ --shadow-xs: 0 1px 2px rgba(17, 17, 23, 0.08); --shadow-sm: 0 2px 6px rgba(17, 17, 23, 0.08); --shadow-md: 0 8px 24px rgba(17, 17, 23, 0.10); --shadow-lg: 0 18px 48px rgba(17, 17, 23, 0.14); --shadow-xl: 0 32px 80px rgba(17, 17, 23, 0.18); --shadow-inset: inset 0 1px 0 rgba(17, 17, 23, 0.04); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 32px rgba(17, 17, 23, 0.12); } /* Respect users who prefer reduced motion — collapse durations globally. (Individual animations should still guard with their own media query.) */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }