that id. This file previously styled an .bwp-skip-link that no markup emitted, * under a comment claiming core does not provide one. Both halves were wrong: dead CSS, * and a false statement that would have sent the next reader to fix a non-problem. * * Verified against core source, not documentation, on 2026-08-20. */ /* * Whole-box clickable cards. * * Standing rule: a card with ONE destination must be clickable across its whole box, not * only on the title. The title link is stretched to cover the card, and the card itself * carries the hover and focus-within states so keyboard users see the same affordance. */ .bwp-card { position: relative; transition: transform 120ms ease, box-shadow 120ms ease; } .bwp-card:hover, .bwp-card:focus-within { transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); } .bwp-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } @media (prefers-reduced-motion: reduce) { .bwp-card { transition: none; } .bwp-card:hover, .bwp-card:focus-within { transform: none; } } /* * Current-page state on the navigation. * * The menu is custom links (patterns/nav.php), which core never marks as current. The * theme's nav filter (functions.php, bwp_theme_nav_current_state) sets aria-current="page" * on the matching link, and this styles that attribute, so what a screen reader announces * and what the visitor sees cannot disagree. 500, not 600: the 600 face was one file * downloaded on every page for this one rule. */ .wp-block-navigation a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; font-weight: 500; } /* * Header -- a DELIBERATE departure from FSE standards Rule 13 (opaque sticky header). * * Bill's current site floats the menu OVER the hero photo, and Task 2 keeps the design, so * the header is `position: fixed` and transparent at the top (recorded in the project's * architecture map). Rule 13's sticky trap still applies to anyone changing this back: sticky * must go on the

wrapper, never on a group inside * parts/header.html, where it silently does nothing. * * A fixed header takes no space, so the page must leave room for it. That is * --bwp-header-clearance, and it is USED in three places below: the hero cover's top padding, *

on any page without a .bwp-hero, and scroll-padding-top so the * skip link and in-page anchors do not land under the bar. * * Solid on scroll: a CSS scroll-driven animation fades a ::before layer in, no JavaScript. * Opacity rather than background-color, so it can run on the compositor instead of * repainting the bar each frame. Browsers without animation-timeline show the layer from the * start, so the menu is always legible. * * The admin-bar offsets are not optional: without them a logged-in reviewer (the client, * during review) sees the header pinned underneath the admin bar and reports it as broken. * * ⚠️ Cannot be confirmed by grep. Screenshot top-of-page and mid-scroll, logged out, * desktop and mobile. */ :root { --bwp-header-clearance: 9rem; /* Plus the sign-up bar when it is showing, or focus and anchors land under the header (WCAG 2.4.11). */ scroll-padding-top: calc(var(--bwp-header-clearance) + var(--bwp-topbar, 0px)); } /* * --bwp-topbar: the Mailchimp sign-up bar's height when it is on the page (assets/js/topbar-offset.js), * else 0. gets the same padding the plugin applies a frame later, so nothing moves when it * does. ⛔ No !important: that overrides the plugin's close/reopen transition and each one then * counts as layout shift (performance review, 2026-09-29). */ body { padding-block-start: var(--bwp-topbar, 0px); } header.wp-block-template-part { position: fixed; inset-inline: 0; inset-block-start: var(--bwp-topbar, 0px); z-index: 100; } header.wp-block-template-part::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: color-mix(in srgb, var(--wp--preset--color--base-3) 92%, transparent); } @supports (animation-timeline: scroll()) { header.wp-block-template-part::before { /* A page with nothing to scroll (Home: one-screen slideshow) leaves the timeline inactive and the animation unapplied, so the base must be the transparent start state. */ opacity: 0; animation: bwp-header-solid linear both; animation-timeline: scroll(root); animation-range: 0 12rem; } @keyframes bwp-header-solid { from { opacity: 0; } to { opacity: 1; } } } /* * No hero photo to float over (posts, search, 404, the shop): the bar is solid from the top, * as the current site shows a dark band behind the menu on those pages. */ /* 0,1,2 like the rule above it; wins by coming after it. */ :where(body:not(:has(.bwp-hero))) header.wp-block-template-part::before { animation: none; opacity: 1; } /* * Any page without a hero starts below the bar; a hero carries the clearance itself. One rule * on