/** * Block pages (homepage rebuild 2026-09, inner pages converted after it). * * Scoped to .ssg-blocks-page (set on only for the front page and pages * on the "Blocks (full width)" template, and only when they are genuinely * block content) so nothing here can leak onto a page still rendered by * Elementor. Section classes are shared between the homepage and the inner * pages; the "Inner pages" section at the end holds what only they need. * * @package safari-specialists */ /* ------------------------------------------------------------------------- * Layout reset * * Tactiko's #primary/.site-main wraps every page in the theme's own boxed * container with vertical padding. The homepage sections carry their own * full-bleed backgrounds and spacing, so that wrapper has to get out of the * way - otherwise every alignfull section is inset and double-padded. * ---------------------------------------------------------------------- */ .ssg-blocks-page #primary, .ssg-blocks-page .site-main.ssg-blocks { max-width: none; width: 100%; margin: 0; padding: 0; } .ssg-blocks-page .site-main.ssg-blocks > * { margin-block: 0; } /* * Tactiko keeps 60px under the header on every page except its "Homepage" * template. A block page's first section is a full-bleed band that should * meet the navigation, as the homepage hero does. */ .ssg-blocks-page .site-header { margin-bottom: 0; } /* Section rhythm. Full-bleed sections constrain their own inner container. */ .ssg-blocks .ssg-section { padding-block: var(--wp--preset--spacing--60); } .ssg-blocks .ssg-section > .wp-block-cover__inner-container, .ssg-blocks .ssg-section > :not(.wp-block-cover__background):not(.wp-block-cover__image-background) { max-width: var(--wp--style--global--content-size, 1410px); margin-inline: auto; padding-inline: var(--wp--preset--spacing--30); width: 100%; box-sizing: border-box; } /* * Shared eyebrow: 14px 600 uppercase, 2px tracking - the site's "Sub Title". * brand-deep, not brand: at 14px semibold this is normal-size text and needs * 4.5:1 on white, which Safari Olive (3.5:1) misses. Buttons keep brand; their * white label is bold and large enough for the 3:1 tier. */ .ssg-blocks .ssg-eyebrow { margin: 0 0 0.75rem; color: var(--wp--preset--color--brand-deep); font-size: 0.875rem; font-weight: 600; line-height: 1.43; letter-spacing: 2px; text-transform: uppercase; } .ssg-blocks .ssg-eyebrow--light { color: var(--wp--preset--color--gold); } /* ------------------------------------------------------------------------- * Hero * ---------------------------------------------------------------------- */ .ssg-blocks .ssg-hero { position: relative; overflow: hidden; min-height: 72svh; min-height: 72vh; /* fallback ordering: svh wins where supported */ padding: 0; background-color: #1a1a1a; } @supports (min-height: 72svh) { .ssg-blocks .ssg-hero { min-height: clamp(420px, 72svh, 820px); } } /* * Poster image, shown until the video paints over it - no black flash. * max-width/margin are required because the hero is a layout container and * would otherwise cap this absolutely-positioned child to the content width. * container-type: size lets the video cover the hero's REAL box via cqw/cqh * rather than the viewport, which matters when the hero is taller than the * screen on a short landscape phone. */ .ssg-blocks .hero__bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; max-width: none; margin: 0; container-type: size; background-color: #1a1a1a; background-image: url("../images/ssg-hero-poster-final-8.jpg"); background-image: image-set( url("../images/ssg-hero-poster-final-8.avif") type("image/avif"), url("../images/ssg-hero-poster-final-8.webp") type("image/webp"), url("../images/ssg-hero-poster-final-8.jpg") type("image/jpeg") ); background-position: center; background-size: cover; background-repeat: no-repeat; } /* * Cover the hero at its real size, using container units, not the viewport. * The oversize-and-centre trick is required for the iframe, which ignores * object-fit entirely; a plain