/* ============================================================ THEME: Village Pot — Black & Gold Palette taken straight from the logo (assets/logo/logo.webp): pure black ground with a vivid gold (#ffd703, H50 S99 V100). 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. NOTE ON --gs-primary IN A DARK SKIN In the previous light skin, "primary" was the dark brand colour that stood out against a parchment page. Every consumer of --gs-primary in style.css plays that same role — the thing that must pop against the page (scrollbar thumb, outline-button hover fill, inline-link hover, menu underline, active state, item price). On a black page that role is the gold, so --gs-primary is gold here, while --gs-primary-dark / -deep stay near-black because they are used as feature-panel backgrounds. ============================================================ */ /* Load this theme's fonts in the HTML — NOT via @import */ /* Fonts: Cormorant Garamond (display serif) + Outfit (body sans) */ :root { /* ===== BRAND COLORS ===== */ --gs-primary: #ffd703; /* Logo gold — stands against the black page */ --gs-primary-dark: #000000; /* Pure black (feature panels, CTA bands) */ --gs-primary-deep: #000000; /* Deepest black (footer bar) */ --gs-primary-light: rgba(255, 215, 3, 0.10); /* Gold tint (icon circles, fills) */ /* ===== ACCENT ===== */ --gs-accent: #ffd703; /* Logo gold — sampled from logo.webp */ --gs-accent-bright: #ffe45c; /* Light gold (highlights on black) */ --gs-accent-dark: #e8c400; /* Deeper gold (hover fills, label text) */ --gs-accent-light: rgba(255, 215, 3, 0.13); /* Gold tint */ /* ===== UI COLORS ===== */ --gs-dark: #f7f3e6; /* Warm ivory: headings (light on black) */ --gs-text: #cec9ba; /* Body text */ --gs-text-light: #979181; /* Muted/secondary text */ --gs-white: #ffffff; --gs-bg: #0d0d0d; /* Page background */ --gs-bg-alt: #141414; /* Alt sections */ --gs-cream: #1a1a1a; /* Card surfaces (raised off the page) */ --gs-border: rgba(255, 215, 3, 0.16); /* Gold-tinted hairline borders */ --gs-border-light: rgba(255, 255, 255, 0.07); /* Very subtle borders */ --gs-border-gold: rgba(255, 215, 3, 0.42); /* Gold hairlines */ /* ===== ON-DARK COLORS ===== */ --gs-dark-text: #cec9ba; /* Body text on black panels */ --gs-dark-text-soft: #979181; /* Muted text on black panels */ --gs-dark-heading: #f7f3e6; /* Headings on black panels */ --gs-dark-border: rgba(255, 215, 3, 0.30); /* Gold hairline on black */ /* ===== SHADOWS ===== */ /* Shadows read weakly on black, so depth comes mostly from the surface ladder (#000 panels / #0d0d0d page / #1a1a1a cards) plus gold hairlines. These stay for edge definition. */ --gs-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 34px rgba(0, 0, 0, 0.65); --gs-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.55), 0 24px 54px rgba(0, 0, 0, 0.75); --gs-shadow-gold: 0 10px 30px rgba(255, 215, 3, 0.28); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --gs-font-body: 'Outfit', 'Segoe UI', sans-serif; --gs-heading-style: normal; --gs-heading-weight: 600; /* ===== HERO ===== */ --gs-hero-overlay: linear-gradient( 180deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.52) 45%, rgba(0, 0, 0, 0.82) 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(0, 0, 0, 0.92); --gs-nav-open-bg: #000000; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== FOOTER ===== */ --gs-footer-bg: #050505; --gs-footer-bar-bg: #000000; --gs-footer-text: #979181; /* ===== BRAND GLOW ===== */ --gs-glow: rgba(255, 215, 3, 0.34); --gs-glow-dark: rgba(255, 215, 3, 0.42); --gs-glow-soft: rgba(255, 215, 3, 0.22); /* ===== DECORATIVE ===== */ --gs-star-color: #ffd703; --gs-faq-section-bg: #141414; --gs-faq-container-bg: #1a1a1a; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced by legacy selectors */ --primary-color: #ffd703; --primary-color-light: #141414; --primary-color-dark: #000000; --text-dark: #f7f3e6; --text-light: #979181; --white: #ffffff; --main-color: #ffd703; --bg-shade: #141414; }