/* Chill the Beans — shared stylesheet. Lifted verbatim out of prototype-hero.html when menu.html was added; a second page copying these rules would have guaranteed drift. No build step: both pages just this. Page-specific rules stay inline on the page that owns them. */ :root{ /* REAL Chill the Beans brand */ --aqua:#7FE0E0; --aqua-soft:#E9FBFB; /* teal darkened from #178A90 to clear WCAG AA (4.5:1) as small text on white AND cream — the old value read 3.8–4.14:1 on prices, labels and button fills. Large display headings passed either way; this keeps one coherent teal. */ --teal:#0C7276; --pink:#F5A9C4; --magenta:#E0559A; /* darker magenta used ONLY for the small uppercase .eyebrow text on light mint (bright --magenta stayed 3.31:1 there). Fills/icons keep the bright --magenta. */ --magenta-ink:#B02A70; --charcoal:#2E2E30; --ink:#2E2E30; --cream:#FBF4EF; /* depth of the diagonal cut: how much higher a cut section's top edge sits on the right than the left. Descends leftward, the same direction as the pink diagonal inside the hero photo. Floors at 30px so a phone gets a cut, not a landslide. */ --slant:clamp(30px,5.5vw,110px); --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,sans-serif; --script:"Grand Hotel",cursive; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* `clip`, not `hidden`, and on only. The beans deliberately start off both edges before sliding in, so the page is genuinely wider than the screen and something must clip it. - Not on as well: per spec, giving one axis a non-visible value computes the OTHER axis to `auto`, so body became its own scroll container nested inside the viewport's and the page grew TWO vertical scrollbars. - `hidden` still leaves a scrollable overflow area, which mobile browsers will happily pan sideways even though nothing is drawn there — that was the glitch when scrolling past the locations section. `clip` removes the scrollable area outright, and because `clip` and `visible` don't blockify each other, overflow-y stays visible and no scroll container is created. Needs Chrome 90+ / Firefox 81+ / Safari 16+. */ html{overflow-x:clip;max-width:100%} body{max-width:100%} body{font-family:var(--body);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased} /* top bar — burger holds the whole menu at every width */ .bar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:clamp(18px,4vw,46px);padding:16px clamp(20px,5vw,64px)} /* z-index 2 keeps the brand and burger above the fixed nav takeover (z-index 1) */ .brand{position:relative;z-index:2;display:flex;align-items:center;gap:12px} .brand .logo{width:52px;height:52px;border-radius:50%;flex:0 0 auto;box-shadow:0 4px 12px rgba(46,46,48,.22)} .mark{font-family:var(--script);font-size:1.6rem;color:var(--charcoal);line-height:1} .brand a{text-decoration:none;display:flex;align-items:center;gap:12px} /* no chip: a cream circle behind this read as a sticker on the photo. The button paints nothing — legibility comes from the cream halo on the marks themselves. Labelled, not icon-only: this burger is the site's ONLY route to every action (no hero buttons by design), so discoverability beats minimalism here. */ .burger{position:relative;z-index:2;display:flex;flex-direction:row;align-items:center;gap:9px; margin-left:auto;width:auto;height:46px;border:0;background:none; box-shadow:none;cursor:pointer;padding:0;flex:0 0 auto} /* same type treatment as .eyebrow, so the word reads as part of the brand voice */ .blabel{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;color:var(--charcoal);line-height:1; text-shadow:0 0 5px rgba(251,244,239,.95),0 0 2px rgba(251,244,239,.95)} .lines{display:flex;flex-direction:column;gap:8px} /* two lines, not three — and 2px, not 3px */ .lines i{display:block;width:26px;height:2px;border-radius:2px;background:var(--charcoal); filter:drop-shadow(0 0 3px rgba(251,244,239,.95));transition:transform .28s} /* lines sit 5px either side of centre (2px line + 8px gap), so ±5 meets them */ .burger.open .lines i:nth-child(1){transform:translateY(5px) rotate(45deg)} .burger.open .lines i:nth-child(2){transform:translateY(-5px) rotate(-45deg)} /* nav is a full-screen cream takeover on mobile — the menu is a place, not a dropdown. It is a child of .bar, so it must stay UNDER the logo and burger in the stacking order or the cream swallows the CLOSE button and traps the user. */ .nav{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column; background:var(--cream); padding:104px clamp(24px,7vw,48px) 44px;font-weight:700; opacity:0;pointer-events:none;transition:opacity .28s ease} .nav.open{opacity:1;pointer-events:auto} /* links are display type here, not body copy */ .nav a{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,8.5vw,2.6rem); color:var(--charcoal);text-decoration:none;padding:9px 0;line-height:1.1; opacity:0;transform:translateY(14px); transition:opacity .3s ease,transform .3s ease,color .2s} .nav.open a{opacity:1;transform:none} /* 40ms apart — enough to read as a cascade, not enough to feel slow */ .nav.open a:nth-of-type(1){transition-delay:.05s} .nav.open a:nth-of-type(2){transition-delay:.09s} .nav.open a:nth-of-type(3){transition-delay:.13s} .nav.open a:nth-of-type(4){transition-delay:.17s} .nav.open a:nth-of-type(5){transition-delay:.21s} .nav a:hover,.nav a:active{color:var(--magenta)} /* the current page's own link — you are here */ .nav a[aria-current="page"]{color:var(--teal)} /* script sign-off, last thing to arrive */ .nav-sign{margin-top:auto;padding-top:22px;border-top:2px solid var(--pink); font-family:var(--script);font-size:1.7rem;color:var(--teal);line-height:1; opacity:0;transform:translateY(14px);transition:opacity .3s ease .26s,transform .3s ease .26s} .nav.open .nav-sign{opacity:1;transform:none} /* desktop: no burger — links ride inline, immediately right of the wordmark. Overrides the panel rules above, so the .open class is irrelevant here. */ @media(min-width:721px){ .burger{display:none} .nav{position:static;flex-direction:row;align-items:center;gap:clamp(14px,2vw,30px); background:none;box-shadow:none;padding:0; opacity:1;transform:none;pointer-events:auto} /* the takeover styles above start links hidden and staggered — desktop links are always visible inline, so reset them back to body type at full opacity */ .nav a{padding:0;font-size:1rem;font-family:var(--body);font-weight:700; opacity:1;transform:none;transition-delay:0s} .nav-sign{display:none} } .eyebrow{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta-ink);margin-bottom:14px} /* the diagonal divider, as a reusable class. Whatever carries it must sit on a DIFFERENT background to what is above it — mint on mint shows no cut at all. */ .diagonal-top{clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%); margin-top:calc(-1 * var(--slant))} /* HERO — photo, brand bar, slogan under the wordmark */ /* Photo stays full-bleed at every width — capping it left a visible seam where the gutter met the photo's own mint. The big-screen void is fixed by scaling the copy instead, below. */ .hero{position:relative;background:var(--aqua-soft);line-height:0} /* aspect-ratio, not a fixed height: the photo is 1672x941 and any cap short of that eats the toastie and the bowl. Show the shot whole. */ .hero-img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:center} /* copy sits centred in the clear mint area on the left of the photo */ /* max-width tracks the viewport, not `ch`: a ch-based cap is tied to the 16px body font, so it froze the copy at 442px while the photo grew past 2500px. */ .hero-copy{position:absolute;z-index:10;top:50%;transform:translateY(-50%); left:clamp(20px,5vw,96px);max-width:clamp(420px,34vw,760px);line-height:normal} .slogan{font-family:var(--body);font-weight:700;font-size:clamp(.72rem,1.15vw,1.05rem); letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);line-height:1.5;white-space:nowrap} .hero-copy h1{margin-top:12px;font-family:var(--display);font-weight:700;line-height:1.02; letter-spacing:-.015em;font-size:clamp(2.1rem,4.2vw,5.4rem);color:var(--charcoal)} /* script line rides its own row — the phrase must never split mid-wrap */ .hero-copy h1 .script{font-family:var(--script);font-weight:400;color:var(--teal);font-size:1.12em;white-space:nowrap} .sub{margin-top:clamp(16px,1.2vw,26px);font-family:var(--body);font-weight:600; font-size:clamp(.95rem,1.35vw,1.5rem);line-height:1.5;color:#4b4b50} /* no hero buttons by design — every action lives in the top nav */ /* transition: a diagonal cut, see .sec2 / .diagonal-top. Replaced the soft fade band that used to live here (which itself replaced a wave). */ @media(max-width:720px){ .hero{background:var(--aqua-soft)} /* taller than the native 1672/941 strip, but not square. The ratio sets the trade: a squarer frame scales the photo up, which widens the mint column but pushes the food out of the window entirely. 7/6 is the point where a ~185px mint column and the cup/toastie both survive. */ .hero-img{aspect-ratio:7/6;height:auto;object-position:30% center} /* headline only: the mint column is too narrow to carry the sub line too. top sits below 50% to clear the bar overlaying the photo. */ .hero-copy{left:16px;max-width:50vw;top:56%} .hero-copy h1{font-size:clamp(1.5rem,6.2vw,2.1rem)} .sub{display:none} /* must wrap here — one line does not fit the mint column */ .slogan{max-width:none;letter-spacing:.14em;white-space:normal;font-size:.66rem} .bean{width:18px;height:13px} } /* bean spill — an absolute layer inside .sec2, so the section clips it. inset:0 resolves against .sec2's padding box, and .sec2 is full-bleed with no border, so the field spans the page width exactly and bean x maps 1:1 to it. */ .beanfield{position:absolute;inset:0;z-index:15;pointer-events:none} .bean{position:absolute;width:23px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:radial-gradient(120% 120% at 35% 30%,#6f4a2e,#3c2617 70%); box-shadow:inset 0 -2px 3px rgba(0,0,0,.35);will-change:transform;opacity:0} .bean::after{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(90deg,transparent 46%,rgba(20,12,6,.7) 49%,rgba(20,12,6,.7) 51%,transparent 54%)} /* THE FEED — their real Instagram, as a static grid. Mint, same as the hero, and deliberately so: .sec2 below cuts a cream diagonal into whatever it sits on, and that cut needs two colours. A cream feed here would erase the divider. Sits ABOVE .beanfield in the markup so the beans keep flying down .sec2's side columns rather than this grid's. */ /* overflow:hidden so a tile that drifts past the edge is cut off by the section rather than widening the page — the tiles should read as crossing the screen */ /* margin-top pulls the feed UP over the bottom of the hero photo to bury a faint circular watermark in its lower-right. The feed background is the SAME mint as the hero (aqua-soft), so the overlap is invisible — it reads as one surface, not a cover-up. Value tracks the photo: the watermark sits in the bottom ~10% of a 1672x941 image shown full-width, so ~6vw of displayed height clears it. Mobile crops the photo to 7/6, scaling it down, so the strip needs a larger share there (see the @media rule). */ .feed{position:relative;background:var(--aqua-soft);line-height:normal;overflow:hidden; margin-top:calc(-1 * clamp(46px,6vw,120px)); padding:clamp(70px,9vw,120px) clamp(20px,5vw,64px) clamp(80px,10vw,130px)} .feed-head{max-width:1080px;margin:0 auto clamp(26px,3.4vw,44px);text-align:center} .feed .eyebrow{color:var(--magenta-ink);margin-bottom:14px} .feed h2{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.01em; font-size:clamp(2rem,4.4vw,3.4rem);color:var(--charcoal)} .feed h2 .script{font-family:var(--script);font-weight:400;color:var(--teal);font-size:1.15em} .feed-link{display:inline-block;margin-top:18px;font-family:var(--body);font-weight:700; font-size:.9rem;color:var(--magenta-ink);text-decoration:none; border-bottom:2px solid var(--pink);padding-bottom:3px;transition:color .2s,border-color .2s} .feed-link:hover{color:var(--teal);border-color:var(--teal)} /* THE SCATTER — a collage, not a grid. Tiles overlap at the EDGES only: the brief was "scatter enough so you can see them" while still covering the screen, so nothing may cross another tile's subject. Overlaps are corners and margins. The container carries an aspect-ratio and every tile is positioned in %, so the whole arrangement scales with the viewport instead of needing breakpoints per tile. Tile height comes from its own aspect-ratio: for a container of ratio R, a tile of width w% renders at (w / (ar * R))% of the container height. */ /* The fade belongs to the PAGE's left and right edges, not to each photo: tiles dissolve as they travel in and out of the screen while you scroll. It sits on this wrapper rather than on .feed so it never touches the heading, and the wrapper runs the full width so the fade lands at the true screen edges. (An earlier version masked all four edges of every tile — that read as blurry photos rather than as motion, which is not the same idea at all.) */ .scatter-clip{ /* cancel .feed's side padding so the wrapper spans the full screen and the fade lands on the actual screen edges, not 64px inside them */ margin-inline:calc(-1 * clamp(20px,5vw,64px)); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%)} /* Full page width, not a centred 1200 column. A narrow canvas kept every tile ~140px clear of the screen edge, so the edge fade never touched anything and the effect did nothing. Tiles now reach the edges and dissolve there. The cap only bites on very wide monitors, where the fade simply stops engaging rather than the section growing absurdly tall. */ .scatter{position:relative;max-width:1500px;margin:0 auto;aspect-ratio:16/11} .t{position:absolute;margin:0;will-change:transform} .t a{display:block;width:100%;height:100%;border-radius:10px;overflow:hidden; background:#fff;box-shadow:0 14px 34px rgba(46,46,48,.18)} .t img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .t a:hover img,.t a:focus-visible img{transform:scale(1.05)} .t a:focus-visible{outline:3px solid var(--magenta);outline-offset:4px} /* the neon sign sits high in this frame — a centred crop cuts the lettering off */ .t .pos-high{object-position:center 18%} /* Desktop scatter — 12 tiles, one per rectangle in the concept sketch. Each box's aspect-ratio matches its photo's NATIVE ratio, so object-fit barely crops anything: the three tall 0.56 shots get 5/9 boxes rather than being forced into landscape frames. Overlaps are deliberately small (2-4% of the canvas) and land only on the fade band at a neighbour's edge, so no tile ever hides another's subject. */ .t1 {left:2%; top:3%; width:20%;aspect-ratio:3/4; z-index:9} .t2 {left:19%;top:0; width:17%;aspect-ratio:7/8; z-index:5} .t3 {left:40%;top:6%; width:21%;aspect-ratio:4/3; z-index:4} .t4 {left:57%;top:1%; width:18%;aspect-ratio:3/4; z-index:8} .t5 {left:78%;top:5%; width:20%;aspect-ratio:4/5; z-index:3} .t6 {left:20%;top:24%;width:19%;aspect-ratio:3/4; z-index:7} .t7 {left:42%;top:25%;width:18%;aspect-ratio:3/4; z-index:6} .t8 {left:60%;top:31%;width:21%;aspect-ratio:16/9;z-index:10} .t9 {left:2%; top:42%;width:20%;aspect-ratio:3/4; z-index:2} .t10{left:24%;top:55%;width:16%;aspect-ratio:5/9; z-index:11} .t11{left:45%;top:54%;width:16%;aspect-ratio:5/9; z-index:1} /* pushed right and down: without this the whole right-hand side below the interior shot is dead space and the collage sits lopsided to the left */ .t12{left:76%;top:48%;width:17%;aspect-ratio:5/9; z-index:12} .feed-credit{max-width:1080px;margin:clamp(22px,2.6vw,32px) auto 0;text-align:center; font-family:var(--body);font-weight:600;font-size:.78rem;color:#6a6a70} @media(max-width:720px){ /* 7/6 crop shrinks the photo, so the watermark strip is a bigger share of the rendered width here — pull up more to bury it. */ .feed{margin-top:-10vw;padding:clamp(54px,9vw,70px) 20px clamp(60px,9vw,84px)} .feed h2{font-size:clamp(1.8rem,8.5vw,2.4rem)} /* the last row is the tall t10; it leaves less trailing space than the desktop grid, so pull the credit line up under it */ .feed-credit{margin-top:clamp(14px,3vw,22px)} /* A phone cannot hold the cluster. Twelve tiles across 350px would be thumbnails, and stacking all twelve at a readable size makes the section ~4 screens tall — too long to sit on a homepage. So mobile shows EIGHT and hides four (t5/t8/t11/t12, the ones whose subject is duplicated elsewhere in the set: a second interior, a second shopfront, a second pastry, a second tall bake). Same concept, different geometry — the tiles go big (~54%) and zigzag, so overlaps stay edge-only and the sideways drift genuinely carries them across a narrow screen. */ /* 13% of a phone is ~50px — a quarter of a tile, which reads as a blurry photo rather than an edge. The band has to shrink with the screen. */ .scatter-clip{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)} /* Columns at 2% and 48% with 50%-wide tiles leaves a 4% seam where they meet, so neighbours kiss at a corner instead of lying across each other. The old 54% tiles at 42%/44% overlapped by 14% of the screen, which buried a chunk of every photo. Same-column tiles never touch vertically; the only contact is the diagonal corner between columns. */ /* 2/7 (height = 3.5x width), tuned with the tops below so each column runs near-continuous: ~2% of breathing room between stacked tiles instead of the ~11% dead bands the taller canvas left. Shortening the canvas is what closes the gaps — the tops are percentages, so a shorter box makes every tile taller relative to it without moving where it starts. */ /* 2/6.5 rather than 2/7: shaves the dead strip under the last photo without compressing the tops enough to make stacked tiles in a column touch. The last tile (t10) is also pushed lower to close the trailing gap directly. */ .scatter{aspect-ratio:2/6.5;max-width:none} .t5,.t8,.t11,.t12{display:none} .t1 {left:2%; top:0; width:50%;aspect-ratio:3/4} .t2 {left:48%;top:10%;width:50%;aspect-ratio:7/8} .t3 {left:2%; top:21%;width:50%;aspect-ratio:4/3} .t4 {left:48%;top:28%;width:50%;aspect-ratio:3/4} .t6 {left:2%; top:34%;width:50%;aspect-ratio:3/4} .t7 {left:48%;top:49%;width:50%;aspect-ratio:3/4} .t9 {left:2%; top:55%;width:50%;aspect-ratio:3/4} .t10{left:50%;top:73%;width:46%;aspect-ratio:5/9} } /* SECTION 2 — cream, not mint. The diagonal needs two colours to divide; mint on mint showed no cut at all. The clip slices the full width, photo included, and the negative margin pulls the section up over what it cuts away. */ .sec2{position:relative;background:var(--cream); clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%); margin-top:calc(-1 * var(--slant)); padding:calc(clamp(96px,14vw,190px) + var(--slant)) clamp(20px,5vw,64px) clamp(90px,12vw,150px); text-align:center;overflow:hidden} .sec2 .eyebrow{color:var(--magenta-ink);margin-bottom:16px} .sec2 h2{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.01em;font-size:clamp(2.3rem,5.6vw,4.4rem);color:var(--charcoal)} .sec2 h2 .script{font-family:var(--script);font-weight:400;color:var(--teal);font-size:1.15em} .locs{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:11px} .locs a{background:#fff;border:2px solid var(--pink);border-radius:999px;padding:9px 18px;font-weight:700;font-size:.9rem;color:var(--charcoal); text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:background .18s ease,color .18s ease,border-color .18s ease} .locs a svg{width:14px;height:14px;flex:none;opacity:.75} .locs a:hover,.locs a:focus-visible{background:var(--pink);border-color:var(--pink);color:#fff} .locs a:hover svg,.locs a:focus-visible svg{opacity:1} .scrollcue{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;font-family:var(--body);font-weight:700;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);opacity:.7} /* mobile overrides for .sec2 — must sit after the base .sec2 rule to win */ @media(max-width:720px){ /* side padding keeps content clear of the bean columns; the top figure also carries the whole gap to the hero copy above, so it stays modest. The slant is added back on top, since the clip eats that much of the section. */ .sec2{padding:calc(72px + var(--slant)) clamp(46px,15vw,72px) 130px} /* bean columns own 14% each side; cap the pill row to the clear centre */ .locs{max-width:72vw;margin-left:auto;margin-right:auto;gap:9px} .locs a{padding:8px 14px;font-size:.85rem} .sec2 h2{font-size:clamp(2rem,9vw,2.8rem)} .scrollcue{max-width:72vw;left:50%} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---- shared site footer (all pages) --------------------------------------- Charcoal band that gives every page a proper close instead of ending on bare content. Links mirror the nav so the footer is a second wayfinding point. */ .site-foot{background:var(--charcoal);color:#fff;line-height:normal; padding:clamp(46px,6vw,72px) clamp(20px,5vw,64px) clamp(28px,3.5vw,38px)} .foot-grid{max-width:1120px;margin:0 auto;display:grid;gap:clamp(28px,4vw,56px); grid-template-columns:1.5fr 1fr 1fr;align-items:start} .foot-brand .mark{font-family:var(--script);font-size:1.95rem;color:#fff;line-height:1} .foot-brand p{margin-top:12px;font-family:var(--body);font-size:.92rem;line-height:1.6;color:#b9b9bd;max-width:36ch} .foot-brand .tag{margin-top:14px;font-family:var(--script);font-size:1.5rem;color:var(--aqua)} .foot-col h3{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--pink)} .foot-col ul{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:10px} .foot-col a{color:#e7e7ea;text-decoration:none;font-family:var(--body);font-weight:600;font-size:.95rem;transition:color .16s ease} .foot-col a:hover,.foot-col a:focus-visible{color:var(--aqua)} .foot-social{display:flex;gap:12px;margin-top:16px} .foot-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09); display:flex;align-items:center;justify-content:center;color:#fff;transition:background .16s ease,transform .16s ease} .foot-social a:hover,.foot-social a:focus-visible{background:var(--magenta);transform:translateY(-1px)} .foot-social svg{width:20px;height:20px} .foot-bar{max-width:1120px;margin:clamp(32px,4vw,50px) auto 0;padding-top:22px; border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between; gap:12px;flex-wrap:wrap;font-family:var(--body);font-size:.8rem;color:#9a9aa0} @media(max-width:720px){ /* brand block spans the top full-width; the two short link lists sit side by side beneath it so the footer stays compact instead of one long stack. */ .foot-grid{grid-template-columns:1fr 1fr;gap:26px clamp(18px,6vw,40px)} .foot-brand{grid-column:1/-1} .foot-bar{flex-direction:column;gap:8px} } /* ---- subpage header photo ------------------------------------------------- Sits opposite the header copy, echoing the home hero's copy-left / photo-right split so Menu / Locations feel part of the same family. The same slot takes a real photo now OR a generated branded image later — just swap the . On wide screens it floats to the side; on mobile it drops into a full-width banner so the header keeps a photo instead of a bland flat colour block. */ .head-photo{position:absolute;z-index:1;right:clamp(16px,4vw,56px);top:52%; transform:translateY(-50%);width:clamp(300px,32vw,430px);aspect-ratio:4/5; border-radius:22px;overflow:hidden;box-shadow:0 22px 50px rgba(46,46,48,.20);pointer-events:none} .head-photo img{width:100%;height:100%;object-fit:cover;display:block} /* mobile: photo becomes a full-width in-flow banner under the copy (kills the empty aqua dead-zone the hidden desktop slot used to leave). Landscape 16:9 frame reads well full-bleed for both the shopfront and the food shots. */ @media(max-width:900px){ .head-photo{position:static;transform:none;right:auto;top:auto;width:auto; aspect-ratio:16/9;margin:clamp(20px,5vw,28px) 0 0; border-radius:18px;box-shadow:0 14px 34px rgba(46,46,48,.16)} }