/* ============================================================
STOKE-ON-TRENT CITY COUNCIL - Active Stoke
activestoke.co.uk
Production Stylesheet - activestoke.css
Structural conversion of the live Active Stoke CSS
============================================================
This file is the live stylesheet for Active Stoke.
It is being brought into the Stoke estate CSS structure so a
maintainer can move between Stoke, recruitment, Homes, and
Active Stoke without re-learning where the contract, runtime,
accessibility, and inherited selector layers live.
The selector contract already exists and must stay stable.
This is an inherited production file with duplicated blocks,
hard-coded values, and local component rules that still need to
be lifted into the shared estate model without breaking the live
HTML contract.
THE RULE:
- do not rename live selectors
- do not redesign the site freehand
- do not hide Active Stoke-only values inside the shared contract
- do lift repeated design values into named tokens
- do keep OS/browser preference behaviour visible in S02
- do expose the shared runtime and ACE hook layer clearly
- do keep accessibility corrections visible and auditable
============================================================
TABLE OF CONTENTS
============================================================
S01 :root - Token Block
S01a Root Metadata and Brand Palette
S01b Neutral Palette
S01c Semantic Colour Tokens
S01d Typography
S01e Borders, Radius, Focus, Motion
S01f Active Stoke Site-Specific Tokens
S01n Runtime State Contract and ACE Hooks
S02 prefers-* and Device Root Overrides
S02a prefers-reduced-motion
S02b prefers-contrast: more
S02c prefers-contrast: less
S02d forced-colors: active
S02e touch targets
S02f prefers-reduced-transparency
S02g prefers-color-scheme: dark
S02h prefers-reduced-data
S02i inverted-colors
S03 Inherited Selector Layer
S03a Header and Navigation
S03b Page Layout and Shared Content
S03c Feature Components, Tables, Utilities, and Site Additions
S-Acc Accessibility Amendments
S-ActiveStoke Active Stoke-only Notes
============================================================
HOW TO WORK IN THIS FILE
============================================================
-- FILE STRUCTURE ------------------------------------------------
S01 :root
This is the contract layer. Shared semantic tokens,
Active Stoke-specific aliases, runtime bridge tokens,
and ACE engine-entry hooks all live here. If a value
should be reusable, stateful, or engine-visible, start
here first.
S02 prefers-* overrides
This is the automatic accessibility layer. These blocks
state what the site should do before any future explicit
engine state is applied. If an OS or browser preference
should change a token automatically, change it here first.
S03 and below
This is the inherited selector-response layer. Keep the
live HTML contract intact. Prefer lifting values into
tokens and extending existing touching points before
inventing new selector answers.
-- WHERE NEW CODE GOES ------------------------------------------
S01
New token, new shared role, new engine-facing hook, or an
Active Stoke-only value that still belongs in the root
contract. Put it in the right subsection and comment it.
S02
Automatic OS/browser preference behaviour. Use this for
prefers-color-scheme, prefers-contrast, reduced motion,
reduced transparency, reduced data, and forced-colors work.
Existing selector sections
If the component already has a truthful hook in the live
CSS, extend it there rather than scattering a second
answer later in the file.
S-Acc or S-ActiveStoke
If a rule exists specifically to protect accessibility,
keep it visible in S-Acc. If it is truthful only to this
site, keep it visibly in the Active Stoke-specific area.
============================================================
LIVE-SAFE EDITING RULES
============================================================
1. Inspect the real rendered HTML when behaviour is unclear.
2. Prefer an existing touching point before adding a new selector.
3. If a new selector is necessary, prefer an existing live class
from the rendered site rather than inventing a new class name.
4. Keep shared estate contract tokens visually separate from
Active Stoke-only aliases and values.
5. If a future shared engine would need the hook, publish it
plainly in S01n rather than hiding it in a local subsection.
6. If a fix is specifically for accessibility, keep it visible
rather than burying it silently in an older rule.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
/* ============================================================
S01 - :ROOT TOKEN BLOCK
============================================================
This is the single source of truth for named values in the
Active Stoke live stylesheet.
Shared semantic tokens come first.
Active Stoke-only aliases stay visibly separate.
Runtime metadata and ACE exact-name hooks remain explicit so a
future shared engine or human maintainer can scan this block
without translation work.
============================================================ */
:root {
/* --- S01a: ROOT METADATA AND BRAND PALETTE
Start with the browser/root metadata and the estate-facing brand
anchors this file should publish in the same scan pattern as the
other estate conversions. */
color-scheme: light; /* base browser form/chrome theme */
--brand-primary: #063d54;
--brand-primary-dark: #05374c;
--brand-primary-soft: #0b516d;
--brand-secondary: #415e6a;
--brand-accent: #c24924;
--brand-highlight: #ffca08;
--brand-teal: #4cc3c3;
--brand-purple: #7e3a9e;
--brand-white: #ffffff;
--brand-black: #000000;
/* --- S01b: NEUTRAL PALETTE */
--neutral-900: #0b1f27;
--neutral-800: #1b263b;
--neutral-700: #2c3e47;
--neutral-600: #555555;
--neutral-500: #777777;
--neutral-400: #bbbbbb;
--neutral-300: #cccccc;
--neutral-200: #efedf0;
--neutral-150: #e6f0f4;
--neutral-100: #e6f7f8;
--neutral-0: #ffffff;
/* --- S01c: SEMANTIC COLOUR TOKENS
These are the names selector rules should increasingly read wherever
practical. Shared semantic names stay primary so future runtime code
sees the same contract across sites. */
--color-background: var(--neutral-0);
--color-surface: var(--neutral-0);
--color-surface-subtle: var(--neutral-150);
--color-surface-muted: var(--neutral-200);
--color-surface-strong: var(--brand-primary);
--color-surface-strong-alt: var(--brand-secondary);
--color-surface-inverse: var(--brand-primary-dark);
--color-text: var(--neutral-900);
--color-text-strong: var(--neutral-900);
--color-text-muted: var(--neutral-700);
--color-text-inverse: var(--brand-white);
--color-link: var(--brand-primary);
--color-link-hover: var(--brand-primary-dark);
--color-link-accent: var(--brand-teal);
--color-border: var(--neutral-400);
--color-border-strong: var(--brand-primary);
--color-action: var(--brand-primary);
--color-action-hover: var(--brand-black);
--color-action-text: var(--brand-white);
--color-action-hover-text: var(--brand-white);
--color-action-secondary: var(--color-surface-strong-alt);
--color-action-secondary-hover: var(--brand-primary-dark);
--color-action-secondary-text: var(--brand-white);
--color-action-secondary-hover-text: var(--brand-white);
--color-disabled-bg: var(--neutral-200);
--color-disabled-text: var(--neutral-600);
--color-shadow-soft: rgba(0, 0, 0, 0.14);
--color-shadow-raised: rgba(0, 0, 0, 0.22);
/* Site specific (ACE adaptation needed)
These names still sit in the shared semantic layer because live
selectors depend on them, but their values are Active Stoke-only. */
--color-breadcrumb-bg: var(--brand-secondary);
--color-table-surface: var(--brand-primary);
--color-table-row-alt: var(--neutral-150);
--color-alert-surface: #efedf0;
--color-alert-action: var(--brand-purple);
--color-join-surface: orangered;
--color-header-bg: var(--neutral-150);
--color-overlay: rgba(255, 255, 255, 0.92);
--color-speaking-highlight: rgba(76, 195, 195, 0.22); /* Active Stoke talkback highlight */
--color-speaking-border: rgba(6, 61, 84, 0.72); /* Active Stoke talkback border */
/* --- S01d: TYPOGRAPHY */
--font-family-base: "Urbanist", "Nunito Sans", sans-serif;
--font-family-alt: "Nunito Sans", sans-serif;
--font-size-base: 1rem;
--line-height-base: 1.5;
--line-height-body: var(--line-height-base);
--font-weight-body: 600;
--font-weight-strong: 800;
--font-weight-body-accessibility: var(--font-weight-body);
--font-weight-strong-accessibility: var(--font-weight-strong);
/* --- S01e: BORDERS, RADIUS, FOCUS, MOTION */
--border-width-base: 1px;
--border-width-strong: 3px;
--radius-sm: 0.375rem;
--radius-md: 0.75rem;
--focus-outline-color: var(--brand-primary);
--focus-outline-width: 0.1875rem;
--focus-outline-offset: 0.1875rem;
--focus-shadow: 0 0 0 0.1875rem var(--brand-white);
--transition-duration-fast: 0.12s;
--transition-duration-base: 0.24s;
--transition-duration-slow: 0.9s;
--transition-easing-base: ease;
--transition-fast: var(--transition-duration-fast) var(--transition-easing-base);
--transition-base: var(--transition-duration-base) var(--transition-easing-base);
--shadow-soft: 0 0.75rem 2rem var(--color-shadow-soft);
--shadow-raised: 0 1rem 2.5rem var(--color-shadow-raised);
/* --- S01f: ACTIVE STOKE SITE-SPECIFIC TOKENS
This subsection is the safe home for Active Stoke-only values that
should not be mistaken for shared estate defaults. */
--as-color-page-bg: var(--color-background);
--as-color-text: var(--color-text);
--as-color-heading: var(--color-text-strong);
--as-color-link: var(--color-link);
--as-color-link-hover: var(--color-link-hover);
--as-color-header-bg: var(--color-header-bg);
--as-color-breadcrumb-bg: var(--color-breadcrumb-bg);
--as-color-surface-strong: var(--color-surface-strong);
--as-color-surface-strong-alt: var(--color-surface-strong-alt);
--as-color-table-surface: var(--color-table-surface);
--as-color-table-row-alt: var(--color-table-row-alt);
--as-color-alert-surface: var(--color-alert-surface);
--as-color-alert-action: var(--color-alert-action);
--as-color-join-surface: var(--color-join-surface);
--as-nav-cta-surface: var(--color-action);
--as-nav-cta-surface-hover: var(--color-action-hover);
--as-nav-cta-text: var(--color-action-text);
--as-nav-cta-border: var(--color-action);
--as-nav-cta-shadow: var(--shadow-soft);
--as-nav-cta-join-surface: var(--color-join-surface);
--as-nav-cta-join-text: var(--color-text-inverse);
--as-color-table-control-hover: var(--neutral-100);
--as-color-table-control-focus: var(--brand-primary);
--as-color-table-page-current: var(--brand-primary-dark);
--as-color-table-info: var(--brand-black);
--as-color-focus: var(--focus-outline-color);
/* Birthday parties local tokens:
these values belong only to the Children and Families birthday
section shell, decoration, and local type treatment. */
--as-party-section-width: min(100%, 78rem);
--as-party-font-family: "Fredoka", "Nunito Sans", sans-serif;
--as-party-shell-bg:
radial-gradient(circle at 6% 14%, rgba(255, 202, 8, 0.28) 0 1.55rem, transparent 1.6rem),
radial-gradient(circle at 8% 38%, rgba(126, 58, 158, 0.16) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 9% 88%, rgba(255, 149, 200, 0.18) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 12% 62%, rgba(76, 195, 195, 0.18) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 18% 28%, rgba(255, 149, 200, 0.22) 0 1.05rem, transparent 1.1rem),
radial-gradient(circle at 20% 48%, rgba(255, 202, 8, 0.16) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 22% 78%, rgba(76, 195, 195, 0.22) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 29% 10%, rgba(194, 73, 36, 0.14) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 31% 62%, rgba(255, 149, 200, 0.16) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 36% 12%, rgba(194, 73, 36, 0.16) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 38% 88%, rgba(255, 202, 8, 0.18) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 43% 76%, rgba(126, 58, 158, 0.16) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 47% 54%, rgba(76, 195, 195, 0.16) 0 0.75rem, transparent 0.8rem),
radial-gradient(circle at 52% 22%, rgba(255, 202, 8, 0.18) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 58% 10%, rgba(255, 149, 200, 0.18) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 59% 66%, rgba(194, 73, 36, 0.14) 0 0.78rem, transparent 0.83rem),
radial-gradient(circle at 64% 84%, rgba(76, 195, 195, 0.18) 0 0.95rem, transparent 1rem),
radial-gradient(circle at 67% 48%, rgba(255, 202, 8, 0.15) 0 0.72rem, transparent 0.77rem),
radial-gradient(circle at 71% 30%, rgba(126, 58, 158, 0.16) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 74% 92%, rgba(255, 149, 200, 0.16) 0 0.82rem, transparent 0.87rem),
radial-gradient(circle at 78% 18%, rgba(126, 58, 158, 0.14) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 82% 82%, rgba(255, 149, 200, 0.16) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 84% 50%, rgba(76, 195, 195, 0.14) 0 0.76rem, transparent 0.81rem),
radial-gradient(circle at 88% 68%, rgba(255, 202, 8, 0.22) 0 1.25rem, transparent 1.3rem),
radial-gradient(circle at 93% 36%, rgba(76, 195, 195, 0.16) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 96% 12%, rgba(194, 73, 36, 0.14) 0 0.65rem, transparent 0.7rem),
radial-gradient(circle at 97% 84%, rgba(126, 58, 158, 0.12) 0 0.72rem, transparent 0.77rem),
linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.18) 18% 20%, transparent 20% 100%),
linear-gradient(160deg, transparent 0 72%, rgba(255, 255, 255, 0.16) 72% 74%, transparent 74% 100%),
linear-gradient(145deg, rgba(255, 202, 8, 0.22), rgba(76, 195, 195, 0.16) 55%, rgba(255, 255, 255, 0.96) 100%);
--as-party-shell-border: color-mix(in srgb, var(--brand-accent) 58%, white 42%);
--as-party-shell-shadow: var(--shadow-soft);
--as-party-shell-orb-a: rgba(255, 202, 8, 0.34);
--as-party-shell-orb-b: rgba(76, 195, 195, 0.24);
--as-party-shell-ball-shadow-a: 5.75rem 0.5rem 0 -0.3rem rgba(76, 195, 195, 0.88),
9.75rem 2.1rem 0 -0.2rem rgba(255, 149, 200, 0.82),
13.5rem -0.25rem 0 -0.45rem rgba(126, 58, 158, 0.76),
2.25rem 4.75rem 0 -0.28rem rgba(194, 73, 36, 0.72),
8rem 6rem 0 -0.36rem rgba(255, 202, 8, 0.84),
14.8rem 5.2rem 0 -0.42rem rgba(76, 195, 195, 0.7),
18.1rem 0.8rem 0 -0.26rem rgba(255, 149, 200, 0.76),
19.6rem 4.6rem 0 -0.34rem rgba(255, 202, 8, 0.78),
4.8rem 8.6rem 0 -0.28rem rgba(126, 58, 158, 0.7),
11.4rem 9.1rem 0 -0.24rem rgba(194, 73, 36, 0.66),
17rem 8.2rem 0 -0.3rem rgba(76, 195, 195, 0.68);
--as-party-shell-ball-shadow-b: 6rem -0.5rem 0 -0.25rem rgba(255, 202, 8, 0.82),
11.5rem 1.25rem 0 -0.15rem rgba(255, 149, 200, 0.78),
15.5rem -0.4rem 0 -0.35rem rgba(76, 195, 195, 0.72),
1.4rem 4.6rem 0 -0.3rem rgba(126, 58, 158, 0.66),
8.6rem 5.8rem 0 -0.26rem rgba(194, 73, 36, 0.72),
13.6rem 6rem 0 -0.3rem rgba(255, 202, 8, 0.74),
18.4rem 1.6rem 0 -0.18rem rgba(76, 195, 195, 0.68),
19.1rem 5.6rem 0 -0.28rem rgba(255, 149, 200, 0.7),
4rem 8.4rem 0 -0.22rem rgba(255, 202, 8, 0.66),
9.8rem 8.8rem 0 -0.2rem rgba(126, 58, 158, 0.62),
15.8rem 9.2rem 0 -0.24rem rgba(194, 73, 36, 0.64);
--as-party-shell-balloon-shadow: -1.4rem 7.2rem 0 -0.2rem rgba(255, 149, 200, 0.82),
3.2rem 4.8rem 0 -0.08rem rgba(255, 202, 8, 0.78),
7.8rem 7rem 0 -0.18rem rgba(76, 195, 195, 0.78),
10.9rem 3.6rem 0 -0.14rem rgba(126, 58, 158, 0.68),
15.2rem 6.4rem 0 -0.22rem rgba(194, 73, 36, 0.72),
19rem 4.4rem 0 -0.14rem rgba(255, 202, 8, 0.72),
21.4rem 6.8rem 0 -0.2rem rgba(76, 195, 195, 0.7);
--as-party-shell-padding: 1.5rem;
--as-party-shell-radius: 2.5rem 1.5rem 2.75rem 1.75rem / 1.5rem 2.5rem 1.75rem 2.75rem;
--as-party-content-expansion: 18rem;
--as-party-heading-surface: color-mix(in srgb, var(--brand-highlight) 18%, white 82%);
--as-party-heading-border: var(--brand-accent);
--as-party-subheading: var(--brand-primary);
--as-party-rule: color-mix(in srgb, var(--brand-teal) 58%, white 42%);
--as-party-button-bg: var(--brand-accent);
--as-party-button-text: var(--color-text-inverse);
--as-layout-content-max: 82rem;
--as-layout-content-width: min(88%, var(--as-layout-content-max));
--as-layout-content-width-mobile: calc(100% - (var(--as-space-inline) * 2));
--as-mobile-root-font-size: 15px;
--as-space-inline: 1rem;
--as-space-inline-lg: 1.875rem;
--as-join-offset-top: 12rem;
--as-join-offset-top-mobile: 10rem; /* was top:auto;bottom:1rem (viewport-bottom-pinned) -- 10rem restores the pre-retirement visual position (the old snippet's unconditional top:150px, at the mobile root font-size that's exactly 10rem), 2026-09-18 */
--as-join-offset-left: 0.625rem;
--as-cookie-panel-surface: var(--brand-primary-soft);
--as-hero-copy-width: 80%;
--as-hero-copy-offset: 10%;
--as-hero-copy-width-mobile: 75%;
--as-hero-copy-offset-mobile: 15%;
--as-hero-cta-bg: var(--brand-highlight);
--as-hero-cta-text: var(--brand-primary-dark);
--as-card-gap: 1.5rem;
--as-card-gap-mobile: 0.875rem;
--as-card-padding: 1.25rem;
--as-card-padding-mobile: 1rem;
--as-card-radius: 0.625rem;
--as-card-icon-size: 3.125rem;
--as-card-chip-radius: 0.25rem;
--as-card-title-margin-block: 0.3125rem;
--as-card-title-margin-inline: 0.9375rem;
--as-card-title-min-height: 6.5rem;
--as-card-title-min-height-mobile: 0;
--as-card-content-gap: 0.25rem;
--as-card-content-margin-inline: 0.9375rem;
--as-card-content-margin-bottom: 0.9375rem;
--as-card-content-margin-bottom-mobile: 0.75rem;
--as-card-panel-offset-inline: 3.125rem;
--as-card-panel-padding: 0.9375rem;
--as-button-padding-inline-wide: 1.875rem;
--as-card-width: 100%;
--as-card-width-md: 100%;
--as-card-width-sm: 100%;
--as-program-card-width-md: 100%;
--as-card-grid-columns: repeat(auto-fit, minmax(16rem, 1fr));
--as-card-grid-columns-md: repeat(2, minmax(0, 1fr));
--as-card-grid-columns-sm: 1fr;
--as-community-card-row-max: 96rem;
--as-community-card-icon-size: 3.125rem;
--as-community-card-gap: 1rem;
--as-program-image-height: 11.25rem;
--as-program-image-height-mobile: 9.5rem;
--as-program-container-margin-top-mobile: 1rem;
--as-hero-section-gap-mobile: 2.5rem; /* was 0 (fully collapsed) since the original spacer-paragraph cleanup, 2026-09 -- the hero has since been rebuilt taller/denser and 0 now reads as cramped against the section below; retuned 2026-09-18, mobile only. 2.5rem matches the desktop .program-container base margin-top (line ~2609) -- same amount of breathing room, just reachable on mobile via this scoped rule since the media-query cascade order means the base rule alone can't be relied on here. */
--as-program-card-min-height-mobile: 0;
--as-community-card-min-height-mobile: 0;
--as-summary-padding: 0.625rem;
--as-button-padding-block: 0.625rem;
--as-button-padding-inline: 0.9375rem;
--as-editor-media-max-height: 11.25rem;
--as-article-image-max-width: 80%;
--as-header-padding-top: 2.25rem;
--as-header-padding-bottom: 10.5rem; /* was 11rem -- do not shrink this from tier arithmetic alone.
Nav's real vertical footprint peaks around 1600-1700px (still two-row-wrapped there), NOT at either tier's
own boundary -- earlier attempts at a smaller/two-tier value clipped nav for real, confirmed by direct
measurement, before --as-header-nav-font-size's own ceiling was trimmed to remove the large-font+two-row
combination causing that peak. This is one flat value, ~16px above the (now lower) true worst case; there
is more spare slack at the wide (1920px+, single-row) and narrow (981px) ends as a safe trade-off. If this
ever gets revisited, verify the ENTIRE 980-1920px range at ~50px steps (not just the tier boundaries)
before trusting a smaller number, 2026-09-14. */
--as-header-height: 9.5rem; /* was 13rem -- was flooring the box well past padding-bottom's own trim, 2026-09-14 */
--as-header-inline-padding: 1.5rem;
/* Header search + nav, rebuilt 2026-09-14: ONE fluid system from 980px
(the hamburger handoff floor -- Jadu's inherited shell hides #nav and
switches to the hamburger below this, a genuine state change, not a
value we control) up to 1600px (full desktop), instead of four
separately hand-tuned tiers (desktop/tablet/compact-tablet/titlebar)
that used to snap at 1500px, ~1024px, and again at 980px. Only the
980px handoff remains a real breakpoint below. The search is still a
promoted footer element with no real DOM relationship to the header
(see the promotion-pattern comment further down and truth/Jadu.md
Section 5) -- that constraint is unchanged; this only replaces HOW
the reserved space is expressed, not the reason it exists.
Every fluid value below shares the SAME glide zone -- 980px to
1600px -- written as clamp(MIN, MIN + (MAX-MIN) * (100vw-980px)/620px,
MAX): read literally as "MIN at 980px, MAX at 1600px, straight line
between." Change the 1.5rem/2.25rem-style min/max pair to retune a
value; the 980px/1600px/620px glide-zone numbers are shared scaffolding
and should stay the same across all of them unless the zone itself is
being deliberately moved. */
--as-header-search-max-width: 36rem;
--as-header-search-min-height: 3rem;
--as-header-search-gap: 0.625rem;
--as-header-search-top: clamp(1.5rem, 1.5rem + (2.25rem - 1.5rem) * (100vw - 980px) / 620px, 2.25rem);
--as-header-search-panel-width: clamp(48%, 48% + (52% - 48%) * (100vw - 980px) / 620px, 52%);
--as-header-search-panel-right: clamp(1.5rem, 1.5rem + (2rem - 1.5rem) * (100vw - 980px) / 620px, 2rem);
--as-header-search-control-padding-block: 0.5rem;
--as-header-search-control-padding-inline: 0.875rem;
--as-header-search-button-padding-inline: 1.125rem;
--as-header-search-control-line-height: 1.2;
--as-header-search-button-font-size: 1rem;
--as-header-nav-gap-top: calc(var(--as-header-search-top) + var(--as-header-search-min-height) + var(--as-header-search-gap));
--as-header-nav-list-offset-top: 0.2em;
--as-header-nav-right-reserve: var(--as-header-inline-padding);
--as-header-logo-max-width: clamp(7rem, 7rem + (9rem - 7rem) * (100vw - 980px) / 620px, 9rem);
--as-header-nav-left-reserve: calc(var(--as-header-logo-max-width) + 2rem);
--as-header-nav-font-size: clamp(1rem, 1rem + (1.35rem - 1.1rem) * (100vw - 980px) / 620px, 1.35rem); /* max trimmed from 1.5rem 2026-09-14 -- at 1.5rem, nav could still be two-row-wrapped (below ~1900px) while also near max font size, a large-font+two-row combination the old snap-based system never produced, and the real cause of the header needing to be taller than before to avoid clipping */
--as-header-nav-link-padding-inline: clamp(0.45em, 0.45em + (1em - 0.45em) * (100vw - 980px) / 620px, 1em);
--as-header-nav-row-gap: 0.25rem;
--as-header-titlebar-padding-top: 1.5rem;
--as-header-titlebar-padding-bottom: 6rem;
--as-header-desktop-logo-offset-top: -0.5rem;
--as-header-titlebar-logo-offset-left: 0;
--as-header-mobile-search-top: 7.25rem;
--as-header-mobile-search-gap: 0.5rem;
--as-header-mobile-search-field-share: 3fr;
--as-header-mobile-search-button-share: 1fr;
--as-header-mobile-search-button-padding-inline: 0.875rem;
--as-header-mobile-search-button-font-size: 0.95rem;
--as-header-mobile-padding-bottom: 7rem;
--as-header-subnav-divider-width: 1px;
--as-header-subnav-divider-height: 1.45rem;
--as-header-subnav-divider-color: var(--color-border);
--as-symbol-offset-top: 0;
--as-symbol-offset-left: 1.25rem;
--as-symbol-max-width: 7.5rem;
--as-symbol-mobile-max-width: 5.25rem;
--as-symbol-mobile-offset-left: calc(100vw - 6.25rem);
--as-footer-inline-padding: 5rem;
--as-footer-block-padding: 2rem;
--as-row-offset-top: -1.875rem;
--as-row-offset-left: -3.125rem;
--as-document-image-width: clamp(20rem, 32%, 26rem);
--as-document-editor-width: 55%;
--as-document-image-height: 37.5rem;
--as-home-feature-image-height: 25rem;
--as-category-feature-image-height: 18.75rem;
--as-carousel-height: 25.2rem; /* was 37.5rem -> 30rem -> 24rem -> 25.2rem (+5% for the revolver's pill/play-pause row), 2026-09-11 */
--as-carousel-heading-size: 3.25rem; /* was 4rem -- trimmed to make room for the pill/play-pause row, 2026-09-11 */
--as-carousel-heading-size-mobile: 2.25rem; /* was 2.5rem, 2026-09-11 */
--as-carousel-height-mobile-compact: 16.8rem; /* was 25rem -> 20rem -> 16rem -> 16.8rem (+5%), 2026-09-11 */
--as-carousel-heading-size-mobile-compact: 1.75rem; /* was 2rem, 2026-09-11 */
--as-carousel-cta-size: 1.75rem; /* was 2rem, 2026-09-11 */
/* Percentage of the carousel's own height, not a fixed rem offset (2026-09-11 rebuild) --
scales automatically with --as-carousel-height, so changing the height no longer needs
a hand-recalculated matching offset. See "Hero content positioning" further down. */
--as-carousel-heading-offset-top: 8%; /* was 30% -- at 24rem the heading+CTA's fixed pixel heights don't leave room for the old wide top gap, 2026-09-11 */
--as-carousel-cta-offset-top: 50%; /* was 75% then 85% then 67% -- retightened to sit snug under the (max two-line) heading now the hero is taller, measured 2026-09-11 */
--as-carousel-heading-offset-top-mobile: 15%; /* was 13%, 2026-09-18 -- nudged down, mobile only */
--as-carousel-heading-offset-top-mobile-alt: 13.4%; /* was 11.4%, 2026-09-18 -- same +2% delta, mobile only */
--as-carousel-cta-size-mobile-compact: 1rem; /* was 1.125rem, 2026-09-11 */
--as-carousel-cta-offset-top-mobile: 43%; /* was 66% -> 40% -> 43%, 2026-09-18 -- nudged down slightly, mobile only */
--as-carousel-control-size: 6.25rem;
--as-carousel-control-line-height: 18.75rem;
--as-carousel-control-hit-width: 10%;
--as-carousel-control-size-mobile-compact: 4rem;
--as-carousel-control-line-height-mobile-compact: 14.5rem;
--as-carousel-control-hit-width-mobile-compact: 14%;
--as-carousel-control-padding-inline: 1.25rem;
/* Revolver indicators (2026-09-11): named pills, not blank dots -- labels are read
from each slide's own data-pill-label at runtime, active state is JS-toggled, so
the row scales to however many slides actually exist. See S03c below. */
--as-carousel-pills-offset-bottom: 0.75rem; /* was 1.25rem -- moved closer to the true bottom edge, 2026-09-11 */
--as-carousel-pill-padding-block: 0.4rem;
--as-carousel-pill-padding-inline: 0.9rem;
--as-carousel-pill-gap: 0.5rem;
--as-carousel-pill-font-size: 0.8rem;
--as-carousel-pills-offset-bottom-mobile-compact: 0.5rem; /* was 0.75rem, 2026-09-11 */
--as-carousel-pill-padding-block-mobile-compact: 0.3rem;
--as-carousel-pill-padding-inline-mobile-compact: 0.65rem;
--as-carousel-pill-font-size-mobile-compact: 0.7rem;
/* .widget-row (the shared Bootstrap-style grid row this hero sits in) bleeds
the carousel 15px past the true viewport edge on each side below 48rem --
confirmed via getBoundingClientRect against every width in the mobile-
compact range, a fixed px value, not viewport-relative. --as-carousel-
mobile-bleed is that measured, constant compensation, folded into the
play/pause button's right offset below so it lands at the real visible
edge instead of the row's bled one. The pill row's own left/right (S03c)
deliberately mirror the button's full size+offset reservation on BOTH
sides -- not just this bleed value -- so the pills sit genuinely centred
on the true viewport rather than centred inside a box that's wider on the
left (no button) than the right (button + its offset). 2026-09-11. */
--as-carousel-mobile-bleed: 0.9375rem;
/* Revolver play/pause control (2026-09-11) -- size matches the shared .button min
touch target (2.75rem) rather than a locally invented number. */
--as-carousel-playpause-size: 2.75rem;
--as-carousel-playpause-offset-right: 0.5rem; /* was 1.25rem -> 1.25rem -- pushed tight into the corner, 2026-09-11 */
--as-carousel-playpause-offset-bottom: 0.5rem; /* was 1.25rem -> 0.75rem -- pushed tight into the corner, 2026-09-11 */
--as-carousel-playpause-size-mobile-compact: 2.25rem;
--as-carousel-playpause-offset-right-mobile-compact: calc(0.375rem + var(--as-carousel-mobile-bleed)); /* was 0.375rem alone -- undercounted the .widget-row bleed, clipping the button off-screen, 2026-09-11 */
--as-carousel-playpause-offset-bottom-mobile-compact: 0.375rem; /* was 0.5rem, 2026-09-11 */
/* Site-specific crossfade duration -- deliberately its own token rather than the
shared --transition-duration-slow, so hero timing can be tuned independently.
Reduced-motion override lives in S02a. Slowed 2026-09-11 so the fade is clearly
visible rather than snappy. */
--as-carousel-transition-duration: 3s; /* was 1.4s -> 2.2s -> 3s, 2026-09-11 */
--as-carousel-cta-padding-block: 0.5em;
--as-carousel-cta-padding-inline: 0.7em;
--as-carousel-cta-padding-block-mobile-compact: 0.45rem;
--as-carousel-cta-padding-inline-mobile-compact: 0.75rem;
--as-hero-copy-width-mobile-compact: 72%;
--as-hero-copy-offset-mobile-compact: 11%; /* was 9%, 2026-09-18 -- nudged right, mobile only */
--as-page-title-size-mobile: clamp(2rem, 9vw, 2.75rem);
--as-table-cell-padding-block: 0.875rem;
--as-table-cell-padding-inline: 1.125rem;
--as-table-cell-padding-inline-compact: 1rem;
--as-table-cell-padding-block-md: 0.75rem;
--as-table-cell-padding-inline-md: 0.875rem;
--as-table-cell-padding-block-sm: 0.625rem;
--as-table-cell-padding-inline-sm: 0.75rem;
--as-table-cell-padding-block-xs: 0.5rem;
--as-table-cell-padding-inline-xs: 0.625rem;
--as-table-filter-padding-block: 0.75rem;
--as-table-filter-padding-inline: 0.75rem;
--as-table-select-padding-top: 0.75rem;
--as-table-select-padding-right: 2.5rem;
--as-table-select-padding-bottom: 0.875rem;
--as-table-select-padding-left: 0.75rem;
--as-table-select-height: 3.75rem;
--as-table-select-height-md: 3.125rem;
--as-table-select-height-sm: 2.75rem;
--as-table-select-height-xs: 2.375rem;
--as-table-select-radius: 0;
--as-table-select-icon-offset: 0.75rem;
--as-table-select-icon-size: 1.125rem;
--as-table-select-chevron-gap-wide: 1rem;
--as-table-select-chevron-gap-narrow: 0.625rem;
--as-table-select-chevron-offset-y: 0.1875rem;
--as-table-grid-min-col: 7.5rem;
--as-table-grid-min-col-md: 6.875rem;
--as-table-grid-min-col-sm: 6.25rem;
--as-table-grid-min-col-xs: 5.625rem;
--as-table-grid-feature-col: 10rem;
--as-table-focus-ring: 0 0 0 0.1875rem rgba(42, 122, 153, 0.25);
--as-table-footer-select-min-height-sm: 2.375rem;
--as-table-paging-gap: 0.25rem;
--as-table-paging-button-radius: 0.25rem;
--as-table-paging-button-padding-block: 0.35rem;
--as-table-paging-button-padding-inline: 0.6rem;
--as-app-cta-border-width: 0.25rem;
--as-app-cta-padding-block: 0.75rem;
--as-app-cta-padding-inline: 0.875rem;
--as-app-cta-gap: 0.625rem;
--as-app-cta-media-radius: 0.375rem;
--as-app-cta-desc-margin-top: 0.375rem;
--as-app-cta-desc-margin-bottom: 0.625rem;
--as-app-store-button-inline-size: 8.5rem;
--as-app-store-button-gap: 0.625rem;
--as-layout-gutter-md: 1.875rem;
--as-layout-gutter-sm: 0.9375rem;
--as-layout-content-pad-inline: 2rem;
--as-listing-offset-inline: 2.5em;
--as-listing-offset-inline-md: 2em;
--as-listing-item-padding: 1.5rem;
--as-filter-panel-padding: 1.5rem;
--as-filter-panel-gap: 1rem;
--as-filter-panel-action-gap: 1rem;
--as-filter-panel-radius: var(--radius-md);
--as-details-margin-bottom-mobile: 1.5rem;
--as-subnav-offset-top: 6.5rem;
--as-article-row-offset-inline: 0.5em;
--as-article-media-max-width: 50%;
--as-article-header-offset-top-sm: 3.5em;
--as-article-header-offset-bottom-sm: 0.5em;
--as-dark-page-bg: #111418;
--as-dark-panel-bg: #1a2129;
--as-dark-shell-bg: #161b21;
--as-dark-shell-border: rgba(255, 255, 255, 0.18);
--as-dark-heading: #8fe7e7;
--as-dark-chip-bg: #24303a;
--as-dark-chip-text: #b8f5f5;
--as-dark-link: #8fe7e7;
--as-dark-link-hover: #ffffff;
/* --- S01n: RUNTIME STATE CONTRACT AND ACE HOOKS
Shared runtime metadata and exact ACE hooks are grouped in one
visible place so a future estate engine can target this file
without reverse-engineering local naming. */
/* Meaning guide:
appearance = theme outcome such as light/dark
palette = colour remap layer, not a rebrand
contrast = overall contrast strength
depth = shadow/elevation behaviour
transparency = translucency strength
motion = animation/transition behaviour
tint/filter = whole-page visual comfort filter system
dim-media = imagery pressure reduction
reading-mode = reading measure behaviour
reading-guide = ruler overlay
underline-links = link emphasis
landmark-mode = region-visualisation aid
talkback-mode = spoken hover/focus behaviour */
/* Expected future DOM/runtime write contract:
html[data-theme]
html[data-appearance]
html[data-palette]
html[data-contrast]
html[data-depth]
html[data-font]
html[data-tint]
html[data-filter-strength]
html[data-reader]
html[data-guide]
html[data-talkback]
html[data-bold]
html[data-motion]
html[data-transparency]
html[data-focus]
html[data-links]
html[data-landmark]
html[data-media]
html[data-spacing] */
/* System state metadata */
--state-system-appearance: light;
--state-system-contrast: default;
--state-system-motion: default;
--state-system-transparency: default;
--state-system-forced-colors: inactive;
/* User state slots */
--state-user-appearance: default;
--state-user-palette: default;
--state-user-contrast: default;
--state-user-font: default;
--state-user-motion: default;
--state-user-transparency: default;
--state-user-depth: default;
--state-user-focus: default; /* transitional -> --state-user-focus-boost */
--state-user-links: default; /* transitional -> --state-user-underline-links */
--state-user-reader: default; /* transitional -> --state-user-reading-mode */
--state-user-guide: off; /* transitional -> --state-user-reading-guide */
--state-user-bold: default; /* transitional -> --state-user-bold-text */
--state-user-media: default; /* transitional -> --state-user-dim-media */
--state-user-landmark: off; /* transitional -> --state-user-landmark-mode */
--state-user-spacing: default;
--state-user-tint: default;
--state-user-filter-strength: default;
--state-user-font-scale: 100;
--state-user-line-spacing: 100;
--state-user-paragraph-spacing: 100;
--state-user-letter-spacing: 0;
--state-user-word-spacing: 0;
--state-user-bold-level: default; /* transitional bridge */
--state-user-underline-links: default;
--state-user-reading-mode: default;
--state-user-reading-guide: off;
--state-user-talkback: off; /* transitional -> --state-user-talkback-mode */
--state-user-talkback-mode: off;
--state-user-speech-rate: 100;
--state-user-bold-text: default;
--state-user-focus-boost: default;
--state-user-landmark-level: off; /* transitional bridge */
--state-user-landmark-mode: off;
--state-user-dim-media: default;
/* Runtime defaults */
--runtime-appearance-default: system;
--runtime-palette-default: system;
--runtime-contrast-default: system;
--runtime-font-default: system;
--runtime-motion-default: system;
--runtime-transparency-default: system;
--runtime-depth-default: system;
--runtime-focus-default: system; /* transitional -> --runtime-focus-boost-default */
--runtime-links-default: system; /* transitional -> --runtime-underline-links-default */
--runtime-reader-default: system; /* transitional -> --runtime-reading-mode-default */
--runtime-bold-default: system; /* transitional -> --runtime-bold-text-default */
--runtime-media-default: system; /* transitional -> --runtime-dim-media-default */
--runtime-tint-default: system;
--runtime-filter-default: system; /* transitional -> --runtime-filter-strength-default */
--runtime-bold-text-default: system;
--runtime-focus-boost-default: system;
--runtime-underline-links-default: system;
--runtime-reading-mode-default: system;
--runtime-reading-guide-default: off;
--runtime-talkback-mode-default: off;
--runtime-speech-rate-default: 100;
--runtime-landmark-default: off; /* transitional -> --runtime-landmark-mode-default */
--runtime-dim-media-default: system;
--runtime-filter-strength-default: system;
/* Allowed runtime states */
--runtime-appearance-states: default light dark;
--runtime-palette-states: default monochrome blue aqua green yellow red orange purple pink;
--runtime-contrast-states: minus-5 minus-4 minus-3 minus-2 minus-1 default plus-1 plus-2 plus-3 plus-4 plus-5;
--runtime-depth-states: default reduced off;
--runtime-font-states: default legible dyslexia system;
--runtime-motion-states: default reduced off;
--runtime-transparency-states: default reduced off;
--runtime-tint-states: default warm cool soft monochrome dim bright;
--runtime-filter-states: default low medium high; /* transitional -> --runtime-filter-strength-states */
--runtime-reader-states: default focused; /* transitional -> --runtime-reading-mode-states */
--runtime-guide-states: off 1 3 5; /* transitional -> --runtime-reading-guide-states */
--runtime-bold-states: default level-1 level-2 level-3 level-4; /* transitional -> --runtime-bold-text-states */
--runtime-focus-states: default medium high; /* transitional -> --runtime-focus-boost-states */
--runtime-links-states: default medium high; /* transitional -> --runtime-underline-links-states */
--runtime-landmark-states: off soft clear; /* transitional -> --runtime-landmark-mode-states */
--runtime-media-states: default medium high; /* transitional -> --runtime-dim-media-states */
--runtime-talkback-states: off focus hover both; /* transitional -> --runtime-talkback-mode-states */
--runtime-speech-rate-states: 85 100 115 130;
--runtime-reading-mode-states: default focused;
--runtime-reading-guide-states: off 1 3 5;
--runtime-bold-text-states: default level-1 level-2 level-3 level-4;
--runtime-focus-boost-states: default medium high;
--runtime-underline-links-states: default medium high;
--runtime-landmark-mode-states: off soft clear;
--runtime-dim-media-states: default medium high;
--runtime-talkback-mode-states: off focus hover both;
--runtime-filter-strength-states: default low medium high;
/* Numeric runtime metadata */
--runtime-font-scale-min: 90;
--runtime-font-scale-max: 160;
--runtime-font-scale-step: 5;
--runtime-line-spacing-min: 80;
--runtime-line-spacing-max: 180;
--runtime-line-spacing-step: 5;
--runtime-paragraph-gap-min: 80;
--runtime-paragraph-gap-max: 180;
--runtime-paragraph-gap-step: 5;
--runtime-paragraph-spacing-min: 80;
--runtime-paragraph-spacing-max: 180;
--runtime-paragraph-spacing-step: 5;
--runtime-letter-spacing-min: -8;
--runtime-letter-spacing-max: 12;
--runtime-letter-spacing-step: 1;
--runtime-word-spacing-min: -10;
--runtime-word-spacing-max: 14;
--runtime-word-spacing-step: 1;
--runtime-speech-rate-min: 85;
--runtime-speech-rate-max: 130;
--runtime-speech-rate-step: 15;
/* Canonical semantic runtime bridges */
--runtime-color-page: var(--color-background); /* source: --color-background */
--runtime-color-surface: var(--color-surface); /* source: --color-surface */
--runtime-color-surface-subtle: var(--color-surface-subtle); /* source: --color-surface-subtle */
--runtime-color-surface-brand: var(--color-surface-strong); /* source: --color-surface-strong */
--runtime-color-text: var(--color-text); /* source: --color-text */
--runtime-color-text-muted: var(--color-text-muted); /* source: --color-text-muted */
--runtime-color-text-inverse: var(--color-text-inverse); /* source: --color-text-inverse */
--runtime-color-link: var(--color-link); /* source: --color-link */
--runtime-color-link-hover: var(--color-link-hover); /* source: --color-link-hover */
--runtime-color-border: var(--color-border); /* source: --color-border */
--runtime-color-border-strong: var(--color-border-strong); /* source: --color-border-strong */
--runtime-color-action: var(--color-action); /* source: --color-action */
--runtime-color-action-text: var(--color-action-text); /* source: --color-action-text */
--runtime-font-family-active: var(--font-family-base); /* source: --font-family-base */
--runtime-font-size-body: var(--font-size-base); /* source: --font-size-base */
--runtime-line-height-body: var(--line-height-body); /* source: --line-height-body */
--runtime-letter-spacing-body: 0em; /* source: none yet in Active Stoke CSS */
--runtime-word-spacing-body: 0em; /* source: none yet in Active Stoke CSS */
--runtime-reading-measure: 100%; /* source: none yet in Active Stoke CSS */
--runtime-focus-ring-color: var(--focus-outline-color); /* source: --focus-outline-color */
--runtime-focus-ring-width: var(--focus-outline-width); /* source: --focus-outline-width */
--runtime-focus-ring-offset: var(--focus-outline-offset); /* source: --focus-outline-offset */
--runtime-focus-ring-shadow: var(--focus-shadow); /* source: --focus-shadow */
--runtime-motion-fast: var(--transition-duration-fast); /* source: --transition-duration-fast */
--runtime-motion-base: var(--transition-duration-base); /* source: --transition-duration-base */
--runtime-motion-slow: var(--transition-duration-slow); /* source: --transition-duration-slow */
--runtime-motion-easing: var(--transition-easing-base); /* source: --transition-easing-base */
--runtime-overlay-surface: var(--color-overlay); /* source: --color-overlay */
--runtime-overlay-divider: 0.35; /* source: neutral default */
--runtime-overlay-disabled: 0.5; /* source: neutral default */
--runtime-overlay-dimmed: 0.5; /* source: neutral default */
--runtime-depth-shadow-soft: var(--shadow-soft); /* source: --shadow-soft */
--runtime-depth-shadow-raised: var(--shadow-raised); /* source: --shadow-raised */
--runtime-visual-filter: none; /* source: none yet in Active Stoke CSS */
--runtime-visual-tint: transparent; /* source: none yet in Active Stoke CSS */
--runtime-surface-opacity: 1; /* neutral default */
--runtime-landmark-stripe: 0px; /* placeholder until axis is live */
--runtime-landmark-outline: 0px; /* placeholder until axis is live */
--runtime-guide-height: 0rem; /* placeholder until axis is live */
--runtime-media-dim-opacity: 0; /* placeholder until axis is live */
--runtime-link-underline-thickness: auto; /* placeholder until axis is live */
/* Exact ACE engine-entry hooks */
--ace-font-scale: 1; /* neutral default; future engine writes exact token */
--ace-line-height: var(--line-height-body); /* source: --line-height-body */
--ace-paragraph-gap: 1rem; /* neutral spacing placeholder */
--ace-letter-spacing: 0em; /* neutral spacing placeholder */
--ace-word-spacing: 0em; /* neutral spacing placeholder */
--ace-reading-measure: 100%; /* neutral reading-width placeholder */
--focus-ring-colour: var(--focus-outline-color); /* source: --focus-outline-color */
--focus-ring-width: var(--focus-outline-width); /* source: --focus-outline-width */
--ace-focus-offset: var(--focus-outline-offset); /* source: --focus-outline-offset */
--ace-transition-short: var(--transition-fast); /* source: --transition-fast */
--ace-transition-base: var(--transition-base); /* source: --transition-base */
--ace-transition-long: var(--transition-duration-slow) var(--transition-easing-base); /* source: local motion tokens */
--ace-shadow-soft: var(--shadow-soft); /* source: --shadow-soft */
--ace-shadow-panel: var(--shadow-raised); /* source: --shadow-raised */
--ace-shadow-raise: var(--shadow-soft); /* source: --shadow-soft */
--ace-shadow-float: var(--shadow-raised); /* source: --shadow-raised */
--ace-surface-opacity: 1; /* neutral default */
--ace-filter-brightness: 1; /* placeholder until tint/filter axis is live */
--ace-filter-contrast: 1; /* placeholder until tint/filter axis is live */
--ace-filter-saturate: 1; /* placeholder until tint/filter axis is live */
--ace-filter-sepia: 0; /* placeholder until tint/filter axis is live */
--ace-filter-grayscale: 0; /* placeholder until tint/filter axis is live */
--ace-visual-filter: none; /* placeholder until tint/filter axis is live */
--site-visual-filter: var(--ace-visual-filter); /* source: --ace-visual-filter */
--viewport-filter-overlay: transparent; /* placeholder until tint/filter axis is live */
--viewport-filter-opacity: 0; /* placeholder until tint/filter axis is live */
--filter-strength: 1; /* placeholder until tint/filter axis is live */
--media-opacity: 1; /* placeholder until dim-media axis is live */
--media-dim-opacity: 0; /* placeholder until dim-media axis is live */
--media-blur-strength: 0px; /* placeholder until dim-media axis is live */
--media-saturation: 1; /* placeholder until dim-media axis is live */
--hero-art-opacity: 1; /* placeholder until dim-media axis is live */
--ace-landmark-colour: var(--color-action); /* source: --color-action */
--ace-landmark-stripe-width: 3px; /* neutral engine-compatible default */
--ace-landmark-stripe-opacity: 0; /* neutral engine-compatible default */
--ace-landmark-outline-opacity: 0; /* neutral engine-compatible default */
--ace-guide-height: 0rem; /* placeholder until reading-guide axis is live */
/* Site specific (ACE adaptation needed)
These hook names are shared, but the values below are tuned to the
Active Stoke site rather than being safe estate-wide defaults. */
--ace-guide-overlay: rgba(6, 61, 84, 0.08); /* Active Stoke guide overlay wash */
--ace-guide-band: rgba(76, 195, 195, 0.18); /* Active Stoke guide band tint */
--ace-guide-band-border: rgba(6, 61, 84, 0.42); /* Active Stoke guide band edge */
--guide-overlay: var(--ace-guide-overlay); /* source: --ace-guide-overlay */
--guide-band: var(--ace-guide-band); /* source: --ace-guide-band */
--guide-band-border: var(--ace-guide-band-border); /* source: --ace-guide-band-border */
--reading-guide-height: var(--ace-guide-height); /* source: --ace-guide-height */
--link-underline-thickness: 0.12em; /* Active Stoke link underline weight */
--ace-link-highlight: rgba(76, 195, 195, 0.18); /* Active Stoke underline-links emphasis wash */
--colour-speaking-highlight: var(--color-speaking-highlight); /* British spelling bridge for existing adapters */
--colour-speaking-border: var(--color-speaking-border); /* British spelling bridge for existing adapters */
}
/* ============================================================
S02 - PREFERS-* AND DEVICE ROOT OVERRIDES
============================================================
These branches respect user and device preferences without
changing the core Active Stoke identity.
Shared semantic and runtime-facing tokens are updated here first
so the rendered selector layer and the future engine contract stay
aligned.
============================================================ */
/* --- S02a: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
:root {
--state-system-motion: reduced;
--transition-duration-fast: 0s;
--transition-duration-base: 0s;
--transition-duration-slow: 0s;
--transition-fast: 0s step-start;
--transition-base: 0s step-start;
--runtime-motion-fast: 0s;
--runtime-motion-base: 0s;
--runtime-motion-slow: 0s;
--ace-transition-short: 0s step-start;
--ace-transition-base: 0s step-start;
--ace-transition-long: 0s step-start;
--as-carousel-transition-duration: 0s;
}
}
/* --- S02b: prefers-contrast: more */
@media (prefers-contrast: more) {
:root {
--state-system-contrast: plus-2;
--color-background: #ffffff;
--color-surface: #ffffff;
--color-surface-subtle: #ffffff;
--color-surface-muted: #ffffff;
--color-text: #000000;
--color-text-strong: #000000;
--color-text-muted: #000000;
--color-link: #000000;
--color-link-hover: #000000;
--color-border: #000000;
--color-border-strong: #000000;
--color-action: #ffffff;
--color-action-hover: #000000;
--color-action-text: #000000;
--color-action-hover-text: #ffffff;
--color-action-secondary: #000000;
--color-action-secondary-hover: #000000;
--color-action-secondary-text: #ffffff;
--color-action-secondary-hover-text: #ffffff;
--focus-outline-color: #000000;
--focus-shadow: 0 0 0 0.1875rem #ffffff;
--shadow-soft: none;
--shadow-raised: none;
--ace-shadow-soft: none;
--ace-shadow-panel: none;
--ace-shadow-raise: none;
--ace-shadow-float: none;
}
}
/* --- S02c: prefers-contrast: less */
@media (prefers-contrast: less) {
:root {
--state-system-contrast: minus-2;
--color-background: var(--neutral-100);
--color-surface: var(--neutral-0);
--color-surface-subtle: var(--neutral-150);
--color-surface-muted: var(--neutral-200);
--color-text: #2f2f2f;
--color-text-strong: #1a1a1a;
--color-text-muted: #666666;
--color-link: var(--brand-primary);
--color-link-hover: var(--brand-primary-soft);
--color-border: var(--neutral-300);
--shadow-soft: none;
--shadow-raised: none;
--ace-shadow-soft: none;
--ace-shadow-panel: none;
--ace-shadow-raise: none;
--ace-shadow-float: none;
}
}
/* --- S02d: forced-colors: active */
@media (forced-colors: active) {
:root {
--state-system-forced-colors: active;
--state-system-contrast: plus-5;
--color-background: Canvas;
--color-surface: Canvas;
--color-surface-subtle: Canvas;
--color-surface-muted: Canvas;
--color-surface-strong: ButtonFace;
--color-text: CanvasText;
--color-text-strong: CanvasText;
--color-text-muted: CanvasText;
--color-text-inverse: ButtonText;
--color-link: LinkText;
--color-link-hover: LinkText;
--color-border: CanvasText;
--color-border-strong: CanvasText;
--color-action: ButtonFace;
--color-action-hover: Highlight;
--color-action-text: ButtonText;
--color-action-hover-text: HighlightText;
--color-action-secondary: ButtonFace;
--color-action-secondary-hover: Highlight;
--color-action-secondary-text: ButtonText;
--color-action-secondary-hover-text: HighlightText;
--focus-outline-color: Highlight;
--focus-shadow: none;
--shadow-soft: none;
--shadow-raised: none;
--runtime-color-page: var(--color-background);
--runtime-color-surface: var(--color-surface);
--runtime-color-surface-subtle: var(--color-surface-subtle);
--runtime-color-surface-brand: var(--color-surface-strong);
--runtime-color-text: var(--color-text);
--runtime-color-text-muted: var(--color-text-muted);
--runtime-color-text-inverse: var(--color-text-inverse);
--runtime-color-link: var(--color-link);
--runtime-color-link-hover: var(--color-link-hover);
--runtime-color-border: var(--color-border);
--runtime-color-border-strong: var(--color-border-strong);
--runtime-color-action: var(--color-action);
--runtime-color-action-text: var(--color-action-text);
--runtime-overlay-surface: Canvas;
--runtime-overlay-divider: 1;
--runtime-overlay-disabled: 1;
--runtime-overlay-dimmed: 1;
--ace-shadow-soft: none;
--ace-shadow-panel: none;
--ace-shadow-raise: none;
--ace-shadow-float: none;
--ace-surface-opacity: 1;
--ace-guide-overlay: Canvas;
--ace-guide-band: Highlight;
--ace-guide-band-border: HighlightText;
--ace-link-highlight: Highlight;
--color-speaking-highlight: Highlight;
--color-speaking-border: HighlightText;
--colour-speaking-highlight: var(--color-speaking-highlight);
--colour-speaking-border: var(--color-speaking-border);
}
}
/* --- S02e-S02i: Remaining automatic branches */
@media (hover: none), (pointer: coarse) {
a,
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
min-height: 3rem;
}
}
/* --- S02f: prefers-reduced-transparency */
@media (prefers-reduced-transparency: reduce) {
:root {
--state-system-transparency: reduced;
--color-overlay: rgba(255, 255, 255, 1);
--runtime-overlay-surface: var(--color-overlay);
--runtime-overlay-divider: 1;
--runtime-overlay-disabled: 1;
--runtime-overlay-dimmed: 1;
--runtime-surface-opacity: 1;
--shadow-soft: none;
--shadow-raised: none;
--ace-shadow-soft: none;
--ace-shadow-panel: none;
--ace-shadow-raise: none;
--ace-shadow-float: none;
--ace-surface-opacity: 1;
}
}
/* --- S02g: prefers-color-scheme: dark */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--state-system-appearance: dark;
/* Shared semantic dark contract */
--color-background: #0b1f27;
--color-surface: #1b263b;
--color-surface-subtle: #2c3e47;
--color-surface-muted: #415e6a;
--color-text: #f3f8fa;
--color-text-strong: #ffffff;
--color-text-muted: #d7e2e8;
--color-text-inverse: #ffffff;
--color-link: #8fe7e7;
--color-link-hover: #ffffff;
--color-border: #9db4bf;
--color-border-strong: #8fe7e7;
--color-action: #0b516d;
--color-action-hover: #2a7a99;
--color-action-text: #ffffff;
--color-action-hover-text: #ffffff;
--focus-outline-color: #ffffff;
--focus-shadow: 0 0 0 0.1875rem #000000;
--shadow-soft: 0 0.75rem 2rem rgba(0, 0, 0, 0.34);
--shadow-raised: 0 1rem 2.5rem rgba(0, 0, 0, 0.44);
/* Active Stoke content headings keep the site's brighter dark-mode emphasis. */
--as-color-heading: var(--as-dark-heading);
/* Birthday parties local dark adaptation:
keep the local shell and decorative field on the same token path
rather than solving dark mode with late selector patches. */
--as-party-shell-bg:
radial-gradient(circle at 6% 14%, rgba(255, 202, 8, 0.14) 0 1.55rem, transparent 1.6rem),
radial-gradient(circle at 8% 38%, rgba(126, 58, 158, 0.08) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 9% 88%, rgba(255, 149, 200, 0.1) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 12% 62%, rgba(143, 231, 231, 0.08) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 18% 28%, rgba(255, 149, 200, 0.12) 0 1.05rem, transparent 1.1rem),
radial-gradient(circle at 20% 48%, rgba(255, 202, 8, 0.08) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 22% 78%, rgba(143, 231, 231, 0.12) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 29% 10%, rgba(194, 73, 36, 0.09) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 31% 62%, rgba(255, 149, 200, 0.08) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 36% 12%, rgba(194, 73, 36, 0.12) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 38% 88%, rgba(255, 202, 8, 0.1) 0 1.1rem, transparent 1.15rem),
radial-gradient(circle at 43% 76%, rgba(126, 58, 158, 0.1) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 47% 54%, rgba(143, 231, 231, 0.08) 0 0.75rem, transparent 0.8rem),
radial-gradient(circle at 52% 22%, rgba(255, 202, 8, 0.1) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 58% 10%, rgba(255, 149, 200, 0.09) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 59% 66%, rgba(194, 73, 36, 0.08) 0 0.78rem, transparent 0.83rem),
radial-gradient(circle at 64% 84%, rgba(143, 231, 231, 0.1) 0 0.95rem, transparent 1rem),
radial-gradient(circle at 67% 48%, rgba(255, 202, 8, 0.07) 0 0.72rem, transparent 0.77rem),
radial-gradient(circle at 71% 30%, rgba(126, 58, 158, 0.1) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 74% 92%, rgba(255, 149, 200, 0.08) 0 0.82rem, transparent 0.87rem),
radial-gradient(circle at 78% 18%, rgba(126, 58, 158, 0.1) 0 0.8rem, transparent 0.85rem),
radial-gradient(circle at 82% 82%, rgba(255, 149, 200, 0.1) 0 0.85rem, transparent 0.9rem),
radial-gradient(circle at 84% 50%, rgba(143, 231, 231, 0.08) 0 0.76rem, transparent 0.81rem),
radial-gradient(circle at 88% 68%, rgba(255, 202, 8, 0.12) 0 1.25rem, transparent 1.3rem),
radial-gradient(circle at 93% 36%, rgba(143, 231, 231, 0.09) 0 0.7rem, transparent 0.75rem),
radial-gradient(circle at 96% 12%, rgba(194, 73, 36, 0.08) 0 0.65rem, transparent 0.7rem),
radial-gradient(circle at 97% 84%, rgba(126, 58, 158, 0.07) 0 0.72rem, transparent 0.77rem),
linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.06) 18% 20%, transparent 20% 100%),
linear-gradient(160deg, transparent 0 72%, rgba(255, 255, 255, 0.05) 72% 74%, transparent 74% 100%),
linear-gradient(145deg, rgba(11, 81, 109, 0.52), rgba(36, 48, 58, 0.9) 60%, rgba(26, 33, 41, 0.98) 100%);
--as-party-shell-border: color-mix(in srgb, var(--as-dark-heading) 58%, var(--as-dark-shell-border) 42%);
--as-party-shell-shadow: var(--shadow-raised);
--as-party-shell-orb-a: rgba(255, 202, 8, 0.12);
--as-party-shell-orb-b: rgba(143, 231, 231, 0.14);
--as-party-shell-ball-shadow-a: 5.75rem 0.5rem 0 -0.3rem rgba(143, 231, 231, 0.48),
9.75rem 2.1rem 0 -0.2rem rgba(255, 149, 200, 0.46),
13.5rem -0.25rem 0 -0.45rem rgba(126, 58, 158, 0.44),
2.25rem 4.75rem 0 -0.28rem rgba(194, 73, 36, 0.42),
8rem 6rem 0 -0.36rem rgba(255, 202, 8, 0.5),
14.8rem 5.2rem 0 -0.42rem rgba(143, 231, 231, 0.4),
18.1rem 0.8rem 0 -0.26rem rgba(255, 149, 200, 0.42),
19.6rem 4.6rem 0 -0.34rem rgba(255, 202, 8, 0.44),
4.8rem 8.6rem 0 -0.28rem rgba(126, 58, 158, 0.4),
11.4rem 9.1rem 0 -0.24rem rgba(194, 73, 36, 0.36),
17rem 8.2rem 0 -0.3rem rgba(143, 231, 231, 0.38);
--as-party-shell-ball-shadow-b: 6rem -0.5rem 0 -0.25rem rgba(255, 202, 8, 0.46),
11.5rem 1.25rem 0 -0.15rem rgba(255, 149, 200, 0.42),
15.5rem -0.4rem 0 -0.35rem rgba(143, 231, 231, 0.4),
1.4rem 4.6rem 0 -0.3rem rgba(126, 58, 158, 0.38),
8.6rem 5.8rem 0 -0.26rem rgba(194, 73, 36, 0.38),
13.6rem 6rem 0 -0.3rem rgba(255, 202, 8, 0.42),
18.4rem 1.6rem 0 -0.18rem rgba(143, 231, 231, 0.38),
19.1rem 5.6rem 0 -0.28rem rgba(255, 149, 200, 0.38),
4rem 8.4rem 0 -0.22rem rgba(255, 202, 8, 0.36),
9.8rem 8.8rem 0 -0.2rem rgba(126, 58, 158, 0.34),
15.8rem 9.2rem 0 -0.24rem rgba(194, 73, 36, 0.34);
--as-party-shell-balloon-shadow: -1.4rem 7.2rem 0 -0.2rem rgba(255, 149, 200, 0.46),
3.2rem 4.8rem 0 -0.08rem rgba(255, 202, 8, 0.44),
7.8rem 7rem 0 -0.18rem rgba(143, 231, 231, 0.44),
10.9rem 3.6rem 0 -0.14rem rgba(126, 58, 158, 0.36),
15.2rem 6.4rem 0 -0.22rem rgba(194, 73, 36, 0.38),
19rem 4.4rem 0 -0.14rem rgba(255, 202, 8, 0.4),
21.4rem 6.8rem 0 -0.2rem rgba(143, 231, 231, 0.38);
--as-party-heading-surface: color-mix(in srgb, var(--as-dark-shell-bg) 78%, var(--brand-highlight) 22%);
--as-party-heading-border: var(--brand-highlight);
--as-party-subheading: var(--as-dark-heading);
--as-party-rule: color-mix(in srgb, var(--as-dark-heading) 64%, transparent 36%);
--as-party-button-bg: var(--brand-highlight);
--as-party-button-text: var(--brand-primary-dark);
--runtime-color-page: var(--color-background);
--runtime-color-surface: var(--color-surface);
--runtime-color-surface-subtle: var(--color-surface-subtle);
--runtime-color-text: var(--color-text);
--runtime-color-text-muted: var(--color-text-muted);
--runtime-color-text-inverse: var(--color-text-inverse);
--runtime-color-link: var(--color-link);
--runtime-color-link-hover: var(--color-link-hover);
--runtime-color-border: var(--color-border);
--runtime-color-border-strong: var(--color-border-strong);
--runtime-color-action: var(--color-action);
--runtime-color-action-text: var(--color-action-text);
--ace-shadow-soft: var(--shadow-soft);
--ace-shadow-panel: var(--shadow-raised);
--ace-shadow-raise: var(--shadow-soft);
--ace-shadow-float: var(--shadow-raised);
/* Site specific (ACE adaptation needed)
These values stay truthful to the Active Stoke shell and feature
surfaces even though their names sit in the shared semantic layer. */
--color-breadcrumb-bg: #2c3e47;
--color-table-surface: #0b516d;
--color-table-row-alt: #1b263b;
--color-alert-surface: #2d2136;
--color-alert-action: #a56bc2;
--color-join-surface: #c24924;
--ace-guide-overlay: rgba(0, 0, 0, 0.18);
--ace-guide-band: rgba(76, 195, 195, 0.18);
--ace-guide-band-border: rgba(255, 255, 255, 0.32);
--ace-link-highlight: rgba(76, 195, 195, 0.18);
--color-speaking-highlight: rgba(76, 195, 195, 0.22);
--color-speaking-border: rgba(255, 255, 255, 0.6);
--colour-speaking-highlight: var(--color-speaking-highlight);
--colour-speaking-border: var(--color-speaking-border);
}
}
/* --- S02h: prefers-reduced-data */
@media (prefers-reduced-data: reduce) {
.join,
.join a {
animation: none !important;
transition: none !important;
}
}
/* --- S02i: inverted-colors */
@media (inverted-colors: inverted) {
img,
video,
iframe {
filter: none;
}
}
/* ============================================================
S03 - INHERITED SELECTOR LAYER
============================================================
The live selector body begins here. This first draft still carries
inherited production structure and repeated blocks, but the section
map above is now the standard we continue migrating toward.
============================================================ */
.urbanist, body {
font-family: "Urbanist", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
/* --- S03a: HEADER AND NAVIGATION
Inherited Active Stoke shell and primary navigation rules.
These selectors are live-contract sensitive and should be
normalised through tokens over time rather than renamed. */
#nav ul ul {
position: initial;
top: 100%;
margin-top: 1em;
left: -9999em;
border-radius: var(--radius-sm);
list-style: none;
margin: calc(-0.5em + 1px) 0 0 1px;
padding: 0;
width: 11em;
margin-top: var(--as-header-nav-list-offset-top);
font-size: 0.9em;
width: 100%;
background-color: rgb(255 255 255 / 0%);
box-shadow:none;
float: none;
max-width: 100%;
}
/* Desktop keeps the primary category rail aligned to the promoted
search column. Tablet media queries below deliberately take over
wrapping and seam-position behaviour for the tighter two-row state. */
#nav > ul > li > ul.list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
row-gap: var(--as-header-nav-row-gap);
}
/* Nav positioning, rebuilt 2026-09-14: ONE absolute-positioned rule, valid
continuously from wide desktop down to the 980px hamburger handoff --
see the token comment above (S01f) for the fluid glide-zone this reads
from. No separate margin-based "desktop mode" and absolute "tablet
mode" to keep visually in sync by hand any more. */
#header nav {
font-size: var(--as-header-nav-font-size);
height: inherit;
line-height: inherit;
position: absolute;
clear: none;
top: var(--as-header-nav-gap-top);
right: var(--as-header-nav-right-reserve);
width: calc(100% - var(--as-header-nav-left-reserve) - var(--as-header-nav-right-reserve));
max-width: calc(100% - var(--as-header-nav-left-reserve) - var(--as-header-nav-right-reserve));
margin: 0;
}
#header nav > ul > li a:not(.button) {
color: var(--color-text-inverse);
display: inline-block;
min-height: 2em;
height: auto;
text-decoration: none;
display: none;
border: 0;
}
#header nav > ul > li {
display: block;
float: none;
width: 100%;
max-width: none;
}
#nav ul ul li {
position: static;
padding: 0;
display: block;
float: left;
}
#nav > ul > li > ul.list > li {
position: relative;
float: none;
}
#nav ul .list li:nth-of-type(4){display:none}
#nav > ul > li > ul > li a:hover {
/* background: #C24924; */
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-link-accent);
}
#nav > ul > li > ul.list > li + li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: var(--as-header-subnav-divider-width);
height: var(--as-header-subnav-divider-height);
transform: translateY(-50%);
background: linear-gradient(
to bottom,
transparent 0%,
var(--as-header-subnav-divider-color) 18%,
var(--as-header-subnav-divider-color) 82%,
transparent 100%
);
pointer-events: none;
}
#nav > ul > li > ul > li a:not(.button) {
color: var(--color-text);
display: block;
padding: 0.15em var(--as-header-nav-link-padding-inline);
border-radius: 0;
transition: none;
border: 0;
font-size: var(--as-header-nav-font-size);
font-style: normal;
font-weight: 800;
}
#nav > ul > li > ul > li a:not(.button):hover {
text-decoration: underline 3px var(--color-link-hover);
}
#nav ul li:hover ul:before, #nav ul li.hover ul:before {
content: '';
display: none;
position: absolute;
left: 25%;
margin-left: -10px;
top: -5px;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
/*SP STYLING FOR HEADER*/
#header .container {
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: var(--as-header-inline-padding);
padding-right: var(--as-header-inline-padding);
/* text-align: right; */
/* padding: 0 .5em 0 2em; */
}
main#main {
padding: 0;
}
#header .container #nav li li {
display: flex;
font-size: small;
}
a.logo {
max-width: var(--as-header-logo-max-width);
float: left;
}
#header .h1 {
display: none;
}
#header {
position: relative;
background: var(--as-color-header-bg);
border-bottom: none;
padding: var(--as-header-padding-top) 0 var(--as-header-padding-bottom) 0;
min-height: var(--as-header-height);
text-align: center;
}
.symbol img {
margin-top: var(--as-symbol-offset-top);
margin-left: var(--as-symbol-offset-left);
max-width: var(--as-symbol-max-width);
}
@media screen and (min-width:981px) {
a.logo {
margin-top: var(--as-header-desktop-logo-offset-top);
}
}
.container {
width: 100%;
display: inline-block;
}
.index-modular .widget-row:not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
.homepage-modular article#content .widget-row:not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
button.button.button--primary {
background: var(--color-action);
}
/* Promoted search pattern
The only live search form is rendered in the footer markup and
visually promoted into the header shell. Keep the positioning
truthfully attached to the footer form rather than pretending
the form exists inside #header. */
#header {
height: var(--as-header-height);
}
#footer {
position: inherit;
padding: var(--as-footer-block-padding) 0;
}
#footer .row .col-12 section {
position: absolute;
top: var(--as-header-search-top);
right: var(--as-header-search-panel-right);
left: auto;
transform: none;
width: min(var(--as-header-search-panel-width), var(--as-header-search-max-width));
max-width: var(--as-header-search-max-width);
z-index: 20;
}
#footer .site-search {
text-align: left;
}
footer#footer {
padding: 0 var(--as-footer-inline-padding);
}
#copyright li:nth-child(2) {
display: none;
}
#main {
background: var(--color-surface);
}
.row {
margin-top: var(--as-row-offset-top);
margin-left: var(--as-row-offset-left);
}
.category-modular .row .widget-row:not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
.category-modular #main header h1, .document-article #main header h1, .homepage-modular #main header h1 {
background-color: var(--as-color-surface-strong);
padding: 0.1em 1em;
color: var(--color-text-inverse);
margin-top: 15px;
}
nav.breadcrumb {
background-color: var(--as-color-breadcrumb-bg);
padding: 0.2em 1em 0.1em 1em;
color: var(--color-text-inverse);
}
nav.breadcrumb a {
color: var(--color-text-inverse);
font-weight: bold;
}
.widget .list--navigation a.list__link {
background: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: 1em;
}
ul.list.list--navigation {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
padding-left: 0;
margin-left: -0.5em;
}
.widget .list--navigation li.list__item {
list-style: none;
margin: 1em .1em;
}
/*DOCUMENT PAGE WIDTH + HIDE SIDEBAR*/
.document-article .col-8.col-12-medium {
width: 100%;
}
.document-article .col-4.col-12-medium {
width: 0;
display: none;
}
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
/* home image fill, capped at 250px */
.index-modular .widget-image {
width: 100%;
height: clamp(140px, 28vw, 250px); /* responsive, never > 250px */
}
/* Ensure the ancestors propagate that definite height for home image fill and cap */
.index-modular .widget-image .image-link,
.index-modular .widget-image .image {
display: block;
height: 100%;
}
/* The ![]()
fills the box; now object-position will pan it */
.index-modular .widget-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
margin-top: 1em;
}
.widget-navigation ul {
list-style: none;
padding-left: 0;
margin-left: -1em;
display: flex;
margin-top: 1em;
}
.widget-navigation a.list__link {
background: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: 1em;
border: var(--border-width-strong) solid var(--brand-white);
}
.box h2.widget__heading {
color: var(--as-color-surface-strong);
margin-top: 0;
margin-bottom: 0;
}
.index-modular ul, .index-modular p {
margin-bottom: 1em;
}
/*document page images*/
@media screen and (min-width:1048px){
header {
width: 100%;
float: none;
clear: both; /* Ensures header doesn't interfere */
}
/* Document intro media/copy pairing:
some Jadu document pages emit a portrait promo image followed by the
editor copy as sibling blocks. On wide viewports, centre the image
and copy as one paired group inside the article so Jadu's floated
image pattern does not pin the asset left while the text measure
drifts right and leaves an artificial gulf between the two. */
.document-article article#content:has(> .image.right + .editor) {
display: grid;
grid-template-columns:
minmax(0, 1fr)
var(--as-document-image-width)
var(--as-space-inline-lg)
minmax(
0,
calc(
var(--as-layout-content-width) - var(--as-document-image-width) - var(--as-space-inline-lg)
)
)
minmax(0, 1fr);
align-items: start;
}
.document-article article#content:has(> .image.right + .editor)::after {
content: none;
display: none;
}
.document-article article#content:has(> .image.right + .editor) > header,
.document-article article#content:has(> .image.right + .editor) > :not(header):not(.image.right):not(.editor) {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.document-article article#content:has(> .image.right + .editor) > header {
grid-column: 1 / -1;
}
.document-article article#content:has(> .image.right + .editor) > :not(header):not(.image.right):not(.editor) {
grid-column: 2 / 5;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.document-article article#content:has(> .image.right + .editor) > .image.right {
grid-column: 2;
float: none;
width: 100%;
max-width: none;
margin: 0.5rem 0 1em;
}
.document-article article#content:has(> .image.right + .editor) > .editor {
grid-column: 4;
display: flow-root;
width: auto;
max-width: none;
margin: 0.5rem 0 0;
min-width: 0;
}
.document-article article#content:has(> .image.right + .editor) > .editor > :first-child {
margin-top: 0;
}
.document-article article#content:has(> .image.right + .editor) > .image.right img {
display: block;
width: 100%;
height: auto;
max-height: var(--as-document-image-height);
object-fit: contain;
}
}
/*summary detail tags*/
details {
margin-bottom: 5px;
}
details:last-child {
margin-bottom: 10vh;
}
summary {
list-style: none;
padding: var(--as-summary-padding);
color: var(--color-text);
font-weight: bold;
border: 2px solid var(--as-color-surface-strong);
}
summary:after {
content: "+";
margin-left: 5px;
}
summary:hover {
cursor: pointer;
}
details:open > summary:after {
content: "-";
}
/* --- S03b: DOCUMENT NAVIGATION AND SUB-PAGE LISTS
Shared document/article navigation treatments used by inherited
Active Stoke content templates. */
h2#a11y-pages-in-heading {
display: none;
}
ol#pages-in-list {
list-style: none;
display: flex;
padding-left: 0;
}
#pages-in-list li.list__item.is-active {
background-color: var(--as-color-surface-strong-alt);
color: var(--color-text-inverse);
text-decoration: none;
padding: .5em;
margin-right: .5em;
}
#pages-in-list li.list__item {
background-color: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: .5em;
margin-right: .5em;
}
#pages-in-list li.list__item a{
color: var(--color-text-inverse);
text-decoration: underline;
}
#pages-in-list li.list__item a:hover{
text-decoration-thickness:2px;
}
.homepage-modular .row:first-of-type .widget-row:first-of-type .image {
display: block;
width: 100%;
height: var(--as-home-feature-image-height);
object-fit: cover;
}
.homepage-modular .row:first-of-type .widget-row:first-of-type img {
width: 100%;
height: var(--as-home-feature-image-height);
object-fit: cover;
}
body {
font-family: "Urbanist", sans-serif;
}
.container {
width: 100%;
display: inline-block;
}
.index-modular .widget-row:not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
.homepage-modular article#content .widget-row:not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
/* --- S03c: FEATURE COMPONENT - CAROUSEL
Homepage hero/carousel behaviour. This is a site-owned feature
block and will need later tokenisation rather than blind visual
rewriting. */
.box {
background: var(--color-surface);
border-bottom: solid 1px var(--color-border);
padding: 0;
}
.editor {
/* margin-left: -7px; */
}
.carousel {
width: 100%;
}
/* --- Base UL setup --- */
ul.slides {
position: relative;
width: 100%;
height: var(--as-carousel-height);
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
ul.slides input {
display: none;
}
/* --- Each slide container --- */
.slide-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity var(--as-carousel-transition-duration) ease-in-out;
pointer-events: none; /* disable interaction when hidden */
z-index: 0;
}
/* --- Active (checked) slide --- */
input:checked + .slide-container {
opacity: 1;
pointer-events: auto; /* enable links & controls */
z-index: 1;
}
/* --- Slide content --- */
.slide-image {
position: relative;
width: 100%;
height: 100%;
}
.slide-image img {
width: auto;
min-width: 100%;
height: var(--as-carousel-height);
object-fit: cover;
}
/* --- Hero content positioning (rebuilt 2026-09-11)
`top` is a percentage of the slide's own height, not a fixed rem offset -- it scales
automatically whenever --as-carousel-height changes, so heading/CTA placement never
needs hand-recalculating again. All three slides share one desktop placement, so one
rule covers them; mobile still needs its own rule for slide 1 vs 2/3 (see the @media
block further down, in the same place this used to live). */
.box.post .slide-image h2 {
position: absolute;
top: var(--as-carousel-heading-offset-top);
z-index: 5000;
opacity: 0.9;
width: var(--as-hero-copy-width);
text-align: left;
font-size: var(--as-carousel-heading-size);
color: var(--color-text-inverse);
margin-left: var(--as-hero-copy-offset);
text-shadow: 0 0 13px black;
font-weight: 900;
}
.slide-image a {
position: absolute;
top: var(--as-carousel-cta-offset-top);
z-index: 5000;
width: unset;
text-align: left;
font-size: var(--as-carousel-cta-size) !important;
color: var(--as-hero-cta-text);
background-color: var(--as-hero-cta-bg);
margin-left: var(--as-hero-copy-offset);
text-shadow: none;
padding: var(--as-carousel-cta-padding-block) var(--as-carousel-cta-padding-inline);
cursor: pointer;
text-decoration: none;
}
/* --- Carousel controls (rebuilt 2026-09-11)
True vertical centering -- top:50% + translateY(-50%) centers the whole controls bar
on the slide's own height, regardless of what that height is, instead of a fixed
margin-top hand-tuned for one specific (now outdated) carousel height. */
.carousel-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 999;
font-size: var(--as-carousel-control-size);
line-height: var(--as-carousel-control-line-height);
color: var(--color-text-inverse);
}
.carousel-controls label {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0 var(--as-carousel-control-padding-inline);
cursor: pointer;
opacity: 1;
transition: opacity var(--transition-duration-fast);
}
.slide-image:hover + .carousel-controls label {
opacity: 0.5;
}
.carousel-controls label:hover {
opacity: 1;
}
.carousel-controls .prev-slide {
width: var(--as-carousel-control-hit-width);
text-align: left;
left: 0;
}
.carousel-controls .next-slide {
width: var(--as-carousel-control-hit-width);
text-align: right;
right: 0;
}
/* --- Carousel pills (named slide indicators, built by filethreewrapper.js from
each slide's own data-pill-label -- see JS for how the active state is tracked) --- */
.carousel-pills {
position: absolute;
/* left and right deliberately mirror each other -- both reserve the play/pause
button's full footprint, even though only the right side has a button there,
so the pills are centred on the true viewport rather than skewed toward
whichever side has less reserved space. */
left: calc(var(--as-carousel-playpause-size) + var(--as-carousel-playpause-offset-right));
right: calc(var(--as-carousel-playpause-size) + var(--as-carousel-playpause-offset-right));
bottom: var(--as-carousel-pills-offset-bottom);
z-index: 999;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--as-carousel-pill-gap);
}
.carousel-pills .carousel-pill {
display: inline-block;
padding: var(--as-carousel-pill-padding-block) var(--as-carousel-pill-padding-inline);
border-radius: var(--radius-sm);
background-color: var(--brand-white);
color: var(--as-hero-cta-text);
font-size: var(--as-carousel-pill-font-size);
font-weight: bold;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast);
}
.carousel-pills .carousel-pill:hover,
.carousel-pills .carousel-pill:focus-visible {
background-color: var(--color-action-hover);
color: var(--color-action-hover-text);
}
.carousel-pills .carousel-pill.is-active {
background-color: var(--as-hero-cta-bg);
color: var(--as-hero-cta-text);
}
/* --- Carousel play/pause button --- */
.carousel-playpause {
position: absolute;
right: var(--as-carousel-playpause-offset-right);
bottom: var(--as-carousel-playpause-offset-bottom);
z-index: 999;
width: var(--as-carousel-playpause-size);
height: var(--as-carousel-playpause-size);
margin: 0;
padding: 0;
border: none;
border-radius: var(--radius-sm);
/* Deliberately NOT --as-hero-cta-bg (the highlight yellow) -- this corner of the
hero image already carries a yellow decorative shape, so the yellow pill/CTA
colour disappears into it here. brand-primary-dark is the same dark navy
already used as text colour elsewhere in this hero, so it stays in-palette. */
background-color: var(--brand-primary-dark);
color: var(--color-text-inverse);
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.carousel-playpause[data-state="paused"] {
/* Distinct from the "playing" resting colour (brand-primary-dark) so the
button's own background communicates the current state at a glance, not
just its icon/aria-label. brand-secondary is the same brand family, one
shade lighter -- clearly different, still in-palette. */
background-color: var(--brand-secondary);
}
.carousel-playpause:hover,
.carousel-playpause:focus-visible {
background-color: var(--color-action-hover);
color: var(--color-action-hover-text);
}
/* --- Keep slide content clickable --- */
.slide-image,
.slide-image * {
pointer-events: auto;
position: relative;
z-index: 2;
}
@media (max-width: 48rem) {
/* Mobile hero layout contract (rebuilt 2026-09-11 -- breakpoint aligned to 48rem/768px,
the same boundary --as-carousel-height itself switches at. Previously this used a
separate 760px breakpoint: an 8px band (761-768px) existed where the carousel had
already shrunk to mobile height but the heading/CTA still used desktop offsets,
clipping the CTA against ul.slides' overflow:hidden. `top:` percentages here scale
with whatever --as-carousel-height is active, same technique as the desktop rule. */
.slide-container:nth-of-type(1) .slide-image h2 { top: var(--as-carousel-heading-offset-top-mobile); }
.slide-container:nth-of-type(2) .slide-image h2 { top: var(--as-carousel-heading-offset-top-mobile-alt); }
.slide-container:nth-of-type(3) .slide-image h2 { top: var(--as-carousel-heading-offset-top-mobile-alt); }
.slide-image a { top: var(--as-carousel-cta-offset-top-mobile); }
.box.post .slide-image h2 {
font-size: var(--as-carousel-heading-size-mobile);
}
.slide-image a,
.slide-image h2 {
width: var(--as-hero-copy-width-mobile);
margin-left: var(--as-hero-copy-offset-mobile) !important;
}
}
/* =========================================
END CAROUSEL
========================================= */
button.button.button--primary {
background: var(--color-action);
}
/* Promoted search pattern
The only live search form is rendered in the footer markup and
visually promoted into the header shell. Keep the positioning
truthfully attached to the footer form rather than pretending
the form exists inside #header. */
#header {
height: var(--as-header-height);
}
#footer {
position: inherit;
padding: var(--as-footer-block-padding) 0;
}
#footer .row .col-12 section {
position: absolute;
top: var(--as-header-search-top);
right: var(--as-header-search-panel-right);
left: auto;
transform: none;
width: min(var(--as-header-search-panel-width), var(--as-header-search-max-width));
max-width: var(--as-header-search-max-width);
z-index: 20;
}
#footer .site-search {
text-align: left;
}
footer#footer {
padding: 0 var(--as-footer-inline-padding);
}
#copyright li:nth-child(2) {
display: none;
}
#main {
background: var(--color-surface);
}
.row {
margin-top: var(--as-row-offset-top);
margin-left: var(--as-row-offset-left);
}
/* Homepage top-edge alignment:
the homepage does not render the normal article header/breadcrumb
buffer used by interior pages, so the shared negative row offset can
pull the first content row up into the header boundary. Reset the
vertical pull only, but keep the inherited left bleed so the hero
carousel still reaches the page edge truthfully. */
.index-modular article#content > .row:first-of-type {
margin-top: 0;
margin-left: var(--as-row-offset-left);
}
@media screen and (max-width: 735px){
.row:first-of-type {margin-top: 30px; margin-left: -30px;}
}
@media screen and (min-width: 760px) {
.category-modular #main header h1, .document-article #main header h1 {
background-color: var(--as-color-surface-strong);
padding: 0.1em 1em;
color: var(--color-text-inverse);
margin-top: 15px;
}
nav.breadcrumb {
background-color: var(--as-color-breadcrumb-bg);
padding: 0.2em 1em 0.1em 1em;
color: var(--color-text-inverse);
}
nav.breadcrumb a {
color: var(--color-text-inverse);
font-weight: bold;
}
.widget .list--navigation a.list__link {
background: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: 1em;
}
ul.list.list--navigation {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
padding-left: 0;
margin-left: -0.5em;
}
.widget .list--navigation li.list__item {
list-style: none;
margin: 1em .1em;
}
/*DOCUMENT PAGE WIDTH + HIDE SIDEBAR*/
.document-article .col-8.col-12-medium {
width: 100%;
}
.document-article .col-4.col-12-medium {
width: 0;
display: none;
}
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
/* home image fill, capped at 250px */
.index-modular .widget-image {
width: 100%;
height: clamp(140px, 28vw, 250px); /* responsive, never > 250px */
}
/* Ensure the ancestors propagate that definite height for home image fill and cap */
.index-modular .widget-image .image-link,
.index-modular .widget-image .image {
display: block;
height: 100%;
}
/* The ![]()
fills the box; now object-position will pan it */
.index-modular .widget-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
margin-top: 1em;
}
.widget-navigation ul {
list-style: none;
padding-left: 0;
margin-left: -1em;
display: flex;
margin-top: 1em;
}
.widget-navigation a.list__link {
background: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: 1em;
}
.box h2.widget__heading {
color: var(--as-color-surface-strong);
margin-top: 30PX;
margin-bottom: 0;
}
.index-modular ul, .index-modular p {
margin-bottom: 1em;
}}
/*document page images*/
@media screen and (min-width:1048px){
header {
width: 100%;
float: none;
clear: both; /* Ensures header doesn't interfere */
}
/* Document intro media/copy pairing:
keep the same browser-stable document layout contract in this later
inherited duplicate block so wide document pages keep the same
centred image/copy pairing instead of reopening the old float gulf. */
.document-article article#content:has(> .image.right + .editor) {
display: grid;
grid-template-columns:
minmax(0, 1fr)
var(--as-document-image-width)
var(--as-space-inline-lg)
minmax(
0,
calc(
var(--as-layout-content-width) - var(--as-document-image-width) - var(--as-space-inline-lg)
)
)
minmax(0, 1fr);
align-items: start;
}
.document-article article#content:has(> .image.right + .editor)::after {
content: none;
display: none;
}
.document-article article#content:has(> .image.right + .editor) > header,
.document-article article#content:has(> .image.right + .editor) > :not(header):not(.image.right):not(.editor) {
width: 100%;
margin-left: 0;
margin-right: 0;
}
.document-article article#content:has(> .image.right + .editor) > header {
grid-column: 1 / -1;
}
.document-article article#content:has(> .image.right + .editor) > :not(header):not(.image.right):not(.editor) {
grid-column: 2 / 5;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.document-article article#content:has(> .image.right + .editor) > .image.right {
grid-column: 2;
float: none;
width: 100%;
max-width: none;
margin: 0.5rem 0 1em;
}
.document-article article#content:has(> .image.right + .editor) > .editor {
grid-column: 4;
display: flow-root;
width: auto;
max-width: none;
margin: 0.5rem 0 0;
min-width: 0;
}
.document-article article#content:has(> .image.right + .editor) > .editor > :first-child {
margin-top: 0;
}
.document-article article#content:has(> .image.right + .editor) > .image.right img {
display: block;
width: 100%;
height: auto;
max-height: var(--as-document-image-height);
object-fit: contain;
}
}
/*summary detail tags*/
details {
margin-bottom: 5px;
}
details:last-child {
margin-bottom: 10vh;
}
summary {
list-style: none;
padding: var(--as-summary-padding);
color: var(--color-text);
font-weight: bold;
border: 2px solid var(--as-color-surface-strong);
}
summary:after {
content: "+";
margin-left: 5px;
}
summary:hover {
cursor: pointer;
}
details:open > summary:after {
content: "-";
}
/*DOCUMENT SUB PAGES*/
h2#a11y-pages-in-heading {
display: none;
}
ol#pages-in-list {
list-style: none;
display: flex;
padding-left: 0;
}
#pages-in-list li.list__item.is-active {
background-color: var(--as-color-surface-strong-alt);
color: var(--color-text-inverse);
text-decoration: none;
padding: .5em;
margin-right: .5em;
}
#pages-in-list li.list__item {
background-color: var(--as-color-surface-strong);
color: var(--color-text-inverse);
padding: .5em;
margin-right: .5em;
}
#pages-in-list li.list__item a{
color: var(--color-text-inverse);
text-decoration: underline;
}
#pages-in-list li.list__item a:hover{
text-decoration-thickness:2px;
}
.homepage-modular .row:first-of-type .widget-row:first-of-type .image, .category-modular .row:first-of-type .widget-row:first-of-type .image {
display: block;
width: 100%;
height: var(--as-category-feature-image-height);
object-fit: cover;
}
.homepage-modular .row:first-of-type .widget-row:first-of-type img, .category-modular .row:first-of-type .widget-row:first-of-type img {
width: 100%;
height: var(--as-category-feature-image-height);
object-fit: cover;
}
.widget-row {margin-left: 0; margin-right:0;}
.widget-width {
padding: 0;
}
.widget-width.widget-width--50 {
width: 48%;
}
.widget-width:not(.widget-width--100) {
padding: min(.5em, 1%);
}
.homepage-modular .row > .col-12, .category-modular .row > .col-12 {
padding-top: 0;
}
p {
margin-bottom: .5em;
}
details ol#pages-in-list {
margin-top: .5em;
}
/* Nav submenu carry-overs that are still genuinely tier-specific below
1500px, rebuilt 2026-09-14. Nav's own positioning, sizing, the search
panel, and the header's own box height are no longer set here -- they
read the same fluid tokens/flat --as-header-padding-bottom (S01f) at
every width down to the 980px handoff, so there is nothing left to
override in this range. */
@media screen and (min-width:981px) and (max-width:1500px) {
#nav ul ul li {
float: none;
}
#nav > ul > li > ul.list > li + li::before {
display: block;
}
}
.widget-documents h2.widget__heading {
display: none;
}
/* --- S03c: FEATURE COMPONENT - ACTIVE COMMUNITIES CARDS
Shared community cards use the same spacing/radius token family as
the other local card systems so maintenance stays visually aligned. */
.card-container {
display: grid;
grid-template-columns: var(--as-card-grid-columns);
gap: var(--as-card-gap);
align-items: stretch;
}
.card {
background-color: var(--neutral-100);
border-radius: var(--as-card-radius);
padding: var(--as-card-padding);
width: var(--as-card-width);
box-shadow: var(--shadow-soft);
text-align: left;
height: 100%;
}
.icon {
width: var(--as-card-icon-size);
height: var(--as-card-icon-size);
margin-bottom: 0.9375rem;
}
.icon img {
width: 100%;
height: auto;
border-radius: 50%;
background-color: var(--brand-teal);
padding: 0.625rem;
}
.card h3 {
font-size: 1.2em;
color: var(--color-text);
margin-bottom: var(--as-app-cta-desc-margin-bottom);
}
.card p {
font-size: 0.95em;
color: var(--color-text-muted);
line-height: 1.4;
}
/* Active Communities page:
the lower strategy cards need to sit between the intro copy and the
programme grids, with heading-only cards until truthful replacement
imagery is supplied in Jadu. */
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 {
display: flex;
flex-direction: column;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(1) {
order: 10;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(2) {
order: 20;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(5) {
order: 30;
width: min(100%, var(--as-community-card-row-max));
margin-left: auto;
margin-right: auto;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(3) {
order: 40;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(4) {
order: 50;
}
.category-modular article#content:has(.program-container):has(.card-container) > .row > .col-12 > .widget-row:nth-of-type(6) {
order: 60;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .card {
display: flex;
align-items: center;
gap: var(--as-community-card-gap);
min-height: 11rem;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .icon {
width: var(--as-community-card-icon-size);
height: var(--as-community-card-icon-size);
flex: 0 0 var(--as-community-card-icon-size);
margin-bottom: 0;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .card p {
display: none;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .card h3 {
margin-bottom: 0;
}
@media screen and (max-width:1060px) {
.card-container,
.program-container {
grid-template-columns: var(--as-card-grid-columns-md);
}
}
@media screen and (max-width:760px) {
.card-container,
.program-container {
grid-template-columns: var(--as-card-grid-columns-sm);
}
}
@media screen and (max-width:980px){.widget-width.widget-width--50 {width: 100%;}}
/* Everything header/nav/search/logo-related that used to live here is now
covered by the fluid tokens (S01f) + the single base rules above --
this narrower sub-range no longer needs its own override layer for any
of that. .program-card h3 is unrelated to the header rebuild and keeps
its existing scope untouched. */
@media screen and (min-width:981px) and (max-width: 64rem) {
.program-card h3 {
min-height: 0;
}
}
/* Theme titleBar handoff
Jadu's inherited Dopetrope shell hides #nav and enables the hamburger
title bar at 980px and below -- the one real breakpoint left in this
system (a genuine state change, not a value snap). The promoted
search and the logo need no override here any more: their fluid
tokens (S01f) already floor out to the correct value by 980px on
their own, since that's exactly what their clamp() minimum was tuned
to. Only the logo's float and the header's own box shrink (no nav to
reserve room for any more) are genuinely specific to this range. */
@media screen and (max-width:980px) {
#header {
height: auto;
min-height: 0;
padding-top: var(--as-header-titlebar-padding-top);
padding-bottom: var(--as-header-titlebar-padding-bottom);
}
a.logo {
float: left;
}
.symbol img {
max-width: var(--as-symbol-mobile-max-width);
margin-left: var(--as-header-titlebar-logo-offset-left);
}
}
.widget-width--54, .widget-width--53, .widget-width--52, .widget-width--51, .widget-width--50, .widget-width--49, .widget-width--48, .widget-width--47, .widget-width--46 {
width: 50%;
}
@media screen and (max-width:1120px) {
.widget-width {
float: left;
padding: 0;
width: 100%;
}
}
/* --- S03c: FEATURE COMPONENT - DISCOVER CARDS
Discovery/programme cards deliberately reuse the same width and
spacing tokens where practical so future engine adapters can predict
card behaviour across sections. */
.program-container {
display: grid;
grid-template-columns: var(--as-card-grid-columns);
gap: var(--as-card-gap);
align-items: stretch;
margin-top: 2.5rem;
}
/* Jadu can leave an empty card shell behind when a venue is removed
in content rather than in layout structure. Hide the empty shell so
auto-fit can reflow the remaining real cards cleanly. */
.program-container > .program-card:not(:has(img, h3, .btn, a[href], p, .program-image, .program-info)) {
display: none;
}
.program-card {
background-color: var(--color-surface);
border-radius: 0;
box-shadow: var(--shadow-soft);
width: var(--as-card-width);
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.program-image {
position: relative;
width: 100%;
height: var(--as-program-image-height);
overflow: hidden;
}
.program-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tag {
position: absolute;
top: 0.625rem;
left: 0.625rem;
background-color: var(--color-surface);
color: var(--color-action);
font-size: 1.1em;
padding: 0.25rem 0.5rem;
border-radius: var(--as-card-chip-radius);
font-weight: 800;
}
.program-card h3 {
font-weight: 800;
font-size: 1.5em;
margin: var(--as-card-title-margin-block) var(--as-card-title-margin-inline);
min-height: var(--as-card-title-min-height);
color: var(--color-action);
text-transform: uppercase;
}
@media screen and (max-width:800px) {
.program-card h3 {
font-size: 1.2em;
}
}
.program-info {
color: var(--color-text-muted);
margin: 0 var(--as-card-content-margin-inline) var(--as-card-content-margin-bottom);
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: var(--as-card-content-gap);
}
.btn {
background-color: var(--color-action);
color: var(--color-action-text);
text-align: center;
padding: var(--as-button-padding-block) var(--as-button-padding-inline);
margin: 0 var(--as-card-content-margin-inline) var(--as-card-content-margin-bottom);
text-decoration: none;
font-weight: bold;
display: inline-block;
}
.program-card > .btn,
.program-card-2 .btn {
margin-top: auto;
align-self: stretch;
}
.btn:hover {
background-color: var(--color-action-hover);
color: var(--color-action-hover-text);
text-decoration: none;
}
.btn:focus-visible {
background-color: var(--color-action-hover);
color: var(--color-action-hover-text);
text-decoration: none;
}
.program-card {
min-height: 320px; /* optional for uniform cards */
}
.btn {
/* Push button to bottom */
margin-top: auto;
}
@media screen and (max-width:1300px){
.card-container,
.program-container {
grid-template-columns: var(--as-card-grid-columns-md);
}
.program-card{ width: var(--as-program-card-width-md);
}}
.program-card-2 {
background-color: var(--color-surface);
border-radius: 0;
box-shadow: var(--shadow-soft);
width: 100%;
/* overflow: hidden; */
/* float: right; */
margin-left: var(--as-card-panel-offset-inline);
padding: var(--as-card-panel-padding);
}
@media screen and (max-width:980px){
.program-card-2{ margin-left:0;
}}
.program-card-2:has(a[href*="play.google.com"]):has(a[href*="apps.apple.com"]) .btn {
margin: 0 !important;
padding-left: var(--as-button-padding-inline-wide);
padding-right: var(--as-button-padding-inline-wide);
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--as-app-store-button-inline-size);
vertical-align: top;
}
.program-card-2:has(a[href*="play.google.com"]):has(a[href*="apps.apple.com"]) .btn + .btn {
margin-left: var(--as-app-store-button-gap) !important;
}
.program-card-2:has(a[href*="play.google.com"]):has(a[href*="apps.apple.com"]) br {
display: none;
}
/* --- S03c: FEATURE COMPONENT - TIMETABLE / DATATABLES
Timetable tables and DataTables controls for Active Stoke content.
Keep selector truth before trying to abstract behaviour. */
:is(table#timeTableDimensions, table#timeTableAll) {
display: flex;
flex-direction: column;
}
:is(table#timeTableDimensions, table#timeTableAll) thead {
order: 1;
}
:is(table#timeTableDimensions, table#timeTableAll) tfoot {
order: 2;
}
:is(table#timeTableDimensions, table#timeTableAll) tbody {
order: 3;
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 0;
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(#timeTableDimensions, #timeTableAll) colgroup { display: none; }
/* =========================================================
TABLE LAYOUT
========================================================= */
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 0;
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(#timeTableDimensions, #timeTableAll) colgroup { display: none; }
/* =========================================================
VISUAL
========================================================= */
:is(#timeTableDimensions, #timeTableAll) {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
/* --- S03c: TIMETABLE DATA GRID AND DATATABLES CONTROLS
Keep table geometry, filter controls, and paging chrome on named
Active Stoke tokens so future engine work can tune the component
without diffing multiple breakpoint forks by hand. */
:is(#timeTableDimensions, #timeTableAll) thead {
background-color: var(--as-color-table-surface);
}
:is(#timeTableDimensions, #timeTableAll) thead th {
color: var(--color-text-inverse);
font-weight: 700;
font-size: 1.05rem;
line-height: 1.2;
padding: var(--as-table-cell-padding-block) var(--as-table-cell-padding-inline);
border: none;
}
:is(#timeTableDimensions, #timeTableAll) tbody tr:nth-child(odd) {
background-color: var(--as-color-table-surface);
}
:is(#timeTableDimensions, #timeTableAll) tbody tr:nth-child(even) {
background-color: var(--as-color-surface-strong-alt);
}
:is(#timeTableDimensions, #timeTableAll) tfoot {
background-color: var(--as-color-surface-strong-alt);
}
:is(#timeTableDimensions, #timeTableAll) tfoot th {
padding: var(--as-table-cell-padding-block-sm) var(--as-table-cell-padding-inline-sm);
border: none;
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
color: var(--color-text-inverse);
font-size: 0.98rem;
padding: var(--as-table-cell-padding-block) var(--as-table-cell-padding-inline);
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
position: relative;
outline: 1px solid var(--brand-white);
}
:is(#timeTableDimensions, #timeTableAll) thead th,
:is(#timeTableDimensions, #timeTableAll) tbody td,
:is(#timeTableDimensions, #timeTableAll) tfoot th {
border-right: 1px solid var(--brand-white);
}
:is(#timeTableDimensions, #timeTableAll) a {
color: var(--color-text-inverse);
font-weight: 700;
text-decoration: none;
position: relative;
white-space: nowrap;
}
:is(#timeTableDimensions, #timeTableAll) a::after {
content: " >";
font-weight: 700;
}
:is(#timeTableDimensions, #timeTableAll) a:hover,
:is(#timeTableDimensions, #timeTableAll) a:focus {
text-decoration: underline;
text-underline-offset: 0.125rem;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
width: 100%;
max-width: 100%;
color: var(--as-color-surface-strong);
background: var(--color-surface);
border: 1px solid var(--brand-white);
border-radius: var(--radius-sm);
padding: calc(var(--as-table-cell-padding-block-xs) - 0.125rem) calc(var(--as-table-cell-padding-inline-xs) + 0.125rem);
font-size: 0.95rem;
height: 2.25rem;
box-sizing: border-box;
}
@media (max-width: 640px) {
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
white-space: normal;
}
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: 1rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 0.95rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
}
}
.dataTables_info,
.dataTables_paginate {
color: var(--as-color-surface-strong);
}
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: 0.2px;
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 1.05rem;
}
:is(#timeTableDimensions, #timeTableAll) a {
font-size: 1.1rem;
font-weight: 800;
text-decoration: none;
}
:is(#timeTableDimensions, #timeTableAll) a::after {
content: " >";
font-weight: 800;
}
:is(#timeTableDimensions, #timeTableAll) a:hover,
:is(#timeTableDimensions, #timeTableAll) a:focus {
text-decoration: underline;
text-underline-offset: 0.125rem;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-surface);
color: var(--as-color-surface-strong);
border: var(--border-width-strong) solid var(--as-color-surface-strong);
border-radius: var(--as-table-select-radius);
background-image: url("data:image/svg+xml;utf8,\
");
background-repeat: no-repeat;
background-position: right var(--as-table-select-icon-offset) center;
background-size: var(--as-table-select-icon-size) var(--as-table-select-icon-size);
padding: var(--as-table-select-padding-top) var(--as-table-select-padding-right) var(--as-table-select-padding-bottom) var(--as-table-select-padding-left);
font-size: 1.05rem;
height: var(--as-table-select-height);
line-height: 1.2;
box-sizing: border-box;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select:has(option:first-child:checked) {
color: var(--neutral-700);
font-weight: 600;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select:focus {
outline: 2px solid var(--brand-white);
outline-offset: 0.125rem;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select:hover,
:is(#timeTableDimensions, #timeTableAll) tfoot select:focus {
background-image: url("data:image/svg+xml;utf8,\
");
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
box-shadow: none;
}
:is(#timeTableDimensions, #timeTableAll) thead th,
:is(#timeTableDimensions, #timeTableAll) tbody td,
:is(#timeTableDimensions, #timeTableAll) tfoot th {
border-right: 1px solid var(--brand-white);
margin: 0;
white-space: normal;
}
:is(#timeTableDimensions, #timeTableAll) thead th:last-child,
:is(#timeTableDimensions, #timeTableAll) tbody td:last-child,
:is(#timeTableDimensions, #timeTableAll) tfoot th:last-child {
border-right: none;
}
@media (max-width: 640px) {
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: 1.1rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 1rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
white-space: normal;
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
font-size: .8rem;
min-height: var(--as-table-footer-select-min-height-sm);
}
:is(#timeTableDimensions, #timeTableAll) tfoot th {
padding: 0;
}
}
:is(#timeTableDimensions, #timeTableAll) tfoot {
background-color: transparent !important;
}
:is(#timeTableDimensions, #timeTableAll) tfoot th {
background-color: transparent !important;
padding: var(--as-table-cell-padding-block-sm) var(--as-table-cell-padding-inline-sm);
border: none;
}
button.dt-paging-button {background-color: var(--color-action);border-radius: 0;margin: 0 2px;}
/* === DataTables header controls === */
#timeTable .dt-layout-row:first-of-type {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
}
#timeTableAll_wrapper .dt-layout-row:first-of-type .dt-layout-cell {
align-items: center;
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: var(--as-color-table-surface);
border: 1px solid var(--brand-white);
color: var(--color-text-inverse);
padding: var(--as-table-filter-padding-block) var(--as-table-filter-padding-inline);
border-radius: var(--radius-sm);
}
#timeTableAll_wrapper .dt-length label,
#timeTableAll_wrapper .dt-search label {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-inverse);
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--brand-white);
outline: none;
padding: 0.4rem 2rem 0.4rem 0.5rem;
border-radius: 0.1875rem;
font-size: 1rem;
line-height: 1.2;
min-height: 2rem;
font-weight: 800;
}
#timeTableAll_wrapper .dt-length .dt-input {
background-image:
linear-gradient(45deg, transparent 50%, var(--as-color-surface-strong) 50%),
linear-gradient(135deg, var(--as-color-surface-strong) 50%, transparent 50%);
background-position:
calc(100% - var(--as-table-select-chevron-gap-wide)) calc(50% - var(--as-table-select-chevron-offset-y)),
calc(100% - var(--as-table-select-chevron-gap-narrow)) calc(50% - var(--as-table-select-chevron-offset-y));
background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
background-repeat: no-repeat;
}
#timeTableAll_wrapper .dt-length .dt-input:hover,
#timeTableAll_wrapper .dt-search .dt-input:hover {
border-color: var(--as-color-table-control-hover);
}
#timeTableAll_wrapper .dt-length .dt-input:focus,
#timeTableAll_wrapper .dt-search .dt-input:focus {
border-color: var(--as-color-table-control-focus);
box-shadow: var(--as-table-focus-ring);
}
#timeTableAll_wrapper .dt-layout-row:first-of-type .dt-length,
#timeTableAll_wrapper .dt-layout-row:first-of-type .dt-search {
min-height: 2.25rem;
width: 100%;
}
#timeTableAll_wrapper .dt-paging .dt-paging-button {
background-color: var(--color-action);
color: var(--color-action-text);
border: 1px solid var(--brand-white);
padding: var(--as-table-paging-button-padding-block) var(--as-table-paging-button-padding-inline);
border-radius: var(--as-table-paging-button-radius);
margin: 0 0.15rem;
font-size: 0.95rem;
}
#timeTableAll_wrapper .dt-paging .dt-paging-button:hover:not(.disabled) {
background-color: var(--as-color-table-page-current);
}
#timeTableAll_wrapper .dt-paging .dt-paging-button.current {
background-color: var(--as-color-table-page-current);
}
#timeTableAll_wrapper .dt-info {
color: var(--as-color-table-info);
font-size: 0.95rem;
}
@media (max-width: 768px) {
#timeTableAll_wrapper .dt-layout-row:first-of-type {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
#timeTableAll_wrapper .dt-layout-row:first-of-type .dt-layout-cell {
width: 100%;
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
width: 100%;
justify-content: space-between;
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
width: 100%;
}
#timeTableAll_wrapper .dt-paging nav {
display: flex;
flex-wrap: wrap;
gap: var(--as-table-paging-gap);
}
}
#timeTableAll_wrapper .dt-layout-row:first-of-type + .dt-layout-row.dt-layout-table {
margin-top: 0.25rem;
}
.dt-layout-row:nth-child(1) {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
flex-direction: row;
}
/* Wrap long words/text across the table */
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td,
:is(#timeTableDimensions, #timeTableAll) a {
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
/* Make grid columns flexible but prevent them from getting too narrow */
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
display: grid;
grid-template-columns: repeat(5, minmax(var(--as-table-grid-min-col), 1fr));
column-gap: 0;
}
/* Base sizes (desktop-ish) */
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: 1.15rem;
padding: var(--as-table-cell-padding-block) var(--as-table-cell-padding-inline-compact);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 1rem;
padding: var(--as-table-cell-padding-block) var(--as-table-cell-padding-inline-compact);
}
:is(#timeTableDimensions, #timeTableAll) a {
font-size: 1.05rem;
font-weight: 800;
}
/* Header controls: allow label/input to wrap and shrink */
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
flex-wrap: wrap;
}
#timeTableAll_wrapper .dt-length label,
#timeTableAll_wrapper .dt-search label {
white-space: normal;
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
white-space: normal;
overflow-wrap: anywhere;
}
/* Footer selects wrap their placeholder and reduce size at smaller widths */
:is(#timeTableDimensions, #timeTableAll) tfoot select {
font-size: 1rem;
height: var(--as-table-select-height-md);
padding: 0.625rem 2.25rem 0.75rem 0.75rem;
}
/* === Breakpoints === */
/* <= 1024px: slightly smaller */
@media (max-width: 1024px) {
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: .85rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 0.78rem;
padding: var(--as-table-cell-padding-block-md) var(--as-table-cell-padding-inline-md);
}
:is(#timeTableDimensions, #timeTableAll) a {
font-size: .85rem;
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
grid-template-columns: repeat(5, minmax(var(--as-table-grid-min-col-md), 1fr));
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
font-size: 0.85rem;
height: 3.125rem;
padding: 0.625rem 2rem 0.625rem 0.625rem;
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
padding: 0.6rem 0.5rem;
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
font-size: 0.85rem;
min-height: 1.9rem;
padding: 0.35rem 1.6rem 0.35rem 0.5rem;
}
}
/* <= 768px: stack controls; smaller fonts/padding */
@media (max-width: 768px) {
#timeTableAll_wrapper .dt-layout-row:first-of-type {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
width: 100%;
padding: 0.5rem 0.5rem;
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
width: 100%;
font-size: 0.82rem;
min-height: 1.8rem;
padding: 0.3rem 1.4rem 0.3rem 0.5rem;
}
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: .8rem;
padding: var(--as-table-cell-padding-block-sm) var(--as-table-cell-padding-inline-sm);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 0.85rem;
padding: var(--as-table-cell-padding-block-sm) var(--as-table-cell-padding-inline-sm);
}
:is(#timeTableDimensions, #timeTableAll) a {
font-size: 0.88rem;
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
grid-template-columns: repeat(5, minmax(var(--as-table-grid-min-col-sm), 1fr));
}
:is(#timeTableDimensions, #timeTableAll) tfoot th { padding: 0; }
:is(#timeTableDimensions, #timeTableAll) tfoot select {
font-size: 0.7rem;
height: var(--as-table-select-height-sm);
padding: 0.5rem 1.75rem 0.5rem 0.625rem;
}
}
/* <= 480px: tightest layout, allow more wrapping */
@media (max-width: 480px) {
:is(#timeTableDimensions, #timeTableAll) thead th {
font-size: 0.75rem;
padding: var(--as-table-cell-padding-block-xs) var(--as-table-cell-padding-inline-xs);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
font-size: 0.9rem;
padding: var(--as-table-cell-padding-block-xs) var(--as-table-cell-padding-inline-xs);
line-height: 1.25;
}
:is(#timeTableDimensions, #timeTableAll) a {
font-size: 0.75rem;
line-height: 1.25;
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
grid-template-columns: repeat(5, minmax(var(--as-table-grid-min-col-xs), 1fr));
}
:is(#timeTableDimensions, #timeTableAll) tfoot select {
font-size: 0.75rem;
height: var(--as-table-select-height-xs);
padding: 0.375rem 1.5rem 0.375rem 0.5rem;
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
padding: 0.45rem 0.5rem;
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input {
font-size: 0.8rem;
min-height: 1.7rem;
padding: 0.28rem 1.2rem 0.28rem 0.5rem;
}
}
#timeTableAll_wrapper .dt-layout-row.dt-layout-table .dt-layout-cell {
overflow-x: auto;
}
:is(table#timeTableDimensions, table#timeTableAll) {
overflow: visible;
}
@media (max-width: 768px) {
:is(table#timeTableDimensions, table#timeTableAll) {
display: table;
table-layout: fixed;
width: max-content;
min-width: 100%;
}
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
display: table-row;
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
display: table-cell;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:is(#timeTableDimensions, #timeTableAll) colgroup {
display: table-column-group;
}
}
@media (min-width: 769px) {
:is(#timeTableDimensions, #timeTableAll) thead tr,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot tr {
display: grid;
grid-template-columns:
minmax(var(--as-table-grid-min-col-md), 1.2fr)
minmax(var(--as-table-grid-min-col-md), 1fr)
minmax(var(--as-table-grid-min-col-md), 1fr)
minmax(var(--as-table-grid-feature-col), 2.2fr)
minmax(var(--as-table-grid-min-col), 1.2fr);
}
:is(#timeTableDimensions, #timeTableAll) th,
:is(#timeTableDimensions, #timeTableAll) td {
display: block;
white-space: normal;
}
}
/*timetable additions for mobile view*/
/* --- S03c: FEATURE COMPONENT - APP CTA
App call-to-action block shown only within the intended
breakpoints for this site. */
.app-cta { display: none; }
@media (max-width: 850px) {
.app-cta {
display: block;
background: var(--color-surface);
border: var(--as-app-cta-border-width) solid var(--as-color-surface-strong);
padding: var(--as-app-cta-padding-block) var(--as-app-cta-padding-inline);
}
.app-cta__wrap {
display: grid;
grid-template-columns: 1fr;
gap: var(--as-app-cta-gap);
align-items: center;
}
.app-cta__media {
width: 100%;
overflow: hidden;
border-radius: var(--as-app-cta-media-radius);
background: var(--brand-primary-soft);
}
.app-cta__media img {
display: block;
width: 100%;
height: auto;
}
.app-cta__title {
margin: 0;
font-weight: 800;
font-size: clamp(1.1rem, 3.5vw, 1.35rem);
}
.app-cta__desc {
margin: var(--as-app-cta-desc-margin-top) 0 var(--as-app-cta-desc-margin-bottom);
font-size: clamp(0.95rem, 3.2vw, 1.05rem);
line-height: 1.35;
}
.app-cta__buttons {
display: flex;
gap: var(--as-app-cta-gap);
flex-wrap: wrap;
}
.app-cta__buttons .btn {
flex: 0 0 var(--as-app-store-button-inline-size);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
}
}
/* Ensure it wont interfere with desktop layout */
@media (min-width: 851px) {
.app-cta { display: none !important; }}
.editor p img {
max-height: var(--as-editor-media-max-height);
width: 100%;
object-fit: cover;
}
.editor p {
margin-bottom:1.2em;
}
/* --- S03c: NEWS, SEARCH, AND EVENT ARTICLE LAYOUTS
Local article/listing layout adjustments for Active Stoke
content routes. */
.search-list .container, .news-article .container, .news-list .container, .event-list .container {
padding: 0 var(--as-layout-content-pad-inline);
}
input[type="button"], input[type="submit"], input[type="reset"], button, .button {
background: var(--color-action);
}
.widget-navigation ul li {
display: flex;
}
.widget-navigation ul {
list-style: none;
padding-left: 0;
margin-left: -1em;
display: flex;
margin-top: 1em;
flex-wrap: wrap;
align-content: space-between;
justify-content: flex-start;
}
.editor p a.btn {
margin: 0;
}
.listing__content {
margin-left: var(--as-listing-offset-inline);
}
/* Listing content sections
The featured result owns its deliberate outer border. Older feed results
retain the same readable inset without inheriting that featured border. */
:is(.news-list, .event-list) article.listing:not(.listing--featured) {
padding: var(--as-listing-item-padding);
border: 0;
}
:is(.news-list, .news-article, .event-list, .event-article, .search-list)
:is(.listing__meta, .meta)
:is(strong, b) {
font-weight: var(--font-weight-strong);
}
@media screen and (min-width:1300px) {.index-modular .listing__content {margin-left:0;}}
.aside__section {
margin-left: 1em;
}
/* Listing filter alignment
Jadu injects the filter form inside `.aside__section`; on news/event/search
list sidebars the inherited left nudge pushes the controls off the box grid. */
.news-list .aside__section,
.event-list .aside__section,
.search-list .aside__section {
margin-left: 0;
}
/* News filter panel
Use the same contained filter contract as the event listing; News has one
action, so its panel remains a single-column grid. */
.news-list #main > .container > .row > .col-4 > section.box {
display: grid;
grid-template-columns: 1fr;
gap: var(--as-filter-panel-gap);
padding: var(--as-filter-panel-padding);
border: var(--border-width-base) solid var(--color-border);
border-radius: var(--as-filter-panel-radius);
container: as-news-filter-panel / inline-size;
}
/* Event filter panel
Keep the form and its sibling submission link inside one contained panel.
The wrappers remain semantic DOM elements; only their boxes are flattened
so the two actions can share one responsive action row. */
.event-list #main > .container > .row > .col-4 > section.box {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: var(--as-filter-panel-gap);
padding: var(--as-filter-panel-padding);
border: var(--border-width-base) solid var(--color-border);
border-radius: var(--as-filter-panel-radius);
container: as-event-filter-panel / inline-size;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box > .aside__section {
display: contents;
margin-left: 0;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box > .aside__section > form,
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box > .aside__section > form > .gtr-uniform {
display: contents;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box fieldset {
grid-column: 1 / -1;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer {
grid-column: 1;
align-self: center;
margin: 0;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer > .col-12 {
padding: 0;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer ul.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--as-filter-panel-action-gap);
margin: 0;
padding: 0;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer ul.actions li {
margin: 0;
padding: 0;
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer button.button,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: var(--line-height-base);
margin: 0;
padding-left: var(--as-button-padding-inline);
padding-right: var(--as-button-padding-inline);
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer button.button {
background-color: var(--color-action);
border-color: var(--color-action);
color: var(--color-action-text);
}
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
background-color: var(--color-action-secondary);
border-color: var(--color-action-secondary);
color: var(--color-action-secondary-text);
}
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer button.button:hover,
:is(.news-list, .event-list) #main > .container > .row > .col-4 > section.box .form__footer button.button:focus-visible {
background-color: var(--color-action-hover);
border-color: var(--color-action-hover);
color: var(--color-action-hover-text);
}
.event-list #main > .container > .row > .col-4 > section.box > a.button--block:hover,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block:focus-visible {
background-color: var(--color-action-secondary-hover);
border-color: var(--color-action-secondary-hover);
color: var(--color-action-secondary-hover-text);
}
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
display: inline-flex;
align-items: center;
justify-content: center;
grid-column: 2;
align-self: center;
justify-self: start;
width: auto;
max-width: 100%;
white-space: nowrap;
}
@container as-news-filter-panel (max-width: 22rem) {
.news-list #main > .container > .row > .col-4 > section.box .form__footer button.button {
width: 100%;
}
.news-list #main > .container > .row > .col-4 > section.box .form__footer ul.actions > li {
flex: 1 1 100%;
width: 100%;
}
}
@container as-event-filter-panel (max-width: 22rem) {
.event-list #main > .container > .row > .col-4 > section.box {
grid-template-columns: 1fr;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
grid-column: 1;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer button.button,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
width: 100%;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer ul.actions > li {
flex: 1 1 100%;
width: 100%;
}
}
@media screen and (max-width: 736px) {
.news-list #main > .container > .row > .col-4 > section.box .form__footer button.button {
width: 100%;
}
.news-list #main > .container > .row > .col-4 > section.box .form__footer ul.actions > li {
flex: 1 1 100%;
width: 100%;
}
.event-list #main > .container > .row > .col-4 > section.box {
grid-template-columns: 1fr;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
grid-column: 1;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer button.button,
.event-list #main > .container > .row > .col-4 > section.box > a.button--block {
width: 100%;
}
.event-list #main > .container > .row > .col-4 > section.box .form__footer ul.actions > li {
flex: 1 1 100%;
width: 100%;
}
}
@media screen and (max-width:1299px) {
.index-modular .listing__content {
margin-left: var(--as-listing-offset-inline-md);
}
}
nav.nav.nav--pages-in {
display: none;
}
nav.pagination {
display: none;
}
#navPanel ul li:nth-last-child(-n + 2) {
display: none;
}
/* --- S03c: ALERTS AND WARNING CALLOUTS
Keep the early alert shell and the later accessibility surface in
the same token family so warning UI does not fork over time. */
.alert {
border: var(--border-width-strong) solid var(--as-color-alert-action);
}
/* === Alert content contract
Keep the early inherited alert shell aligned with the later shared
alert tokens so live editing does not fork the warning component. */
p.alert__text {
margin-bottom: 0;
display: contents;
}
span.alert__heading {
font-weight: 900;
}
.news-article .container, .news-list .container, .event-list .container, .event-article .container {
padding: 0;
}
.news-article .editor, .event-article .editor, .news-article p.summary, .event-article p.summary {
padding: 0 var(--as-layout-content-pad-inline);
}
.news-article .row:first-of-type {
margin-left: 0;
}
/* Article shell alignment
Keep route-specific article gutters explicit here so a maintainer can
adjust event/news spacing without touching shared content rules. */
.event-article .row:first-of-type {
margin-top: 0;
margin-left: var(--as-article-row-offset-inline);
margin-right: var(--as-article-row-offset-inline);
padding: 0;
}
.event-article .row > * {
padding: 0;
}
.event-article article#content img {
max-width: var(--as-article-media-max-width);
}
/* Article media/copy flow
News and event articles use different wrappers, so each lets introductory
copy wrap beside the media and reclaim the full measure after the image. */
@media screen and (min-width: 1048px) {
/* Float the media so article copy wraps beside it and returns to the full
measure automatically after the media's block height has ended. */
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) {
display: block;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor)::after {
content: "";
display: table;
clear: both;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .image.right {
float: left;
width: var(--as-document-image-width);
margin: 0.5rem var(--as-space-inline-lg) 1.5rem var(--as-layout-content-pad-inline);
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .image.right img {
display: block;
width: 100%;
max-width: none;
height: auto;
max-height: var(--as-document-image-height);
object-fit: contain;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > :is(.summary, .editor, .page-meta) {
width: auto;
max-width: none;
min-width: 0;
padding: 0 var(--as-layout-content-pad-inline);
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .summary {
margin: 0;
padding-top: 0.5rem;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .editor {
margin: 0.5rem 0 0;
}
.news-article article#content:has(> .image.right + .summary + .editor) {
display: block;
}
.news-article article#content:has(> .image.right + .summary + .editor)::after {
content: "";
display: table;
clear: both;
}
.news-article article#content:has(> .image.right + .summary + .editor) > .image.right {
float: left;
width: var(--as-document-image-width);
margin: 0.5rem var(--as-space-inline-lg) 1.5rem var(--as-layout-content-pad-inline);
}
.news-article article#content:has(> .image.right + .summary + .editor) > .image.right img {
display: block;
width: 100%;
max-width: none;
height: auto;
max-height: var(--as-document-image-height);
object-fit: contain;
}
.news-article article#content:has(> .image.right + .summary + .editor) > :is(.summary, .editor, .page-meta) {
width: auto;
max-width: none;
min-width: 0;
padding: 0 var(--as-layout-content-pad-inline);
}
.news-article article#content:has(> .image.right + .summary + .editor) > .summary {
margin: 0;
padding-top: 0.5rem;
}
.news-article article#content:has(> .image.right + .summary + .editor) > .editor {
margin: 0.5rem 0 0;
}
/* News uses a sidebar wrapper for sharing; match the Event article's
full-width social block below the article content. */
.news-article #main > .container > .row {
display: block;
}
.news-article #main > .container > .row > .col-8,
.news-article #main > .container > .row > .col-4 {
float: none;
width: 100%;
padding: 0;
}
.news-article #main > .container > .row > .col-4 {
margin-left: var(--as-article-row-offset-inline);
margin-right: var(--as-article-row-offset-inline);
width: calc(100% - (var(--as-article-row-offset-inline) * 2));
}
.news-article #main > .container > .row > .col-4 > section.box {
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.news-article #main > .container > .row > .col-4 > section.box .nav--social-links {
width: 100%;
margin: 0;
}
.news-article #main > .container > .row > .col-4 > section.box .nav--social-links > .nav__heading {
font-size: 2.5em;
letter-spacing: -0.015em;
margin: 0 0 1.5rem;
}
}
.event-list h1, .news-list h1 {
margin-left: var(--as-layout-gutter-sm);
}
.event-list #header .container, .news-list #header .container {
margin-left: var(--as-layout-gutter-md);
margin-right: var(--as-layout-gutter-md);
width: calc(100% - (var(--as-layout-gutter-md) * 2)) !important;
}
@media screen and (max-width: 736px) {
.event-article .box.post header {
padding: 0;
margin: var(--as-article-header-offset-top-sm) 0 var(--as-article-header-offset-bottom-sm) 0;
}
.event-article article#content img {
max-width: var(--as-article-image-max-width);
}
.news-article .editor, .event-article .editor,
.news-article p.summary, .event-article p.summary {
padding: 0 var(--as-layout-content-pad-inline);
}
.event-article header h1 {
padding: .5em;
}
.event-article .row:first-of-type {
margin-top: 0;
margin-left: var(--as-article-row-offset-inline);
margin-right: var(--as-article-row-offset-inline);
padding: 0;
}
.event-article .col-12 {
padding: 0;
flex: 0 0 calc(100% + var(--as-article-row-offset-inline));
width: calc(100% + var(--as-article-row-offset-inline));
max-width: calc(100% + var(--as-article-row-offset-inline));
min-width: 0;
box-sizing: border-box;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > :is(.summary, .editor) {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .editor table {
width: 100%;
min-width: 0;
max-width: 100%;
table-layout: fixed;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .image.right {
float: none;
display: block;
width: 100%;
max-width: none;
margin: 0 0 1.5rem;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .image.right img {
display: block;
width: 100%;
margin: 0 auto;
}
:is(.news-article, .event-article) article#content > .row > .col-12:has(> .image.right + .summary + .editor) > .page-meta {
margin-top: 1rem;
}
.news-article article#content:has(> .image.right + .summary + .editor) > .image.right {
float: none;
display: block;
width: 100%;
max-width: none;
margin: 0 0 1.5rem;
}
.news-article article#content:has(> .image.right + .summary + .editor) > .image.right img {
display: block;
width: 100%;
margin: 0 auto;
}
.news-article article#content:has(> .image.right + .summary + .editor) > .page-meta {
margin-top: 1rem;
}
.news-article #main > .container > .row > .col-4 > section.box .nav--social-links > .nav__heading {
font-size: 1.5em;
letter-spacing: -0.015em;
margin: 0 0 1.5rem;
}
}
/* --- S03c: ALERTS AND FIXED JOIN CTA
Late-site additions that still need to be brought under the
shared contract but are kept visible here for now. */
.alert.alert--warning {
border: 5px solid var(--as-color-alert-action);
background-color: var(--as-color-alert-surface);
padding: 1rem;
}
.alert.alert--warning .alert__link {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .45rem .8rem;
border-radius: .375rem;
text-decoration: none;
font-weight: 600;
background-color: var(--as-color-alert-action);
border: 1px solid var(--as-color-alert-action);
color: var(--color-text-inverse);
}
.alert.alert--warning .alert__link:hover,
.alert.alert--warning .alert__link:focus-visible {
filter: brightness(0.92);
}
.alert.alert--warning .alert__link:active {
filter: brightness(0.85);
}
/* === JOIN NOW BUTTON === */
.join a {
text-decoration: none;
color: var(--color-text-inverse);
background-color: var(--as-color-join-surface);
padding: 1rem;
font-weight: 700;
display: inline-block;
}
.join a:hover,
.join a:focus-visible,
.join a:visited {
color: var(--color-text-inverse);
text-decoration: none;
}
.join {
position: fixed;
top: var(--as-join-offset-top);
animation: join-drop-bounce 900ms cubic-bezier(.22,.61,.36,1) both;
z-index: 1000;
will-change: transform;
left: var(--as-join-offset-left);
}
@keyframes join-drop-bounce {
from { transform: translateY(-110vh); }
70% { transform: translateY(0); }
85% { transform: translateY(-12px); }
to { transform: translateY(0); }
}
.join a {
animation: join-wobble 30s ease-in-out 1s infinite;
transform-origin: 50% 100%;
will-change: transform;
}
@keyframes join-wobble {
0% { transform: rotate(0deg) translateY(0); }
1% { transform: rotate(-2deg) translateY(-1px); }
2% { transform: rotate(2deg) translateY(1px); }
3% { transform: rotate(-1.5deg) translateY(-1px); }
4% { transform: rotate(1.5deg) translateY(1px); }
5% { transform: rotate(0deg) translateY(0); }
100% { transform: rotate(0deg) translateY(0); }
}
.join a:hover {
transform: translateY(-1px);
transition: transform 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
.join {
animation: none !important;
transform: none !important;
}
.join a {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* === join now styling ends ===*/
button#ccc-icon {
margin-bottom: 0;
}
button#ccc-icon.ccc-icon--right.ccc-icon--dark {
margin-bottom: 0;
}
html body #ccc #ccc-content,
html body #ccc #ccc-content.ccc-content--dark,
html body #ccc #ccc-notify,
html body #ccc #ccc-notify.ccc-content--dark,
html body #ccc .ccc-content,
html body #ccc .ccc-content--dark,
html body #ccc .ccc-notify {
background: var(--as-cookie-panel-surface) !important;
}
/* ============================================================
S-Acc - ACCESSIBILITY AND BASE NORMALISATION LAYER
============================================================
These late rules start forcing the new root contract onto the
real rendered Active Stoke surfaces without breaking the live
selector contract underneath.
============================================================ */
html {
background: var(--as-color-page-bg);
}
body {
background: var(--as-color-page-bg);
color: var(--as-color-text);
font-family: var(--font-family-base);
line-height: var(--line-height-body);
}
#header {
background: var(--as-color-header-bg);
}
footer#footer {
background: var(--as-dark-panel-bg);
}
#main,
.box,
article.box.post,
.program-card,
.program-card-2 {
background: var(--color-surface);
color: var(--as-color-text);
}
a {
color: var(--as-color-link);
text-decoration-thickness: var(--link-underline-thickness);
text-underline-offset: 0.16em;
}
a:hover,
a:focus-visible {
color: var(--as-color-link-hover);
}
/* Promoted header search
The form is rendered in footer markup but displayed in the header.
Keep form geometry tied to the real footer search selectors. */
.site-search--header {
color: var(--color-text);
}
.site-search--header,
#footer .site-search,
#footer form[role="search"],
#footer .search,
#footer #js-search {
width: 100%;
max-width: none;
margin: 0;
}
.site-search--header .form__append-group {
display: flex;
align-items: stretch;
gap: var(--as-header-search-gap);
width: 100%;
}
.site-search--header .form__field,
#footer .site-search input,
#footer .site-search input[type="search"],
#footer .site-search input[type="text"],
#footer #search-site-header {
flex: 1 1 auto;
min-height: var(--as-header-search-min-height);
min-width: 0;
padding: var(--as-header-search-control-padding-block) var(--as-header-search-control-padding-inline);
line-height: var(--as-header-search-control-line-height);
background: var(--color-surface);
color: var(--color-text);
-webkit-text-fill-color: var(--color-text);
caret-color: var(--color-text);
border: var(--border-width-base) solid var(--color-border);
}
.site-search--header .form__field::placeholder {
color: var(--color-text-muted);
-webkit-text-fill-color: var(--color-text-muted);
opacity: 1;
}
.site-search--header .form__field:hover,
.site-search--header .form__field:focus,
.site-search--header .form__field:focus-visible {
border-color: var(--color-border-strong);
}
.site-search--header .button.button--primary,
#footer .site-search .button,
#footer .site-search button,
#footer input[type="submit"] {
flex: 0 0 auto;
min-height: var(--as-header-search-min-height);
margin: 0;
padding: var(--as-header-search-control-padding-block) var(--as-header-search-button-padding-inline);
line-height: var(--as-header-search-control-line-height);
font-size: var(--as-header-search-button-font-size);
white-space: nowrap;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.alert.alert--warning .alert__link:focus-visible,
#timeTableAll_wrapper .dt-length .dt-input:focus-visible,
#timeTableAll_wrapper .dt-search .dt-input:focus-visible,
:is(#timeTableDimensions, #timeTableAll) tfoot select:focus-visible {
outline: var(--focus-outline-width) solid var(--as-color-focus);
outline-offset: var(--focus-outline-offset);
box-shadow: var(--focus-shadow);
}
.button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.join a,
.alert.alert--warning .alert__link,
#timeTableAll_wrapper .dt-paging .dt-paging-button {
min-height: 2.75rem;
}
.index-modular .widget-row:not(:first-child),
.homepage-modular article#content .widget-row:not(:first-child),
.category-modular .row .widget-row:not(:first-child),
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width);
margin-left: auto;
margin-right: auto;
}
/* Document intro image centring on stacked breakpoints:
below the wide-layout pairing breakpoint the Jadu image wrapper falls
back to `inline-block`, which means the shared auto-margin article shell
no longer centres it even though the editor copy still recentres. Promote
only this intro image wrapper back to block flow on sub-desktop widths so
the existing shell margins align both siblings without touching the wide
breakpoint pairing layout. */
@media screen and (max-width: 1047px) {
.document-article #main > .container > .row {
margin-left: 0;
}
.document-article #main > .container > .row > * {
padding-left: 0;
}
.document-article article#content:has(> .image.right + .editor) > .image.right {
display: block;
margin-left: auto;
margin-right: auto;
}
}
/* Route content shell centring:
the inherited Dopetrope theme expects `.container` to remain a block-level
centring shell. Earlier legacy Active Stoke rules set `.container` to
`inline-block` globally, which is mostly masked on full-width routes but
causes constrained news/event/search/article shells to hug left when we
later narrow them with auto margins. Scope the centred-width contract to
the real `#main > .container` owner on these routes and restore block
behaviour there rather than chasing inner listing/article widgets. */
.news-article #main > .container,
.news-list #main > .container,
.event-list #main > .container,
.search-list #main > .container,
.event-article #main > .container {
display: block;
width: min(100%, calc(var(--as-layout-content-max) + (var(--as-space-inline-lg) * 2)));
margin-left: auto;
margin-right: auto;
padding-left: var(--as-space-inline-lg);
padding-right: var(--as-space-inline-lg);
}
.category-modular #main header h1,
.document-article #main header h1,
.homepage-modular #main header h1,
.event-article header h1 {
background: var(--as-color-surface-strong);
color: var(--color-text-inverse);
}
.category-modular article#content .editor :is(h2, h3, h4, h5, h6),
.document-article article#content .editor :is(h2, h3, h4, h5, h6),
.homepage-modular article#content .editor :is(h2, h3, h4, h5, h6) {
color: var(--as-color-heading);
}
/* Homepage content-card headings:
the live homepage uses `index-modular`, but image-owned hero copy must
stay on its dedicated carousel contract rather than the shared content
heading colour path. Scope the homepage heading adaptation to the local
information cards that actually need it. */
.index-modular article#content .editor .program-card-2 h2 {
color: var(--as-color-heading);
}
nav.breadcrumb {
background: var(--as-color-breadcrumb-bg);
color: var(--color-text-inverse);
}
nav.breadcrumb a {
color: var(--color-text-inverse);
}
.widget .list--navigation a.list__link,
.widget-navigation a.list__link {
background: var(--as-nav-cta-surface);
color: var(--as-nav-cta-text);
border: var(--border-width-base) solid var(--as-nav-cta-border);
box-shadow: var(--as-nav-cta-shadow);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: var(--as-button-padding-block) var(--as-button-padding-inline-wide);
font-weight: var(--font-weight-strong);
text-decoration: none;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
/* Shared widget-navigation row geometry:
the inherited CTA rows already have their button height and padding defined
above. What they were missing at wider breakpoints was the same deliberate
wrapped-row spacing and left-offset reset already used in the smaller-screen
contract, which left some centre pages with tiles bleeding into each other.
Keep the fix at the shared layout owner and reuse the established nav gap. */
ul.list.list--navigation,
.widget-navigation ul,
#pages-in-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 0.75rem;
margin-left: 0;
margin-right: 0;
}
.widget .list--navigation li.list__item,
.widget-navigation ul li,
#pages-in-list li.list__item,
#pages-in-list li.list__item.is-active {
display: flex;
margin: 0;
box-sizing: border-box;
}
.widget .list--navigation a.list__link,
.widget-navigation a.list__link,
#pages-in-list li.list__item,
#pages-in-list li.list__item a {
text-align: center;
box-sizing: border-box;
}
.widget .list--navigation a.list__link:hover,
.widget .list--navigation a.list__link:focus-visible,
.widget-navigation a.list__link:hover,
.widget-navigation a.list__link:focus-visible {
background: var(--as-nav-cta-surface-hover);
border-color: var(--as-nav-cta-surface-hover);
color: var(--as-nav-cta-text);
transform: translateY(-1px);
}
/* Local CTA rule:
widget-navigation links are treated as button-like calls to action,
while the site-finder route keeps the stronger orange Join Now variant. */
.widget .list--navigation a.list__link[href*="site-finder"],
.widget-navigation a.list__link[href*="site-finder"] {
background: var(--as-nav-cta-join-surface);
border-color: var(--as-nav-cta-join-surface);
color: var(--as-nav-cta-join-text);
}
.widget .list--navigation a.list__link[href*="site-finder"]:hover,
.widget .list--navigation a.list__link[href*="site-finder"]:focus-visible,
.widget-navigation a.list__link[href*="site-finder"]:hover,
.widget-navigation a.list__link[href*="site-finder"]:focus-visible {
background: var(--as-nav-cta-join-surface);
border-color: var(--as-nav-cta-join-surface);
color: var(--as-nav-cta-join-text);
filter: brightness(0.94);
}
.box h2.widget__heading,
.program-card h3,
.tag,
.dataTables_info,
.dataTables_paginate {
color: var(--as-color-surface-strong);
}
.program-card,
.card {
border: var(--border-width-base) solid transparent;
}
:is(#timeTableDimensions, #timeTableAll) thead {
background: var(--as-color-table-surface);
}
:is(#timeTableDimensions, #timeTableAll) tbody tr:nth-child(odd) {
background: var(--as-color-table-surface);
}
:is(#timeTableDimensions, #timeTableAll) tbody tr:nth-child(even),
:is(#timeTableDimensions, #timeTableAll) tfoot,
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
background: var(--as-color-surface-strong-alt);
}
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search,
#timeTableAll_wrapper .dt-paging .dt-paging-button,
button.dt-paging-button {
color: var(--color-text-inverse);
border-color: var(--brand-white);
}
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input,
:is(#timeTableDimensions, #timeTableAll) tfoot select {
min-height: 2.75rem;
color: var(--as-color-surface-strong);
background: var(--color-surface);
border-color: var(--as-color-surface-strong);
}
.alert.alert--warning {
border-color: var(--as-color-alert-action);
background: var(--as-color-alert-surface);
}
.alert.alert--warning .alert__link {
background: var(--as-color-alert-action);
border-color: var(--as-color-alert-action);
color: var(--color-text-inverse);
}
@media (max-width: 48rem) {
html {
font-size: var(--as-mobile-root-font-size);
}
.container,
#header .container,
.news-article .container,
.news-list .container,
.event-list .container,
.search-list .container,
.event-article .container,
.index-modular .widget-row:not(:first-child),
.homepage-modular article#content .widget-row:not(:first-child),
.category-modular .row .widget-row:not(:first-child),
.document-article article#content > :not(:first-child),
.box,
article.box.post,
.card,
.program-card,
.program-card-2 {
box-sizing: border-box;
max-width: 100%;
}
details:last-child {
margin-bottom: var(--as-details-margin-bottom-mobile);
}
.news-article .container,
.news-list .container,
.event-list .container,
.search-list .container,
.event-article .container {
padding-left: var(--as-space-inline);
padding-right: var(--as-space-inline);
}
.index-modular {
/* --as-carousel-height, heading/cta -offset-top(-mobile[-alt]) are flat, single-value
tokens now (2026-09-11 rebuild) -- percentages, not rems, so they no longer need a
"mobile" vs "mobile-compact" redirect pair; the one value is correct at every width
the consuming rule (above, in the @media block) is active at. */
--as-carousel-height: var(--as-carousel-height-mobile-compact);
--as-carousel-heading-size-mobile: var(--as-carousel-heading-size-mobile-compact);
--as-carousel-cta-size: var(--as-carousel-cta-size-mobile-compact);
--as-carousel-control-size: var(--as-carousel-control-size-mobile-compact);
--as-carousel-control-line-height: var(--as-carousel-control-line-height-mobile-compact);
--as-carousel-control-hit-width: var(--as-carousel-control-hit-width-mobile-compact);
--as-carousel-pills-offset-bottom: var(--as-carousel-pills-offset-bottom-mobile-compact);
--as-carousel-pill-padding-block: var(--as-carousel-pill-padding-block-mobile-compact);
--as-carousel-pill-padding-inline: var(--as-carousel-pill-padding-inline-mobile-compact);
--as-carousel-pill-font-size: var(--as-carousel-pill-font-size-mobile-compact);
--as-carousel-playpause-size: var(--as-carousel-playpause-size-mobile-compact);
--as-carousel-playpause-offset-right: var(--as-carousel-playpause-offset-right-mobile-compact);
--as-carousel-playpause-offset-bottom: var(--as-carousel-playpause-offset-bottom-mobile-compact);
--as-carousel-cta-padding-block: var(--as-carousel-cta-padding-block-mobile-compact);
--as-carousel-cta-padding-inline: var(--as-carousel-cta-padding-inline-mobile-compact);
--as-hero-copy-width-mobile: var(--as-hero-copy-width-mobile-compact);
--as-hero-copy-offset-mobile: var(--as-hero-copy-offset-mobile-compact);
}
.category-modular #main header h1,
.document-article #main header h1,
.homepage-modular #main header h1,
.event-article header h1,
.event-list h1,
.news-list h1,
.search-list h1 {
font-size: var(--as-page-title-size-mobile);
line-height: 1.05;
margin-bottom: 0.5rem;
}
nav.breadcrumb {
display: none;
}
/* Mobile content shell:
keep handset content centred and remove the legacy row bleed from
stacked content rows without disturbing the first full-bleed hero
row used by the modular page templates. */
.index-modular article#content > .row,
.homepage-modular article#content > .row,
.category-modular article#content > .row,
.document-article article#content > .row,
.news-article article#content > .row,
.news-list article#content > .row,
.event-article article#content > .row,
.event-list article#content > .row,
.search-list article#content > .row {
margin-left: 0;
}
/* Mobile route-shell centering:
news/event/search templates still enter `#main` through a top-level Jadu
grid row before the inner article/listing rows we already flattened. Clear
that outer mobile gutter too so the whole stacked shell stays centred. */
.news-article #main > .container > .row,
.news-list #main > .container > .row,
.event-article #main > .container > .row,
.event-list #main > .container > .row,
.search-list #main > .container > .row {
margin-left: 0;
}
.index-modular article#content > .row:first-of-type,
.homepage-modular article#content > .row:first-of-type,
.category-modular article#content > .row:first-of-type {
margin-top: 30px;
margin-left: 0;
}
.index-modular article#content > .row > *,
.homepage-modular article#content > .row > *,
.category-modular article#content > .row > *,
.document-article article#content > .row > *,
.news-article article#content > .row > *,
.news-list article#content > .row > *,
.event-article article#content > .row > *,
.event-list article#content > .row > *,
.search-list article#content > .row > * {
padding-left: 0;
}
.news-article #main > .container > .row > *,
.news-list #main > .container > .row > *,
.event-article #main > .container > .row > *,
.event-list #main > .container > .row > *,
.search-list #main > .container > .row > * {
padding-left: 0;
}
.index-modular article#content > .row:first-of-type > .col-12 > .widget-row:first-of-type,
.homepage-modular article#content > .row:first-of-type > .col-12 > .widget-row:first-of-type,
.category-modular article#content > .row:first-of-type > .col-12 > .widget-row:first-of-type {
width: calc(100% + (var(--as-space-inline) * 2));
max-width: none;
margin-left: calc(var(--as-space-inline) * -1);
margin-right: calc(var(--as-space-inline) * -1);
}
.index-modular .widget-row:not(:first-child),
.homepage-modular article#content .widget-row:not(:first-child),
.category-modular .row .widget-row:not(:first-child),
.document-article article#content > :not(:first-child) {
width: var(--as-layout-content-width-mobile);
}
.listing__content {
margin-left: 0;
}
/* Mobile listing text width:
legacy listing/news/event rows still render through fixed grid
columns like `.col-8` and `.col-4`, which leaves summaries using
only part of the handset width. Flatten those listing rows into a
single-column mobile flow so text can use the full readable measure. */
.listing > .row,
.listing--featured > .row {
margin-left: 0;
}
.listing > .row > *,
.listing--featured > .row > * {
width: 100%;
padding-left: 0;
}
.listing > .row > [class*="col-"]:not(:has(*)),
.listing--featured > .row > [class*="col-"]:not(:has(*)) {
display: none;
}
.card-container,
.program-container {
grid-template-columns: 1fr;
gap: var(--as-space-inline);
}
.card,
.program-card,
.program-card-2 {
min-height: 0;
}
.card {
padding: var(--as-card-padding-mobile);
}
.card-container,
.program-container {
gap: var(--as-card-gap-mobile);
}
.program-container {
margin-top: var(--as-program-container-margin-top-mobile);
}
.program-image {
height: var(--as-program-image-height-mobile);
}
.card h3,
.program-card h3 {
min-height: var(--as-card-title-min-height-mobile);
line-height: 1.1;
margin-bottom: 0.5rem;
}
.program-card h3 {
margin-top: 0.75rem;
margin-left: var(--as-card-title-margin-inline);
margin-right: var(--as-card-title-margin-inline);
}
.card p,
.program-info p {
margin-bottom: 0;
}
.program-info {
margin-bottom: var(--as-card-content-margin-bottom-mobile);
}
.program-card > .btn,
.program-card-2 .btn {
margin-top: 0.75rem;
}
.category-modular article#content:has(.program-container):has(.card-container) .card-container .card {
min-height: var(--as-community-card-min-height-mobile);
align-items: flex-start;
}
.box.post .slide-image h2 {
line-height: 1.05;
}
.slide-image h2 {
width: var(--as-hero-copy-width-mobile);
margin-left: var(--as-hero-copy-offset-mobile) !important;
}
.slide-image a {
width: auto;
max-width: calc(100% - (var(--as-space-inline) * 2));
margin-left: var(--as-hero-copy-offset-mobile) !important;
line-height: 1.15;
display: inline-flex;
align-items: center;
}
/* Homepage hero spacer cleanup:
the live hero widget still carries four CMS-authored blank paragraph
spacers beneath the carousel snippet. Collapse only that first homepage
widget on mobile so the hero hands off directly into the card content. */
.index-modular article#content > .row:first-of-type > .col-12 > .widget-row:first-of-type .editor > p:first-of-type {
margin-bottom: 0;
}
.index-modular article#content > .row:first-of-type > .col-12 > .widget-row:first-of-type .editor > p:nth-of-type(n + 2):nth-of-type(-n + 5) {
display: none;
}
/* Home hero -> next section gap (mobile only), retuned 2026-09-18:
the spacer-cleanup rule above no longer controls this seam -- since the
hero carousel rebuild the trailing spacer paragraph now sits BEFORE the
carousel div, adjacent to its own JS-set `margin-top: -50px`, so any
margin added there gets eaten by that negative margin instead of
reaching the section below. The real, single source of this gap is
`.program-container`'s own margin-top (--as-program-container-margin-top-mobile,
1rem), which collapses all the way up through the intervening wrapper
divs to sit between the hero widget-row and the next one. That token is
shared by every `.program-container` on every mobile page, so it is not
the right lever for a homepage-hero-only change -- this rule targets
only the widget-row immediately after the home hero instead. */
.index-modular .widget-row:first-of-type + .widget-row .program-container {
margin-top: var(--as-hero-section-gap-mobile);
}
.widget-width,
.widget-width.widget-width--50,
.widget-width--54,
.widget-width--53,
.widget-width--52,
.widget-width--51,
.widget-width--50,
.widget-width--49,
.widget-width--48,
.widget-width--47,
.widget-width--46 {
float: none;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
ul.list.list--navigation,
.widget-navigation ul,
#pages-in-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-left: 0;
margin-right: 0;
margin-top: 0.75rem;
}
.widget .list--navigation li.list__item,
.widget-navigation ul li,
#pages-in-list li.list__item,
#pages-in-list li.list__item.is-active {
width: 100%;
margin: 0;
box-sizing: border-box;
}
.widget .list--navigation a.list__link,
.widget-navigation a.list__link,
#pages-in-list li.list__item,
#pages-in-list li.list__item a {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
#header {
padding-top: 0.75rem;
padding-bottom: var(--as-header-mobile-padding-bottom);
min-height: 0;
}
#header .container {
padding-left: var(--as-space-inline);
padding-right: var(--as-space-inline);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
a.logo {
/* was a hardcoded 7.5rem -- larger than the 7rem the logo had already
settled to just above this breakpoint (980-768px), an accidental
size-up on narrower phones nobody intended. Now reads the same
fluid token as everywhere else, which floors to 7rem here too. */
float: none;
display: block;
margin-left: auto;
margin-right: auto;
max-width: var(--as-header-logo-max-width);
}
.symbol img {
margin-left: auto;
margin-right: auto;
display: block;
}
#footer .row .col-12 section {
top: var(--as-header-mobile-search-top);
left: var(--as-space-inline);
right: var(--as-space-inline);
width: auto;
max-width: none;
transform: none;
}
#footer .site-search,
#footer form[role="search"],
#footer .search,
#footer #js-search,
#footer .site-search--header {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.site-search--header .form__append-group,
#footer .site-search .form__append-group,
#footer #js-search .form__append-group {
display: grid;
grid-template-columns: minmax(0, var(--as-header-mobile-search-field-share)) minmax(0, var(--as-header-mobile-search-button-share));
align-items: stretch;
gap: var(--as-header-mobile-search-gap);
}
#footer .site-search .form__append-group > *,
#footer #js-search .form__append-group > *,
#footer .site-search--header .form__append-group > * {
width: 100%;
max-width: none;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
#footer .site-search input,
#footer .site-search input[type="search"],
#footer .site-search input[type="text"],
#footer #search-site-header {
min-height: 2.75rem;
}
#footer .site-search .button,
#footer .site-search button,
#footer input[type="submit"] {
min-height: 2.75rem;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
padding-left: var(--as-header-mobile-search-button-padding-inline);
padding-right: var(--as-header-mobile-search-button-padding-inline);
font-size: var(--as-header-mobile-search-button-font-size);
}
.join {
top: var(--as-join-offset-top-mobile);
left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
.carousel-controls label,
.join,
.join a {
transition: none !important;
animation: none !important;
}
}
@media (prefers-reduced-transparency: reduce) {
#header,
nav.breadcrumb,
.alert.alert--warning,
.join a,
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search {
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (prefers-color-scheme: dark) {
html,
body,
#main,
footer#footer {
background: var(--as-dark-page-bg);
color: var(--color-text);
}
#header,
nav.breadcrumb,
.category-modular #main header h1,
.document-article #main header h1,
.homepage-modular #main header h1,
.event-article header h1 {
background: var(--as-dark-shell-bg);
}
#header {
border-bottom: var(--border-width-base) solid var(--as-dark-shell-border);
}
.box,
article.box.post,
.program-card,
.program-card-2,
.card {
background: var(--as-dark-panel-bg);
color: var(--color-text);
border-color: var(--as-dark-shell-border);
}
#header nav > ul > li a:not(.button),
#nav > ul > li > ul > li a:not(.button),
nav.breadcrumb a,
.widget .list--navigation a.list__link,
.widget-navigation a.list__link,
.alert.alert--warning .alert__link,
.join a,
#timeTableAll_wrapper .dt-paging .dt-paging-button {
color: var(--color-text-inverse);
}
a:not(.button):not(.btn) {
color: var(--as-dark-link);
}
a:not(.button):not(.btn):hover,
a:not(.button):not(.btn):focus-visible {
color: var(--as-dark-link-hover);
}
.program-card h3,
.tag,
.box h2.widget__heading,
.callout,
.news-list h1,
.news-list h2,
.news-list h3,
.news-article h1,
.news-article h2,
.news-article h3,
.event-list h1,
.event-list h2,
.event-list h3,
.event-article h1,
.event-article h2,
.event-article h3,
.search-list h1,
.search-list h2,
.search-list h3 {
color: var(--as-dark-heading);
}
:is(.news-article, .event-article) .editor :is(h1, h2, h3, h4, h5, h6) {
color: var(--as-dark-heading);
}
.tag {
background: var(--as-dark-chip-bg);
color: var(--as-dark-chip-text);
}
.news-list .listing__content a,
.news-article .listing__content a,
.event-list .listing__content a,
.event-article .listing__content a,
.search-list .listing__content a,
.news-list .listing__heading a,
.news-article .listing__heading a,
.event-list .listing__heading a,
.event-article .listing__heading a,
.search-list .listing__heading a,
.news-list h1 a,
.news-list h2 a,
.news-list h3 a,
.news-article h1 a,
.news-article h2 a,
.news-article h3 a,
.event-list h1 a,
.event-list h2 a,
.event-list h3 a,
.event-article h1 a,
.event-article h2 a,
.event-article h3 a,
.search-list h1 a,
.search-list h2 a,
.search-list h3 a,
.news-list article a,
.event-list article a,
.search-list article a {
color: var(--as-dark-link) !important;
}
.alert.alert--warning {
color: var(--color-text);
}
p.callout,
.editor p.callout,
article.box.post p.callout {
background-color: var(--as-dark-shell-bg);
color: var(--color-text-inverse) !important;
border-color: var(--as-dark-shell-border);
}
p.callout a,
.editor p.callout a,
article.box.post p.callout a,
p.callout strong,
.editor p.callout strong,
article.box.post p.callout strong {
color: inherit !important;
}
.dataTables_info,
#timeTableAll_wrapper .dt-info,
#timeTableAll_wrapper .dt-layout-cell {
color: var(--color-text-inverse);
}
.news-list .listing__meta,
.news-article .listing__meta,
.event-list .listing__meta,
.event-article .listing__meta,
.search-list .listing__meta,
.news-list .meta,
.news-article .meta,
.event-list .meta,
.event-article .meta,
.search-list .meta {
color: var(--color-text-muted);
}
.news-list .listing__meta strong,
.news-article .listing__meta strong,
.event-list .listing__meta strong,
.event-article .listing__meta strong,
.search-list .listing__meta strong,
.news-list .listing__meta b,
.news-article .listing__meta b,
.event-list .listing__meta b,
.event-article .listing__meta b,
.search-list .listing__meta b,
.news-list .meta strong,
.news-article .meta strong,
.event-list .meta strong,
.event-article .meta strong,
.search-list .meta strong,
.news-list .meta b,
.news-article .meta b,
.event-list .meta b,
.event-article .meta b,
.search-list .meta b {
color: inherit !important;
}
.box form .form__label,
article.box.post form .form__label,
.aside__section form .form__label,
.box form legend,
article.box.post form legend,
.aside__section form legend {
color: var(--color-text-inverse);
}
.box form select,
.box form .form__select,
article.box.post form select,
article.box.post form .form__select,
.aside__section form select,
.aside__section form .form__select {
background-color: var(--as-dark-panel-bg) !important;
color: var(--color-text-inverse) !important;
-webkit-text-fill-color: var(--color-text-inverse) !important;
border-color: var(--as-dark-shell-border) !important;
background-image: url("data:image/svg+xml;utf8,\
") !important;
}
.box form select option,
.box form .form__select option,
article.box.post form select option,
article.box.post form .form__select option,
.aside__section form select option,
.aside__section form .form__select option {
background-color: var(--as-dark-panel-bg);
color: var(--color-text-inverse);
}
.site-search input,
.site-search input[type="search"],
.site-search input[type="text"],
#header .site-search input,
#header input[type="search"],
#header input[type="text"],
#timeTableAll_wrapper .dt-length .dt-input,
#timeTableAll_wrapper .dt-search .dt-input,
:is(#timeTableDimensions, #timeTableAll) tfoot select {
background: var(--as-dark-panel-bg) !important;
background-color: var(--as-dark-panel-bg) !important;
color: var(--color-text-inverse) !important;
-webkit-text-fill-color: var(--color-text-inverse) !important;
caret-color: var(--color-text-inverse);
border-color: var(--as-dark-shell-border);
}
.site-search input::placeholder,
.site-search input[type="search"]::placeholder,
.site-search input[type="text"]::placeholder {
color: var(--color-text-muted) !important;
}
.slide-image a,
.slide-image a:hover,
.slide-image a:focus-visible {
color: var(--as-hero-cta-text) !important;
background-color: var(--as-hero-cta-bg) !important;
}
}
@media (forced-colors: active) {
#header,
#main,
.box,
article.box.post,
nav.breadcrumb,
.widget .list--navigation a.list__link,
.widget-navigation a.list__link,
.alert.alert--warning,
.alert.alert--warning .alert__link,
.join a,
#timeTableAll_wrapper .dt-length,
#timeTableAll_wrapper .dt-search,
#timeTableAll_wrapper .dt-paging .dt-paging-button,
button.dt-paging-button,
:is(#timeTableDimensions, #timeTableAll),
:is(#timeTableDimensions, #timeTableAll) thead,
:is(#timeTableDimensions, #timeTableAll) tbody tr,
:is(#timeTableDimensions, #timeTableAll) tfoot {
background: Canvas !important;
color: CanvasText !important;
border-color: CanvasText !important;
box-shadow: none !important;
}
:is(#timeTableDimensions, #timeTableAll) a,
nav.breadcrumb a,
.widget .list--navigation a.list__link,
.widget-navigation a.list__link,
.alert.alert--warning .alert__link,
.join a {
color: LinkText !important;
}
}
/* ============================================================
S-ActiveStoke - SITE-SPECIFIC PAGE TREATMENTS
============================================================
These rules are truthful only to specific Active Stoke pages and
stay out of the shared component flow so future maintainers can
audit local behaviour without reverse-engineering S03 blocks.
============================================================ */
/* Centres landing cards:
the `Centres` image-overlay tag is a separate HTML label on this page,
not text baked into the bitmap asset. Hide it here only. */
.category-modular article#content:has(a.btn[href*="/dimensions"]):has(a.btn[href*="/fentonmanor"]):has(a.btn[href*="/wallace"]) .program-image > .tag {
display: none;
}
/* Activities landing cards:
the repeated `Activities` image-overlay tag duplicates the card context
on this page, so hide that separate chip only for the activities trio. */
.category-modular article#content:has(a.btn[href*="/dimensions-activities"]):has(a.btn[href*="/fenton-activities"]):has(a.btn[href*="/wallace-activities"]) .program-image > .tag {
display: none;
}
/* Birthday parties:
keep the treatment local to the birthday row and its paired image column,
using the existing birthday anchor as the truthful hook. */
/* Birthday shell:
establish the local surface, spacing, and decorative field on the
real birthday row without disturbing the paired image column. */
.category-modular .widget-row:has(.editor a[name="party"]) {
width: var(--as-party-section-width);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
background: var(--as-party-shell-bg);
border: var(--border-width-base) solid var(--as-party-shell-border);
border-radius: var(--as-party-shell-radius);
box-shadow: var(--as-party-shell-shadow);
padding: var(--as-party-shell-padding);
}
.category-modular .widget-row:has(.editor a[name="party"])::before,
.category-modular .widget-row:has(.editor a[name="party"])::after {
content: "";
position: absolute;
border-radius: 999px;
pointer-events: none;
z-index: 0;
}
.category-modular .widget-row:has(.editor a[name="party"])::before {
top: -2.5rem;
right: -1.5rem;
width: 2.9rem;
height: 2.9rem;
background: var(--as-party-shell-orb-a);
box-shadow: var(--as-party-shell-ball-shadow-a);
transform: rotate(-10deg);
}
.category-modular .widget-row:has(.editor a[name="party"])::after {
bottom: -1.75rem;
left: -0.75rem;
width: 2.4rem;
height: 3.15rem;
background: var(--as-party-shell-orb-b);
border-radius: 52% 52% 46% 46% / 58% 58% 42% 42%;
box-shadow:
var(--as-party-shell-ball-shadow-b),
var(--as-party-shell-balloon-shadow);
transform: rotate(10deg);
}
.category-modular .widget-row:has(.editor a[name="party"]) > .widget-width {
position: relative;
z-index: 1;
}
/* Birthday typography:
scope the alternate font and stronger weight locally so the section
feels friendlier without leaking a second type voice site-wide. */
.category-modular .editor:has(a[name="party"]) {
font-family: var(--as-party-font-family);
font-weight: 500;
}
.category-modular .editor:has(a[name="party"]) > h2 {
font-family: var(--as-party-font-family);
font-weight: 700;
line-height: 1.1;
}
.category-modular .editor:has(a[name="party"]) > :is(h2 + h3, hr + h3) {
background: var(--as-party-heading-surface);
border-left: 0.35rem solid var(--as-party-heading-border);
padding: 1rem 1.25rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.15;
}
.category-modular .editor:has(a[name="party"]) > h4 {
color: var(--as-party-subheading);
font-weight: 600;
line-height: 1.2;
}
.category-modular .editor:has(a[name="party"]) p,
.category-modular .editor:has(a[name="party"]) li {
font-weight: 500;
line-height: 1.55;
}
/* Birthday inline emphasis:
some CMS-authored package labels arrive as standalone `` text
rather than as the local heading levels above. Keep that emphasis on
the birthday token path so dark/adaptation states inherit correctly. */
.category-modular .editor:has(a[name="party"]) strong,
.category-modular .editor:has(a[name="party"]) b {
color: inherit;
font-family: var(--as-party-font-family);
font-weight: 700;
}
/* Birthday content expansion:
once the right-hand image stack ends, allow the later birthday copy
and controls to reclaim that horizontal space and reduce deep wrapping. */
.category-modular .editor:has(a[name="party"]) > h4:nth-of-type(2),
.category-modular .editor:has(a[name="party"]) > h4:nth-of-type(2) ~ * {
margin-right: calc(var(--as-party-content-expansion) * -1);
}
.category-modular .editor:has(a[name="party"]) > p .btn {
background: var(--as-party-button-bg);
color: var(--as-party-button-text);
border-color: var(--as-party-button-bg);
box-shadow: var(--shadow-soft);
}
.category-modular .editor:has(a[name="party"]) > p .btn:hover,
.category-modular .editor:has(a[name="party"]) > p .btn:focus-visible {
filter: brightness(0.96);
}
/* Birthday section divider:
restyle the inherited `
` markers inside the local birthday flow
so the two offer blocks separate cleanly without a generic rule. */
.category-modular .editor:has(a[name="party"]) > hr {
border: 0;
height: 0.1875rem;
background: linear-gradient(
90deg,
transparent 0%,
var(--as-party-rule) 16%,
var(--as-party-rule) 84%,
transparent 100%
);
margin: 2rem 0;
}
/* Birthday responsive fallback:
withdraw the local width gain on narrower viewports so the section
collapses back to the shared content geometry without overflow. */
@media (max-width: 66.25rem) {
.category-modular .widget-row:has(.editor a[name="party"]) {
width: 100%;
}
.category-modular .editor:has(a[name="party"]) > h4:nth-of-type(2),
.category-modular .editor:has(a[name="party"]) > h4:nth-of-type(2) ~ * {
margin-right: 0;
}
}
/* Birthday reduced-transparency fallback:
keep the section readable when decorative depth or soft transparency
is reduced by user preference. */
@media (prefers-reduced-transparency: reduce) {
.category-modular .widget-row:has(.editor a[name="party"]) {
box-shadow: none;
background: var(--color-surface);
}
.category-modular .widget-row:has(.editor a[name="party"])::before,
.category-modular .widget-row:has(.editor a[name="party"])::after {
display: none;
}
}