/* =========================================================================== nope-ui.css - post-approval UI overrides Loaded AFTER nope.css, which is the approved baseline and is NOT edited (project memory, section 2.7). Everything in this file is an override and the whole layer is removed by deleting one in includes/head.php. Sections 1 and 2 touch no markup at all. mockups_test.php compares each page's rendered against its approved mockup - element skeleton including class names, visible text and attributes - so adding a wrapper or a class fails every page at once unless the mockup gains it too. Section 3 is the one exception, and it took that second route: the client asked for contact details on the site, .ftr-contact was added to the footer template AND to all seven mockups, so the contract still holds. Contains: 1. Hero - full-bleed to the viewport, square corners 2. Primary nav - pill container 3. Footer contact details =========================================================================== */ /* ---------- 1. Hero: full-bleed ----------------------------------------- */ /* * .wrap is what boxes the hero: max-width var(--maxw) plus gutter padding. * Released here only inside .hero, so every other .wrap on the page keeps the * approved measure. .hero > .wrap (0,2,0) outranks .wrap (0,1,0). */ .hero > .wrap { max-width: none; padding-inline: 0; } /* * padding-top on .hero existed to push the frame clear of the fixed header. * Dropped so the image reaches the top edge. The header is transparent until * it gains .is-stuck, and .hero-frame::after already lays a 0.72-alpha dark * wash across the top of the image, so the nav stays legible over it. * Hero copy is bottom-aligned (justify-content: flex-end), so nothing collides. */ .hero { padding-top: 0; } /* Rounded corners against a viewport edge read as a rendering fault. */ .hero .hero-frame { border-radius: 0; } /* * The frame now spans the viewport, but its content should still line up with * the .wrap column used by every section below it - otherwise the h1 hugs the * far left on a wide screen. * * The calc resolves to the gutter plus whatever .wrap would have left over as * dead space either side. Below --maxw that value goes negative and max() * falls back to the frame's original clamp, so narrow screens are unaffected. * 100% (frame width) rather than 100vw: 100vw includes the scrollbar. */ .hero .hero-frame { padding-inline: max( clamp(1.5rem, 4vw, 3.5rem), calc((100% - var(--maxw)) / 2 + var(--gutter)) ); /* * Clearance for the fixed header. * * REGRESSION FIXED HERE. Removing .hero's padding-top above is what makes the * image reach the top edge, but it also removed the only thing keeping hero * copy clear of the header. Desktop hid it: the content is bottom-aligned * (justify-content: flex-end) and the frame is far taller than the copy, so * the h1 sits low and nothing touches. On a phone the copy fills the frame, * the frame grows past its min-height, and the content then starts at the * frame's own padding-top - about 24px - which is UNDER a header roughly * 60px tall. The h1 rendered straight through the logo. * * Padding on the FRAME rather than on .hero, because the background image is * absolutely positioned to the frame's edges: this moves the copy down * without pulling the image away from the top of the viewport. * * 6.5rem, not the 5.5rem .hero used to carry. Measured rather than guessed: * the header is 84px tall on desktop, where the CTA button sets the height, * and about 76px on mobile, where that button is hidden and the 44px burger * sets it. 5.5rem is 88px and would clear desktop by four pixels. 6.5rem is * 104px and clears both properly, at no visual cost: this padding only has * any effect once the copy fills the frame, which is exactly the case that * broke. */ padding-top: max(clamp(1.5rem, 4vw, 3.5rem), 6.5rem); } /* ---------- 2. Primary nav: pill container ------------------------------ */ /* * The links were already individually pill-shaped (border-radius 100px in * nope.css). This gives the row itself a capsule. Scoped to the same 64rem * breakpoint nope.css uses to switch .nav from display:none to flex - outside * that range the burger menu is in charge and there is no row to enclose. * * .hdr .nav (0,2,0) outranks the baseline .nav rules (0,1,0). */ @media (min-width: 64rem) { .hdr .nav { padding: 0.3rem; border-radius: 100px; background: oklch(1 0 0 / 0.10); border: 1px solid oklch(1 0 0 / 0.14); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); transition: background-color .4s var(--ease), border-color .4s var(--ease); } /* * Once .is-stuck paints its own blurred bar behind the header, a pill at * full strength stacks two frosted panels and muddies. Ease it back. */ .hdr.is-stuck .nav { background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.10); } } /* ---------- 3. Footer contact details ----------------------------------- */ /* * The email and location list in the footer's brand column. It carries * .ftr-links as well, so the approved link colour, hover and the spacing * between items all come from nope.css and are not restated here. * * Two things that class does not cover, because every other footer list is * links the whole way down: * - the gap between the blurb paragraph above and this list; * - the location item, which is text rather than a link, so it inherits the * body colour and full body size and would otherwise sit louder than the * email directly above it. */ .ftr-contact { margin-top: var(--s-5); } .ftr-contact li { font-size: var(--fs-sm); color: var(--on-dark-mid); }