/* Small wiring overrides on top of the mockup style.css (loaded after it). */
/* Inline text styles the editor's format bar applies. Public-facing, so they
live here (not editor.css) to render for visitors as well as in the editor. */
.tc-green{ color:var(--green); }
.tc-white{ color:#fff; }
.tc-grey{ color:#9aa0a6; }
.tc-ink{ color:#0d130d; }
.tc-muted{ color:var(--muted); }
.fs-s{ font-size:.8em; } .fs-l{ font-size:1.25em; } .fs-xl{ font-size:1.6em; }
.fw-light{ font-weight:300; }
.fw-reg{ font-weight:400; }
.fw-bold{ font-weight:700; }
.fw-black{ font-weight:800; }
.hl{ background:linear-gradient(transparent 55%, rgba(134,179,33,.42) 55%); padding:0 .06em; }
/* Ticker: let the diagonal green band bleed over the sections above and below,
rather than sitting in its own boxed strip with hairline seams. The band sits
above the next section (z-index) so it hides that section's flat top edge; the
section is pulled up under the band and given extra top padding so its text
stays clear of it. */
.ticker{ border:0; margin:-30px 0; position:relative; z-index:3; transform:rotate(-1.2deg) scale(1.06); }
.ticker + .cred{ margin-top:-30px; padding-top:58px; }
/* Closing section: drop the hard top hairline; strengthen the bg image's fade so
it blends into the sections around it instead of a clean-cut seam. */
.closing{ border-top:0; }
.closing-bg::after{ background:radial-gradient(60% 70% at 50% 60%,rgba(var(--grgb),.16),transparent 70%),linear-gradient(180deg,var(--bg),transparent 42%,transparent 62%,var(--bg)) !important; }
/* Real inputs inside chip/opt labels stay invisible; the label carries the look. */
.chips .chip input, .opts .opt input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.chips .chip, .opts .opt { cursor:pointer; }
/* Server-rendered flash messages. */
.flash { padding:12px 16px; border-radius:12px; margin:14px 0; font-weight:600; font-size:14px; }
.flash.ok { background:rgba(var(--grgb),.12); border:1px solid rgba(var(--grgb),.5); color:#d7ffd0; }
.flash.error { background:rgba(255,75,62,.12); border:1px solid rgba(255,75,62,.5); color:#ffd9d5; }
/* Dedicated video landing player (public page, not the modal). */
.vplayer { position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.08); }
.vplayer iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vplayer .locked-msg { position:absolute; inset:0; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; text-align:center; padding:20px; }
/* Auth pages: centre the card. */
.authwrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.authcard { width:100%; max-width:420px; }
.authcard .field { margin-bottom:14px; }
/* Simple booking slot select spacing. */
.booking-form .field { margin-bottom:14px; }
/* Three-tier compare table. The mockup's grid was built for two tiers; ours has
three. Use equal fr columns so header names, prices and the tick/cross cells
all line up under the same columns (auto columns broke alignment because each
row is its own grid). */
.compare.cmp3 .cmp-h,
.compare.cmp3 .cmp-r { grid-template-columns: 1.7fr 1fr 1fr 1fr; column-gap: 8px; }
.compare.cmp3 .cmp-h b { padding: 0 6px; }
.compare.cmp3 .cmp-r i { justify-self: center; }
@media (max-width: 680px) {
.compare.cmp3 .cmp-h,
.compare.cmp3 .cmp-r { grid-template-columns: 1.3fr .9fr .9fr .9fr; padding-left:14px; padding-right:10px; }
.compare.cmp3 .cmp-h b { font-size:12px; }
.compare.cmp3 .cmp-h b small { font-size:11px; }
}
/* Soften the seam at the top of the "Inside the team" section: move the green
field to an overflowing layer that fades up into the dark, so there is no
hard line between the results and team sections. */
.team{ background:none; position:relative; }
.team::before{ content:""; position:absolute; left:0; right:0; top:-240px; height:calc(100% + 240px); z-index:0; pointer-events:none;
background:radial-gradient(55% 55% at 80% 42%, rgba(var(--grgb),.08), transparent 72%); }
.team > *{ position:relative; z-index:1; }
/* =====================================================================
Page builder. Every section is a block ([data-blk]); these rules turn a
block's Style settings into the look, and make the grids flex to however
many items the client adds. Colours ride on the same CSS variables as the
rest of the design, so a block's highlight colour recolours everything in it.
===================================================================== */
[data-blk].b-hasbg{ background-color:var(--b-bg); }
[data-blk].b-hasimg{ background-image:linear-gradient(rgba(0,0,0,var(--b-ov,.6)),rgba(0,0,0,var(--b-ov,.6))),var(--b-img); background-size:cover; background-position:center; }
[data-blk].b-ink{ color:var(--ink); }
[data-blk].b-pt-0{ padding-top:0 !important; } [data-blk].b-pb-0{ padding-bottom:0 !important; }
[data-blk].b-pt-s{ padding-top:40px !important; } [data-blk].b-pb-s{ padding-bottom:40px !important; }
[data-blk].b-pt-m{ padding-top:80px !important; } [data-blk].b-pb-m{ padding-bottom:80px !important; }
[data-blk].b-pt-l{ padding-top:130px !important; } [data-blk].b-pb-l{ padding-bottom:130px !important; }
[data-blk].b-pt-xl{ padding-top:180px !important; } [data-blk].b-pb-xl{ padding-bottom:180px !important; }
[data-blk].b-al-center{ text-align:center; }
[data-blk].b-al-center .sec-head{ flex-direction:column; align-items:center; text-align:center; }
[data-blk].b-al-center .sec-head p{ margin-inline:auto; }
[data-blk].b-al-center .row-btns, [data-blk].b-al-center .cta{ justify-content:center; }
[data-blk].b-al-left{ text-align:left; }
@media (max-width:760px){
[data-blk].b-hm{ display:none !important; }
[data-blk].b-pt-l{ padding-top:90px !important; } [data-blk].b-pb-l{ padding-bottom:90px !important; }
[data-blk].b-pt-xl{ padding-top:120px !important; } [data-blk].b-pb-xl{ padding-bottom:120px !important; }
}
@media (min-width:761px){ [data-blk].b-hd{ display:none !important; } }
/* Grids that used to be fixed to the design's item count. */
.cred-row{ grid-template-columns:repeat(var(--n,4),1fr) auto; }
.doors.cols-2{ grid-template-columns:repeat(2,1fr); } .doors.cols-3{ grid-template-columns:repeat(3,1fr); } .doors.cols-4{ grid-template-columns:repeat(4,1fr); }
.bento{ grid-auto-rows:200px; }
.plans[class*="plans-n"]{ gap:18px; align-items:stretch; }
.plans.plans-n1{ grid-template-columns:minmax(0,480px); } .plans.plans-n2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.plans.plans-n3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .plans.plans-n4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cmp-rows>.cmp-r:first-child{ border-top:0; }
.compare.cmp3 .cmp-r .cmp-c{ display:flex; justify-content:center; }
.cmp-h b .cmp-n{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.legal-body h2{ margin-top:28px; }
.legal-body > p.muted:first-child{ margin-bottom:20px; }
@media (max-width:1100px){
.cred-row{ grid-template-columns:repeat(2,1fr); }
.doors.cols-3, .doors.cols-4{ grid-template-columns:repeat(2,1fr); }
.plans.plans-n3, .plans.plans-n4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
.cred-row{ grid-template-columns:1fr 1fr; }
.doors.cols-2, .doors.cols-3, .doors.cols-4{ grid-template-columns:1fr; }
.plans[class*="plans-n"]{ grid-template-columns:1fr; }
}
/* ---- Library blocks, built from the same parts as the signed-off design ---- */
.bk-heading .sec-head{ margin-bottom:0; }
.bk-heading.page-top{ padding-bottom:60px; }
.bk-body{ color:var(--muted); font-size:17px; line-height:1.65; }
.bk-body > * + *{ margin-top:14px; }
.bk-body h2, .bk-body h3, .bk-body h4{ color:var(--ink); font-family:var(--display); text-transform:uppercase; line-height:1; margin-top:30px; }
.bk-body h2{ font-size:clamp(26px,2.6vw,36px); } .bk-body h3{ font-size:22px; } .bk-body h4{ font-size:17px; }
.bk-body > :first-child{ margin-top:0; }
.bk-body ul, .bk-body ol{ padding-left:22px; } .bk-body li + li{ margin-top:6px; }
.bk-body b, .bk-body strong{ color:var(--ink); }
.bk-body a{ color:var(--green); border-bottom:1px solid rgba(var(--grgb),.5); }
.bk-text-w{ max-width:760px; } .bk-text-w.wide{ max-width:var(--wrap); }
[data-blk].b-al-center .bk-text-w{ margin-inline:auto; }
.bk-ti-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.bk-ti-left .bk-ti-img{ order:-1; }
.bk-ti-copy h2{ font-size:clamp(34px,4.4vw,60px); margin:18px 0 22px; }
.bk-ti-img{ position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; background:var(--panel); }
.bk-ti-img img{ width:100%; height:100%; object-fit:cover; }
.mono img{ filter:grayscale(1) contrast(1.1) brightness(.8); }
.bk-cta-box{ position:relative; border-radius:28px; overflow:hidden; border:1px solid rgba(var(--grgb),.3); padding:72px 56px; text-align:center;
background:radial-gradient(70% 90% at 50% 120%,rgba(var(--grgb),.18),transparent 70%),var(--panel); }
.bk-cta-box h2{ font-size:clamp(34px,5vw,72px); margin-top:18px; }
.bk-cta-box p{ color:var(--muted); font-size:17px; max-width:560px; margin:18px auto 0; }
.bk-cta-box .row-btns{ justify-content:center; }
.bk-video .vplayer{ max-width:1000px; margin-inline:auto; }
.bk-cap{ text-align:center; color:var(--muted); font-size:14px; margin-top:14px; }
.bk-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.bk-grid.cols-1{ grid-template-columns:minmax(0,1fr); } .bk-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bk-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.bk-ph{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--panel); aspect-ratio:3/4; }
.bk-r-sq .bk-ph{ aspect-ratio:1; } .bk-r-wide .bk-ph{ aspect-ratio:16/10; }
.bk-ph img{ width:100%; height:100%; object-fit:cover; }
.bk-ph figcaption{ position:absolute; left:14px; bottom:14px; right:14px; font-size:13px; font-weight:700; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.bk-card{ display:flex; flex-direction:column; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--panel); transition:border-color .3s; }
a.bk-card:hover{ border-color:rgba(var(--grgb),.45); }
.bk-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.bk-card-img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.7); }
.bk-card-img .free{ position:absolute; left:14px; top:14px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--green); color:var(--on-green); }
.bk-card-b{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bk-card-b h3{ font-family:var(--display); font-size:20px; text-transform:uppercase; line-height:1.05; }
.bk-card-b p{ color:var(--muted); font-size:15px; }
.bk-card-b .watch{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--green); }
.bk-card-b .watch svg{ width:14px; }
.bk-quote{ position:relative; padding:34px 28px 26px; border-radius:22px; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:20px; }
.bk-qmark{ font-family:var(--display); font-size:64px; line-height:.6; color:var(--green); height:26px; }
.bk-quote blockquote{ font-size:17px; line-height:1.55; }
.bk-quote figcaption{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.bk-quote .av{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none; background:var(--panel2); }
.bk-quote .av img{ width:100%; height:100%; object-fit:cover; }
.bk-quote b{ display:block; font-size:15px; } .bk-quote small{ color:var(--muted); font-size:13px; }
.bk-faq-list{ max-width:860px; border-top:1px solid var(--line); }
[data-blk].b-al-center .bk-faq-list{ margin-inline:auto; text-align:left; }
.bk-qa{ border-bottom:1px solid var(--line); }
.bk-qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; font-size:18px; font-weight:700; }
.bk-qa summary::-webkit-details-marker{ display:none; }
.bk-qa summary svg{ width:20px; flex:none; color:var(--green); transition:transform .25s; }
.bk-qa[open] summary svg{ transform:rotate(45deg); }
.bk-a{ color:var(--muted); font-size:16px; padding:0 0 24px; max-width:720px; }
.bk-step{ padding:28px 24px; border-radius:22px; border:1px solid var(--line); background:var(--panel); }
.bk-step-n{ display:block; font-family:var(--display); font-size:54px; line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(var(--grgb),.6); margin-bottom:26px; }
.bk-step h3{ font-family:var(--display); font-size:19px; text-transform:uppercase; line-height:1.05; margin-bottom:10px; }
.bk-step p{ color:var(--muted); font-size:15px; }
.bk-buttons{ padding:10px 0 60px; }
.bk-buttons .row-btns{ margin-top:0; }
.bk-spacer.bk-sp-s{ height:40px; } .bk-spacer.bk-sp-m{ height:80px; } .bk-spacer.bk-sp-l{ height:140px; }
.bk-spacer{ display:flex; align-items:center; }
.bk-hr{ border:0; border-top:1px solid var(--line2); }
@media (max-width:1100px){
.bk-grid.cols-3, .bk-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bk-ti-grid{ gap:40px; }
}
@media (max-width:760px){
.bk-grid.cols-2, .bk-grid.cols-3, .bk-grid.cols-4{ grid-template-columns:1fr; }
.bk-gallery .bk-grid.cols-3, .bk-gallery .bk-grid.cols-4{ grid-template-columns:1fr 1fr; }
.bk-ti-grid{ grid-template-columns:1fr; }
.bk-ti-left .bk-ti-img{ order:0; }
.bk-cta-box{ padding:48px 22px; }
}
/* =====================================================================
The admin bar (staff only, every page) and the admin screens.
===================================================================== */
#tt-staff{ position:fixed; top:0; left:0; right:0; height:46px; z-index:2147480000; display:flex; align-items:center; gap:14px; padding:0 14px;
background:#0b0f0b; border-bottom:1px solid rgba(255,255,255,.12); color:#f4f6f1; font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; }
#tt-staff svg{ width:15px; height:15px; flex:none; }
#tt-staff .sb-brand{ font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#93998f; white-space:nowrap; }
#tt-staff .sb-brand b{ color:#86B321; }
#tt-staff .sb-who{ display:inline-flex; align-items:center; gap:6px; color:#93998f; white-space:nowrap; padding-left:14px; border-left:1px solid rgba(255,255,255,.12); }
#tt-staff .sb-who b{ color:#f4f6f1; font-weight:600; }
#tt-staff .sb-tabs{ display:flex; gap:4px; margin-left:8px; }
#tt-staff .sb-tabs a{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:7px; color:#c9cfc5; font-weight:600; }
#tt-staff .sb-tabs a:hover{ background:rgba(255,255,255,.07); color:#fff; }
#tt-staff .sb-tabs a.on{ background:rgba(134,179,33,.18); color:#dff0c3; box-shadow:inset 0 0 0 1px rgba(134,179,33,.55); }
#tt-staff .sb-sp{ flex:1; }
#tt-staff .sb-act{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:7px; background:#86B321; color:#08120a; font-weight:700; white-space:nowrap; }
#tt-staff .sb-act:hover{ filter:brightness(1.08); }
#tt-staff .sb-out button{ height:32px; padding:0 12px; border-radius:7px; border:1px solid rgba(255,255,255,.2); background:transparent; color:#f4f6f1; font:600 12.5px/1 inherit; cursor:pointer; }
#tt-staff .sb-out button:hover{ border-color:#e0533f; color:#ffb4a8; }
body.has-sb{ padding-top:46px; }
body.has-sb .nav{ top:60px; }
body.has-sb .side{ top:46px; height:calc(100vh - 46px); }
@media (max-width:900px){
#tt-staff{ gap:8px; padding:0 8px; }
#tt-staff .sb-brand, #tt-staff .sb-who{ display:none; }
#tt-staff .sb-tabs{ margin-left:0; }
#tt-staff .sb-tabs a{ padding:0 9px; }
#tt-staff .sb-tabs a span, #tt-staff .sb-act span{ display:none; }
#tt-staff .sb-act{ padding:0 10px; }
}
/* ---- admin screens ---- */
.adm-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.adm-tabs{ display:flex; gap:6px; margin:0 0 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.adm-tabs a{ padding:10px 14px; font-weight:700; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.adm-tabs a.on{ color:var(--ink); border-color:var(--green); }
.adm-add{ margin-bottom:16px; }
.adm-add > summary, .adm-v > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; }
.adm-add > summary::-webkit-details-marker, .adm-v > summary::-webkit-details-marker{ display:none; }
.adm-add > summary b{ font-size:16px; }
.adm-add > summary .muted{ font-size:13px; margin-left:auto; }
.adm-plus{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--green); color:var(--on-green); flex:none; }
.adm-plus svg{ width:18px; height:18px; }
.adm-form{ display:grid; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.adm-form .field label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; }
.adm-form .hint{ display:block; color:var(--muted); font-size:12.5px; margin-top:6px; }
.adm-form .btn{ justify-self:start; }
.adm-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.adm-vlist{ display:flex; flex-direction:column; gap:10px; }
.adm-v{ padding:12px 14px; }
.adm-th{ width:84px; height:52px; border-radius:8px; background:#111 center/cover no-repeat; flex:none; }
.adm-vt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.adm-vt b{ font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-vt span{ color:var(--muted); font-size:13px; }
.adm-warn{ color:var(--amber); font-style:normal; }
.adm-v[open] .adm-edit{ visibility:hidden; }
.adm-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.adm-row .adm-sp{ flex:1; }
.adm-del:hover{ border-color:var(--red); color:var(--red); }
.adm-pages{ padding:6px 16px; }
.adm-page{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.adm-page:first-child{ border-top:0; }
.adm-pi{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(var(--grgb),.1); color:var(--green); flex:none; }
.adm-pi svg{ width:18px; height:18px; }
.adm-go{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.adm-go a{ display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:18px; border:1px solid var(--line); background:var(--panel); transition:border-color .2s, transform .2s; }
.adm-go a:hover{ border-color:rgba(var(--grgb),.5); transform:translateY(-2px); }
.adm-go a svg{ width:22px; height:22px; color:var(--green); }
.adm-go b{ font-size:16px; } .adm-go span{ color:var(--muted); font-size:13.5px; }
.adm-cardwrap{ position:relative; }
.adm-cardedit{ position:absolute; top:10px; right:10px; z-index:5; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px;
background:#0b0f0b; border:1px solid #86B321; color:#dff0c3; font:700 12px/1 -apple-system,"Segoe UI",system-ui,sans-serif; }
.adm-cardedit svg{ width:13px; height:13px; }
.adm-staffnote{ display:flex; align-items:center; gap:12px; padding:12px 16px; margin:0 0 18px; border-radius:12px; border:1px dashed rgba(134,179,33,.6); background:rgba(134,179,33,.08); color:#d6e8bc; font-size:13.5px; }
.adm-staffnote .btn{ margin-left:auto; }
@media (max-width:900px){ .adm-go{ grid-template-columns:1fr 1fr; } .adm-2{ grid-template-columns:1fr; } }
/* Live search boxes (the mockup's search pills, now real). */
label.search{ cursor:text; }
label.search input{ flex:1; min-width:0; height:100%; border:0; background:transparent; color:var(--ink); font:inherit; outline:none; }
label.search input::placeholder{ color:var(--dim); }
label.search:focus-within{ border-color:rgba(var(--grgb),.6); }
.topbar label.search + .adm-acts{ margin-left:12px; }
/* icons inside the admin notes and search boxes must never grow to their container */
.adm-staffnote svg{ width:18px; height:18px; flex:none; }
label.search svg{ width:17px; height:17px; flex:none; }
.adm-form svg, .adm-acts svg, .adm-add svg{ width:16px; height:16px; flex:none; }
.adm-check{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; cursor:pointer; }
.adm-check input{ width:18px; height:18px; accent-color:var(--green); }
.adm-savebar{ position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:14px; justify-content:flex-end; padding:14px 18px; margin:0 -4px; border-radius:14px;
background:rgba(var(--bgrgb),.92); border:1px solid var(--line2); backdrop-filter:blur(8px); }
.adm-savebar .btn svg{ width:16px; height:16px; }
/* Video thumbnails + library folders (30 Sep) */
.adm-thumb{ display:flex; gap:14px; align-items:flex-start; }
.adm-thumb > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.adm-thumb .hint{ margin-top:0; }
.adm-thprev{ width:128px; height:72px; }
.adm-thumb input[type=file]{ padding:9px 12px; height:auto; }
.adm-form .field label.adm-thclear{ display:flex; font-family:inherit; text-transform:none; letter-spacing:0; color:var(--ink); font-weight:500; font-size:13.5px; margin:0; }
.adm-flist{ display:flex; flex-direction:column; gap:8px; }
.adm-frow{ display:flex; gap:8px; align-items:center; }
.adm-frow .inp{ flex:1; min-width:0; }
.adm-fcount{ color:var(--muted); font-size:13px; min-width:70px; }
.adm-frem{ font-weight:500; font-size:13.5px; margin-left:6px; }
.adm-fchips{ margin-bottom:14px; }
.adm-fchips .chip, .lib-chips .chip{ background:transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.adm-fchips .chip.on, .lib-chips .chip.on{ background:var(--ink); color:#000; }
@media (max-width:600px){ .adm-frow{ flex-wrap:wrap; } .adm-frow .inp{ flex-basis:100%; } .adm-thumb{ flex-direction:column; } }
/* Staff on phones: the admin bar must not pull the members-area menu up over the page, it stays a bottom bar. */
@media (max-width:760px){ body.has-sb .side{ top:auto; height:auto; } }
/* ---------- Cookie consent banner (only rendered when GA4 is armed) ----------
Built from the site's own pieces: the kick pill, the display heading with its
green line, the btn-g / btn-o pills and the text-link, on a glass panel with
the same green glow the hero uses. */
.cc{ position:fixed; left:16px; right:16px; bottom:16px; z-index:190; max-width:500px; margin-inline:auto;
padding:22px 22px 20px; border-radius:var(--r2); border:1px solid rgba(var(--grgb),.28);
background:radial-gradient(120% 100% at 0% 0%, rgba(var(--grgb),.13), transparent 55%), rgba(14,16,14,.94);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 40px -18px var(--gglow); }
.cc[hidden]{ display:none; }
.cc-k{ height:28px; padding:0 12px; font-size:13px; }
.cc-h{ font-size:28px; margin:14px 0 10px; color:var(--ink); }
.cc-h em{ font-style:normal; color:var(--green); white-space:nowrap; }
.cc-t{ font-size:15px; line-height:1.55; color:var(--muted); }
.cc-a{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cc-a .btn{ margin:0; width:auto; }
.cc-l{ margin-left:auto; font-size:14px; }
@media (max-width:480px){
.cc{ left:10px; right:10px; bottom:10px; padding:18px 18px 16px; }
.cc-h{ font-size:23px; margin:12px 0 8px; }
.cc-t{ font-size:14px; }
.cc-a .btn{ flex:1 1 0; }
.cc-l{ margin:6px 0 0; }
}
/* =====================================================================
Laptop, tablet and phone fit (30 Sep). The design was drawn for a 1440+
wide, 900 tall screen; these rules cover the screens below that.
The big word on the free lesson cards is sized in site.js (fitWords).
===================================================================== */
/* The slanted headline lines were cut off at the left by their own clip box,
worst when a line wraps onto two. Give the clip box room at the sides only,
the rise-in animation still clips top and bottom. */
.hero h1 .line{ padding-inline:.3em; margin-inline:-.3em; }
/* 761 to 1100 wide had no menu at all: the links were hidden and the burger
only showed on phones. Same dropdown as the phone menu, the two buttons
stay in the bar. */
@media (min-width:761px) and (max-width:1100px){
.nav .bar{ position:relative; }
.nav .acts{ margin-left:auto; }
.burger{ display:flex; margin-left:0; }
.nav.open ul{ display:flex; position:absolute; top:calc(100% + 8px); left:0; right:0; flex-direction:column; gap:0; padding:10px;
border-radius:22px; background:rgba(10,12,10,.96); border:1px solid var(--line2); }
.nav.open ul a{ display:flex; padding:14px 12px; font-size:16px; color:var(--ink); }
}
/* Laptop widths: a wider gutter, so the hero photo and its badge are not
pressed against the edge of the screen. */
@media (min-width:1101px){ .wrap{ width:min(var(--wrap),100% - 96px); } }
/* Short laptop screens: size the hero off the height of the screen so the
headline, both buttons and the photo sit above the fold. */
@media (min-width:1101px) and (max-height:900px){
.hero{ padding:clamp(96px,14.5vh,130px) 0 clamp(30px,7vh,70px); }
.hero h1{ font-size:clamp(38px,min(4.9vw,7.8vh),78px); margin:clamp(12px,2.4vh,22px) 0 clamp(14px,2.8vh,26px); }
.hero .cta{ margin-top:clamp(20px,3.8vh,34px); }
.hero-link{ margin-top:clamp(12px,2.5vh,22px); }
.hero .proof{ margin-top:clamp(18px,4.6vh,44px); }
.hero-visual{ height:min(70vh,720px); }
}
/* Phone menu: the two buttons were placed by a fixed offset and sat across the
bottom edge of the menu panel, on top of the page. The open bar now grows
into one panel holding the links and the buttons, however many links there are. */
@media (max-width:760px){
.nav.open .bar{ flex-wrap:wrap; height:auto; padding:8px 8px 14px 16px; row-gap:6px; border-radius:24px;
background:rgba(10,12,10,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--line2); }
.nav.open ul{ position:static; order:3; flex:0 0 100%; margin:0; padding:0; border:0; border-radius:0; background:none; }
.nav.open ul a{ padding:13px 0; }
.nav.open .acts{ position:static; order:4; flex:0 0 100%; padding:6px 8px 0 0; }
/* The hero badge is 96px on a phone but its EST 2016 was set bigger than on desktop, over the ring of words. */
.badge-est b{ font-size:12.5px; }
}
/* Compare table on a phone: the package names are in the wide display face and
the third one ran out of the table. The body face at the same weight, sized
off the screen width, fits all three down to a 320 wide phone. */
@media (max-width:680px){
.compare.cmp3 .cmp-h, .compare.cmp3 .cmp-r{ grid-template-columns:1.2fr 1fr 1fr 1fr; }
.compare.cmp3 .cmp-h b{ font-family:var(--body); font-weight:800; font-size:clamp(8.5px,2.7vw,11.5px); letter-spacing:0; padding:0; overflow-wrap:anywhere; }
}
/* The smallest phones (320 to 380 wide): two display words were wider than their
half-width tile, and the one-line link under the figures forced its column
wider than half the screen, pushing the second column off the edge. */
@media (max-width:380px){
.cred-row b{ font-size:20px; }
.cred-link{ grid-column:1 / -1; }
.bt-b b{ font-size:15px; }
}
/* ---------- Two-step login (setup + code) ---------- */
.ts-steps{ margin:0 0 18px; padding:0 0 0 20px; color:var(--muted); font-size:14px; line-height:1.55; }
.ts-steps li{ margin-bottom:7px; }
.ts-steps li::marker{ color:var(--green); font-weight:700; }
.ts-qr{ display:flex; align-items:center; justify-content:center; width:200px; height:200px; margin:0 auto 16px;
padding:10px; border-radius:var(--r); background:#fff; border:1px solid var(--line2); }
.ts-qr img, .ts-qr canvas{ width:100% !important; height:100% !important; display:block; }
.ts-qr table{ width:100%; height:100%; }
.ts-qr.is-empty{ background:var(--panel2); border-style:dashed; }
.ts-manual{ margin:0 0 18px; }
.ts-manual summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); padding:4px 0; }
.ts-manual summary:hover{ color:var(--green); }
.ts-manual p{ font-size:13.5px; margin:8px 0 0; }
.ts-key{ font-family:var(--mono); font-size:16px; font-weight:700; letter-spacing:.12em; word-break:break-all;
color:var(--ink); background:var(--panel2); border:1px solid var(--line2); border-radius:10px; padding:11px 13px; }
.inp.ts-code{ text-align:center; font-size:26px; font-weight:700; letter-spacing:.34em; text-indent:.34em; padding:14px 12px; }
.inp.ts-code:focus{ border-color:var(--green); box-shadow:0 0 0 3px var(--gglow); }
@media (max-width:420px){
.ts-qr{ width:170px; height:170px; }
.inp.ts-code{ font-size:22px; letter-spacing:.26em; text-indent:.26em; }
}
/* ---------------------------------------------------------------------------
Two-step setup on a phone (added 1 Oct 2026).
You cannot point a phone camera at its own screen, so the QR is useless to
anyone enrolling ON their phone, which is how most people do it. Paul hit
exactly this and had to type the 32-character key by hand. On a phone we show
a tappable otpauth:// link that hands the account straight to the authenticator
app; on a computer we show the QR. The typed key stays available to both,
because not every app registers the otpauth:// scheme.
--------------------------------------------------------------------------- */
.ts-open, .ts-open-note{ display:none; }
.ts-aside{ font-size:12.5px; color:var(--dim); text-align:center; margin:0 0 18px; text-wrap:balance; }
@media (max-width:760px){
.ts-open{ display:flex; align-items:center; justify-content:center; width:100%; min-height:52px;
padding:0 18px; margin:0 0 10px; border-radius:12px; background:var(--green);
color:var(--on-green); font-weight:700; font-size:15px; text-align:center; }
.ts-open-note{ display:block; }
.ts-qr, .ts-qr-note{ display:none; }
}
/* ---------------------------------------------------------------------------
Admin nav on a phone (added 1 Oct 2026).
Eleven nav items shared the width at flex:1, so every label truncated to one
character plus an ellipsis: Education library, Exercise library and Enquiries
all read "E...", and Calculators, Coach's corner and Consult calls all read
"C...". Let each item keep a usable width and scroll the bar sideways instead,
so the labels can be told apart. The part-visible item at the edge is the
scroll affordance. Also drops the second Log out: the staff bar across the top
of every admin screen already has one, and two on one screen is confusing.
justify-content is set to flex-start because space-around on an overflowing
flex row can push the first item out of reach.
--------------------------------------------------------------------------- */
@media (max-width:760px){
.side nav{ justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.side nav::-webkit-scrollbar{ display:none; }
.side nav a{ flex:0 0 auto; min-width:86px; }
.side > form{ display:none; }
}
/* ---------------------------------------------------------------------------
Admin nav on a phone, part two (1 Oct 2026, settled on the fourth attempt
against a real iPhone). Two things Paul reported:
1. Nothing said the bar scrolls sideways. There is a fade and chevron at BOTH
edges, each shown only while there is something that way: site.js toggles
.has-prev / .has-more off the real scroll event. If that script never runs
both stay hidden, which is the safe way round, because no affordance is
better than one that lies.
2. A strip of live page showed BELOW the bar while scrolling on iOS (his
screenshot had a client's email address sitting in it). THREE CSS attempts
failed before the actual cause turned up in the HTML, so read this before
touching the bar again:
✗ An absolutely positioned skirt hanging below the bar. On iOS a
bottom-fixed bar is promoted to its own composited layer, and a child
falling entirely outside the parent's bounds can be clipped out of it.
✗ A box-shadow offset downwards. A zero-spread shadow draws a COPY OF THE
BOX at the offset, so offsetting further than the bar's own height opens
a gap exactly where the band is. Rejected before shipping.
✗ Pushing the bar's own box 160px below the viewport with matching
padding. Verified in Chrome, still wrong on the phone.
THE ACTUAL CAUSE WAS `viewport-fit=cover` IN THE LAYOUT'S VIEWPORT META,
not the CSS of the bar at all. It extends the layout viewport under iOS
Safari's floating bottom chrome, so a bar at `bottom:0` no longer ends
where the screen visibly ends and live page content shows in the gap.
It is removed from `layouts/admin.php` and `layouts/member.php`.
Found by comparing against the Harcon Solutions site, whose `.mbar` has
the same fixed bottom bar and does NOT show this, and whose only
structural difference was that viewport meta.
⚠ `layouts/base.php` (the PUBLIC site) still has `viewport-fit=cover` and
must keep it. It has no bottom bar, so it does not have this problem, and
that site is signed off and responsive-passed. Do not "tidy" it to match.
The bar itself is therefore left exactly as `style.css` has it: fixed,
bottom:0, solid background, padding-bottom carrying env(safe-area-inset-
bottom). Same shape as Harcon's, which is proven on Paul's own phone.
The chevrons are pinned to `top:0; height:70px`, the real nav row (8px of
padding-top plus the 54px item height), rather than stretched with bottom:0.
If `.side nav a`'s height ever changes, that 70px has to change with it.
--bar-bg exists because a gradient cannot use background:inherit, and the
admin and member layouts use different bar colours.
--------------------------------------------------------------------------- */
.side{ --bar-bg:var(--bg2); }
.admin .side{ --bar-bg:#0a0b0a; }
@media (max-width:760px){
.side{ overflow:visible; }
/* right edge: fade + chevron, only while there is more bar to the right */
.side::before{ content:""; position:absolute; top:0; height:70px; right:0; width:54px; z-index:3;
pointer-events:none; opacity:0; transition:opacity .18s ease;
background:url("data:image/svg+xml;utf8,") no-repeat right 8px center / 11px 17px,
linear-gradient(90deg, rgba(0,0,0,0), var(--bar-bg) 64%); }
.side.has-more::before{ opacity:1; }
/* left edge: the same mirrored, only once you have scrolled away from the start */
.side::after{ content:""; position:absolute; top:0; height:70px; left:0; width:54px; z-index:3;
pointer-events:none; opacity:0; transition:opacity .18s ease;
background:url("data:image/svg+xml;utf8,") no-repeat left 8px center / 11px 17px,
linear-gradient(270deg, rgba(0,0,0,0), var(--bar-bg) 64%); }
.side.has-prev::after{ opacity:1; }
}
/* ---------------------------------------------------------------------------
Admin and members area on a phone: APP SHELL (1 Oct 2026).
WHY THIS EXISTS. Paul reported live page content showing in a strip below the
fixed bottom bar on his iPhone. FIVE attempts to make the bar's background
cover that strip all failed:
✗ an absolutely positioned ::after skirt hanging below the bar
✗ a downward box-shadow (a zero-spread shadow copies the BOX at the offset,
so offsetting past the bar's height opens a gap where the band is)
✗ pushing the bar's own box 160px below the viewport with matching padding
✗ removing viewport-fit=cover from the layout (a real difference against the
Harcon site, but not the cause here)
✗ suspecting body{overflow-x:clip}
The last one was RULED OUT ON HIS DEVICE: a standalone test page toggling that
property gave identical readings either way (`gap below bar: 0px`, nothing
leaking) and **did not reproduce the bug at all**. So the construction is
sound and the fault is specific to this app's page.
So stop painting over the gap. On a phone these two layouts are now a proper
app shell: the body is one full-height column, `.main` scrolls inside itself,
and the bar is simply the last row of that column. **There is no longer any
"below the bar" for anything to show through, and no fixed positioning on the
bar for iOS to get wrong.** This is immune to whatever the root cause was.
`100dvh` is the point: it tracks Safari's collapsing toolbar, which `100vh`
does not. `100vh` is kept first as the fallback for anything older.
`.side` is `position:relative`, NOT `static`: the edge chevrons are absolutely
positioned against it, and static would send them to the wrong ancestor.
`order` is needed because `