/* ============================================================ THEME: Kings Pizza And Wings — Orange, Purple & Red Palette sampled directly from assets/logo/logo.webp: #ec7f13 orange (40.6% of logo — background field) #2e1153 purple (crown + lower banner) #b12c25 red (KINGS banner) #ffffff white (wordmark) Role assignment is contrast-driven (WCAG AA, white text): purple 15.89:1 -> nav + footer surfaces red 6.45:1 -> primary actions, links, accents orange 2.76:1 -> FAILS with white text, so it is used only as a decorative accent / hover tint, never as a background behind small white type. 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: #b12c25; /* Primary red (logo banner) */ --gs-red-dark: #8e231e; /* Darker red: hover backgrounds + accent text */ --gs-red-light: rgba(236, 127, 19, 0.14); /* Orange tint: icon circles, avatars, chips */ /* ===== 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: #fdf6ec; /* Warm tone for card backgrounds (orange-tinted) */ --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(30, 10, 55, 0.72); /* Purple-tinted scrim over hero photo (white text 7.46:1 worst case) */ --gs-hero-accent: #ffc87d; /* Lightened logo orange: readable ON the dark hero (4.91:1) */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #2e1153; /* Desktop nav background (logo purple) */ --gs-nav-open-bg: rgba(46, 17, 83, 0.97); /* Mobile nav open state */ /* ===== BUTTONS ===== */ --gs-btn-radius: 4px; /* ===== FOOTER ===== */ --gs-footer-bg: #2a1049; --gs-footer-bar-bg: #3b1a68; --gs-footer-text: #cfc4dd; /* ===== BRAND GLOW (shadow using primary color) ===== */ --gs-glow: rgba(177, 44, 37, 0.4); --gs-glow-dark: rgba(177, 44, 37, 0.5); --gs-glow-soft: rgba(177, 44, 37, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #ec7f13; /* Review/rating stars (logo orange) */ --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: #b12c25; --gs-primary-dark: #8e231e; --gs-primary-light: rgba(236, 127, 19, 0.14); --gs-accent: #ec7f13; --gs-accent-dark: #c96a0d; --gs-accent-light: rgba(236, 127, 19, 0.15); /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #b12c25; --primary-color-light: #fffcfa; --primary-color-dark: #8e231e; --text-dark: #1a1a1a; --text-light: #6b7280; --white: #ffffff; --main-color: #ec7f13; --bg-shade: #f5f5f5; }