s, so they get the hover affordance
and keyboard parity via :focus-within, but deliberately NO cursor:pointer.
======================================================================= */
:root{
--card-line-hover:var(--blue);
--card-t:.2s;
}
.ep,.ctrl{
transition:border-color var(--card-t) ease;
}
@media (hover:hover) and (pointer:fine){
.ep:hover,.ctrl:hover{border-color:var(--card-line-hover);}
}
.ep:focus-within,.ctrl:focus-within,.cap:focus-within{
border-color:var(--card-line-hover);
}
/* ==== end standardised card hover ====================================== */
/* ==== Code panels — defensive integration override =====================
Critical background/colour pairs are literal, not tokens, so a missing
variable or a theme rule can never leave light text on a white well.
Measured on #060E14: default 10.05:1 · string 16.71:1 · keyword 9.34:1
· number 9.70:1 · comment 5.19:1 · verb 11.64:1 — all AA or better.
===================================================================== */
html body .code,
html body .sc,
html body pre{
background:#060E14 !important;
color:#AEBBD4 !important;
border-color:#1E3846 !important;
}
html body .code pre,
html body .sc pre,
html body pre code{
background:transparent !important;
color:inherit !important;
}
html body .code-h,
html body .sc-h{
background:#0B1620 !important;
color:#AEBBD4 !important;
border-bottom-color:#172B36 !important;
}
html body :not(pre) > code{
background:#12232E !important;
color:#AEBBD4 !important;
border:1px solid #1E3846 !important;
border-radius:6px;
padding:.12em .42em;
}
html body .c-key,html body .cl.c-key{color:#6FC3AE !important;}
html body .c-str{color:#E8EEFB !important;}
html body .c-num{color:#E0B04A !important;}
html body .c-com,html body .c-mut{color:#7385A3 !important;}
html body .c-verb{color:#8FD6C3 !important;}
html body .c-ok{color:#34E0A6 !important;}
html body .c-path{color:#AEBBD4 !important;}
html body .c-event{color:#5AA0FF !important;}
html body .code-h .tl,html body .sc-h .tl{background:#1E3846 !important;}
/* ==== end code panels ================================================= */
/* ==== De-emphasis without opacity ======================================
Opacity on text multiplies against the background; stacked on --txt-3 it
produced 1.40-2.33:1. State is now carried by colour and glyph.
--txt-3 measures 4.88:1 on the ledger ground. Disabled controls keep
their opacity — WCAG exempts them.
===================================================================== */
.dir a.off b,.dir a.off em,.enum span.off b,.enum span.off em{color:var(--txt-3);}
.soon,.legend i.n,.legend i.x,.mx td.n,.mx td.x{opacity:1;color:var(--txt-3);}
.dir a.off,.enum span.off{opacity:1;}
/* ==== end de-emphasis ================================================= */
/* =========================================================================
A8 Core - Products Mega Menu (v2)
Scoped entirely to .nav-mega / .nm-*. Nothing here can reach any other
card, dropdown or navigation item. Every colour is an existing A8 token;
type, radius, transitions and the button base are the site's own.
Panel ground is --ledger-850 (not --ledger-800) for one measured reason:
the muted category label --txt-3 scores 4.30:1 on #12232E (AA fail) and
4.63:1 on #0E1C26 (AA pass) - see the report's contrast table.
====================================================================== */
:root{ --nm-w:940px; --nm-edge:24px; --nm-t:.18s; }
/* the trigger ---------------------------------------------------------- */
html body header.nav .nav-dd-products{position:static;} /* panel anchors to the header, not the button */
html body header.nav .nav-dd-products::after{content:none;display:none;} /* kill the 18px hover bridge: panel is flush, no gap to bridge */
html body header.nav .nm-t{cursor:pointer;}
html body header.nav .nm-t .nav-dd-c{transition:transform var(--nm-t) ease;}
html body header.nav .nav-dd-products.nm-open .nm-t{color:var(--txt);}
html body header.nav .nav-dd-products.nm-open .nm-t .nav-dd-c{transform:rotate(180deg);}
/* the panel ------------------------------------------------------------ */
html body header.nav .nav-mega{
position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
z-index:70;
width:min(var(--nm-w), calc(100vw - (var(--nm-edge) * 2)));
min-width:0; max-width:calc(100vw - (var(--nm-edge) * 2));
background:var(--ledger-850,#0E1C26);
border:1px solid var(--line,#1E3846);
border-radius:16px;
box-shadow:0 26px 64px -32px #000;
text-align:left;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity var(--nm-t) ease, transform var(--nm-t) ease, visibility var(--nm-t);
}
html body header.nav .nav-mega .nm-inner{
max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain;
border-radius:inherit;
}
/* open state: CSS-only fallback is hover/focus; with JS the class is authoritative */
html body header.nav .nav-dd-products:hover > .nav-mega,
html body header.nav .nav-dd-products:focus-within > .nav-mega,
html body header.nav .nav-dd-products.nm-open > .nav-mega{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
html.nm-js body header.nav .nav-dd-products:hover > .nav-mega,
html.nm-js body header.nav .nav-dd-products:focus-within > .nav-mega{
opacity:0; visibility:hidden; pointer-events:none;
transform:translateX(-50%) translateY(-6px);
}
html.nm-js body header.nav .nav-dd-products.nm-open > .nav-mega{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
/* JS-measured horizontal anchor: aligns under the trigger, clamped to the viewport */
html.nm-js body header.nav .nav-mega.nm-anchored{left:var(--nm-x,50%); transform:translateY(-6px);}
html.nm-js body header.nav .nav-dd-products.nm-open > .nav-mega.nm-anchored{transform:translateY(0);}
/* 1 - introductory header --------------------------------------------- */
html body header.nav .nav-mega .nm-head{
display:flex; align-items:center; justify-content:space-between; gap:28px;
padding:30px 32px 26px;
border-bottom:1px solid var(--line-soft,#172B36);
}
html body header.nav .nav-mega .nm-intro{flex:1 1 60%; min-width:0;}
html body header.nav .nav-mega .nm-title{
font-family:var(--disp),sans-serif; font-size:17px; font-weight:700;
letter-spacing:-.01em; line-height:1.25; color:var(--txt,#E8EEFB); margin:0 0 6px;
}
html body header.nav .nav-mega .nm-sub{
font-family:var(--body),sans-serif; font-size:13px; line-height:1.55;
color:var(--txt-2,#AEBBD4); margin:0; max-width:48ch;
}
html body header.nav .nav-mega .nm-cta{
flex:0 0 auto; max-width:40%;
border-color:var(--verd-deep,#2F8B76);
background:rgba(111,195,174,.08);
color:var(--verd,#6FC3AE);
font-size:13.5px; padding:1.2em 1.35em;
}
html body header.nav .nav-mega .nm-cta:hover,
html body header.nav .nav-mega .nm-cta:focus-visible{
border-color:var(--verd,#6FC3AE); background:rgba(111,195,174,.14);
color:var(--verd-bright,#8FD6C3);
}
/* 2 - three-column product navigation --------------------------------- */
html body header.nav .nav-mega .nm-cols{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 34px; padding:22px 32px 16px;
}
html body header.nav .nav-mega .nm-col{min-width:0;}
html body header.nav .nav-mega .nm-h{
font-family:var(--mono),monospace; font-size:11px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase;
color:var(--txt-3,#7385A3); margin:0 0 10px;
}
html body header.nav .nav-mega .nm-list{list-style:none; margin:0; padding:0;}
html body header.nav .nav-mega .nm-list li{margin:0; padding:0;}
html body header.nav .nav-mega .nm-list a{
display:block; position:relative;
padding:11px 10px; margin-inline:-10px; border-radius:7px;
font-family:var(--body),sans-serif; font-size:13.5px; font-weight:500;
line-height:1.4; color:var(--txt-2,#AEBBD4);
text-decoration:none;
transition:color var(--nm-t) ease, background-color var(--nm-t) ease;
}
html body header.nav .nav-mega .nm-nw{white-space:nowrap;}
@media (hover:hover) and (pointer:fine){
html body header.nav .nav-mega .nm-list a:hover{
color:var(--txt,#E8EEFB); background-color:rgba(111,195,174,.07);
}
}
html body header.nav .nav-mega .nm-list a:focus-visible{
color:var(--txt,#E8EEFB); background-color:rgba(111,195,174,.07);
}
/* current page: colour PLUS a rule, never colour alone */
html body header.nav .nav-mega .nm-list a[aria-current="page"]{
color:var(--verd,#6FC3AE); font-weight:600;
}
html body header.nav .nav-mega .nm-list a[aria-current="page"]::before{
content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:2px;
border-radius:2px; background:var(--verd,#6FC3AE);
}
/* 3 - bottom utility navigation --------------------------------------- */
html body header.nav .nav-mega .nm-foot{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px 16px;
border-top:1px solid var(--line-soft,#172B36);
padding:19px 20px 21px;
}
html body header.nav .nav-mega .nm-foot a{
display:inline-flex; align-items:center; gap:.5em; justify-self:start;
padding:9px 12px; border-radius:7px;
font-family:var(--body),sans-serif; font-size:13px; font-weight:600;
color:var(--verd,#6FC3AE); text-decoration:none;
transition:color var(--nm-t) ease, background-color var(--nm-t) ease;
}
@media (hover:hover) and (pointer:fine){
html body header.nav .nav-mega .nm-foot a:hover{
color:var(--verd-bright,#8FD6C3); background-color:rgba(111,195,174,.07);
}
}
html body header.nav .nav-mega .nm-foot a:focus-visible{
color:var(--verd-bright,#8FD6C3); background-color:rgba(111,195,174,.07);
}
html body header.nav .nav-mega .nm-ar{
display:inline-block; transition:transform var(--nm-t) ease;
}
@media (hover:hover) and (pointer:fine){
html body header.nav .nav-mega a:hover .nm-ar{transform:translateX(3px);}
}
/* focus ring: the site's canonical one, restated so the panel never loses it */
html body header.nav .nav-mega a:focus-visible,
html body header.nav .nm-t:focus-visible{
outline:2px solid var(--verd-bright,#8FD6C3); outline-offset:2px;
}
/* short viewports / high zoom: two columns rather than a clipped panel */
@media (max-width:1040px) and (min-width:761px){
html body header.nav .nav-mega .nm-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
html body header.nav .nav-mega .nm-head{gap:18px;}
html body header.nav .nav-mega .nm-sub{max-width:40ch;}
}
/* --------------------------------------------------------------------- */
/* Mobile: Products becomes an accordion inside the existing hamburger */
/* menu. The desktop panel is never squeezed onto a phone. */
/* --------------------------------------------------------------------- */
@media (max-width:760px){
html body header.nav .nav-dd-products{position:relative;}
html body header.nav .nm-t{
display:flex !important; align-items:center; justify-content:space-between;
width:100%; min-height:44px; padding:8px 0 !important; text-align:left;
}
html body header.nav .nav-mega{
position:static; left:auto; top:auto; transform:none !important;
width:100%; max-width:100%;
opacity:1; visibility:visible; pointer-events:auto;
background:transparent; border:0; border-radius:0; box-shadow:none;
display:none;
}
html body header.nav .nav-dd-products.nm-open > .nav-mega{display:block;}
html.nm-js body header.nav .nav-dd-products:hover > .nav-mega,
html.nm-js body header.nav .nav-dd-products:focus-within > .nav-mega{
opacity:1; visibility:visible; pointer-events:auto;
}
html body header.nav .nav-mega .nm-inner{max-height:none; overflow:visible;}
html body header.nav .nav-mega .nm-head{
flex-direction:column; align-items:flex-start; gap:14px;
padding:6px 0 16px; border-bottom-color:var(--line-soft,#172B36);
}
html body header.nav .nav-mega .nm-title{display:none;} /* the trigger already says Products */
html body header.nav .nav-mega .nm-sub{display:none;}
html body header.nav .nav-mega .nm-cta{
max-width:100%; width:100%; justify-content:center; min-height:44px;
}
html body header.nav .nav-mega .nm-cols{
grid-template-columns:1fr; gap:18px 0; padding:16px 0 8px;
}
html body header.nav .nav-mega .nm-list a{
min-height:44px; display:flex; align-items:center;
padding:10px 10px; font-size:14px;
}
html body header.nav .nav-mega .nm-foot{
grid-template-columns:1fr; gap:2px; padding:14px 0 6px;
}
html body header.nav .nav-mega .nm-foot a{min-height:44px; padding:10px 12px;}
}
/* the hamburger panel must scroll, not run off the page, when Products expands.
(a8core-docs.css already does this for the 61 docs pages; the other 112 had
no guard, and an expandable section makes one necessary.) */
@media (max-width:760px){
html body header.nav .nav-links.open{
max-height:calc(100dvh - 72px); overflow-y:auto; -webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
}
@media (prefers-reduced-motion:reduce){
html body header.nav .nav-mega,
html body header.nav .nav-mega .nm-ar,
html body header.nav .nm-t .nav-dd-c,
html body header.nav .nav-mega .nm-list a,
html body header.nav .nav-mega .nm-foot a{transition:none !important;}
html body header.nav .nav-mega{transform:translateX(-50%) !important;}
html.nm-js body header.nav .nav-mega.nm-anchored{transform:none !important;}
}
/* print: the panel is chrome, never paper */
@media print{ html body header.nav .nav-mega{display:none !important;} }
/* ===================== end Products Mega Menu (v2) ==================== */
/* ===== FIIW2 v1.5 sitewide section grammar (2026-09-02). Replaces the per-page
tags on the six programme pages, and makes
bare .sec / .page-hero sections self-wrapping so a future page that forgets the
wrap class still renders inside the content column. /media/ keeps its own inner
and is excluded. Three separate rules on purpose: a browser
without :has() support drops only the last one. ===== */
body.page-id-4633 .sec>p,body.page-id-4634 .sec>p,body.page-id-4635 .sec>p,body.page-id-4636 .sec>p,body.page-id-4640 .sec>p,body.page-id-4641 .sec>p{max-width:66ch}
section.sec{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section.page-hero:not(:has(> div.wrap)){max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* ===== FIIW2 v1.6 specificity hardening (2026-09-02). Astra's
`.entry-content[data-ast-blocks-layout] > *` rule (specificity 0,2,0) sets
max-width:1920px on every direct child of the content and outranks both
`.wrap` (0,1,0) and the v1.5 `section.sec` (0,1,1). The hero escaped it at
(0,2,2) via its :not(:has()) clause, so on viewports wider than ~1350px the
hero (1200px) and the sections (1920px) split into two columns. These
child-scoped twins outrank Astra at (0,3,0)/(0,3,1) and put the hero and
every section back in the one --maxw column at any viewport. ===== */
.entry-content[data-ast-blocks-layout]>.wrap,
.entry-content[data-ast-blocks-layout]>section.sec{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}