tags
are real flex items, not inline content subject to baseline rules —
confirmed near-symmetric, ~7.5px/8.5px, at measurement time.)
Making .site-header__brand a flex container too removes the inline
line-box mechanism entirely rather than compensating for it — no
vertical-align hack, no margin nudge, just the same layout method
already used correctly one flex item over. Re-measured after: the
48px-tall logo box now sits at the exact same top/bottom offsets
(7.5px / 8.5px, the ordinary 64-in-48 centering split every nav link
already had) as every nav link beside it — image-to-box centering
itself is a symmetric 3.4px/3.4px inside that box. The old ~7.2px
imbalance is gone; what's left is the same sub-pixel rounding already
present everywhere else in the row, not a logo-specific defect. */
.site-header__brand {
display: flex;
align-items: center;
}
.site-header__title a,
.site-header__logo-link {
text-decoration: none;
color: var(--color-ink);
}
/* Pass 33, Step 6: the logo LINK's clickable box, not the logo image
itself, must meet the 48px minimum — the artwork (assets/images/osta-
logo.png, a wide horizontal lockup) renders at 41px tall at its own
natural proportions under the existing max-height/max-width caps
below, which is correct for its appearance and not something this fix
changes. inline-flex + align-items centers that same image inside a
box that is guaranteed at least --tap-min tall, so the tappable area
grows without the artwork being stretched or cropped. */
.site-header__logo-link {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
}
/* The header is the same frosted-glass bar on every page now, including
over the front-page photo hero — its own light background is what
carries contrast for the logo/nav text sitting on it, not a text-
color swap the way the old fully-transparent overlay variant needed.
--color-ink is correct everywhere; no --site-header--overlay text
override exists to reintroduce. */
/* The logo is a 1:1 circular seal now, not the 5:1 horizontal lockup
the previous --space-8 cap was written for. Fixed height, auto
width, with a max-width as a backstop against an unexpectedly wide
asset. Scoped to .site-header__brand only — the footer logo (a
different wrapper, .footer-col--identity / .osta-logo) keeps its own
sizing below. */
/* Shape-agnostic on purpose: the logo file has changed aspect ratio
more than once during this build (circular seal, horizontal
lockup...), each time needing a different single-dimension cap
(height for a tall mark, width for a wide one) to avoid either
distorting the artwork or overflowing the header row. Constraining
both max-height and max-width at once, with width/height left auto,
makes the browser scale to whichever bound is tighter and keeps the
aspect ratio correct either way, without needing to know the shape
in advance. */
.site-header__brand img {
max-height: var(--space-10);
max-width: 200px;
width: auto;
height: auto;
}
.site-header__account {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* PASS 57: scoped down from .btn's own default sizing (--space-4
horizontal / --space-2 vertical padding, --text-body/18px font) —
correct for a page's own call-to-action button, but oversized sitting
inline next to the header's plain-text nav links. The button's real
problem wasn't min-height itself (that's the shared 48px tap-min
floor, unchanged and still required) — it was that 16px vertical
padding plus an 18px line box pushed the button's OWN rendered height
to ~59px, well past the 48px every other header element actually
measures, which is what read as "too large" against a 64px bar. Padding
and font-size are cut here instead of touching min-height, exactly as
instructed: with the smaller padding/font, natural content height
drops under 48px, so min-height becomes the binding constraint again
and the button lands at exactly 48px — measured after this change, not
assumed. Scoped to this one class, not .btn itself, so no other button
anywhere else on the site is affected. */
.site-header__join {
flex-shrink: 0;
min-height: var(--tap-min);
padding-block: var(--space-1);
padding-inline: var(--space-3);
/* PASS "Fix the accessibility failures found by the component
inventory", item 2 — the sitewide Join button, was --text-small
(16px). min-height stays fixed via --tap-min regardless of the
larger font, so this doesn't change the button's height. */
font-size: var(--text-body);
}
/* Pass 26 — sized to the same minimum tap target as every other
interactive element in the header. PASS — Portal cleanup: the
notifications link moved to the portal sidebar (see header.php's own
docblock on osta_header_account_links()) — this rule used to also
cover .site-header__notifications, dropped since that class is no
longer output by this file. "My OSTA" was briefly dropped from here
too and is back per that same docblock's own correction — restored to
this shared rule rather than left as a one-off. */
.site-header__my-osta,
.site-header__logout {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
flex-shrink: 0;
font-weight: var(--weight-semibold);
white-space: nowrap;
}
/* ---- Mobile "Menu" toggle ----
Hidden without JS: a button that does nothing is worse than no button
— with .no-js the primary nav is simply always visible instead.
Hidden above the mobile breakpoint: the primary nav runs inline there. */
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-width: var(--tap-min);
background: transparent;
border: none;
color: var(--color-ink);
cursor: pointer;
}
.nav-toggle__icon-close {
display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-open {
display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close {
display: block;
}
.primary-nav__list {
display: flex;
align-items: center;
/* Restored to --space-4: the --space-3 reduction was only needed to
stop the header wrapping under the old ~310px-wide horizontal
logo. Since then the logo became a much narrower (~62px) circular
seal, so the row now has plenty of room on one line at the wider
gap again — verified at 1440px and 1280px. */
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
}
.primary-nav__list a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
font-size: var(--text-body);
font-weight: var(--weight-semibold);
color: var(--color-ink);
text-decoration: none;
}
/* Underline as a hover/focus affordance, not a permanent mark on every
link — back to Pass 9's original treatment (a later pass had turned
this on at rest; reverted per client feedback that it read as
cluttered across a six-item row). The CURRENT-page indicator further
down (.current-menu-item, a colored border) is a separate, always-on
signal and is untouched by this. */
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* Mobile-only duplicate of .site-header__account, living inside
.primary-nav so the same toggle/panel controls both — see
header.php's osta_header_account_links(). Hidden above the mobile
breakpoint (the real .site-header__account is what desktop shows). */
.primary-nav__account {
display: none;
}
/* ---- Submenu toggle buttons ----
Hidden without JS — the submenu list itself stays visible by default
so every link stays reachable. Applies at every breakpoint: submenus
are click-to-open everywhere, never hover-only — this audience
includes touch devices with no hover state at all, so hover-to-open
was never on the table here even though the reskin this section is
based on used it. */
.submenu-toggle {
display: none;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-width: var(--tap-min);
background: transparent;
border: none;
color: inherit;
cursor: pointer;
}
.js .submenu-toggle {
display: inline-flex;
}
.sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.js .sub-menu {
display: none;
}
.js .submenu-toggle[aria-expanded="true"] + .sub-menu {
display: block;
}
/* PASS 57: raised from the site's usual 767px mobile breakpoint to
1199px, for THIS block only. .site-header__brand/.primary-nav/.site-
header__account are all flex-shrink: 0 (deliberately, see that rule's
own comment above) — none of them compress, so the desktop row's
content width is fixed regardless of viewport. Adding "Home" and
"Contact" to the menu (this same pass, Step 2) grew that fixed width
past what fits below ~1120px — measured directly: the row stopped
overflowing its container only at 1120px and wider, tested in 5-30px
steps from 768px up. 767px, the OLD threshold, left a badly broken
~350px overflow with no wrap and no visible Join button, confirmed
live before this fix. 1199px (one below --container-max: 1200px)
keeps a real margin above that measured 1120px floor rather than
sitting right at the edge. Every OTHER 767px breakpoint in this file
is untouched — this is the nav's own switch-to-hamburger point only,
not the site's general mobile breakpoint. */
@media (max-width: 1199px) {
.js .nav-toggle {
display: inline-flex;
}
/* The header is fixed with JS, so the mobile panel can no longer just
push the row taller the way it could when the header sat in normal
document flow — it has to float above whatever is underneath it
instead, exactly like the front-page hero already floats behind
the header. Capped and scrollable so a very long menu never runs
off the bottom of a short phone screen.
Positioning applies unconditionally here (not gated to .js) — .no-
js needs this same panel too, just permanently visible instead of
toggle-controlled, since there is no toggle button without JS to
reveal it (.nav-toggle's own default is display: none, only shown
under .js below). Only the HIDDEN starting state is gated to .js —
the same split the pre-reskin version of this rule used, just
applied to a floating panel instead of an in-flow block. Without
that split a no-JS visitor would never see the nav at all: .js
.nav-toggle would never exist to be clicked, and .primary-nav
would default to display: none forever.
Pass 37: the ABSOLUTE part of this positioning is exactly what let
the always-visible no-JS panel float over the page instead of
pushing it down — .site-header going static above only fixes the
header's OWN box; .primary-nav has its own position:absolute here,
independent of its ancestor's position, and needed its own no-js
override to actually join normal flow. See .no-js .primary-nav
just below. */
.primary-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
background: var(--color-surface);
border-top: 1px solid var(--color-border-soft);
box-shadow: var(--shadow-hover);
padding: var(--space-3);
}
/* Pass 37 — join normal document flow: a static, auto-height block
participates in layout like anything else, so its full expanded
list pushes #main-content down instead of floating over it. The
max-height/overflow-y cap above existed only to keep an
absolutely-positioned overlay panel from running off the bottom of
the screen; a normal in-flow block has no such risk (the page
itself just scrolls), so both are lifted along with position. */
.no-js .primary-nav {
position: static;
max-height: none;
overflow-y: visible;
width: 100%;
}
/* .site-header__inner is still the same row flexbox (logo, toggle,
nav, account) it always is — taking .primary-nav out of absolute
positioning only stops it floating OVER the page, it doesn't stop
it sitting NEXT TO the logo as a flex item in that row, squeezed
into whatever width is left rather than stacking below at full
width. Wrapping the row is what actually puts it on its own line:
.site-header__brand (and the two hidden items) fill the first
line, then .primary-nav — already width: 100% above — has nothing
left to share it with and wraps to a full line of its own. */
.no-js .site-header__inner {
flex-wrap: wrap;
}
.js .primary-nav {
display: none;
}
.primary-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.primary-nav__list a {
width: 100%;
}
.js .nav-toggle[aria-expanded="true"] + .primary-nav {
display: block;
}
/* Notifications / My OSTA / Log Out (or Join OSTA) move into the
open panel on mobile — the desktop-only copy inline in the bar is
hidden here instead, so the account block appears exactly once,
never both hidden-and-shown at the same time. */
.site-header__account {
display: none;
}
.primary-nav__account {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-soft);
}
.primary-nav__account .site-header__join {
width: 100%;
}
}
/* ---- Current page indicator ---- */
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
color: var(--color-brand);
border-bottom: 3px solid var(--color-brand);
}
/* The header is fixed again — content needs top clearance for it.
Pages with a full-bleed hero (body.has-hero) handle that inside the
hero's own top padding instead, so the photo can extend full-bleed
behind the glass header; every other page (body.no-hero) adds it
here, to the actual content wrapper, once. See inc/design.php for
the has-hero/no-hero body_class filter. */
body.no-hero #main-content {
padding-top: var(--header-height);
}
body.admin-bar.no-hero #main-content {
padding-top: calc(var(--header-height) + 32px);
}
@media (max-width: 782px) {
body.admin-bar.no-hero #main-content {
padding-top: calc(var(--header-height) + 46px);
}
}
/* Pass 37 — this whole block exists to reserve space for a header
that has been taken OUT of the page's normal flow by position:
fixed. .no-js .site-header (above) puts it back INTO flow instead,
so with no JS the header already occupies real, counted space of
its own — reserving var(--header-height) again on top of that would
just push content down twice (a visible empty gap the exact height
of the header, admin bar or not). Every width and admin-bar variant
of the reservation gets zeroed the same way, at higher specificity
than each one it cancels so it wins regardless of source order. */
.no-js body.no-hero #main-content {
padding-top: 0;
}
.no-js body.admin-bar.no-hero #main-content {
padding-top: 0;
}
main {
scroll-margin-top: var(--header-height);
}
/* Same reasoning as the padding-top zeroing above: scroll-margin-top
exists to keep a same-page anchor jump from landing underneath a
fixed header. With no JS the header isn't fixed, so an anchor target
scrolled to the very top of the viewport is already fully visible —
reserving margin for a header that's no longer floating would only
leave an unnecessary gap above the target. */
.no-js main {
scroll-margin-top: 0;
}
/* ==========================================================================
FOOTER
========================================================================== */
/* ---- .site-footer carries .on-dark in the markup, inheriting the dark
surface, light text and --color-brand-on-dark link colour already
defined above. Not redeclared here.
One extension to those existing .on-dark rules: .on-dark a's link
colour has higher specificity than any single .btn--* class (two
selectors beat one), so without this, a .btn placed inside .on-dark
— as the footer's "Join OSTA" button now is — would have its own
deliberately-chosen text colour silently overridden by the on-dark
link colour. .btn--accent is the one actually used in the footer, but
all four variants get the same treatment for consistency, since any
of them could end up on a dark surface later. ---- */
.on-dark .btn--primary {
color: var(--color-surface);
}
.on-dark .btn--accent {
color: var(--color-accent-on);
}
/* Outline on dark: white border/text (Stitch CTA pair). Navy outline
on navy is invisible — same failure mode as the .btn--accent fix. */
.on-dark .btn--outline,
.section--dark .btn--outline,
.wp-block-cover.is-dark .btn--outline,
.wp-block-group.is-style-osta-cta-navy .btn--outline,
.has-navy-background-color .btn--outline,
.osta-content-slot--bg-navy .btn--outline {
background: transparent;
border-color: var(--color-surface);
color: var(--color-surface);
}
.on-dark .btn--outline:hover,
.on-dark .btn--outline:focus-visible,
.on-dark .btn--outline:active,
.section--dark .btn--outline:hover,
.section--dark .btn--outline:focus-visible,
.section--dark .btn--outline:active,
.wp-block-cover.is-dark .btn--outline:hover,
.wp-block-cover.is-dark .btn--outline:focus-visible,
.wp-block-cover.is-dark .btn--outline:active,
.wp-block-group.is-style-osta-cta-navy .btn--outline:hover,
.wp-block-group.is-style-osta-cta-navy .btn--outline:focus-visible,
.wp-block-group.is-style-osta-cta-navy .btn--outline:active,
.has-navy-background-color .btn--outline:hover,
.has-navy-background-color .btn--outline:focus-visible,
.has-navy-background-color .btn--outline:active,
.osta-content-slot--bg-navy .btn--outline:hover,
.osta-content-slot--bg-navy .btn--outline:focus-visible,
.osta-content-slot--bg-navy .btn--outline:active {
background: rgba(255, 255, 255, 0.14);
color: var(--color-surface);
border-color: var(--color-surface);
}
/* Beat .entry-content .btn--outline (same 0,2,0 weight earlier in this
file) when the button sits on a dark band inside post content. */
.entry-content .on-dark .btn--outline,
.entry-content .section--dark .btn--outline,
.entry-content .wp-block-cover.is-dark .btn--outline,
.entry-content .wp-block-group.is-style-osta-cta-navy .btn--outline,
.entry-content .has-navy-background-color .btn--outline {
color: var(--color-surface);
border-color: var(--color-surface);
}
.entry-content .on-dark .btn--outline:hover,
.entry-content .on-dark .btn--outline:focus-visible,
.entry-content .on-dark .btn--outline:active,
.entry-content .section--dark .btn--outline:hover,
.entry-content .section--dark .btn--outline:focus-visible,
.entry-content .section--dark .btn--outline:active,
.entry-content .wp-block-cover.is-dark .btn--outline:hover,
.entry-content .wp-block-cover.is-dark .btn--outline:focus-visible,
.entry-content .wp-block-cover.is-dark .btn--outline:active,
.entry-content .wp-block-group.is-style-osta-cta-navy .btn--outline:hover,
.entry-content .wp-block-group.is-style-osta-cta-navy .btn--outline:focus-visible,
.entry-content .wp-block-group.is-style-osta-cta-navy .btn--outline:active,
.entry-content .has-navy-background-color .btn--outline:hover,
.entry-content .has-navy-background-color .btn--outline:focus-visible,
.entry-content .has-navy-background-color .btn--outline:active {
color: var(--color-surface);
border-color: var(--color-surface);
background: rgba(255, 255, 255, 0.14);
}
/*
* In-copy links on navy stay text (white underline), not pills.
* Classless CTAs become outline buttons only in action rows.
*/
.wp-block-group.is-style-osta-cta-navy a:not(.btn):not(.wp-block-button__link) {
color: var(--color-surface);
text-decoration: underline;
text-decoration-thickness: 0.12em;
text-underline-offset: 0.2em;
}
.wp-block-group.is-style-osta-cta-navy a:not(.btn):not(.wp-block-button__link):hover,
.wp-block-group.is-style-osta-cta-navy a:not(.btn):not(.wp-block-button__link):focus-visible {
color: var(--color-surface);
}
.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.entry-content .wp-block-group.is-style-osta-cta-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.on-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.section--dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.wp-block-cover.is-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.has-navy-background-color .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.osta-content-slot--bg-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.entry-content .on-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.entry-content .wp-block-cover.is-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link),
.entry-content .has-navy-background-color .resident-assoc-actions a:not(.btn):not(.wp-block-button__link) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--tap-min);
min-width: var(--tap-min);
padding: var(--space-2) var(--space-4);
border: 3px solid var(--color-surface);
border-radius: var(--radius-button);
background: transparent;
color: var(--color-surface);
font-weight: var(--weight-semibold);
font-size: var(--text-body);
text-decoration: none;
}
.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active,
.on-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.on-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.on-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active,
.section--dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.section--dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.section--dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active,
.wp-block-cover.is-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.wp-block-cover.is-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.wp-block-cover.is-dark .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active,
.has-navy-background-color .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.has-navy-background-color .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.has-navy-background-color .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active,
.osta-content-slot--bg-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):hover,
.osta-content-slot--bg-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):focus-visible,
.osta-content-slot--bg-navy .resident-assoc-actions a:not(.btn):not(.wp-block-button__link):active {
background: rgba(255, 255, 255, 0.14);
color: var(--color-surface);
border-color: var(--color-surface);
text-decoration: none;
}
/* .btn--on-dark's own base rule (background --color-surface, text
--color-brand) already IS the dark-surface variant — no .on-dark
override needed; one only ever restated it. */
/* No padding on .site-footer itself — each band below (.footer-stats,
.footer-columns, .footer-legal) manages its own padding-block, so the
green rules between them sit at the true edge of each band. */
/* ---- Stats band ---- */
.footer-stats {
padding-block: var(--space-6);
border-bottom: 1px solid var(--color-accent);
}
/* PASS 58: auto-fit, not a hardcoded repeat(4, 1fr) — the bar is now
ACF-driven and ships 3 stats by default, with a 4th entirely optional
(group_osta_home_sections.json's "Footer Stats" tab). A fixed 4-column grid would leave a
lopsided empty gap with only 3 items; auto-fit instead spaces however
many actually render evenly across the row, unchanged for either
count. minmax(140px, 1fr) is generous enough that both 3 and 4 items
stay on one row at the desktop widths this rule applies at (the
max-width: 991px override below still forces 2 columns at tablet/
mobile regardless of count, unchanged from before). */
.footer-stats__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-6);
text-align: center;
}
.footer-stats__value {
font-size: var(--text-h1);
font-weight: var(--weight-bold);
color: var(--color-surface);
margin: 0;
}
.footer-stats__label {
font-size: var(--text-small);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--weight-semibold);
color: var(--color-surface);
margin: 0;
}
/* Two columns at tablet AND mobile — the design wants the same count
at both, so one breakpoint covers it. */
@media (max-width: 991px) {
.footer-stats__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Columns ---- */
.footer-columns {
padding-block: var(--space-8);
border-bottom: 1px solid var(--color-accent);
}
.footer-columns__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.osta-logo,
.osta-logo-text {
margin-bottom: var(--space-3);
}
/* Footer logo sizing — .osta-logo is a footer-only construct (header.php
has its own separate markup, see osta_logo_html()'s docblock), so
this is safely scoped without needing an extra class. Capped by
width, not height: the invert-filter stopgap that used to live here
was removed (see osta_logo_html()) — the circular seal has a white
disc, so brightness(0) invert(1) was turning the whole mark into a
solid white circle instead of just recolouring the artwork. */
.osta-logo img {
max-width: 160px;
height: auto;
}
/* Pass 33, Step 6: the logo artwork is navy-on-transparent (see
assets/images/osta-logo.png) — on this footer's navy surface it reads
as barely-there. No reversed (white/light) asset exists to swap in. A
FILTER was deliberately rejected here, same as it already was for the
header (see the comment above, and osta_logo_html()'s own docblock) —
inverting this specific artwork does not reliably produce a clean
white mark for every logo shape this build has already been through.
The fix is a TREATMENT instead: a small light card behind the mark,
the same surface the logo already reads correctly on everywhere else
on the site. It reads as a deliberate plaque, not a bug, and needs no
new asset. */
.osta-logo {
display: inline-block;
background: var(--color-surface);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
}
/* Column headings: small, uppercase, spaced out — not --text-h4 (Pass
8's original size) any more. Colour not redeclared: .on-dark h1-h4
(SECTIONS, above) already sets --color-surface on every heading in
this footer. */
.footer-col__title {
font-size: var(--text-small);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--weight-semibold);
}
.footer-nav__list li + li {
margin-block-start: var(--space-1);
}
/* Scoped to the links that are actually standalone controls — contact,
membership, resources, social, back to top, legal — not a blanket
.site-footer a, which would also catch any inline link inside a
paragraph and turn it into a 48px-tall flex box, breaking the line. */
.footer-col__link,
.footer-nav__list a,
.footer-social__link,
.back-to-top,
.footer-legal__right a {
display: inline-flex;
align-items: center;
min-height: var(--tap-min);
}
/* Pass 33, Step 6: the group rule above only guaranteed HEIGHT — every
other footer link's own text ("Membership Levels", "Find Resources", …)
is already wider than 48px, but a single-letter platform name ("X")
is not, and was rendering a tap target as narrow as its own two
characters. min-width alone, scoped to just this one link type rather
than the whole group above, so a long social label (e.g. "LinkedIn")
is untouched and only the genuinely narrow ones grow. */
.footer-social__link {
min-width: var(--tap-min);
}
/* Single stacked column, not a wrapping horizontal row — five labels in
a narrow column was wrapping awkwardly (2 then 3). */
.footer-social__list {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
/* Two columns at tablet widths, one below 767px (existing mobile
breakpoint). No tablet-range token exists in tokens.css, so this
introduces one more literal breakpoint value, same category as the
767px breakpoint already used elsewhere in this file. */
@media (max-width: 991px) {
.footer-columns__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.footer-columns__grid {
grid-template-columns: 1fr;
}
}
/* ---- Back to top: sits just above the legal bar, right-aligned. ---- */
.footer-back-to-top {
display: flex;
justify-content: flex-end;
padding-block: var(--space-4);
}
/* ---- Legal bar: copyright left, Privacy/Terms right, stacks on
mobile. ---- */
.footer-legal {
padding-block: var(--space-4);
}
.footer-legal__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
}
.footer-legal__right {
display: flex;
gap: var(--space-3);
}
@media (max-width: 767px) {
.footer-legal__inner {
flex-direction: column;
align-items: flex-start;
}
}
/*
* PASS "Block theme conversion" — .osta-frame: the fix for a systematic
* spacing bug found while verifying templates/single.html against the
* live single.php it replaced (a ~51px height drift, not visible on
* templates/page.html only because that page's own Group wrapper never
* happened to have more than one visible child).
*
* CAUSE: theme.json declares a sitewide default of 24px "block gap" for
* every core/group block (styles.blocks.core/group.spacing.blockGap),
* generated as a global, zero-specificity rule —
* :root :where(.wp-block-group-is-layout-constrained) > * {
* margin-block-start: 24px;
* }
* — intended for a CLIENT typing several paragraphs into a Group block
* she inserted herself, where 24px between them is the right default.
* Every block template this conversion builds also uses core/group as
* pure STRUCTURAL scaffolding (the container/post-header/entry-content/
* post-meta/page-header wrappers, etc.) — those already have their own,
* often different, spacing rules from the site's original CSS (this
* file, inner-pages.css, blog.css...). The 24px default silently added
* ON TOP of that existing spacing, once per Group, compounding with every
* nested structural Group a page happens to use — worse on richer pages,
* invisible on simple ones (exactly the "systematic, not single.html-
* specific" pattern flagged before this fix).
*
* FIX, ONCE: every purely-structural Group block this theme's own
* templates/*.html and parts/*.html files author (never a Group a CLIENT
* inserts through the editor) carries this one additional class,
* alongside its real semantic className. It has zero effect on any
* Group block a client adds herself — those never carry this class,
* and keep the normal 24px default exactly as intended. Since :where()
* carries zero specificity, a single ordinary class selector is enough
* to override it — no !important, no per-block inline style needed.
*/
/*
* PASS "Block theme conversion, Phase 4 (About)" — :not(.keep-margin)
* added to both selectors below. Found on About's hero: .about-hero__
* actions (inner-pages.css) sets its own real margin-top (space-4,
* spacing the button away from the paragraph above it) — a single-
* class rule, same (0,1,0) specificity as .about-hero__heading and
* every other section-level rule this fix category already covers, but
* THIS selector is a 3-class compound (0,3,0), so it was winning
* regardless of load order, forcing the button flush against the
* paragraph above it. .keep-margin is the opt-out: a Group block that
* is itself a child of an osta-frame flow container AND carries its own
* deliberate margin-top (not relying on gap/blockGap for its spacing)
* adds this class so this rule stops matching it — the same "structural
* marker, not client content" convention as .list-reset, just spelled
* the other direction (that class says "not prose", this one says
* "don't zero me"). Every other osta-frame child with no margin-top of
* its own (the overwhelming majority — card grids, button rows that
* rely on gap, etc.) is completely unaffected: :not() only changes
* whether THIS rule matches, never adds a match. Known live use so
* far: about_content.html's hero actions Group. Find Resources'
* .resources-hero__actions (inner-pages.css) is the identical pattern
* and will need the same class when that page converts.
*/
/*
* KNOWN LIMIT OF .keep-margin — read before reaching for it on a FIRST
* child. This rule is only one of TWO that zero an element's top margin
* inside a converted page. The other is WordPress core's own
* :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
* at (0,2,0) (:root and :first-child each count; :where() is free),
* printed inline by the block-layout support. .keep-margin does nothing
* about that one — it only opts out of THIS rule — so an element that is
* BOTH the first child of a flow container AND carries its own
* margin-top still loses it, because the component's own rule is
* typically a single class (0,1,0).
*
* This deliberately has no generic fix here, and that is not an
* oversight: core's rule sets the property to 0 outright, so anything
* that outranks it must supply a concrete replacement VALUE — and only
* the component knows what its own margin should be. A value-agnostic
* marker class cannot express that (the same reason .keep-margin-bottom
* below has to name --space-3 explicitly rather than "restore whatever
* was there"). `revert` does not help either: every rule in play is
* author-origin with no cascade layers, so it reverts past all of them.
*
* The correct shape is therefore per-component, in that component's own
* stylesheet: re-state the real value at (0,2,0) or higher, scoped to
* the page. Live example, measured rather than guessed —
* inner-pages.css's `.evictions-page .evictions-callout__icon,
* .evictions-page .evictions-safeharbor__check { margin-top: 2px }`,
* added when both icons rendered 2px too high against the classic
* render. Expect roughly one of these per converted page that opens a
* section with a self-spacing element; it is a two-line fix once
* recognised, and this note exists so the next conversion recognises it
* from the symptom instead of re-deriving the specificity chain.
*/
.osta-frame.wp-block-group.is-layout-flow > *:not(.keep-margin),
.osta-frame.wp-block-group.is-layout-constrained > *:not(.keep-margin) {
margin-block-start: 0;
}
.osta-frame.wp-block-group.is-layout-flex,
.osta-frame.wp-block-group.is-layout-grid {
gap: 0;
}
/*
* PASS "Block theme conversion, Phase 4 (About)" — the margin-block-END
* companion to .keep-margin above, and a DIFFERENT shape of the same
* underlying problem: WordPress emits its own
* :root :where(.is-layout-flow) > :last-child { margin-block-end: 0; }
* at (0,2,0) specificity (:root and :last-child each count) — high
* enough to beat this file's own sitewide `p { margin-bottom: var(
* --space-3); }` rule (0,0,1), which every card/section paragraph
* sitewide has always relied on for its own trailing rhythm, PHP-
* rendered pages included. Found on About's card grid: .card__body (a
* plain , global.css's own .card component) is the last element in
* every "why we exist" card, so once that card is an osta-frame Group,
* WP's rule silently zeroed a bottom margin that rendered live in the
* original PHP output.
*
* Deliberately an OPT-IN marker (.keep-margin-bottom), not a blanket
* "every last
in an osta-frame container" rule like the margin-
* START fix above — tried that first and it collided twice: .about-who-
* we-are__body p:last-child { margin-bottom: 0 } and .about-membership-
* benefits__panel-quote { margin: 0 } are both existing, deliberate
* "sits flush, no trailing space" rules on a last-child paragraph, and
* a blanket restore at high-enough specificity to beat WP's (0,2,0)
* necessarily outranks those too. An opt-in class only ever touches a
* paragraph this pass has actually verified needs its sitewide default
* back — every other last-child
(there are more of those than there
* are cards) is completely unaffected. Same (0,2,0) specificity as WP's
* rule; global.css still loads after the inline global-styles block
* that emits it, so the tie resolves here on load order, same proof as
* .keep-margin's own comment above.
*/
/*
* PASS "Block theme conversion, Group 2 (Tenant Rights)" — the value became a
* custom property. The sitewide paragraph default (--space-3) is still what
* you get for free, but this marker was hard-coding it, so an element whose
* own design uses a different trailing margin got the wrong one restored:
* .tenant-rights-helpline__hours wants --space-4, and came back 8px short,
* which shrank the whole helpline card by 8px against its classic render.
*
* A custom property is the right tool because it sidesteps the specificity
* fight entirely. Beating WordPress's (0,2,0) :last-child rule is what forces
* this rule's own weight up; the VALUE it restores does not need to win any
* cascade at all, since nothing else sets --osta-keep-margin-bottom. A
* component declares its own value wherever it already declares its margins,
* at whatever specificity it likes, and this rule picks it up.
*/
.entry-content .keep-margin-bottom {
margin-bottom: var(--osta-keep-margin-bottom, var(--space-3));
}
/*
* PASS "Block theme conversion, Phase 4 (About)" — same margin-block-END
* problem, this time on a WordPress CORE block rather than a theme
* component: block-library's own CSS gives .wp-block-columns a default
* margin-bottom: 1.75em (for the stacked-on-mobile gap between columns
* and whatever follows). About's preserved "Browse by Topic Cards"
* pattern — the page's own real, client-editable trailing content,
* copied verbatim into the new post_content — ends in exactly one
* wp:columns block. Once its wrapper (.entry-content, this page's own
* "article" Group, NOT core/post-content's outer one) is a real
* is-layout-flow Group, that block becomes :last-child of it and loses
* its own 1.75em to the same WP (0,2,0) reset every other fix on this
* page has been working around. Not scoped with .keep-margin-bottom
* (that class always restores this THEME's own --space-3; this is a
* different, core-defined value) — a plain, general rule instead, since
* any future page's own trailing content can end in a columns block the
* same way and none of them should have to remember a marker class for
* a WordPress-core default. (0,2,0) via :last-child ties WP's rule on
* specificity; global.css still loads after the inline block emitting
* it, so the tie resolves here on load order, same proof as the other
* margin-block-end fixes above.
*/
.entry-content .wp-block-columns:last-child {
margin-bottom: 1.75em;
}
/*
* PASS "Block theme conversion, Phase 4 (About)" — a second, deeper case
* of the exact same bug the two rules above already fix, found while
* verifying the About page: those rules zero the 24px default BETWEEN an
* osta-frame element's OWN children. They do nothing when the osta-frame
* element is itself sitting as a top-level child of core/post-content's
* own wrapper (
, generated automatically by that block, never written in
* any template file this theme owns) — every one of a page's own
* section-level blocks (osta-hero, about-who-we-are, …) is a direct
* child of THAT wrapper once real page content lives in post_content, so
* each one still picked up an unwanted 24px gap from outside itself.
* A plain, low-specificity class selector is enough to win against the
* zero-specificity :where() rule feeding that gap in, regardless of
* which container is the source — deliberately unconditional (not
* scoped to a specific parent), since every osta-frame element is
* already vetted, structural, and never wants blockGap spacing either
* way. Client-typed content in post_content is never marked osta-frame,
* so her own paragraphs/images keep the normal 24px rhythm between them,
* completely unaffected.
*/
.osta-frame {
margin-block-start: 0;
}
/*
* PASS "Block theme conversion, Phase 4 (About)" — .about-editor-content
* is NOT marked osta-frame, on purpose, even though it sits directly in
* core/post-content's own wrapper the exact same way every section
* above it does. Every osta-frame-scoped rule in this file (including
* the :not(.osta-frame *) heading-margin exclusion higher up) treats
* "has an osta-frame ancestor" as "purely structural, never client
* content" — but this wrapper's whole job is to reproduce the original
* PHP template's
shell around the page's own the_content()
* trailing region, which On the classic PHP path always was, and here
* still is, the CLIENT's real, editable prose (confirmed live: the
* "Browse by Topic Cards" pattern already sitting in this page's
* post_content before this pass touched anything). Marking these two
* wrapper Groups osta-frame silently opted every heading and paragraph
* inside them OUT of the normal .entry-content prose treatment instead
* — caught by the exact height-parity check this fix category was
* built for. This narrower rule gives the outer wrapper the one thing
* it actually needs (immunity from blockGap's margin-block-start on
* itself, so it still sits flush against the section above it, same as
* the PHP render) without opting its own children out of anything.
*/
.entry-content > .about-editor-content {
margin-block-start: 0;
}
/*
* PASS "Block theme conversion" — second systemic spacing source found
* while chasing the same single.html drift: WordPress's own block-canvas
* (wp-includes/template-canvas.php, used for every block-template page)
* wraps the WHOLE template in , and core
* itself emits a zero-specificity default —
* :where(.wp-site-blocks) > * { margin-block-start: 24px; }
* :where(.wp-site-blocks) > :first-child { margin-block-start: 0; }
* — meant for a client who's built a template visually as several
* stacked top-level sections. On this theme every block-template page's
* top level is always exactly header part → osta/page-frame () →
* footer part, never client-arranged sections, so the 24px gap this adds
* before AND before the footer part (48px total) has no
* equivalent in the original design at all — header, main and footer
* always sit flush. Confirmed present on Leadership (templates/page.html)
* as well as templates/single.html — genuinely sitewide, not single.html-
* specific, and NOT caught by Phase 2's own before/after screenshots,
* since both pages chosen for that test (home, the chapter portal) reach
* header.php/footer.php through their own PHP Template Name files and
* never actually render via a block template — flagging that gap
* honestly rather than letting the earlier "byte-identical" claim stand
* unqualified.
*
* No marker class needed here, unlike .osta-frame — the top level of
* .wp-site-blocks is never client content on this theme (page content
* lives inside , not as sibling top-level blocks), so this is safe
* to override unconditionally, sitewide, once.
*/
.wp-site-blocks > * {
margin-block-start: 0;
}