, which also left pages jumping straight from h1 to the h3 card titles underneath. Everything below the first four lines exists to make an
did: theme.json gives headings Bitter at weight 800 and
line-height 1.15, and .wp-block-post-content adds a 1.75em top margin. The
second selector outweighs that rule (0,2,1 vs 0,1,1). */
.sb-ornament,
.wp-block-post-content h2.sb-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-family: var(--wp--preset--font-family--body);
font-weight: 700;
font-size: 0.8125rem;
line-height: 1.6;
margin: 0;
color: var(--wp--preset--color--forest);
}
.sb-ornament::before,
.sb-ornament::after {
content: "";
width: 16px;
height: 18px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 0 L12 6 L10.5 6 L14 11 L12 11 L16 17 L9 17 L9 18 L7 18 L7 17 L0 17 L4 11 L2 11 L5.5 6 L4 6 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 0 L12 6 L10.5 6 L14 11 L12 11 L16 17 L9 17 L9 18 L7 18 L7 17 L0 17 L4 11 L2 11 L5.5 6 L4 6 Z'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* --- Root layout: sections own their spacing; no default gap between header/main/footer --- */
.wp-site-blocks > * {
margin-block-start: 0;
}
/* --- Sticky header --- */
.sb-header {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* Mobile: hamburger + hero CTA cover it; the standalone button just crowds the bar */
@media (max-width: 781px) {
.sb-header .sb-header-cta { display: none; }
}
/* --- Photo slot with real image (background-image set inline).
!important because .sb-ph's `background:` shorthand would reset size/repeat. --- */
.sb-img {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* --- Photo placeholder (swap for real photos; see docs/image-manifest.md) --- */
.sb-ph {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 55%),
linear-gradient(160deg, #0f8aee 0%, #0c71c3 55%, #074679 100%);
}
/* --- Hero slider --- */
.sb-slider {
position: relative;
min-height: 560px;
}
.sb-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.9s ease;
display: flex;
align-items: center;
pointer-events: none;
}
.sb-slide.is-active { opacity: 1; pointer-events: auto; }
.sb-slide__dim {
position: absolute;
inset: 0;
/* Neutral, bottom-weighted. A flat green wash tinted every photo and
flattened the snow; this keeps the picture's own colour and only darkens
where the headline sits. */
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.18) 40%,
rgba(0, 0, 0, 0) 65%
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.24) 70%,
rgba(0, 0, 0, 0.50) 100%
);
}
.sb-slide__inner {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem clamp(1rem, 4vw, 2.5rem);
}
.sb-slide__inner .sb-hero-title { font-size: var(--wp--preset--font-size--colossal); margin: 0; }
.sb-slide__inner .sb-script { font-size: 2.25rem; margin: 0.5rem 0 0; }
.sb-slide__btn { margin: 1.5rem 0 0; }
.sb-slide__btn .wp-element-button {
background: var(--wp--preset--color--brule-red);
color: #fff;
text-decoration: none;
padding: 0.9rem 1.75rem;
border-radius: 4px;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9375rem;
letter-spacing: 0.04em;
display: inline-block;
}
.sb-slide__btn .wp-element-button:hover { background: var(--wp--preset--color--brule-red-dark); }
.sb-slider__dots {
position: absolute;
bottom: 2rem;
right: clamp(1rem, 4vw, 2.5rem);
display: flex;
gap: 8px;
z-index: 3;
}
.sb-slider__dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #fff;
background: transparent;
cursor: pointer;
padding: 0;
}
.sb-slider__dot.is-active { background: #fff; }
@media (max-width: 781px) {
.sb-slider { min-height: 440px; }
.sb-slide__inner .sb-script { font-size: 1.6rem; }
}
/* --- Conditions bar (dark green band overlapping hero bottom) --- */
.sb-conditions-wrap {
position: relative;
z-index: 5;
margin-top: -3.5rem;
}
.sb-conditions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 2rem;
background: var(--wp--preset--color--forest);
color: #fff;
padding: 1.1rem 1.75rem;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.sb-conditions__head {
display: flex;
align-items: center;
gap: 0.85rem;
}
.sb-conditions__head > div {
display: flex;
flex-direction: column;
}
.sb-conditions__title {
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.9375rem;
}
.sb-conditions__updated {
font-size: 0.75rem;
opacity: 0.75;
}
.sb-conditions__stat {
display: flex;
flex-direction: column;
}
.sb-conditions__value {
font-family: var(--wp--preset--font-family--display);
font-weight: 800;
font-size: 1.125rem;
line-height: 1.2;
}
.sb-conditions__label {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.75;
}
.sb-conditions__link {
margin-left: auto;
color: #fff;
font-weight: 700;
font-size: 0.875rem;
text-decoration: none;
white-space: nowrap;
}
.sb-conditions__link:hover { text-decoration: underline; color: #fff; }
.sb-conditions__stat {
border-left: 1px solid rgba(255, 255, 255, 0.25);
padding-left: 1.75rem;
}
.sb-conditions__value--sm { font-size: 0.9375rem; }
.sb-conditions__night {
font-size: 0.75rem;
opacity: 0.85;
line-height: 1.35;
margin-top: 0.15rem;
}
.sb-conditions__link {
text-transform: uppercase;
font-family: var(--wp--preset--font-family--display);
letter-spacing: 0.04em;
font-size: 0.8125rem;
}
.sb-conditions--summer { justify-content: center; text-align: center; }
.sb-conditions__summer {
margin: 0;
font-family: var(--wp--preset--font-family--script);
font-weight: 700;
font-size: 1.5rem;
}
@media (max-width: 781px) {
.sb-conditions-wrap { margin-top: -1.5rem; }
.sb-conditions { border-radius: 6px; gap: 0.9rem 1.5rem; }
.sb-conditions__link { margin-left: 0; }
.sb-conditions__head { flex-basis: 100%; }
.sb-conditions__stat { border-left: 0; padding-left: 0; }
}
/* --- Conditions bar icon --- */
.sb-conditions__icon {
width: 38px;
height: 38px;
flex: 0 0 auto;
}
/* --- Stats strip --- */
.sb-stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1.25rem 1rem;
}
.sb-stat {
text-align: center;
flex: 1 1 0;
min-width: 110px;
}
.sb-stat svg {
display: block;
width: 30px;
height: 30px;
margin: 0 auto 0.35rem;
color: var(--wp--preset--color--forest);
}
@media (max-width: 781px) {
.sb-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.sb-stat { min-width: 0; }
.sb-stat__num { font-size: 1.3rem; }
.sb-stat__label { font-size: 0.65rem; }
}
.sb-stat__num {
display: block;
font-family: var(--wp--preset--font-family--display);
font-weight: 900;
font-size: 1.75rem;
color: var(--wp--preset--color--forest);
line-height: 1.1;
}
.sb-stat__label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--wp--preset--color--charcoal);
opacity: 0.8;
}
/* --- Section photo cards (green label bar) --- */
/* Equal heights: photos keep their ratio, label bars stretch to the tallest card in the row. */
.wp-block-column:has(> .sb-card),
.wp-block-column:has(> .sb-vcard) {
display: flex;
}
.sb-card {
text-decoration: none;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.sb-vcard {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.sb-vcard > .wp-block-group:last-child { flex: 1; }
.sb-vcard .sb-card__photo { width: 100%; }
/* Photo wrapped in a link (chalet cards): the anchor must be a block or the
photo collapses to 0×0. */
.sb-vcard > a { display: block; width: 100%; line-height: 0; }
.sb-card__photo { aspect-ratio: 4 / 3; border-radius: 6px 6px 0 0; flex: 0 0 auto; }
/* Product tiles on the buy page. Every WooCommerce product image is an 800x800
square with the artwork or a label band baked in, so a 4:3 crop slices
through it -- the season-pass images lose half their caption and the gift
certificates lose the top and bottom of the design. Show the whole square. */
.sb-card__photo--square { aspect-ratio: 1 / 1; }
/* Blog listing grid. WordPress emits `repeat(3, minmax(0, 1fr))` for the post
template, but on narrow screens the used value resolves to a single fixed
760px track: at 390px the listing measured 770px wide and scrolled sideways,
making /blog/ unusable on a phone. Force a track definition that is
responsive by construction -- 3 up at 1200px, 2 up on tablets, 1 up on a
phone -- rather than relying on a fixed column count. */
.wp-block-post-template.is-layout-grid {
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important;
}
/* Buy page only. Jessica (9/11): "Is there a way to reduce the size of these
images? Feels overwhelming." The product artwork is square, so at full column
width each tile is ~380px tall and the page becomes a wall of images. Capping
the card and centring it in its column shrinks the tiles without changing the
3-up grid or touching the page content. */
.page-id-35 .sb-vcard {
max-width: 260px;
margin-inline: auto;
}
/* Inline callout for a short practical note inside body copy -- used on the buy
page for "passes are not mailed". Left rule rather than a filled panel so it
reads as an aside, not an error. */
.sb-note {
margin: 0 0 1.2rem;
padding: 0.7rem 0.95rem;
border-left: 4px solid var(--wp--preset--color--forest, #0c71c3);
background: #eaf3fb;
color: #14202b;
font-size: 0.95rem;
line-height: 1.5;
border-radius: 3px;
}
.sb-card__bar {
background: var(--wp--preset--color--forest);
color: #fff;
border-radius: 0 0 6px 6px;
padding: 0.8rem 1rem;
}
.sb-card__bar h3 {
color: #fff;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 0.15rem;
}
/* Was opacity .85, which computed to #dbeaf6 on the blue bar -- 4.1:1, under
the 4.5:1 floor for body text. An explicit tint keeps the softer look and
measures 4.61:1. */
.sb-card__bar p { margin: 0; font-size: 0.8125rem; color: #eef6fc; }
.sb-card__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex: 1;
}
.sb-card__arrow {
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
transition: background 0.15s;
}
.sb-card:hover .sb-card__arrow { background: var(--wp--preset--color--brule-red); }
/* --- News band header (eyebrow left, view-all right) --- */
.sb-eyebrow {
margin: 0 0 0.2rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--wp--preset--color--brule-red);
}
.sb-news {
display: grid;
grid-template-columns: minmax(190px, 250px) 1fr;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
}
.sb-news > * { min-width: 0; }
.sb-news__intro h2 { margin: 0 0 0.6rem; }
.sb-news__desc {
margin: 0 0 1.1rem;
font-size: 0.9375rem;
opacity: 0.85;
}
.sb-news__intro .sb-learn a {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8125rem;
color: var(--wp--preset--color--forest);
}
@media (max-width: 781px) {
.sb-news { grid-template-columns: 1fr; gap: 1.25rem; }
}
/* --- Newsletter band row --- */
.sb-nl-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem 3rem;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.sb-nl-row h2 { color: #fff; margin: 0 0 0.25rem; }
.sb-nl-row p { margin: 0; color: #eef6fc; } /* see .sb-card__bar p -- same 4.1:1 problem */
.sb-newsletter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex: 1 1 320px;
max-width: 480px;
}
.sb-newsletter input[type="email"] {
flex: 1 1 200px;
padding: 0.75rem 1rem;
border: 0;
border-radius: 4px;
font: inherit;
}
/* --- Promo row (mockup: wide featured card + narrow kids card) --- */
.sb-promo-row {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: clamp(1rem, 2vw, 1.5rem);
align-items: stretch;
}
.sb-promo-row > * { min-width: 0; }
/* Featured package: text left, photo bleeding to the card edges */
.sb-promo {
display: grid;
grid-template-columns: 0.86fr 1.14fr;
align-items: center;
border-radius: 6px;
overflow: hidden;
min-height: 330px;
}
.sb-promo__text { padding: clamp(1.25rem, 2.4vw, 2rem); }
.sb-promo__text h2 { margin: 0 0 0.6rem; }
.sb-promo__text p { margin: 0 0 1rem; }
.sb-promo__text p:last-child { margin-bottom: 0; }
.sb-promo__photo {
position: relative;
align-self: stretch;
}
.sb-promo__photo .sb-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
border-radius: 0;
}
/* Kids Ski FREE: text on top, photo anchored to the bottom edge */
.sb-kids-card {
display: flex;
flex-direction: column;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.sb-kids-card__text { padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.4vw, 2rem) 0; }
.sb-kids-card__text h2 { margin: 0 0 0.5rem; }
.sb-kids-card__text p { margin: 0; }
.sb-kids-card__photo {
margin-top: auto;
width: 100%;
aspect-ratio: 16 / 10;
background-position: center 22%;
}
.sb-kids-card:hover .sb-kids-card__text h2 { color: var(--wp--preset--color--brule-red); }
@media (max-width: 781px) {
.sb-promo-row { grid-template-columns: 1fr; }
.sb-promo { grid-template-columns: 1fr; min-height: 0; }
.sb-promo__photo { order: -1; aspect-ratio: 16 / 9; }
.sb-promo__photo .sb-card__photo { position: absolute; }
}
/* --- "Where is Ski Brule?" (#42) ---
Address, phone and the two map buttons sit together in one card at the top,
because that block is the whole answer to the page's question. Everything
below it is for people already in the car. */
.sb-where {
margin: 1.25rem 0 1.5rem;
padding: 1.1rem 1.25rem;
background: var(--wp--preset--color--cream, #f7f3ea);
border-left: 4px solid var(--wp--preset--color--forest, #0c71c3);
border-radius: 3px;
}
.sb-where__addr { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.45; }
.sb-where__tel { margin: 0 0 0.5rem; font-size: 0.95rem; }
.sb-where__go { margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Bigger than a table's Buy button — this is the page's primary action, and it
is mostly tapped with a thumb. */
.sb-where__go .sb-buy { margin-top: 0.35rem; padding: 0.55rem 1rem; font-size: 0.8rem; }
/* Doubled class on purpose: .sb-buy is declared further down the file, so at
equal specificity it would win on source order and both buttons would come
out red. */
.sb-buy.sb-buy--alt { background: var(--wp--preset--color--forest, #0c71c3); }
.sb-buy.sb-buy--alt:hover,
.sb-buy.sb-buy--alt:focus-visible { background: var(--wp--preset--color--forest-dark, #074679); }
.sb-where__map { margin: 0 0 1.4rem; }
.sb-where__map iframe { display: block; width: 100%; border: 0; border-radius: 4px; }
/* The distance list is two narrow columns; left to itself it stretches the
city names to the full content width and reads as a gap with numbers. */
.sb-distance { max-width: 26rem; }
.sb-distance td { text-align: right; white-space: nowrap; }
.sb-distance th[scope="row"] { text-align: left; font-weight: 400; }
/* --- Galleria image counter ---
The "1 / 12" counter ships as #979593 on the near-white stage: 2.89:1, under
the 4.5:1 floor. Darkened to 6.35:1. Galleria builds this markup in JS after
load, so the classes never appear in the page source -- and its stylesheet is
enqueued after the theme's, hence !important.
Note: galleria is slated for removal once the Photos page is rebuilt
natively, at which point this rule can go with it. */
.galleria-counter,
.galleria-current,
.galleria-total {
color: #5f5d5b !important;
/* Galleria also puts opacity:.4 on the counter, which composites whatever
colour is set towards the background -- setting the colour alone made it
lighter, not darker. Both have to go. */
opacity: 1 !important;
}
/* --- Cookie notice: match theme --- */
#cookie-notice {
background: var(--wp--preset--color--forest-dark, #074679) !important;
}
#cookie-notice .cn-button {
background: var(--wp--preset--color--brule-red, #c8102e) !important;
color: #fff !important;
border-radius: 4px !important;
}
/* The cookie bar renders 2px wider than the viewport on a phone (392 against
390), which makes EVERY page report a horizontal scroll -- not just the one
it was first noticed on. */
/* NOT FIXED: the cookie bar renders 2px wider than the viewport on a phone
(392 against 390), so every page reports a hairline horizontal scroll. The
plugin's own stylesheet loads after the theme's and wins on order even
against !important at equal specificity; raising specificity to
`html body #cookie-notice` did not take either. Cosmetic -- 2px, invisible in
use -- so it is left alone rather than fought with overflow:hidden on body,
which would break sticky positioning. Revisit by dequeuing and replacing the
plugin stylesheet if it ever matters. */
/* The Events Calendar renders its own templates outside .wp-block-post-content,
so the max-width rule there never reached them: the single-event featured
image measured 800px inside a 390px viewport and was clipped rather than
scaled down. */
.tribe-common img,
.tribe-events img,
#tribe-events-content img,
.tribe-events-single img {
max-width: 100%;
height: auto;
}
/* --- Footer pine silhouette motif --- */
.sb-footer {
position: relative;
overflow: hidden;
}
.sb-footer::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 34px;
opacity: 0.14;
background-color: #fff;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 34'%3E%3Cpath d='M16 2 L24 14 L21 14 L28 24 L24 24 L32 34 L0 34 L8 24 L4 24 L11 14 L8 14 Z'/%3E%3Cpath d='M56 8 L62 17 L59.5 17 L65 25 L62 25 L68 34 L44 34 L50 25 L47 25 L52.5 17 L50 17 Z'/%3E%3Cpath d='M84 4 L90 13 L87.5 13 L93 22 L90 22 L96 32 L96 34 L72 34 L78 22 L75 22 L80.5 13 L78 13 Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 34'%3E%3Cpath d='M16 2 L24 14 L21 14 L28 24 L24 24 L32 34 L0 34 L8 24 L4 24 L11 14 L8 14 Z'/%3E%3Cpath d='M56 8 L62 17 L59.5 17 L65 25 L62 25 L68 34 L44 34 L50 25 L47 25 L52.5 17 L50 17 Z'/%3E%3Cpath d='M84 4 L90 13 L87.5 13 L93 22 L90 22 L96 32 L96 34 L72 34 L78 22 L75 22 L80.5 13 L78 13 Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: 96px 34px;
mask-size: 96px 34px;
pointer-events: none;
}
/* --- Promo badge (white circle, red type) --- */
.sb-badge {
position: absolute;
right: 6%;
bottom: 12%;
width: 104px;
height: 104px;
border-radius: 50%;
background: #fff;
color: var(--wp--preset--color--brule-red);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--wp--preset--font-family--display);
line-height: 1.1;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.sb-badge span {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sb-badge strong { font-size: 1.5rem; font-weight: 900; }
@media (max-width: 480px) {
.sb-badge { width: 84px; height: 84px; }
.sb-badge strong { font-size: 1.2rem; }
}
/* --- Learn More / View Menu arrow links --- */
.sb-learn { font-weight: 700; font-size: 0.875rem; }
.sb-learn a { text-decoration: none; }
.sb-learn a:hover { text-decoration: underline; }
/* --- Horizontal card (dining venues) --- */
.sb-hcard {
display: grid;
grid-template-columns: 220px 1fr;
overflow: hidden;
align-items: stretch;
}
.sb-hcard__photo { border-radius: 6px 0 0 6px; height: 100%; min-height: 160px; }
@media (max-width: 599px) {
.sb-hcard { grid-template-columns: 1fr; }
.sb-hcard__photo { border-radius: 6px 6px 0 0; aspect-ratio: 16 / 9; }
}
/* --- Quick links row --- */
.sb-quick-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(1.5rem, 5vw, 4rem);
padding: 0.5rem 0;
}
.sb-quick-links a {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
text-decoration: none;
color: var(--wp--preset--color--charcoal);
text-align: center;
}
.sb-quick-links svg {
width: 30px;
height: 30px;
color: var(--wp--preset--color--forest);
margin-bottom: 0.25rem;
}
.sb-quick-links strong { font-size: 0.9375rem; color: var(--wp--preset--color--forest); }
.sb-quick-links span { font-size: 0.75rem; opacity: 0.75; }
.sb-quick-links a:hover strong { color: var(--wp--preset--color--brule-red); }
/* --- Report lists (snow conditions page: trails, lifts, hours) --- */
.sb-report-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9375rem;
}
.sb-report-list li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
border-bottom: 1px solid rgba(38, 36, 31, 0.08);
}
.sb-report-list li:last-child { border-bottom: 0; }
.sb-report-list svg { flex: 0 0 auto; }
.sb-report-list .sb-status { margin-left: auto; opacity: 0.8; font-weight: 600; }
.sb-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem;
font-size: 0.8125rem;
justify-content: center;
}
.sb-legend svg { vertical-align: -2px; margin-right: 0.35rem; }
.sb-report-head {
margin: 0 0 0.5rem;
font-size: 1.0625rem;
}
.sb-report-cols {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--50);
}
.sb-report-cols > .wp-block-column { flex: 1 1 0; min-width: 200px; }
/* --- Table scroll guard: wide tables scroll inside their box on phones --- */
.sb-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.25rem 0;
}
.sb-table-scroll table { margin: 0; }
/* opacity dims the whole subtree and cannot be undone by a child, so .8 here
was also dimming the links inside to #d13d54 -- 4.2:1 on cream, under AA.
An explicit muted colour keeps the note quiet (6.60:1) and lets the links
keep their own colour (brule red, 5.31:1). Third place this pattern turned
up, after .sb-card__bar p and .sb-nl-row p. */
.sb-rate-note { font-size: 0.8125rem; color: #5a564d; }
/* --- Migrated content elements: consistent tables, media, lists --- */
.wp-block-post-content table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
font-size: 0.9375rem;
}
.wp-block-post-content th,
.wp-block-post-content td {
padding: 0.5rem 0.75rem;
border: 1px solid rgba(38, 36, 31, 0.15);
text-align: left;
vertical-align: top;
}
.wp-block-post-content th {
background: var(--wp--preset--color--paper);
font-weight: 700;
}
.wp-block-post-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* Text-wrapped media.
WordPress ships `.alignleft { float: left }` in classic-themes.css, which
BLOCK themes do not load, and its own layout CSS only floats DIRECT children
of a constrained container (`> .alignleft`). Jessica's images are
classic-editor markup nested inside an inside a paragraph, so nothing
floated them -- measured float:none on every one. The rules below set only
margins, which is exactly why it looked right in the editor and flat on the
published page. Declare the float itself, at any nesting depth. */
.wp-block-post-content .alignleft { float: left; }
.wp-block-post-content .alignright { float: right; }
/* Contain the floats so they cannot bleed past the end of the content and
overlap whatever follows. */
.wp-block-post-content::after { content: ""; display: table; clear: both; }
/* Padding on the side the text sits against.
Covers block alignments (.alignleft/.alignright) and legacy inline floats. */
.wp-block-post-content .alignleft,
.wp-block-post-content img[style*="float: left"],
.wp-block-post-content img[style*="float:left"] {
margin: 0.25rem 1.5rem 0.75rem 0 !important;
}
.wp-block-post-content .alignright,
.wp-block-post-content img[style*="float: right"],
.wp-block-post-content img[style*="float:right"] {
margin: 0.25rem 0 0.75rem 1.5rem !important;
}
.wp-block-post-content .aligncenter {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 480px) {
/* Phones: floated images share too little line length — stack them */
.wp-block-post-content .alignleft,
.wp-block-post-content .alignright,
.wp-block-post-content img[style*="float: left"],
.wp-block-post-content img[style*="float:left"],
.wp-block-post-content img[style*="float: right"],
.wp-block-post-content img[style*="float:right"] {
float: none !important;
display: block;
margin: 0.75rem auto !important;
}
}
.wp-block-post-content iframe {
max-width: 100%;
border: 0;
}
.wp-block-post-content figure { margin: 1.25rem 0; }
.wp-block-post-content h2,
.wp-block-post-content h3 { margin-top: 1.75em; }
.wp-block-post-content h2:first-child { margin-top: 0; }
.wp-block-post-content ul,
.wp-block-post-content ol { padding-left: 1.25rem; }
.wp-block-post-content li { margin-bottom: 0.35rem; }
/* --- Accessibility: visible focus everywhere ---
Two-tone ring on purpose. Brule red is 5.88:1 on white but only 1.17:1 on
the blue bars, so a red-only ring vanishes exactly where the utility nav and
card links live. White outline + red halo means one of the two always has
contrast, whatever it lands on (WCAG 2.1 SC 1.4.11).
Not wrapped in :where() -- that has zero specificity, so any later rule
setting an outline would silently win. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--wp--preset--color--brule-red);
border-radius: 2px;
}
/* Skip link: WordPress injects one for block themes ("Skip to content",
.skip-link.screen-reader-text) and it works, so the theme does not add its
own -- two consecutive skip links is just an extra tab stop. Core points it
at the first