/* ============================================================ THEME: Fourth Street Pizza Red — Dark (Template AG) 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 (from the 4th Street Pizza logo) ===== */ --gs-red: #e62429; /* Primary brand red — straight from the logo, unchanged */ --gs-red-dark: #811417; /* Deep red accent (hover, highlights) */ --gs-red-light: rgba(230, 36, 41, 0.15); /* Red light tint (icon circles, hover fills) */ /* ===== UI COLORS ===== */ --gs-dark: #f5efe9; /* Now a LIGHT tone: headings/foreground text on dark backgrounds */ --gs-dark-surface: #1a1a1a; /* Dedicated dark decorative/button/CTA surface (was --gs-dark's old value) */ --gs-surface: #1e1c1b; /* Card/panel background — sits just above the page background */ --gs-text: #d9d5d0; /* Body text */ --gs-text-light: #9c9691; /* Muted/secondary text, subtitles */ --gs-white: #ffffff; /* Kept as literal white — used for text/icons ON red or dark surfaces */ --gs-bg: #121110; /* Primary page background */ --gs-bg-alt: #19110f; /* Alternate section background (FAQ, etc.) */ --gs-cream: #221c19; /* Warm dark tone for card backgrounds (keeps the old warm undertone) */ --gs-border: #332c28; /* Borders, dividers */ --gs-border-light: #2a2422; /* Very subtle borders (FAQ items) */ /* ===== SHADOWS ===== */ --gs-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); --gs-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6); /* ===== 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.7); /* Darkens background image */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #e62429; /* Desktop nav background — brand red, unchanged */ --gs-nav-open-bg: rgba(10, 10, 10, 0.97); /* Mobile nav open state */ /* ===== BUTTONS ===== */ --gs-btn-radius: 4px; /* ===== FOOTER ===== */ --gs-footer-bg: #0e0e0e; --gs-footer-bar-bg: #1a1a1a; --gs-footer-text: #b9b9b9; /* ===== BRAND GLOW (shadow using primary color) ===== */ --gs-glow: rgba(230, 36, 41, 0.45); --gs-glow-dark: rgba(230, 36, 41, 0.55); --gs-glow-soft: rgba(230, 36, 41, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #fbbf24; /* Review/rating star gold (already pops on dark) */ --gs-faq-section-bg: #17130f; /* FAQ outer section background */ --gs-faq-container-bg: #1e1a17; /* FAQ inner container background */ /* ===== SEMANTIC ALIASES (shared gs- system tokens) ===== */ --gs-primary: #e62429; --gs-primary-dark: #811417; --gs-primary-light: rgba(230, 36, 41, 0.15); --gs-accent: #811417; --gs-accent-dark: #6a1113; --gs-accent-light: rgba(129, 20, 23, 0.2); /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #e62429; --primary-color-light: rgba(230, 36, 41, 0.12); --primary-color-dark: #b81d21; --text-dark: #1a1a1a; --text-light: #9c9691; --white: #ffffff; --main-color: #e62429; --bg-shade: #19110f; }