/* ==========================================================================
PAGE-OVERRIDES Page-specific styles only
No responsive rules here all responsive lives in breakpoints.css
========================================================================== */
/* ---------- CONTACT PAGE ---------- */
/* Hero banner. Same band as About, FAQ and poem: the section is listed in the
shared :is() groups further down rather than given parallel per-page rules, so
this block holds only what is genuinely different about this banner.
The source is 2172x724 (aspect 3.000) while the band is pinned to 2170/725
(aspect 2.993), so the band takes the shared aspect ratio and the image is
cover-fitted into it. The difference is a quarter of a percent, which is why
the crop is invisible. */
.contact-hero-media { aspect-ratio: 2170 / 725;}
.contact-hero-bg { height: 100%; object-fit: cover; object-position: center 45%;}
/* The panorama is bright and warm across the whole band, and the header sits on
its top edge where the sky is, so white header ink needs the veil the poem
banner gets. About and FAQ have theirs baked into the JPEG and must not be
given a second one; this source is served as-is, so it is painted in CSS.
0.59 is the lightest strength that clears AA for every header ink, measured
per pixel over the cover-fitted image rather than worked out on average: at
1436px the nav reads 4.55, the logo 5.32 and the h1 5.27. The translucent
logo tagline is the binding constraint everywhere on this site and sits at
3.64 here, which is where the FAQ banner (3.68) and the poem banner (3.65)
already sit. */
.contact-hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgb(4 9 14 / 0.59);
}
.contact-hero-content { z-index: 2;}
/* Contact grid */
.contact-section { background: var(--butter);}
/* ---------- Bands outside the .section class ---------- */
/* Audited all 25 pages for section-level bands whose background was not white.
These are the ones that escaped .section because they predate it or were
given their own class: the booking and calendar flows, the intake chat, and
the standalone checkout page, plus the text-only heroes that had no image to
cover them and so were showing the ivory body through.
The photo heroes (.hero--full on index, services, packages, programs and the
three wellbeing pages, and the .about-hero / .faq-hero / .poem-hero /
.contact-hero banners) are deliberately left alone. They carry white ink and
a baked or CSS veil over a photograph; whitening the surface behind them
would not show through the image, but any edge that ever failed to paint
would then flash white instead of the intended dark. */
:is(.hero:not(.hero--full), .booking-hero, .cal-hero, .intake-hero, .post-hero,
.legal-hero, .fine-hero) {
background: var(--butter);
}
:is(.booking-section, .cal-section, .chat-section) {
background: var(--butter);
}
/* The seven photo banners keep white, not butter. The image covers the whole band,
so this is belt and braces against the ground showing at a media edge on a slow
load, and white is the correct flash for a photograph: a pale yellow sliver
beside a photo reads as a rendering fault, a white one does not. */
:is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero) {
background: var(--white);
}
/* payment.html is a standalone checkout with its own inline token block, so its
card surface is fixed there (--pay-card) rather than from a rule here. */
#first-step.final-cta { background: var(--butter);}
/* ---------- Section start and end mark ---------- */
/* Every band above now wears the same light yellow, which is the point of the
change but also its cost: with no tonal difference there is nothing left to
tell one section from the next, and the page runs together as a single sheet.
The fix is a hairline bracket. The top rule is the section's start mark, the
bottom rule is its end mark.
The rule stays --line. On --butter #FFFFF5 it reads 1.33:1, which is exactly
what it reads on --white, so the bracket keeps the weight it has always had and
no second border token is needed. That was not true of the 12% ground this
replaced: --line dropped to 1.27:1 there, close enough to invisible that it
would have erased every boundary on the site at the moment the boundaries
became the only thing telling one band from the next.
The same class list drives both the mark and the collapse below. It is
written out longhand twice rather than kept in a custom property, because
var() cannot be interpolated into a selector. Two copies is the failure mode
to watch: shortening one and not the other silently doubles or drops every
boundary on the site, so the lists are identical by inspection. */
:is(.section, .final-cta, #first-step, .booking-section, .cal-section,
.chat-section) {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* One rule per boundary, not two. Adjacent bands each carry their own start and
end mark, so both land on the shared edge and stack into a 2px band. Dropping
the second leaves a single hairline that reads at once as the end of the band
above and the start of the one below.
The selector has to name both halves of the pair. A bare ".section +
.section" only caught the one pairing where two .section elements touch, and
left a doubled line wherever a .final-cta or a page hero sat between two
content sections.
.packages-img is in the second list only, and has no mark of its own. It is
a full-bleed figure band with no background and no padding, so giving it a
hairline would draw a rule straight across the photograph. Naming it as the
second half of the pair is what stops the .section above it and the .section
below it from each claiming the edge and stacking. */
:is(.section, .final-cta, #first-step, .booking-section, .cal-section,
.chat-section, .packages-img) +
:is(.section, .final-cta, #first-step, .booking-section, .cal-section,
.chat-section, .packages-img) {
border-top: 0;
}
/* Form */
.contact-form-wrap {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(28px, 4vw, 44px);
}
.contact-form-header { margin-bottom: 32px;}
.contact-form-header h2 { margin-bottom: 0.3em;}
.contact-form-header p { color: var(--muted); font-size: 0.92rem; margin: 0;}
.contact-form { display: grid; gap: 20px;}
/* The submit button is a direct grid child, so inline-flex on .btn blockifies
to flex and the initial justify-self of stretch spans the whole column.
justify-self: start returns it to its content width. Kept in both copies of
this file (static and theme), and mirrors theme-wp.css:174 which fixed the
same bug on WordPress as 4.57.0. */
.contact-form > button[type="submit"] { justify-self: start;}
.contact-form .field label {
display: block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
/* Padding, border and font are shared, but the height rules below are NOT.
min-height and resize belong to the textarea alone. Leaving them in this
shared block forced every single-line input to the textarea's 120px minimum,
which is why Name, Email and Phone rendered as tall boxes. An input sizes
itself from its line box, so it needs no minimum at all. */
.contact-form .field input,
.contact-form .field textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--ivory);
padding: 14px 16px;
font-family: var(--font-ui);
font-size: 0.92rem;
color: var(--charcoal);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form .field textarea {
resize: vertical;
min-height: 120px;
}
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder { color: var(--muted); opacity: 0.6;}
.contact-form .field input:focus,
.contact-form .field textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.contact-form .error { min-height: 1em; color: #b42318; font-size: 0.78rem; margin-top: 4px;}
.btn-full { width: 100%; justify-content: center;}
.contact-form .form-success {
margin: 0;
color: var(--gold);
font-weight: 600;
font-size: 0.92rem;
display: none;
}
/* Info cards */
/* minmax(0, 1fr), not the implicit auto track.
The track had no explicit size, so it resolved to auto, whose floor is
min-content. Two of the five cards carry an address, and
Coaching.happiness2u@gmail.com is 356px of unbroken text, so the floor was
356px while the container was 253px on a 320px phone. The cards ran 103px
past their own column and were cut off by the body's overflow-x: hidden,
which meant the full address could not be read or copied at all.
That clipping was invisible to a scrollWidth check, because the body clip is
exactly what stops scrollWidth from growing. The overflow had to be found by
comparing each element's right edge against the viewport. */
.contact-info { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr);}
/* The text half of each card is a bare div, so it is a flex item with the
default min-width: auto and the same 356px floor. .cic-icon is also a div
here, and takes width from flex-shrink: 0 with an explicit 44px, so the
min-width does not disturb it. */
.contact-info-card > div { min-width: 0;}
.contact-info-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--ivory);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm);}
.cic-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--stone);
display: grid; place-items: center;
color: var(--charcoal);
flex-shrink: 0;
}
.cic-icon .ph { font-size: 1.4rem; line-height: 1;}
/* The Email card has no icon, on the client's request. Without this its text
started 60px left of the four cards below it, because the icon column is a
real flex item: .cic-icon at flex-shrink: 0, plus the card's own gap.
Reserving exactly that much as padding keeps the five cards on one left edge
without leaving an empty box where the icon used to be.
The three steps below track the icon and the card gap in breakpoints.css,
which is where both are resized:
above 768px 20px card padding + 44px icon + 16px gap = 80px
768px and down 14px + 40px + 12px = 66px
320px and down 10px + 32px + 8px = 50px
A single fixed value does not work here. 80px alone left the Email text 14px
right of the others at 768px and 30px right at 320px, because the reserved
slot stops matching the icon it stands in for as both shrink. Measured at
768, 576, 390 and 320 before these steps were added. */
.contact-info-card.cic-no-icon { padding-left: 80px;}
@media (max-width: 768px) {
.contact-info-card.cic-no-icon { padding-left: 66px;}
}
@media (max-width: 320px) {
.contact-info-card.cic-no-icon { padding-left: 50px;}
}
.cic-label {
display: block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.cic-value {
display: block;
font-family: var(--font-display);
font-weight: 600;
/* break-word rather than anywhere. It is the second half of the fix above:
the grid and the flex item now allow the card to shrink, but an address has
no break opportunity in it, so without this the text would still run past
the card edge. break-word only breaks when the string genuinely cannot fit,
which at 320px is the address and nothing else. It is preferred to
anywhere because anywhere also feeds back into min-content sizing, and the
min-content floor is what caused the fault. */
overflow-wrap: break-word;
font-size: 0.95rem;
color: var(--charcoal);
}
a.cic-value { transition: color 0.3s ease, opacity 0.2s var(--ease);}
a.cic-value:hover { color: var(--gold);}
/* Press, for the same touch reason as .socials a below the footer. These five are
the phone numbers, the two addresses and the site link on contact.html, and a
tap on a phone number is exactly the gesture that has to confirm. Dimming
rather than moving: these are text links on a flat card, so a translate would
shift the value the visitor is trying to read. */
a.cic-value:active { opacity: 0.6;}
.cic-sub { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px;}
/* Socials */
.contact-socials {
padding: 20px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--ivory);
}
.contact-socials .socials { display: flex; gap: 10px; margin-top: 10px;}
.contact-socials .socials a {
width: 44px; height: 44px;
border-radius: 12px;
border: 1px solid var(--line);
display: grid; place-items: center;
color: var(--charcoal);
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s var(--ease);
}
.contact-socials .socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff;}
/* transform joins the transition above so the shared .socials a:active press in
layout.css eases here instead of snapping. This rule is (0,3,0) and restates
the whole transition, so without transform in the list it would have quietly
dropped the property for every social icon on contact.html while the other 23
pages still had it. Measured across all five sampled pages before and after. */
.contact-socials .socials a:active { transform: scale(0.94);}
.contact-socials .socials a .ph { font-size: 1.35rem; line-height: 1;}
/* ---------- TYPEWRITER ---------- */
/* The caret is white, not var(--charcoal).
It was a charcoal block, which was right when this ran on a pale .hero
section, and is wrong now that the heading sits in the blog banner: the band
carries a 0.55 veil over a bright photograph, so a charcoal block on it is
darker than its surroundings and reads as a hole rather than a cursor. The
typed glyphs were already white - they take their colour from the h1 - so it
was only the caret that disagreed with the text it was attached to.
blog.html is the only page that carries a .typewriter, so nothing else is
affected by this. The veil it sits on is measured at .blog-hero-media::before. */
.typewriter { visibility: hidden;}
.typewriter-cursor {
display: inline-block;
width: 2px;
height: 0.9em;
background: var(--white);
margin-left: 2px;
vertical-align: middle;
animation: blink 0.8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0}}
/* ---------- CERTIFICATE CAROUSEL ---------- */
.cert-track:hover { cursor: grab;}
.cert-track:active { cursor: grabbing;}
/* ---------- LEGAL PAGE ---------- */
.legal-hero { padding: 84px 0 40px;}
.fine-hero { padding: 96px 0 56px;}
.page-legal {
/* TOC column and gap. 812 - 240 - 72 leaves a 500px reading column. At the
0.95rem body size an average glyph is about 6.9px wide here, which puts the
fullest line at roughly 77 characters, inside the 65-78 range where the eye
reliably finds the start of the next line. Measured per character rather
than estimated from paragraph length divided by line count, which
under-reports because the last line is normally short. The single 760px
column this replaced held about 110 characters per line. */
--legal-toc-w: 240px;
--legal-gap: 72px;
}
.legal-hero .container, .legal-body .container { max-width: 812px;}
.legal-body { padding-top: 0;}
.legal-body .legal-grid {
display: grid;
grid-template-columns: var(--legal-toc-w) minmax(0, 1fr);
gap: var(--legal-gap);
align-items: start;
}
.legal-block { scroll-margin-top: 96px;}
/* The three documents used to run together as one undifferentiated wall. A rule
plus matching space makes the boundaries between them obvious. */
.legal-block + .legal-block {
margin-top: clamp(48px, 6vw, 72px);
padding-top: clamp(40px, 5vw, 60px);
border-top: 1px solid var(--line);
}
#one-on-one, #group-coaching, #financial-coaching, #corporate-wellbeing { scroll-margin-top: calc(var(--header-h, 76px) + 24px);}
/* Comparison tables. DORMANT: packages.html held the last .table-wrap and
.compare-table on the site, and its seven-row comparison table was removed at
the client's request once the two pricing cards carried the same rows in
summary. Nothing matches these selectors today.
Kept rather than deleted, because the component is sound, its horizontal
scroll wrapper is the right answer for any wide data table, and it is one class
away from coming back. The first-child header colour below was corrected while
the component was still live, so if it returns it returns fixed: see the note on
that line for what was wrong and why. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid rgba(0,0,0,.1); box-shadow: var(--shadow-card, 0 8px 30px rgba(0,0,0,.06));}
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; background: #fff;}
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(0,0,0,.08);}
.compare-table thead th { background: var(--charcoal, #1a1a1a); color: #fff; font-weight: 600; font-size: 0.95rem; border-bottom: 0;}
/* #1a1a1a here was the default fallback for --gold, inherited from a build when
--gold was a pale brass #b8963e and dark text on it was 8.6:1. --gold is now
#22544C, a dark teal, and that same #1a1a1a on it measured 2.02:1, which fails
AA on normal text. The fallback was never revisited when the token changed.
White on the current --gold measures 8.6:1 and gold-soft on it 7.3:1; white is
used so this header cell matches the white-on-charcoal cells beside it. */
.compare-table thead th:first-child { background: var(--gold, #22544C); color: var(--white, #FFFFFF);}
.compare-table tbody th { font-weight: 700; color: var(--charcoal, #1a1a1a); background: #faf8f3; white-space: normal; width: 16%;}
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0;}
.compare-table tbody tr:hover td { background: rgba(184,150,62,.05);}
.compare-table ul { margin: 0; padding-left: 1.1em;}
.compare-table li { margin: 0.25em 0;}
.compare-table strong { color: var(--charcoal, #1a1a1a);}
.legal-block h2 { margin-bottom: 0.5em;}
/* These two rules used to name Bricolage Grotesque explicitly, to route around
a --font-display token that led with Satoshi. The token leads with Bricolage
now, so the explicit name is redundant and the inline comment claiming
otherwise is stale; it is dropped rather than left to mislead the next
reader. */
.legal-block h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--black);
margin: 2.2em 0 0.55em;
scroll-margin-top: 100px;
}
.legal-block h3:first-child { margin-top: 0;}
.legal-block h4 {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.005em;
line-height: 1.35;
color: var(--black);
margin: 1.6em 0 0.4em;
scroll-margin-top: 100px;
}
.legal-date { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.2em;}
.legal-copy a { color: var(--gold); text-decoration: underline;}
.legal-copy p { color: var(--charcoal-2); font-size: 0.95rem; line-height: 1.75;}
.legal-copy p + p { margin-top: 1em;}
/* The global reset in design-tokens.css sets list-style: none, and this rule was
only restoring padding-left, so every list on this page was rendering as an
indented paragraph with no marker at all. */
.legal-copy ul { list-style: disc; margin: 0.8em 0; padding-left: 1.5em;}
.legal-copy li { color: var(--charcoal-2); font-size: 0.95rem; line-height: 1.7; margin-bottom: 0.45em;}
.legal-copy li::marker { color: var(--gold);}
/* ---------- On this page ---------- */
.legal-toc { position: sticky; top: 104px; align-self: start;}
.legal-toc-title {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 14px;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0;}
.legal-toc li { margin: 0;}
.legal-toc a {
display: block;
padding: 6px 0 6px 14px;
line-height: 1.4;
color: var(--charcoal-2);
border-left: 2px solid var(--line);
transition: color 0.2s ease, border-color 0.2s ease;
}
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--gold); border-left-color: var(--gold);}
.legal-toc-sub a { padding-left: 26px; font-size: 0.8rem; color: var(--muted);}
/* ---------- SERVICES PAGE ---------- */
.section-head.narrow { max-width: 820px; margin-inline: auto;}
.section-head.narrow .lead { max-width: 640px; margin-inline: auto;}
.section-head.narrow-600 .lead { max-width: 600px; margin-inline: auto;}
.section-head.space { margin-bottom: clamp(32px, 4vw, 56px);}
.section.top-sm { padding-top: 32px;}
.section.top-none { padding-top: 0;}
.center-block { margin-inline: auto;}
.media-ratio { border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; width: 100%;}
.edi-float-static {
grid-column: auto;
grid-row: auto;
justify-self: end;
align-self: end;
position: static;
}
.hidden-more { display: none; margin-top: 32px;}
/* Shared little helpers */
.block-sm { margin-top: 24px;}
.block-md { margin-top: 32px;}
.block-xs { margin-top: 8px;}
.blog-more { margin-top: clamp(32px, 4vw, 56px);}
.note-center { text-align: center; margin-top: clamp(24px, 4vw, 40px);}
.note-center + .cert-slider,
.cert-slider + .note-center,
.cert-slider ~ .note-center { margin-top: clamp(12px, 2vw, 20px);}
/* Testimonial cards */
.quote-mark { color: var(--gold); letter-spacing: 3px; font-size: 1.05rem;}
.quote-text { font-size: 1.5rem; font-style: normal;}
.quote-meta { margin-top: 20px;}
.avatar-round { width: 60px; height: 60px; border-radius: 50%; object-fit: cover;}
.hide-media { aspect-ratio: auto; height: 0; padding: 0; display: block;}
/* Resource cards */
.res-media { aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden;}
.res-media img { width: 100%; height: 100%; object-fit: cover;}
.res-title { margin-bottom: 0.2em;}
.res-desc { margin-top: 12px;}
.res-more { margin-top: auto;}
.res-narrow { max-width: 720px; margin-inline: auto;}
.res-mid { max-width: 900px; margin-inline: auto;}
.section-head.narrow-md { max-width: 720px; margin-inline: auto;}
.container-860 { max-width: 860px;}
.container-720 { max-width: 720px;}
.container-640 { max-width: 640px;}
/* Booking redirect */
/* min-height removed: the hero holds 201px of content, and 60vh plus
align-items:center left 331px of empty space above and below it. The
180px/72px padding below already sets the rhythm for this page. */
.booking-hero {
display: flex;
align-items: center;
text-align: center;
}
.booking-title {
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: 1em;
}
.booking-link { color: var(--gold); text-decoration: underline;}
.cta-big { padding: clamp(80px, 10vw, 140px) 0;}
/* Mini-cards page overrides base is in layout.css */
.mini-cards.portrait .mini-card .media { aspect-ratio: 3/4; overflow: hidden;}
.mini-cards.portrait .mini-card .media img { width: 100%; height: 100%; object-fit: cover; display: block;}
.mini-card-gap-sm { margin-top: clamp(18px, 3vw, 28px);}
.program-panel .program-body .text-link { margin-top: auto;}
/* Card wrapper helper */
.form-card-box {
max-width: 560px;
margin-inline: auto;
background: var(--ivory);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: clamp(24px, 4vw, 40px);
}
.field-error { min-height: 1em; color: #b42318; font-size: 0.8rem;}
.form-status-success { margin: 12px 0 0; color: var(--gold, #B9974F); font-weight: 600;}
/* ---- Utility classes (replacing inline styles) ---- */
.mt-1em { margin-top: 1em;}
.mt-1_5em { margin-top: 1.5em;}
.mt-2em { margin-top: 2em;}
.mt-2_5em { margin-top: 2.5em;}
.mb-4px { margin-bottom: 4px;}
.mb-0_6em { margin-bottom: 0.6em;}
.mb-0_8em { margin-bottom: 0.8em;}
.mb-1_5em { margin-bottom: 1.5em;}
.pt-0 { padding-top: 0;}
.center-flex { justify-content: center;}
.text-center { text-align: center;}
.w-full { width: 100%;}
.w-1300 { width: 1300px; max-width: 100%;}
.about-page .story-grid .w-1300 { grid-column: 1 / -1; width: 100%;}
/* Check circle icon in testimonials */
.check-icon { color: var(--gold); font-size: 0.85rem;}
/* Testimonial inline (services page) */
.testi-inline--white { background: var(--white);}
/* Card label + description */
.card-desc { font-size: 0.9rem; color: var(--charcoal-2); line-height: 1.7;}
/* Package card icon */
.pkg-icon { font-size: 1.5rem; color: var(--gold); margin-bottom: 8px; display: block;}
/* Package card foot */
.pkg-foot { text-align: center; margin-top: auto;}
/* Section with no bottom padding */
.section-pt0 { padding-bottom: 0;}
/* Final CTA with rounded corners */
.cta-rounded { border-radius: var(--radius-lg); overflow: hidden;}
/* Services hero section padding override */
.services-hero .section-pad-override { margin-top: 2em;}
.cert-caption {
font-size: 0.88rem;
font-weight: 600;
color: var(--charcoal);
padding: 12px 16px;
text-align: center;
}
/* Cert slider (home page) */
#credentials.section,
.section:has(.cert-slider) {
padding-top: clamp(20px, 3vw, 36px);
padding-bottom: clamp(20px, 3vw, 36px);
}
#credentials .section-head,
.section:has(.cert-slider) .section-head {
margin-bottom: clamp(8px, 1.5vw, 16px);
}
.cert-slider {
/* Height of the caption below the certificate, for the current width. Read by
.cert-arrow so the arrows centre on the image rather than on the image plus
this. Measured across all six captions at 1200/900/768/600/430/390/360/320:
one line at 13.6px with a 23.12px line box, so 47px above 768px where the
captions hold one line, and 70px at and below 768px where the longest of
them ("Certified Professional Trainer (UKIQ)") wraps to two. The phone step
overrides it in the media block lower down. */
--cert-cap: 47px;
position: relative;
overflow: visible;
margin-bottom: 0;
padding: 0 24px;
/* 900, not 1060, and this is what makes the arrows mean anything on a desktop.
The track is this width less the 24px padding either side, so 1060 gave a
1012px track. The three certificates are 3 x 300px = 900px, which fits
inside 1012 with 112px to spare, so there was nothing to scroll and
main.js correctly disabled both arrows. Measured at 1440px: clientWidth
1012 against scrollWidth 1012, overflow no, both arrows off.
At 900 the track is 852, the content is 900, and the third certificate
overhangs by 48px. That is the standard carousel peek: it reads as a strip
with more behind it rather than as three finished cards, and the arrows now
have something to do at every width from 1920 down to 320.
The certificates keep their 300px width either way. Narrowing the frame is
what forces the overflow; widening the slides would have had the same
effect while pushing the documents past comfortable reading size. */
max-width: 900px;
margin-inline: auto;
}
.cert-track {
display: flex;
justify-content: center;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0;
scroll-behavior: smooth;
}
.cert-track::-webkit-scrollbar { display: none;}
.cert-slide {
flex: 0 0 min(300px, 80vw);
scroll-snap-align: start;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cert-slide .cert-view {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--white);
font-size: 0.85rem;
font-weight: 600;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
pointer-events: none;
cursor: pointer;
}
.cert-slide:hover .cert-view { opacity: 1;}
.cert-slide { position: relative;}
.cert-slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.cert-slide .cert-caption {
font-size: 0.85rem;
font-weight: 600;
color: var(--charcoal);
padding: 12px 16px;
text-align: center;
}
.cert-arrow {
position: absolute;
/* Centred on the CERTIFICATE, not on the slider.
top: 50% put the arrow on the centre of .cert-slider, and the slider is the
image PLUS the caption below it, so the arrow landed on the caption's
midpoint. Measured on index.html, the arrow's vertical centre sat 35px BELOW
the image's centre at every width from 768 down to 320 - constant, because
the caption is a fixed string at a fixed size.
--cert-cap carries the caption's measured height for the current width, set
on .cert-slider below, and the half of it is taken back off. The caption is
entirely below the image, so subtracting half its height lands exactly on
the image's centre at any width.
The 0px fallback is kept so that if .cert-cap is ever unset the arrow still
centres on the slider rather than shifting by half of nothing. */
top: calc(50% - var(--cert-cap, 0px) / 2);
transform: translateY(-50%);
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 50%;
background: #22544C;
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
cursor: pointer;
display: grid;
place-items: center;
color: #fff;
transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out, color 0.22s ease-out, background 0.22s ease-out, opacity 0.22s ease-out;
z-index: 2;
outline: none;
}
.cert-arrow svg {
width: 18px;
height: 18px;
pointer-events: none;
}
.cert-arrow:hover {
transform: translateY(-50%) scale(1.05);
/* Gold, not red. This was #b01a00, a dark red, on a button that rests at
#22544C and carries a GREEN shadow, so the hover was already contradicting
its own shadow. On a desktop pointer that reads as a mistake. On a phone it
is worse: a tap leaves :hover applied, so the arrow turned red and STAYED
red until the user tapped elsewhere. That is the red in the screenshot, and
it is the only red on this component.
var(--gold) is the resting fill, so the hover now reads as a lift and a
deepening rather than as a colour change, which is the same treatment every
other card hover on the site uses. */
box-shadow: 0 4px 14px rgba(34, 84, 76,0.35);
background: var(--gold);
color: #fff;
}
.cert-arrow:active {
transform: translateY(-50%) scale(0.97);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
transition-duration: 0.1s;
}
.cert-arrow:focus-visible {
outline: 3px solid #22544C;
outline-offset: 3px;
}
.cert-arrow:disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
.cert-prev-home { left: -6px;}
.cert-next-home { right: -6px;}
/* ---------- Large screens: show the certificates directly ----------
A carousel is a small-screen affordance. From 1024px up there is room for
all three certificates side by side, and making the visitor drag a strip to
reach a third of the evidence on a 27-inch monitor is worse than not offering
the control at all. So above 1024px the track stops being a scroller: it
becomes a three-column grid, the arrows are removed, and the certificates
simply sit there.
This is the counterpart to the 900px max-width below, and the two are one
decision. 900px exists only so the three 300px slides overflow and the
arrows have something to do; here the width goes back to 1060px because
there is no longer a strip to make scrollable, and the three columns get to
be as large as the frame allows - about 318px each rather than the 277px a
900px frame would have forced.
overflow-x, scroll-snap-type and scroll-behavior all go back to their resting
values as well. Leaving a scroller behind a grid would leave a horizontal
scroll region that a keyboard can still focus and that a trackpad can still
drag, with nothing to see and no arrows to say so.
The JS keeps running updateDisabled() at this width and will set both buttons
to disabled, which is now harmless: they are display: none. It is left in
place rather than special-cased, because the same buttons are the carousel
controls below 1024px and one code path that always tells the truth about
scroll position is better than two. */
@media (min-width: 1024px) {
.cert-slider { max-width: 1060px;}
.cert-track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2vw, 28px);
overflow: visible;
scroll-snap-type: none;
scroll-behavior: auto;
}
.cert-slide { flex: none;}
.cert-arrow { display: none;}
}
@media (max-width: 768px) {
.cert-slide { flex: 0 0 min(260px, 75vw);}
.cert-slider { --cert-cap: 70px; padding: 0 4px;}
.cert-arrow {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.cert-arrow svg {
width: 16px;
height: 16px;
}
.cert-prev-home { left: 0;}
.cert-next-home { right: 0;}
}
/* Why list margin */
.why-mt { margin-top: 2em;}
/* Services hero scoped to services page only */
.services-hero { position: relative; text-align: center;}
.services-hero .hero-bg img { object-position: center center;}
.services-hero .container { position: relative; z-index: 2;}
.services-hero .eyebrow { color: var(--gold);}
/* Was --gold: a dark teal word inside a white headline on a photograph, 1.43:1
against the darkest pixel of the banner. The accent span is dropped so the
headline is one ink, and it inherits the white the rest of the line has. */
.services-hero .em-serif { color: inherit;}
.services-hero .lead { color: rgba(255,255,255,0.85); max-width: 700px; margin-inline: auto;}
.services-hero .display { color: var(--white);}
/* Services card page-specific overrides */
.services-grid .service-card { display: flex; flex-direction: column; height: 100%;}
.services-grid .service-card .body { padding: clamp(20px, 2.5vw, 28px); display: flex; flex-direction: column; gap: 10px; flex: 1;}
.services-grid .service-card .num {
position: static;
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--gold);
background: none;
padding: 0;
margin-bottom: 4px;
}
/* Shared card inner styles used by BOTH services and packages */
.service-card .body h3 { font-size: 1.2rem; margin-bottom: 0;}
.service-card .body > p { color: var(--charcoal-2); line-height: 1.7; font-size: 0.92rem;}
.service-card .card-block { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line);}
.service-card .card-label {
font-weight: 600;
font-size: 0.75rem;
margin-bottom: 6px;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.service-card .foot { margin-top: 1.5em; padding-top: 12px; text-align: center;}
.check-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.check-list li {
padding-left: 1.2em;
position: relative;
font-size: 0.88rem;
line-height: 1.6;
}
.check-list li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--gold);
font-weight: 700;
}
.card-note { margin-top: 1.5em; font-size: 0.85rem; color: var(--muted);}
/* Packages pricing grid separate from services */
.packages-grid > * { min-width: 0;}
.packages-grid .service-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.packages-grid .service-card:hover {
border-color: var(--gold);
box-shadow: var(--shadow-soft);
}
.packages-grid .service-card > .body {
padding: clamp(24px, 4vw, 32px);
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
/* How it works steps */
.step { text-align: center; padding: 1.5em;}
.step-num {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--gold-soft);
color: var(--gold);
display: grid;
place-items: center;
margin: 0 auto 1em;
font-weight: 700;
font-size: 1.1rem;
}
.step h3 { font-size: 1rem; margin-bottom: 0.4em;}
.step p { font-size: 0.9rem; color: var(--muted); max-width: 280px; margin-inline: auto;}
/* ---------- ABOUT: POEM / QUOTE CARD ---------- */
.section.top-xs { padding-top: 24px;}
.poem-card {
max-width: 860px;
margin: 0 auto;
background: var(--stone);
border-radius: var(--radius-lg);
padding: clamp(48px, 7vw, 80px) clamp(32px, 6vw, 72px);
position: relative;
overflow: hidden;
}
.poem-card .quote-big {
position: absolute;
top: 10px;
left: 24px;
font-size: 8rem;
font-family: var(--font-display);
color: var(--gold);
opacity: 0.12;
line-height: 1;
pointer-events: none;
}
.poem-header { text-align: center; margin-bottom: 2em;}
.poem-body {
color: var(--ink);
line-height: 2;
font-size: 1.05rem;
max-width: 640px;
margin: 0 auto;
}
.poem-body p + p { margin-top: 1em;}
.poem-body .poem-em { font-weight: 700; color: var(--charcoal); }
/* Verse lineation, and why it is not a .
These lines were authored as breaks, and a break is a hard promise that the
line fits the measure. Measured, the longest of them, "must exist somewhere at
some time because" in the bold .poem-em face, needs 365px. The poem column is
84% of the viewport, so it only reaches 365px at a 560px viewport and above.
Below that every authored line was being broken a second time by the measure,
and because each line was already full the break fell wherever it had to:
"Because happiness is a memory" became "Because happiness is a" over
"memory", "at the same time" became "at the same" over "time", and so on.
Four orphan words across four stanzas, on every phone.
A cannot be restyled, so it could only ever be all or nothing: either the
lineation holds or it is destroyed. Each line is a span instead, which lets CSS
hold the lineation where it fits and let the text reflow where it does not.
Inline is the base, so a phone reads the poem as prose and wraps it at the
measure. The block step at 560px in breakpoints.css puts the breaks back.
The space between the spans is deliberate. As blocks it collapses and is
invisible, so the desktop lineation is exactly as it was; as inline it is the
only thing separating the end of one line from the start of the next, without
which the lines would run together mid-sentence. */
.poem-line { display: inline; }
.poem-body .poem-cta {
margin-top: 1.8em;
font-style: normal;
color: var(--charcoal);
font-size: 1.15rem;
text-align: center;
}
.poem-by {
margin-top: 2.5em;
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
}
/* Poem page: caption + attribution sit below the card, outside it */
.poem-attrib {
max-width: 860px;
margin: 0 auto;
text-align: center;
}
/* Poem page: tighten the handoff from the hero into the poem card.
The two .fine-hero rules that used to sit here are gone rather than left in place.
The hero is now the shared .poem-hero banner at y=0, exactly as on About and FAQ,
so there is no .fine-hero on this page for them to match - they were carrying a
min-height override and a zero h1 margin that the banner does not need, because
.poem-hero-content centres the heading with auto margins instead. */
body.poem-page #happiness { padding-top: 40px;}
.poem-attrib .poem-caption {
margin: 1.8em 0 0;
font-size: 1.15rem;
line-height: 1.7;
color: var(--charcoal);
}
.poem-attrib .poem-by { margin-top: 1.4em;}
/* About: testimonial */
.client-quote h2 {
font-style: normal;
line-height: 1.6;
}
.client-attribution {
margin-top: 1.5em;
}
.client-attribution .muted { color: var(--muted);}
/* Commitment grid */
.note-center-lg { text-align: center; margin-top: 48px;}
.head-tight { margin-bottom: 24px;}
.flush-top { padding-top: 0;}
.flush-bottom { padding-bottom: 0;}
/* ---------- BLOG POST PAGE ---------- */
.post-hero { padding: clamp(76px,10vh,132px) 0 clamp(32px,5vh,56px); position: relative; overflow: hidden;}
.post-hero .eyebrow { margin-bottom: 12px;}
/* Hero h1: 50px, the same flat figure index.html's headline sits at from 769px
up. Was clamp(2rem, 5vw, 3.4rem), which landed at 54.4px at 1296px and made
this the only page hero on the site that was neither 50 nor 68.7. */
.post-hero h1 { max-width: 800px; font-size: 50px;}
.post-hero .lead { margin-top: 16px; max-width: 640px;}
.post-meta { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: 0.82rem; color: var(--muted);}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line);}
.post-featured { width: 100%; max-width: 960px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9;}
.post-featured img { width: 100%; height: 100%; object-fit: cover;}
.post-body { max-width: 720px; margin: 0 auto;}
.post-body p { margin-bottom: 1.4em; line-height: 1.85; font-size: 1.05rem;}
/* Section level: clamp(1.6rem, 3.1vw, 36px), the shared ladder. Was
clamp(1.4rem, 2.4vw, 1.8rem), which put every article subhead at 28.8px
against 36px for every other h2 on the site. line-height 1.0 from .h-section
is tight for a subhead inside running text, so it keeps 1.15 here. */
.post-body h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.1vw, 36px); line-height: 1.15; font-weight: 600; color: var(--black); margin: 2.4em 0 0.8em; letter-spacing: -0.02em;}
.post-body blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 2em 0; background: var(--stone); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: normal; color: var(--charcoal);}
.post-body ul, .post-body ol { margin: 1.4em 0; padding-left: 1.4em;}
.post-body li { margin-bottom: 0.6em; line-height: 1.75;}
.post-author { display: flex; align-items: center; gap: 20px; padding: 32px; background: var(--stone); border-radius: var(--radius-lg);}
.post-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.post-author h4 { font-size: 1rem; margin-bottom: 4px;}
.post-author p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6;}
.post-author-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 0.78rem; color: var(--muted);}
.post-author-stats span { display: flex; align-items: center; gap: 4px;}
.post-author-stats strong { color: var(--charcoal);}
/* ---------- Post: comments ----------
The author card and the comment thread both sit on the same 720px measure as
.post-body, so the page keeps one vertical edge from the article down. */
.post-aside,
.comments-section { max-width: 720px; margin: 0 auto;}
/* The form was three bare inputs floating between the section heading and the
thread, with no way to tell where one ended and the other began. It now sits
in a panel, matching .post-author directly above it, and the thread below
gets its own ruled heading. */
.comment-form {
background: var(--stone);
border-radius: var(--radius-lg);
padding: clamp(20px, 3vw, 32px);
margin-bottom: clamp(32px, 5vw, 48px);
}
.comment-form-title {
font-family: var(--font-display);
font-size: 1.05rem;
letter-spacing: -0.01em;
color: var(--black);
margin: 0 0 20px;
}
.comment-form .form-row { margin-bottom: 16px;}
.comment-form .field textarea { min-height: 120px; resize: vertical;}
/* Secondary text inside a label. .no-uppercase only cancelled the uppercase,
leaving the note at weight 600 so "(not published)" and "(optional)" read as
part of the field name. This drops it to body weight and italic. */
.field-hint {
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-style: italic;
color: var(--muted);
}
/* Submit row. With the note removed only the top offset still does anything;
the flex/gap pair existed purely to seat that note beside the button. */
.comment-actions { margin-top: 20px;}
.comment-actions .btn { margin: 0;}
/* Thread */
.comment-list-head {
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.comment-list-title {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
/* Was --muted. This is the worst heading-ink case on the site: a real h3 set in
the body grey at 4.83:1, which read as a caption rather than as a heading
even though it is the "3 comments" line above the thread. Black like
everything else. */
color: var(--black);
margin: 0;
}
/* The old rule put a border under every item including the last, leaving a
dangling rule under the final comment. */
.comment-item { padding: 22px 0; border-bottom: 1px solid var(--line);}
.comment-item:last-child { border-bottom: 0; padding-bottom: 0;}
.comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px;}
.comment-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--gold-soft); color: var(--gold);
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 700; font-size: 0.85rem;
flex-shrink: 0;
}
/* Stacked name over time. Previously the pair sat on one baseline held apart by
margin-left, which broke as soon as a name wrapped. */
.comment-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.comment-name { font-size: 0.92rem; font-weight: 600; color: var(--charcoal);}
.comment-time { font-size: 0.75rem; color: var(--muted);}
.comment-body { font-size: 0.92rem; line-height: 1.7; margin: 0; color: var(--ink); max-width: 62ch;}
.comment-empty {
color: var(--muted);
font-size: 0.9rem;
margin: 0;
padding: 24px 0;
}
.post-nav a { display: block; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); text-decoration: none; transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.post-nav a:hover { border-color: var(--gold); box-shadow: var(--shadow-sm);}
.post-nav .label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;}
.post-nav .title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--charcoal);}
.post-nav .next { text-align: right;}
/* ---------- FAQ ACCORDION ---------- */
.faq-list .faq-item summary { text-align: left;}
/* "Line equally end" formula, synchronized site-wide with My Journey. */
.faq-list .faq-item p { hyphens: manual; }
.faq-item[open] {
border-color: var(--gold);
box-shadow: var(--shadow-card);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--charcoal);
cursor: pointer;
list-style: none;
gap: 16px;
transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none;}
.faq-item summary::after {
content: "+";
font-family: var(--font-ui);
font-size: 1.4rem;
font-weight: 400;
color: var(--gold);
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--gold-soft);
transition: transform 0.3s ease, background 0.3s ease;
}
.faq-item[open] summary::after {
content: "\2212";
transform: rotate(180deg);
background: var(--gold);
color: var(--white);
}
.faq-item summary:hover { color: var(--gold);}
.faq-item p {
padding: 0 24px 20px;
font-size: 0.92rem;
line-height: 1.7;
color: var(--charcoal-2);
margin: 0;
}
.faq-item summary:focus-visible {
outline: 2px solid var(--gold);
outline-offset: -2px;
}
/* ---------- ABOUT PAGE HERO IMAGE ---------- */
.about-page .hero-visual { max-width: 560px;}
.about-page .hero-figure { aspect-ratio: 4/5;}
.about-page .hero-figure img { transform: scale(1.15);}
/* ---------- INLINE TESTIMONIALS ON SERVICES PAGE ---------- */
.testi-inline {
background: var(--cream);
border-radius: var(--radius-md);
border-left: 3px solid var(--gold);
}
/* ---------- ABOUT PAGE TEXT ---------- */
.about-page .story-grid > div:not(.story-media) { max-width: 100%;}
.about-page .story-grid p { hyphens: manual; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.75; margin-bottom: 1em;}
/* Left and italic, where every other .lead on the site is centred.
"Good day! I am glad that you landed here to look a little further." is a
line of address to the visitor, not a section intro, and centred italic body
copy at this size sets badly - a centred rag makes every line look deliberate
when none of it is.
This selector reaches exactly one paragraph. The other three .lead elements on
about.html sit in .section-head.center, which is where the shared centred
treatment belongs, and a fourth is display:none in the footer. Scoping to
.story-grid is what keeps the change to the one line it was asked for, and it
is why this rides on the existing rule rather than standing alone.
font-style: italic follows the .field-hint precedent at :1051, the only other
italic in the stylesheet.
font-weight: 600 rides alongside it. This line is a greeting and the site's
only piece of body copy set in the display weight, which is what makes it read
as an opening line rather than as the first of four paragraphs. 600 is the one
weight the whole site uses, on every .h-section and .h-display, so it is the
value that keeps this line consistent with the headings above it.
It costs nothing in measure: 66px tall over two lines at weight 400, and the
same two lines at 600, because Manrope runs its weights close at 18.83px. */
.about-page .story-grid .lead {
hyphens: manual;
max-width: 100%;
text-align: left;
font-style: italic;
font-weight: 600;
}
/* "About The Mentorship Coach", left aligned with the heading and copy below it,
and back on the shared eyebrow size.
Alignment: it was the only centred thing in this column. layout.css:80 sets
.section .eyebrow to text-align: center outright, and that lands here too, so
the label sat centred above a left-aligned heading, two left-aligned paragraphs
and a left-aligned blockquote.
Size: this rule carried font-size: 0.6rem and letter-spacing: 0.15em, which
made it 9.6px against 11.52px for the other two eyebrows on the same page,
"Credentials" and "Ready to Begin". It was the smallest text in the section,
sitting above a 36px heading, which is not a label an eye can pick up.
Both are raised to the shared .eyebrow values, 0.72rem and 0.2em, so all three
eyebrows on this page are one size.
They have to be stated here rather than inherited. Dropping them was tried and
the label jumped to 18.83px, because .about-page .story-grid p at (0,2,1)
matches this
as well as the body copy, and it outranks the
shared .eyebrow at (0,1,0). This selector is (0,3,0), which is what lets it
win. Same reason the original 0.6rem had to be written here.
This selector reaches one eyebrow: the greeting above it in the first
.story-grid is a .lead, not an .eyebrow, so nothing else is touched. */
.about-page .story-grid .eyebrow {
font-size: 0.72rem;
letter-spacing: 0.2em;
text-align: left;
}
/* Dropped: .about-page .section:first-of-type { padding-top: ...} gave the
opening section extra room under the header. The hero banner now owns that
job with the same .hero padding every other page uses. The rule had already
gone inert anyway, because :first-of-type matches the first
sibling whether or not it carries .section, so the moment a
was added ahead of it nothing matched. */
/* ---------- About hero banner ----------
Supplied as a standalone 3:1 photograph and used UNCROPPED, on request. That
matters because the previous asset was a composite graphic whose left panel
had "My Journey" set at display size plus a body paragraph baked into the
pixels - two titles fighting this page's own h1, "My Story.". This file is
the photograph alone, so the heading can be live text again. (The "SAEED UR
RIAZ" lockup was alpha-keyed out of the old composite as a stopgap, but it
has since been dropped: the header already carries the name, and repeating
it here just crowded the card.)
Shape: full-bleed, edge to edge, starting at y=0 so the fixed header floats
INSIDE the photograph rather than above it. That is also why the top corners
are square: no radius on the top-left and top-right, only the bottom pair
stays rounded, where the band lifts off the page. A rounded top edge would
frame the header instead of letting it sit on the image.
The img is width:100%/height:auto so the browser reserves 725/2170 up front
and nothing below jumps, and so the band inherits the photo's own 3:1 exactly
rather than being re-proportioned by a fixed height, which would crop it.
The scrim is a text-protection gradient, not a flat wash: heavier through the
middle band where the h1 sits, easing off at the edges so the mosque, the
hills and the city lights stay legible. The top band stays dark for the
header, which now sits on the image. A uniform overlay dark enough to carry
white text would flatten the photograph.
No .hero class: that is a flex container with min-height and tall clamp()
padding, which would inject empty space and pull the band away from 3:1.
.faq-hero is the same band on the FAQ page and .poem-hero the same band on
the poem page, both built from the same source treatment. All three are listed
in every rule here rather than duplicated into parallel per-page blocks, so the
banners cannot drift apart. :is() is used deliberately: it takes the
specificity of its most specific argument, which is a single class here -
exactly what .about-hero on its own contributed - so widening the selector did
not quietly change which rule wins. A new banner therefore means adding one
argument to each of these groups, not writing new CSS. */
:is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero) {
padding-top: 0;
}
/* Square at the top pair (flush with the top of the document) and square again
at the bottom-left; only the bottom-right corner keeps its radius. */
:is(.about-hero-media, .faq-hero-media, .poem-hero-media, .contact-hero-media, .services-banner-media, .packages-banner-media, .resources-banner-media, .blog-hero-media) {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 0 0 clamp(16px, 2.2vw, 32px) 0;
}
:is(.about-hero-bg, .faq-hero-bg, .poem-hero-bg, .contact-hero-bg, .services-banner-bg, .packages-banner-bg, .resources-banner-bg, .blog-hero-bg) {
display: block;
width: 100%;
height: auto;
}
/* Poem banner: the source is 2048x768 (aspect 2.667) while the About and FAQ bands
are 2170x725 (aspect 2.993). The band is pinned to the shared aspect ratio and the
image is cover-fitted into it, so all three banners stay the same height. The source
is only 11% taller per unit width, so the crop trims a little sky and foreground and
keeps the horizon sitting behind the heading. */
.poem-hero-media { aspect-ratio: 2170 / 725;}
.poem-hero-bg { height: 100%; object-fit: cover; object-position: center 45%;}
/* The source is a bright golden-hour photograph - the heading band peaks at relative
luminance 0.99 - so it cannot carry white text the way the About and FAQ photographs
do. A veil is painted over it in CSS at 0.55, lighter than the original 0.65, so the
photograph reads more clearly. Measured on the cover-fitted pixels that lands the
0.88-alpha nav at 4.6:1, the wordmark at 4.5:1 and the h1 (large text) at
4.5:1; the 0.72-alpha tagline sits lower at 3.7:1. The 4.5:1 wordmark figure was
taken while "Saeed" was --gold-soft and is now a floor rather than a value: the
wordmark is white on both words, and white sits above pale mint against any dark
ground (relative luminance 1.0 against 0.842), so this measurement can only have
got better and cannot have dropped below 4.5:1. About and FAQ already have their
veil baked into the JPEG and must not be given a second one, so this is scoped to
.poem-hero only. */
.poem-hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgb(4 9 14 / 0.55);
}
.poem-hero-content { z-index: 2;}
/* Blog banner: the same treatment the poem banner gets, at the same strength.
The source is another bright golden-hour photograph and it needed it just as
much. Measured per pixel over the cover-fitted image, before any veil, the
brightest pixel behind the heading is luminance 0.995 and the brightest pixel
behind the header is 0.970. White ink on those is 1.00:1 and 1.03:1, so the
heading was genuinely invisible where it crossed the sun.
0.55 is the same strength the poem banner uses and it is measured the same
way, not carried over on faith. At 0.55 the heading lands at 4.47:1 on its
worst pixel, the 72%-alpha logo tagline at 4.56:1 and the full-ivory nav at
4.83:1. For reference the same ladder at 0.58 gives 4.98 / 5.06 / 5.36, at
0.60 it gives 5.35 / 5.44 / 5.76, and at 0.65 it gives 6.44. 0.55 is kept
over those because the poem banner already sets the precedent for a
photograph this bright: a lighter veil lets the picture read, and this is
still AA for large text and AA for the nav.
It stays a scoped rule rather than an extra argument on a shared group,
because About and FAQ carry their darkening baked into the JPEG and must
never be given a second veil. Each veil strength is measured against its own
file. */
.blog-hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgb(4 9 14 / 0.55);
}
.blog-hero-content { z-index: 2;}
/* No .about-hero-scrim any more, and no .faq-hero-scrim either. The darkening is
baked into the JPEG itself - a flat veil of rgb(4,9,14) over the whole frame,
applied to the source PNG before the encode - because the request was for the
overlay to live in the image, not on top of it. Keeping both would have stacked
two veils and crushed the photograph to near black. Text protection is the
file's own job.
The banners do not all take the same veil strength, and the number is measured
per file against the inks that actually sit on it rather than picked once.
How the measurement works, because getting it wrong silently flatters every
result. A translucent ink composites onto the PHOTOGRAPH, not onto white. The
0.88-alpha nav link is not "88% white sitting on white", it is white mixed
into whatever is behind it, so on a mid-tone pixel it comes out darker than
pure white and its contrast drops. Compositing translucent ink onto a white
page first reports the ratio for solid ink and overstates the tinted ones.
Both inks are measured per pixel and the 1st percentile is taken, i.e. the
worst 1% of the region, rather than trusting a single mean.
FAQ is baked at 0.70. Its source is a sunset with a genuinely hot sky, p99
relative luminance 0.74 across the top 100px, and the glow sits on the RIGHT
of that band, exactly where the header CTA and right-hand nav sit. Measured on
the shipped pixels: header band worst case 7.81:1 for pure white and 5.91:1
for the 0.88 tint the nav uses; heading band 7.57:1 and 5.73:1.
About is baked at 0.55. That number is not a round guess, it is the lightest
flat veil that clears every header ink on this particular frame, and it is
lower than it looks like it should be only because the tagline ink was raised
from 0.72 to 0.88 first. See the rule further down for why that was the lever.
The source is an illustration rather than a photograph, and it is bright: p99
relative luminance 0.60 across the header strip and 0.83 across the heading
band, before any veil at all. Measured on the shipped file at 0.55, worst 1%
of each region: logo-name and the menu bars 5.60:1, tagline and nav and phone
4.78:1, h1 white 4.61:1 against 3.0 required. .logo-first measured 4.76:1 as
--gold-soft and is now the same white as logo-name, so it has no figure of its
own any more: identical ink on identical ground is an identical ratio, so it
takes logo-name's 5.60:1. The three that remain clustered within 0.02 of each
other near 4.78 are tagline, nav and phone, and that clustering is still the
signature of a veil set by the smallest text rather than by the average
ground.
Two earlier values on this same artwork, for anyone tempted to go lighter
again. At the original 0.72 tagline the file needed 0.62, which rounds up to
0.65, and at 0.55 that combination FAILED at 3.80:1. So 0.55 was only ever
legal because of the ink change, not on its own.
The file before this one was the Islamabad dusk photograph, a much darker
image that passed at 0.55 on its own with the tagline at 6.92:1. Two files at
the same veil number can sit at very different contrast, because the number is
a property of the artwork, not of the rule. Re-measuring is the only way to
know, which is why these figures are recorded rather than assumed.
Geometry: the source is 2172x724, aspect 3.0000. The band is 2170x725, aspect
2.9931, so the frame is taller for its width than the source is. Keep the full
height and centre-crop the width to 724 * 2170/725 = 2167, then LANCZOS to
2170x725. Cropping the height instead would have thrown away sky.
Colour survives the bake: 89% of pixels are still chromatic, mean saturation
35%, down from 41% in the source. */
:is(.about-hero-content, .faq-hero-content, .poem-hero-content, .contact-hero-content, .services-banner-content, .packages-banner-content, .resources-banner-content, .blog-hero-content) {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding: clamp(18px, 2.6vw, 40px);
}
/* margin-top:auto plus margin-bottom:auto each pin half the leftover space,
which centres the heading vertically in the band, and text-align centres it
horizontally.
The old standalone `.about-hero .section-head { margin-bottom: 0}` is gone
rather than left in place: it matched at the same specificity as this rule
and appeared later in the file, so it always won and reset margin-bottom,
which would have silently defeated the vertical centring. */
:is(.about-hero-content, .faq-hero-content, .poem-hero-content, .contact-hero-content, .services-banner-content, .packages-banner-content, .resources-banner-content, .blog-hero-content) .section-head {
margin-top: auto;
margin-bottom: auto;
text-align: center;
}
/* No font-size here on purpose: it comes from the shared .h-display scale, and
the phone-size override for this heading lives in breakpoints.css. */
:is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero) h1 {
margin-top: 0;
margin-bottom: 0;
color: var(--white);
text-align: center;
}
/* A banner eyebrow needed its own ink here for one revision, then the packages
eyebrow was promoted to the h1 and no banner carries an eyebrow any more.
Worth keeping the numbers, because the trap is not obvious. An eyebrow's
default is --gold #22544C, a dark teal, and against the packages banner photo
it measures 1.00:1. Not "low contrast", but literally nothing: the ink is
darker than the ground it sits on. .eyebrow.light does not save it either,
because that modifier is ALSO --gold. --gold-soft #E4EFEB was the fix, at
5.29:1 for the worst pixel in the whole 2170x725 band and 6.50:1 across the
top 30% where a centred eyebrow sits. White at 0.88 would have passed too at
5.27:1; white at 0.72 fails at 4.14:1 and is the header tagline, so the two
are not interchangeable.
If a banner ever grows an eyebrow again, put it back with gold-soft and
re-measure on the shipped JPEG rather than trusting these figures on a
different photograph. */
/* ---- Header inside the banner, white "until" ----
.about-hero starts at y=0, so the fixed header now floats ON the hero rather
than above it. The default header ink (--charcoal / --gold / --muted) is
invisible against the dark wordmark plate, so while the header has NOT yet
picked up .scrolled - animations.js sets that at y > 10 - every link, the
wordmark and the hamburger bars go white. The moment it scrolls, the frosted
light bar returns and the dark ink comes back with it, which is the "until"
part.
The wordmark here is one ink, white for both words, which is the same
treatment body.dark-hero gives the five photo-hero pages. It used to mirror the
old extracted lockup instead: --gold-soft (pale mint) for "Saeed", white for
"ur Riaz", so the bar carried two inks in one word. Gold itself is #22544C, a
dark teal, and would vanish against the photo, which is why gold was never an
option on a banner at all - only the choice between splitting the wordmark and
flattening it. Flattening is what every other image-backed header on the site
already did.
.faq-page is the FAQ page, which now has the same band at y=0 and therefore
the same problem: its header would sit dark-ink-on-sunset until it scrolls. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .logo-name { color: var(--banner-ink); }
/* Was --gold-soft, which made "Saeed" a pale mint against white "ur Riaz" in the
same wordmark, sitting on a photograph. That is the colour mix this header had:
two inks in one word, and two different answers on the site for the same bar.
body.dark-hero already paints the wordmark flat #fff on the five photo-hero
pages, and the comment on those pages says the flat treatment exists precisely
to avoid "a two-tone wordmark". These eight banners were the ones left behind.
White for both words, so all thirteen image-backed headers read identically and
the wordmark is one ink the way every heading is now one ink.
Contrast does not get worse: --gold-soft #E4EFEB measured 4.76:1 here and
--white measures higher against every one of these dark grounds, so the pair
that was 4.76 against 5.60 collapses to two identical values. That also removes
the three-inks-within-0.02-of-each-other fragility noted above this block,
since one of those inks no longer exists. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page, .dark-hero) .site-header:not(.scrolled) .header-inner > .logo .logo-name .logo-first {
/* White on "Saeed". The mint is on "ur Riaz", one rule above at L1522 and in
the dark-hero pair further down, and this rule exists only to stop the
first word inheriting it. Without it the whole wordmark is one ink and the
mix this bar is supposed to carry is not there.
Read that the other way round: .logo-name wraps BOTH words, so setting it to
--gold-soft is what puts the mint on "ur Riaz", and .logo-first is the span
around "Saeed" alone, so this rule is the white half of the pair.
The word that carries the accent was reversed once already and the record is
here so nobody reverses it again by accident. The original lockup had the
mint on "Saeed" and white on "ur Riaz". That is what the comment on this rule
used to describe, and it is the reverse of what the code below does, because
a concurrent change on the remote branch moved the mint to the second word
while this rule's declaration was being reworked at the same time. The two
edits landed in the same merge, so the comment and the code disagreed and
neither the merge nor the browser flagged it: the rendering was a legitimate
two-ink mix either way, just the other way round.
Both arrangements are a mix and both pass, so the choice is a design one and
not a correctness one. Mint on the second word is what is in place now, and
this rule matches it. If the accent is wanted back on "Saeed", the change is
to swap the two values here and at L1522, not to delete this rule.
.header-inner > .logo is the bar wordmark only. The drawer keeps its own copy
of the logo, three levels down under .nav-mobile-head, and it sits on the
drawer's ground rather than on a banner, so it keeps its flat white and does
not pick the mint up.
The headroom on the mint is thin and worth stating. The banner's worst pixel
solves to 0.1375 luminance, from white measuring 5.60:1 there, so an ink needs
0.794 to hold 4.5:1 against it - the floor for 16.8px text, which is not
large text at this size. Measured down the hue line from --gold:
#E4EFEB 0.842 4.76:1 pass <- what this is
#DFF4EA 0.863 4.87:1 pass
#D0F0E0 0.811 4.59:1 pass
#C3EDD6 0.770 4.37:1 fail
#B8E8CE 0.724 4.13:1 fail
#9CDFBA 0.634 3.65:1 fail
#54A87C 0.314 1.94:1 fail
So #E4EFEB is the most saturated green that legally sits on this ground, and
it is chosen over #DFF4EA not because it is prettier but because it is the
lightest of the three, and on a dark ground lighter is more headroom. Every
banner below this one is darker than the worst pixel above, so the figure to
remember is 4.76:1 and it is a floor, not a typical value. Anything more
saturated than #D0F0E0 fails here. */
color: #fff;
}
/* The tagline was 0.72 and is now 0.88, matching the nav ink directly above it.
That is not a styling preference, it is what lets the baked banner veils be
lighter. The tagline is the smallest text in the header at 9.6px, so it has the
least ink to work with, and a translucent ink composites onto the photograph
rather than onto white, so its measured contrast is materially lower than the
nav's even though both sit on the same ground. At 0.72 it was the binding
constraint on all six banners and it, not the photograph, was dictating how
dark the veil had to be: About needed 0.62 and rounded to 0.65. At 0.88 the
same ground passes at 0.55, which is a visibly lighter banner.
Measured on the shipped About file at veil 0.55: tagline 4.78:1, nav and phone
4.78:1, logo-name and the menu bars 5.60:1. logo-first measured 4.76:1 as
--gold-soft and is now the same white as logo-name, so it takes 5.60:1 rather
than a figure of its own.
Raising an ink can only increase contrast against a dark ground, so FAQ at its
0.70 bake, and the poem and contact banners on their 0.55 CSS veils, all gain
from this rather than losing. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .logo-tagline { color: var(--banner-ink);}
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .nav-list a { color: rgba(255, 255, 255, 0.88);}
/* Hover and focus have to be restated HERE, at this block's own specificity, not
left to the base .nav-list a:hover rule. The resting line above is (0,4,2);
the base hover rule is only (0,2,1). So the base rule set the white pill and
this block set white text, and the pill landed under text that stayed white -
white on white, 1.06:1, invisible. Specificity is the whole reason this line
exists; matching values alone would not have been enough. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .nav-list a:hover,
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .nav-list a:focus-visible {
color: var(--black);
background: rgba(255, 255, 255, 0.9);
}
/* The same trap, one state further on: the current page. .nav-list a.active paints a
filled pill, and the resting line above at (0,5,1) outranks the (0,2,1) that sets
its ink, so the pill landed under white text - white on white, 1:1. This is what
showed as a blank white rectangle in the mobile drawer, on the current page of
every page in this group: measured on about.html at 390px, "My Story" resolved
to rgba(255,255,255,0.88) on rgb(255,255,255).
Ink and fill both have to be restated here, for the same reason as the line above.
The values are gold fill with white ink, not the white pill with gold ink the
mobile drawer asks for at breakpoints.css. That is deliberate: this rule is not in
a media query, so it also lands on desktop, where .nav-list a.active is already a
gold pill with white text. Restating the drawer's values here would have repainted
the desktop nav of all seven pages white-on-gold. Gold-on-white ink would have made
the mobile active item invisible in a different way, so the fill is the one that
carries the state and the ink follows it. It also lands on the same treatment the
dark-hero pages already use further down this file. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .nav-list a.active {
background: var(--gold);
color: #fff;
}
/* No hover or focus override here on purpose. The base .nav-list a:hover rule
already puts white text on the accent pill, which reads correctly against the
dark banner - so an override would only be a chance for the two to drift.
What this block owns is the resting ink, which has to be light to sit on the
photo; that is the lines above. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .header-phone { color: rgba(255, 255, 255, 0.88);}
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .header-phone:hover { color: var(--white);}
/* The CTA is a link too: invert it to a white pill with dark text so it reads
as "white" over the photo and still looks like a button. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) a.header-cta { background: var(--white); color: var(--ink);}
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) a.header-cta:hover { color: var(--ink);}
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .menu-toggle { border-color: rgba(255, 255, 255, 0.4);}
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .menu-toggle span { background: var(--white);}
/* The ring, for the same reason the dark-hero block further down gives one. These
seven pages are banner pages without the dark-hero class, so that block does
not reach them and they were left drawing the gold floor on a photo: 1.43:1.
These are the only focusable things in the bar that do not already carry a
light pill of their own, and the pill is inside the border box while the ring
is outside it, which is why the nav link needed this even though its focus
state is a white pill with black text. Everything listed here is scoped to
:not(.scrolled) to match the rest of the block: once the bar turns light the
gold floor is correct again and this stops applying. */
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .nav-list a:focus-visible,
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .logo:focus-visible,
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .header-phone:focus-visible,
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) .menu-toggle:focus-visible,
:is(.about-page, .faq-page, .poem-page, .page-contact, .page-services, .page-packages, .page-resources, .blog-page) .site-header:not(.scrolled) a.header-cta:focus-visible {
outline-color: var(--ivory);
}
.about-page .story-grid { align-items: start; gap: clamp(32px, 4vw, 60px);}
.about-page .story-media { aspect-ratio: 4/5;}
/* About Section 01 (My Journey): justified to match Section 02, so the lines end
evenly on both edges. This overrides the earlier left-aligned decision. */
#journey .story-grid p,
#journey .story-grid .lead { hyphens: manual; }
/* About Sections 01 and 02 share one portrait image style: the 4/5 box from
.about-page .story-media above, plus `object-fit: cover` from
layout.css .story-media img. #about-coach used to opt out (aspect-ratio:auto,
object-fit:contain) because it held three stacked certificates; it now holds
a single photo, so it inherits the portrait treatment like #journey. */
#about-coach .story-media img.cert-large { aspect-ratio: auto; max-height: 520px; object-fit: contain;}
.about-page .story-caption { font-size: 0.85rem; color: var(--muted); text-align: center; margin-top: 12px; line-height: 1.5;}
/* ---------- Cert Gallery ----------
Two certificates per row at every width, not three. Certificates are portrait
documents and at three per row the text on them shrank past legibility; two
gives each one roughly 690px of width inside the 1440px container, which is
about the size a framed certificate actually hangs at. The breakpoints only
need to tighten the gap now, since the column count is already 2. */
.cert-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.cert-gallery-item {
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-card);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.cert-gallery-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lift);
}
/* contain, not cover. The scans are not all the same shape (seven are
landscape between 1.18 and 1.44, one is portrait) and cover was cropping
them to fit the row: decision-making-lums was losing 43% of its width,
which cut the seal and signature off a document whose whole job is to
prove the credential. A fixed 4:3 tile matches the landscape majority
closely enough that the mat stays thin, and the white item background
reads as the mount you would put behind a framed certificate. */
.cert-gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.cert-gallery-item.cert-hidden {
display: none;
}
.cert-gallery.show-all .cert-gallery-item.cert-hidden {
display: block;
}
.cert-toggle {
text-align: center;
margin-top: 32px;
}
.cert-toggle .btn {
display: inline-flex;
align-items: center;
gap: 8px;
overflow: visible;
}
.cert-toggle .btn .arw {
display: inline-flex;
align-items: center;
transition: transform 0.3s ease;
}
.cert-toggle .btn:hover .arw {
transform: translateY(3px);
}
/* Podcast / video mockup media */
.pod-media { position: relative; border-radius: 12px; overflow: hidden;}
.pod-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; display: block;}
.pod-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;}
.pod-play { border: none; padding: 0; background: none; cursor: pointer; width: 88px; height: 88px; transition: transform 0.3s ease, filter 0.3s ease;}
.pod-play svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));}
.pod-play .pod-pause { display: none;}
.pod-play.is-playing .pod-play-ico { display: none;}
.pod-play.is-playing .pod-pause { display: block;}
.pod-play:hover { transform: scale(1.08);}
.pod-audio { width: 100%; margin-top: 12px; height: 40px;}
.pod-time { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.7); color: var(--white); padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600;}
/* Click-to-play framed video (direct inline player) */
.frame-video {
background: #000;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.frame-video .frame-stage { width: 100%; aspect-ratio: 16/9;}
.frame-video iframe,
.frame-video video { width: 100%; height: 100%; border: 0; display: block; background: #000;}
.frame-inline { max-width: 720px; margin: 28px auto 0;}
.frame-fill { position: absolute; inset: 0; border-radius: 0; box-shadow: none;}
/* ---------- Audio in the popup ----------
The popup stage is a 16/9 box, sized for a video, and the two are not
interchangeable: an episode has no picture, so a 16:9 stage is a black void
with one control bar floating in the middle of it and the episode title nowhere
on screen. js/main.js adds this class when the URL is an audio file.
aspect-ratio: auto is the load-bearing declaration. The stage takes its height
from the audio element's own controls, which is about 54px, so the box closes
to the player instead of holding 9/16ths of the modal's width open around it.
--charcoal rather than #000, because #000 was chosen above as video letterbox
and a listening surface is not letterbox. It is the footer's ground and it
matches the popup's own chrome, so the control bar sits on something that
belongs to the site rather than on a video-black box. */
.frame-video--audio { background: var(--charcoal);}
.frame-video--audio .frame-stage {
/* 16/9, the same stage the video branch uses, on the client's request. It was
aspect-ratio: auto here, which collapsed the box to the height of its own
content and gave an episode a letterbox ratio nothing about it shares with a
video. Matching the video stage means the popup is the same shape whichever
trigger opened it, so it does not jump between sizes.
flex column, both axes centred, because the two children are now sized
independently of each other and the box is far taller than their sum. The
previous version let them stack from the top with 22px of padding, which in a
619px-tall box left the player hugging the ceiling and the bottom two thirds
empty charcoal.
gap rather than margin on the canvas, for the reason below. */
aspect-ratio: 16/9;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.4vh, 26px);
}
.frame-video--audio audio {
display: none;
}
/* ---------- Audio controller ----------
Built by js/main.js, so there is no markup for it on any page. It stands in
for the browser's own