/* ========================================================= SHOAIB SALON — hero The salon's own banner artwork across the top, with the statement copy centred beneath it. The artwork is 2000x750 with the wordmark, tagline and address set into it, so it is shown WHOLE — the frame carries that same 8:3 ratio and there is no max-height anywhere. A height clamp on a fixed-ratio box is exactly what crops it. Height on a short, wide window is instead controlled by capping the banner's WIDTH off the viewport height, which scales the picture down rather than cutting into it. Nothing is ever cropped. Nothing is laid over it either. The artwork is already composed — its own lettering occupies the left third — so an overlay or a badge would land on top of the address. Loads after styles.css. ========================================================= */ .hero{ position:relative; background:var(--ink); /* Just enough to clear the fixed nav — any more reads as a dark band above a full-bleed image. */ padding:clamp(74px,8vw,98px) 0 clamp(56px,7vw,88px); overflow:hidden; isolation:isolate; } /* A soft pool of the brand green behind the composition. */ .hero__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(58% 62% at 72% 34%, rgba(24,59,30,.62) 0%, rgba(24,59,30,0) 68%), radial-gradient(46% 50% at 12% 78%, rgba(201,162,39,.10) 0%, rgba(201,162,39,0) 70%); } /* ---------- Banner ---------- */ /* Full bleed: no wrapper, no gutters, no width cap — the banner runs edge to edge of the viewport. The section itself has no horizontal padding, so width:100% here is the full screen width. */ .hero__banner-wrap{ position:relative; z-index:2; width:100%; margin-bottom:clamp(34px,5vw,60px); } .hero__banner{ /* The artwork's own ratio. No max-height: a height clamp is what crops a fixed-ratio box, and this must stay WHOLE — the wordmark, the tagline and the address are all set into the picture, so anything cut off is words lost. At 8:3 a full-width banner stays shorter than the viewport on every normal screen, so no cap is needed to keep it from overflowing. */ position:relative; /* The walk-in's own ratio, matching both the poster served above 620px and the video that replaces it - 1440x810 and 1920x1080 are the same 1.7778 to four decimals, so the handover moves nothing. */ aspect-ratio:1920/1080; } /* Must track the breakpoint exactly. If the box ratio and the chosen file ever disagree, object-fit:cover below would crop the difference away — which is the one thing this banner must never do. */ @media (max-width:620px){ /* True 9:16, and the exact ratio of BOTH the portrait poster (720x1280) and the portrait video (1080x1920). They agree to four decimals, so object-fit:cover has nothing to shave off and the handover from still to video moves nothing. */ .hero__banner{ aspect-ratio:9/16; } } .hero__banner picture{ display:block; width:100%; height:100%; } .hero__banner img{ width:100%; height:100%; /* Box and image share a ratio, so cover and contain are identical here — cover simply avoids a hairline gap from rounding. */ object-fit:cover; object-position:50% 50%; } /* The shared .media slot styles every photo on the site for a card: it rounds the corners, puts a grayscale/sepia grade over the picture and scales it on hover. All three are wrong here. This banner is not a photo in a card — it is finished artwork, run full width, and the ask was for it EXACTLY as supplied. A grade would shift its colour away from the file, rounded corners would cut into a full-bleed frame, and nothing spanning the top of the page should move under the pointer. */ .hero__banner{ /* A frame that runs to the edges of the screen should not have corners rounded off against them. */ border-radius:0; } .hero__banner img{ /* .media puts a grayscale/sepia film grade on every photo on the site. A