/* ============================================================ THEME: Royal Taste (Royal Taste Chinese Cuisine 粤食粤美 2.0) Palette sampled from assets/logo/logo.webp. Of the mark's fully opaque, saturated pixels: red 42.7% (median #ea1b24 -> --gs-primary #e71d25), gold 31.9% across the "2.0" roundel and swoosh (median #f8c734 -> --gs-accent #efc132). The wordmark's own bulk is black (12,971 px) on an 84.8% transparent canvas, which is why the nav and footer are light: the mark needs a pale ground to sit on. The logo's minor initial-cap colours — blue #0f3fb6, green #217a04, magenta #d71578 — are deliberately left out of the UI palette; promoting five hues would read as noise, not brand. 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: #e71d25; /* Brand red — from the logo characters (4.56:1 on white) */ --gs-primary-dark: #c4191f; /* Deeper red (hover, panels) — 5.99:1 on white */ --gs-primary-deep: #8f1116; /* Deepest red (footer bar, nav) — 9.29:1 on white */ --gs-primary-light: rgba(231, 29, 37, 0.08); /* Red tint (icon circles, fills) */ /* ===== ACCENT ===== */ --gs-accent: #efc132; /* Brand gold — the 2.0 roundel & swoosh */ --gs-accent-bright: #f7d768; /* Bright gold (on dark surfaces) */ --gs-accent-dark: #9a6f06; /* Deep gold (hover, text on light) — 4.52:1 on white */ --gs-accent-light: rgba(239, 193, 50, 0.15); /* Gold tint */ /* ===== UI COLORS ===== */ --gs-dark: #1c1a1a; /* Ink: headings */ --gs-text: #45403f; /* Body text */ --gs-text-light: #726b6a; /* Muted/secondary text */ --gs-white: #ffffff; --gs-bg: #fdf9f5; /* Warm ivory page background */ --gs-bg-alt: #f6ece3; /* Deeper sand (alt sections) */ --gs-cream: #fffdfb; /* Card surfaces */ --gs-border: rgba(28, 26, 26, 0.12); /* Hairline borders */ --gs-border-light: rgba(28, 26, 26, 0.07); /* Very subtle borders */ --gs-border-gold: rgba(239, 193, 50, 0.40); /* Gold hairlines */ /* ===== ON-DARK COLORS ===== */ --gs-dark-text: #f0cfd0; /* Body text on deep red */ --gs-dark-text-soft: #dcaeb0; /* Muted text on deep red */ --gs-dark-heading: #fff6f0; /* Headings on deep red */ --gs-dark-border: rgba(239, 193, 50, 0.26); /* Gold hairline on deep red */ /* ===== SHADOWS ===== */ --gs-shadow: 0 2px 6px rgba(60, 12, 14, 0.06), 0 14px 34px rgba(60, 12, 14, 0.10); --gs-shadow-hover: 0 4px 10px rgba(60, 12, 14, 0.08), 0 24px 54px rgba(60, 12, 14, 0.17); --gs-shadow-gold: 0 10px 30px rgba(239, 193, 50, 0.30); /* ===== 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(66, 8, 11, 0.64) 0%, rgba(66, 8, 11, 0.46) 45%, rgba(66, 8, 11, 0.74) 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 ===== Light surface. The brand mark is a black wordmark on transparency, so it is given the warm ivory it was drawn for and sits on the bar natively — no white plate, no ring. Red moves to the links' active/hover state. */ --gs-nav-height: 85px; --gs-nav-height-mobile: 72px; --gs-nav-bg: rgba(253, 249, 245, 0.92); /* ivory, translucent for the blur */ --gs-nav-open-bg: #fdf9f5; /* solid ivory — mobile drawer */ --gs-nav-text: #45403f; /* links — 9.74:1 on ivory */ --gs-nav-text-hover: #8f1116; /* deepest red — 8.87:1 */ --gs-nav-active: #c4191f; /* brand red, active + underline — 5.72:1 */ --gs-nav-border: rgba(28, 26, 26, 0.10); /* hairline under the bar */ --gs-nav-rule: rgba(143, 17, 22, 0.14); /* drawer item dividers */ /* The global .btn is solid gold, which popped on the old red bar but goes soft on ivory (1.7:1 against it). The nav CTA switches to brand red so the primary action still commands the bar. White on it is 5.99:1. */ --gs-nav-cta-bg: #c4191f; --gs-nav-cta-bg-hover: #8f1116; --gs-nav-cta-text: #ffffff; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== FOOTER ===== Light surface to match the navbar, so the same logo file works in both places. Sand is a step deeper than the ivory page so the footer still reads as a distinct band without going dark. */ --gs-footer-bg: #f6ece3; /* sand band */ --gs-footer-bar-bg: #eee0d3; /* deeper sand — copyright bar */ --gs-footer-text: #45403f; /* 8.76:1 on sand, 7.89:1 on the bar */ --gs-footer-heading: #8f1116; /* deepest red — column headings, icons */ --gs-footer-accent: #7b621a; /* deep bronze-gold, logo's 45deg hue. The gold the logo actually uses is far too light to read on sand (1.2:1), so it is darkened to clear 4.5:1 on sand (5.00), the bar (4.51) and white (5.83). */ --gs-footer-border: rgba(28, 26, 26, 0.12); /* top hairline */ --gs-footer-rule: rgba(143, 17, 22, 0.18); /* heading underscores, icon rings */ /* ===== BRAND GLOW ===== */ --gs-glow: rgba(231, 29, 37, 0.4); --gs-glow-dark: rgba(231, 29, 37, 0.5); --gs-glow-soft: rgba(231, 29, 37, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #efc132; --gs-faq-section-bg: #f6ece3; --gs-faq-container-bg: #fffdfb; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced by legacy selectors */ --primary-color: #e71d25; --primary-color-light: #fdf9f5; --primary-color-dark: #c4191f; --text-dark: #1c1a1a; --text-light: #726b6a; --white: #ffffff; --main-color: #efc132; --bg-shade: #f6ece3; }