:root { --aa-navy: #262e4d; --aa-navy-deep: #171d35; --aa-gold: #a0895e; --aa-gold-light: #c4ac82; --aa-gold-ink: #765d2b; --aa-cream: #f3eee7; --aa-paper: #fbfaf8; --aa-white: #fff; --aa-ink: #20263c; --aa-body: #3a3f4d; --aa-muted: #615d68; --aa-line: rgba(38, 46, 77, .14); --aa-line-strong: rgba(38, 46, 77, .25); --aa-shadow: 0 18px 48px rgba(38, 46, 77, .11); --aa-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --aa-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --aa-body-font: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; --aa-max: 1240px; --aa-gutter: clamp(1.1rem, 4vw, 3rem); --aa-section: clamp(3.5rem, 7vw, 6.8rem); --aa-radius: 16px; --aa-ease: cubic-bezier(.25, 1, .5, 1); /* * 0.1.38 (T-0138, DEC-79): the fixed site header's height, owned in ONE place. * * The Elementor header is `position: fixed`, `z-index: 99` and 77px tall, and it does not shrink on scroll. * Anything that pins to the top of the viewport, or that an anchor scrolls to, has to clear it. Every other * element already did, each with its own hard-coded number: `.aa-booking` used 96px here and 88px on the * course surface, `.aa-section` used 100px. The anchor bar alone was given 0, so it pinned UNDERNEATH the * header and was painted, pinned and invisible. That is the defect the owner reported. * * 96px is the number `.aa-booking` already uses on this surface. It is reused deliberately so the bar lines * up with the sidebar beside it instead of introducing a third constant. `.aa-offering` re-points this token * to 88px in course.css, matching `.aa-offering .aa-booking` there. * * THE HEADER'S HEIGHT AT NARROW WIDTHS IS NOT MEASURED. The diagnosis could not resize the window, so 77px * is a desktop reading only. That is exactly why this is a token and not a literal: if a deploy measures a * different header at 768 or 390, override `--aa-head-offset` in one media query rather than editing two * stylesheets. */ --aa-head-offset: 96px; /* * The anchor bar's own height, measured at 62px on the rendered page. A scroll target must clear the header * AND the bar, or a jump link lands its heading behind the bar that has just pinned above it, which would * trade an invisible bar for broken navigation. */ --aa-jump-nav-h: 62px; /* * 0.1.39 (T-0139, DEC-85): the height of the WordPress admin bar, and 0 when there is not one. * * This is a SEPARATE token from --aa-head-offset on purpose, and the reason is a cascade fact rather than a * preference. --aa-head-offset is re-declared on .aa-offering (course.css), so a `body.admin-bar` override of * THAT token reaches the programme surface and is then shadowed on the course surface by the very rule that * re-points it to 88px: a custom property declared on a descendant wins for its subtree whatever class an * ancestor carries. One override of --aa-head-offset therefore could not reach both surfaces. Nothing * re-declares --aa-admin-bar-h on a descendant, so it inherits from body to every consumer that this * stylesheet reaches. * * 0.1.40 (T-0140) CORRECTS A CLAIM THIS COMMENT USED TO MAKE. It said the three rules below were "the only * place the admin bar is described", and that was FALSE theme-wide even when it was written: article.css * already described it with a hard-coded `.admin-bar .aa-article__toc { top: 142px }`. The comment is how a * later lane would miss exactly that, so it is corrected here rather than softened. * * THE ADMIN BAR IS NOW DESCRIBED IN THREE STYLESHEETS, and the duplication is deliberate and load bearing: * - programme.css (here), the CANONICAL block. Reaches the programme, course, shop and commerce surfaces. * - course-calendar.css, which repeats it VERBATIM. * - article.css, which repeats it VERBATIM. * The repetition exists because of the ENQUEUE GRAPH, not by preference. functions.php registers * course-calendar.css (CalendarTemplate::enqueue) and article.css (ArticleTemplate::enqueue) with `array()`, * NO dependency on this file, and neither route is a WooCommerce surface, so Theme::isDynamicSurface() is * false and programme.css NEVER LOADS on an article or on /course-calendar/. A var(--aa-admin-bar-h, 0px) * written there without its own declaration would resolve to the 0px FALLBACK at every width, signed in and * signed out: it would read like a fix, satisfy a text-matching suite, and change nothing on the page. * commerce.css is the exception and declares nothing, because it is enqueued with array('aa-programme-theme') * and genuinely inherits this block. * The three blocks must stay IDENTICAL. tests/theme-0.1.40-checks.php extracts all three and compares them * value by value, so a drift is a failing suite rather than a surface that quietly stops matching the others. */ --aa-admin-bar-h: 0px; } /* * 0.1.39 (T-0139, DEC-85): signed in, the admin bar pushes the fixed header DOWN by its own height, so * everything that clears the header has to move down by the same amount or it sits behind it. * * Measured on the live site after 0.1.38 landed: signed in the header sits at 32 to 109 at 1280 and 46 to 123 * at 768, so the top 21px and 35px of the anchor bar were behind it, and at 1280 the Register chip read BEHIND. * Signed out the header is at 0 to 77 and the site was already correct, which is why 390 and 320 hit-tested * clean: below 600px WordPress stops fixing the admin bar, so those two widths were a direct observation of * signed-out geometry. * * The three heights and the two breakpoints are READ FROM WORDPRESS CORE, wp-includes/css/admin-bar.css, not * from memory: `#wpadminbar { height: 32px; position: fixed }`, then `@media screen and (max-width: 782px)` * raises it to 46px, then `@media screen and (max-width: 600px)` sets `position: absolute`, at which point the * bar scrolls away with the page and displaces nothing. * * WHY THE LAST RULE MUST EXIST. Below 600px the admin bar is not fixed, so adding its height would push the bar * and every scroll target 46px too far down and break the one case that is currently correct. The term returns * to 0 there, which makes this release a no-op at 390 and 320 and for every signed-out visitor at every width. * * Source order, not min-width arithmetic, resolves the overlap: at 500px both media rules match and the last * one wins. Equal specificity, so do not reorder them. */ body.admin-bar { --aa-admin-bar-h: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --aa-admin-bar-h: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --aa-admin-bar-h: 0px; } } .aa-programme-runtime { background: var(--aa-paper); color: var(--aa-body); font-family: var(--aa-body-font); font-size: 17px; line-height: 1.68; margin: 0; overflow-x: clip; } .aa-programme-runtime *, .aa-programme-runtime *::before, .aa-programme-runtime *::after { box-sizing: border-box; } .aa-programme-runtime img { display: block; max-width: 100%; } .aa-programme-runtime :where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--aa-gold); outline-offset: 4px; } .aa-shell { width: min(100%, var(--aa-max)); margin-inline: auto; padding-inline: var(--aa-gutter); } .aa-section { padding-block: var(--aa-section); scroll-margin-top: calc(var(--aa-head-offset, 96px) + var(--aa-admin-bar-h, 0px) + var(--aa-jump-nav-h, 62px)); } .aa-section--white { background: var(--aa-white); border-block: 1px solid var(--aa-line); } .aa-section--paper { background: var(--aa-paper); } .aa-section--navy { color: #fff; background: linear-gradient(145deg, var(--aa-navy) 0%, var(--aa-navy-deep) 100%); } .aa-programme-runtime :where(h1, h2, h3) { color: var(--aa-ink); font-family: var(--aa-serif); font-weight: 600; letter-spacing: -.012em; margin: 0; } .aa-programme-runtime h1 { font-size: clamp(2.65rem, 5.2vw, 5.25rem); line-height: .98; } .aa-programme-runtime h2 { font-size: clamp(2rem, 3.6vw, 3.35rem); line-height: 1.04; } .aa-programme-runtime h3 { font-size: clamp(1.28rem, 2vw, 1.65rem); line-height: 1.2; } .aa-section--navy :where(h2, h3) { color: #fff; } .aa-kicker { color: var(--aa-gold-ink); font-family: var(--aa-sans); font-size: .78rem; font-weight: 700; letter-spacing: .13em; margin: 0 0 .7rem; text-transform: uppercase; } .aa-section--navy .aa-kicker { color: var(--aa-gold-light); } .aa-lede { color: var(--aa-body); font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.65; max-width: 60ch; } .aa-lede p { margin: 1rem 0 0; } .aa-prose { color: var(--aa-body); font-size: 1.08rem; max-width: 68ch; } .aa-prose > *:first-child { margin-top: 0; } .aa-prose > *:last-child { margin-bottom: 0; } .aa-section--navy .aa-prose { color: rgba(255, 255, 255, .82); } /* * 0.1.42 (T-0142, A11Y, WCAG 2.0 level A, 1.4.1 Use of Colour): links in body prose were * distinguishable from the text around them by COLOUR ALONE. This theme set no link rule for * .aa-prose at all, so a link inside stored course copy inherited the Elementor kit's global link * colour with no underline, no border and no weight change. Measured on the rendered, signed-in * page: 3 such links on the Advanced course, 1 on Level 7 Standard, not one carrying a class or an * inline style. It serves every course page that has a link in its overview. * * THE 0.1.31 HOUSE SOLUTION IS REUSED RATHER THAN A NEW ONE INVENTED. That release closed exactly * this defect on the checkout consent links: a permanent underline as the non-colour affordance, * with the colour moved onto the navy this theme already uses. The navy is 1.26:1 against the body * text, and that is the point. Colour is doing none of the work, so the underline is permanent and * is never a hover state. * * A navy link on a navy section would be invisible, so .aa-section--navy re-points it to the light * gold, 6.06:1 there, and keeps the underline. */ .aa-prose a { color: var(--aa-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; } .aa-prose a:hover, .aa-prose a:focus-visible { text-decoration-thickness: 2px; } .aa-section--navy .aa-prose a { color: var(--aa-gold-light); } /* * 0.2.6 (T-0206, FB4 C25, Lara: "quote from Priya needs to be more obviously a quote, italics and speech marks"). CAUSE: * course copy stores a quote as

quote

name, role

(1658's About text), and no rule * styled a blockquote inside .aa-prose, so Hello's reset left it as two plain paragraphs. FIX: the quote is italic in * the serif with curly quotation marks around it; with two or more paragraphs the last one is the attribution line, * upright and quieter (a or