/* ==========================================================================
WSKF Australia - a11y.css (Phase 1.1 accessibility layer)
Loaded LAST on the homepage and on every inner page. It changes no layout
and no brand colour. It does two things only:
1. Small red TEXT uses a surface-specific accessible red, measured with
the WCAG 2.x relative-luminance formula (build/contrast.py):
token value on #F4F3F1 on #E7E6E4 on #FFFFFF on #000 on #121212
--red (brand) #E4191E 4.25 3.78 4.71 4.46 3.98
--red-text-light #C8161A 5.28 4.70 5.86 - -
--red-text-dark #EA3C40 - - - 5.22 4.66
The brand red #E4191E is untouched everywhere else: buttons, red
panels, large display type, large indexes, icons, rules, logo.
Normal-size text is < 24px, or < 18.66px when bold (WCAG "large text").
2. Mega-menu caret buttons get a larger interactive box without moving a
single pixel of the approved navbar (see section 2).
Remove this file (one per page) to return to V2.11.2 exactly.
========================================================================== */
:root{
--red-text-light:#C8161A;
--red-text-dark:#EA3C40;
--red-text:var(--red-text-light);
}
/* Dark surfaces switch the token. */
.env-ink,.ip-sec--ink,.ip-hero--hub,.ip-cta,.ip-finder,.ip-clubcard,
.footer,.clubs,.reel,.japan,.finale,.rail,.enq__head,.stories__feature,.why{
--red-text:var(--red-text-dark);
}
/* ---- 1. Small red text ------------------------------------------------ */
.cap--red,
.chapno,
.ln:not(.ln--light),
.nav__item--current > .nav__group > .nav__link,
.nav__link:hover,
.faq__item summary:hover,
.faq__item[open] summary,
.enq__note a,
.faq__help a,
.footer__title,
.footer__sub,
.panel .pgroup__title,
.ip-prog__go,
.ip-person__role,
.ip-quote footer a,
.ip-trio h3 .idx,
.ip-pindex__here,
.ip-pindex__here .idx,
.ip-rail__note a,
.ip-crumbs a:hover,
.ip-quote .ip-statement em,
.reel__copy .chapno,
.agerow__n,
.why__item .idx{
color:var(--red-text);
}
/* Text set on the red brand panel: pure white (4.71:1) instead of #FDEDED (4.15:1). */
.why__stat > span{ color:#FFFFFF; }
/* Hover on .ln already darkens to the approved deep red (7.3:1 on paper). */
.ln:not(.ln--light):hover{ color:var(--red-deep); }
.env-ink .ln:not(.ln--light):hover,.ip-sec--ink .ln:not(.ln--light):hover{ color:var(--white); }
/* ---- 2. Mega-menu caret targets ----------------------------------------
Measured V2.11.2 caret boxes: 15 to 16px wide, 46px tall, with the link's
own inline padding on the left and the next item's padding on the right.
The caret button now absorbs exactly that whitespace: its padding grows
by --cl / --cr and equal negative margins pull it back, so the
group, the underline, the caret glyph and every label stay exactly where
they were. The button sits above the neighbouring link padding
(z-index), never above any label text.
Result: 28px (1280 to 1440) and 32.9px (1441+) wide, 46px tall, measured;
every other navbar element measured identical to V2.11.2.
A wider exclusive box would have to cover the neighbouring words, which
would steal clicks from the links; see docs/phase-1-1-accessibility.md. */
@media (min-width:1280px){
.nav__toggle{
--cl:.5rem; --cr:.6rem; /* link padding-right; list gap + next link padding-left */
position:relative; z-index:2;
margin-left:calc(-1 * var(--cl)); margin-right:calc(-1 * var(--cr));
padding-left:calc(.1rem + var(--cl)); padding-right:calc(.35rem + var(--cr));
}
}
@media (min-width:1280px) and (max-width:1440px){
/* the approved header tightens link padding to .3rem here; the left edge
also takes the trailing letter-space of the label (.08em, about 1px) */
.nav__toggle{ --cl:.36rem; --cr:.4rem; padding-left:calc(.3rem + var(--cl)); padding-right:calc(.18rem + var(--cr)); }
}
/* ==========================================================================
3. WAVE 3.2: ENLARGED-TEXT REFLOW (200% text on phones)
Rule used throughout this section, "bounded growth":
size = min( , max( , ) )
At normal text size the rem and px values are identical, so the result is
exactly the baseline size: nothing moves. When the reader enlarges text,
the size grows with them until it reaches , a limit derived from the
width actually available, and never drops below the baseline size. Words
therefore stay whole and inside the screen, instead of being clipped,
pushed off the edge or cut in half.
========================================================================== */
/* 3a. Page gutters are spacing, not text: they stay at their baseline width
instead of doubling and squeezing the text column. */
:root{ --gutter:min(clamp(1.15rem,3.6vw,3.25rem), max(clamp(18.4px,3.6vw,52px), 5vw)); }
/* 3b. Mobile header. The bar holds only the logo, "WSKF AUSTRALIA" and
Menu, and it must stay one bar. Its spacing keeps the baseline pixel
values; the wordmark and the Menu label grow with the reader's text size
up to what the bar can hold, so the full name is never truncated.
Every breakpoint of the baseline header is restated with its own value.
The bar's side padding comes from the (already bounded) page gutter,
except at 340px and below, where the baseline header uses .5rem. */
@media (max-width:1279px){
.brand__name{ font-size:min(.92rem, max(14.72px, 2.6vw)); }
.menu-btn{ padding-inline:min(1rem, 16px); }
}
@media (max-width:430px){
.brand__name{ font-size:min(.86rem, max(13.76px, 4.4vw)); }
.menu-btn{ padding-inline:min(.75rem, 12px); font-size:min(.72rem, max(11.52px, 3.1vw)); }
}
@media (max-width:760px){
.header__bar{ gap:min(.6rem, 9.6px); }
.brand{ gap:min(.6rem, 9.6px); }
.brand__name{ font-size:min(1.06rem, max(16.96px, 4.4vw)); letter-spacing:.015em; }
.menu-btn{ padding-inline:min(.95rem, 15.2px); gap:min(.42rem, 6.72px); font-size:min(.75rem, max(12px, 3.1vw)); }
}
@media (max-width:360px){
.header__bar{ gap:min(.45rem, 7.2px); }
.brand{ gap:min(.5rem, 8px); }
.brand__name{ font-size:min(.84rem, max(13.44px, 4.2vw)); letter-spacing:.008em; }
.menu-btn{ padding-inline:min(.65rem, 10.4px); gap:min(.35rem, 5.6px); font-size:min(.68rem, max(10.88px, 3.3vw)); }
}
@media (max-width:340px){
.header{ padding-inline:min(.5rem, 8px); }
.header__bar{ gap:min(.35rem, 5.6px); }
.header .brand{ gap:min(.4rem, 6.4px); }
.header .brand__name{ font-size:min(.8rem, max(12.8px, 4.2vw)); }
.menu-btn{ padding-inline:min(.55rem, 8.8px); }
}
/* Between 341 and 430px the baseline bar leaves "WSKF AUSTRALIA" only just
enough room at its baseline size. When text is enlarged (and only then)
the bar's side padding and the two small gaps give up a few pixels so the
full name still fits. --enlarged is 0px at the default text size and
1px as soon as the reader's text size is larger, so nothing moves at
normal size. */
:root{ --enlarged:clamp(0px, (1rem - 16px) * 1000, 1px); }
@media (min-width:341px) and (max-width:430px){
.header{
padding-left:max(calc(var(--gutter) - var(--enlarged) * 9), env(safe-area-inset-left, 0px));
padding-right:max(calc(var(--gutter) - var(--enlarged) * 9), env(safe-area-inset-right, 0px));
}
.header__bar{ column-gap:calc(min(.6rem, 9.6px) - var(--enlarged) * 3.6); }
.brand{ column-gap:calc(min(.6rem, 9.6px) - var(--enlarged) * 3.6); }
}
@media (min-width:341px) and (max-width:360px){
.header__bar{ column-gap:calc(min(.45rem, 7.2px) - var(--enlarged) * 2); }
.brand{ column-gap:calc(min(.5rem, 8px) - var(--enlarged) * 2); }
}
/* 3c. Footer social links: they may wrap onto a second row instead of
running off the screen. At normal size they already fit on one row. */
.footer__social{ flex-wrap:wrap; max-width:100%; }
.footer__social a{ max-width:100%; }
/* 3d. Enquiry card (shared). Its paddings keep their baseline widths, the
age summary and the Continue label grow with the reader's text up to the
width of their own box, so "Choose age or family", an age range or
"Continue" is never cut off. The layout and the flow are unchanged. */
.enq__head{ padding-inline:min(clamp(1.15rem,2.4vw,2.1rem), clamp(18.4px,2.4vw,33.6px)); }
.enq__body{ padding-inline:min(clamp(1.15rem,2.4vw,2rem), clamp(18.4px,2.4vw,32px)); }
.console__cell{ padding-inline:min(clamp(.75rem,1.4vw,1.1rem), clamp(12px,1.4vw,17.6px)); }
.agepanel{ padding-inline:min(clamp(.75rem,1.4vw,1.1rem), clamp(12px,1.4vw,17.6px)); }
.agepick{ padding-inline:min(.85rem, 13.6px); gap:min(.75rem, 12px); font-size:min(.95rem, max(15.2px, 4.6vw)); }
.agepick .i{ width:min(.85rem, 13.6px); height:min(.85rem, 13.6px); }
.console__cell--go .btn{ padding-inline:min(1.5rem, 24px); font-size:min(.85rem, max(13.6px, 8vw)); }
/* 3e. Width available to text in a full-width page column. Used below as
the limit for enlarged display type: a heading may grow with the
reader's text size until its longest word (measured in ems) fills this
width, and no further. */
:root{ --avail:calc(100vw - 2 * var(--gutter)); }
/* 3f. Shared heading sizes (tokens). Longest section-heading words are
under 7em ("expansion", "questions", "karateka's", "awareness"). */
:root{
--t-xl:min(clamp(1.6rem,3.4vw,2.9rem), max(clamp(25.6px,3.4vw,46.4px), calc(var(--avail) / 7)));
--t-lg:min(clamp(1.45rem,2.5vw,2.1rem), max(clamp(23.2px,2.5vw,33.6px), calc(var(--avail) / 7)));
}
/* Sections whose heading holds a longer word ("perseverance",
"progression", "understand,"): the same rule with a lower limit. */
#enquiry .ip-head h2, #pathway .ip-head h2, #flow .ip-head h2{
font-size:min(clamp(1.6rem,3.4vw,2.9rem), max(clamp(25.6px,3.4vw,46.4px), calc(var(--avail) / 8.5)));
}
/* 3g. Principle hero titles (Respect and the principle pages). The longest
word is "Awareness" (6.4em). Perseverance keeps its own Wave 3.1 rule,
which is more specific. */
.ip-hero--principle h1{ font-size:min(clamp(2.6rem,11vw,9.4rem), max(clamp(41.6px,11vw,150.4px), calc(var(--avail) / 6.6))); }
/* Awareness of others uses the split principle hero (.ip-phero), whose
title sizes are restated here with the same limit. */
@media (min-width:900px){ .ip-phero h1{ font-size:min(clamp(2.6rem,5.6vw,5.6rem), max(clamp(41.6px,5.6vw,89.6px), calc(var(--avail) / 6.6))); } }
@media (max-width:899px){ .ip-phero h1{ font-size:min(clamp(2.1rem,10.2vw,9.4rem), max(clamp(33.6px,10.2vw,150.4px), calc(var(--avail) / 6.6))); } }
.ip-hero--principle .ip-hero__lede{ font-size:min(clamp(1.08rem,1.7vw,1.36rem), max(clamp(17.28px,1.7vw,21.76px), calc(var(--avail) / 8.4))); }
/* 3h. Numbered steps (.ip-steps). The number column and the gap are layout,
so they keep their baseline widths; the step titles and text grow with
the reader up to the width of the text column. */
.ip-steps > li{ grid-template-columns:minmax(min(3.2rem, 51.2px),auto) minmax(0,1fr); gap:min(clamp(.9rem,2.4vw,2rem), clamp(14.4px,2.4vw,32px)); }
.ip-steps .idx{ font-size:min(clamp(1.5rem,2.6vw,2.2rem), clamp(24px,2.6vw,35.2px)); }
.ip-steps h3{ font-size:min(clamp(1.02rem,1.4vw,1.22rem), max(clamp(16.32px,1.4vw,19.52px), calc((var(--avail) - 66px) / 8))); }
.ip-steps p{ font-size:min(.98rem, max(15.68px, calc((var(--avail) - 66px) / 7.1))); }
/* 3i. Calm hero (Adults 50 to 75+). */
.ip-calm__line{ font-size:min(clamp(2.2rem,6.4vw,5.4rem), max(clamp(35.2px,6.4vw,86.4px), calc(var(--avail) / 5.7))); }
/* 3j. Principle page display words. */
.ip-beats__word{ gap:min(.9rem, 14.4px); font-size:min(clamp(2.6rem,9vw,7.2rem), max(clamp(41.6px,9vw,115.2px), calc((var(--avail) - 60px) / 4.5))); }
.ip-flow__verb{ font-size:min(clamp(1.7rem,2.9vw,2.9rem), max(clamp(27.2px,2.9vw,46.4px), calc(var(--avail) / 7.4))); }
@media (max-width:899px){ .ip-road__stop{ padding-left:min(3rem, 48px); } }
.ip-road__stop h3{ font-size:min(clamp(2rem,5vw,3.8rem), max(clamp(32px,5vw,60.8px), calc((var(--avail) - 48px) / 4.3))); }
.ip-triad b{ font-size:min(clamp(1.6rem,3vw,2.5rem), max(clamp(25.6px,3vw,40px), calc(var(--avail) / 8.6))); }
.ip-pair b{ font-size:min(clamp(1.9rem,4.2vw,3.4rem), max(clamp(30.4px,4.2vw,54.4px), calc((var(--avail) - 2vw) / 5.6))); }
.ip-monolith{ font-size:min(clamp(2rem,6.4vw,5.6rem), max(clamp(32px,6.4vw,89.6px), calc(var(--avail) / 5.8))); }
.ip-quietline{ font-size:min(clamp(1.6rem,4vw,3.2rem), max(clamp(25.6px,4vw,51.2px), calc(var(--avail) / 6.3))); }
.ip-stairs__n{ gap:min(.7rem, 11.2px); }
.ip-stairs__n .idx{ font-size:min(clamp(2rem,3.4vw,3rem), clamp(32px,3.4vw,48px)); }
.ip-stairs__n b{ font-size:min(clamp(1.05rem,1.6vw,1.3rem), max(clamp(16.8px,1.6vw,20.8px), calc((var(--avail) - 60px) / 8.5))); }
.ip-ones b{ font-size:min(clamp(1.6rem,3.6vw,2.8rem), max(clamp(25.6px,3.6vw,44.8px), calc(var(--avail) / 5.9))); }
/* Shared lists on the age and club pages: fixed number and label columns
keep their baseline widths. */
.ip-trio > div{ padding:min(clamp(1.15rem,2.2vw,1.7rem), clamp(18.4px,2.2vw,27.2px)); }
.ip-trio h3{ gap:min(.6rem, 9.6px); font-size:min(1.02rem, max(16.32px, calc((var(--avail) - 90px) / 7.3))); }
.ip-ladder li{ grid-template-columns:min(4.4rem, 70.4px) minmax(0,1fr); gap:min(.8rem, 12.8px); padding-left:min(1.1rem, 17.6px); }
/* 3k. Respect: "Every principle" index. Longest name "Perseverance"
(9.2em with its letter spacing), beside its number. */
.ip-pindex a,.ip-pindex span.ip-pindex__here{ font-size:min(.9rem, max(14.4px, calc((var(--avail) - 40px) / 9.4))); gap:min(.7rem, 11.2px); }
/* 3l. Card, choice and button side paddings stay at their baseline widths,
so a long button label ("Enquire for yourself") has room to wrap. */
.ip-choice__body{ padding:min(clamp(1.15rem,2.4vw,1.8rem), clamp(18.4px,2.4vw,28.8px)); }
.btn{ padding-inline:min(1.5rem, 24px); }
.btn--sm{ padding-inline:min(1.05rem, 16.8px); }
/* 3m. Homepage. */
.prin__link{ gap:min(1rem, 16px); font-size:min(clamp(1.05rem,2.2vw,1.75rem), max(clamp(16.8px,2.2vw,28px), calc((var(--avail) - 52px) / 9))); }
.prin__link .idx{ width:min(2.1rem, 33.6px); }
.jstep h3{ font-size:min(clamp(.88rem,1.2vw,1rem), max(clamp(14.08px,1.2vw,16px), calc((var(--avail) - 64px) / 10))); }
@media (max-width:760px){ .jstep h3{ font-size:min(.82rem, max(13.12px, calc((var(--avail) - 64px) / 10))); } }
@media (max-width:899px){ .jstep{ padding-left:min(2rem, 32px); } .journey__track{ padding-left:min(1.9rem, 30.4px); } }
@media (max-width:760px){ .journey__track{ padding-left:min(1.75rem, 28px); } }
@media (max-width:760px){ .comm__label{ padding:min(2rem, 32px) min(.95rem, 15.2px) min(.9rem, 14.4px); } }
@media (min-width:421px) and (max-width:699px){ .dest{ padding-inline:min(1rem, 16px); font-size:min(.8rem, max(12.8px, calc((var(--avail) / 2 - 34px) / 7.9))); } }
/* 3n. Fact lists (.ip-facts: hero facts, syllabus facts). The column
minimum is 150px at normal size and grows with the reader's text, so
enlarged text uses fewer, wider columns instead of splitting words. */
.ip-facts{ grid-template-columns:repeat(auto-fit,minmax(min(100%, max(150px, 9.375rem)),1fr)); }
.ip-facts dd a[href^="mailto:"]{ font-size:min(clamp(.95rem,1.2vw,1.05rem), max(clamp(15.2px,1.2vw,16.8px), calc(var(--avail) / 11.6))); }
/* 3o. Age finder: the panel keeps its baseline inset; the field keeps its
baseline width and may take the full row. */
.ip-finder{ padding:min(clamp(1.2rem,2.6vw,2rem), clamp(19.2px,2.6vw,32px)); }
.ip-finder input{ width:min(8.5rem, 136px); padding-inline:min(.85rem, 13.6px); }
/* 3p. Homepage "Why" list and reel module. */
.why__item{ column-gap:min(1.1rem, 17.6px); }
.why__item h3{ font-size:min(clamp(1rem,1.5vw,1.28rem), max(clamp(16px,1.5vw,20.48px), calc((var(--avail) - 70px) / 7.3))); }
.reel__module{ --pad:min(clamp(1.15rem,3.2vw,2.9rem), clamp(18.4px,3.2vw,46.4px)); }
.mk--reel{ font-size:min(clamp(2rem,2.9vw,2.7rem), max(clamp(32px,2.9vw,43.2px), calc((var(--avail) - 40px) / 5.4))); }
@media (max-width:760px){ .mk--reel{ font-size:min(clamp(1.7rem,7.6vw,2.1rem), max(clamp(27.2px,7.6vw,33.6px), calc((var(--avail) - 40px) / 5.4))); } }
@media (min-width:760px){ .reel__title{ font-size:min(clamp(2.15rem,3.4vw,3.1rem), max(clamp(34.4px,3.4vw,49.6px), calc((var(--avail) - 40px) / 4.4))); } }
@media (max-width:759px){ .reel__title{ font-size:min(clamp(1.95rem,8.6vw,2.45rem), max(clamp(31.2px,8.6vw,39.2px), calc((var(--avail) - 40px) / 4.4))); } }
/* "Why" photograph and its medal caption: the caption sits in the same
grid cell as the photograph (bottom left, exactly where it was), so when
enlarged text makes it taller than the photograph the figure grows with
it instead of cutting the caption off. */
.why__media{ display:grid; }
.why__media > *{ grid-area:1 / 1; }
.why__media img{ height:100%; object-fit:cover; }
.why__stat{ position:relative; left:auto; bottom:auto; align-self:end; justify-self:start; }
.why__stat{ padding:min(.85rem, 13.6px) min(1.05rem, 16.8px); }
/* 3q. Perth club card. */
.ip-clubcard{ padding:min(1.05rem, 16.8px) min(1.2rem, 19.2px) min(1.1rem, 17.6px); }
.ip-clubcard dl > div{ grid-template-columns:min(5.4rem, 86.4px) minmax(0,1fr); gap:min(.6rem, 9.6px); }
@media (max-width:420px){ .ip-clubcard{ margin-left:min(.6rem, 9.6px); margin-right:min(.6rem, 9.6px); } .ip-clubcard dl > div{ grid-template-columns:1fr; gap:min(.1rem, 1.6px); } }
/* From 421px the label sits beside its value. The row is now a wrapping
flex row with the same widths (label 5.4rem, gap 9.6px), so at normal
size it is laid out exactly as before; when enlarged text leaves the
value less than 11rem beside the label, the value moves under the label
(as it already does below 421px) instead of splitting its words. */
@media (min-width:421px){
.ip-clubcard dl > div{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:min(.6rem, 9.6px); row-gap:min(.1rem, 1.6px); }
.ip-clubcard dl > div > dt{ flex:0 0 5.4rem; min-width:0; }
.ip-clubcard dl > div > dd{ flex:1 1 11rem; min-width:0; }
}
.ip-clubcard dd a[href^="mailto:"]{ font-size:min(.92rem, max(14.72px, calc((var(--avail) - 80px) / 11.4))); }
/* 3r. Skip link. It waits 100px above the page; at enlarged text it is
taller than 100px, so its lower edge showed at the top of the screen and
sat over the header, blocking taps on Menu. It now waits its own full
height above that point, and still drops into view on keyboard focus. */
.skip-link:not(:focus-visible){ transform:translateY(-100%); }
/* 3s. Mobile drawer (menu). The sheet keeps its baseline insets; the
wordmark, the main links and the sub-links grow with the reader's text
up to the width of the sheet, and the link column can no longer be
pushed wider than the sheet by a long label ("Testimonials"), which
used to push the open/close buttons off the right edge. */
.dnav{ grid-template-columns:minmax(0,1fr); }
.drawer__top{ gap:min(.75rem, 12px); padding:min(.85rem, 13.6px) min(1rem, 16px); }
.drawer__top .brand__name{ font-size:min(1.14rem, max(18.24px, calc((100vw - 140px) / 10))); }
.drawer__body{ padding:min(.5rem, 8px) min(1rem, 16px) min(1.5rem, 24px); }
.dnav__link{ padding-inline:min(.25rem, 4px); font-size:min(.98rem, max(15.68px, calc((100vw - 96px) / 8.9))); }
.dnav__sub{ padding-left:min(.85rem, 13.6px); }
.dnav__sub a{ padding-inline:min(.5rem, 8px); }
.dnav__sub--deep{ margin-left:min(.55rem, 8.8px); padding-left:min(.75rem, 12px); }
.drawer__social{ flex-wrap:wrap; column-gap:min(1.1rem, 17.6px); row-gap:0; }
/* 3t. Assistant panel (design unchanged at normal size). Its header,
composer and footer keep their baseline insets, the title grows up to
the width beside the logo and close button, and the message field grows
in height with its text so typed text is never cut off. The field's
text is capped so its placeholder, "Type your message" (9.9em), stays on
one visible line; on phones the field's text box is the screen width
less 124px. The conversation keeps the remaining height and scrolls. */
.wa-head{ gap:min(.7rem, 11.2px); padding:min(.8rem, 12.8px) min(.8rem, 12.8px) min(.8rem, 12.8px) min(1rem, 16px); }
.wa-head__name{ font-size:min(.74rem, max(11.84px, calc((100vw - 150px) / 8))); }
.wa-head__state{ font-size:min(.66rem, max(10.56px, calc((100vw - 150px) / 8))); }
.wa-log{ padding:min(1rem, 16px) min(.9rem, 14.4px) min(.4rem, 6.4px); }
.wa-composer{ gap:min(.5rem, 8px); padding:min(.6rem, 9.6px) min(.7rem, 11.2px); }
.wa-input{ height:max(40px, calc(1.4em + 19.6px)); padding:min(.55rem, 8.8px) min(.7rem, 11.2px); font-size:min(.86rem, max(13.76px, calc((100vw - 124px) / 10))); }
.wa-foot{ padding-inline:min(.8rem, 12.8px); }
@media (max-width:600px){ .wa-log{ padding:min(.85rem, 13.6px) min(.75rem, 12px) min(.35rem, 5.6px); } }
.wa-bubble{ padding:min(.7rem, 11.2px) min(.85rem, 13.6px); }
.wa-chip{ padding-inline:min(.68rem, 10.88px); font-size:min(.78rem, max(12.48px, calc((100vw - 110px) / 7.6))); }
/* 3u. Homepage state tabs. At normal size all five fit on one row; with
enlarged text they now wrap onto a second row instead of hiding SA and
NSW in a strip that scrolls without a visible scrollbar. */
.states{ flex-wrap:wrap; row-gap:0; }
/* 3v. Footer wordmark ("WSKF AUSTRALIA" set across the page). It is sized
by the page width to fill one line, so it keeps its baseline size when
the reader enlarges text (it is already display-sized) instead of
growing past the edge and being cut to "WSKF AUSTRA". */
.brandfinale__word{ gap:min(clamp(.6rem,1.6vw,1.4rem), clamp(9.6px,1.6vw,22.4px)); font-size:min(clamp(1.45rem,7vw,6.4rem), clamp(23.2px,7vw,102.4px)); }
@media (max-width:760px){ .brandfinale__word{ gap:min(.5rem, 8px); font-size:min(clamp(1.35rem,7.4vw,2rem), clamp(21.6px,7.4vw,32px)); } }
/* 3w. Enquiry drop-downs (Where, Club). A closed drop-down shows its
choice on one line, so its insets and arrow keep their baseline widths
and the choice grows with the reader's text up to the width of the box,
sized so the longest choice ("Not sure, help me choose", 12.7em) fits.
Before this, the text area of each box was 18px wide at 320px. */
.field select{ padding-left:min(.85rem, 13.6px); padding-right:min(2.3rem, 36.8px); font-size:min(.95rem, max(15.2px, calc((var(--avail) - 117px) / 13.6))); }
.field__sel .i{ right:min(.9rem, 14.4px); width:min(.85rem, 13.6px); height:min(.85rem, 13.6px); }
/* 3x. Enquiry step indicator ("01 Training", "02 Contact"). The number
boxes are 24px; they now grow with their number (1.76em is 24px at
normal size), so an enlarged "01" no longer spills out of its box. */
.steps b{ width:max(24px, 1.76em); height:max(24px, 1.76em); }
/* ==========================================================================
4. WAVE 3.2.1: BASELINE CLEANUP
========================================================================== */
/* 4a. Header wordmark between 361 and 384px wide, at normal text size. The
baseline 1.06rem wordmark (16.96px) is a few pixels too wide for the bar
here, so "WSKF AUSTRALIA" was cut to "WSKF AUSTRAL..." and the logo was
squeezed. In this band only, the wordmark now scales with the width, from
14.2px at 361px to 16.27px at 384px (between the 13.44px used up to 360px
and the 16.96px used from 385px), so the full name fits beside a
full-size logo, with a small safety margin at every width. From 385px
up, and at 360px and below, nothing changes. When the reader enlarges text, --enlarged (section 3b) switches
the wordmark back to the Wave 3.2 size (16.96px), so the enlarged-text
header is exactly as accepted in Wave 3.2. */
@media (min-width:361px) and (max-width:384px){
.brand__name{ font-size:min(1.06rem, max(calc(14.2px + (100vw - 361px) * .09), calc(var(--enlarged) * 16.96))); }
}
/* ==========================================================================
5. WAVE 3.2.2: FINAL SHARED CLEANUP
========================================================================== */
/* 5a. Desktop header (1280px and wider) with enlarged text.
The desktop bar is one row: brand | navigation | actions. With enlarged
text its labels, paddings and caret hit areas all grew with the text, so
the navigation squeezed the brand ("WSKF AUSTRALIA" cut, logo shrunk)
and pushed the actions past the edge of the bar.
The Wave 3.2 rule is applied here too: spacing keeps its normal pixel
value, and the text (wordmark, sub-line, navigation labels, phone and
Enquire) grows with the reader only as far as the one row can hold. The
limit is --hr, a growth factor in px (1px = normal size) worked out from
the width of the bar for each of the three desktop bands below. Text is
never smaller than at normal size, so at normal text nothing moves. */
@media (min-width:1280px){
.header__bar{ column-gap:min(1rem, 16px); }
.brand{ gap:min(.7rem, 11.2px); }
.brand__name{ font-size:min(.98rem, max(15.68px, calc(var(--hr) * 15.68))); }
.brand__sub{ font-size:min(.56rem, max(8.96px, calc(var(--hr) * 8.96))); }
.nav__list{ gap:min(.1rem, 1.6px); }
.nav__link,.nav__toggle{ font-size:min(.75rem, max(12px, calc(var(--hr) * 12))); padding-inline:min(.5rem, 8px); }
.nav__toggle{ --cl:min(.5rem, 8px); --cr:min(.6rem, 9.6px); padding-left:calc(min(.1rem, 1.6px) + var(--cl)); padding-right:calc(min(.35rem, 5.6px) + var(--cr)); }
.nav__group::after{ left:min(.55rem, 8.8px); right:min(.4rem, 6.4px); }
/* "To enrol 9444 3737" is the one label placed directly in its list item
(no caret group). As an inline box it sat on the item's text line, which
with enlarged text is taller than the 46px link and pushed the label
down. As a block-level flex box it centres like every other label. */
.nav__item > .nav__link{ display:flex; }
.header__actions{ gap:min(.5rem, 8px); }
.header__phone{ font-size:min(.78rem, max(12.48px, calc(var(--hr) * 12.48))); padding-inline:min(.7rem, 11.2px); gap:min(.4rem, 6.4px); }
.header__actions .btn--sm{ font-size:min(.78rem, max(12.48px, calc(var(--hr) * 12.48))); gap:min(.6rem, 9.6px); padding-block:min(.55rem, 8.8px); }
}
/* --hr for each desktop band. The bar is 92.8vw wide (up to 1660px) when
text is enlarged; each line sits safely below the largest factor that
was measured to fit at every width in its band. */
@media (min-width:1280px) and (max-width:1440px){
:root{ --hr:calc((min(92.8vw, 1660px) + 1078.6px) / 2222); } /* 1.02 at 1280, 1.09 at 1440 */
}
@media (min-width:1441px) and (max-width:1519px){
:root{ --hr:1px; } /* no extra growth in this band (kept as accepted in Wave 3.2.2) */
}
@media (min-width:1520px){
:root{ --hr:max(calc((min(92.8vw, 1660px) + 2367.2px) / 3703.7), calc((min(92.8vw, 1660px) - 656.8px) / 796.2)); } /* 1.02 at 1520 to 1.26 from 1789 */
}
@media (min-width:1280px) and (max-width:1440px){
.header__bar{ column-gap:min(.6rem, 9.6px); }
.nav__link,.nav__toggle{ padding-inline:min(.3rem, 4.8px); }
.nav__toggle{ --cl:min(.36rem, 5.76px); --cr:min(.4rem, 6.4px); padding-left:calc(min(.3rem, 4.8px) + var(--cl)); padding-right:calc(min(.18rem, 2.88px) + var(--cr)); }
}
/* Desktop dropdown panels with enlarged text. The desktop header is fixed
and its panels could not scroll, so at 200% text on a laptop-height
window (for example 1280x800 or 1366x768) the last links of the taller
panels (Clubs, More) sat below the window and could not be reached. With
enlarged text only, a panel now stops 120px short of the window height
(it opens about 100px from the top) and scrolls inside itself. At normal
text the limit is effectively infinite, so panels are unchanged. */
@media (min-width:1280px){
.panel{ overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
max-height:calc(100dvh - 120px + (1px - var(--enlarged)) * 100000); }
}
/* 5b. Parent Stories with reduced motion. sections.css turns the row's soft
edge fade off when the reader prefers reduced motion (the still row is
swiped by hand, so nothing slides in from under a fade). A later phone
rule in sections.css (max-width:760px) turned the fade back on, so on
phones the first card sat under it. This file loads last, so restating
the reduced-motion rule here restores the intended no-fade row at every
width. Normal motion is untouched: the fade there is unchanged. */
@media (prefers-reduced-motion:reduce){
.swall__row{ -webkit-mask-image:none; mask-image:none; }
}
/* ==========================================================================
6. WAVE 3.2.3: DESKTOP CONTENT REFLOW AND HEADER SUB-LINE
========================================================================== */
/* 6a. Header sub-line ("World Shotokan Karate-do Federation"). It used to
reappear at 1441px, where the bar has no room for it: it wrapped onto two
lines and squeezed the logo. It now stays hidden through 1519px and
returns from 1520px, where it fits on one line beside a full-size logo.
"WSKF AUSTRALIA" is visible at every width. The tablet header
(1181 to 1279px, Menu layout) already shows it on one line and is
unchanged. */
@media (min-width:1441px) and (max-width:1519px){
.brand__sub{ display:none; }
}
/* 6b. Desktop page content with enlarged text: components reflow.
With enlarged text on a desktop screen, multi-column components kept
their column count while their text grew, so words split or were cut.
Each component below now falls back to its own narrower arrangement (the
one smaller screens already use) when its container is narrower, in rem,
than the narrowest container that component ever has at normal text.
rem follows the reader's text size, so:
- at normal text the condition can never be true (each threshold is
the measured narrowest normal width minus 0.05rem), and nothing moves;
- with enlarged text, a component keeps its desktop columns only while
it has at least as much room, relative to its text, as it has at
normal text; otherwise it reflows. Text is not made smaller.
Containers: the page column (.c-page, .c-wide) and the closing call to
action. They are block boxes whose width comes from their parent, so
making them containers does not change their size. */
.c-page,.c-wide{ container:wskf-col / inline-size; }
.ip-cta{ container:wskf-cta / inline-size; }
/* Footer: four columns need 58rem; otherwise the two-column footer. */
@media (min-width:1000px){
@container wskf-col (max-width:57.95rem){
.footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.6rem,3vw,2.6rem); }
.footer__col{ padding-left:0; border-left:0; }
}
}
/* Homepage destinations: six columns need 76rem, three need 40.6rem. */
@media (min-width:1500px){
@container wskf-col (max-width:75.95rem){ .destgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
}
@media (min-width:700px){
@container wskf-col (max-width:40.55rem){ .destgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
}
/* Homepage journey: four steps across need 52.2rem; otherwise the
vertical journey used on smaller screens. */
@media (min-width:900px){
@container wskf-col (max-width:52.15rem){
.journey__track{ grid-template-columns:none; padding-left:min(1.9rem, 30.4px); gap:1.2rem; }
.journey__track::before{ left:5px; right:auto; top:6px; bottom:6px; width:1px; height:auto; }
.journey__track::after{ display:none; }
.jstep{ padding-top:0; padding-left:min(2rem, 32px); }
.jstep__dot{ position:absolute; left:calc(-1 * min(1.9rem, 30.4px)); top:7px; margin:0; }
.jstep__n{ margin-top:0; }
}
}
/* Enquiry console (age, where, club, continue): one row needs 55.7rem;
otherwise the stacked console, so "Choose age or family" is never cut. */
@media (min-width:960px){
@container wskf-col (max-width:55.63rem){ .console{ display:flex; flex-direction:column; } }
}
/* Closing call to action: heading and actions side by side need 56.25rem;
otherwise they stack. */
@media (min-width:900px){
@container wskf-cta (max-width:56.2rem){ .ip-cta__in{ grid-template-columns:minmax(0,1fr); } }
}
/* Principle beats (Self Control) and the three-step flow (Develop
listening): 52.2rem. */
@media (min-width:900px){
@container wskf-col (max-width:52.15rem){
.ip-beats > li{ grid-template-columns:minmax(0,1fr); align-items:normal; }
.ip-beats > li:nth-child(2) .ip-beats__word,.ip-beats > li:nth-child(3) .ip-beats__word{ padding-left:0; }
.ip-flow{ grid-template-columns:minmax(0,1fr); }
.ip-flow > li{ border-top:1px solid var(--grey-line); padding-top:1.4rem; }
.ip-flow > li:last-child{ border-top-color:var(--grey-line); }
.ip-flow__arrow{ display:none; } /* the between-column arrows have no column gap to sit in */
}
}
/* Two- and three-column groups on the age, principle and club pages:
pair and triad 44.1rem, the rest 39.5rem. */
@media (min-width:760px){
@container wskf-col (max-width:44.03rem){
.ip-pair{ grid-template-columns:minmax(0,1fr); }
.ip-pair > div + div{ border-left:0; padding-left:0; border-top:1px solid var(--grey-line); }
.ip-triad{ grid-template-columns:minmax(0,1fr); border-top:1px solid rgba(162,161,161,.4); }
.ip-triad > li{ border-top:0; border-bottom:1px solid rgba(162,161,161,.4); padding-right:0; }
}
@container wskf-col (max-width:39.47rem){
.ip-related{ grid-template-columns:minmax(0,1fr); border-top:1px solid var(--grey-line); }
.ip-related > li{ border-top:0; }
.ip-related a{ border-bottom:1px solid var(--grey-line); }
.ip-trio{ grid-template-columns:minmax(0,1fr); }
.ip-trio > div + div{ border-left:0; border-top:1px solid rgba(162,161,161,.55); }
.ip-venue{ grid-template-columns:none; align-items:normal; }
.ip-choice{ grid-template-columns:none; }
}
}
@media (min-width:900px){
@container wskf-col (max-width:39.47rem){
.ip-stairs{ grid-template-columns:minmax(0,1fr); }
.ip-stairs > li{ padding-top:1.3rem; margin-top:0; }
.ip-stairs > li:nth-child(2),.ip-stairs > li:nth-child(3){ margin-top:0; }
.ip-stairs > li:nth-child(3){ border-top-color:var(--ink); }
.ip-person{ grid-template-columns:none; align-items:normal; }
}
}
/* 6c. Principle titles. Their enlarged-text limit (section 3g) was worked
out from the full page width, but on desktop the title sits in a
narrower box: the 980px hero copy, or the left column of the split hero
used by Awareness of others. At 1920px with enlarged text a word such as
"listening" was therefore set wider than its box and split. The limit is
now measured against the title's own box (container units), with the
same 6.6em allowance for "Awareness". The title is never smaller than
at normal text, and on phones the box is the full column, so phone
sizes are as before. */
.ip-hero--principle .ip-hero__copy,.ip-phero .ip-hero__copy{ container-type:inline-size; }
.ip-hero--principle h1{ font-size:min(clamp(2.6rem,11vw,9.4rem), max(clamp(41.6px,11vw,150.4px), calc(100cqi / 6.6))); }
@media (min-width:900px){ .ip-phero h1{ font-size:min(clamp(2.6rem,5.6vw,5.6rem), max(clamp(41.6px,5.6vw,89.6px), calc(100cqi / 6.6))); } }
/* Awareness of others carries both hero classes. Its own split-hero phone
rule (section 3g) must still win below 900px, so it is restated after the
rule above, unchanged. */
@media (max-width:899px){ .ip-phero h1{ font-size:min(clamp(2.1rem,10.2vw,9.4rem), max(clamp(33.6px,10.2vw,150.4px), calc(var(--avail) / 6.6))); } }
/* 6d. Perth instructor lineage: the year column. Wave 3.2 kept this column
at its pixel width (70.4px) because it is a layout column, but it holds
text (the years). It now keeps that width and widens only when the
reader's enlarged years need more room, so a year is never cut. */
.ip-ladder li{ grid-template-columns:minmax(min(4.4rem, 70.4px), max-content) minmax(0,1fr); }
/* 6e. Remaining desktop components with enlarged text.
Closing call to action: its action column sizes to its buttons laid out
in a row (at most 556px at normal text). With enlarged text that column
grew past 1000px and squeezed the heading. It now stops at 600px and its
buttons wrap inside it; at normal text it is exactly as before. */
@media (min-width:900px){ .ip-cta__in{ grid-template-columns:minmax(0,1.3fr) fit-content(600px); } }
@media (min-width:900px){
@container wskf-cta (max-width:56.2rem){ .ip-cta__in{ grid-template-columns:minmax(0,1fr); } }
}
/* Display words inside columns: their enlarged-text limits (section 3j)
were worked out from the full page width, but on desktop they sit in a
half or a third of it. Each limit is now measured against its own
column (container units on each list item). They are never smaller
than at normal text, and on phones the column is the full width. */
.ip-triad > li,.ip-flow > li,.ip-beats > li{ container-type:inline-size; }
.ip-triad b{ font-size:min(clamp(1.6rem,3vw,2.5rem), max(clamp(25.6px,3vw,40px), calc(100cqi / 8.6))); }
.ip-flow__verb{ font-size:min(clamp(1.7rem,2.9vw,2.9rem), max(clamp(27.2px,2.9vw,46.4px), calc(100cqi / 7.4))); }
/* Beats (Self Control): on desktop the word sits in the wider of two
columns (55% of the row, less the 2rem gap), indented by up to
clamp(4rem,12vw,12rem) for the third beat, beside its number (60px). */
@media (min-width:900px){
/* the beats' column gap and staggered indents are spacing, so they keep
their normal pixel values (Wave 3.2 rule) and the word keeps its room */
.ip-beats > li{ column-gap:min(2rem, 32px); }
.ip-beats > li:nth-child(2) .ip-beats__word{ padding-left:min(clamp(2rem,6vw,6rem), clamp(32px,6vw,96px)); }
.ip-beats > li:nth-child(3) .ip-beats__word{ padding-left:min(clamp(4rem,12vw,12rem), clamp(64px,12vw,192px)); }
/* the single-column fallback (6b) drops the stagger; restated here so the
bounded indents above do not bring it back */
@container wskf-col (max-width:52.15rem){ .ip-beats > li:nth-child(2) .ip-beats__word,.ip-beats > li:nth-child(3) .ip-beats__word{ padding-left:0; } }
.ip-beats__word{ font-size:min(clamp(2.6rem,9vw,7.2rem), max(clamp(41.6px,9vw,115.2px), calc(((100cqi - 32px) * .55 - clamp(64px,12vw,192px) - 60px) / 4.5))); }
}
/* Beats in two columns at enlarged text: the step number beside each word
grows with the text, so each word is also held to what is left of its own
column after its indent, number and gap. The extra term is 100000px at
normal text, so the normal sizes above are untouched. */
@media (min-width:900px){ @container wskf-col (min-width:52.2rem){
.ip-beats > li:nth-child(1) .ip-beats__word{ font-size:min(clamp(2.6rem,9vw,7.2rem), max(clamp(41.6px,9vw,115.2px), calc(((100cqi - 32px) * .55 - clamp(64px,12vw,192px) - 60px) / 4.5)), max(41.6px, calc(((100cqi - 32px) * .55 - 1.75rem - 15px) / 3.5 + (1px - var(--enlarged)) * 100000))); }
.ip-beats > li:nth-child(2) .ip-beats__word{ font-size:min(clamp(2.6rem,9vw,7.2rem), max(clamp(41.6px,9vw,115.2px), calc(((100cqi - 32px) * .55 - clamp(64px,12vw,192px) - 60px) / 4.5)), max(41.6px, calc(((100cqi - 32px) * .55 - min(clamp(2rem,6vw,6rem), clamp(32px,6vw,96px)) - 1.75rem - 15px) / 4.45 + (1px - var(--enlarged)) * 100000))); }
.ip-beats > li:nth-child(3) .ip-beats__word{ font-size:min(clamp(2.6rem,9vw,7.2rem), max(clamp(41.6px,9vw,115.2px), calc(((100cqi - 32px) * .55 - clamp(64px,12vw,192px) - 60px) / 4.5)), max(41.6px, calc(((100cqi - 32px) * .55 - min(clamp(4rem,12vw,12rem), clamp(64px,12vw,192px)) - 1.75rem - 15px) / 2.1 + (1px - var(--enlarged)) * 100000))); }
} }
/* Juniors stairs: the step names sit in thirds of the column, beside a step
number and a gap (about 80px together). The last term applies only at
enlarged text, when the wider page gutter narrows each third; at normal
text it is 100000px and the Wave 3.2 size stands. */
.ip-stairs > li{ container-type:inline-size; }
.ip-stairs__n b{ font-size:min(clamp(1.05rem,1.6vw,1.3rem), max(clamp(16.8px,1.6vw,20.8px), calc((100cqi - 84px) / 8.4)), max(16px, calc((100cqi - 84px) / 8.4 + (1px - var(--enlarged)) * 100000))); }
/* Enquiry in the desktop side rail (1100px and wider; WSKF Perth and the
age pages). The rail is 340px wide, so with enlarged text "Choose age or
family" could not fit on one line and was cut with an ellipsis. In the
rail, with enlarged text only (the rail is narrower than 21.2rem), the
summary now wraps between words instead. */
@media (min-width:1100px){
@container wskf-col (max-width:21.2rem){
.ip-rail .agepick__value{ white-space:normal; overflow:visible; text-overflow:clip; }
}
}
/* 6f. Homepage "More than a class" tiles. Each tile keeps a 16:10 shape
with its caption laid over the photograph at the bottom. With enlarged
text on a narrow screen, the "Family training together" caption became
taller than the tile and its top was cut off. Where that can happen, the
16:10 shape comes from an empty spacer (padding-top 62.5%, the usual
ratio technique) that shares one grid cell with the caption, and the
photograph is placed absolutely to fill the tile as before, so a tile is
as tall as the larger of its 16:10 shape and its caption.
This applies only when the column is narrower, in rem, than it ever is
at normal text for the same tile layout: one tile across up to 759px
(narrowest normal column 17.7rem, at 320px) and two across from 760px
(narrowest 44.08rem, at 760px). Widths are the column's content box,
which is what a container query measures. Normal text never meets these
conditions, so normal tiles keep their original rendering to the pixel. */
@media (max-width:759px){ @container wskf-col (max-width:17.65rem){
.comm__cell{ display:grid; aspect-ratio:auto; }
.comm__cell::after{ content:""; grid-area:1 / 1; padding-top:62.5%; }
.comm__cell img{ position:absolute; inset:0; } /* picture is display:contents (base.css), so the image itself is placed */
.comm__cell source{ position:absolute; top:0; left:0; } /* never rendered; kept out of the grid */
.comm__label{ position:relative; inset:auto; grid-area:1 / 1; align-self:end; }
} }
@media (min-width:760px){ @container wskf-col (max-width:44.03rem){
.comm__cell{ display:grid; aspect-ratio:auto; }
.comm__cell::after{ content:""; grid-area:1 / 1; padding-top:62.5%; }
.comm__cell img{ position:absolute; inset:0; } /* picture is display:contents (base.css), so the image itself is placed */
.comm__cell source{ position:absolute; top:0; left:0; } /* never rendered; kept out of the grid */
.comm__label{ position:relative; inset:auto; grid-area:1 / 1; align-self:end; }
} }
/* 6g. Homepage hero heading, two-column hero (761px and up), enlarged text.
Between about 768 and 800px at 200% text the heading column is narrower
than "character." at the heading's rem floor (1.7rem), so the word split.
The heading is now also held to its own column: the grid is a size
container, and the column is (grid width less the column gap) / 1.9
(columns 1fr and .9fr). "character." is about 6.5em wide; 6.7 leaves
margin. The normal pixel size is the floor of max(), so normal text is
unchanged; the cap only binds when text is enlarged. */
@media (min-width:761px){
.hero__grid{ container-type:inline-size; }
.hero__h1{ font-size:min(clamp(1.7rem,3.05vw,2.85rem), max(clamp(27.2px,3.05vw,45.6px), calc((100cqi - clamp(1.5rem,3vw,3.5rem)) / 1.9 / 6.7))); }
}
/* 6h. Principle chapter navigation (Previous / All eight / Next). From 700px
it sits in three columns; the narrowest normal column (content box) it
meets there is 40.6rem (at 700px). When enlarged text makes the column
narrower than that, the three links stack as they already do on phones,
instead of pushing the page sideways. Normal text never meets the
condition. */
@media (min-width:700px){ @container wskf-col (max-width:40.55rem){
.ip-chapnav{ grid-template-columns:minmax(0,1fr); }
.ip-chapnav__next,.ip-chapnav__all{ text-align:left; align-items:flex-start; }
} }
/* 6i. Principle "overlap" panel (three short points over the image, for
example Good Manners "Small courtesies"). From 860px it is three columns;
the narrowest normal column it meets there is 49.88rem (content box, at
860px). When enlarged text makes the column narrower than that, the
three points stack as they do below 860px. The panel's overlap margins
are left as they are. Normal text never meets the condition. */
@media (min-width:860px){ @container wskf-col (max-width:49.83rem){
.ip-overlap__panel{ grid-template-columns:minmax(0,1fr); }
} }
/* 6j. Desktop enquiry rail (inner pages, 1100px and up). The rail is 340px
wide beside the page column. With enlarged text its closed drop-downs
("Choose a state", "Choose a state first") became wider than their boxes
and were cut.
- When the page is narrower, in rem, than it ever is at normal text in
this layout (68.75rem, at 1100px), the two columns become one, exactly
as below 1100px: the enquiry card follows the first section at full
column width and is no longer pinned. The card keeps its stacked
fields.
- Otherwise (very wide screens at moderate enlargement) the rail grows
with the text: 15.5rem is the room those choices need, and it is below
340px at normal text, so the normal rail is unchanged.
Normal text never meets the first condition. */
.ip-main{ container:wskf-main / inline-size; }
:root{ --ip-rail-w:max(340px, min(15.5rem, 45vw)); }
@media (min-width:1100px){ @container wskf-main (max-width:68.7rem){
.ip-detail{ grid-template-columns:minmax(0,1fr); }
.ip-detail > .ip-rail{ grid-column:1; grid-row:auto; align-self:auto; }
.ip-rail__stick{ position:static; }
.ip-rail .enq__card{ max-height:none; }
.ip-rail .enq__body{ overflow-y:visible; }
} }
/* 6k. Menu drawer wider than a phone (481px and up, which includes the
Menu header up to 1279px and desktop browser zoom). The drawer sheet is
at most 430px wide, but the enlarged-text limits for its wordmark and
links (section 3s) were worked out from the full window width, so at
200% text on a tablet or a zoomed laptop "WSKF AUSTRALIA" was cut with an
ellipsis. The limits now use the sheet's real width. At normal text the
sizes are unchanged (the normal size is the floor), and on phones the
sheet is the full window, as before. */
.drawer__top .brand__name{ font-size:min(1.14rem, max(18.24px, calc((min(100vw, 430px) - 140px) / 10))); }
.dnav__link{ font-size:min(.98rem, max(15.68px, calc((min(100vw, 430px) - 96px) / 8.9))); }
/* ==========================================================================
7. FRONTEND COMPLETION: TWO FOUNDATION CORRECTIONS (normal text)
After these, the Wave 3.x foundation is frozen.
========================================================================== */
/* 7a. Enquiry console, 960 to 1099px. The one-row console (Who / Where /
Club / Continue) gave the closed "Where" drop-down only 117 to 145px here,
so "Choose age/family" was cut. The wording stays; the console now keeps
its stacked arrangement (the one used below 960px) up to 1099px. Measured:
the prompt needs 145.3px and the one-row console gives exactly that at
1086px, so the row starts at 1100px (148px, a 3px margin, and the same
breakpoint as the desktop rail). Same markup, same order, same logic. */
@media (min-width:960px) and (max-width:1099.98px){
.console{ display:flex; flex-direction:column; }
.console__cell--age{ order:1; }
.agepanel{ order:2; grid-template-columns:none; display:grid; justify-items:start; }
.js .agepanel[hidden]{ display:none !important; }
.console__cell:nth-child(2){ order:3; }
.console__cell:nth-child(3){ order:4; }
.console__cell--go{ order:5; padding-top:.9rem; }
.agepanel__hint{ grid-column:auto; }
.agepanel .choices{ display:flex; flex-wrap:wrap; gap:.45rem; }
.agepanel .choice span{ width:auto; padding-inline:1rem; }
.agepanel__done{ justify-self:start; }
}
/* 7b. Juniors stairs, three columns (900px and up). Each step name sits in
a third of the column beside its number (1.4 x the number size) and an
11.2px gap. "PROGRESSION" (8.13em) overhung its third by up to 2.5px from
1600px, and by up to 10.5px at 1100 to 1199px beside the enquiry rail, so
the final N touched the section's clipped edge. The name is now also held
to its own third. Where it already fitted, nothing changes; at 1600px and
up it is 0.45px smaller (20.35px), and in the 1100 to 1199px band beside
the rail it is up to 1.4px smaller (16.2px at 1100px), tapering to no
change by 1200px. Letter spacing, number, gap and columns are unchanged. */
@media (min-width:900px){
.ip-stairs__n b{ font-size:min(clamp(1.05rem,1.6vw,1.3rem), max(clamp(16.8px,1.6vw,20.8px), calc((100cqi - 84px) / 8.4)), max(16px, calc((100cqi - 84px) / 8.4 + (1px - var(--enlarged)) * 100000)), max(14px, calc((100cqi - 1.4 * clamp(32px,3.4vw,48px) - 11.2px - 1px) / 8.14))); }
}
/* ==========================================================================
8. FRONTEND COMPLETION: NEW DARK SURFACES AND SMALL RED TEXT
The 40 new pages bring their own family stylesheets, which load before
this file. Section 1 above recolours small red text (.cap--red, .chapno,
.ln and others) with --red-text, so a dark section must be registered
here for that text to use the dark-surface red (#EA3C40), exactly as the
pilot dark sections are. Found by axe-core on all 57 pages.
========================================================================== */
.ww-hero,.ww-country--ink,.dir-club--ink,.dir-band,.ed-mh{
--red-text:var(--red-text-dark);
}
/* Small red numbers and sub-lines set in the brand red (#E4191E, 4.24:1 on
paper) use the accessible red for their surface instead. */
.cl-route .idx,
.cl-plist .idx,
.cl-h1__sub,
.ww-hero--travel a[href^="#"] > span{
color:var(--red-text);
}
/* Text on the red brand panel: pure white (4.71:1), the rule already used
for the homepage "why" panel. */
.ed-ev[data-type="seminar"] .ed-ev__d small,
.cl-plate > .cap,
.ed-redpanel > .ed-kick,
.ed-redpanel > span{
color:#FFFFFF;
}
/* Self Defence order (Respect, Resolve, Defend): the staggered rows (100%,
88%, 76% wide) keep their stagger at normal text. With enlarged text the
stagger is dropped (every row full width) so "Defend" keeps its normal
size without splitting. --enlarged is 0px at normal text. */
@media (min-width:760px){
.bn-order > li:nth-child(2){ width:min(100%, calc(88% + var(--enlarged) * 100000)); }
.bn-order > li:nth-child(3){ width:min(100%, calc(76% + var(--enlarged) * 100000)); }
}