/* ============================================================ THEME: City South Pizza — Winnipeg Brand palette derived from the restaurant's real storefront sign and logo: royal blue "CITY SOUTH" wordmark + red "PIZZA" wordmark, maple-leaf accent (Canadiana motif), on white. Swap this file to re-skin the entire site. DO NOT add layout, grid, flexbox, or spacing here. ONLY define CSS custom property tokens and decorative values. ============================================================ */ /* Load this theme's fonts in the HTML — NOT via @import */ /* Fonts: Cormorant Garamond (display serif) + Outfit (body sans) */ :root { /* ===== BRAND COLORS ===== */ --gs-primary: #283593; /* Royal blue — from "CITY SOUTH" wordmark */ --gs-primary-dark: #1a237e; /* Darker blue (hover, panels) */ --gs-primary-deep: #10164f; /* Deepest blue (footer bar) */ --gs-primary-light: rgba(40, 53, 147, 0.08); /* Blue tint (icon circles, fills) */ /* ===== ACCENT ===== */ /* Chili red is the ACTION colour. If it is red, it does something. */ --gs-accent: #c62828; /* Red — from "PIZZA" wordmark */ --gs-accent-bright: #e53935; /* Bright red (on dark surfaces) */ --gs-accent-dark: #b71c1c; /* Deep red (hover, text on light) */ --gs-accent-light: rgba(198, 40, 40, 0.13); /* Red tint */ /* ===== SAFFRON (highlight only — never a button) ===== */ --gs-saffron: #e8a33d; /* Turmeric — eyebrows, stars, heat */ --gs-saffron-deep: #b97c14; /* Saffron text on cream */ --gs-saffron-light: rgba(232, 163, 61, 0.15); /* Saffron tint */ /* ===== SPICE DIAL ===== */ --gs-heat-1: #e8a33d; /* Mild */ --gs-heat-2: #dd6a20; /* Medium */ --gs-heat-3: #c62828; /* Hot */ /* ===== UI COLORS ===== */ --gs-dark: #1b2427; /* Ink: headings */ --gs-text: #3c474b; /* Body text */ --gs-text-light: #67757a; /* Muted/secondary text */ --gs-white: #ffffff; --gs-bg: #fbf7f0; /* Parchment page background */ --gs-bg-alt: #f2ebdc; /* Deeper parchment (alt sections) */ --gs-cream: #fffdf8; /* Card surfaces */ --gs-border: rgba(27, 36, 39, 0.12); /* Hairline borders */ --gs-border-light: rgba(27, 36, 39, 0.07); /* Very subtle borders */ --gs-border-gold: rgba(198, 40, 40, 0.38); /* Red hairlines */ /* ===== ON-DARK COLORS ===== */ --gs-dark-text: #d9dcef; /* Body text on navy */ --gs-dark-text-soft: #a8adcf; /* Muted text on navy */ --gs-dark-heading: #f4efe4; /* Headings on navy */ --gs-dark-border: rgba(229, 57, 53, 0.22); /* Red hairline on navy */ /* ===== SHADOWS ===== */ --gs-shadow: 0 2px 6px rgba(16, 22, 79, 0.05), 0 14px 34px rgba(16, 22, 79, 0.09); --gs-shadow-hover: 0 4px 10px rgba(16, 22, 79, 0.07), 0 24px 54px rgba(16, 22, 79, 0.16); --gs-shadow-gold: 0 10px 30px rgba(198, 40, 40, 0.28); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --gs-font-body: 'Outfit', 'Segoe UI', sans-serif; /* Display face for the redesigned homepage. Pages opt in by setting --gs-font-heading to this token, and must load Fraunces in their . */ --gs-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --gs-heading-style: normal; --gs-heading-weight: 600; /* ===== HERO ===== */ --gs-hero-overlay: linear-gradient( 180deg, rgba(16, 22, 79, 0.62) 0%, rgba(16, 22, 79, 0.44) 45%, rgba(16, 22, 79, 0.72) 100% ); /* ===== TEXTURE ===== */ /* Fine film grain, layered over heroes and dark panels */ --gs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 85px; --gs-nav-height-mobile: 72px; --gs-nav-bg: rgba(26, 35, 126, 0.94); --gs-nav-open-bg: #1a237e; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== FOOTER ===== */ --gs-footer-bg: #1a237e; --gs-footer-bar-bg: #10164f; --gs-footer-text: #a8adcf; /* ===== BRAND GLOW ===== */ --gs-glow: rgba(40, 53, 147, 0.4); --gs-glow-dark: rgba(40, 53, 147, 0.5); --gs-glow-soft: rgba(40, 53, 147, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #c62828; --gs-faq-section-bg: #f2ebdc; --gs-faq-container-bg: #fffdf8; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced by legacy selectors */ --primary-color: #283593; --primary-color-light: #faf6ee; --primary-color-dark: #1a237e; --text-dark: #1b2427; --text-light: #67757a; --white: #ffffff; --main-color: #c62828; --bg-shade: #f2ebdc; }