/* ============================================================================
AnJil's Acrobatics — client theme (task ⑥-C, client layer #1)
Layered OVER the self-hosted base Bootstrap 5.3 (config brand.stylesheet).
Self-contained: no @import, no url() to any external origin, no web fonts —
so the slice-D CSP stays default-src 'self' (style-src 'self', font-src 'self',
img-src 'self' data:). Palette + furniture ported from ../anjilsacrobatics.ca.
========================================================================== */
/* ⚠ THREE purples, and choosing between them is a CONFORMANCE rule, not taste. The
variables are named for WHERE THEY GO, not what they are, because that is the only
naming that reads correctly in both `color:` and `background:` position — most of
these use sites are backgrounds, borders and icons rather than literal text.
The rule is one sentence: --anjils-accent is BRAND AND DECORATION ONLY ·
--anjils-accent-on-light is text/UI on a LIGHT background · --anjils-accent-on-dark
is the navbar (dark background). Reach for the wrong one in a new rule and you
reintroduce a WCAG AA failure that NOTHING in the test suite can catch — a colour is
not source-inspectable. Measured:
--anjils-accent #c780c7 BRAND + DECORATION ONLY — the gradient, the rules,
the accent bars, the washes. As TEXT it fails
everywhere on a light ground: 2.86 on #fff and
2.48 on #f7ebf7 (axe reports that one as 2.47).
⚠ But it PASSES at 5.14 on the #1b2a35 footer ink,
which is why the footer heading/link rules below
deliberately keep it. Do not "tidy" them.
--anjils-accent-on-light #9c4a9c anything on a LIGHT ground that is text, sits
under #fff text, or is a UI indicator.
5.42 on #fff, 4.69 on #f7ebf7: both clear AA.
--anjils-accent-on-light-hover
#8e3f8e the hover partner of the above, so the three
hover rules cannot drift apart. 6.46 on #fff,
5.59 on #f7ebf7.
--anjils-accent-on-dark #dbaedb the NAVBAR only. It sits on --anjils-primary
#264653, and on a dark ground the correcting
direction is LIGHTER, not darker: 5.32 on #264653
(was 3.52) and 7.76 on the #1b2a35 footer ink.
⚠⚠ DO NOT REUSE --anjils-accent-on-light ON THE NAVBAR. #9c4a9c on #264653 is 1.86 —
reusing the light-ground shade there would turn that near-miss into a comprehensive
failure, and it is the mistake a one-variable design makes automatically. That is
the whole reason D3 is a separate decision from D2 and this is a third variable
rather than a second use of the second one.
⚠ THE NAMING AXIS HAS A BOUNDARY, and it is not optional reading. `-on-X` names the
ground the colour is drawn on AS TEXT. In `background:` position the name does NOT
apply, and taken literally it is a trap: `.anjils-nav .btn-anjils-login` and
`.anjils-footer .footer-social-btn:hover` both paint --anjils-accent-on-light onto DARK
furniture, and both are CORRECT — what is graded there is #fff on the painted
background (5.42), not the background against its surroundings. The converse is the
dangerous direction: painting --anjils-accent-on-dark as a panel and putting #fff on
it gives 1.89, a comprehensive fail. Read every one of these names as "as text, on X".
⚠ NOT #a855a8 for the light-ground shade, and this is load-bearing: it reaches 4.64
on #fff but only 4.01 on the #f7ebf7 tint, which would leave /classes's
`.schedule-note a` still failing — the exact node axe reports at 2.47.
⚠ NEVER put --anjils-accent-on-light on the dark footer: #9c4a9c on #1b2a35 is 2.71
(#8e3f8e 2.28, #a855a8 3.17). A blind find-and-replace of the accent would take
three currently-CONFORMING footer surfaces below AA. SP-7h (D2 + D3). */
:root {
--anjils-primary: #264653; /* dark teal — headings, primary buttons */
--anjils-accent: #c780c7; /* purple — brand/decoration ONLY (see above) */
--anjils-accent-on-light: #9c4a9c; /* purple — text/UI on a LIGHT ground */
--anjils-accent-on-light-hover: #8e3f8e; /* 6.46 on #fff, 5.59 on #f7ebf7 */
--anjils-accent-on-dark: #dbaedb; /* purple — text/UI on a DARK ground (navbar) */
--anjils-accent-2: #f7ebf7; /* soft pink — icon badges, section wash */
--anjils-secondary: #e9c46a; /* golden yellow — focus/secondary */
--anjils-ink: #1b2a35; /* footer / deep ground */
--anjils-cta: #e76f51; /* coral — call-to-action buttons */
--anjils-gradient: linear-gradient(90deg, #264653 0%, #c780c7 100%);
/* TEMPLATE-DEFECTS Task 5 — RE-COLOUR the core focus ring, never re-shape it.
The geometry lives in public/assets/app.css (--sc-focus-ring-shadow); this file
supplies only the two tones, which is what keeps ONE focus idiom across the two
layers. ⚠ Do NOT set --sc-focus-ring-shadow here.
--anjils-secondary is finally doing the job its own comment above claims:
"golden yellow — focus/secondary" was an intent this file recorded in SP-7e and
never used. Measured: #e9c46a is 6.03 on #264653 and 8.79 on #1b2a35 — but only
1.67 on white and 1.45 on #f7ebf7, so it CANNOT be the whole ring. Paired with
the ink inner ring it is: gold-vs-ink is 8.79, and ink-vs-white is 14.69, so one
tone always clears 3.0 whatever is behind it. */
--sc-focus-ring-inner: var(--anjils-ink);
--sc-focus-ring-outer: var(--anjils-secondary);
}
body { color: #2b2b2b; }
h1, h2, h3, h4, h5, h6 { color: var(--anjils-primary); }
a { color: var(--anjils-accent-on-light); }
a:hover { color: var(--anjils-primary); }
/* ── Navbar (theme header) ────────────────────────────────────────────────── */
.navbar.anjils-nav {
background: var(--anjils-primary) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.anjils-nav .navbar-brand img { display: block; }
.anjils-nav .nav-link { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
/* SP-7h (D3) — the navbar accent, and the ONLY rule that may use --anjils-accent-on-dark.
⚠⚠ NOT --anjils-accent-on-light here: on this ground that swap turns a near-miss into
a comprehensive failure. Measurements live in the :root note ONLY — never copied here.
⚠ NO AUDIT CAN EVER SCORE THIS RULE — do not "verify" it with a node count. `:hover`
and `:focus` are not resting states, and `.active` is DEAD CSS: neither header partial
emits it, and nothing adds it at runtime — app.js does no classList work, and
Bootstrap's Tab/ScrollSpy, which would, have no `data-bs-spy` /
`data-bs-toggle="tab"|"pill"` markup anywhere in app/, theme/ or content/. ⚠ MARKUP
fact, not a JS one: `data-bs-spy="scroll"` on would resurrect the selector and
silently expire this reasoning. Retained deliberately regardless — it is Bootstrap's
standard current-page convention, so when current-page marking is eventually added it
renders in the on-dark shade (pass) rather than the future edit quietly reintroducing
the failure. Fixed because `:focus` is how a keyboard user navigates; evidence is the
arithmetic plus getComputedStyle on a genuinely Tab-focused link. */
.anjils-nav .nav-link:hover,
.anjils-nav .nav-link:focus,
.anjils-nav .nav-link.active { color: var(--anjils-accent-on-dark); }
.anjils-nav .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); }
.anjils-nav .btn-anjils-login {
/* SP-7h (D2) — supersedes the SP-7e note that stood here. This button is IN the
navbar but is a FILLED button carrying #fff text, so the pair that decides it is
#fff-on-background, NOT background-on-#264653. That is why it takes the
light-ground shade and not the navbar's own (lighter) treatment.
SP-7e hardcoded #a855a8 here; no declaration in this file uses that hex any more,
and its note that "the variable is left alone" no longer holds — the base is
routed through --anjils-accent-on-light so this button can never drift from the
other light-ground accent surfaces again. #a855a8's 4.64 on #fff was correct
arithmetic but the wrong test: it is only 4.01 on the #f7ebf7 tint (:root note).
Measured: #fff on #9c4a9c = 5.42, #fff on #8e3f8e = 6.46. Both clear AA. */
background: var(--anjils-accent-on-light); color: #fff; border: none; font-weight: 600;
}
.anjils-nav .btn-anjils-login:hover { background: var(--anjils-accent-on-light-hover); color: #fff; }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.anjils-hero {
background: var(--anjils-gradient);
color: #fff;
border-radius: 16px;
padding: 3rem 1.5rem;
text-align: center;
margin-bottom: 2rem;
}
.anjils-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); }
.anjils-hero p { opacity: 0.9; font-size: 1.1rem; max-width: 620px; margin: 0.75rem auto 0; }
.anjils-hero .btn-anjils-cta {
background: #fff; color: var(--anjils-primary); border: none;
font-weight: 700; margin-top: 1.25rem;
}
.anjils-hero .btn-anjils-cta:hover { background: var(--anjils-accent-2); color: var(--anjils-primary); }
.section-divider {
border: none; height: 3px; width: 60px; border-radius: 2px;
background: var(--anjils-gradient); margin: 0.5rem auto 0;
}
/* ── Info cards (contact) ─────────────────────────────────────────────────── */
.info-card {
border: none; border-radius: 12px; background: #fff;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
padding: 1.5rem; height: 100%;
display: flex; align-items: flex-start; gap: 1rem;
}
.info-icon {
width: 48px; height: 48px; border-radius: 50%;
/* the SVG inherits this via currentColor — a non-text UI component, so WCAG 1.4.11
(3.0) applies: #c780c7 on #f7ebf7 was 2.48, --anjils-accent-on-light is 4.69. */
background: var(--anjils-accent-2); color: var(--anjils-accent-on-light);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.info-icon svg { width: 22px; height: 22px; }
.info-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; }
.info-card a { color: #6c757d; text-decoration: none; }
.info-card a:hover { color: var(--anjils-accent-on-light); }
/* ── Map (self-hosted static image + directions link, NO iframe) ──────────── */
.map-wrapper {
border-radius: 12px; overflow: hidden;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
background: var(--anjils-accent-2);
}
.map-wrapper img { display: block; width: 100%; height: auto; }
.btn-anjils-directions {
/* #fff on the background is what is graded: was 2.86, now 5.42; hover was 3.80. */
background: var(--anjils-accent-on-light); color: #fff; border: none; font-weight: 600;
}
.btn-anjils-directions:hover { background: var(--anjils-accent-on-light-hover); color: #fff; }
/* ── Contact form (styles the UNTOUCHED core body — no markup change) ──────── */
.contact-form-card {
background: #fff; border-radius: 12px; padding: 1.75rem;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}
/* ⚠ THE `.contact-form-card h1 { display: none }` RULE THAT STOOD HERE IS GONE
(TEMPLATE-DEFECTS Task 6). It hid the core body's duplicate — but a hidden
heading is still in the DOCUMENT OUTLINE, and the rule was action-at-a-distance
disabling markup declared in another layer, one CSS edit away from being visible
again. The core body now steps down to when a view sets $theme_owns_page_title
(this theme's contact view does, right before it requires that body), so there is
exactly one — the hero's — and nothing left to hide.
⚠ Do NOT "restore" this rule pointed at h2 with `display: none`. That is not the same
edit with a different selector: display:none REMOVES the element from the
accessibility tree, so the form would lose its only heading — the duplicate-
defect traded for a missing-label one.
VISUALLY-HIDDEN INSTEAD, and the distinction is the whole point. This theme already
renders a visible Send Us a Message
immediately above the card, so showing
the core body's "Contact us" as well would put two titles on one form — a visible
change to this page that nothing asked for. Clipping it keeps the heading in the
DOCUMENT OUTLINE and in the ACCESSIBILITY TREE (where it labels the form) while the
visible design is unchanged from before this fix. Same technique the schedule grid's
day names use. */
.contact-form-card h2 {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.contact-form-card form label {
display: block; font-weight: 600; color: var(--anjils-primary);
margin-bottom: 1rem;
}
.contact-form-card form input[type="text"],
.contact-form-card form input[type="email"],
.contact-form-card form textarea {
display: block; width: 100%; margin-top: 0.35rem;
padding: 0.55rem 0.75rem; font-size: 1rem; line-height: 1.5;
color: #212529; background: #fff;
border: 1px solid #ced4da; border-radius: 0.5rem;
}
.contact-form-card form input:focus,
.contact-form-card form textarea:focus {
/* The border still carries the brand (var(--anjils-accent-on-light) on #fff), but it
is no longer the ONLY indicator.
⚠ THIS RULE WAS A SECOND, INDEPENDENT INSTANCE OF THE SP-7h DEFECT, found while
fixing the first. It set `outline: none` and drew its ring with
`rgba(156,74,156,0.25)` — translucent, so it composited down to the ground exactly
the way Bootstrap's rgba(13,110,253,.25) did. Killing the outline and replacing it
with a wash is the same mistake in the client layer.
It now takes the shared two-tone opaque ring. The `outline: none` is replaced by
the transparent outline the core rule uses, so forced-colors mode still paints an
indicator. tests/FocusRingTest.php fences the whole file against a third instance. */
border-color: var(--anjils-accent-on-light);
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: var(--sc-focus-ring-shadow);
}
.contact-form-card form button[type="submit"] {
background: var(--anjils-accent-on-light); color: #fff; border: none; font-weight: 700;
padding: 0.6rem 1.25rem; border-radius: 0.5rem; width: 100%;
}
.contact-form-card form button[type="submit"]:hover { background: var(--anjils-accent-on-light-hover); }
/* ok / err banners (core outputs
/
) */
.contact-form-card p[role="status"],
.contact-form-card p[role="alert"] {
border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.contact-form-card p[role="status"] { background: #d1e7dd; color: #0f5132; }
.contact-form-card p[role="alert"] { background: #f8d7da; color: #842029; }
/* ── Footer (theme) ───────────────────────────────────────────────────────── */
.anjils-footer { background: var(--anjils-ink); color: rgba(255, 255, 255, 0.8); }
/* SP-7e (D7): these were TAG selectors, and the footer headings became
/ to fix the site-wide `heading-order` failure.
The class half is what keeps the look: without it the accent colour, the
1.1rem/0.75rem sizes, the letter-spacing and the uppercase all stop applying and
the headings fall back to `h1..h6 { color: var(--anjils-primary) }` above -
#264653 on the #1b2a35 footer, which is all but invisible. The tag half is kept
so a plain / here would still be styled. Measured on the accent:
#c780c7 on --anjils-ink #1b2a35 = 5.14:1, so these pass AA unchanged. */
.anjils-footer h5,
.anjils-footer .h5 { color: var(--anjils-accent); font-size: 1.1rem; letter-spacing: 0.5px; }
.anjils-footer h6,
.anjils-footer .h6 {
color: var(--anjils-accent); font-size: 0.75rem; letter-spacing: 1.5px;
text-transform: uppercase;
}
.anjils-footer .footer-link { color: rgba(255, 255, 255, 0.65); text-decoration: none; }
.anjils-footer .footer-link:hover { color: var(--anjils-accent); }
.anjils-footer .footer-muted { color: rgba(255, 255, 255, 0.5); }
.anjils-footer .footer-social-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75);
}
/* ⚠ This footer rule DOES change, unlike the three above it, and the reason is that on
hover the button is FILLED and carries #fff — so the graded pair is #fff-on-background
(2.86 -> 5.42), not accent-on-ink. The headings/links above are the accent AS TEXT on
#1b2a35, where the accent already passes at 5.14. */
.anjils-footer .footer-social-btn:hover { background: var(--anjils-accent-on-light); color: #fff; }
.anjils-footer .footer-social-btn svg { width: 18px; height: 18px; }
.anjils-footer .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
}
/* ============================================================================
Marketing content pages — About / Classes / Gallery / Privacy / Terms
(task ⑦-B, client layer). Rendered inside app/views/page.php's
(About/Classes/legal) or theme/views/pages/
gallery.php (Gallery). All furniture is class-based — the pages carry NO
inline style/script (enforcing CSP) and NO icon font (studio-core loads none).
========================================================================== */
/* Section rhythm inside a content page */
.content-page .page-section,
.page-section { padding: 2.5rem 0; }
.content-page section:first-child { margin-top: 0.5rem; }
/* Page hero (reuses .anjils-hero; left a touch tighter on inner pages) */
.page-hero { margin-bottom: 1rem; }
/* ── CTA button + band (shared by every marketing page) ─────────────────────── */
.btn-cta-primary {
background: var(--anjils-cta); color: #fff; border: none; font-weight: 700;
}
.btn-cta-primary:hover, .btn-cta-primary:focus { background: #d65a3c; color: #fff; }
.cta-band {
background: var(--anjils-gradient); color: #fff;
border-radius: 16px; padding: 2.5rem 1.5rem; text-align: center; margin-top: 1rem;
}
.cta-band h2, .cta-band .h4 { color: #fff; }
.cta-band p { opacity: 0.92; max-width: 560px; margin-left: auto; margin-right: auto; }
/* ── About: coach cards ─────────────────────────────────────────────────────── */
.coach-card {
border-radius: 12px; overflow: hidden; height: 100%;
background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}
.coach-card-header { background: var(--anjils-gradient); color: #fff; padding: 1.25rem 1.5rem; }
.coach-card-header h3 { color: #fff; }
.coach-role { display: block; font-size: 0.85rem; opacity: 0.85; }
.coach-card-body { padding: 1.5rem; }
.coach-card-body p { color: #555; line-height: 1.8; }
.cert-badges { margin-bottom: 0; }
.cert-badge {
display: inline-flex; align-items: center; gap: 0.35rem;
background: var(--anjils-accent-2); color: var(--anjils-primary);
border-radius: 20px; padding: 0.3rem 0.75rem;
font-size: 0.8rem; font-weight: 600; margin: 0.2rem 0.15rem;
}
/* generated TEXT on the #f7ebf7 badge — 2.48 before, 4.69 now. */
.cert-badge::before { content: "\2713"; color: var(--anjils-accent-on-light); font-weight: 700; }
.cert-badge-alt { background: #fdf6e3; }
.cert-badge-alt::before { content: "\2605"; color: var(--anjils-secondary); }
/* ── About: philosophy band + stats ─────────────────────────────────────────── */
.philosophy-band {
background: var(--anjils-gradient); color: #fff;
border-radius: 16px; padding: 2.5rem 1.75rem; margin: 1rem 0;
}
.philosophy-band p { opacity: 0.92; font-size: 1.05rem; line-height: 1.85; }
.philosophy-eyebrow {
text-transform: uppercase; letter-spacing: 2px; opacity: 0.7;
font-size: 0.78rem; text-align: center; margin-bottom: 1rem;
}
.philosophy-quote {
font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; font-style: italic; color: #fff;
border-left: 5px solid var(--anjils-secondary); padding-left: 1.25rem; margin-bottom: 1.5rem;
}
/* 32px/800 is "large text", but 2.86 failed even the relaxed 3.0 threshold.
⚠ Four instances render. While this was FAILING, axe graded only three: the one whose
text is the single character "2" fell to `incomplete` ("Element content is too short
to determine if it is actual text content"), so a violation count could never have
proved it fixed. Verify all four by getComputedStyle.
(Measured, axe 4.12.1: before = 3 violations + that 1 incomplete; after = all four
unreported. The short-text heuristic only fires when contrast is insufficient, so
the node is NOT permanently incomplete — an earlier revision of this comment and
spec §4.3 rule 2 both state that mechanism wrongly. SP-7h §1.4.) */
.stat-num { font-size: 2rem; font-weight: 800; color: var(--anjils-accent-on-light); line-height: 1.1; }
.stat-label { font-size: 0.85rem; color: #6c757d; }
/* ── Classes: benefits + programme cards + schedule note ────────────────────── */
.benefit-card {
background: #fff; border-radius: 12px; padding: 1.5rem 1rem; height: 100%;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
}
.class-type-card {
background: #fff; border-radius: 12px; overflow: hidden; height: 100%;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.class-type-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.class-type-accent { height: 6px; background: linear-gradient(90deg, var(--anjils-accent), var(--anjils-primary)); }
.class-type-card--feature .class-type-accent { background: linear-gradient(90deg, #d48a47, var(--anjils-secondary)); }
.class-type-body { padding: 1.5rem; }
.schedule-note {
background: var(--anjils-accent-2); border-radius: 12px; padding: 1.75rem;
border-left: 5px solid var(--anjils-accent);
}
.schedule-note h3 { color: var(--anjils-primary); }
/* ── Legal pages (Privacy / Terms) ──────────────────────────────────────────── */
.legal-updated { font-size: 0.95rem; opacity: 0.85; }
.legal-body {
max-width: 780px; margin: 0 auto;
background: #fff; border-radius: 12px; padding: 2rem;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
}
.legal-body h2 {
font-size: 1.1rem; font-weight: 700; color: var(--anjils-primary);
margin-top: 2rem; margin-bottom: 0.5rem;
}
.legal-body p, .legal-body li { color: #555; line-height: 1.8; }
.legal-body ul { padding-left: 1.25rem; }
/* ── Gallery grid (theme/views/pages/gallery.php) ───────────────────────────── */
.gallery-grid .gallery-item {
display: block; border-radius: 10px; overflow: hidden; position: relative;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}
.gallery-grid .gallery-item img {
width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;
display: block; transition: transform 0.3s ease;
}
.gallery-grid .gallery-item:hover img,
.gallery-grid .gallery-item:focus img { transform: scale(1.05); }