/* ============================================================ THEME: A+ Buffet Sushi & Bar — Brand Purple & Gold 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: #6a0b53; /* Primary brand purple (from A+ logo) */ --gs-red-dark: #8b1a6b; /* Vivid purple (hover, highlights) */ --gs-red-light: rgba(106, 11, 83, 0.1); /* Purple 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: #fbf4f9; /* Soft purple 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.62); /* Darkens background image */ /* Hero text sits on a dark photo, so the deep brand purple is unreadable there. These "on-dark" tokens use the brand gold + white for AA/AAA contrast. */ --gs-hero-accent: #f2d24b; /* Gold accent: h1 accent, dividers, stat values */ --gs-hero-accent-soft: rgba(242, 210, 75, 0.45); /* Gold at low opacity: borders, decorative rings */ --gs-hero-heading: #ffffff; /* Hero headings */ --gs-hero-text: rgba(255, 255, 255, 0.92);/* Hero paragraph text */ --gs-hero-muted: rgba(255, 255, 255, 0.85);/* Hero stat labels / secondary text */ --gs-hero-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.8), 0 4px 18px rgba(0, 0, 0, 0.7); /* Layered: crisp edge + wide halo to lift text off busy photos */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #6a0b53; /* 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(106, 11, 83, 0.4); --gs-glow-dark: rgba(106, 11, 83, 0.5); --gs-glow-soft: rgba(106, 11, 83, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #efce3c; /* 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: #6a0b53; --gs-primary-dark: #4e0733; --gs-primary-light: rgba(106, 11, 83, 0.1); --gs-accent: #efce3c; --gs-accent-dark: #c79a16; --gs-accent-light: rgba(239, 206, 60, 0.15); /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #6a0b53; --primary-color-light: #fbf4f9; --primary-color-dark: #8b1a6b; --text-dark: #1a1a1a; --text-light: #6b7280; --white: #ffffff; --main-color: #6a0b53; --bg-shade: #f5f5f5; }