/* ==========================================================================
LPEN — CPD Clips library
Tokens: LPEN-Design-System.md §3 colour · §4 radius/elevation/motion · §5 type
Written unscoped and readable. build_cpd_clips.py prefixes every selector
with #lpen-clips 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).
Selectors that already start with #lpen-clips-modal are left alone: the
dialog is moved to at runtime so it can never inherit a transformed
ancestor, which would break position:fixed.
========================================================================== */
:root {
--lc-navy-900: #012032;
--lc-navy-800: #022E48;
--lc-navy-700: #0B4465;
--lc-navy-100: #C9DDE8;
--lc-navy-50: #E5EEF3;
--lc-navy-25: #F3F7F9;
--lc-action: #0F5C96;
--lc-gold-700: #8A5A08;
--lc-gold-300: #E8B64A;
--lc-gold-50: #FDF3E0;
--lc-ink: #111820;
--lc-muted: #4A5666;
--lc-subtle: #6B7684;
--lc-bstrong: #78848F;
--lc-border: #CFD6DD;
--lc-surf-2: #EEF2F5;
--lc-surf-1: #F6F8FA;
--lc-white: #FFFFFF;
--lc-focus: #6A3FD4;
--lc-halo: #F3F7F9;
--lc-e1: 0 1px 3px rgba(1,32,50,.08), 0 1px 2px rgba(1,32,50,.06);
--lc-e2: 0 4px 16px rgba(1,32,50,.12), 0 2px 6px rgba(1,32,50,.08);
--lc-ease: cubic-bezier(.2,0,.2,1);
--lc-font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
"Segoe UI", Arial, sans-serif;
}
/* ---------------------------------------------------------------- shell */
#lpen-clips {
font-family: var(--lc-font);
color: var(--lc-ink);
-webkit-font-smoothing: antialiased;
}
#lpen-clips *,
#lpen-clips *::before,
#lpen-clips *::after { box-sizing: border-box; }
#lpen-clips :focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--lc-focus), 0 0 0 4px var(--lc-halo);
border-radius: 4px;
}
/* Elementor gives every widget position:relative (§18b.4). The sticky
toolbar needs the widget wrapper out of the way to stick to the viewport. */
.lpen-clips-host { position: static !important; }
/* ---------------------------------------------------------------- icons */
#lpen-clips .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-clips .lpen-i--14 { width: 14px; height: 14px; }
#lpen-clips .lpen-i--16 { width: 16px; height: 16px; }
#lpen-clips .lpen-i--18 { width: 18px; height: 18px; }
#lpen-clips .lpen-i--24 { width: 24px; height: 24px; }
#lpen-clips .lpen-i--32 { width: 32px; height: 32px; }
/* ------------------------------------------------------------- toolbar */
#lpen-clips .lpen-clips__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(--lc-border);
margin: 0 0 32px;
padding: 16px 0;
}
#lpen-clips .lpen-clips__barin {
display: flex;
flex-direction: column;
gap: 12px;
}
#lpen-clips .lpen-clips__row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* search — the is created in JS, because the HTML-widget sanitiser
strips and