/* ============================================================ THEME: Soft Pastel Bakery (Love Sugar & Dough) Light pink, powder blue and butter yellow on a warm white, with charcoal text to echo the black line-art logo. 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 { /* ===== PASTEL PALETTE ===== */ --gs-pink-soft: #F8D7E1; /* Light pink: buttons, bands, scrolled nav */ --gs-pink-softer: #FDEEF2; /* Palest pink: tints, footer */ --gs-pink-line: #E9B8C8; /* Pink borders, dividers, outlines */ --gs-blue-soft: #D6EAF8; /* Powder blue fills */ --gs-blue-text: #3F7CA6; /* Muted blue for text/icons */ --gs-yellow-soft: #FFEFC2; /* Butter yellow fills */ --gs-yellow-text: #A77B12; /* Deep butter for text/icons */ /* ===== BRAND COLORS ===== */ --gs-red: #A8566F; /* Dusty rose: small text accents (labels, links, icons) */ --gs-red-dark: #3F7CA6; /* Muted blue: hover on light backgrounds */ --gs-red-light: #FDEEF2; /* Pale pink tint (icon circles, hover fills) */ /* ===== UI COLORS ===== */ --gs-dark: #2E2A2B; /* Charcoal (matches logo line-art): headings */ --gs-text: #4A4546; /* Body text */ --gs-text-light: #7C7577; /* Muted/secondary text, subtitles */ --gs-white: #ffffff; --gs-bg: #FFFCF8; /* Warm white page background */ --gs-bg-alt: #FDF3F6; /* Blush-white alternate section background */ --gs-cream: #FFF8EC; /* Buttercream card backgrounds */ --gs-border: #F1E1E6; /* Borders, dividers */ --gs-border-light: #F7ECEF; /* Very subtle borders (FAQ items) */ /* ===== SHADOWS ===== */ --gs-shadow: 0 4px 20px rgba(46, 42, 43, 0.06); --gs-shadow-hover: 0 8px 30px rgba(168, 86, 111, 0.14); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Fredoka', sans-serif; --gs-font-body: 'Nunito', sans-serif; --gs-heading-style: normal; --gs-heading-weight: 600; /* ===== HERO ===== */ --gs-hero-overlay: rgba(46, 42, 43, 0.45); /* Soft charcoal tint so white hero text stays readable */ --gs-hero-accent: #FFE29A; /* Light butter-yellow accent line in hero headings */ /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 120px; --gs-nav-height-mobile: 85px; --gs-nav-bg: #F8D7E1; /* Light pink nav bar */ --gs-nav-open-bg: #FDEEF2; /* Mobile nav drawer */ --gs-nav-link: #2E2A2B; /* Charcoal nav links */ --gs-nav-link-hover: #A8566F; /* Dusty rose hover / current page */ --gs-nav-btn-bg: #2E2A2B; /* Charcoal "Order Now" button */ --gs-nav-btn-bg-hover: #A8566F; --gs-nav-btn-text: #ffffff; /* ===== BUTTONS ===== */ --gs-btn-radius: 999px; --gs-btn-bg: #F8D7E1; /* Light pink */ --gs-btn-bg-hover: #D6EAF8; /* Powder blue on hover */ --gs-btn-text: #2E2A2B; /* Charcoal text on pastel buttons */ --gs-btn-outline: #E9B8C8; /* Outline button border */ --gs-btn-glow: rgba(233, 184, 200, 0.45); /* ===== FOOTER ===== */ --gs-footer-bg: #FDEEF2; /* Palest pink */ --gs-footer-bar-bg: #F8D7E1; --gs-footer-text: #4A4546; --gs-footer-heading: #2E2A2B; /* ===== BRAND GLOW (shadow using primary color) ===== */ --gs-glow: rgba(233, 184, 200, 0.45); --gs-glow-dark: rgba(233, 184, 200, 0.6); --gs-glow-soft: rgba(233, 184, 200, 0.35); /* ===== DECORATIVE ===== */ --gs-star-color: #F5C04A; /* Review/rating star yellow */ --gs-faq-section-bg: #FDF3F6; /* FAQ outer section background */ --gs-faq-container-bg: #FFFCF8; /* FAQ inner container background */ /* ===== SEMANTIC ALIASES (shared gs- system tokens) ===== */ --gs-primary: #F8D7E1; --gs-primary-dark: #A8566F; --gs-primary-light: #FDEEF2; --gs-accent: #FFEFC2; --gs-accent-dark: #A77B12; --gs-accent-light: #FFEFC2; --gs-secondary: #D6EAF8; --gs-secondary-dark: #3F7CA6; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced in the legacy portion of style.css */ --primary-color: #A8566F; --primary-color-light: #FFFCF8; --primary-color-dark: #3F7CA6; --text-dark: #2E2A2B; --text-light: #7C7577; --white: #ffffff; --main-color: #FFEFC2; --bg-shade: #FDF3F6; }