/* ==========================================================================
Seacoast NHIC - shared shell (header, mobile drawer, footer, buttons)
--------------------------------------------------------------------------
Loaded on EVERY page: the 2 redesigned pages AND the 35 legacy WordPress
pages that still load wp-content/themes/bmwl_theme_wp/style.css.
==========================================================================
RULES FOR EDITING THIS FILE - read before changing anything
==========================================================================
1. EVERY selector is `.sn-` prefixed. This is not cosmetic. Two reasons:
a) `js/custom_js.js:3-4` runs on all 35 legacy pages and does
$header = $(".site_header");
$header.before($header.clone().addClass("clone"));
If the new header used class `site_header`, jQuery would clone it on
every legacy page and every one would render TWO headers. With `sn-`
names, `$(".site_header")` is an empty set and `.clone()` is a
harmless no-op - so custom_js.js stays loaded and legacy carousels,
tabs, and galleries keep working untouched.
b) The ~40 legacy shell rules key off .site_header, .top_bar_header,
.middle_white_bar, .menu_bar_top, .menu_header, .scroll_menu_header,
.menu, .footer_top, .footer_col, .parent_columns_footer,
.footer_bottom, .copyright_txt_*, .widget, .widget-title,
.middle_container, .large_container. Reusing ANY of those names
inherits legacy styling. Reusing none of them inherits nothing.
The ids #masthead and #colophon ARE kept (skip-link + anchor continuity)
and are provably inert: both appear zero times in style.css.
2. DO NOT wrap anything here in @layer. Unlayered CSS beats ALL layered CSS,
so a layered shell would lose every tie to the unlayered legacy
stylesheet on the 35 legacy pages. @layer is only safe in base.css and
home.css, where the legacy sheet is absent - and it buys nothing there.
3. This file must load AFTER the legacy stylesheet (it is injected as the
last before ), so source order wins every specificity tie.
Only ONE `!important` is justified in this file; it is marked and
explained at the newsletter input.
4. All paths are root-absolute (/assets/...). Never relative. The 37 HTML
files sit at three different directory depths and this file is byte-
identical for all of them. STATUS.md iteration 1 fixed a real production
404 caused by relative refs escaping the web root.
========================================================================== */
/* --------------------------------------------------------------------------
Legacy-stylesheet counters - the complete set of places style.css reaches
the shell. Each is an ELEMENT-level selector, so scoped class selectors
beat them on specificity without !important.
-------------------------------------------------------------------------- */
/* style.css:17 sets `body{overflow-x:hidden}`, which makes a scroll
container and silently kills `position:sticky` on any descendant - the
header would simply never stick on the 35 legacy pages. `clip` prevents the
same horizontal overflow WITHOUT creating a scroll container. */
body {
overflow-x: clip;
}
@supports not (overflow-x: clip) {
.sn-header {
position: relative;
}
}
/* style.css:24 sets `*:focus{outline:0}`, stripping focus rings site-wide.
That is a live accessibility defect on the production site; restoring it
inside the shell is a fix, not a preference. */
.sn-header a:focus-visible,
.sn-header button:focus-visible,
.sn-drawer a:focus-visible,
.sn-drawer button:focus-visible,
.sn-footer a:focus-visible,
.sn-footer button:focus-visible,
.sn-footer input:focus-visible,
.sn-skip:focus-visible,
.sn-btn:focus-visible {
outline: 2px solid var(--sn-focus);
outline-offset: 2px;
box-shadow: var(--sn-ring);
border-radius: var(--sn-r-sm);
}
/* style.css:21 sets `a{color:#FAC74C}` (the legacy yellow). */
.sn-header a,
.sn-drawer a,
.sn-footer a {
color: inherit;
text-decoration: none;
}
/* The rule above is a THIRD instance of the specificity trap this codebase has
now hit three times, and the only one that survived to here.
`.sn-header a` scores (0,1,1); `.sn-btn--primary` scores (0,1,0). So the
reset won, `color: inherit` resolved to .sn-header's --sn-ink, and the
header and drawer CTAs rendered near-black on the accent green:
#16241F on #2F5D4A is 2.1:1, against the 4.5:1 that 16px semibold text
needs. Measured in the browser, not inferred - the pill looked plausibly
"dark green" until the computed value was read.
This CANNOT be fixed the way base.css fixed its twin, by wrapping the reset
in :where(). That would drop it to (0,0,0), where it would lose to the legacy
sheet's own `a { color: #FAC74C }` (0,0,1) and turn every header link on the
36 legacy pages yellow. The reset has to keep outranking a bare element
selector, so the button has to outrank the reset instead: (0,2,0) does it.
Hover is already safe - `.sn-btn--primary:hover` is (0,2,0) - which is why
the bug was invisible to anyone who moused over the button. */
.sn-header .sn-btn--primary,
.sn-drawer .sn-btn--primary {
color: var(--sn-on-dark);
}
.sn-header .sn-btn--ghost,
.sn-drawer .sn-btn--ghost {
color: var(--sn-accent);
}
/* Same trap, third victim, cosmetic rather than an a11y failure: the phone
link's own `color: var(--sn-text)` (0,1,0) also lost to the reset, so it
rendered at full --sn-ink. Both pass contrast on cream, but the phone is
specified as the deliberately SECONDARY element in the bar - rendering it at
heading weight worked against the one thing its styling is for. `.sn-header
.sn-header__tel` is (0,2,0).
The nav links escape this by accident, not by design: `.sn-nav__list a` is
also (0,1,1), and it only wins the tie because it appears LATER in this file
than the reset. Worth knowing before anyone reorders this stylesheet. */
.sn-header .sn-header__tel {
color: var(--sn-text);
}
/* style.css sets `p{margin-bottom:20px}` and `h1..h6{font-weight:normal}`. */
.sn-header p,
.sn-drawer p,
.sn-footer p {
margin: 0;
}
.sn-footer h2,
.sn-footer h3 {
margin: 0;
font-weight: 600;
}
.sn-header ul,
.sn-drawer ul,
.sn-footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.sn-header img,
.sn-drawer img,
.sn-footer img {
display: block;
max-width: 100%;
height: auto;
}
/* --------------------------------------------------------------------------
Primitives
-------------------------------------------------------------------------- */
.sn-sr {
position: absolute !important; /* visually-hidden util; !important is inert
here because nothing competes, but keeps
the utility reliable if reused inside a
legacy widget. */
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sn-skip {
position: absolute;
top: -100%;
left: var(--sn-space-4);
z-index: calc(var(--sn-z-drawer) + 10);
padding: var(--sn-space-3) var(--sn-space-5);
background: var(--sn-surface);
color: var(--sn-accent);
font-family: var(--sn-font-sans);
font-size: var(--sn-fs-sm);
font-weight: 600;
border-radius: var(--sn-r-md);
box-shadow: var(--sn-shadow-lg);
}
.sn-skip:focus {
top: var(--sn-space-3);
}
.sn-icon {
width: 1.5rem;
height: 1.5rem;
flex: none;
display: block;
color: var(--sn-icon);
}
.sn-icon--sm {
width: 1.125rem;
height: 1.125rem;
}
.sn-icon--lg {
width: 1.75rem;
height: 1.75rem;
}
/* Buttons. Shared by the shell, the homepage, and the assessment page so
there is exactly ONE button system on the site. */
.sn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sn-space-2);
min-height: 48px;
padding: var(--sn-space-3) var(--sn-space-6);
border: 1px solid transparent;
border-radius: var(--sn-r-pill);
background: none;
font-family: var(--sn-font-sans);
font-size: var(--sn-fs-sm);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--sn-dur) var(--sn-ease),
border-color var(--sn-dur) var(--sn-ease), color var(--sn-dur) var(--sn-ease),
transform var(--sn-dur) var(--sn-ease);
}
.sn-btn--primary {
background: var(--sn-accent);
border-color: var(--sn-accent);
color: var(--sn-on-dark);
box-shadow: var(--sn-shadow-cta);
}
.sn-btn--primary:hover {
background: var(--sn-accent-hover);
border-color: var(--sn-accent-hover);
color: var(--sn-on-dark);
}
.sn-btn--ghost {
background: transparent;
border-color: var(--sn-accent);
color: var(--sn-accent);
}
.sn-btn--ghost:hover {
background: var(--sn-green-50);
color: var(--sn-accent-hover);
}
.sn-btn--ghost .sn-icon,
.sn-btn--primary .sn-icon {
color: currentColor;
}
.sn-btn--lg {
min-height: 56px;
padding: var(--sn-space-4) var(--sn-space-7);
font-size: var(--sn-fs-lead);
}
.sn-btn:active {
transform: translateY(1px);
}
.sn-btn[disabled],
.sn-btn[aria-disabled="true"] {
opacity: 0.6;
cursor: not-allowed;
}
/* ==========================================================================
HEADER
========================================================================== */
/* A 1px probe above the header. An IntersectionObserver on this toggles
.is-scrolled - no scroll event handler, so no scroll-linked jank. */
.sn-header__sentinel {
height: 1px;
margin-bottom: -1px;
pointer-events: none;
}
.sn-header {
position: sticky;
top: 0;
z-index: var(--sn-z-header);
background: rgba(251, 250, 247, 0.92);
border-bottom: 1px solid transparent;
font-family: var(--sn-font-sans);
color: var(--sn-ink);
transition: box-shadow var(--sn-dur) var(--sn-ease),
border-color var(--sn-dur) var(--sn-ease);
}
@supports (backdrop-filter: blur(10px)) {
.sn-header {
backdrop-filter: blur(10px);
}
}
.sn-header.is-scrolled {
border-bottom-color: var(--sn-line);
box-shadow: var(--sn-shadow-sm);
}
/* THREE ZONES: lead (logo + phone) | nav | actions (patients + CTA + burger).
Mobile is flex with the actions pushed right. At lg it becomes a 3-column
grid so the nav can be centred - see the note at the lg breakpoint for why
`auto 1fr auto` and not `1fr auto 1fr`.
min-width: 0 on the zones is load-bearing: grid and flex items default to
min-width:auto, which refuses to shrink below their content and pushes the
bar wider than the viewport instead. The bar has no wrap, so that overflow
is invisible (body sets overflow-x: clip) - the CTA just silently leaves the
screen. Letting the zones shrink is what keeps that from happening. */
.sn-header__bar {
max-width: var(--sn-container-header);
margin-inline: auto;
padding-inline: var(--sn-gutter);
min-height: 64px;
display: flex;
align-items: center;
gap: var(--sn-space-3);
}
.sn-header__lead {
min-width: 0;
display: flex;
align-items: center;
gap: var(--sn-space-4);
}
.sn-header__logo {
flex: none;
display: block;
line-height: 0;
}
.sn-header__logo img {
width: 150px;
}
.sn-header__actions {
min-width: 0;
margin-left: auto;
display: flex;
align-items: center;
gap: var(--sn-space-3);
}
/* Phone: deliberately secondary per the brief - a small text link, never a
button, so it never competes with Start Assessment. It moved to the LEFT
zone (beside the logo) in this pass; it is hidden from the bar below md and
lives in the drawer and footer there instead. See the md breakpoint. */
.sn-header__tel {
display: none;
align-items: center;
gap: var(--sn-space-2);
min-height: 44px;
font-size: var(--sn-fs-sm);
font-weight: 500;
color: var(--sn-text);
white-space: nowrap;
}
.sn-header__tel:hover {
color: var(--sn-accent);
}
.sn-header__tel .sn-icon {
color: var(--sn-icon);
}
.sn-header__cta {
flex: none;
white-space: nowrap;
}
/* THREE labels, exactly one shown at a time by the breakpoints below:
< 30rem "Assessment" ~102px of pill
30-90rem "Start Assessment" ~138px
>= 90rem "Start My Healing & Longevity Assessment" ~390px
"Assessment" buying back 36px from "Start Assessment" is what lets the logo
stay at a legible 150px on a 360px phone instead of being squeezed to ~114px
to make room.
The full wording exists so the header CTA matches the hero CTA on the
redesigned home page. It is gated at 90rem rather than shown everywhere
because it is ~390px of pill against ~138px - see the budget worked through
at the 90rem block below, where 1280px comes up 114px short. Below 90rem the
shorter labels are not a compromise, they are the only thing that fits.
Swapped with `display`, deliberately NOT with aria-hidden: the accessible
name is computed from what is visible, so it reads "Assessment" on a phone
and the full wording on a wide desktop - all three accurate. aria-hidden on
the hidden spans would leave the link with an empty name at some widths. */
.sn-header__cta-short,
.sn-header__cta-full {
display: none;
}
/* --------------------------------------------------------------------------
Existing-patient prompt.
Two stacked lines rather than one, for a width reason worth recording: as a
single line ("Existing patients? Book & Portal") it measures ~185px, and at
1024px the three zones then total ~1066px against ~972px of available width -
the bar overflows and the CTA is clipped off-screen. Stacked, it measures the
width of its longer line (~105px) and the whole bar fits with room to spare,
using vertical space the 80px-tall bar already has.
Rendered by patientsLink() in apply-shell.mjs, which emits an with NO
href while EMR_URL is empty. An href-less is inert and out of the tab
order, so the prompt reads as a label until a real portal URL exists - which
is the intended state, not an oversight. :any-link matches only when the
href is actually present, so the interactive affordances below switch on by
themselves the moment it is set.
-------------------------------------------------------------------------- */
.sn-patients {
display: none;
flex-direction: column;
justify-content: center;
gap: 1px;
line-height: 1.25;
white-space: nowrap;
}
.sn-patients__label {
font-size: var(--sn-fs-xs);
color: var(--sn-text-muted);
}
.sn-patients__action {
font-size: var(--sn-fs-sm);
font-weight: 600;
color: var(--sn-accent);
}
.sn-patients:any-link:hover .sn-patients__action {
color: var(--sn-accent-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Desktop nav - hidden until 64rem, where the burger disappears. */
.sn-nav {
display: none;
}
.sn-nav__list {
display: flex;
align-items: center;
gap: var(--sn-space-6);
}
.sn-nav__list li {
flex: none;
}
.sn-nav__list a {
display: inline-block;
padding-block: var(--sn-space-2);
font-size: 1.0625rem;
font-weight: 500;
color: var(--sn-text);
position: relative;
/* Guard, not decoration. The nav sits in a shrinkable grid track, so if it is
ever squeezed the failure mode is "Meet Our Team" silently wrapping to
three lines rather than anything overflowing. nowrap + flex:none above turn
that invisible reflow into visible overflow, which is far easier to catch.
This exact wrap shipped once at 1024px before the breakpoint moved. */
white-space: nowrap;
}
.sn-nav__list a:hover {
color: var(--sn-accent);
}
/* Active state is a 2px underline, not a colour change alone - colour alone
fails WCAG 1.4.1 (use of colour). */
.sn-nav__list a.is-current {
color: var(--sn-ink);
font-weight: 600;
}
.sn-nav__list a.is-current::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 2px;
background: var(--sn-accent);
}
/* Burger - 44px minimum target, CSS-drawn bars (no icon font, no symbols).
`flex: none` is not decoration. As a plain flex item it shrinks under
pressure, and at 390px it was measured rendering 40px wide - silently below
the 44px minimum tap target, with nothing in the CSS to suggest it. A fixed
`width` does NOT protect a flex item from shrinking; only flex-shrink: 0
does. */
.sn-burger {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--sn-line);
border-radius: var(--sn-r-md);
background: var(--sn-surface);
cursor: pointer;
}
.sn-burger__bars,
.sn-burger__bars::before,
.sn-burger__bars::after {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--sn-ink);
transition: transform var(--sn-dur) var(--sn-ease),
opacity var(--sn-dur) var(--sn-ease);
}
.sn-burger__bars {
position: relative;
}
.sn-burger__bars::before,
.sn-burger__bars::after {
content: "";
position: absolute;
left: 0;
}
.sn-burger__bars::before {
top: -6px;
}
.sn-burger__bars::after {
top: 6px;
}
.sn-burger[aria-expanded="true"] .sn-burger__bars {
background: transparent;
}
.sn-burger[aria-expanded="true"] .sn-burger__bars::before {
transform: translateY(6px) rotate(45deg);
}
.sn-burger[aria-expanded="true"] .sn-burger__bars::after {
transform: translateY(-6px) rotate(-45deg);
}
/* ==========================================================================
MOBILE DRAWER
Replaces the legacy off-canvas panel, which style.css:190 styles as
`position:fixed; left:-75%; width:75%; height:100vh; background:#FAC74C`.
That full-bleed yellow slab is one of the things that dates the site.
IMPORTANT CONTEXT: the legacy `