is supplied by .page-hero.
============================================================ */
/* ---------- PAGE HERO (compact interior banner) ---------- */
.page-hero{
position:relative;overflow:hidden;isolation:isolate;
padding-top:clamp(48px,7vw,92px);padding-bottom:clamp(40px,6vw,74px);
}
.page-hero-bg{
position:absolute;inset:0;z-index:-1;
background-color:var(--stage-2);
background-image:
linear-gradient(90deg,rgba(8,6,5,.92) 0%,rgba(10,7,5,.62) 55%,rgba(10,7,5,.28) 100%),
radial-gradient(60vw 70vh at 84% 4%, rgba(255,90,30,.26), transparent 60%),
radial-gradient(50vw 55vh at 10% 100%, rgba(224,27,57,.16), transparent 62%),
linear-gradient(0deg,var(--black) 2%,transparent 46%),
linear-gradient(160deg,#211710,#0f0b08);
/* Face-safe default for any hero that supplies a photo but no inline position.
Inert on the 12 gradient-only heroes (a gradient at background-size:cover
fills the box exactly, so background-position has nothing to shift), and all
20 photo heroes set their own inline background-position, which overrides it. */
background-size:cover;background-position:50% 35%;
}
.page-hero-bg::after{
content:"";position:absolute;inset:0;
background:radial-gradient(52vw 52vh at 84% 12%,rgba(255,90,30,.22),transparent 62%);
mix-blend-mode:screen;
}
.page-hero-inner{position:relative;max-width:var(--maxw)}
.page-hero .kicker{margin-bottom:20px}
.page-hero-title{
font-size:clamp(2.5rem,7.5vw,5.4rem);letter-spacing:-.01em;max-width:18ch;
text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.page-hero-title em{
font-style:normal;color:transparent;
background:linear-gradient(120deg,var(--amber),var(--ember) 55%,var(--crimson));
-webkit-background-clip:text;background-clip:text;
}
/* 2026-08-03: under Windows High Contrast (forced-colors:active), the four
clipped-gradient headings above can render invisible — force them back
to solid system text there */
@media (forced-colors:active){
.hero h1 em,.hero-strap em,.stat .num,.prow .p-amt,.page-hero-title em{
background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;
}
}
.page-hero-standfirst{
margin:22px 0 0;max-width:62ch;
font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--bone-dim);
}
.page-hero-standfirst strong{color:var(--bone);font-weight:700}
.page-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.page-hero-meta{
margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;
font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em;
color:var(--muted);text-transform:uppercase;
}
.page-hero-meta span{display:inline-flex;align-items:center;gap:.55em}
.page-hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px var(--ember)}
/* ---------- PROSE (long-form article body) ---------- */
.prose-band{padding-block:clamp(48px,7vw,88px)}
.prose{max-width:74ch;margin-inline:auto;font-size:1.06rem;color:var(--bone-dim)}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose p{margin:0 0 1.15em}
.prose .lead{font-size:1.2rem;color:var(--bone)}
.prose strong{color:var(--bone);font-weight:700}
.prose em{color:var(--bone-dim)}
.prose a{
color:var(--ember);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:rgba(255,90,30,.5);
transition:color .2s,text-decoration-color .2s;
}
.prose a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.prose h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--bone);margin:1.6em 0 .5em;line-height:1}
.prose h3{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--bone);margin:1.5em 0 .4em}
.prose h2 + p,.prose h3 + p{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--ember)}
.prose ol li::marker{color:var(--amber);font-family:"Space Mono",monospace}
.prose blockquote{
margin:1.6em 0;padding:.3em 0 .3em 1.3em;border-left:3px solid var(--ember);
font-size:1.16rem;line-height:1.5;color:var(--bone);font-style:italic;
}
.prose blockquote cite,.prose blockquote footer{
display:block;margin-top:.6em;font-style:normal;
font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);
}
.prose hr{border:0;border-top:1px solid var(--edge);margin:2em 0}
.prose img{border-radius:12px;border:1px solid var(--edge);margin:1.4em 0}
.prose figure{margin:1.6em 0}
.prose figure figcaption{margin-top:.6em;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.prose code{
font-family:"Space Mono",monospace;font-size:.9em;color:var(--amber);
background:var(--char);border:1px solid var(--edge);border-radius:6px;padding:.12em .4em;
}
/* ---------- FEATURE CARDS (icon / label / desc) ---------- */
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{
position:relative;padding:28px 26px;border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,var(--char),var(--coal));border:1px solid var(--edge);
transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fcard:hover{transform:translateY(-5px);border-color:rgba(255,90,30,.4);box-shadow:0 26px 54px -30px rgba(0,0,0,.9)}
.fcard .ico{
width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
background:linear-gradient(150deg,rgba(255,90,30,.16),rgba(224,27,57,.1));
border:1px solid rgba(255,90,30,.3);color:var(--amber);
font-family:"Anton",sans-serif;font-size:1.35rem;line-height:1;
}
.fcard .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.fcard h3{font-size:1.22rem}
.fcard p{margin:9px 0 0;color:var(--bone-dim);font-size:.95rem}
/* ---------- CTA BAND (full-width ember/crimson) ---------- */
.cta-band{padding-block:clamp(52px,8vw,96px)}
.cta-inner{
position:relative;overflow:hidden;border-radius:22px;
padding:clamp(38px,6vw,66px) clamp(28px,5vw,58px);
background:linear-gradient(135deg,var(--ember),var(--crimson));
box-shadow:0 40px 90px -40px rgba(255,90,30,.6);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
}
.cta-inner::before{
content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:
radial-gradient(50% 120% at 12% 0%, rgba(255,178,62,.5), transparent 55%),
repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 40px);
}
.cta-band .cta-text{position:relative;max-width:36ch}
.cta-band .cta-text h2{font-size:clamp(2rem,5vw,3.3rem);color:#fff;line-height:.96}
.cta-band .cta-text p{margin:12px 0 0;color:rgba(255,255,255,.92);font-size:1.05rem}
.cta-band .cta-actions{position:relative;display:flex;flex-wrap:wrap;gap:14px}
.cta-band .btn-solid{background:var(--black);color:var(--bone);border-color:transparent}
.cta-band .btn-solid:hover{background:#000;color:#fff;transform:translateY(-2px);box-shadow:0 20px 50px -18px rgba(0,0,0,.7)}
.cta-band .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta-band .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}
/* ---------- FAQ ACCORDION (core wp:details, themed) ---------- */
.faq-band{padding-block:clamp(48px,7vw,88px)}
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
.faq .wp-block-details{
border:1px solid var(--edge);border-radius:12px;overflow:hidden;
background:linear-gradient(180deg,var(--char),var(--coal));
transition:border-color .25s var(--ease);
}
.faq .wp-block-details[open]{border-color:rgba(255,90,30,.4)}
.faq .wp-block-details summary{
list-style:none;cursor:pointer;position:relative;
padding:18px 56px 16px 22px;
font-family:"Archivo",sans-serif;font-weight:700;font-size:1.04rem;color:var(--bone);
transition:color .2s;
}
.faq .wp-block-details summary::-webkit-details-marker{display:none}
.faq .wp-block-details summary:hover{color:var(--amber)}
.faq .wp-block-details summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:10px}
.faq .wp-block-details summary::after{
content:"+";position:absolute;right:20px;top:16px;
font-family:"Space Mono",monospace;font-size:1.45rem;line-height:1;color:var(--ember);
transition:transform .3s var(--ease);
}
.faq .wp-block-details[open] summary::after{content:"\2013";color:var(--amber)}
.faq .wp-block-details > :not(summary){margin:0;padding:0 22px;color:var(--bone-dim);font-size:1rem;line-height:1.62}
.faq .wp-block-details > :not(summary):last-child{padding-bottom:20px}
.faq .wp-block-details p{margin:0 0 .8em}
.faq .wp-block-details p:last-child{margin-bottom:0}
.faq .wp-block-details ul,.faq .wp-block-details ol{margin:0 0 .8em;padding-left:1.3em}
.faq .wp-block-details li{margin-bottom:.4em}
.faq .wp-block-details li::marker{color:var(--ember)}
.faq .wp-block-details a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}
.faq .wp-block-details a:hover{color:var(--amber)}
.faq .wp-block-details .note-hot{color:var(--amber)}
.faq-group-head{
grid-column:1/-1;margin:24px 0 2px;
font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:.7em;
}
.faq-group-head::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--ember),transparent)}
/* ---------- PRICING TABLE (themed table + card rail) ---------- */
.pricing-band{padding-block:clamp(48px,7vw,88px)}
.pricing-wrap{max-width:960px;margin-inline:auto;overflow-x:auto;border-radius:14px;border:1px solid var(--edge)}
.pricing-table{width:100%;min-width:520px;border-collapse:collapse;font-size:1rem}
.pricing-table th,.pricing-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--edge)}
.pricing-table thead th{
background:rgba(42,18,6,.55);
font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--amber);font-weight:700;
}
.pricing-table tbody tr{transition:background .2s}
.pricing-table tbody tr:hover{background:rgba(255,90,30,.05)}
.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table td.amt{font-family:"Anton",sans-serif;font-size:1.32rem;color:var(--ember);white-space:nowrap;letter-spacing:.01em}
.pricing-table td.amt small{font-family:"Space Mono",monospace;font-size:.6rem;color:var(--muted);letter-spacing:.04em;margin-left:.3em}
.pricing-table td .sub{display:block;font-family:"Space Mono",monospace;font-size:.66rem;color:var(--muted);letter-spacing:.03em;margin-top:3px}
.pricing-note{max-width:960px;margin:18px auto 0;color:var(--muted);font-size:.92rem}
.pricing-note strong{color:var(--bone-dim)}
.pricing-note a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}
/* Card rail (reuses .price / .price-wrap / .voucher from the homepage kit) */
.pricing-band .price-wrap{margin-top:26px}
/* ---------- shared interior helpers ---------- */
.sec-head.tight{margin-bottom:clamp(22px,3vw,34px)}
.interior-lead{max-width:64ch;color:var(--bone-dim);font-size:1.08rem}
/* ---------- INTERIOR RESPONSIVE ---------- */
@media (max-width:1080px){
.feature-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.feature-cards{grid-template-columns:1fr}
.cta-inner{flex-direction:column;align-items:flex-start}
.page-hero-title{font-size:clamp(2.2rem,10vw,3.2rem)}
}
/* ============================================================
REAL PHOTOGRAPHY — rich footer nav + photo galleries
(appended 2026-07-10; later source order intentionally wins)
============================================================ */
.foot-grid{grid-template-columns:1.7fr repeat(4,minmax(0,1fr));gap:30px;align-items:start}
@media (max-width:1080px){
.foot-grid{grid-template-columns:repeat(3,1fr)}
.foot-grid .foot-brand{grid-column:1/-1}
}
@media (max-width:760px){
.foot-grid{grid-template-columns:1fr 1fr}
.foot-grid .foot-brand{grid-column:1/-1}
}
@media (max-width:480px){
.foot-grid{grid-template-columns:1fr}
}
/* Photo galleries for gear shots & band banners */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:8px}
.media-grid figure{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--edge);box-shadow:var(--shadow-lg);background:var(--coal)}
.media-grid img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.media-grid figure:hover img{transform:scale(1.045)}
.media-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);background:linear-gradient(0deg,rgba(10,8,6,.9),transparent)}
/* Single framed photo (portraits / feature shots) */
.photo-frame{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--edge);box-shadow:var(--shadow-lg)}
.photo-frame img{width:100%;height:auto;display:block}
/* ============================================================
--- 2026-07-21 Malcolm review edits ---
Styling for markup introduced by the theme/content review pass.
Everything below uses the :root custom properties so the planned
white + azure reskin only needs the :root block changed.
============================================================ */
/* ---------- .hot — red emphasis inside a heading ----------
Fees page (18): "Recommend a mate, get rewarded."
Generic on purpose: any heading fragment can be flagged .hot. */
.hot{color:var(--crimson)}
/* ---------- .nowrap — keep a hyphenated phrase from breaking mid-word ----------
2026-08-03: a plain "-" is a valid line-break point per the Unicode
line-breaking algorithm, so a big Anton heading can wrap a compound
term like "one-to-one" right after a hyphen ("ONE-TO-" / "ONE?"),
which reads as broken. Space-to-space wraps elsewhere in these CTA
headings (e.g. "Let's come to" / "you.") ARE the intended short-line
rhythm — leave those alone. Wrap only the hyphenated phrase itself in
this so it stays whole; the heading can still wrap before it. */
.nowrap{white-space:nowrap}
/* ---------- Red italics — GROUP LESSONS page only (page 26) ----------
Malcolm asked for "what I put in italics" to be red: the 19 module
labels ("Mod 7 :") and the 5 audience qualifiers ("kids 4 to 12").
Scoped to body.page-id-26 (verified body class) AND to .band so it
cannot leak to italics site-wide. Deliberately NOT applied to the
three s outside .band — the hero em is the theme's amber→
ember→crimson gradient headline treatment (.page-hero-title em),
and the two section ems inherit that same display idiom;
flooding them red would break the page's signature headings. */
body.page-id-26 .band em{color:var(--crimson);font-style:italic}
/* ---------- .mod-thumb — module thumbnails on group-lessons ----------
One ![]()
sits as a sibling immediately before each
module inside .prose, so the float wraps both the heading and its
bullet list. Fixed 4:3 box + object-fit:cover normalises 13 source
photos of wildly different aspect ratios into one tidy column.
clear:left is load-bearing: without it a short module lets the next
thumbnail float up alongside and the set reads as a ransom note.
Zeroing the adjacent h3's margin-top makes the heading's cap-line and
the image's top edge land on the same y (both then sit at the previous
block's collapsed margin), which is what makes the column look aligned. */
.prose img.mod-thumb{
float:left;clear:left;
width:124px;height:93px;
object-fit:cover;object-position:center;
margin:0 1.15em .55em 0;
border-radius:12px;
border:1px solid var(--edge);
background:var(--coal);
}
.prose img.mod-thumb + h3{margin-top:0}
/* The module's bullet list gets its own block formatting context so it sits
BESIDE the float as a clean column instead of wrapping around it — without
this, the first two bullets indent past the photo and the rest snap back to
the far left, giving every module a ragged two-step left edge. */
.prose img.mod-thumb + h3 + ul{overflow:hidden;padding-left:1.5em}
/* Forward-compat: not used by the current markup (each module carries a
single thumb), but keeps a multi-thumb module tidy if one is ever added. */
.mod-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.2em}
.mod-thumbs img.mod-thumb{float:none;clear:none;margin:0}
@media (max-width:760px){
.prose img.mod-thumb{width:104px;height:78px;margin-right:.95em}
}
/* Below ~560px a floated photo leaves the bullets only three or four words a
line. Drop the float and sit the thumbnail above its heading instead — the
page gets longer, but the module text becomes readable again. */
@media (max-width:560px){
.prose img.mod-thumb{
float:none;clear:none;
width:132px;height:99px;
margin:0 0 .65em;
}
.prose img.mod-thumb + h3 + ul{overflow:visible;padding-left:1.35em}
}
/* ---------- 3-step register flow (page 32) ----------
Three sibling s. A CSS counter numbers
them, so the badge can never drift out of step with the source order.
The panel treatment goes on the form rather than the full-bleed section,
which is what makes it match .gigcard / .price / .reg-form. */
body{counter-reset:cgm-step}
.step-block{
counter-increment:cgm-step;
padding-block:clamp(46px,6vw,76px);
}
.step-block + .step-block{border-top:1px solid var(--edge)}
.step-block .sec-head{position:relative;padding-top:72px}
.step-block .sec-head::before{
content:counter(cgm-step);
position:absolute;top:0;left:50%;transform:translateX(-50%);
width:54px;height:54px;border-radius:14px;
display:grid;place-items:center;
font-family:"Anton",sans-serif;font-size:1.85rem;line-height:1;
color:var(--amber);
background:linear-gradient(150deg,rgba(255,90,30,.16),rgba(224,27,57,.1));
border:1px solid rgba(255,90,30,.3);
}
/* The mu-plugin ships .cgm-form bare (max-width:720px, no panel, no
horizontal padding — so on a narrow viewport the fields ran to the
screen edge). This gives it the theme's standard panel and gutters. */
.step-block .cgm-form{
width:calc(100% - clamp(32px,8vw,56px));
max-width:720px;
margin-top:clamp(26px,3.5vw,38px);
margin-inline:auto;
padding:32px 30px 30px;
border-radius:18px;
border:1px solid var(--edge);
background:linear-gradient(180deg,var(--char),var(--coal));
box-shadow:var(--shadow-lg);
}
/* Step 3 is the payment step — same panel, warmed with the amber hatch
the .voucher card already uses, so "money" reads consistently. */
.paypal-box .cgm-form{
border-color:rgba(255,178,62,.42);
background:
repeating-linear-gradient(45deg,rgba(255,178,62,.045) 0 12px,transparent 12px 24px),
linear-gradient(180deg,var(--char),var(--coal));
}
/* ---------- .sec-cta — trailing call-to-action under a section grid ----------
Used by the testimonials "Read all 131 reviews" link. Declared here so the
pattern no longer needs its inline text-align. */
.sec-cta{margin-top:36px;text-align:center}
/* ============================================================
--- 2026-07-21 corrections ---
============================================================ */
/* ------------------------------------------------------------
NAV — mobile header overflow. The burger existed and worked;
it was simply pushed OUTSIDE the viewport.
Measured at 390px before the fix: .nav-inner needed 491px of
content in a 390px box. .brand was flex-shrink:0 at 287px, so
every pixel of the overflow was dumped onto .nav-cta, whose
children cannot shrink either (.btn is white-space:nowrap, the
burger is a fixed 44px). Result: "Register" clipped at x=437
and the burger laid out at x=447-491 — entirely offscreen.
Because .page-hero/body clip the overflow (documentElement
.scrollWidth stayed 390) it could not even be scrolled to, so
the site had NO working navigation on a phone, on every page.
The widest single item is the brand tagline: 216px intrinsic
versus 118px for the wordmark itself. It is repeated in the
footer, so it is the right thing to drop on a phone.
------------------------------------------------------------ */
@media (max-width:760px){
.brand .sub{display:none}
.nav-inner{gap:12px}
/* Safety valve: whatever the brand ends up containing, it may now
give way before the controls do, so the burger can never be
pushed off-screen again. .nav-cta holds its ground instead. */
.brand{flex-shrink:1;min-width:0}
.brand > span:last-child{min-width:0}
.brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-cta{flex-shrink:0}
/* Buys back ~16px so the wordmark survives intact down to ~360px. */
.nav-cta .btn-primary{padding:11px 16px;font-size:.84rem}
}
/* Below ~400px there is no longer room for the wordmark beside the
controls. Rather than ellipsise it to "COOL GOOL MU…", let it use
the second line the hidden tagline freed up — the lockup stays
38px tall, matching the mark, and the name stays fully readable. */
@media (max-width:400px){
.brand .name{
white-space:normal;overflow:visible;text-overflow:clip;
font-size:1.02rem;
}
.nav-cta{gap:8px}
}
/* ============================================================
B3 FIX — /profile/ (page 70) hero: make Malcolm's EYES visible
on small screens. VERIFIED by render at 375 / 390 / 430 / 640 /
700 / 760 px. Desktop (>=761px) is provably unchanged.
APPEND to style.css. Scoped to body.page-id-70 ONLY — it must not
touch the other 20+ photo heroes that share .page-hero.
WHY !important: page 70 sets `background-image` in an INLINE style
on .page-hero-bg, and an inline declaration beats any stylesheet
selector regardless of specificity. !important on the three
background-* lines is the only way to override it from style.css.
Do NOT drop it and do NOT drop the url() — background-image is a
single layer-list, so the photo must be re-declared with the
replacement gradients.
WHY the hero gets taller: .page-hero-bg is background-size:cover.
At mobile widths the box is portrait, so the image is scaled to the
box HEIGHT and background-position-Y becomes inert — his eyes land
at a FIXED 27.7% of the hero height no matter what Y you set. The
only way to move his face above the text is to add headroom above
the kicker. 210px puts the eyes ~58px clear of the kicker.
WHY the scrim is replaced: the inline scrim is a 90deg (horizontal)
one tuned for desktop — .94/.88/.78 across the left 30%. At 390px
that 30% is only 117px, so it sits straight over his face. On small
screens the text is full-width, so legibility has to come from a
VERTICAL scrim instead: clear at the top (face), dark from 34% down
(kicker/title/standfirst/CTA/meta).
============================================================ */
@media (max-width:760px){
body.page-id-70 .page-hero{ padding-top:210px; }
body.page-id-70 .page-hero-bg{
background-image:
linear-gradient(180deg,
rgba(8,6,5,.62) 0%,
rgba(8,6,5,.26) 8%,
rgba(8,6,5,.04) 14%,
rgba(8,6,5,.04) 28%,
rgba(8,6,5,.40) 34%,
rgba(10,7,5,.78) 40%,
rgba(10,7,5,.90) 50%,
rgba(10,7,5,.95) 100%),
radial-gradient(70vw 30vh at 82% 6%, rgba(255,90,30,.20), transparent 62%),
url('/wp-content/uploads/2026/07/bright.jpg') !important;
background-position:38% 28% !important;
background-size:cover !important;
}
/* tone down the inherited ember screen-blend so the bright studio
wall behind his head doesn't go orange-washed */
body.page-id-70 .page-hero-bg::after{ opacity:.45; }
}
/* ============================================================
--- 2026-07-21 final sweep ---
============================================================ */
/* ------------------------------------------------------------
IN-PAGE CTA PHONE BUTTON — clipped on every phone.
The client's phone line must read "Call +44 7983 868507
(please don't Whatsapp)". The theme already carries that string
in three places and each one splits it into TWO nowrap units so
it can drop to a second line:
parts/footer.html — +
patterns/register.php— +
patterns/cta-band.php— for the number, separate below
The in-page CTA is the variant that never got that treatment:
it is ONE anchor carrying the whole string, authored in page
CONTENT and repeated verbatim on 30 published pages (IDs 17,
19-26, 28-33, 37-46, 70-74), so it cannot be split from CSS.
Measured before the fix (Chrome, 390px viewport):
.btn is white-space:nowrap -> intrinsic width 375.5px
.cta-inner content box -> 294px, and it is overflow:hidden
so the right-hand 53.5px — border, radius and the closing ")" —
was clipped away. A width sweep shows this from 320px up to
478px; at >=480px the button fits on one line unaided.
THE FIX, and why it is built this way:
1. white-space:normal is necessary but NOT sufficient. Greedy
line-breaking fills the first line, which measures out as
"Call +44 7983 868507 (please" / "don't Whatsapp)"
(verified) — it breaks the parenthetical, not the number.
2. max-width is therefore the load-bearing part. Text metrics
for this button's font:
"Call +44 7983 868507" 153.0px
"(please don't Whatsapp)" 173.5px
"Call +44 7983 868507 (please" 209.2px
Any content width in [173.5, 209.2) forces exactly the wanted
break: the number still fits on line 1, "(please" no longer
does, and line 2 holds the parenthetical whole. 22.5ch lands
mid-window with ~2ch of slack either side, and ch is used
rather than px so the window tracks the font — if Archivo
fails to load and the sans-serif fallback is used, the text
and the cap scale together. +34px covers the 16px side
padding and 1px border of the border-box.
3. text-wrap:balance is belt-and-braces, not the mechanism. It
independently picks the same split (it minimises the longest
line: 153/173.5 beats 209.2/117.3), so browsers that support
it agree with the cap. Browsers that don't (Safari < 17.5)
still get the correct break from max-width alone — verified.
The number can never break mid-digit: there is no break
opportunity inside "868507", and nothing here sets
overflow-wrap/word-break, which is why neither is used.
Result 320-520px: button 224-227 x 62.6px — taller than the
49.3px single-line version, so the tap target grows, and well
clear of the 44px minimum. >=560px is byte-for-byte the old
rendering (375.5 x 49.3, one line). Verified on pages 17, 20,
32, 70, 73 at 320/360/390/430/480/520/560/768/1200 with
documentElement.scrollWidth == viewport width at every step.
Scoped to .cta-band .cta-actions so it cannot reach the footer,
the register card or the nav. It does also match the cta-band.php
pattern button, whose label is just "Call +44 7983 868507"
(153px) — that fits line 1 unwrapped, so it only picks up the
slightly tighter mobile padding. Intentional.
------------------------------------------------------------ */
@media (max-width:520px){
.cta-band .cta-actions .btn[href^="tel:"]{
white-space:normal;
text-wrap:balance;
max-width:calc(22.5ch + 34px);
padding:11px 16px;
line-height:1.34;
text-align:center;
}
}
/* ------------------------------------------------------------
SMALLEST PHONES (<=420px) — fixed padding and display type
that never reduced.
Two cards were overrunning their container at 320px. Both had the
same cause: an intrinsic minimum that does not shrink, inherited
by a grid/flex item whose default min-width:auto refuses to go
below it. Neither was a stray width or a missing overflow.
1. .stat — .trust-grid is repeat(2,1fr) at <=760px, but "1fr" is
minmax(auto,1fr), so a track cannot go below its item's
min-content. "Berklee" set in Anton at the 2.6rem floor of the
old clamp is 126px and cannot break, plus 2x26px of fixed
padding = 178px. At 320px the wrap gives each track only 140px,
so the tracks resolved to 130.95px + 178px = 308.95px inside a
280px box: the right-hand column ran 9px past the viewport and
its border and rounded corner were shaved by an ancestor's
overflow:hidden. Measured, not guessed.
Fix = make the content fit the track, then release the floor.
Padding 26->12px and the display number down to a clamp whose
vw term tracks the viewport gives "Berklee" 92px against a
116px budget at 320px (~25% headroom, enough to absorb the
sans-serif fallback if Anton is slow). min-width:0 is what
finally lets the two tracks resolve equal — but it is only
safe BECAUSE the type now fits, which is why it lives in here
and not on the base rule: at 761-799px the same grid runs 4-up
with ~171px tracks, and releasing the floor there without
shrinking the type would clip "Berklee" instead. That band is
deliberately left exactly as it was.
2. .cline — the email guitar@malcolmcallus.com is one unbreakable
206px token, so .ct could not shrink, so .cline could not, so
the .reg-info grid item could not: a 304px floor inside a 280px
wrap, 4px past the viewport. overflow-wrap on the mailto row
(above) removes the floor; the tightened padding/gap/icon and a
.92rem value here keep it on ONE line at 320px (186px of 198px
available) so the fix costs nothing visually.
Verified by render at 320 / 360 / 390 px and 1280px desktop, on
the default skin and ?skin=azure, with
documentElement.scrollWidth == viewport width throughout.
------------------------------------------------------------ */
@media (max-width:420px){
.stat{padding:26px 12px;min-width:0}
.stat .num{font-size:clamp(1.9rem,8.5vw,2.4rem)}
.stat .lbl{font-size:.62rem;letter-spacing:.1em}
.cline{padding:14px;gap:12px}
.cline .ci{width:40px;height:40px}
.cline .ct .v{font-size:.92rem}
}
/* ============================================================
--- 2026-07-21 mobile sweep #2 ---
============================================================ */
/* ------------------------------------------------------------
IN-PAGE CTA — the whole panel overflowed to the RIGHT on
phones. Worst on /register/, whose email button carries the
longest label on the site.
Measured at 320px BEFORE the fix (Chrome):
.cta-inner content box 224px (280 - 2x28 padding)
.cta-actions 331.4px -> 79.4px past the edge
.cta-text 329.9px -> 77.9px past the edge
.cta-inner is overflow:hidden, so all of that was CLIPPED, not
scrollable: the h2 read "RATHER TALK IT THROU", the standfirst
lost its last word, and the black "Email me (including your
phone number)" button lost its right border and radius. Still
visibly clipped at 390px (9.4px over). Desktop was never
affected — the panel only overflows below 428px-ish, and the
media query below stops well clear of that.
ROOT CAUSE — and what it is NOT.
The obvious suspect was the recurring one on this site: a flex
item stuck at its default min-width:auto. It was tested and
RULED OUT — adding `min-width:0` to .cta-actions changed the
measurement by exactly 0px at 320/360/390. The floor is not the
flex item's automatic minimum, it is the BUTTON ITSELF: .btn
sets `white-space:nowrap`, so "Email me (including your phone
number)" is one unbreakable 331.4px token. A nowrap inline-flex
box has no smaller form to shrink to, so nothing above it in
the tree can shrink either.
Why the HEADING moved too, which is the part that looks odd:
.cta-text and .cta-actions are the two items of the wrapping
flex container .cta-inner, and they end up on separate flex
lines. The 331.4px button sizes the flex formatting context,
and .cta-text then takes as much of that as its own cap allows
— it measured 329.877px, i.e. exactly its `max-width:36ch`.
So the heading and paragraph were not independently broken;
they were following the button. Verified: releasing the button
alone collapses .cta-text back to 224px with no rule of its
own. That is why this fix touches ONLY the button.
THE FIX: let the label wrap. 224px content box, 2 lines,
224 x 62.6px — a bigger tap target than the 49.3px it replaces
and well over the 44px minimum. The padding/line-height/
text-align match the tel button beside it so the pair reads as
one control group.
INTERACTION WITH THE PROTECTED TEL RULE (above, same 520px
breakpoint): that rule is
.cta-band .cta-actions .btn[href^="tel:"] (0,4,0)
and this one is
.cta-band .cta-actions .btn (0,3,0)
so the tel button keeps its own `max-width:calc(22.5ch + 34px)`
— the load-bearing part of that fix — no matter which order the
two blocks appear in. `max-width:100%` here is a safety valve
for any FUTURE long label and provably does not reach the tel
button: its computed max-width is unchanged at 226.78px.
Re-verified after this change at 320/360/390/430/480/520.
------------------------------------------------------------ */
@media (max-width:520px){
.cta-band .cta-actions .btn{
white-space:normal;
max-width:100%;
padding:11px 16px;
line-height:1.34;
text-align:center;
}
}
/* ------------------------------------------------------------
PRICING TABLE — it scrolled, but nothing SAID so.
.pricing-wrap is overflow-x:auto around a min-width:520px
table, so the mechanism was already correct and the page never
scrolled sideways. The problem was purely that the affordance
was invisible: at 320px the wrap is 278px of a 520px table, so
242px (47%) is off-screen — the header reads "ONE-", the
figures are sliced mid-glyph and the whole "Group · per person"
column simply does not exist until you happen to swipe it.
Measured scrollable range (identical on /fees/,
/group-lessons/ and every instrument page — the table is the
same 520px everywhere):
320px -> 242px hidden 390px -> 172px hidden
520px -> 54px hidden 576px -> 4px hidden
580px and up -> not scrollable at all
Hence the 579px breakpoint: it is the exact measured width at
which the last pixel of overflow disappears, so the cue is
present when and only when something is actually hidden. It
never shows on desktop.
WHY THIS IS AN OVERLAY AND NOT THE USUAL BACKGROUND TRICK.
The stock pure-CSS answer is the local/scroll background
scroll-shadow, which self-hides at both ends for free. It
cannot work here, for two independent reasons:
1. Backgrounds paint BEHIND content. The cells are
transparent over the body colour, so a background ramp
would tint the gap between glyphs and leave the sliced
text just as sharp — it would not read as a fade at all.
2. The shadow would be dark-on-dark. The page is #0a0806 and
the wrap is transparent, so a dark ramp over it is
invisible by construction.
The cue therefore has to sit ON TOP of the content, which means
a positioned box, which — with no markup to add — means a
pseudo-element. The only way to pin one to the VISIBLE edge of
a scroll container (rather than to the far end of its scrolled
content, where absolute positioning would put it) is
position:sticky, so .pricing-wrap becomes a 2-row grid purely
to give the two pseudos a cell to be placed in.
::before row 1, sticky left — the worded hint. Space Mono /
--muted / uppercase micro-label, the idiom already
used for .stat .lbl and td .sub. No new colours.
::after row 2, sticky right — the fade, ramping to --black so
it is correct on both skins, and pointer-events:none
so it can never eat a tap or a drag.
Both then fade to opacity 0 over the last 28% of the scroll via
a scroll-driven animation, so once you have reached the Group
column the cue gets out of the way instead of dimming the
figures you just swiped to. Verified: opacity 1 at scrollLeft 0
and 0 at the end, at 320/390/579.
The @supports wrapper matters. Where scroll-driven animations
are unsupported the timeline is simply inactive, the pseudos
keep their base opacity:1, and the cue is still correct — it
just stays put. Nothing depends on the animation for layout.
At >=580px the pseudos have no `content` at all (verified
computed content:none at 580/768/1280), so desktop keeps the
original block layout and paints nothing extra.
------------------------------------------------------------ */
@media (max-width:579px){
.pricing-wrap{ display:grid; grid-template-columns:auto; }
.pricing-wrap > .pricing-table{ grid-row:2; grid-column:1; }
.pricing-wrap::before{
content:"swipe to see more \2192";
grid-row:1; grid-column:1;
position:sticky; left:0;
justify-self:start;
font-family:"Space Mono",monospace;
font-size:.6rem;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--muted);
padding:10px 14px 6px;
white-space:nowrap;
}
.pricing-wrap::after{
content:"";
grid-row:2; grid-column:1;
position:sticky; right:0;
justify-self:end;
width:clamp(34px,11vw,56px);
pointer-events:none;
background:linear-gradient(to left,var(--black) 12%,var(--fade-clear));
}
@supports (animation-timeline:scroll()){
.pricing-wrap::before,
.pricing-wrap::after{
animation:cgm-swipe-fade linear both;
animation-timeline:scroll(nearest inline);
}
}
}
@keyframes cgm-swipe-fade{
0%,72%{ opacity:1 }
100%{ opacity:0 }
}
/* ============================================================
--- 2026-07-23 footer social icons ---
A row of small monoline brand links in the footer brand column
(Facebook / YouTube / Instagram / X). No third-party plugin or
icon font — the SVGs are inline and paint with currentColor.
Colour comes only from --muted (rest) and --ember (hover), both
of which every skin (default + azure) redefines, so the icons
track the active skin automatically. Mirrors the .foot-col link
idiom: muted at rest, accent + lift on hover/focus.
============================================================ */
.social-icons{
display:flex;
align-items:center;
gap:4px; /* 2026-08-03: shrunk from 16px — the 12px padding added below
already provides that spacing, so the icons stay visually
where they were while the tap zone grows */
margin-top:18px;
}
/* 2026-08-03: 12px padding brings the 20px svg's hit box to 44x44
(WCAG 2.2 AA min is 24x24; this site's own standard elsewhere is 44x44) */
.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
padding:12px;
color:var(--muted);
transition:color .2s var(--ease),transform .2s var(--ease);
}
.social-icons a:hover,
.social-icons a:focus-visible{
color:var(--ember);
transform:translateY(-2px);
}
.social-icons svg{
width:20px;
height:20px;
display:block;
fill:currentColor;
}
/* ============================================================
2026-07-23 Freebies resource-card links (page 30 / D3)
Each .fcard gained a foot "Open →" anchor. Its ::after also
stretches across the whole card, so the entire card is one
click target. .fcard already sets position:relative +
overflow:hidden. Colours come only from theme vars /
currentColor, so the default (ember) and ?skin=azure skins
both track automatically — nothing is hard-coded.
============================================================ */
.fcard{cursor:pointer}
.fcard-open{
display:inline-flex;align-items:center;gap:.45em;
width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);
font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ember);text-decoration:none;
transition:color .25s var(--ease);
}
.fcard-open .arw{transition:transform .25s var(--ease)}
.fcard:hover .fcard-open{color:var(--amber)}
.fcard:hover .fcard-open .arw{transform:translateX(4px)}
/* stretch the foot link across the whole card (nearest positioned
ancestor is .fcard) so a click anywhere on the card opens it */
.fcard-open::after{content:"";position:absolute;inset:0;z-index:1}
.fcard-open:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
/* ============================================================
GEAR CARDS — UNIFORM PHOTO FRAME (GUITARS & BASSES + STUDIO KIT)
------------------------------------------------------------
Client request 2026-07-25 (Malcolm): "Can all guitar/bass
instrument pics be same size?"
Extended 2026-07-27 (Malcolm): "Do for studio kit" — same
treatment applied to the Studio & teaching kit section
(#gear-kit) alongside Guitars & basses (#gear-guitars).
The source photos have wildly different aspect ratios — the
guitars run 0.42 -> 0.75 w:h, and the studio-kit shots are
landscape (Alesis ~1.5, Behringer ~1.33) — so with the page's
default `.gear-thumb img{height:auto}` every card rendered its
photo at a different height.
Fix: give the .gear-thumb frame inside these sections a FIXED
height and let the photo object-fit:contain inside it. Every
photo now renders at the same frame height, centred and
letterboxed on the frame's own dark backdrop.
NOTHING IS CROPPED — Malcolm previously asked to "leave the
images as is", so `contain` (not `cover`) is deliberate: the
full image content is preserved for every item — guitar or
gear — only the display frame is normalised.
Scoped via :has(#gear-guitars, #gear-kit) so the ukulele
section (mixed portrait/landscape, not requested) stays
untouched, and so this lives in the theme rather than in the
page content Malcolm edits by hand in the block editor.
Specificity (1,3,x) sits above the page's inline
#gear-media-styles block, which loads later in document order.
============================================================ */
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{
height:400px;
}
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
}
@media(max-width:640px){
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{height:340px}
}
/* ============================================================
2026-08-05 CSS-UX PASS (audit refs C-7 H-22 H-23 H-59 M-51
M-55 M-56 M-57 M-58 L-38 L-40 L-45 L-47)
------------------------------------------------------------
NOTE FOR THE SECOND PASS / OTHER AGENT — rules this pass touched
IN PLACE, above this block, each tagged "UX-2026-08-05":
html scroll-padding-top (L-38)
.nav-inner gap 24 -> 18 (C-7)
.brand .sub 8.96px -> 12px, tracking(M-57)
nav.links gap 6 -> 2 (C-7)
nav.links a padding, white-space (C-7/M-58)
nav.links a::after inset 14 -> 10 (C-7)
.hero padding-top ceiling (H-23)
.hero-eyebrow/.hero-strap margins (H-23)
.hero h1 clamp ceiling + lh (H-23/H-59)
.hero-sub margin + max-width (H-23)
.hero-cta margin-top (H-23)
.hero-tel a inline-flex chip (M-56)
.foot-col h4 size + line-height (L-40/M-57)
.foot-col a 44px flex row (M-55)
.foot-brand p a[tel|mailto] inline-flex 44px (M-56)
@media 760 -> 1200 SPLIT nav rules only (C-7)
Everything below is additive and appended, so it can be reviewed or
reverted as one contiguous unit. skin-azure.css has one paired split
(nav drawer, C-7) and one appended block (L-47).
============================================================ */
/* ------------------------------------------------------------
H-22 — /fees/ PRICING TABLE ON PHONES: restack, don't scroll.
The table is 3 columns (Lesson | One-to-one | Group · per person) and
min-width:520px inside a .pricing-wrap that measured 348px at a 390px
viewport — 172px, the whole "Group · per person" column, off-screen.
That column is where the group prices live, so the four group-course rows
showed a mobile visitor nothing but the literal em-dash placeholder that
sits in their One-to-one cell:
Group course · 6 × 50 min — £100 as a
card below 640px makes all three columns visible with no horizontal scroll
at any width: below 640px the rows are stacked, and above it the wrap is
already wider than the 520px table (>=577px at 641px), so it never
scrolled there either. That is why the swipe hint, the edge fade, and the
tabindex/role/aria-label the audit asks for are NOT added — a scroll
container that cannot scroll should not advertise that it can, and a
focusable region with nothing to scroll is a keyboard trap for no gain.
The existing <=579px cue is switched off below for the same reason.
The column labels are generated from nth-child rather than a data-label
attribute, because the markup has none (verified: 0 td[data-label] on
/fees/). This is safe but positional: it hard-codes "One-to-one" and
"Group · per person" to columns 2 and 3.
CONTENT/TEMPLATE AGENT: adding data-label="…" to the s and swapping
the two content:"" values for content:attr(data-label) would make this
self-maintaining and survive a column being added or reordered. Until
then, if the table's columns change, THIS BLOCK MUST CHANGE WITH IT.
The label is positioned absolutely rather than made a flex/grid sibling on
purpose: cells like £404 for £150 hold
two inline children, and any flex/grid treatment of the would promote
the bare "£40" text node and the into separate items and blow them
apart with space-between. Absolute positioning leaves each cell's inline
flow completely untouched.
------------------------------------------------------------ */
@media (max-width:640px){
/* the <=579px swipe hint + fade are now false — nothing scrolls */
.pricing-wrap::before,
.pricing-wrap::after{content:none}
.pricing-wrap{display:block;overflow-x:visible;border:0;border-radius:0}
.pricing-table{display:block;width:100%;min-width:0}
.pricing-table thead{display:none}
.pricing-table tbody{display:block}
.pricing-table tr{
display:block;
margin-bottom:12px;
border:1px solid var(--edge);border-radius:12px;
background:linear-gradient(180deg,var(--char),var(--coal));
overflow:hidden;
}
.pricing-table tbody tr:last-child{margin-bottom:0}
.pricing-table td{
display:block;position:relative;
padding:10px 16px 10px 45%;
text-align:right;
border-bottom:0;
}
/* row 1 of each card = the lesson itself, full width, no label */
.pricing-table td:first-child{
padding:13px 16px 11px;
text-align:left;
font-weight:700;color:var(--bone);
border-bottom:1px solid var(--edge);
}
.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table tbody tr:last-child td:first-child{border-bottom:1px solid var(--edge)}
.pricing-table td:nth-child(2)::before{content:"One-to-one"}
.pricing-table td:nth-child(3)::before{content:"Group · per person"}
.pricing-table td:nth-child(2)::before,
.pricing-table td:nth-child(3)::before{
position:absolute;left:16px;top:11px;width:38%;
text-align:left;
font-family:"Space Mono",monospace;font-size:12px;line-height:1.3;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* the block sub-note under an amount keeps to the value side */
.pricing-table td .sub{text-align:right}
}
/* ------------------------------------------------------------
M-57 — MINIMUM TYPE SIZES.
Two floors, as specified: 12px for decorative labels, 14px for text that
carries meaning (prices, credentials, phone labels). Collected here rather
than edited into ~14 scattered rules so the whole policy is reviewable in
one place; each selector's original size is noted beside it. Source order
puts this after every base rule it overrides, and after the <=420px block,
which is deliberate — see .stat .lbl below.
------------------------------------------------------------ */
/* 12px — decorative */
.kicker{font-size:12px} /* was .72rem 11.52px */
.gigcard .gc-tag{font-size:12px} /* was .66rem 10.56px */
.fmt .pin{font-size:12px} /* was .66rem 10.56px */
.card .idx{font-size:12px} /* was .72rem 11.52px */
.about-media .badge{font-size:12px} /* was .68rem 10.88px */
.form-note{font-size:12px} /* was .66rem 10.56px */
.price .plan{font-size:12px} /* was .74rem 11.84px */
.foot-bottom{font-size:12px} /* was .70rem 11.20px */
.quote .who span{font-size:12px} /* was .72rem 11.52px */
/* Found by re-sweeping the rendered DOM of the interior pages after the first
pass — M-57 is a sitewide floor, and these three were the only elements
still under it. .arw is the "→" glyph, which inherits from .fcard-open. */
.fcard-open{font-size:12px} /* was .72rem 11.52px */
.prose figure figcaption{font-size:12px} /* was .72rem 11.52px */
.media-grid figcaption{font-size:12px} /* was .68rem 10.88px */
.prose blockquote cite,
.prose blockquote footer{font-size:12px} /* was .74rem 11.84px */
/* Breadcrumb —
ems inherit that same display idiom;
flooding them red would break the page's signature headings. */
body.page-id-26 .band em{color:var(--crimson);font-style:italic}
/* ---------- .mod-thumb — module thumbnails on group-lessons ----------
One ![]()
sits as a sibling immediately before each
module inside .prose, so the float wraps both the heading and its
bullet list. Fixed 4:3 box + object-fit:cover normalises 13 source
photos of wildly different aspect ratios into one tidy column.
clear:left is load-bearing: without it a short module lets the next
thumbnail float up alongside and the set reads as a ransom note.
Zeroing the adjacent h3's margin-top makes the heading's cap-line and
the image's top edge land on the same y (both then sit at the previous
block's collapsed margin), which is what makes the column look aligned. */
.prose img.mod-thumb{
float:left;clear:left;
width:124px;height:93px;
object-fit:cover;object-position:center;
margin:0 1.15em .55em 0;
border-radius:12px;
border:1px solid var(--edge);
background:var(--coal);
}
.prose img.mod-thumb + h3{margin-top:0}
/* The module's bullet list gets its own block formatting context so it sits
BESIDE the float as a clean column instead of wrapping around it — without
this, the first two bullets indent past the photo and the rest snap back to
the far left, giving every module a ragged two-step left edge. */
.prose img.mod-thumb + h3 + ul{overflow:hidden;padding-left:1.5em}
/* Forward-compat: not used by the current markup (each module carries a
single thumb), but keeps a multi-thumb module tidy if one is ever added. */
.mod-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 1.2em}
.mod-thumbs img.mod-thumb{float:none;clear:none;margin:0}
@media (max-width:760px){
.prose img.mod-thumb{width:104px;height:78px;margin-right:.95em}
}
/* Below ~560px a floated photo leaves the bullets only three or four words a
line. Drop the float and sit the thumbnail above its heading instead — the
page gets longer, but the module text becomes readable again. */
@media (max-width:560px){
.prose img.mod-thumb{
float:none;clear:none;
width:132px;height:99px;
margin:0 0 .65em;
}
.prose img.mod-thumb + h3 + ul{overflow:visible;padding-left:1.35em}
}
/* ---------- 3-step register flow (page 32) ----------
Three sibling s. A CSS counter numbers
them, so the badge can never drift out of step with the source order.
The panel treatment goes on the form rather than the full-bleed section,
which is what makes it match .gigcard / .price / .reg-form. */
body{counter-reset:cgm-step}
.step-block{
counter-increment:cgm-step;
padding-block:clamp(46px,6vw,76px);
}
.step-block + .step-block{border-top:1px solid var(--edge)}
.step-block .sec-head{position:relative;padding-top:72px}
.step-block .sec-head::before{
content:counter(cgm-step);
position:absolute;top:0;left:50%;transform:translateX(-50%);
width:54px;height:54px;border-radius:14px;
display:grid;place-items:center;
font-family:"Anton",sans-serif;font-size:1.85rem;line-height:1;
color:var(--amber);
background:linear-gradient(150deg,rgba(255,90,30,.16),rgba(224,27,57,.1));
border:1px solid rgba(255,90,30,.3);
}
/* The mu-plugin ships .cgm-form bare (max-width:720px, no panel, no
horizontal padding — so on a narrow viewport the fields ran to the
screen edge). This gives it the theme's standard panel and gutters. */
.step-block .cgm-form{
width:calc(100% - clamp(32px,8vw,56px));
max-width:720px;
margin-top:clamp(26px,3.5vw,38px);
margin-inline:auto;
padding:32px 30px 30px;
border-radius:18px;
border:1px solid var(--edge);
background:linear-gradient(180deg,var(--char),var(--coal));
box-shadow:var(--shadow-lg);
}
/* Step 3 is the payment step — same panel, warmed with the amber hatch
the .voucher card already uses, so "money" reads consistently. */
.paypal-box .cgm-form{
border-color:rgba(255,178,62,.42);
background:
repeating-linear-gradient(45deg,rgba(255,178,62,.045) 0 12px,transparent 12px 24px),
linear-gradient(180deg,var(--char),var(--coal));
}
/* ---------- .sec-cta — trailing call-to-action under a section grid ----------
Used by the testimonials "Read all 131 reviews" link. Declared here so the
pattern no longer needs its inline text-align. */
.sec-cta{margin-top:36px;text-align:center}
/* ============================================================
--- 2026-07-21 corrections ---
============================================================ */
/* ------------------------------------------------------------
NAV — mobile header overflow. The burger existed and worked;
it was simply pushed OUTSIDE the viewport.
Measured at 390px before the fix: .nav-inner needed 491px of
content in a 390px box. .brand was flex-shrink:0 at 287px, so
every pixel of the overflow was dumped onto .nav-cta, whose
children cannot shrink either (.btn is white-space:nowrap, the
burger is a fixed 44px). Result: "Register" clipped at x=437
and the burger laid out at x=447-491 — entirely offscreen.
Because .page-hero/body clip the overflow (documentElement
.scrollWidth stayed 390) it could not even be scrolled to, so
the site had NO working navigation on a phone, on every page.
The widest single item is the brand tagline: 216px intrinsic
versus 118px for the wordmark itself. It is repeated in the
footer, so it is the right thing to drop on a phone.
------------------------------------------------------------ */
@media (max-width:760px){
.brand .sub{display:none}
.nav-inner{gap:12px}
/* Safety valve: whatever the brand ends up containing, it may now
give way before the controls do, so the burger can never be
pushed off-screen again. .nav-cta holds its ground instead. */
.brand{flex-shrink:1;min-width:0}
.brand > span:last-child{min-width:0}
.brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-cta{flex-shrink:0}
/* Buys back ~16px so the wordmark survives intact down to ~360px. */
.nav-cta .btn-primary{padding:11px 16px;font-size:.84rem}
}
/* Below ~400px there is no longer room for the wordmark beside the
controls. Rather than ellipsise it to "COOL GOOL MU…", let it use
the second line the hidden tagline freed up — the lockup stays
38px tall, matching the mark, and the name stays fully readable. */
@media (max-width:400px){
.brand .name{
white-space:normal;overflow:visible;text-overflow:clip;
font-size:1.02rem;
}
.nav-cta{gap:8px}
}
/* ============================================================
B3 FIX — /profile/ (page 70) hero: make Malcolm's EYES visible
on small screens. VERIFIED by render at 375 / 390 / 430 / 640 /
700 / 760 px. Desktop (>=761px) is provably unchanged.
APPEND to style.css. Scoped to body.page-id-70 ONLY — it must not
touch the other 20+ photo heroes that share .page-hero.
WHY !important: page 70 sets `background-image` in an INLINE style
on .page-hero-bg, and an inline declaration beats any stylesheet
selector regardless of specificity. !important on the three
background-* lines is the only way to override it from style.css.
Do NOT drop it and do NOT drop the url() — background-image is a
single layer-list, so the photo must be re-declared with the
replacement gradients.
WHY the hero gets taller: .page-hero-bg is background-size:cover.
At mobile widths the box is portrait, so the image is scaled to the
box HEIGHT and background-position-Y becomes inert — his eyes land
at a FIXED 27.7% of the hero height no matter what Y you set. The
only way to move his face above the text is to add headroom above
the kicker. 210px puts the eyes ~58px clear of the kicker.
WHY the scrim is replaced: the inline scrim is a 90deg (horizontal)
one tuned for desktop — .94/.88/.78 across the left 30%. At 390px
that 30% is only 117px, so it sits straight over his face. On small
screens the text is full-width, so legibility has to come from a
VERTICAL scrim instead: clear at the top (face), dark from 34% down
(kicker/title/standfirst/CTA/meta).
============================================================ */
@media (max-width:760px){
body.page-id-70 .page-hero{ padding-top:210px; }
body.page-id-70 .page-hero-bg{
background-image:
linear-gradient(180deg,
rgba(8,6,5,.62) 0%,
rgba(8,6,5,.26) 8%,
rgba(8,6,5,.04) 14%,
rgba(8,6,5,.04) 28%,
rgba(8,6,5,.40) 34%,
rgba(10,7,5,.78) 40%,
rgba(10,7,5,.90) 50%,
rgba(10,7,5,.95) 100%),
radial-gradient(70vw 30vh at 82% 6%, rgba(255,90,30,.20), transparent 62%),
url('/wp-content/uploads/2026/07/bright.jpg') !important;
background-position:38% 28% !important;
background-size:cover !important;
}
/* tone down the inherited ember screen-blend so the bright studio
wall behind his head doesn't go orange-washed */
body.page-id-70 .page-hero-bg::after{ opacity:.45; }
}
/* ============================================================
--- 2026-07-21 final sweep ---
============================================================ */
/* ------------------------------------------------------------
IN-PAGE CTA PHONE BUTTON — clipped on every phone.
The client's phone line must read "Call +44 7983 868507
(please don't Whatsapp)". The theme already carries that string
in three places and each one splits it into TWO nowrap units so
it can drop to a second line:
parts/footer.html — +
patterns/register.php— +
patterns/cta-band.php— for the number, separate below
The in-page CTA is the variant that never got that treatment:
it is ONE anchor carrying the whole string, authored in page
CONTENT and repeated verbatim on 30 published pages (IDs 17,
19-26, 28-33, 37-46, 70-74), so it cannot be split from CSS.
Measured before the fix (Chrome, 390px viewport):
.btn is white-space:nowrap -> intrinsic width 375.5px
.cta-inner content box -> 294px, and it is overflow:hidden
so the right-hand 53.5px — border, radius and the closing ")" —
was clipped away. A width sweep shows this from 320px up to
478px; at >=480px the button fits on one line unaided.
THE FIX, and why it is built this way:
1. white-space:normal is necessary but NOT sufficient. Greedy
line-breaking fills the first line, which measures out as
"Call +44 7983 868507 (please" / "don't Whatsapp)"
(verified) — it breaks the parenthetical, not the number.
2. max-width is therefore the load-bearing part. Text metrics
for this button's font:
"Call +44 7983 868507" 153.0px
"(please don't Whatsapp)" 173.5px
"Call +44 7983 868507 (please" 209.2px
Any content width in [173.5, 209.2) forces exactly the wanted
break: the number still fits on line 1, "(please" no longer
does, and line 2 holds the parenthetical whole. 22.5ch lands
mid-window with ~2ch of slack either side, and ch is used
rather than px so the window tracks the font — if Archivo
fails to load and the sans-serif fallback is used, the text
and the cap scale together. +34px covers the 16px side
padding and 1px border of the border-box.
3. text-wrap:balance is belt-and-braces, not the mechanism. It
independently picks the same split (it minimises the longest
line: 153/173.5 beats 209.2/117.3), so browsers that support
it agree with the cap. Browsers that don't (Safari < 17.5)
still get the correct break from max-width alone — verified.
The number can never break mid-digit: there is no break
opportunity inside "868507", and nothing here sets
overflow-wrap/word-break, which is why neither is used.
Result 320-520px: button 224-227 x 62.6px — taller than the
49.3px single-line version, so the tap target grows, and well
clear of the 44px minimum. >=560px is byte-for-byte the old
rendering (375.5 x 49.3, one line). Verified on pages 17, 20,
32, 70, 73 at 320/360/390/430/480/520/560/768/1200 with
documentElement.scrollWidth == viewport width at every step.
Scoped to .cta-band .cta-actions so it cannot reach the footer,
the register card or the nav. It does also match the cta-band.php
pattern button, whose label is just "Call +44 7983 868507"
(153px) — that fits line 1 unwrapped, so it only picks up the
slightly tighter mobile padding. Intentional.
------------------------------------------------------------ */
@media (max-width:520px){
.cta-band .cta-actions .btn[href^="tel:"]{
white-space:normal;
text-wrap:balance;
max-width:calc(22.5ch + 34px);
padding:11px 16px;
line-height:1.34;
text-align:center;
}
}
/* ------------------------------------------------------------
SMALLEST PHONES (<=420px) — fixed padding and display type
that never reduced.
Two cards were overrunning their container at 320px. Both had the
same cause: an intrinsic minimum that does not shrink, inherited
by a grid/flex item whose default min-width:auto refuses to go
below it. Neither was a stray width or a missing overflow.
1. .stat — .trust-grid is repeat(2,1fr) at <=760px, but "1fr" is
minmax(auto,1fr), so a track cannot go below its item's
min-content. "Berklee" set in Anton at the 2.6rem floor of the
old clamp is 126px and cannot break, plus 2x26px of fixed
padding = 178px. At 320px the wrap gives each track only 140px,
so the tracks resolved to 130.95px + 178px = 308.95px inside a
280px box: the right-hand column ran 9px past the viewport and
its border and rounded corner were shaved by an ancestor's
overflow:hidden. Measured, not guessed.
Fix = make the content fit the track, then release the floor.
Padding 26->12px and the display number down to a clamp whose
vw term tracks the viewport gives "Berklee" 92px against a
116px budget at 320px (~25% headroom, enough to absorb the
sans-serif fallback if Anton is slow). min-width:0 is what
finally lets the two tracks resolve equal — but it is only
safe BECAUSE the type now fits, which is why it lives in here
and not on the base rule: at 761-799px the same grid runs 4-up
with ~171px tracks, and releasing the floor there without
shrinking the type would clip "Berklee" instead. That band is
deliberately left exactly as it was.
2. .cline — the email guitar@malcolmcallus.com is one unbreakable
206px token, so .ct could not shrink, so .cline could not, so
the .reg-info grid item could not: a 304px floor inside a 280px
wrap, 4px past the viewport. overflow-wrap on the mailto row
(above) removes the floor; the tightened padding/gap/icon and a
.92rem value here keep it on ONE line at 320px (186px of 198px
available) so the fix costs nothing visually.
Verified by render at 320 / 360 / 390 px and 1280px desktop, on
the default skin and ?skin=azure, with
documentElement.scrollWidth == viewport width throughout.
------------------------------------------------------------ */
@media (max-width:420px){
.stat{padding:26px 12px;min-width:0}
.stat .num{font-size:clamp(1.9rem,8.5vw,2.4rem)}
.stat .lbl{font-size:.62rem;letter-spacing:.1em}
.cline{padding:14px;gap:12px}
.cline .ci{width:40px;height:40px}
.cline .ct .v{font-size:.92rem}
}
/* ============================================================
--- 2026-07-21 mobile sweep #2 ---
============================================================ */
/* ------------------------------------------------------------
IN-PAGE CTA — the whole panel overflowed to the RIGHT on
phones. Worst on /register/, whose email button carries the
longest label on the site.
Measured at 320px BEFORE the fix (Chrome):
.cta-inner content box 224px (280 - 2x28 padding)
.cta-actions 331.4px -> 79.4px past the edge
.cta-text 329.9px -> 77.9px past the edge
.cta-inner is overflow:hidden, so all of that was CLIPPED, not
scrollable: the h2 read "RATHER TALK IT THROU", the standfirst
lost its last word, and the black "Email me (including your
phone number)" button lost its right border and radius. Still
visibly clipped at 390px (9.4px over). Desktop was never
affected — the panel only overflows below 428px-ish, and the
media query below stops well clear of that.
ROOT CAUSE — and what it is NOT.
The obvious suspect was the recurring one on this site: a flex
item stuck at its default min-width:auto. It was tested and
RULED OUT — adding `min-width:0` to .cta-actions changed the
measurement by exactly 0px at 320/360/390. The floor is not the
flex item's automatic minimum, it is the BUTTON ITSELF: .btn
sets `white-space:nowrap`, so "Email me (including your phone
number)" is one unbreakable 331.4px token. A nowrap inline-flex
box has no smaller form to shrink to, so nothing above it in
the tree can shrink either.
Why the HEADING moved too, which is the part that looks odd:
.cta-text and .cta-actions are the two items of the wrapping
flex container .cta-inner, and they end up on separate flex
lines. The 331.4px button sizes the flex formatting context,
and .cta-text then takes as much of that as its own cap allows
— it measured 329.877px, i.e. exactly its `max-width:36ch`.
So the heading and paragraph were not independently broken;
they were following the button. Verified: releasing the button
alone collapses .cta-text back to 224px with no rule of its
own. That is why this fix touches ONLY the button.
THE FIX: let the label wrap. 224px content box, 2 lines,
224 x 62.6px — a bigger tap target than the 49.3px it replaces
and well over the 44px minimum. The padding/line-height/
text-align match the tel button beside it so the pair reads as
one control group.
INTERACTION WITH THE PROTECTED TEL RULE (above, same 520px
breakpoint): that rule is
.cta-band .cta-actions .btn[href^="tel:"] (0,4,0)
and this one is
.cta-band .cta-actions .btn (0,3,0)
so the tel button keeps its own `max-width:calc(22.5ch + 34px)`
— the load-bearing part of that fix — no matter which order the
two blocks appear in. `max-width:100%` here is a safety valve
for any FUTURE long label and provably does not reach the tel
button: its computed max-width is unchanged at 226.78px.
Re-verified after this change at 320/360/390/430/480/520.
------------------------------------------------------------ */
@media (max-width:520px){
.cta-band .cta-actions .btn{
white-space:normal;
max-width:100%;
padding:11px 16px;
line-height:1.34;
text-align:center;
}
}
/* ------------------------------------------------------------
PRICING TABLE — it scrolled, but nothing SAID so.
.pricing-wrap is overflow-x:auto around a min-width:520px
table, so the mechanism was already correct and the page never
scrolled sideways. The problem was purely that the affordance
was invisible: at 320px the wrap is 278px of a 520px table, so
242px (47%) is off-screen — the header reads "ONE-", the
figures are sliced mid-glyph and the whole "Group · per person"
column simply does not exist until you happen to swipe it.
Measured scrollable range (identical on /fees/,
/group-lessons/ and every instrument page — the table is the
same 520px everywhere):
320px -> 242px hidden 390px -> 172px hidden
520px -> 54px hidden 576px -> 4px hidden
580px and up -> not scrollable at all
Hence the 579px breakpoint: it is the exact measured width at
which the last pixel of overflow disappears, so the cue is
present when and only when something is actually hidden. It
never shows on desktop.
WHY THIS IS AN OVERLAY AND NOT THE USUAL BACKGROUND TRICK.
The stock pure-CSS answer is the local/scroll background
scroll-shadow, which self-hides at both ends for free. It
cannot work here, for two independent reasons:
1. Backgrounds paint BEHIND content. The cells are
transparent over the body colour, so a background ramp
would tint the gap between glyphs and leave the sliced
text just as sharp — it would not read as a fade at all.
2. The shadow would be dark-on-dark. The page is #0a0806 and
the wrap is transparent, so a dark ramp over it is
invisible by construction.
The cue therefore has to sit ON TOP of the content, which means
a positioned box, which — with no markup to add — means a
pseudo-element. The only way to pin one to the VISIBLE edge of
a scroll container (rather than to the far end of its scrolled
content, where absolute positioning would put it) is
position:sticky, so .pricing-wrap becomes a 2-row grid purely
to give the two pseudos a cell to be placed in.
::before row 1, sticky left — the worded hint. Space Mono /
--muted / uppercase micro-label, the idiom already
used for .stat .lbl and td .sub. No new colours.
::after row 2, sticky right — the fade, ramping to --black so
it is correct on both skins, and pointer-events:none
so it can never eat a tap or a drag.
Both then fade to opacity 0 over the last 28% of the scroll via
a scroll-driven animation, so once you have reached the Group
column the cue gets out of the way instead of dimming the
figures you just swiped to. Verified: opacity 1 at scrollLeft 0
and 0 at the end, at 320/390/579.
The @supports wrapper matters. Where scroll-driven animations
are unsupported the timeline is simply inactive, the pseudos
keep their base opacity:1, and the cue is still correct — it
just stays put. Nothing depends on the animation for layout.
At >=580px the pseudos have no `content` at all (verified
computed content:none at 580/768/1280), so desktop keeps the
original block layout and paints nothing extra.
------------------------------------------------------------ */
@media (max-width:579px){
.pricing-wrap{ display:grid; grid-template-columns:auto; }
.pricing-wrap > .pricing-table{ grid-row:2; grid-column:1; }
.pricing-wrap::before{
content:"swipe to see more \2192";
grid-row:1; grid-column:1;
position:sticky; left:0;
justify-self:start;
font-family:"Space Mono",monospace;
font-size:.6rem;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--muted);
padding:10px 14px 6px;
white-space:nowrap;
}
.pricing-wrap::after{
content:"";
grid-row:2; grid-column:1;
position:sticky; right:0;
justify-self:end;
width:clamp(34px,11vw,56px);
pointer-events:none;
background:linear-gradient(to left,var(--black) 12%,var(--fade-clear));
}
@supports (animation-timeline:scroll()){
.pricing-wrap::before,
.pricing-wrap::after{
animation:cgm-swipe-fade linear both;
animation-timeline:scroll(nearest inline);
}
}
}
@keyframes cgm-swipe-fade{
0%,72%{ opacity:1 }
100%{ opacity:0 }
}
/* ============================================================
--- 2026-07-23 footer social icons ---
A row of small monoline brand links in the footer brand column
(Facebook / YouTube / Instagram / X). No third-party plugin or
icon font — the SVGs are inline and paint with currentColor.
Colour comes only from --muted (rest) and --ember (hover), both
of which every skin (default + azure) redefines, so the icons
track the active skin automatically. Mirrors the .foot-col link
idiom: muted at rest, accent + lift on hover/focus.
============================================================ */
.social-icons{
display:flex;
align-items:center;
gap:4px; /* 2026-08-03: shrunk from 16px — the 12px padding added below
already provides that spacing, so the icons stay visually
where they were while the tap zone grows */
margin-top:18px;
}
/* 2026-08-03: 12px padding brings the 20px svg's hit box to 44x44
(WCAG 2.2 AA min is 24x24; this site's own standard elsewhere is 44x44) */
.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
padding:12px;
color:var(--muted);
transition:color .2s var(--ease),transform .2s var(--ease);
}
.social-icons a:hover,
.social-icons a:focus-visible{
color:var(--ember);
transform:translateY(-2px);
}
.social-icons svg{
width:20px;
height:20px;
display:block;
fill:currentColor;
}
/* ============================================================
2026-07-23 Freebies resource-card links (page 30 / D3)
Each .fcard gained a foot "Open →" anchor. Its ::after also
stretches across the whole card, so the entire card is one
click target. .fcard already sets position:relative +
overflow:hidden. Colours come only from theme vars /
currentColor, so the default (ember) and ?skin=azure skins
both track automatically — nothing is hard-coded.
============================================================ */
.fcard{cursor:pointer}
.fcard-open{
display:inline-flex;align-items:center;gap:.45em;
width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);
font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ember);text-decoration:none;
transition:color .25s var(--ease);
}
.fcard-open .arw{transition:transform .25s var(--ease)}
.fcard:hover .fcard-open{color:var(--amber)}
.fcard:hover .fcard-open .arw{transform:translateX(4px)}
/* stretch the foot link across the whole card (nearest positioned
ancestor is .fcard) so a click anywhere on the card opens it */
.fcard-open::after{content:"";position:absolute;inset:0;z-index:1}
.fcard-open:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
/* ============================================================
GEAR CARDS — UNIFORM PHOTO FRAME (GUITARS & BASSES + STUDIO KIT)
------------------------------------------------------------
Client request 2026-07-25 (Malcolm): "Can all guitar/bass
instrument pics be same size?"
Extended 2026-07-27 (Malcolm): "Do for studio kit" — same
treatment applied to the Studio & teaching kit section
(#gear-kit) alongside Guitars & basses (#gear-guitars).
The source photos have wildly different aspect ratios — the
guitars run 0.42 -> 0.75 w:h, and the studio-kit shots are
landscape (Alesis ~1.5, Behringer ~1.33) — so with the page's
default `.gear-thumb img{height:auto}` every card rendered its
photo at a different height.
Fix: give the .gear-thumb frame inside these sections a FIXED
height and let the photo object-fit:contain inside it. Every
photo now renders at the same frame height, centred and
letterboxed on the frame's own dark backdrop.
NOTHING IS CROPPED — Malcolm previously asked to "leave the
images as is", so `contain` (not `cover`) is deliberate: the
full image content is preserved for every item — guitar or
gear — only the display frame is normalised.
Scoped via :has(#gear-guitars, #gear-kit) so the ukulele
section (mixed portrait/landscape, not requested) stays
untouched, and so this lives in the theme rather than in the
page content Malcolm edits by hand in the block editor.
Specificity (1,3,x) sits above the page's inline
#gear-media-styles block, which loads later in document order.
============================================================ */
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{
height:400px;
}
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb img{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
}
@media(max-width:640px){
section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{height:340px}
}
/* ============================================================
2026-08-05 CSS-UX PASS (audit refs C-7 H-22 H-23 H-59 M-51
M-55 M-56 M-57 M-58 L-38 L-40 L-45 L-47)
------------------------------------------------------------
NOTE FOR THE SECOND PASS / OTHER AGENT — rules this pass touched
IN PLACE, above this block, each tagged "UX-2026-08-05":
html scroll-padding-top (L-38)
.nav-inner gap 24 -> 18 (C-7)
.brand .sub 8.96px -> 12px, tracking(M-57)
nav.links gap 6 -> 2 (C-7)
nav.links a padding, white-space (C-7/M-58)
nav.links a::after inset 14 -> 10 (C-7)
.hero padding-top ceiling (H-23)
.hero-eyebrow/.hero-strap margins (H-23)
.hero h1 clamp ceiling + lh (H-23/H-59)
.hero-sub margin + max-width (H-23)
.hero-cta margin-top (H-23)
.hero-tel a inline-flex chip (M-56)
.foot-col h4 size + line-height (L-40/M-57)
.foot-col a 44px flex row (M-55)
.foot-brand p a[tel|mailto] inline-flex 44px (M-56)
@media 760 -> 1200 SPLIT nav rules only (C-7)
Everything below is additive and appended, so it can be reviewed or
reverted as one contiguous unit. skin-azure.css has one paired split
(nav drawer, C-7) and one appended block (L-47).
============================================================ */
/* ------------------------------------------------------------
H-22 — /fees/ PRICING TABLE ON PHONES: restack, don't scroll.
The table is 3 columns (Lesson | One-to-one | Group · per person) and
min-width:520px inside a .pricing-wrap that measured 348px at a 390px
viewport — 172px, the whole "Group · per person" column, off-screen.
That column is where the group prices live, so the four group-course rows
showed a mobile visitor nothing but the literal em-dash placeholder that
sits in their One-to-one cell:
Group course · 6 × 50 min — £100 as a
card below 640px makes all three columns visible with no horizontal scroll
at any width: below 640px the rows are stacked, and above it the wrap is
already wider than the 520px table (>=577px at 641px), so it never
scrolled there either. That is why the swipe hint, the edge fade, and the
tabindex/role/aria-label the audit asks for are NOT added — a scroll
container that cannot scroll should not advertise that it can, and a
focusable region with nothing to scroll is a keyboard trap for no gain.
The existing <=579px cue is switched off below for the same reason.
The column labels are generated from nth-child rather than a data-label
attribute, because the markup has none (verified: 0 td[data-label] on
/fees/). This is safe but positional: it hard-codes "One-to-one" and
"Group · per person" to columns 2 and 3.
CONTENT/TEMPLATE AGENT: adding data-label="…" to the s and swapping
the two content:"" values for content:attr(data-label) would make this
self-maintaining and survive a column being added or reordered. Until
then, if the table's columns change, THIS BLOCK MUST CHANGE WITH IT.
The label is positioned absolutely rather than made a flex/grid sibling on
purpose: cells like £404 for £150 hold
two inline children, and any flex/grid treatment of the would promote
the bare "£40" text node and the into separate items and blow them
apart with space-between. Absolute positioning leaves each cell's inline
flow completely untouched.
------------------------------------------------------------ */
@media (max-width:640px){
/* the <=579px swipe hint + fade are now false — nothing scrolls */
.pricing-wrap::before,
.pricing-wrap::after{content:none}
.pricing-wrap{display:block;overflow-x:visible;border:0;border-radius:0}
.pricing-table{display:block;width:100%;min-width:0}
.pricing-table thead{display:none}
.pricing-table tbody{display:block}
.pricing-table tr{
display:block;
margin-bottom:12px;
border:1px solid var(--edge);border-radius:12px;
background:linear-gradient(180deg,var(--char),var(--coal));
overflow:hidden;
}
.pricing-table tbody tr:last-child{margin-bottom:0}
.pricing-table td{
display:block;position:relative;
padding:10px 16px 10px 45%;
text-align:right;
border-bottom:0;
}
/* row 1 of each card = the lesson itself, full width, no label */
.pricing-table td:first-child{
padding:13px 16px 11px;
text-align:left;
font-weight:700;color:var(--bone);
border-bottom:1px solid var(--edge);
}
.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table tbody tr:last-child td:first-child{border-bottom:1px solid var(--edge)}
.pricing-table td:nth-child(2)::before{content:"One-to-one"}
.pricing-table td:nth-child(3)::before{content:"Group · per person"}
.pricing-table td:nth-child(2)::before,
.pricing-table td:nth-child(3)::before{
position:absolute;left:16px;top:11px;width:38%;
text-align:left;
font-family:"Space Mono",monospace;font-size:12px;line-height:1.3;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* the block sub-note under an amount keeps to the value side */
.pricing-table td .sub{text-align:right}
}
/* ------------------------------------------------------------
M-57 — MINIMUM TYPE SIZES.
Two floors, as specified: 12px for decorative labels, 14px for text that
carries meaning (prices, credentials, phone labels). Collected here rather
than edited into ~14 scattered rules so the whole policy is reviewable in
one place; each selector's original size is noted beside it. Source order
puts this after every base rule it overrides, and after the <=420px block,
which is deliberate — see .stat .lbl below.
------------------------------------------------------------ */
/* 12px — decorative */
.kicker{font-size:12px} /* was .72rem 11.52px */
.gigcard .gc-tag{font-size:12px} /* was .66rem 10.56px */
.fmt .pin{font-size:12px} /* was .66rem 10.56px */
.card .idx{font-size:12px} /* was .72rem 11.52px */
.about-media .badge{font-size:12px} /* was .68rem 10.88px */
.form-note{font-size:12px} /* was .66rem 10.56px */
.price .plan{font-size:12px} /* was .74rem 11.84px */
.foot-bottom{font-size:12px} /* was .70rem 11.20px */
.quote .who span{font-size:12px} /* was .72rem 11.52px */
/* Found by re-sweeping the rendered DOM of the interior pages after the first
pass — M-57 is a sitewide floor, and these three were the only elements
still under it. .arw is the "→" glyph, which inherits from .fcard-open. */
.fcard-open{font-size:12px} /* was .72rem 11.52px */
.prose figure figcaption{font-size:12px} /* was .72rem 11.52px */
.media-grid figcaption{font-size:12px} /* was .68rem 10.88px */
.prose blockquote cite,
.prose blockquote footer{font-size:12px} /* was .74rem 11.84px */
/* Breadcrumb —
below The in-page CTA is the variant that never got that treatment: it is ONE anchor carrying the whole string, authored in page CONTENT and repeated verbatim on 30 published pages (IDs 17, 19-26, 28-33, 37-46, 70-74), so it cannot be split from CSS. Measured before the fix (Chrome, 390px viewport): .btn is white-space:nowrap -> intrinsic width 375.5px .cta-inner content box -> 294px, and it is overflow:hidden so the right-hand 53.5px — border, radius and the closing ")" — was clipped away. A width sweep shows this from 320px up to 478px; at >=480px the button fits on one line unaided. THE FIX, and why it is built this way: 1. white-space:normal is necessary but NOT sufficient. Greedy line-breaking fills the first line, which measures out as "Call +44 7983 868507 (please" / "don't Whatsapp)" (verified) — it breaks the parenthetical, not the number. 2. max-width is therefore the load-bearing part. Text metrics for this button's font: "Call +44 7983 868507" 153.0px "(please don't Whatsapp)" 173.5px "Call +44 7983 868507 (please" 209.2px Any content width in [173.5, 209.2) forces exactly the wanted break: the number still fits on line 1, "(please" no longer does, and line 2 holds the parenthetical whole. 22.5ch lands mid-window with ~2ch of slack either side, and ch is used rather than px so the window tracks the font — if Archivo fails to load and the sans-serif fallback is used, the text and the cap scale together. +34px covers the 16px side padding and 1px border of the border-box. 3. text-wrap:balance is belt-and-braces, not the mechanism. It independently picks the same split (it minimises the longest line: 153/173.5 beats 209.2/117.3), so browsers that support it agree with the cap. Browsers that don't (Safari < 17.5) still get the correct break from max-width alone — verified. The number can never break mid-digit: there is no break opportunity inside "868507", and nothing here sets overflow-wrap/word-break, which is why neither is used. Result 320-520px: button 224-227 x 62.6px — taller than the 49.3px single-line version, so the tap target grows, and well clear of the 44px minimum. >=560px is byte-for-byte the old rendering (375.5 x 49.3, one line). Verified on pages 17, 20, 32, 70, 73 at 320/360/390/430/480/520/560/768/1200 with documentElement.scrollWidth == viewport width at every step. Scoped to .cta-band .cta-actions so it cannot reach the footer, the register card or the nav. It does also match the cta-band.php pattern button, whose label is just "Call +44 7983 868507" (153px) — that fits line 1 unwrapped, so it only picks up the slightly tighter mobile padding. Intentional. ------------------------------------------------------------ */ @media (max-width:520px){ .cta-band .cta-actions .btn[href^="tel:"]{ white-space:normal; text-wrap:balance; max-width:calc(22.5ch + 34px); padding:11px 16px; line-height:1.34; text-align:center; } } /* ------------------------------------------------------------ SMALLEST PHONES (<=420px) — fixed padding and display type that never reduced. Two cards were overrunning their container at 320px. Both had the same cause: an intrinsic minimum that does not shrink, inherited by a grid/flex item whose default min-width:auto refuses to go below it. Neither was a stray width or a missing overflow. 1. .stat — .trust-grid is repeat(2,1fr) at <=760px, but "1fr" is minmax(auto,1fr), so a track cannot go below its item's min-content. "Berklee" set in Anton at the 2.6rem floor of the old clamp is 126px and cannot break, plus 2x26px of fixed padding = 178px. At 320px the wrap gives each track only 140px, so the tracks resolved to 130.95px + 178px = 308.95px inside a 280px box: the right-hand column ran 9px past the viewport and its border and rounded corner were shaved by an ancestor's overflow:hidden. Measured, not guessed. Fix = make the content fit the track, then release the floor. Padding 26->12px and the display number down to a clamp whose vw term tracks the viewport gives "Berklee" 92px against a 116px budget at 320px (~25% headroom, enough to absorb the sans-serif fallback if Anton is slow). min-width:0 is what finally lets the two tracks resolve equal — but it is only safe BECAUSE the type now fits, which is why it lives in here and not on the base rule: at 761-799px the same grid runs 4-up with ~171px tracks, and releasing the floor there without shrinking the type would clip "Berklee" instead. That band is deliberately left exactly as it was. 2. .cline — the email guitar@malcolmcallus.com is one unbreakable 206px token, so .ct could not shrink, so .cline could not, so the .reg-info grid item could not: a 304px floor inside a 280px wrap, 4px past the viewport. overflow-wrap on the mailto row (above) removes the floor; the tightened padding/gap/icon and a .92rem value here keep it on ONE line at 320px (186px of 198px available) so the fix costs nothing visually. Verified by render at 320 / 360 / 390 px and 1280px desktop, on the default skin and ?skin=azure, with documentElement.scrollWidth == viewport width throughout. ------------------------------------------------------------ */ @media (max-width:420px){ .stat{padding:26px 12px;min-width:0} .stat .num{font-size:clamp(1.9rem,8.5vw,2.4rem)} .stat .lbl{font-size:.62rem;letter-spacing:.1em} .cline{padding:14px;gap:12px} .cline .ci{width:40px;height:40px} .cline .ct .v{font-size:.92rem} } /* ============================================================ --- 2026-07-21 mobile sweep #2 --- ============================================================ */ /* ------------------------------------------------------------ IN-PAGE CTA — the whole panel overflowed to the RIGHT on phones. Worst on /register/, whose email button carries the longest label on the site. Measured at 320px BEFORE the fix (Chrome): .cta-inner content box 224px (280 - 2x28 padding) .cta-actions 331.4px -> 79.4px past the edge .cta-text 329.9px -> 77.9px past the edge .cta-inner is overflow:hidden, so all of that was CLIPPED, not scrollable: the h2 read "RATHER TALK IT THROU", the standfirst lost its last word, and the black "Email me (including your phone number)" button lost its right border and radius. Still visibly clipped at 390px (9.4px over). Desktop was never affected — the panel only overflows below 428px-ish, and the media query below stops well clear of that. ROOT CAUSE — and what it is NOT. The obvious suspect was the recurring one on this site: a flex item stuck at its default min-width:auto. It was tested and RULED OUT — adding `min-width:0` to .cta-actions changed the measurement by exactly 0px at 320/360/390. The floor is not the flex item's automatic minimum, it is the BUTTON ITSELF: .btn sets `white-space:nowrap`, so "Email me (including your phone number)" is one unbreakable 331.4px token. A nowrap inline-flex box has no smaller form to shrink to, so nothing above it in the tree can shrink either. Why the HEADING moved too, which is the part that looks odd: .cta-text and .cta-actions are the two items of the wrapping flex container .cta-inner, and they end up on separate flex lines. The 331.4px button sizes the flex formatting context, and .cta-text then takes as much of that as its own cap allows — it measured 329.877px, i.e. exactly its `max-width:36ch`. So the heading and paragraph were not independently broken; they were following the button. Verified: releasing the button alone collapses .cta-text back to 224px with no rule of its own. That is why this fix touches ONLY the button. THE FIX: let the label wrap. 224px content box, 2 lines, 224 x 62.6px — a bigger tap target than the 49.3px it replaces and well over the 44px minimum. The padding/line-height/ text-align match the tel button beside it so the pair reads as one control group. INTERACTION WITH THE PROTECTED TEL RULE (above, same 520px breakpoint): that rule is .cta-band .cta-actions .btn[href^="tel:"] (0,4,0) and this one is .cta-band .cta-actions .btn (0,3,0) so the tel button keeps its own `max-width:calc(22.5ch + 34px)` — the load-bearing part of that fix — no matter which order the two blocks appear in. `max-width:100%` here is a safety valve for any FUTURE long label and provably does not reach the tel button: its computed max-width is unchanged at 226.78px. Re-verified after this change at 320/360/390/430/480/520. ------------------------------------------------------------ */ @media (max-width:520px){ .cta-band .cta-actions .btn{ white-space:normal; max-width:100%; padding:11px 16px; line-height:1.34; text-align:center; } } /* ------------------------------------------------------------ PRICING TABLE — it scrolled, but nothing SAID so. .pricing-wrap is overflow-x:auto around a min-width:520px table, so the mechanism was already correct and the page never scrolled sideways. The problem was purely that the affordance was invisible: at 320px the wrap is 278px of a 520px table, so 242px (47%) is off-screen — the header reads "ONE-", the figures are sliced mid-glyph and the whole "Group · per person" column simply does not exist until you happen to swipe it. Measured scrollable range (identical on /fees/, /group-lessons/ and every instrument page — the table is the same 520px everywhere): 320px -> 242px hidden 390px -> 172px hidden 520px -> 54px hidden 576px -> 4px hidden 580px and up -> not scrollable at all Hence the 579px breakpoint: it is the exact measured width at which the last pixel of overflow disappears, so the cue is present when and only when something is actually hidden. It never shows on desktop. WHY THIS IS AN OVERLAY AND NOT THE USUAL BACKGROUND TRICK. The stock pure-CSS answer is the local/scroll background scroll-shadow, which self-hides at both ends for free. It cannot work here, for two independent reasons: 1. Backgrounds paint BEHIND content. The cells are transparent over the body colour, so a background ramp would tint the gap between glyphs and leave the sliced text just as sharp — it would not read as a fade at all. 2. The shadow would be dark-on-dark. The page is #0a0806 and the wrap is transparent, so a dark ramp over it is invisible by construction. The cue therefore has to sit ON TOP of the content, which means a positioned box, which — with no markup to add — means a pseudo-element. The only way to pin one to the VISIBLE edge of a scroll container (rather than to the far end of its scrolled content, where absolute positioning would put it) is position:sticky, so .pricing-wrap becomes a 2-row grid purely to give the two pseudos a cell to be placed in. ::before row 1, sticky left — the worded hint. Space Mono / --muted / uppercase micro-label, the idiom already used for .stat .lbl and td .sub. No new colours. ::after row 2, sticky right — the fade, ramping to --black so it is correct on both skins, and pointer-events:none so it can never eat a tap or a drag. Both then fade to opacity 0 over the last 28% of the scroll via a scroll-driven animation, so once you have reached the Group column the cue gets out of the way instead of dimming the figures you just swiped to. Verified: opacity 1 at scrollLeft 0 and 0 at the end, at 320/390/579. The @supports wrapper matters. Where scroll-driven animations are unsupported the timeline is simply inactive, the pseudos keep their base opacity:1, and the cue is still correct — it just stays put. Nothing depends on the animation for layout. At >=580px the pseudos have no `content` at all (verified computed content:none at 580/768/1280), so desktop keeps the original block layout and paints nothing extra. ------------------------------------------------------------ */ @media (max-width:579px){ .pricing-wrap{ display:grid; grid-template-columns:auto; } .pricing-wrap > .pricing-table{ grid-row:2; grid-column:1; } .pricing-wrap::before{ content:"swipe to see more \2192"; grid-row:1; grid-column:1; position:sticky; left:0; justify-self:start; font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); padding:10px 14px 6px; white-space:nowrap; } .pricing-wrap::after{ content:""; grid-row:2; grid-column:1; position:sticky; right:0; justify-self:end; width:clamp(34px,11vw,56px); pointer-events:none; background:linear-gradient(to left,var(--black) 12%,var(--fade-clear)); } @supports (animation-timeline:scroll()){ .pricing-wrap::before, .pricing-wrap::after{ animation:cgm-swipe-fade linear both; animation-timeline:scroll(nearest inline); } } } @keyframes cgm-swipe-fade{ 0%,72%{ opacity:1 } 100%{ opacity:0 } } /* ============================================================ --- 2026-07-23 footer social icons --- A row of small monoline brand links in the footer brand column (Facebook / YouTube / Instagram / X). No third-party plugin or icon font — the SVGs are inline and paint with currentColor. Colour comes only from --muted (rest) and --ember (hover), both of which every skin (default + azure) redefines, so the icons track the active skin automatically. Mirrors the .foot-col link idiom: muted at rest, accent + lift on hover/focus. ============================================================ */ .social-icons{ display:flex; align-items:center; gap:4px; /* 2026-08-03: shrunk from 16px — the 12px padding added below already provides that spacing, so the icons stay visually where they were while the tap zone grows */ margin-top:18px; } /* 2026-08-03: 12px padding brings the 20px svg's hit box to 44x44 (WCAG 2.2 AA min is 24x24; this site's own standard elsewhere is 44x44) */ .social-icons a{ display:inline-flex; align-items:center; justify-content:center; margin:0; padding:12px; color:var(--muted); transition:color .2s var(--ease),transform .2s var(--ease); } .social-icons a:hover, .social-icons a:focus-visible{ color:var(--ember); transform:translateY(-2px); } .social-icons svg{ width:20px; height:20px; display:block; fill:currentColor; } /* ============================================================ 2026-07-23 Freebies resource-card links (page 30 / D3) Each .fcard gained a foot "Open →" anchor. Its ::after also stretches across the whole card, so the entire card is one click target. .fcard already sets position:relative + overflow:hidden. Colours come only from theme vars / currentColor, so the default (ember) and ?skin=azure skins both track automatically — nothing is hard-coded. ============================================================ */ .fcard{cursor:pointer} .fcard-open{ display:inline-flex;align-items:center;gap:.45em; width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge); font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ember);text-decoration:none; transition:color .25s var(--ease); } .fcard-open .arw{transition:transform .25s var(--ease)} .fcard:hover .fcard-open{color:var(--amber)} .fcard:hover .fcard-open .arw{transform:translateX(4px)} /* stretch the foot link across the whole card (nearest positioned ancestor is .fcard) so a click anywhere on the card opens it */ .fcard-open::after{content:"";position:absolute;inset:0;z-index:1} .fcard-open:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px} /* ============================================================ GEAR CARDS — UNIFORM PHOTO FRAME (GUITARS & BASSES + STUDIO KIT) ------------------------------------------------------------ Client request 2026-07-25 (Malcolm): "Can all guitar/bass instrument pics be same size?" Extended 2026-07-27 (Malcolm): "Do for studio kit" — same treatment applied to the Studio & teaching kit section (#gear-kit) alongside Guitars & basses (#gear-guitars). The source photos have wildly different aspect ratios — the guitars run 0.42 -> 0.75 w:h, and the studio-kit shots are landscape (Alesis ~1.5, Behringer ~1.33) — so with the page's default `.gear-thumb img{height:auto}` every card rendered its photo at a different height. Fix: give the .gear-thumb frame inside these sections a FIXED height and let the photo object-fit:contain inside it. Every photo now renders at the same frame height, centred and letterboxed on the frame's own dark backdrop. NOTHING IS CROPPED — Malcolm previously asked to "leave the images as is", so `contain` (not `cover`) is deliberate: the full image content is preserved for every item — guitar or gear — only the display frame is normalised. Scoped via :has(#gear-guitars, #gear-kit) so the ukulele section (mixed portrait/landscape, not requested) stays untouched, and so this lives in the theme rather than in the page content Malcolm edits by hand in the block editor. Specificity (1,3,x) sits above the page's inline #gear-media-styles block, which loads later in document order. ============================================================ */ section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{ height:400px; } section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; } @media(max-width:640px){ section.band:has(#gear-guitars, #gear-kit) .fcard .gear-thumb{height:340px} } /* ============================================================ 2026-08-05 CSS-UX PASS (audit refs C-7 H-22 H-23 H-59 M-51 M-55 M-56 M-57 M-58 L-38 L-40 L-45 L-47) ------------------------------------------------------------ NOTE FOR THE SECOND PASS / OTHER AGENT — rules this pass touched IN PLACE, above this block, each tagged "UX-2026-08-05": html scroll-padding-top (L-38) .nav-inner gap 24 -> 18 (C-7) .brand .sub 8.96px -> 12px, tracking(M-57) nav.links gap 6 -> 2 (C-7) nav.links a padding, white-space (C-7/M-58) nav.links a::after inset 14 -> 10 (C-7) .hero padding-top ceiling (H-23) .hero-eyebrow/.hero-strap margins (H-23) .hero h1 clamp ceiling + lh (H-23/H-59) .hero-sub margin + max-width (H-23) .hero-cta margin-top (H-23) .hero-tel a inline-flex chip (M-56) .foot-col h4 size + line-height (L-40/M-57) .foot-col a 44px flex row (M-55) .foot-brand p a[tel|mailto] inline-flex 44px (M-56) @media 760 -> 1200 SPLIT nav rules only (C-7) Everything below is additive and appended, so it can be reviewed or reverted as one contiguous unit. skin-azure.css has one paired split (nav drawer, C-7) and one appended block (L-47). ============================================================ */ /* ------------------------------------------------------------ H-22 — /fees/ PRICING TABLE ON PHONES: restack, don't scroll. The table is 3 columns (Lesson | One-to-one | Group · per person) and min-width:520px inside a .pricing-wrap that measured 348px at a 390px viewport — 172px, the whole "Group · per person" column, off-screen. That column is where the group prices live, so the four group-course rows showed a mobile visitor nothing but the literal em-dash placeholder that sits in their One-to-one cell: