/* ============================================================ THEME: Basile's Royal Blue & Brand Red (from logo) Swap this file to change the entire visual appearance. DO NOT add layout, grid, flexbox, or spacing here. ONLY define CSS custom property tokens and decorative CSS. ============================================================ */ /* Load this theme's fonts in the HTML — NOT via @import */ :root { /* ===== BRAND COLORS ===== */ --gs-red: #2c2c77; /* Primary royal blue (logo wordmark #2c2c77) */ --gs-red-dark: #89161b; /* Brand red accent (logo "2 FOR 1" mark #89161b) */ --gs-red-light: rgba(44, 44, 119, 0.1); /* Blue light tint (icon circles, hover fills) */ /* ===== UI COLORS ===== */ --gs-dark: #1a1a1a; /* Near-black: headings */ --gs-text: #333333; /* Body text */ --gs-text-light: #6b7280; /* Muted/secondary text, subtitles */ --gs-white: #ffffff; --gs-bg: #fafafa; /* Primary page background */ --gs-bg-alt: #f5f5f5; /* Alternate section background (FAQ, etc.) */ --gs-cream: #fdf8f3; /* Warm tone for card backgrounds */ --gs-border: #e5e7eb; /* Borders, dividers */ --gs-border-light: #f0f0f0; /* Very subtle borders (FAQ items) */ /* ===== SHADOWS ===== */ --gs-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --gs-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Playfair Display', serif; --gs-font-body: 'Source Sans 3', sans-serif; --gs-heading-style: italic; --gs-heading-weight: 500; /* ===== HERO ===== */ --gs-hero-overlay: rgba(0, 0, 0, 0.55); /* Darkens background image */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #2c2c77; /* Desktop nav background */ --gs-nav-open-bg: rgba(21, 21, 21, 0.96); /* Mobile nav open state */ /* ===== BUTTONS ===== */ --gs-btn-radius: 4px; /* ===== FOOTER ===== */ --gs-footer-bg: #1f1f1f; --gs-footer-bar-bg: #2f2f2f; --gs-footer-text: #b9b9b9; /* ===== BRAND GLOW (shadow using primary color) ===== */ --gs-glow: rgba(44, 44, 119, 0.4); --gs-glow-dark: rgba(44, 44, 119, 0.5); --gs-glow-soft: rgba(44, 44, 119, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #fbbf24; /* Review/rating star gold */ --gs-faq-section-bg: #f5f5f5; /* FAQ outer section background */ --gs-faq-container-bg: #f8f8f8; /* FAQ inner container background */ /* ===== SEMANTIC ALIASES (shared gs- system tokens) ===== */ --gs-primary: #2c2c77; --gs-primary-dark: #1f1f5c; --gs-primary-light: rgba(44, 44, 119, 0.1); --gs-accent: #89161b; --gs-accent-dark: #6b1015; --gs-accent-light: rgba(137, 22, 27, 0.12); /* ===== ON-DARK BRAND TINTS ===== The deep logo blue/red are unreadable over the dark hero overlay (1.1-1.5:1). These light tints keep the brand hues at 7-8.5:1. */ --gs-on-dark-accent: #f4a7ab; /* light rose from #89161b - 7.2:1 on hero */ --gs-on-dark-primary: #c7c8f2; /* light periwinkle from #2c2c77 - 8.5:1 */ /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #2c2c77; --primary-color-light: #f7f7fc; --primary-color-dark: #89161b; --text-dark: #1a1a1a; --text-light: #6b7280; --white: #ffffff; --main-color: #89161b; --bg-shade: #f5f5f5; }