/* ==========================================================================
LPEN — Academy resource index
Tokens: LPEN-Design-System.md §3 colour · §4 radius/elevation/motion · §5 type
Written unscoped and readable. build_academy.py prefixes every selector with
#lpen-acad at deploy time (CLAUDE.md §18b.3 — the kit stylesheet emits
.elementor-kit-8 h3 at (0,1,1) and would otherwise outbid a bare class).
NOTE on the scoper: `.lpen-acad-host` must NOT be prefixed. It sits on the
Elementor widget wrapper, which is an ANCESTOR of #lpen-acad, so prefixing
would make it unmatchable. Same trap as the CPD Clips build. See _SKIP in
build_academy.py before harmonising the two scopers.
========================================================================== */
:root {
--la-navy-900: #012032;
--la-navy-800: #022E48;
--la-navy-700: #0B4465;
--la-navy-100: #C9DDE8;
--la-navy-50: #E5EEF3;
--la-navy-25: #F3F7F9;
--la-action: #0F5C96;
--la-gold-700: #8A5A08;
--la-gold-500: #C8901F;
--la-gold-50: #FDF3E0;
--la-ink: #111820;
--la-muted: #4A5666;
--la-subtle: #6B7684;
--la-border: #CFD6DD;
--la-surf-2: #EEF2F5;
--la-surf-1: #F6F8FA;
--la-white: #FFFFFF;
--la-focus: #6A3FD4;
--la-halo: #F3F7F9;
--la-e1: 0 1px 3px rgba(1,32,50,.08), 0 1px 2px rgba(1,32,50,.06);
--la-e2: 0 4px 16px rgba(1,32,50,.12), 0 2px 6px rgba(1,32,50,.08);
--la-ease: cubic-bezier(.2,0,.2,1);
--la-font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
"Segoe UI", Arial, sans-serif;
}
/* ---------------------------------------------------------------- shell */
#lpen-acad {
font-family: var(--la-font);
color: var(--la-ink);
-webkit-font-smoothing: antialiased;
}
#lpen-acad *,
#lpen-acad *::before,
#lpen-acad *::after { box-sizing: border-box; }
#lpen-acad :focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--la-focus), 0 0 0 4px var(--la-halo);
border-radius: 4px;
}
/* Elementor gives every widget position:relative (§18b.4). The sticky toolbar
needs the wrapper out of the way to stick to the viewport. */
.lpen-acad-host { position: static !important; }
/* ---------------------------------------------------------------- icons */
#lpen-acad .lpen-i {
display: inline-block;
width: 20px; height: 20px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
vertical-align: -.22em;
}
#lpen-acad .lpen-i--14 { width: 14px; height: 14px; }
#lpen-acad .lpen-i--16 { width: 16px; height: 16px; }
#lpen-acad .lpen-i--18 { width: 18px; height: 18px; }
#lpen-acad .lpen-i--24 { width: 24px; height: 24px; }
#lpen-acad .lpen-i--32 { width: 32px; height: 32px; }
/* -------------------------------------------------------------- no-JS */
/* Search and filters need script. The list itself does not, so the fallback
is one honest line rather than a dead toolbar. */
#lpen-acad .lpen-acad__nojs {
margin: 0 0 24px;
padding: 12px 16px;
background: var(--la-gold-50);
border: 1px solid var(--la-gold-500);
border-radius: 6px;
font-size: 15px;
line-height: 22px;
color: var(--la-gold-700);
}
#lpen-acad.is-ready .lpen-acad__nojs { display: none; }
#lpen-acad:not(.is-ready) .lpen-acad__bar { display: none; }
/* ------------------------------------------------------------- toolbar */
#lpen-acad .lpen-acad__bar {
position: sticky;
top: var(--lpen-sticky-top, 0px);
z-index: 40;
background: rgba(255,255,255,.94);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--la-border);
margin: 0 0 28px;
padding: 16px 0 14px;
}
#lpen-acad .lpen-acad__barin { display: flex; flex-direction: column; gap: 12px; }
#lpen-acad .lpen-acad__row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* search — the is created in JS, because the HTML-widget sanitiser
strips and