/**
* polytec Stadium FSE — wrapper styles.
*
* Most styling is driven by theme.json (Global Styles). This stylesheet holds
* only what theme.json can't express:
*
* - header band layout (single row, wordmark left, nav right)
* - footer 3-col info area + acknowledgement flags + operator logos
* - socket sliver
* - event-card scaffolding for Stage 5 wiring
*/
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* ────────────────────────────────────────────────────────────
Accessibility — skip-link + screen-reader-text
(VL-BUILD-STANDARDS §2.1a).
`.skip-link` is the first focusable element in the DOM (lives in
parts/header.html before the header pattern). Visually hidden by default
via .screen-reader-text; becomes visible when keyboard-focused. Z-index
sits above the fixed header (100) so it doesn't get clipped on focus.
`.screen-reader-text` keeps the WP-standard name so assistive-tech testing
tools recognise the pattern.
──────────────────────────────────────────────────────────── */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
word-wrap: normal;
}
.skip-link:focus {
clip: auto;
clip-path: none;
height: auto;
width: auto;
display: block;
background: var( --wp--preset--color--charcoal );
color: var( --wp--preset--color--background );
font-family: inherit;
font-size: 0.9375rem;
font-weight: 700;
left: 1rem;
top: 1rem;
padding: 0.75rem 1.25rem;
text-decoration: none;
border-radius: 6px;
z-index: 100001;
}
/* ────────────────────────────────────────────────────────────
Mobile gutters (VL-BUILD-STANDARDS §14.7).
Replaces theme.json's useRootPaddingAwareAlignments (which we keep `false`
because that flag injects overflow-x:clip on , silently breaking
position:sticky on the header). Below 1100px we add gutters via direct CSS,
and let `alignfull` elements break back out via negative margins.
──────────────────────────────────────────────────────────── */
@media ( max-width: 1100px ) {
.wp-site-blocks { padding-inline: 1rem; }
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-template-part {
margin-inline: -1rem;
width: calc(100% + 2rem);
}
}
/* ────────────────────────────────────────────────────────────
Header — position-fixed black band with shrink-on-scroll
(VL-BUILD-STANDARDS §2.5).
Layout: wordmark left | nav + social right. Heights are LITERAL pixels
(CSS transitions can't interpolate `var()` or `clamp()` values, so the
shrink animation needs concrete numbers). JS in assets/js/animations.js
measures the rendered height into --header-height; .wp-site-blocks
reads that var to offset page content below the fixed band.
──────────────────────────────────────────────────────────── */
.wp-site-blocks {
padding-top: var(--header-height, 80px);
}
.site-header {
position: fixed !important;
top: var(--wp-admin--admin-bar--height, 0px) !important;
left: 0 !important;
right: 0 !important;
z-index: 100;
width: 100%;
height: 80px;
border-bottom: 1px solid var(--wp--preset--color--charcoal-deep);
transition: height 0.25s ease, box-shadow 0.25s ease;
display: flex;
align-items: center;
}
.site-header.is-shrunk {
height: 60px;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.site-header__inner {
width: 100%;
max-width: 1310px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--40);
}
/* Only add internal gutters when the viewport is narrower than the content
max-width — at wider viewports, the natural centring already gives the
header room and inner padding just pushes the wordmark + nav inward
unnecessarily. */
@media ( max-width: 1310px ) {
.site-header__inner {
padding-inline: var(--wp--preset--spacing--40);
}
}
.site-header__wordmark {
margin: 0;
flex-shrink: 0;
transition: max-width 0.25s ease;
}
.site-header__wordmark a {
display: block;
line-height: 0;
}
.site-header__wordmark img {
display: block;
width: auto;
max-width: 280px;
height: 42px;
transition: height 0.25s ease;
}
.site-header.is-shrunk .site-header__wordmark img {
height: 32px;
}
.site-header__right {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--60);
}
/* Primary nav — bumped one tick for legibility on the dark band */
.site-header__nav.wp-block-navigation {
font-size: 1.0625rem;
font-weight: 600;
row-gap: 0.25rem;
}
.site-header__nav .wp-block-navigation-item__content {
padding: 0.25rem 0;
}
/* Social icons — square logos-only mode, sized to read on the band.
Nudged down a few px so the geometric centre of the icons lines up with
the optical centre of the nav text (text reads higher than its line-box
centre, so flex centering alone leaves the icons looking too high). */
.site-header__social.wp-block-social-links {
gap: 0.4rem !important;
transform: translateY(3px);
}
/* Hide the in-header socials at narrow viewports — by the time the
hamburger is visible there isn't room for wordmark + socials + button
without crowding. The footer socket still carries the social icons so
they remain reachable just below-the-fold.
!important is needed: WP core ships `.wp-block-social-links.is-layout-flex
{ display: flex }` at 0,2,0 specificity, which beats our 0,1,0 class
selector in the cascade. */
@media ( max-width: 768px ) {
.site-header__social {
display: none !important;
}
}
.site-header__social .wp-block-social-link {
width: 26px;
height: 26px;
}
.site-header__social .wp-block-social-link svg {
width: 18px;
height: 18px;
}
.site-header__social .wp-block-social-link a:hover {
transform: translateY(-1px);
transition: transform 0.12s ease;
}
/* When admin-bar offsets the fixed header, also offset the content. */
.admin-bar .wp-site-blocks {
padding-top: calc(var(--header-height, 80px));
}
/* ────────────────────────────────────────────────────────────
Hamburger breakpoint extension (VL-BUILD-STANDARDS §14.7).
WP's wp:navigation `overlayMenu="mobile"` flips to inline nav at
600px. We want the hamburger to remain the only access method up to
1200px (6 nav items + dropdown caret + bigger font would otherwise
crowd alongside the wordmark + socials between ~600-1200px). The
override hides the inline container + shows the toggle button across
the extended 600-1200 range. Below 600 WP's native rules already do
the same thing, so the override and WP's defaults agree there.
──────────────────────────────────────────────────────────── */
@media ( min-width: 600px ) and ( max-width: 1200px ) {
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none !important;
}
.site-header .wp-block-navigation__responsive-container-open {
display: flex !important;
color: var(--wp--preset--color--background);
}
}
/* Hamburger button hover / focus — uses currentColor on the SVG so a
simple opacity bump signals interactivity without needing an accent. */
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:focus-visible {
opacity: 0.7;
}
/* Scroll lock when drawer is open — global (safe because .is-menu-open
only exists when the drawer is open). */
body:has( .wp-block-navigation__responsive-container.is-menu-open ) {
overflow: hidden;
}
/* ────────────────────────────────────────────────────────────
Hamburger drawer (VL-BUILD-STANDARDS §2.3).
Slide-in panel from the right covering ~320px / 85vw, dark backdrop
over the rest of the viewport. The position:fixed rules MUST stay
inside the mobile media query — at desktop they would permanently
cover the inline nav.
──────────────────────────────────────────────────────────── */
@media ( max-width: 1200px ) {
/* Dimmed backdrop */
.site-header .wp-block-navigation__responsive-close {
position: fixed !important;
inset: 0 !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 9998 !important;
}
/* Container reset — transparent full-viewport wrapper */
body .site-header .wp-block-navigation__responsive-container.is-menu-open {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background: none !important;
z-index: 9998 !important;
box-shadow: none !important;
padding: 0 !important;
animation: none !important;
overflow: visible !important;
}
/* Drawer panel — slides in from right */
.site-header .wp-block-navigation__responsive-dialog {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
width: 320px !important;
max-width: 85vw !important;
height: 100dvh !important;
background: var(--wp--preset--color--ink) !important;
z-index: 9999 !important;
overflow-y: auto !important;
padding: calc( var(--header-height, 80px) + 0.5rem ) 2rem 2rem !important;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35) !important;
animation: site-drawer-in 0.25s ease-out !important;
display: flex !important;
flex-direction: column !important;
}
@keyframes site-drawer-in {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Close (X) button — absolute (not fixed) inside the dialog so it
moves with the drawer's translateX animation. */
.site-header .wp-block-navigation__responsive-container-close {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
width: 4rem !important;
height: var(--header-height, 80px) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 1 !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
color: var(--wp--preset--color--background) !important;
}
/* Nav container inside drawer — column-stacked items */
.site-header .is-menu-open .wp-block-navigation__container {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 0 !important;
}
.site-header .is-menu-open .wp-block-navigation-item {
width: 100% !important;
}
}
/* Nav item links inside the drawer — full-width stacked, divider rule. */
.site-header .is-menu-open .wp-block-navigation-item__content {
display: block !important;
width: 100% !important;
padding: 0.875rem 0 !important;
text-align: left !important;
color: var(--wp--preset--color--background) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* ────────────────────────────────────────────────────────────
Membership page — long-scroll rebuild (2026-05-20)
──────────────────────────────────────────────────────────── */
/* Sticky anchor nav — sits below the fixed header. Uses the JS-measured
--header-live-height so it tracks the header's shrunk state (60px once the
user scrolls past 60px). Falls back to --header-height (unshrunk = 80px,
used for .wp-site-blocks document offset) if the live var isn't set yet
— that's the correct value before scroll anyway. WP core's
--wp-admin--admin-bar--height is auto-set when a logged-in admin is viewing
the front end (0 otherwise) — without this term, the sticky band slides up
behind the site-header when an admin scrolls. */
.membership-sticky-nav {
position: sticky;
top: calc( var( --header-live-height, var( --header-height, 80px ) ) + var( --wp-admin--admin-bar--height, 0px ) );
z-index: 50;
}
.membership-sticky-nav__inner {
width: 100%;
}
.membership-sticky-nav__anchors .wp-block-button__link {
font-size: 0.9375rem;
padding: 0.45rem 0.95rem;
}
.membership-sticky-nav .wp-block-button__link {
border-radius: 999px;
}
/* Benefit cards — 6-up grid. Each card is bounded by a 1px rule border on a
white bg (matching .pricing-card lower on the page so the membership page
reads with one consistent card vocabulary). Icon sits inside a 48x48
surface-2 tile inside the card; heading + body stack beneath. The card
border anchors the group, the inner tile gives the icon visual weight. */
.benefit-card {
background: var( --wp--preset--color--background );
border: 1px solid var( --wp--preset--color--rule );
border-radius: 12px;
padding: 1.5rem;
height: 100%;
text-align: center;
}
.benefit-card__icon {
display: block;
box-sizing: border-box;
width: 48px;
height: 48px;
padding: 10px;
margin: 0 0 1rem;
background: var( --wp--preset--color--surface-2 );
border-radius: 10px;
color: var( --wp--preset--color--charcoal );
}
/* Event tiles — minimal cards, used in the "What you'll see" grid. */
.event-tile {
background: var( --wp--preset--color--background );
border: 1px solid var( --wp--preset--color--rule );
border-radius: 8px;
padding: 1rem 1.1rem;
min-height: 100%;
}
/* Pricing cards — featured one wears a thicker charcoal border (no accent
colour in the monochrome palette, charcoal IS the brand secondary). */
.pricing-card {
border: 1px solid var( --wp--preset--color--rule );
border-radius: 12px;
padding: 1.75rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pricing-card--featured {
border-width: 2px;
border-color: var( --wp--preset--color--charcoal );
position: relative;
}
.pricing-card__badge {
display: inline-block;
align-self: flex-start;
background: var( --wp--preset--color--charcoal );
color: var( --wp--preset--color--background );
padding: 0.2rem 0.7rem;
border-radius: 999px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.25rem;
}
.pricing-card__price {
margin: 0.25rem 0 0.5rem;
}
/* Media-text seating block — keep a sensible cap so the seating map
doesn't dominate the screen on wide viewports. */
.wp-block-media-text .wp-block-media-text__media img {
max-width: 100%;
height: auto;
}
/* ────────────────────────────────────────────────────────────
Corporate Hospitality page — duplicate cards (Private Suites /
Open Boxes) with decision tag, image, icon-led benefits list,
then a single CTA. Layout is two equal columns above 782px;
stacks below. The two cards share the same shell (.hospitality-card)
so the structure stays visually parallel — buyer compares like-for-like.
──────────────────────────────────────────────────────────── */
.hospitality-card {
background: var( --wp--preset--color--background );
border: 1px solid var( --wp--preset--color--rule );
border-radius: 10px;
padding: 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
}
.hospitality-card__media {
margin: -1.5rem -1.5rem 0;
}
.hospitality-card__media img {
width: 100%;
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: block;
}
.hospitality-card__tag {
display: inline-block;
align-self: flex-start;
background: var( --wp--preset--color--charcoal );
color: var( --wp--preset--color--background );
padding: 0.3rem 0.75rem;
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
margin: 0;
}
/* Benefits stack inside a hospitality card — icon + body row. */
.hospitality-benefits {
margin: 0;
padding: 0;
}
.hospitality-benefit {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.hospitality-benefit p {
margin: 0;
line-height: 1.45;
}
.hospitality-benefit__icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var( --wp--preset--color--charcoal );
margin-top: 0.1rem;
}
/* "Why polytec for hospitality" — 3-up reassurance band, white-on-charcoal. */
.why-card {
text-align: center;
padding: 0.5rem 0.75rem;
color: var( --wp--preset--color--background );
}
.why-card__icon {
display: block;
margin: 0 auto 0.85rem;
color: var( --wp--preset--color--background );
}
.why-card h3 {
color: var( --wp--preset--color--background );
}
/* Page-hero overlay text (corporate hospitality + future cover-based heroes).
The wp:cover useFeaturedImage:true template renders with no inner content;
pages that put their OWN wp:cover with inner content into the body need
the inner heading + paragraph to read on the dimmed background. */
.wp-block-cover.page-hero .wp-block-cover__inner-container :where(h1, h2, p) {
color: var( --wp--preset--color--background );
text-shadow: 0 2px 18px rgba( 0, 0, 0, 0.35 );
}
/* ────────────────────────────────────────────────────────────
VL house pattern — inner-page hero (VL-BUILD-STANDARDS §14.8).
page.html / single.html / single-event.html each render a
wp:cover {"useFeaturedImage":true} with className page-hero / post-hero /
event-hero. The cover block uses object-fit:cover natively; object-position
defaults to 50% 50% but the polytecstadium plugin's `Hero Focal Point` ACF
fields + the theme's `render_block` filter override it per-post.
──────────────────────────────────────────────────────────── */
.wp-site-blocks > .wp-block-cover.page-hero,
.wp-site-blocks > .wp-block-cover.post-hero,
.wp-site-blocks > .wp-block-cover.event-hero {
margin-block-start: 0 !important;
}
/* VL fleet hero standard (2026-06-01) — viewport-relative height, clamped.
Replaces the old fixed-px caps (page/post 430–550px, event 550–700px) so
heroes scale with the viewport instead of looking thin on large monitors /
oversized on small ones. clamp(floor, Xdvh, ceiling): the floor keeps a
usable hero on short screens, the ceiling stops 4K monitors getting an
absurd hero (and needing a 4K-tall source); dvh avoids the mobile address-
bar jump. !important is required to beat the cover block's INLINE
min-height (page/post 430px, event 550px set via the template minHeight attr). */
/* Tier height is governed by CLASS, wherever the hero cover sits — the theme's
template hero (direct child of .wp-site-blocks) AND any author-built cover
placed in page content that carries the same hero class. Governing by class
rather than DOM position keeps every hero consistent (e.g. /corporate-
hospitality/ uses an authored cover with overlay copy; /getting-here/ uses
the template hero — both must land on the same tier). */
/* Compact hero (Tier 3) — standard content pages + posts. */
.wp-block-cover.page-hero,
.wp-block-cover.post-hero {
min-height: clamp( 260px, 45dvh, 460px ) !important;
}
/* Impact hero (Tier 1) — event/key-landing heroes get the full-bleed
homepage-grade treatment. Designer banner art lives here; the contain toggle
(below) handles off-ratio creative that must show whole. */
.wp-block-cover.event-hero {
min-height: clamp( 480px, 75dvh, 840px ) !important;
}
/* "Show full banner image" mode (ACF hero_image_contain = true) — the cover
stops cropping and instead letterboxes the image inside a surface-2 grey
background. Use for marketing banners where the entire artwork must be
visible regardless of viewport aspect. */
.wp-block-cover.hero--contain {
background-color: var( --wp--preset--color--surface-2 ) !important;
}
.wp-block-cover.hero--contain .wp-block-cover__image-background {
object-fit: contain !important;
}
/* The dim overlay would tint the grey letterbox bars — kill it in contain mode. */
.wp-block-cover.hero--contain .wp-block-cover__background {
display: none;
}
/* Same "contain" treatment applied to event-grid card thumbnails (rendered
via wp:post-featured-image inside the Query Loop). The card image keeps
its 16:9 aspect ratio box, but the banner art letterboxes inside the
surface-2 grey instead of cropping at the edges. */
.wp-block-post-featured-image.hero--contain {
background-color: var( --wp--preset--color--surface-2 );
}
.wp-block-post-featured-image.hero--contain img {
object-fit: contain !important;
}
/* No featured image on the post -> the cover renders an empty container
(no ![]()
). Collapse it so we
don't get an empty min-height: 430px band sitting under the header. */
.wp-block-cover.page-hero:not(:has(.wp-block-cover__image-background)),
.wp-block-cover.post-hero:not(:has(.wp-block-cover__image-background)),
.wp-block-cover.event-hero:not(:has(.wp-block-cover__image-background)) {
display: none;
}
/* The home page hero (front-page.html's wp:image alignfull) still wants the
same flush-to-header behaviour — first-child alignfull after the header
sits without the default block-start margin. */
.wp-site-blocks > header + .alignfull,
.wp-site-blocks > header + figure.wp-block-image.alignfull,
.wp-site-blocks > header + .wp-block-cover.alignfull {
margin-top: 0;
}
/* WP applies a default 16px block-gap between siblings of .wp-site-blocks, so
ends up with margin-block: 16px and