/* ===== Fonts ===== */ @font-face { font-family: "Sunn Free Version"; src: url("fonts/SunnFreeVersion-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Kerlo Glued"; src: url("fonts/KerloGlued-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ===== page loader ===== Covers the viewport from the very first paint (it's the first thing in , before .page) so the heavy image/font pop-in while everything loads happens behind it instead of in front of the visitor. A sibling of .page, not a child — .page can get a CSS `zoom` applied (the tablet fit-to-width script) and fixed-position descendants of a zoomed element are a known source of browser quirks, so this stays outside that entirely. JS (nav-pill.js, shared by every page) removes it once the page's `load` event fires, or after a fixed timeout regardless — the timeout matters now that the home page embeds a cross-origin Google Maps iframe, which could in principle hang and never fire `load` at all. */ #page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: #FFEBBB; transition: opacity .5s ease, visibility .5s ease; } #page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Stage 1 (0-2s): the bird, spinning in place. Stage 2 (2s on, via the inline script right after this div adding .stage-2): swaps to the GROW sign with just its "O" bouncing. ab-starburst-spin is the same generic 360°-rotation keyframe already used for the hero stars — no need for a near-duplicate. */ .page-loader-bird { width: 150px; height: 132px; object-fit: contain; animation: ab-starburst-spin 1.5s linear infinite; } .page-loader-grow { display: none; position: relative; width: 320px; aspect-ratio: 673 / 168; } #page-loader.stage-2 .page-loader-bird { display: none; } #page-loader.stage-2 .page-loader-grow { display: block; } .page-loader-grow-img { display: block; width: 100%; height: 100%; } /* cropped straight out of the same grow-sign art (296-456px of its native 673px width) so it lines up on top of the "O" it was cut from with zero visible seam at rest — only this piece moves. */ .page-loader-grow-o { position: absolute; top: 0; left: 43.98%; width: 23.77%; height: 100%; animation: page-loader-o-bounce 1s ease-in-out infinite; } @keyframes page-loader-o-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .page-loader-bird { animation: none; } .page-loader-grow-o { animation: none; } } @media (max-width: 767px) { .page-loader-bird { width: calc(110 * var(--u)); height: calc(97 * var(--u)); } .page-loader-grow { width: calc(230 * var(--u)); } .page-loader-grow-o { animation-name: page-loader-o-bounce-mobile; } @keyframes page-loader-o-bounce-mobile { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-10 * var(--u))); } } } body { background: #cdba97; display: flex; justify-content: center; min-height: 100vh; } /* 1440-wide canvas. min-height (not a fixed height) so the in-flow footer can grow the page instead of being clipped by overflow:hidden — every OTHER child is absolutely positioned and stays pinned to its own coordinates regardless, since absolute children never affect a min-height parent's own height. Cut to 2480px (community-bg2's own bottom edge, its last section) rather than the original Figma 2645px: nothing is positioned past 2480, so the remaining 165px was just trailing canvas background — removed so the footer meets Our Community directly with no gap. */ .page { position: relative; width: 1440px; min-height: 2480px; flex: 0 0 auto; overflow: hidden; background: #FFEBBB; /* component background */ font-family: "Bakbak One", sans-serif; } .layer { position: absolute; } /* ===== backgrounds / decorative ===== */ .menu-bg { left: -29px; top: 786px; width: 1503px; height: 704px; background: #EDEECE; } /* sunburst-full.png is the un-cropped export — sunburst-new.png (the old asset) was this same artwork with 341px (170.5px at this 2x-exported image's CSS scale) already trimmed off the left, since only the right portion was ever visible at rest. Pixel-diffed the two to find that exact crop offset, then shifted left by it here so the box's visible slice lands in EXACTLY the same place as before (same shape, same size) — the only difference is the now-complete circle sitting behind it, so rotation has real artwork to swing into view instead of empty canvas. Slow spin, a little faster than the pink star's 100s. */ .sunburst { left: -170.5px; top: 108px; width: 885.5px; height: 914.5px; animation: ab-starburst-spin 80s linear infinite; } @media (prefers-reduced-motion: reduce) { .sunburst { animation: none; } } .hero-spiral { left: 766px; top: 424px; width: 509px; height: 431px; } .squiggle-full { left: 0px; top: 0px; width: 1440px; height: 2645px; } /* object-fit:contain (not cover) so the full star is always rendered intact, at its own aspect ratio, never internally cropped — the box below is just deliberately bigger than the visible corner and shifted past the page's own top/right edges so it bleeds off-canvas there (page's overflow:hidden does that clipping, not this element), rather than the star's own artwork ever being cut by a mismatched box. */ .blob-gold { left: 985px; top: -190px; width: 680px; height: 680px; object-fit: contain; animation: ab-starburst-spin 100s linear infinite; } @media (prefers-reduced-motion: reduce) { .blob-gold { animation: none; } } /* ===== nav ===== Track is 350px narrower than the page-width span it used to have (1055 -> 705) and re-centered on the 1440px canvas: (1440-705)/2 = 367.5 left. Height/radius (40px / 20px) matches the .ev-toggle pill elsewhere in the design system rather than the old 29px bar, and a soft shadow gives it the same sense of depth as the site's other cards/buttons — both were the two things that read "flat"/cramped next to the rest of the page. Vertical center (66.5px) is unchanged so the labels themselves (.nav-text) didn't need to move, only the track/pill/hit-target that surround them. */ .nav-track { left: 367.5px; top: 46.5px; width: 705px; height: 40px; border-radius: 20px; background: #FFF9E6; /* solid opaque beige (Figma Rectangle 1) */ box-shadow: 0 4px 16px rgba(80, 50, 15, 0.16); } /* The pink pill doubles as the nav's active-item indicator: JS slides it horizontally to whichever label was clicked. This CSS-only rest state is just the pre-JS fallback (now roughly under "home", the new default active item) — nav-pill.js measures and tightens it to the actual text the instant it runs, on every page. 3px inset from the track's top/bottom on all four corner stops now (was 2px inside a much thinner track). */ .nav-pill { left: 367.5px; top: 49.5px; width: 141px; height: 34px; border-radius: 17px; background: linear-gradient(180deg, #D64147 0%, #EB7E94 100%); transition: left .45s cubic-bezier(.4, 0, .2, 1), width .45s cubic-bezier(.4, 0, .2, 1); } @media (prefers-reduced-motion: reduce) { .nav-pill { transition: none; } } .nav-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("assets/button-grain.png"); background-size: 210px 120px; background-repeat: repeat; image-rendering: pixelated; opacity: 0.93; pointer-events: none; } /* Nav font: Nunito Bold, 20px, 5% letter-spacing. text-decoration:none so the items that are links (events) render exactly like the ones that are still plain spans. */ .nav-text { font-family: "Nunito", sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: 0.05em; white-space: nowrap; text-decoration: none; color: #E0899A; /* resting colour for every label */ cursor: pointer; transition: color .45s cubic-bezier(.4, 0, .2, 1); /* the bird SVG (.bird) sits later in the DOM and its untransformed viewBox gives it a huge invisible hit-testable box that happened to overlap events/apparel/about, silently swallowing clicks on them. z-index lifts every label above it regardless of DOM order. */ z-index: 5; } /* whichever label the pill is currently under reads white on the pink */ .nav-text.is-nav-active { color: #FFFFFF; } /* Inactive labels darken slightly toward the pill's own red on hover — the nav previously gave zero feedback for anything short of a click, which reads as unresponsive; reuses a colour already in the palette (the pill gradient's own #D64147) rather than introducing a new one. */ .nav-text:not(.is-nav-active):hover { color: #D64147; } /* menu/events/apparel keep the even 141px-slot scheme (centred text) across the narrower, centred nav-track (left 367.5, width 705). home and about are the two corner stops, so instead they're anchored directly off the track's own edges with no explicit width — shrink-to-fit sizing makes each one's rendered box exactly hug its own text (no centring inset to solve for). Inset bumped from 19px to 36px so nav-pill.js's PILL_PAD(16) cushion lands the pill 20px off the track's edge on a corner stop (367.5 + 36 - 16 = 387.5... i.e. 20px clear of 367.5) instead of the old 3px hug, which read as cramped/clipped against the rounded corner. */ .nav-home { left: 403.5px; top: 54.5px; color: #E0899A; } .nav-menu { left: 508.5px; top: 54.5px; width: 141px; text-align: center; } /* invisible click/keyboard target, exactly over the "menu" slot; zero visual footprint so the pixel-perfect desktop art beneath it is untouched. Top/height now track the taller pill (49.5/34) instead of the old 54/25, so the clickable area still matches what's visibly drawn. */ .nav-menu-hit { left: 508.5px; top: 49.5px; width: 141px; height: 34px; z-index: 5; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; } .nav-menu-hit:focus-visible { outline: 2px solid #35542F; outline-offset: 2px; } .nav-events { left: 649.5px; top: 54.5px; width: 141px; text-align: center; color: #E0899A; } .nav-apparel { left: 790.5px; top: 54.5px; width: 141px; text-align: center; color: #E0899A; } .nav-about { right: 403.5px; top: 54.5px; color: #E0899A; } /* ===== GROW (vector wordmark, Figma node 200:5) ===== */ .grow { left: 111.53px; top: 294.72px; width: 943.51px; height: 226.42px; } .grow-img { display: block; width: 100%; height: 100%; } /* ===== bird ===== The viewBox (0 0 2820 2488) is shared with the mobile bird, so it can't be cropped to the ink here without distorting mobile. Instead the full-size box is scaled/positioned with a transform matrix so only the ink lands on the target rect (left 1055.04, top 222.85, 254.3x327.13) — the ink's own bounding box (measured via getBBox + half the 10px stroke) doesn't share the target rect's aspect ratio, hence independent X/Y scale factors. A 10.92deg rotation about that rect's own center is folded into the same matrix (rather than a separate rotate()), since composing a plain rotate() after a non-uniform scale would shear the artwork instead of spinning it rigidly. */ .bird { left: 0; top: 0; width: 2820px; height: 2488px; transform: matrix(0.26988742, 0.05206983, -0.05486860, 0.28439392, 891.34515, -43.97866); transform-origin: 0 0; overflow: visible; } .bird-base { fill: #6E4A22; stroke: #6E4A22; } /* ===== tagline ===== */ .tagline { left: 155.87px; top: 560.21px; width: 415px; height: 64px; font-family: "Bakbak One", sans-serif; font-weight: 400; font-size: 48px; line-height: 67.2px; letter-spacing: 2.4px; color: #704500; white-space: nowrap; filter: url(#tagline-roughen); } /* ===== MENU heading ===== */ .ms-heading { left: 388px; top: 852px; width: 664px; font-family: "Caprasimo", serif; font-weight: 400; font-size: 68px; line-height: 70px; letter-spacing: 0; color: #35542F; text-align: center; white-space: nowrap; } /* ===== dish track: horizontally scrollable row of cards, same card/food/ label visuals as the original fixed 4-up grid, just laid out with flex instead of page-absolute coordinates so it can scroll. ===== */ .ms-track { /* left/top pulled back and padding added on every side (matching exactly), so the resting position of the first card is still page-x:66/y:1010, but hovered shapes/food now have real clearance on all sides and never hit the scroll container's own clipping edge - including the first and last cards, whose expanded shapes previously had nowhere left to scroll to. */ /* 0.75x the original card scale — dropped in lockstep across the whole item/gap/padding stack (see .ms-item and its children below) so five cards land flush in the track's own 1120px width with no scrolling needed: 5*(248*.75) + 4*(42*.75) = 1056, vs 1072 usable (1120 minus the also-scaled 24px side padding) — 16px to spare, same clearance ratio the padding always had for the hover-grow effect. */ /* centred on the 1440px page: (1440-1120)/2 = 160. Used to sit off-centre at 34px to leave room for "order now" sitting beside it on the right; that button now lives underneath instead, so nothing needs the clearance any more. */ left: 160px; top: 970px; width: 1120px; height: 282px; display: flex; align-items: flex-start; gap: 31.5px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 30px 24px 13.5px; scrollbar-width: thin; scrollbar-color: #44693D transparent; /* scroll-snap so a released scroll always settles on a whole card, never one sliced in half at the edge. scroll-padding matches the track's own left/right padding exactly — that's what fixes the older, removed attempt at this: without it, "start" alignment snaps flush against the padding's inner edge and eats the hover-clearance margin it's meant to reserve; with it, the browser treats the padding itself as outside the snapping area, so cards still snap "start" but the clearance survives. */ scroll-snap-type: x mandatory; scroll-padding-left: 24px; scroll-padding-right: 24px; } .ms-track::-webkit-scrollbar { height: 8px; } .ms-track::-webkit-scrollbar-track { background: transparent; } .ms-track::-webkit-scrollbar-thumb { background: #44693D; border-radius: 4px; } /* now a