/* Theme Name: 9Hz Theme URI: https://9hz.hr Author: 9Hz Author URI: https://9hz.hr Description: Block theme for 9Hz — architecture & interior design studio (Zagreb + Adriatic coast). Pages are assembled drag-and-drop from locked patterns; the visual style lives in code (theme.json + block styles). Requires at least: 6.9 Tested up to: 7.0 Requires PHP: 8.2 Version: 0.7.86 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: 9hz Tags: block-theme, full-site-editing, portfolio, custom-colors, custom-menu, block-patterns, translation-ready */ /* * Global-only CSS: a11y helpers + a few homepage layout pieces that aren't tied to a single * block (hero wordmark/collage overlap, giant footer logo). Design tokens live in theme.json. */ /* Text renders at the size we set it, on phones too. iOS Safari inflates text inside a block that is much wider than the viewport ("text autosizing"), and the marquee is exactly that shape: a nowrap track at `width: max-content`, several screens wide. On a real iPhone its 14px read as large as the 24px statement beside it (client report 2026-09-08), while every desktop browser and emulator measured the authored 14px — the boost only happens on the device, which is why it never showed up in QA. Opting out pins every size on the site to what theme.json and the blocks set, i.e. to what the Figma frames are drawn at. Also switches off Android Chrome's font boosting, same mechanism. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Overscroll ("rubber band") colour. When a phone lets you drag past the end of the page, the strip it exposes is painted with the CANVAS background, and the canvas takes its colour from — or, when has none, from , which theme.json paints white. That is why dragging past the blush footer used to flash white. Setting it here makes the footer look like it simply continues off the screen. Note this is one colour for BOTH ends of the document: the canvas background covers the whole canvas, so the strip above the header is blush too. There is no CSS way to give the two ends different colours — a fixed-attachment gradient would, but iOS Safari treats background-attachment:fixed as scroll. Inside the page nothing changes: still paints its own white over the full document height. */ background-color: var(--wp--preset--color--blush); } /* Visually-hidden (screen-reader) text */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute !important; word-wrap: normal !important; } /* Hero — the whole hero zone (heading + scattered images) is one block (ninehz/hero-scatter); its own CSS (16:9 zone, wordmark layer, positioned images) handles the layout, so the editor and the front render the exact same arrangement. The section just provides the side gutter. */ .ninehz-hero { position: relative; } /* First fold = one viewport. The hero fills 100svh minus the sticky header and the marquee, so the blush marquee lands exactly at the bottom of the first screen (no scroll). Desktop only — mobile keeps its portrait hero (handled in the mobile pass). --ninehz-header-h/--ninehz-marquee-h are exact BY CONSTRUCTION, not rounded guesses: each is the same sum of terms that actually sizes the real element (padding + text line-height + border), so it can never quietly drift out of sync the way the old hand-picked round numbers (60px/58px) did — that rounding alone left the marquee ~1.4–1.9px short of the viewport bottom. If .ninehz-header's or .ninehz-marquee's own padding/line-height/border ever changes, update the matching term here too. The marquee's track must stay a block-level flex container (display:flex, not inline-flex) — otherwise the parent line-box strut inflates the band beyond the text line and the token drifts. */ :root { --ninehz-header-h: calc(2 * 1.25rem + 16px * 1.1 + 1px); /* .ninehz-header: 2×1.25rem padding + 16px/1.1 nav line + 1px border-bottom */ --ninehz-marquee-h: calc(2 * 20px + 14px * 1.1); /* .ninehz-marquee: 2×20px padding + 14px/1.1 text line (see src/blocks/marquee/style.scss) */ --ninehz-adminbar-h: 0px; /* 0 for real visitors; set to the WP admin-bar height when logged in */ } /* Logged-in users get the 32px WP admin bar (desktop) which shifts content down; subtract it so the marquee stays flush at the viewport bottom in the editor/preview too. Real visitors keep 0. */ body.admin-bar { --ninehz-adminbar-h: 32px; } /* First-fold height, shared by both hero blocks: 100svh minus header + marquee so the blush marquee lands flush at the bottom of the first screen. Held in a custom property so the two media queries below reuse the same calc (no duplication). */ .ninehz-hero { --ninehz-firstfold-h: calc(100svh - var(--ninehz-header-h) - var(--ninehz-marquee-h) - var(--ninehz-adminbar-h)); } /* Desktop hero sizing (container cap + width-drives-height via the authored ratio) lives in each block's own CSS now: ninehz/hero-scatter uses 1440/908, ninehz/space-collage uses 1440/1024. That applies to the Studio hero AND the mid-page homepage collage (not inside .ninehz-hero). Only the mobile first-fold override below is hero-specific. */ /* Mobile: same first-fold contract for the collage — subtract the header + marquee so the blush marquee lands flush at the bottom of the first screen (Studio opens with the collage). Reuses the --ninehz-firstfold-h calc; only the header/marquee heights differ from desktop (mobile header is taller — measured identical to the homepage's mobile header; the marquee is shorter and, like desktop, exact by construction: 2×10px padding + 14px/1.1 text line = 35.4px. The old 36px was a measurement inflated by the parent line-box strut, before the track became block-level flex). */ @media (max-width: 600px) { .ninehz-hero { --ninehz-header-h: 69px; --ninehz-marquee-h: calc(2 * 10px + 14px * 1.1); } .ninehz-hero .ninehz-collage__stage { height: calc(100vh - var(--ninehz-header-h) - var(--ninehz-marquee-h) - var(--ninehz-adminbar-h)); /* fallback */ height: var(--ninehz-firstfold-h); } } /* First-fold flush (all widths). front-page.html zeroes post-content blockGap so the homepage hero sits flush under the header and the marquee lands exactly at the fold bottom. page.html (Studio et al.) keeps the default constrained block-gap (16px), which — via margin-collapse through the hero — offset the hero AND added a gap above the marquee, pushing it below the fold. Zero just those two, scoped to the .ninehz-hero first fold, so it behaves identically without changing spacing anywhere else. */ .ninehz-hero .ninehz-hero-scatter, .ninehz-hero .wp-block-ninehz-space-collage, .ninehz-hero + .ninehz-marquee { margin-block-start: 0; } /* Remove the root block-gap above

(hero flush under the header) and above the