/** * ============================================================================= * MoodHera Events - CSS Variables (Design Tokens) * ============================================================================= * * Centralized design tokens for colors, spacing, typography, shadows, and more. * All theme colors and values should be defined here as CSS custom properties. * * @package MoodHera * @version 2.13.0 * @since 1.0.0 * @author MoodHera Events Team * * Structure: * - Brand Colors * - Gradient Stops * - Neutral Palette (Light/Dark) * - Header Colors * - Typography * - Spacing Scale * - Border Radius * - Shadows * - Z-Index * - Transitions * * Usage: * color: var(--moodhera-pink); * background: var(--header-bg-light); * * ============================================================================= */ :root { /* ========================================================================= BRAND COLORS Core MoodHera brand palette used throughout the site ========================================================================= */ --moodhera-pink: #ED297A; /* Primary brand color - hot pink */ --moodhera-purple: #5B1E6D; /* Secondary - deep purple */ --moodhera-cyan: #00B4E8; /* Accent - electric cyan */ --moodhera-lime: #B8DC20; /* Accent - lime green */ --moodhera-orange: #FF6A00; /* Accent - vibrant orange */ --moodhera-yellow: #FFB800; /* Accent - warm yellow */ --moodhera-deep-navy: #1a0033; /* Dark navy for text on light backgrounds */ /* ========================================================================= GRADIENT STOPS Linear gradient color combinations for sections Used in: Hero, Services, Events, Testimonials, CTA ========================================================================= */ --grad-hero-start: #ED297A; /* Hero section gradient start */ --grad-hero-end: #5B1E6D; /* Hero section gradient end */ --grad-servizi-start: #5B1E6D; /* Services section gradient start */ --grad-servizi-end: #00B4E8; /* Services section gradient end */ --grad-events-start: #00B4E8; /* Events section gradient start */ --grad-events-end: #B8DC20; /* Events section gradient end */ --grad-testimonials-start: #FF6A00; /* Testimonials section gradient start */ --grad-testimonials-end: #FFB800; /* Testimonials section gradient end */ --grad-cta-start: #B8DC20; /* CTA section gradient start */ --grad-cta-end: #ED297A; /* CTA section gradient end */ /* ========================================================================= NEUTRAL PALETTE - LIGHT MODE Base colors for backgrounds, surfaces, and text Soft tones to reduce eye strain - no pure whites or blacks ========================================================================= */ --color-bg-light: #fafbfc; /* Main page background */ --color-surface-light: #fefefe; /* Cards, panels - off-white (not pure white) */ --color-text-primary: #334155; /* Primary text - medium dark gray (not black) */ --color-text-secondary: #64748b; /* Secondary text, lighter gray */ --color-border-light: rgba(0,0,0,.06); /* Borders - very subtle */ /* ========================================================================= NEUTRAL PALETTE - DARK MODE Dark theme colors Soft tones to reduce eye strain ========================================================================= */ --color-bg-dark: #2a2d32; /* Dark mode main background (slate-900) */ --color-surface-dark: #2d3748; /* Dark mode cards - lighter slate */ --color-text-dark: #e2e8f0; /* Dark mode text - soft light gray (not pure white) */ --color-text-muted-dark: #94A3B8; /* Dark mode secondary text (slate-400) */ --color-border-dark: rgba(255,255,255,.08); /* Dark mode borders - subtle */ /* ========================================================================= HEADER COLORS - LIGHT MODE Colors specific to site header navigation Soft tones to reduce eye strain - no absolute whites or blacks ========================================================================= */ --header-bg-light: rgba(252,252,253,.93); /* Header background - standard pages (soft white) */ --header-bg-light-hero: rgba(250,251,252,.90); /* Header background - hero pages (more transparent) */ --header-text-light: rgba(71,85,105,.75); /* Header text - medium gray (not too dark) */ --header-border-light: rgba(0,0,0,.05); /* Header border - very subtle */ --header-shadow-light: rgba(0,0,0,.03); /* Header shadow - minimal */ --header-hover-light: var(--moodhera-pink); /* Link hover state */ --header-mobile-bg-light: rgba(42,50,68,.92); /* Mobile hamburger menu (softer) */ /* ========================================================================= HEADER COLORS - DARK MODE Dark theme header colors Soft tones to reduce eye strain - no absolute blacks or whites ========================================================================= */ --header-bg-dark: rgba(42,52,70,.94); /* Header background - softer dark slate */ --header-bg-dark-hero: rgba(35,40,55,.88); /* Header background - hero pages (not too black) */ --header-text-dark: rgba(226,232,240,.88); /* Header text - soft light gray (not pure white) */ --header-text-dark-hero: rgba(240,245,250,.85); /* Header text on hero (softer) */ --header-border-dark: rgba(255,255,255,.06); /* Header border - very subtle */ --header-border-dark-hero: rgba(255,255,255,.04); /* Header border - hero pages (extra subtle) */ --header-hover-dark: #F472B6; /* Link hover - standard (pink-400) */ --header-hover-dark-hero: #a78bfa; /* Link hover - hero pages (violet-400) */ --header-mobile-bg-dark: rgba(240,245,250,.88); /* Mobile hamburger (softer) */ --header-mobile-menu-bg: rgba(35,40,55,.95); /* Mobile flyout menu (softer) */ /* ========================================================================= TYPOGRAPHY Font families and text settings Using system fonts for optimal performance and eye comfort ========================================================================= */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Headings use clean system font */ --font-header: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Header menu - clean system font */ --font-weight-header: 400; /* Header font weight - regular (not too bold) */ --font-weight-heading: 600; /* Headings weight - semi-bold for clarity */ /* ========================================================================= SPACING SCALE Consistent spacing values using 8px base unit ========================================================================= */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* ========================================================================= BORDER RADIUS Consistent corner rounding ========================================================================= */ --radius-sm: 0.375rem; /* 6px - Small elements */ --radius-md: 0.5rem; /* 8px - Default */ --radius-lg: 0.75rem; /* 12px - Cards */ --radius-xl: 1rem; /* 16px - Large panels */ --radius-2xl: 1.5rem; /* 24px - Hero cards */ --radius-full: 9999px; /* Fully rounded (pills) */ /* ========================================================================= SHADOWS - LIGHT MODE Elevation and depth effects ========================================================================= */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); /* Subtle border-like */ --shadow-sm: 0 2px 4px rgba(0,0,0,.06); /* Slight lift */ --shadow-md: 0 4px 12px rgba(0,0,0,.08); /* Card hover */ --shadow-lg: 0 8px 24px rgba(0,0,0,.10); /* Modal, dropdown */ --shadow-xl: 0 16px 48px rgba(0,0,0,.12); /* Hero elements */ /* ========================================================================= Z-INDEX SCALE Layering order for positioned elements ========================================================================= */ --z-base: 0; /* Default/document flow */ --z-dropdown: 100; /* Dropdowns, tooltips */ --z-sticky: 200; /* Sticky elements */ --z-fixed: 300; /* Fixed header/footer */ --z-modal: 400; /* Modal dialogs */ --z-popover: 500; /* Popovers above modals */ --z-tooltip: 600; /* Tooltips highest */ /* ========================================================================= LAYOUT DIMENSIONS Site-wide layout measurements ========================================================================= */ --moodhera-header-height: 80px; /* Fixed header height */ /* ========================================================================= TRANSITIONS Animation timing functions ========================================================================= */ --transition-fast: 150ms ease; /* Quick UI feedback */ --transition-base: 250ms ease; /* Default transitions */ --transition-slow: 350ms ease; /* Deliberate animations */ --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Smooth, polished feel */ } /* ============================================================================= DARK MODE VARIABLE OVERRIDES Shadows need adjustment in dark mode for proper visibility ============================================================================= */ [data-theme="dark"] { /* Darker, more pronounced shadows for dark backgrounds */ --shadow-xs: 0 1px 2px rgba(0,0,0,.3); --shadow-sm: 0 2px 4px rgba(0,0,0,.4); --shadow-md: 0 8px 30px rgba(0,0,0,.5); --shadow-lg: 0 20px 60px rgba(0,0,0,.6); --shadow-xl: 0 25px 80px rgba(0,0,0,.7); } /* ============================================================================= GLOBAL DARK MODE BODY STYLES Apply dark mode colors to body element ============================================================================= */ [data-theme="dark"] body { color: var(--color-text-dark) !important; background-color: var(--color-bg-dark) !important; }