/* ================================================================ SILLY GOOSE BAKERY — MAIN STYLESHEET ================================================================ HOW TO CUSTOMIZE THIS FILE: ----------------------------------------------------------------- 1. COLORS: All colors live in the :root block below. Change a hex value there and the ENTIRE site updates. No need to search through 700 lines of CSS. 2. FONTS: --font-heading and --font-body are also in :root. To swap fonts, change the variable here AND update the Google Fonts tag in every HTML . 3. SIZING: --max-width = page content width. --radius = how rounded card corners are. 4. SECTIONS: Each chunk of this file has a big header comment (HEADER & NAV, HERO, MENU PAGE, etc.). Use Ctrl+F to jump to the one you need. 5. RESPONSIVE: Media queries live at the very bottom. They adjust grids for tablets and phones. ================================================================ */ /* ------- CSS RESET ------- Removes default browser spacing so things look the same in Chrome, Firefox, Safari, Edge, etc. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ====================== COLOR & FONT VARIABLES ====================== HOW TO CHANGE COLORS: Edit the hex values below. The whole site updates instantly. Current palette: cozy + girly (blush pink, dusty rose, soft lavender, warm cream) Example — make the accent more coral: --color-rose: #D4849A; --> --color-rose: #E07070; Example — pure white background: --color-cream: #FFF5F5; --> --color-cream: #FFFFFF; */ :root { /* -- Background colors -- */ --color-cream: #FFF5F5; /* Page background (soft pinkish cream) */ --color-warm-white: #FFFAF9; /* Card/section backgrounds (slightly warmer) */ /* -- Accent / brand colors -- */ --color-rose: #D4849A; /* Primary accent: buttons, links, prices */ --color-blush: #F2C4CE; /* Light pink: gradients and highlights */ --color-mauve: #B0879B; /* Muted mauve: hover states */ --color-lavender: #C9B8D9; /* Soft lavender: gradient accent */ /* -- Text colors -- */ --color-dark: #4A2C3D; /* Dark plum: headings & primary text */ --color-text: #4A2C3D; /* Body text (same as dark) */ --color-text-light: #7D5E6F; /* Lighter plum: descriptions, captions */ /* -- Borders -- */ --color-border: #F0DDE3; /* Soft pink border for cards/dividers */ /* -- Fonts -- To swap: pick a font at fonts.google.com, update the variable below AND the tag in each HTML file's . */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Lato', 'Segoe UI', Arial, sans-serif; /* -- Layout -- */ --max-width: 1200px; /* Increase for a wider site */ --radius: 12px; /* Card corner roundness */ --shadow: 0 2px 16px rgba(74, 44, 61, 0.07); --shadow-hover: 0 6px 24px rgba(74, 44, 61, 0.13); } html { scroll-behavior: smooth; /* Smooth scroll for anchor links */ } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--color-rose); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--color-mauve); } ul { list-style: none; } /* .container — centers content and adds side padding. Change --max-width above to make the site wider/narrower. */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ====================== HEADER & NAV ====================== Sticky header that stays at the top while scrolling. To add a new nav link: add a
  • inside