/* Home hero copy standout + consolidated transparent header. */ /* ---- Hero copy ---------------------------------------------------------- No panel: the belts' radial mask dissolves the pastries toward the center (see hero-pastries.css), so the copy sits on the clean chocolate ground. A whisper of shadow keeps it crisp at the fade edge. */ .hero-inner { position: relative; z-index: 2; } .hero-inner .logo-svg-wrap { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45)); } /* Client's Cream brand wordmark. Scaled +10% from the bottom edge, so the mark grows upward toward the top of the viewport while its base — and everything below it — stays put (transform doesn't reflow). WIDER SINCE THE NEW MARK (2026-08-17), and this is a consequence rather than a preference. The box is WIDTH-driven, and the logo went from 1.02:1 to 1.63:1 — so at the old 340px it would render 209px tall where the previous mark rendered 333px, losing a third of the hero's visual anchor without anyone having asked for a smaller logo. 430px restores roughly the old HEIGHT; the mark is simply a wider shape now. */ .hero-logo-img { display: block; margin: 0 auto; width: min(430px, 82vw); height: auto; transform: scale(1.1); transform-origin: bottom center; } /* Tagline: same font size, but bright and crisp so it reads as strongly as the wordmark (was a dim 50%-opacity, over-spaced line that receded). */ .hero-tagline { position: relative; color: var(--cream) !important; font-weight: 500; letter-spacing: 0.14em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } .hero-btns a { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } /* Load order: the chocolate ground + belts should appear (and start their quick spin-up) FIRST, then the wordmark, tagline and buttons fade in over them. The copy already fades via the `fu` animation — we just push its delay past the moment the belts mount so the sequence is deterministic (it was a race before, so the order looked inconsistent between loads). */ .hero-inner .logo-svg-wrap { animation-delay: 0.9s; } .hero-tagline { animation-delay: 1.15s; } .hero-btns { animation-delay: 1.4s; } /* ---- Header: transparent over hero, solid on scroll --------------------- */ nav { background: linear-gradient(to bottom, rgba(45, 28, 20, 0.5), rgba(45, 28, 20, 0)) !important; -webkit-backdrop-filter: none !important; /* kill the monolith's frosted blur */ backdrop-filter: none !important; border-bottom: none !important; /* remove the hairline bar under the header */ transition: background 0.3s ease, box-shadow 0.3s ease; } nav.scrolled { /* Transparent, not blurry — a light see-through cream (no backdrop blur). */ background: rgba(253, 246, 238, 0.82) !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); } /* Nav text: cream over the hero, dark once the header goes solid. */ nav .nav-links a, nav .nav-dd-toggle { color: #fff4ec !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); transition: color 0.25s ease; } nav.scrolled .nav-links a, nav.scrolled .nav-dd-toggle { color: #3a241b !important; text-shadow: none; } /* ---- Brand wordmark in the header -------------------------------------- The header is transparent over the chocolate hero, then cream on scroll — no single ink survives both, so we cross-fade the CREAM mark to the Dark-Chocolate one exactly as the nav text flips. (This said "Rose" until 2026-08-17; the class, the file and the artwork have all been cream for a long time, and a comment describing an ink the page does not use is worse than none.) Both are SVG since the new logo, so the cross-fade stays crisp at any header height instead of resampling an 800px raster down to 54. */ .nav-logo { position: relative; display: inline-flex; align-items: center; } /* 40px, down a quarter from 54 (Ken, 2026-08-17). The new mark is 1.63:1 where the old was 1.02:1, so at 54px it rendered 88px wide against the old 55px — it read as a larger logo even though the height had not changed. Taking the height down a quarter puts the WIDTH back near where the header was balanced, at 66px. */ .nav-logo-img { height: 40px; width: auto; display: block; transition: opacity 0.25s ease; } .nav-logo-dc { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; } nav.scrolled .nav-logo-cream { opacity: 0; } nav.scrolled .nav-logo-dc { opacity: 1; } /* ---- Consistent nav items ---------------------------------------------- Everything uppercase + letter-spaced + one size (the toggles inherited the body font, so "ABOUT" was caps while "Order/Menus" weren't). id beats the monolith's !important per-item sizes. Roomier, even gaps between items. */ nav #nav-links { gap: 1.15rem !important; margin-left: 1rem; } /* Vertically align all three items: About is an , Order/Menus are