/* Morris Artists — sticky site header (all pages) + the artist section nav stacked beneath it. * * FRONT END ONLY: enqueued on wp_enqueue_scripts and deliberately NOT on enqueue_block_assets. * position:sticky fights the Site Editor canvas, and the stacked .ma-nav offset below is simply * wrong in the post editor, where there is no site header above the section nav — the owner would * see it floating with a blank gap above it. * * Geometry contract (site.css owns the :root defaults; roster.js measures the two real heights): * --ma-adminbar WP admin bar height WHILE FIXED (0 logged out, 0 once it scrolls away) * --ma-header-h measured height of the site header * --ma-subnav-h measured height of the artist .ma-nav (0 on every other page) * --ma-stick-header the header height AS USED FOR OFFSETS — 0 wherever the header is not stuck * --ma-stick-gap breathing room between the bars and an anchored / focused target */ /* --- WP admin bar (logged-in owner only) --------------------------------------------------------- Verified in core: #wpadminbar is position:fixed at 32px; it becomes 46px at <=782px, and at <=600px it switches to position:absolute — at which point it SCROLLS AWAY and must not be offset for at all. :has() puts this on , which is where scroll-padding-top is read; a custom property set on would not reach it. Browsers without :has() lose only the owner's 32px nudge, never the layout. */ html:has(body.admin-bar){ --ma-adminbar: 32px; } @media screen and (max-width: 782px){ html:has(body.admin-bar){ --ma-adminbar: 46px; } } @media screen and (max-width: 600px){ html:has(body.admin-bar){ --ma-adminbar: 0px; } } /* --- The site header ----------------------------------------------------------------------------- The sticky element is the

WRAPPER that core/template-part emits, NOT .ma-header. .ma-header is that wrapper's only child, and a sticky box can only travel inside its containing block — so sticking .ma-header would pin it inside a parent exactly its own height and move nothing at all, looking for all the world like the CSS never applied. .wp-site-blocks is display:flex/column (site.css) — sticky flex items are fine — and its overflow-x:clip (theme style.css) is a CLIP, not a scroll container, so it does not capture the sticky the way overflow:hidden would. */ .wp-site-blocks > header.wp-block-template-part{ position: sticky; top: var(--ma-adminbar, 0px); z-index: 30; /* > .ma-nav's 20, so the section nav slides UNDER the header */ } /* Offsets read this rather than --ma-header-h directly, so the short-viewport escape below can zero it without fighting the inline --ma-header-h that roster.js writes onto . */ :root{ --ma-stick-header: var(--ma-header-h, 5rem); } /* --- The artist section nav, stacked beneath the header ------------------------------------------- Higher specificity than artist-profile.css's own `.ma-nav{ top:0 }` so this wins whichever order the two stylesheets happen to print in. */ .wp-site-blocks .ma-nav{ top: calc(var(--ma-adminbar, 0px) + var(--ma-stick-header)); } /* --- Short viewports: never let two bars eat the page --------------------------------------------- At 400% zoom on a 1280x1024 screen the CSS viewport is ~320x256, and landscape phones are ~390px tall; two stacked bars would take half of that or more. WCAG 2.2 SC 1.4.10 (Reflow), and SC 2.4.11 by attrition. Below this height the site header returns to the flow and only the short in-page section nav stays stuck. This rule is required, not a nicety. */ @media (max-height: 500px){ .wp-site-blocks > header.wp-block-template-part{ position: static; } :root{ --ma-stick-header: 0px; } } /* Paper has no viewport to stick to; a sticky box in print can repeat or float. */ @media print{ .wp-site-blocks > header.wp-block-template-part{ position: static; } }