/* * HOMEPAGE — front-page.php (§4.1). Fullscreen carousel, no scrollbars. * * Structure (front-page.php): * .home-stage fixed full-bleed carousel + overlay (behind) * template-parts/carousel → .home-carousel (Swiper) + arrows * template-parts/background (overlay_only) → .site-background__overlay * .home-content fixed full-viewport layer holding the centered UI * .home-content__branding logo, top-center * .home-content__nav menu, dead-center * .home-content__social social icons, bottom-center * * `.home-content` itself is pointer-events:none so clicks pass through the * empty areas to the carousel arrows underneath it; only its three direct * children (which actually hold interactive links) re-enable pointer * events. Mobile-first: base rules are mobile values, the 768px override * carries the desktop values (§3.5). */ /* --------------------------------------------------------------------- * Fullscreen shell — no scrollbars. 100svh dodges the mobile URL-bar jump. * --------------------------------------------------------------------- */ body.home { width: 100vw; height: 100svh; overflow: hidden; } /* --------------------------------------------------------------------- * Admin-bar compensation. Logged-in, WP adds `margin-top` to for * the fixed #wpadminbar (32px desktop / 46px at WP's own ≤782px * breakpoint), which pushes the 100svh body past the viewport and opens * up exactly that much vertical scroll. Shrink the fullscreen height by * the admin-bar height so the two add back up to 100svh. Logged-out * visitors have no `.admin-bar` class, so the 100svh rules above stay * untouched for them. 32/46/782 are WP-fixed literals, not tokens. * --------------------------------------------------------------------- */ body.home.admin-bar { height: calc(100svh - 32px); /* WP admin bar height, desktop */ } body.admin-bar .home-content { height: calc(100svh - 32px); } @media (max-width: 782px) { /* 782px matches WP's own #wpadminbar responsive breakpoint. */ body.home.admin-bar { height: calc(100svh - 46px); /* WP admin bar height, ≤782px */ } body.admin-bar .home-content { height: calc(100svh - 46px); } } /* --------------------------------------------------------------------- * Background layer: carousel + single shared overlay, fixed behind * everything else on the page. * --------------------------------------------------------------------- */ .home-stage { position: fixed; inset: 0; overflow: hidden; z-index: 0; } /* The overlay (template-parts/background.php, overlay_only) sits above the carousel image but below the foreground UI — override its default global fixed/-1 positioning (components.css §2) to be scoped to this stacking context instead. */ .home-stage .site-background { position: absolute; z-index: 1; } /* * BUGFIX (client feedback-01): the prev/next arrows were invisible/ * unclickable until `.site-background` was removed. Root cause — the * bundled Swiper CSS sets `.swiper { position: relative; z-index: 1; }`, * which makes `.home-carousel` (it carries the `.swiper` class) establish * its OWN stacking context at z-index 1, tied with `.site-background` * (also z-index 1) one level up in `.home-stage`. On a tie, the later * element in DOM order wins — and `.home-stage` renders the overlay * AFTER the carousel — so the overlay painted over the ENTIRE swiper * stacking context, arrows included, no matter what z-index the arrows * had *inside* that context. * * Fix: cancel the stacking context Swiper puts on `.home-carousel` itself * (higher-specificity selector than the vendor's bare `.swiper` so this * wins regardless of stylesheet load order). Its positioned descendants * (`.swiper-wrapper`/slides and the arrow buttons) then participate * directly in `.home-stage`'s own stacking context instead: the slides * stay tied with `.site-background` (so the overlay still paints on top * of the images, preserving the tint) while the arrows' own z-index: 2 * now finally applies where it matters, above both. */ .home-stage .home-carousel { position: relative; z-index: auto; width: 100%; height: 100%; } .home-carousel .swiper-wrapper, .home-carousel .swiper-slide { width: 100%; height: 100%; } .home-carousel__image { width: 100%; height: 100%; object-fit: cover; /* Decorative background layer only — never intercept clicks meant for the arrows/UI above it (client feedback-01). */ pointer-events: none; } /* Graceful empty state (no slides configured yet). */ .home-carousel--empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; padding: 0 var(--sp-md); } /* Prev/next arrows — vertically centered, desktop-only (§4.1). */ .home-carousel__arrow { display: none; } @media (min-width: 768px) { .home-carousel__arrow { display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; /* client feedback-01 (inspector measurement): was oversized */ } /* Icon scales to fill the 30px button; height stays proportional (no fixed height is set on the button itself). */ .home-carousel__arrow img { width: 100%; height: auto; } .home-carousel__arrow--prev { left: var(--sp-xl); } .home-carousel__arrow--next { right: var(--sp-xl); } } /* --------------------------------------------------------------------- * Foreground UI: branding (top), nav (center), social (bottom) — each * absolutely positioned within the fullscreen `.home-content` layer so * every placement traces directly to its own token, independent of the * others' box sizes. * --------------------------------------------------------------------- */ .home-content { position: relative; z-index: 2; width: 100%; height: 100svh; pointer-events: none; } .home-content__branding, .home-content__nav, .home-content__social { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto; } .home-content__branding { top: var(--sp-3xl); /* mobile: 70px from top */ } .home-content__branding .site-branding--home { width: var(--logo-mobile); } .home-content__nav { top: 50%; transform: translate(-50%, -50%); } .home-content__social { bottom: var(--sp-md); /* 30px from bottom, both breakpoints */ top: auto; transform: translateX(-50%); } /* Mobile nav: vertical, centered, sp-xl gap between items (§4.1). */ .primary-menu--home { flex-direction: column; gap: var(--sp-xl); } @media (min-width: 768px) { .home-content__branding { top: var(--sp-4xl); /* desktop: 100px from top */ } .home-content__branding .site-branding--home { width: var(--logo-home); } /* Desktop nav: horizontal, centered — revert the mobile column stack. */ .primary-menu--home { flex-direction: row; gap: var(--sp-lg); } }