\n
..." (see
scripts/restructure-trustees-page.php), so deleting the paragraphs by
hand almost always leaves the newline behind and :empty never matches.
That is why this rule exists: no element children, whatever
whitespace remains.
Deliberately :has(*) rather than :has(.trustee). Hiding on "no
trustees" would read closer to the intent, but it would also hide a
grid holding something real that simply lacks the class -- and content
that silently disappears is a worse failure than a visible empty box,
which at least gets reported. This hides only a container with nothing
in it. */
.trustee-grid:not(:has(*)) {
display: none;
}
.trustee-grid .trustee {
margin: 0;
max-width: none;
padding: 20px 22px;
background: var(--color-white);
color: var(--color-ink);
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
/* The name. Not a heading element -- these are list entries rather than
sections, and fifteen h3s here would put fifteen phantom rows in the
document outline.
Left inline rather than display:block, because each line in the entry
is already separated by its own
. Blocking it as well produced two
breaks and a visible gap under every name. */
.trustee-grid .trustee strong {
color: var(--color-navy);
font-size: 16px;
font-weight: 700;
}
/* The committee line, which is the one thing every entry has -- four
trustees carry no middle role line at all. Inline for the same reason
as the name above. */
.trustee-grid .trustee em {
color: var(--color-ink-muted);
font-style: italic;
}
/* One per row on phones, stated rather than left to auto-fit. The track
count auto-fit lands on depends on the width of the content column
it happens to sit in, which is not the same on every template, and a
two-up grid of 170px cells is not what anyone wants on a phone. */
@media (max-width: 600px) {
.trustee-grid {
grid-template-columns: 1fr;
}
}
/* Lead feature -- a photo with a navy card overlapping its bottom-right
corner, carrying a short label and the page's opening paragraph. The
second of the two lead treatments, alongside template-parts/banner.php;
see inc/lead-feature.php for why both exist and which is for what.
THE DOUBLED CLASSES BELOW ARE LOAD-BEARING. This block renders inside
.subpage-content, where .subpage-content img and .subpage-content p sit
at (0,1,1) and beat any single component class at (0,1,0). Left alone
they would give the photo a 24px block margin -- pushing it down inside
its own frame -- and paint the card's paragraph #4d4a4a, dark grey body
copy on navy. That is the same trap .about-pillar-card fell into when
the section-cards shortcode first put it inside page content.
The card is placed by the grid, not by absolute positioning, so the row
is as tall as the photo and the card can hang past it with a negative
margin without anything needing a fixed height. */
.lead-feature {
position: relative;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: end;
margin: 0 0 80px;
}
/* Stretches to the row rather than sitting at its own natural height.
The row is as tall as whichever is taller, photo or card, and a long
intro makes the card the taller one -- left to its own height the
photo would then sit at the bottom of the row with a band of empty
page above it. Stretching means a longer intro grows the photo
instead. min-height is what stops a short intro from collapsing it. */
.lead-feature__media {
grid-column: 1;
grid-row: 1;
align-self: stretch;
min-height: 280px;
}
.lead-feature .lead-feature__image {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
/* Sits in column 2 but pulled left over the photo, and down past its
bottom edge, so it breaks both. The bottom overhang is what puts the
card's wave over page background rather than over the photo. */
.lead-feature__card {
grid-column: 2;
grid-row: 1;
position: relative;
z-index: 2;
align-self: end;
margin-left: -96px;
margin-bottom: -56px;
padding: 36px 36px 76px;
background: var(--color-navy);
overflow: hidden;
}
.lead-feature__label {
display: block;
margin-bottom: 14px;
color: var(--color-gold-accent);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lead-feature .lead-feature__body p {
margin: 0;
max-width: none;
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
.lead-feature .lead-feature__body p + p {
margin-top: 14px;
}
/* Shorter than the 90px .wave-divider default -- at full height the
curve eats most of a card this size. */
.lead-feature .lead-feature__wave {
height: 56px;
}
/* Stacked below 900px: the overlap becomes vertical, the card rising
into the foot of the photo rather than crossing its corner. */
@media (max-width: 900px) {
.lead-feature {
display: block;
margin-bottom: 56px;
}
.lead-feature__card {
margin: -56px 0 0;
padding: 28px 24px 64px;
}
}
/* Photo-beside-text block for migrated subpage content -- a paragraph
with a supporting photo alongside it, alternating sides down the
page. Deliberately generic rather than named after the first page to
use it (Drama): the same pattern fits most of the Student Life and
Academics pages still to be migrated from the old site.
align-items:start so a short paragraph doesn't stretch the photo. */
.page-media {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 32px;
align-items: start;
margin: 32px 0;
}
/* Photo on the right instead, for alternating blocks. Only the columns
swap -- the DOM order stays photo-then-text, so the reading order a
screen reader follows is unchanged. */
.page-media--reverse .page-media__figure {
grid-column: 2;
grid-row: 1;
}
.page-media--reverse .page-media__body {
grid-column: 1;
grid-row: 1;
}
/* Natural size up to the column width, never upscaled: one of the
migrated photos is only 206px wide on the old site, and stretching it
to fill the column would just make it blurry. Sharp and small beats
soft and large.
margin:0 overrides .subpage-content img's own 24px block margin,
which would otherwise misalign the photo against its paragraph. */
.page-media__figure img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0;
}
.page-media__body > p:first-child {
margin-top: 0;
}
@media (max-width: 700px) {
/* Stacked, photo first in both directions -- side-by-side leaves
neither the photo nor the text enough width to work. */
.page-media {
grid-template-columns: 1fr;
gap: 16px;
}
.page-media--reverse .page-media__figure,
.page-media--reverse .page-media__body {
grid-column: 1;
grid-row: auto;
}
}
/* Online Store product photos (scripts/build-online-store-page.php).
WordPress's core [gallery] shortcode floats its items and ships no
usable layout of its own, so this overrides the float with a simple
even row. Scoped to .store-gallery rather than styling .gallery
globally -- nothing else on the site uses a classic gallery yet, and
a blanket rule would silently reshape any that appear later.
The 20px gutter matches the staff directory's, the site's convention
where a grid has real gutters. */
.store-gallery .gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin: 32px 0;
}
.store-gallery .gallery-item {
float: none;
width: auto;
margin: 0;
}
/* margin:0 overrides .subpage-content img's own 24px block margin,
which would otherwise push each photo away from its cell edges and
break the row's alignment. 4:3 keeps the three landscape product
shots the same height whatever their native ratios. */
.store-gallery .gallery img {
display: block;
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
border: none;
}
.store-gallery .gallery-caption {
margin: 6px 0 0;
font-size: 13px;
color: var(--color-ink-muted);
}
@media (max-width: 700px) {
/* Three across leaves each product photo too small to make out on a
phone. */
.store-gallery .gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
/* Faculty & Staff directory (template-parts/faculty-directory.php).
Same hairline-divider grid recipe the rest of the site already uses
-- 2px gap over a divider-coloured background/border, cards butted
against thin rules (see .stat-card-grid, .pillar-grid, .events-grid)
-- rather than a new card treatment. */
.staff-directory {
margin-top: 40px;
}
.staff-directory__heading {
margin: 0 0 20px;
font-size: 24px;
}
/* Real gutters between tiles rather than the hairline-divider mosaic
the other card grids on the site use. Each headshot needs to read as
a separate person, not as one panel of a photo wall -- so this drops
the divider-coloured background and border those grids rely on, and
the gap becomes actual space rather than a 2px rule. 20px sits just
under the 24px gutter .academics-preview-grid uses, which is the
site's convention wherever a grid has real gutters.
Still flex, not grid: a group's people rarely divide evenly into
rows (7 and 30 here), and grid would leave the shortfall as empty
cells showing through. Flex wrapping has no cells at all -- a short
last row simply holds fewer items.
justify-content centres each line, which only has any effect on a
short one: a full row of 4 already measures exactly 100%, so there's
nothing left to distribute. A short row is centred instead of being
stretched (which made its tiles visibly wider than everyone else's)
or left-aligned with a gap trailing off to the right. */
.staff-grid {
margin: 0 0 40px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
/* The basis is what fixes the cards-per-row: for N per row with a 20px
gap it's (100% - (N-1) x 20px) / N, which is 25% - 15px at 4 across.
Exactly 4 fit (4 x basis + 3 x gap = 100%) and a 5th can never fit,
so the wrap point is stable.
grow AND shrink are both 0 on purpose: every tile stays exactly one
quarter-width whether its row holds 4 of them or 2, so a person on
the last row isn't drawn larger than everyone above them. The short
row is handled by centring it (see .staff-grid) rather than by
letting its tiles expand.
No padding: the photo is full-bleed to the card's edges, and the
overlay covers it exactly. position:relative is what the overlay's
inset:0 anchors to. */
.staff-card {
position: relative;
flex: 0 0 calc(25% - 15px);
min-width: 0;
background: var(--color-white);
text-align: center;
}
/* Portrait 4:5 rather than a fixed height, so every card matches
whatever the row's width works out to and the photos never distort.
The scraped headshots are 300x400 (exactly 3:4) and 239x320, so
object-fit trims a little top and bottom rather than stretching. */
.staff-card__photo {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--color-navy-100);
}
/* margin:0 overrides .subpage-content img's own 24px block margin --
this renders inside .subpage-content, where that rule would push the
photo out of its frame. */
.staff-card__photo img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
/* Stand-in when a person has no photo yet. Fills the same 4:5 frame so
a mixed directory keeps a regular grid. */
.staff-card__monogram {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 34px;
font-weight: 800;
line-height: 1;
color: var(--color-navy);
}
/* Hidden with opacity, never display:none or visibility:hidden --
both of those would drop the name and title out of the accessibility
tree, and they should be announced whether or not anyone is
hovering. pointer-events:none is what stops the invisible mailto
link swallowing clicks; keyboard focus is unaffected by it, so Tab
still reaches the link and :focus-within below then reveals the
overlay for sighted keyboard users. */
.staff-card__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
background: rgba(var(--color-navy-rgb), 0.88);
color: var(--color-white);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 250ms ease, transform 250ms ease;
}
.staff-card:hover .staff-card__overlay,
.staff-card:focus-within .staff-card__overlay {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Both qualified with .staff-card__overlay (2 classes) rather than
written as bare single-class selectors, and every inherited property
restated rather than left to cascade. This directory renders inside
.subpage-content, where `.subpage-content p` is one class plus one
element -- specificity 0,1,1 -- which beats a lone 0,1,0 class. That
rule was winning and painting both lines #4d4a4a on the navy
overlay: 1.26:1 against the lightest photo, effectively invisible.
It was also overriding the sizes here with its own 17px/500/1.65 and
capping the text at max-width 760px. Same specificity trap the nav
dropdown rules further up document. */
.staff-card__overlay .staff-card__name {
max-width: none;
margin: 0;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--color-white);
}
.staff-card__overlay .staff-card__title {
max-width: none;
margin: 0;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
color: rgba(255, 255, 255, 0.92);
}
.staff-card__email {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-top: 2px;
border-radius: 50%;
color: var(--color-navy);
background: var(--color-white);
transition: background-color 200ms ease, color 200ms ease;
}
.staff-card__email:hover {
color: var(--color-white);
background: var(--color-gold-accent);
}
.staff-card__email:focus-visible {
outline: 2px solid var(--color-gold-accent);
outline-offset: 3px;
}
/* Touch devices can't hover, and the sticky-hover emulation that some
of them fake on first tap is inconsistent -- on Android the state
often clears again immediately. Rather than gamble a person's name
and title on that, the overlay is simply always shown where there's
no hover capability: nothing is hidden, and the mailto link is one
tap rather than two.
BUT NOT AS THE FULL-CARD PANEL THE HOVER STATE USES. Always-on plus
inset:0 and a flat rgba(navy, 0.88) meant every face on the directory
sat behind a heavy navy wash permanently -- the treatment reads as a
reveal when it appears on hover, and as a fault when it never leaves.
Here the overlay is pinned to the bottom instead and painted with a
gradient that starts fully transparent, so the photo above the text is
untouched and only the strip behind the two lines is darkened. Same
idea as the section cards' hover gradient, held open permanently.
The box is taller than the tint it draws: 40px of top padding sits
inside the transparent part of the gradient, which is what lets the
darkening arrive gradually rather than as an edge across the face.
The overlay carries only a name and a title -- no email buttons are
populated -- so two lines is all it ever has to hold.
THE STOPS ARE MEASURED, not chosen by eye. Rendering the directory at
phone width and reading the composite back gives, for white text over
every card on the page: worst 5.92:1, first percentile 6.97:1, median
12.22:1, and no line of text with a pixel under 4.5:1. A gentler ramp
was tried first -- 0.5 at 40% -- and bottomed out at 3.75:1 on the
lightest photos, over the 3:1 large-text floor but under the 4.5:1
that 16px bold and 13px regular actually need. */
@media (hover: none) {
.staff-card__overlay {
opacity: 1;
pointer-events: auto;
transform: none;
inset: auto 0 0 0;
justify-content: flex-end;
gap: 2px;
padding: 40px 10px 12px;
background: linear-gradient(
180deg,
rgba(var(--color-navy-rgb), 0) 0%,
rgba(var(--color-navy-rgb), 0.62) 32%,
rgba(var(--color-navy-rgb), 0.95) 100%
);
}
}
/* Someone who has asked for less motion still gets the overlay, just
without the slide. */
@media (prefers-reduced-motion: reduce) {
.staff-card__overlay {
transform: none;
transition: opacity 250ms ease;
}
}
/* About: facts / hours / opportunities / traditions / grad schools */
.facts-grid {
margin: 0 0 48px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 2px solid var(--color-divider);
}
.facts-grid__item {
padding: 14px 16px 14px 0;
border-bottom: 1px solid var(--color-divider);
}
.facts-grid__item dt {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-navy-700);
}
.facts-grid__item dd {
margin: 0;
font-size: 16px;
}
.hours-box {
margin: 0 0 48px;
padding: 24px;
background: var(--color-surface-light);
border-top: 4px solid var(--color-navy);
}
.hours-box__heading {
margin: 0 0 8px;
}
.hours-box__row {
margin: 0 0 4px;
color: var(--color-ink-muted);
}
.hours-box__note {
margin: 12px 0 0;
color: var(--color-ink-muted);
}
.opportunity-grid {
margin: 0 0 48px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
background: var(--color-divider);
border: 2px solid var(--color-divider);
}
.opportunity-card {
background: var(--color-offwhite);
padding: 24px;
}
.opportunity-card h3 {
font-size: 17px;
margin: 0 0 10px;
}
.opportunity-card p {
margin: 0;
color: var(--color-ink-muted);
font-size: 14px;
}
.tag-list {
margin: 0 0 48px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Plain highlight labels (About's Traditions list, Academics' division
subject highlights and Specials & Enrichment row) -- none of these are
links, so no border/padding pill look implying they're clickable. A
small gold dot marks each label instead of an underline, which would
read as a link affordance even with no hover/cursor state to back it
up. */
.tag {
display: inline-flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-navy-700);
}
.tag::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 50%;
background: var(--color-gold-accent);
}
.two-col-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 32px;
border-top: 2px solid var(--color-divider);
padding-top: 16px;
}
.two-col-list li {
font-size: 15px;
color: var(--color-ink-muted);
}
/* Site footer. Official STJES Blue exactly (var(--color-navy),
#041A71) rather than the darker --color-navy-800 shade used
elsewhere for large dark surfaces (feature cards, academics preview
cards) — a deliberate exception for the footer specifically. */
.site-footer {
position: relative;
background: var(--color-navy);
padding: 64px 24px 48px;
color: rgba(255, 255, 255, 0.85);
/* No overflow:hidden here — the top/bottom wave-dividers are
deliberately positioned 1px outside this box (see their own
top:-1px/bottom:-1px), and clipping that sliver is exactly what
would break them again. */
}
/* Faint full-color photo behind everything, low opacity so it reads
as atmosphere/texture rather than a visible picture — the solid
navy .site-footer background above still does the real legibility
work; this is layered on top of it, not instead of it. A background-
image on its own div (not a real ![]()
) so opacity only affects the
photo, same technique as .intro-section__bg. z-index:0, under both
the wave-dividers (2) and the actual content (1, see
.site-footer__inner) so it never competes with either. */
.site-footer__bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
opacity: 0.18;
pointer-events: none;
}
/* position:relative + z-index so this sits above .site-footer__bg —
without an explicit stacking context here, the positioned bg photo
would paint over this plain-flow content regardless of DOM order. */
.site-footer__inner {
position: relative;
z-index: 1;
}
/* A normal-flow row of its own, right-aligned, rather than absolutely
positioning the button itself — .site-footer__top's own "Quick
Links" column already sits at that same top-right corner of
.site-footer__inner, so an absolutely-positioned button there would
overlap it instead of sitting cleanly above it. */
.site-footer__back-to-top-row {
display: flex;
justify-content: flex-end;
margin-bottom: 24px;
}
/* Text label + a separate filled circular icon button, rather than one
bordered rectangle around both — matches the small-italic-label +
compact-pill-icon treatment referenced from Holton-Arms' site. */
.site-footer__back-to-top {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.85);
font: inherit;
cursor: pointer;
transition: color 200ms ease;
}
.site-footer__back-to-top:hover {
color: var(--color-white);
}
.site-footer__back-to-top-label {
font-style: italic;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.site-footer__back-to-top-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-gold-accent);
color: var(--color-navy);
transition: transform 200ms ease;
}
.site-footer__back-to-top:hover .site-footer__back-to-top-icon {
transform: scale(1.08);
}
/* Its own column now (was stacked above the name/motto in a single
brand column, which made that one column much taller than the two
nav columns beside it — splitting the crest out into a dedicated
column fixes that instead of shrinking it). flex-shrink:0 so the
240px image keeps its full size rather than getting squeezed by the
flex row. Back to a stacked (block) layout for the caption below
the crest -- a side-by-side flex row read as disconnected from the
seal instead of tucked against it. The caption itself is nudged
right (see .site-footer__crest-caption) to land under "MD.", not
centered under the whole circle. */
.site-footer__crest-col {
flex-shrink: 0;
}
/* No color filter — stjes-crest-ring-white.png already has its outer
ring (text + border circles) recolored to white at the file level
(see footer.php's docblock), with the interior artwork kept at its
real navy/white, so it reads correctly against the navy footer using
its own true colors. A brightness(0) invert(1) filter here would
crush all of that back to solid white, same as the old plain
navy/white file needed the filter for in the first place — the two
approaches are alternatives, not additive. Detailed circular badge
(ring text, eagle, banner), not a simple wordmark, so it needs real
size (240px) for the fine detail to actually read instead of
blurring into a mushy circle. */
.site-footer__crest {
height: 240px;
width: auto;
}
/* Real fact, sourced from the seal's own banner text (see
assets/images/real-photos/stjes-crest-transparent.png), not
invented for this design. System serif stack rather than loading a
second webfont for one small line of text — everything else on the
site is Archivo (sans-serif); this deliberately breaks from that for
a traditional, heraldic feel appropriate to a seal motto. */
.site-footer__motto {
margin: 6px 0 0;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
}
/* Real fact, sourced from the seal's own banner text (see
assets/images/real-photos/stjes-crest-transparent.png), not
invented for this design. display:inline-block + margin-left:60%
(rather than text-align:right, which would flush it to the full
column's right edge) so it sits roughly under "MD." -- "OLNEY, MD."
reads clockwise around the bottom of the ring, so "MD." itself
lands a bit right of center, not at the circle's true right edge. */
.site-footer__crest-caption {
display: inline-block;
margin: 6px 0 0 60%;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
/* space-between now applies to just 2 groups (brand-group, nav-group)
rather than 4 individual columns — with 4 flat columns, space-between
spread them edge-to-edge across the full 1240px row, leaving a big
gap between the brand column and "Our School" that had nothing to
do with actual content width. Grouping keeps the brand block tight
on the left and both nav columns tight together on the right,
matching the old stjes.org footer's layout. */
.site-footer__top {
display: flex;
justify-content: space-between;
/* Without this, flex's default align-items:stretch would stretch
the shorter nav-group to match the brand-group's own height —
much taller now that the crest is 240px — leaving it with
pointless empty space below its actual content. */
align-items: flex-start;
flex-wrap: wrap;
gap: 40px 28px;
}
.site-footer__brand-group {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 28px;
}
.site-footer__nav-group {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 56px;
}
.site-footer__brand-col {
max-width: 340px;
}
.site-footer__name {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 700;
color: var(--color-white);
}
.site-footer__contact {
margin-top: 8px;
font-size: 14px;
}
.site-footer__contact a {
color: rgba(255, 255, 255, 0.85);
}
/* Without this, the phone number's own hyphens (1-301-774-6804) are
valid line-break points to a browser's default text wrapping —
.site-footer__brand-col's 340px max-width is narrower than the full
address + phone + email line, so it wraps somewhere regardless; this
just keeps the number itself from being the thing that splits
mid-digit (e.g. "1-301-774-" / "6804") when it does. */
.site-footer__contact-phone {
white-space: nowrap;
}
.site-footer__social {
margin-top: 16px;
display: flex;
gap: 12px;
}
.site-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--color-navy);
background: var(--color-white);
border: none;
border-radius: 50%;
transition: color 200ms ease, background-color 200ms ease;
}
.site-footer__social-link:hover {
color: var(--color-navy-900);
background: var(--color-gold-accent);
}
.site-footer__nav-col {
min-width: 160px;
}
.site-footer__nav-heading {
margin: 0 0 16px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold-accent);
}
.site-footer__nav-list {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 16px;
}
.site-footer__nav-list a {
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid transparent;
}
.site-footer__nav-list a:hover {
color: var(--color-white);
border-bottom-color: var(--color-gold-accent);
}
/* Left unstyled/plain if a badge has no image yet — see .site-footer__badge
span below for the plain-text fallback badge treatment. */
.site-footer__accreditations {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.site-footer__badge {
display: inline-flex;
align-items: center;
}
/* Defensive: nothing in this stylesheet currently applies
padding/background/border to .site-footer__badge itself (only to
its span child, the text-fallback case — see below), but reset them
explicitly on the anchor whenever it contains an image anyway, in
case a box is coming from somewhere this file doesn't control (e.g.
Customizer "Additional CSS" or a plugin's own custom-CSS field —
both live in the database, outside this repo, invisible here and
unaffected by deploys). */
.site-footer__badge:has(img) {
padding: 0;
background: none;
border: none;
min-height: 0;
}
/* No color filter here on purpose — accreditation seals are
conventionally shown in their own original colors, not forced
monochrome, so real badge artwork renders as-is.
max-height:48px matches the smallest of the 3 real logo files'
native height (NAIS, 82x48) — max-height only caps images taller
than that down, it never stretches a smaller one up to fill it, so
none of the 3 (all low-res source files, 48-67px tall natively) get
upscaled/softened.
Explicit no-box reset (padding/background/border) even though the
badge-box treatment below already only targets .site-footer__badge
span (the text-fallback case), never img — this guarantees a real
logo always floats clean on the footer background with nothing
behind it, rather than relying on that scoping never changing. */
.site-footer__badge img {
max-height: 48px;
width: auto;
padding: 0;
background: none;
border: none;
}
/* More padding + a subtle fill + a gold top accent — reads as an
actual badge/seal now rather than a thin-bordered label. Bumped up
from a plain 10px/16px outline box, which felt more like an
accidental placeholder than a deliberate design element. */
.site-footer__badge span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 14px 28px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.35);
border-top: 3px solid var(--color-gold-accent);
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.site-footer__badge:hover span {
color: var(--color-white);
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-gold-accent);
}
.site-footer__bottom {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.site-footer__copyright {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
/* WPForms — on-brand overrides so submitted forms match the flat,
flush-left, zero-radius design language rather than the plugin's
generic default styling. */
.wpforms-container {
max-width: 560px;
margin: 0;
font-family: var(--font-body);
}
.wpforms-container .wpforms-field-label {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-ink);
}
.wpforms-container .wpforms-field-required {
color: var(--color-navy);
}
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container select,
.wpforms-container textarea {
font-family: var(--font-body);
font-size: 16px;
color: var(--color-ink);
background: var(--color-white);
border: 2px solid var(--color-divider);
border-radius: var(--radius);
padding: 12px 14px;
}
.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.wpforms-container .wpforms-submit-container {
margin-top: 8px;
}
.wpforms-container button[type="submit"].wpforms-submit {
display: inline-flex;
align-items: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 14px 22px;
background: var(--color-navy);
color: var(--color-white);
border: 2px solid var(--color-navy);
border-radius: var(--radius);
cursor: pointer;
}
.wpforms-container button[type="submit"].wpforms-submit:hover {
background: var(--color-white);
color: var(--color-navy);
}
.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
color: var(--color-navy-700);
font-size: 13px;
}
/* Responsive collapse for front-page sections and header */
@media (max-width: 900px) {
/* The bleed-under-hero look (hero starts at document y:0, header
floats transparently over its top) only works when the header is
short relative to the hero — true on desktop (~112px vs a
640px hero). The header stays that same short single-row height on
mobile now too (the hamburger toggle replaces the nav row instead
of it wrapping into several stacked rows the way it used to), but
mobile keeps this solid-navy override rather than switching to
bleed-under: at a narrower viewport the hero's own text has less
room to avoid the header overlapping it, and this wasn't something
that was asked to change here. Solid background regardless of
scroll state, since there's no image behind it left to show
through once they're no longer overlapping. */
.site-header--overlay {
background: var(--color-navy);
}
/* --header-height is still the :root default (72px) here — no mobile
override anymore. It used to jump to 460px for the old stacked
header (logo row, then a wrapped/scrolling nav row); this padding
was sized against that value, so once the header stopped actually
being that tall (nav now collapses behind the hamburger toggle
instead of wrapping), this reserved a large empty gap above
whatever came next — the dead space above the homepage hero. */
body:not(.site-body--no-hero) {
padding-top: var(--header-height);
}
/* No breakout/shrink on mobile — mobile's header never bleeds under
the hero (see the .site-header--overlay override above), so
there's no photo for an oversized logo to spill onto. Stays at the
compact 48px size always. */
.site-header--overlay:not(.site-header--scrolled) .site-header__logo img {
height: 48px;
}
.mobile-nav-toggle {
display: flex;
}
/* Full-screen slide-down overlay instead of the old wrapped/scrolling
inline row — toggled by .is-nav-open on .site-header (see
assets/js/mobile-nav.js). top matches --header-height so it sits
directly under the (now short, single-row) header bar; no z-index
needed since .site-header already establishes the stacking context
this is a descendant of. */
.primary-nav {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
/* height (not bottom: 0) using the dynamic viewport unit -- on
mobile, bottom: 0 on a fixed element can resolve against the
taller layout viewport rather than the shorter visual one while
the browser's own toolbar chrome is showing, leaving part of
this box (and the nav items in it) rendered behind that chrome
where no amount of scrolling the list can reach it. dvh tracks
the visible viewport as the toolbar shows/hides instead. */
height: calc(100dvh - var(--header-height));
margin-left: 0;
width: auto;
background: var(--color-navy);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
.site-header.is-nav-open .primary-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
.primary-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
overflow-x: visible;
padding: 8px 24px 40px;
}
.primary-nav__list li {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.primary-nav__list a:where(:not(.btn)),
.quick-links__trigger {
width: 100%;
min-height: 56px;
font-size: 15px;
}
.primary-nav__list li.menu-item-has-children > a,
.quick-links__trigger {
justify-content: space-between;
}
.primary-nav__list .primary-nav__cta {
border-bottom: none;
margin-top: 16px;
}
.primary-nav__list .primary-nav__cta .btn {
width: 100%;
justify-content: center;
}
/* Chevron rotates to point up once expanded -- same corner-rotation
technique as the accordion's own open/closed chevron (see
.accordion-item__summary::after), just tap-driven here (see
assets/js/mobile-nav.js) instead of the native toggle. */
.primary-nav__list li.menu-item-has-children.is-expanded > a::after,
.quick-links.is-expanded .quick-links__trigger::after {
transform: translateY(2px) rotate(225deg);
}
/* Static + collapsed by default instead of the desktop absolutely-
positioned hover panel -- stacks inline in the overlay's own
vertical flow, single-column (not the desktop 220px/280px grid),
shown only once its parent gets .is-expanded (tap-toggled). */
.nav-dropdown,
.quick-links__panel {
position: static;
display: none;
grid-template-columns: 1fr;
margin-top: 0;
background: transparent;
border-top: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.primary-nav__list li.menu-item-has-children.is-expanded > .nav-dropdown,
.quick-links.is-expanded .quick-links__panel {
display: block;
}
/* Side-by-side left border made sense for the desktop 2-column grid;
meaningless once the feature panel stacks below the links list
instead of beside it. Its own light background/dark text (set
elsewhere) is untouched and stays legible as-is against the dark
overlay around it. */
.nav-dropdown__feature {
border-left: none;
}
/* Desktop's dropdown/Quick Links links are navy text meant for a
white popup panel; this overlay's panel is navy background
instead, so they need to flip to light text to stay readable.
Same selector specificity as their desktop counterparts (earlier
in this file), so this wins purely by being later in the file, at
a breakpoint where it's the only one of the pair that applies.
Extra left padding signals these are nested under their parent
item, not another top-level row. */
.site-header .nav-dropdown .nav-dropdown__links a,
.site-header .quick-links .quick-links__panel a {
padding: 14px 12px 14px 24px;
color: rgba(255, 255, 255, 0.85);
}
.site-header .nav-dropdown .nav-dropdown__links a:hover,
.site-header .quick-links .quick-links__panel a:hover {
background: rgba(255, 255, 255, 0.08);
}
.nav-dropdown__links li,
.quick-links__panel li {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
.site-header .nav-dropdown .nav-dropdown__more {
color: var(--color-white);
}
.hero-slider {
height: 520px;
}
/* Hero's own wave-divider only (a more specific selector than the
shared .wave-divider class every other section reuses, so this
doesn't touch them). Its viewBox is scaled with
preserveAspectRatio="none", so the curve's fixed viewBox
coordinates get squeezed horizontally into a much narrower actual
width on an actual phone -- its peak, comfortably clear of
.hero-slider__dots at desktop widths, shifts left into roughly
the same horizontal footprint as the dots (which sit pinned to
the left edge). Combined with mobile's much shorter hero (520px
vs desktop's 760px) while the wave keeps its full 90px height,
that peak crowds the dots far more here than at desktop width.
Shrinking the box (bottom stays flush at -1px, so the seam with
the section below is unaffected) pulls the whole curve, peak
included, down and clear. */
.hero-slider .wave-divider {
height: 60px;
}
.hero-slide__content {
left: 0;
right: 0;
bottom: 60px;
align-items: flex-start;
text-align: left;
max-width: 100%;
padding: 0 24px;
}
.hero-slide__title {
font-size: 32px;
}
.hero-slide__text {
font-size: 15px;
}
.intro-section__grid,
.feature-grid,
.student-life-grid {
grid-template-columns: 1fr;
}
/* Neither of these had a mobile size before -- the desktop 42px
heading and 19px body held at every width, and the new 48px/22px
would have been worse still on a phone. Line-heights carry over
from the base rules unchanged; only the sizes step down. */
.intro-section__heading {
font-size: 32px;
}
.intro-section__body {
font-size: 18px;
}
/* First mobile vertical padding on this site -- until now every
section kept its full desktop padding at phone widths, so the
homepage carried several hundred px of dead space a phone user
had to scroll past. 56px (--space-section-sm) is the mobile step.
Only sections with NO wave-divider on either edge are handled
here. A wave is 90px tall and painted over its section's own
padding, so anything below that would slide content underneath
it -- .academics-preview-section, .cta-banner and .events-section
all need a paired wave-height reduction first and are left at
their desktop values for now, deliberately. .intro-section and
.student-life-section are free: the waves adjacent to them
(academics-preview's top, cta-banner's top) live inside those
sections, not these. */
.intro-section {
padding: var(--space-section-sm) 0 var(--space-section-sm);
}
.student-life-section {
padding: var(--space-section-sm) 0 var(--space-section-sm);
}
.cta-banner__inner {
grid-template-columns: 1fr;
text-align: left;
}
/* Bottom only -- the top is already --space-section-sm at every
width. No waves anywhere near this one. */
.subpage-layout {
grid-template-columns: 1fr;
padding: var(--space-section-sm) 24px var(--space-section-sm);
}
.about-intro {
padding: var(--space-section-sm) 24px 0;
}
.pillar-grid,
.opportunity-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.division-grid,
.academics-preview-grid {
grid-template-columns: 1fr;
}
.events-grid {
grid-template-columns: repeat(min(2, var(--events-count, 4)), minmax(0, 1fr));
}
.facts-grid,
.two-col-list {
grid-template-columns: 1fr;
}
.stat-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 2 per row instead of 4 -- at phone widths 4 across leaves each
tile too narrow for a face to read. Same basis formula as the
base rule: (100% - 1 x 20px) / 2. */
.staff-card {
flex-basis: calc(50% - 10px);
}
/* Odd-count guard, scoped to this 2-column layout: an odd number of
stats leaves the last row half empty, showing the grid's own
divider-grey through where the missing card would be. Spanning the
final card across both columns fills it instead. No effect at an
even count (4 stats, the recommended number). Deliberately NOT in
the base rule -- at desktop the column count tracks the card count
via --stat-count, so an odd count there is already a full row, and
an unscoped version of this would wrongly stretch the last card of
a 3-stat strip across the whole grid. */
.stat-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.subpage-banner {
height: 340px;
}
/* The base rule is already left-aligned now, so this just widens the
box to the full viewport (right:0) and swaps the container's
wide-viewport padding formula for a flat 24px -- everything else
(left-align, vertical centering) already carries over from the
base rule unchanged. */
.subpage-banner__content {
right: 0;
padding: 0 24px;
}
/* The desktop 0.14em is what makes this run wide out of proportion
to its 13px size -- uppercase and heavily tracked, a 3-level trail
("Student Life / Athletics / Sports Calendar") measures roughly
450px against the ~327px a 375px-wide phone leaves, so it wraps to
a second line it would otherwise mostly fit on. Tightened here
only; desktop keeps the wider tracking, where there's room for it. */
.subpage-banner__crumbs {
letter-spacing: 0.08em;
}
/* Un-forces the desktop nowrap: at 32px this is very unlikely to
overflow a phone-width viewport for any realistic title, but
letting a rare long one wrap to 2 lines is a far smaller risk
than forcing nowrap and causing a horizontal scroll instead. */
.subpage-banner__content h1 {
white-space: normal;
font-size: 32px;
}
.quote-band {
height: 460px;
}
.quote-band__content {
max-width: 100%;
padding-right: 24px;
}
}
/* Below this, .pillar-grid (About, Admissions, Support) and
.opportunity-grid (About, Support) still had the 2-column layout the
900px breakpoint above sets -- at ~375px that leaves each column only
~160px wide (375px viewport, minus 24px container padding each side,
minus the grid's own 2px gap/border), genuinely cramped rather than
just narrow. Single column instead, full-width cards, only for the
phones actually narrow enough to need it. */
@media (max-width: 480px) {
.pillar-grid,
.opportunity-grid {
grid-template-columns: 1fr;
}
}
/* Per-event detail page (single-stjes-event.php, routed by
inc/event-detail.php). Deliberately plain: no banner photo exists for
a Google Calendar event, so this is a narrow reading column under the
solid header rather than anything hero-like. Max-width matches
.subpage-content's own measure so the description reads the same as
body copy elsewhere. */
.event-detail {
padding: var(--space-section-sm) 24px var(--space-section);
max-width: 800px;
}
.event-detail__crumbs {
margin: 0 0 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-navy-700);
}
.event-detail__title {
margin: 0 0 24px;
font-size: 42px;
line-height: 1.15;
}
.event-detail__meta {
margin: 0 0 32px;
padding: 24px;
background: var(--color-surface-light);
border-left: 3px solid var(--color-gold-accent);
}
.event-detail__meta-row {
display: grid;
grid-template-columns: 90px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
}
.event-detail__meta-row + .event-detail__meta-row {
margin-top: 12px;
}
.event-detail__meta dt {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.event-detail__meta dd {
margin: 0;
font-size: 17px;
color: var(--color-ink);
}
.event-detail__back {
margin: 40px 0 0;
}
@media (max-width: 900px) {
.event-detail {
padding: var(--space-section-sm) 24px var(--space-section-sm);
}
.event-detail__title {
font-size: 30px;
}
/* Stacks the label above its value -- a fixed 90px label column
leaves too little room for a date range at phone widths. */
.event-detail__meta-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Simple Calendar (google-calendar-events) plugin overrides -- the
/calendar/ page's [calendar id="357"] shortcode. Confirmed via the
plugin's own source that it ships zero CSS for its month-grid event
titles (.simcal-event-title, a plain , not a link) -- no
color/font-weight rule exists anywhere in its compiled stylesheets,
so titles were just inheriting the page's default text color and
reading as flat/muted. Bolded and given the site's real navy brand
color to match the legibility of the old stjes.org calendar. */
.simcal-calendar .simcal-event-title {
color: var(--color-navy);
font-weight: 700;
}
.simcal-calendar .simcal-event:hover .simcal-event-title {
color: var(--color-navy-600);
}
/* assets/js/calendar-event-links.js swaps each title for an
pointing at that event's own page, so the grid needs the anchor to
keep reading as a title rather than picking up default link styling.
Selector matches the span rule above on purpose (the JS copies the
class across), so the two stay in step -- this only adds what an
anchor brings with it that a span doesn't. */
.simcal-calendar a.simcal-event-title {
display: block;
text-decoration: none;
cursor: pointer;
}
.simcal-calendar a.simcal-event-title:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
.simcal-calendar a.simcal-event-title:focus-visible {
outline: 2px solid var(--color-navy);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------
Site search: the header's expanding control, and the results page.
--------------------------------------------------------------------- */
/* Collapsed to an icon by default -- a permanent input would cost the
nav horizontal room it does not have, and this nav already collapses
at 900px. The width transition is what makes the expansion read as the
icon opening rather than a box appearing from nowhere. */
.site-search {
position: relative;
display: flex;
align-items: center;
}
/* 30px rather than 34px: this control is the newest thing in a nav row
that was already tight, and every pixel it gives back is one the nav
does not have to wrap for. Still comfortably above the 24px minimum
for a pointer target, and the tap target on touch is the surrounding
list item rather than this box. */
.site-search__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
background: none;
border: 0;
color: inherit;
cursor: pointer;
transition: color 200ms ease;
}
.site-search__toggle:hover,
.site-search__toggle:focus-visible,
.site-search.is-open .site-search__toggle {
color: var(--color-gold-accent);
}
/* width rather than display, so it can animate. visibility keeps the
collapsed input out of the tab order -- width:0 alone would leave a
focusable field nobody can see, which is the classic way an expanding
search traps a keyboard user. */
.site-search__form--header {
display: flex;
align-items: center;
width: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
border-bottom: 2px solid transparent;
transition: width 260ms ease, opacity 200ms ease, border-color 200ms ease;
}
.site-search.is-open .site-search__form--header {
width: 210px;
opacity: 1;
visibility: visible;
border-bottom-color: var(--color-gold-accent);
}
.site-search__input {
width: 100%;
padding: 6px 4px;
background: none;
border: 0;
outline: none;
color: inherit;
font-family: inherit;
font-size: 14px;
font-weight: 600;
}
.site-search__input::placeholder {
color: currentColor;
opacity: 0.55;
font-weight: 400;
}
.site-search__submit {
flex: 0 0 auto;
display: flex;
padding: 4px;
background: none;
border: 0;
color: var(--color-gold-accent);
cursor: pointer;
}
/* COLOUR COMES FROM THE HEADER VARIANT RULES, not from inheritance.
color:inherit above looks like it should pick the header's white up,
and does not: .site-header--overlay / --solid set colour on a named
list of elements (the logo, the Quick Links trigger, the nav links),
never on a container. So an unlisted control inherits straight past
the header to body's --color-ink, which is near-black -- and a
near-black icon on a navy bar is not a missing icon, it is an
invisible one. That is exactly how this shipped the first time.
.site-search__toggle and .site-search__input are therefore added to
both variant rules, up beside the logo and the Quick Links trigger,
so anything else added to this header later is one line away from
being correct instead of one debugging session. */
/* --- the results page --- */
.search-summary {
margin: 0 0 8px;
color: var(--color-ink-muted);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.search-summary strong {
color: var(--color-navy-700);
}
.search-rule {
width: 40px;
height: 3px;
margin: 0 0 34px;
background: var(--color-gold-accent);
}
/* The same index rows as the "In This Section" lists. Search results are
navigation, and the site already has a shape for that. */
.subpage-content .search-results {
max-width: 820px;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(32, 30, 29, 0.16);
}
.subpage-content .search-results li {
margin: 0;
padding: 0;
}
.subpage-content .search-results li::marker {
content: '';
}
.subpage-content .search-result {
display: block;
padding: 24px 4px;
border-bottom: 1px solid rgba(32, 30, 29, 0.16);
text-decoration: none;
transition: background-color 200ms ease, padding-left 200ms ease;
}
.subpage-content .search-result:hover,
.subpage-content .search-result:focus-visible {
background: var(--color-surface-light);
padding-left: 10px;
}
/* Where the page sits, above its title. On a site three levels deep,
"Kindergarten" alone does not say whether this is the Academics page
or the admissions visit policy. */
.search-result__crumb {
display: block;
margin: 0 0 5px;
color: var(--color-ink-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.search-result__title {
display: block;
color: var(--color-navy-700);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
.search-result__arrow {
color: var(--color-gold-accent);
font-weight: 700;
}
.search-result__excerpt {
display: block;
max-width: 70ch;
margin-top: 7px;
color: var(--color-ink);
font-size: 15.5px;
}
.search-empty {
max-width: 70ch;
}
.subpage-content .search-empty h2 {
margin: 0 0 12px;
font-size: 24px;
}
/* Always visible, unlike the header's: this is the page someone reaches
when the header's search did not find anything, so the box has to be
here rather than back up in the nav. */
.site-search__form--page {
display: flex;
align-items: center;
width: 100%;
max-width: 420px;
margin-top: 20px;
border-bottom: 2px solid var(--color-navy);
color: var(--color-ink);
}
.site-search__form--page .site-search__submit {
color: var(--color-navy);
}
.search-pagination {
margin-top: 40px;
}
@media (max-width: 900px) {
.site-search.is-open .site-search__form--header {
width: 150px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-search__form--header,
.subpage-content .search-result {
transition: none;
}
.subpage-content .search-result:hover,
.subpage-content .search-result:focus-visible {
padding-left: 4px;
}
}