/*
* library.css -- SME PDF Library (GENERATED -- do not edit)
*
* Built by scripts/build-css.js from assets\styles\library.css.
* Edit the source files, then run npm run build:css.
*/
/*
* library.css — SME PDF Library frontend entry point
*
* Enqueued by Assets::register() as handle `sme-pdf-library`.
* Load order: tokens (via base) → base → components → motion.
*
* base.css @imports tokens.css and owns the root typography.
* This file imports base.css (which pulls tokens) then the component files.
* It does NOT re-declare base.css rules.
*/
/* ---- base (tokens import + root typography + reset + container) ---- */
/*
* base.css — unlayered, .spl-root-scoped foundation.
* No @layer / @scope: the design system must WIN over hostile themes (Mayosis/
* Elementor) whose UNLAYERED rules beat any layered rule. Flat .spl-root prefixing
* gives the specificity to win; a scoped `all: revert` reset wipes inherited theme
* styles (incl. -webkit-text-fill-color) for a clean slate before tokens apply.
*/
/*
* tokens.css — SME PDF Library design tokens
*
* Single source of truth for all --spl-* custom properties.
* Values are transcribed verbatim from:
* docs/superpowers/specs/2026-06-19-plan-3-frontend-mockup.html
*
* Raw colour / spacing / font values are legitimate here (they ARE the
* primitives). stylelint-declaration-strict-value targets CONSUMERS of
* tokens; token definitions are exempted via .stylelintrc.json overrides.
*
* No @layer wrapper: this file is imported by base.css which is itself
* unlayered. Keeping tokens out of any layer lets the .spl-root and
* .spl-admin-root custom properties cascade freely to unlayered component rules.
*/
.spl-root,
.spl-admin-root {
/* ------------------------------------------------------------------
* Primitives — seeded from the live brand (smenode-labs.com)
* ------------------------------------------------------------------ */
--spl-color-orange-500: #fc6720;
--spl-color-orange-600: #e6571a;
--spl-color-orange-800: #c2410c; /* AA-safe burnt orange for white-on-orange CTAs (~5.9:1) */
--spl-color-orange-050: #fff3ec;
--spl-color-navy-950: #03283b; /* hero gradient dark start stop */
--spl-color-navy-900: #023047; /* brand deep navy */
--spl-color-navy-850: #063650; /* hero gradient lighter end stop */
--spl-color-navy-800: #04263a;
--spl-color-navy-700: #0a3a57;
--spl-color-teal-500: #0fa3a3;
--spl-color-slate-600: #475569;
--spl-color-slate-500: #64748b;
--spl-color-slate-300: #cbd5e1;
--spl-color-slate-200: #e6ebf1;
--spl-color-white: #fff;
--spl-color-grey-100: #f1f4f8;
--spl-color-grey-050: #f7f9fc;
--spl-color-green-700: #0d6e47; /* AA-safe on --spl-color-green-050 (~5.4:1) */
--spl-color-green-600: #16855c;
--spl-color-green-050: #e7f6ef;
--spl-color-blue-600: #2c5fd6;
--spl-color-blue-050: #eaf1ff;
--spl-color-amber-600: #8a5600;
--spl-color-amber-050: #fbf2df;
/* Admin redesign primitives (Plan 7A.2 Task 1) — transcribed verbatim from
* docs/superpowers/specs/assets/2026-07-06-admin-redesign-mockup.html :root.
* These are WordPress core's own wp-admin neutrals (canvas/border/ink), kept
* as distinct primitives from the marketing "slate/grey" scale above because
* they must match wp-admin chrome exactly, not the brand's own palette. */
--spl-color-orange-700: #d4693d; /* mockup --orange-hover */
--spl-color-wp-canvas: #f0f0f1; /* mockup --canvas */
--spl-color-wp-surface-alt: #f6f7f7; /* mockup --card-2 (zebra/hover surface) */
--spl-color-wp-border: #dcdcde; /* mockup --border */
--spl-color-wp-border-strong: #c3c4c7; /* mockup --border-strong */
--spl-color-wp-ink: #1e1e1e; /* mockup --ink */
--spl-color-wp-ink-muted: #646970; /* mockup --ink-muted */
--spl-color-wp-ink-faint: #8c8f94; /* mockup --ink-faint */
--spl-color-navy-tint-100: #eaf0f3; /* mockup --navy-tint */
--spl-color-navy-tint-050: #f3f7f9; /* mockup --navy-tint-2 */
--spl-color-status-good: #007a1f; /* mockup --good */
--spl-color-status-good-bg: #edfaef; /* mockup --good-bg */
--spl-color-status-warn: #9a6700; /* mockup --warn */
--spl-color-status-warn-bg: #fcf6e6; /* mockup --warn-bg */
--spl-color-status-crit: #c02629; /* mockup --crit */
--spl-color-status-crit-bg: #fcebec; /* mockup --crit-bg */
--spl-color-status-info: #135e96; /* mockup --info */
--spl-color-status-info-bg: #e8f2fb; /* mockup --info-bg */
/* ------------------------------------------------------------------
* Font stacks
* ------------------------------------------------------------------ */
--spl-font-heading: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--spl-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--spl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;
--spl-font-system: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; /* mockup --font; admin redesign only, Plan 7A.2 Task 1 */
/* ------------------------------------------------------------------
* Type scale
* ------------------------------------------------------------------ */
--spl-text-xs: 0.75rem;
--spl-text-sm: 0.85rem;
--spl-text-base: 1rem;
--spl-text-lg: 1.18rem;
--spl-text-xl: 1.5rem;
--spl-text-2xl: 2rem;
--spl-text-3xl: 2.7rem;
/* Admin type scale (Plan 7A.2 Task 1) — the mockup's font sizes are exact
* px values that don't line up with the marketing rem scale above (e.g.
* 13px vs. --spl-text-sm's 13.6px), and the mockup pixel spec is the
* authoritative source for the admin redesign. Kept as its own flat px
* scale rather than force-fitting the unrelated marketing scale. */
--spl-text-admin-2xs: 11px; /* eyebrow, thead th, pill/tag, countbadge */
--spl-text-admin-xs: 12px; /* tile label/delta, card__h .sub, chipbtn, viewtab, note */
--spl-text-admin-sm: 13px; /* btn, table body, field label, notice */
--spl-text-admin-base: 14px; /* card__h h3, tabs .tab, field input/select */
--spl-text-admin-md: 15px; /* card__h h2 */
--spl-text-admin-lg: 16px; /* empty state h3 */
--spl-text-admin-xl: 23px; /* phead h1 */
--spl-text-admin-2xl: 26px; /* tile .num */
/* ------------------------------------------------------------------
* Spacing scale
* ------------------------------------------------------------------ */
--spl-space-1: 0.25rem;
--spl-space-2: 0.5rem;
--spl-space-3: 0.75rem;
--spl-space-4: 1rem;
--spl-space-5: 1.5rem;
--spl-space-6: 2rem;
--spl-space-8: 3rem;
--spl-space-px-1: 1px;
--spl-space-px-2: 2px;
--spl-space-px-3: 3px;
--spl-space-px-5: 5px;
--spl-space-px-6: 6px;
--spl-space-px-7: 7px;
--spl-space-px-9: 9px;
--spl-space-px-10: 10px;
--spl-space-px-11: 11px;
--spl-space-px-13: 13px;
--spl-space-px-14: 14px;
--spl-space-px-18: 18px;
--spl-space-px-22: 22px;
--spl-space-px-30: 30px;
/* ------------------------------------------------------------------
* Border radius
* ------------------------------------------------------------------ */
--spl-radius-sm: 8px;
--spl-radius-md: 10px;
--spl-radius-lg: 14px;
--spl-radius-pill: 999px;
--spl-radius-admin-sm: 5px; /* mockup --radius-sm; admin controls/pills only, not part of the xs/sm/md/lg marketing scale */
--spl-radius-admin-2xs: 2px; /* mockup .phead h1 .accent rule */
--spl-radius-admin-xs: 4px; /* mockup .tag */
--spl-radius-admin-lg: 12px; /* mockup .empty .ic icon badge */
/* ------------------------------------------------------------------
* Border width
* ------------------------------------------------------------------ */
--spl-border-width-thin: 1px;
/* ------------------------------------------------------------------
* Shadows
* ------------------------------------------------------------------ */
--spl-shadow-card: 0 1px 2px rgb(2 48 71 / 7%), 0 6px 16px rgb(2 48 71 / 6%);
--spl-shadow-lift: 0 14px 30px rgb(2 48 71 / 15%);
--spl-shadow-hero-search-focus: var(--spl-shadow-lift), 0 0 0 3px var(--spl-color-navy-900), 0 0 0 5px var(--spl-color-white);
--spl-shadow-admin-card: 0 1px 2px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 4%); /* mockup --shadow; admin redesign only, Plan 7A.2 Task 1 */
/* ------------------------------------------------------------------
* Semantics — consumed by components; always reference primitives above
* ------------------------------------------------------------------ */
--spl-accent: var(--spl-color-orange-500);
--spl-accent-strong: var(--spl-color-orange-600);
--spl-accent-tint: var(--spl-color-orange-050);
--spl-accent-ink: #b8480d; /* AA-safe orange for small text/icons on white (~4.6:1) */
--spl-accent-hover: #ff7a38; /* lighter orange for hover on .spl-btn-primary */
--spl-accent-cta: var(--spl-color-orange-800); /* white-on-orange CTA inside the download box only (AA ~5.9:1) */
--spl-accent-cta-hover: #a8380a; /* darker burnt orange for the download-box CTA :hover */
--spl-accent-warm: #ff8a4d; /* lighter warm orange — icon-badge gradient end stop */
--spl-surface: var(--spl-color-white);
--spl-surface-soft: var(--spl-color-grey-100);
--spl-surface-page: var(--spl-color-grey-050);
--spl-border: var(--spl-color-slate-200);
--spl-control-border: var(--spl-color-slate-500);
--spl-focus-ring: var(--spl-accent-ink);
--spl-text: var(--spl-color-slate-500);
--spl-text-muted: var(--spl-color-slate-500);
--spl-text-strong: var(--spl-color-slate-600);
--spl-heading-color: var(--spl-color-navy-900);
--spl-accent-dark: var(--spl-accent-ink);
/* ------------------------------------------------------------------
* Admin design tokens (Plan 7A.2 Task 1) — consumer-facing surface for
* .spl-admin-* component styles. Always reference a primitive above;
* never a raw hex here. No dark-mode override: Phase 1 excludes dark
* mode for the admin UI, so light values only.
* ------------------------------------------------------------------ */
--spl-admin-canvas: var(--spl-color-wp-canvas);
--spl-admin-card: var(--spl-color-white);
--spl-admin-card-2: var(--spl-color-wp-surface-alt);
--spl-admin-border: var(--spl-color-wp-border);
--spl-admin-border-strong: var(--spl-color-wp-border-strong);
--spl-admin-ink: var(--spl-color-wp-ink);
--spl-admin-ink-muted: var(--spl-color-wp-ink-muted);
--spl-admin-ink-faint: var(--spl-color-wp-ink-faint);
--spl-admin-navy: var(--spl-color-navy-900);
--spl-admin-orange: var(--spl-color-orange-500);
--spl-admin-orange-hover: var(--spl-color-orange-700);
--spl-admin-navy-tint: var(--spl-color-navy-tint-100);
--spl-admin-navy-tint-2: var(--spl-color-navy-tint-050);
--spl-admin-good: var(--spl-color-status-good);
--spl-admin-good-bg: var(--spl-color-status-good-bg);
--spl-admin-warn: var(--spl-color-status-warn);
--spl-admin-warn-bg: var(--spl-color-status-warn-bg);
--spl-admin-crit: var(--spl-color-status-crit);
--spl-admin-crit-bg: var(--spl-color-status-crit-bg);
--spl-admin-info: var(--spl-color-status-info);
--spl-admin-info-bg: var(--spl-color-status-info-bg);
--spl-admin-radius: var(--spl-radius-sm); /* mockup --radius (8px); reuses the existing primitive */
--spl-admin-radius-sm: var(--spl-radius-admin-sm); /* mockup --radius-sm (5px) */
--spl-admin-gap: var(--spl-space-4); /* mockup --gap (16px); reuses the existing primitive */
--spl-admin-font: var(--spl-font-system);
--spl-admin-shadow: var(--spl-shadow-admin-card);
/* ------------------------------------------------------------------
* Additional shadows
* ------------------------------------------------------------------ */
--spl-shadow-chip: 0 2px 8px rgb(2 16 24 / 40%); /* lock/chip on dark cover plate */
/* ------------------------------------------------------------------
* Extra type scale
* ------------------------------------------------------------------ */
--spl-text-2xs: 0.66rem; /* tiny flag chips on cover plate */
--spl-text-suggest-grp: 0.7rem; /* autocomplete group label */
/* ------------------------------------------------------------------
* Extra border radius
* ------------------------------------------------------------------ */
--spl-radius-xs: 3px; /* inline mark highlight */
--spl-radius-circle: 50%; /* circular avatars / lock badges */
/* ------------------------------------------------------------------
* On-dark text / border utilities (hero, band, single hero)
* ------------------------------------------------------------------ */
--spl-hero-text: #e7ecf3; /* hero section body text */
--spl-on-dark-muted: #b7c2d0; /* lede / hero-sub / post-meta on dark */
--spl-on-dark-dim: #9fb0c2; /* dimmer label / band sub on dark */
--spl-on-dark-link: #cdd8e4; /* breadcrumb links on dark */
--spl-on-dark-border-btn: rgb(255 255 255 / 30%); /* ghost btn border on dark */
/* ------------------------------------------------------------------
* Scrim / overlay tokens (dark glass chips on the cover plate)
* ------------------------------------------------------------------ */
--spl-scrim-dark: rgb(2 16 24 / 32%); /* .c-topic chip background */
--spl-scrim-darker: rgb(2 16 24 / 42%); /* .c-code chip background */
--spl-scrim-light: rgb(255 255 255 / 14%); /* badge on dark hero */
--spl-cover-border: rgb(255 255 255 / 20%); /* .c-code border on dark */
--spl-cover-grid-line: rgb(255 255 255 / 7%); /* cover grid overlay */
--spl-cover-highlight: rgb(255 255 255 / 18%); /* cover corner highlight */
--spl-cover-sheen: rgb(255 255 255 / 28%); /* hover sheen sweep */
--spl-cover-hue-default: #0f5e7a; /* fallback cover gradient start when no topic hue class is present */
--spl-cover-hue-default-lt: #1a86ad; /* fallback cover gradient end when no topic hue class is present */
--spl-hero-glow-accent: rgb(252 103 32 / 30%); /* archive/single hero orange glow */
--spl-hero-glow-teal: rgb(15 163 163 / 26%); /* archive/single hero teal glow */
--spl-band-glow-accent: rgb(252 103 32 / 16%); /* subscription band orange glow */
--spl-band-glow-teal: rgb(15 163 163 / 18%); /* subscription band teal glow */
--spl-sheet-scrim: rgb(0 0 0 / 46%); /* mobile filter sheet backdrop */
--spl-mask-ink: #000; /* mask-image opaque stop */
/* ------------------------------------------------------------------
* Z-index scale
* ------------------------------------------------------------------ */
--spl-z-statcard: 5; /* stat card overlaps hero bottom edge */
--spl-z-suggest: 30; /* autocomplete panel above hero content */
--spl-z-sheet: 100; /* mobile filter sheet above plugin content */
--spl-z-card-link: 1; /* .spl-card__link ::after stretched overlay; interactive children use z-index >= 2 */
--spl-z-skip-link: 9999; /* skip link floats above all page chrome */
/* ------------------------------------------------------------------
* Motion
* ------------------------------------------------------------------ */
--spl-motion-duration-2xs: 0.01ms; /* reduced-motion kill switch */
--spl-motion-duration-xs: 0.15s;
--spl-motion-duration-sm: 0.16s;
--spl-motion-duration-md: 0.18s;
--spl-motion-duration-lg: 0.2s;
--spl-motion-duration-xl: 0.22s;
--spl-motion-duration-sheet: 0.25s;
--spl-motion-duration-cover: 0.5s;
--spl-motion-duration-sheen: 0.6s;
--spl-motion-duration-skeleton: 1.6s;
--spl-motion-ease-standard: ease;
--spl-motion-ease-emphasis: cubic-bezier(0.2, 0.7, 0.2, 1);
--spl-motion-ease-pulse: ease-in-out;
/* ------------------------------------------------------------------
* Component size caps
* ------------------------------------------------------------------ */
--spl-cert-chip-max-width: 10rem; /* .c-code cert chip on cover plate (~160px) */
--spl-tap-min: 44px; /* minimum tap-target height (WCAG 2.5.5) */
--spl-tap-target-min: 24px; /* minimum pointer target size (WCAG 2.5.8 AA) */
--spl-statcard-overlap: 44px; /* archive stat card overlap with the hero bottom edge */
--spl-pagination-pad-inline: 14px; /* pagination link horizontal padding */
--spl-icon-xs: 13px;
--spl-icon-sm: 14px;
--spl-icon-md: 15px;
--spl-icon-lg: 16px;
--spl-icon-xl: 18px;
--spl-icon-2xl: 22px;
--spl-icon-feature: 46px;
--spl-control-size-sm: 28px;
--spl-hero-search-btn-size: 40px;
--spl-author-avatar-size: 60px;
/* Admin redesign component sizes (Plan 7A.2 Task 1) — dimensions with no
* existing spacing/size-token match, that recur across the admin screens.
* (Values that DO match an existing token reference it directly in admin.css:
* 3px/4px/6px/8px/18px/22px/24px borders+dots+padding, and the .spl-admin-spark
* 64x22 box mirrors the Sparkline.tsx viewBox constants, so those stay inline.) */
--spl-admin-accent-bar-width: 34px; /* PageHeader h1 navy accent rule width */
--spl-admin-tile-pad-block: 15px; /* KPI tile vertical padding (mockup .tile 15px 16px) */
--spl-admin-topic-max-width: 150px; /* Leads toolbar topic-ID filter width (Plan 7A.2 Task 7) */
--spl-admin-resource-max-width: 170px; /* Leads grid Resource cell max-width before ellipsis truncation (colwidth follow-up: cut from 220px so Resource can't balloon the table past the container) */
/* Leads DataViews table column widths (admin-UI colwidth follow-up). Fixed CAPS, not floors:
* @wordpress/dataviews' table auto-layout distributes any spare width across columns whose
* only constraint is a min-width, so a floor-only approach let Email/Resource/Captured
* balloon (measured 338/194/189px) and pushed the table to 1523px, past the ~1157px
* container. Each non-title column below is pinned with BOTH width and maxWidth (same value)
* in LeadsSection.tsx DEFAULT_VIEW.layout.styles, referenced via var() so the value lives
* once. Email (the titleField/primary column) and Resource (pdf_id) have no fixed-width
* layout.styles hook that auto-layout respects here, so they are capped by CSS truncation
* instead: Email via --spl-admin-leads-col-email-max (admin.css .dataviews-title-field rule),
* Resource via the existing --spl-admin-resource-max-width on its render span. */
--spl-admin-leads-col-email-max: 190px; /* Email (titleField) truncation cap; CSS-only hook */
--spl-admin-leads-col-topic: 92px;
--spl-admin-leads-col-downloads: 76px;
--spl-admin-leads-col-consent: 122px;
--spl-admin-leads-col-gated: 84px;
--spl-admin-leads-col-captured: 146px;
--spl-admin-leads-col-status: 96px;
--spl-admin-field-max-width: 420px; /* settings field column max-width */
--spl-admin-empty-icon-size: 52px; /* empty-state icon badge box (52x52) */
--spl-admin-empty-icon-glyph: 24px; /* empty-state inner SVG glyph (24x24) */
--spl-admin-empty-pad-start: 52px; /* empty-state top padding */
--spl-admin-empty-pad-end: 56px; /* empty-state bottom padding */
--spl-admin-toggle-width: 38px; /* settings toggle track width */
--spl-prose-list-indent: 1.2em;
--spl-letter-spacing-tight: 0.02em;
--spl-letter-spacing-chip: 0.04em;
--spl-letter-spacing-eyebrow: 0.06em;
--spl-letter-spacing-label: 0.08em;
--spl-letter-spacing-admin-th: 0.05em; /* mockup thead th letter-spacing */
/* ------------------------------------------------------------------
* Layout primitives — shell container + root typography
* Not guarded by declaration-strict-value (layout, not colour/font).
* ------------------------------------------------------------------ */
--spl-card-intrinsic-size: 360px; /* contain-intrinsic-size placeholder for content-visibility on .spl-card */
--spl-cols: 4; /* default grid columns; [sme_pdf_grid] overrides inline per instance */
--spl-shell-max: 1365px; /* .shell max-width, matches site header container */
--spl-shell-width: 87%; /* .shell proportional width on desktop (87% of viewport) */
--spl-shell-pad: 24px; /* .shell inline padding (mobile/tablet) */
--spl-admin-max-width: 800px; /* legacy Plan 7A admin cap — superseded by --spl-admin-w-data (1200px) / --spl-admin-w-form (840px); no longer consumed */
--spl-admin-modal-width: 640px; /* Leads detail modal content width (Plan 7A Task 10) */
--spl-admin-w-data: 1200px; /* .spl-admin-wrap max-width — Dashboard/Leads data screens (Plan 7A.2 Task 1) */
--spl-admin-w-form: 840px; /* .spl-admin-wrap--form max-width — Settings form screen (Plan 7A.2 Task 1) */
--spl-line-base: 1.6; /* body line-height */
--spl-line-heading: 1.18; /* heading line-height */
--spl-heading-tracking: -0.015em; /* heading letter-spacing */
/* ------------------------------------------------------------------
* Transparent-header offset — measured at runtime by header-offset.ts
* and written to :root (NOT to .spl-root) as --spl-header-offset.
* The value cascades from :root to .spl-root so it must NOT be redeclared
* here; a declaration on .spl-root would override the :root JS-written value.
* PHP seeds an inline :root default before the module loads (see Assets.php).
* Default fallback in calc() expressions is 0px — no-op on themes without
* an overlay header.
* ------------------------------------------------------------------ */
}
/* ------------------------------------------------------------------
* Topic cover-hue classes (rich, brand-anchored — no purple/indigo)
* Applied to the card element alongside .spl-card to colour the cover
* gradient via --cover-hue / --cover-hue-lt custom properties.
* Prefixed with .spl-root for scope hygiene (keeps hue vars off theme
* elements that happen to share these class names).
* ------------------------------------------------------------------ */
.spl-root .h-networking {
--cover-hue: #0d8a9c;
--cover-hue-lt: #16b6c0;
}
.spl-root .h-cyber {
--cover-hue: #d4541f;
--cover-hue-lt: #f57a36;
}
.spl-root .h-cloud {
--cover-hue: #2c6fd6;
--cover-hue-lt: #4f97f0;
}
.spl-root .h-devops {
--cover-hue: #2f7a6b;
--cover-hue-lt: #3fae8f;
}
.spl-root .h-linux {
--cover-hue: #c2790c;
--cover-hue-lt: #efab2e;
}
.spl-root .h-programming {
--cover-hue: #1f7a86;
--cover-hue-lt: #2fb0a0;
}
.spl-root .h-career {
--cover-hue: #e0641f;
--cover-hue-lt: #fb8b3e;
}
/* Self-contained root: re-establish a clean box on full-width theme templates. */
.spl-root {
color: var(--spl-text);
font-family: var(--spl-font-body);
background: var(--spl-surface-page);
line-height: var(--spl-line-base);
/* Transparent-header pull-up: slide the plugin root up behind the overlay header.
Defaults to 0 (no-op) when --spl-header-offset is 0px; measured at runtime by
header-offset.ts and written to :root so all .spl-root instances share the value. */
margin-top: calc(-1 * var(--spl-header-offset, 0px));
}
/* Scoped reset — roll shared elements back to UA defaults (not theme inheritance). */
.spl-root :where(h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, button, input, select, textarea, label, figure, blockquote, header, main, aside, section, nav, div, span) {
all: revert;
}
.spl-root *,
.spl-root *::before,
.spl-root *::after {
box-sizing: border-box;
}
/* Global heading rule — Poppins + navy by default (dark contexts override colour). */
.spl-root :is(h1, h2, h3, h4, h5, h6) {
font-family: var(--spl-font-heading);
color: var(--spl-heading-color);
line-height: var(--spl-line-heading);
margin: 0;
letter-spacing: var(--spl-heading-tracking);
font-weight: 700;
}
.spl-root a {
color: var(--spl-accent-ink);
}
.spl-root :focus-visible {
outline: 2px solid var(--spl-focus-ring);
outline-offset: 2px;
border-radius: var(--spl-radius-sm);
}
/*
* Skip link — keyboard / AT users bypass hero and navigation to reach #main.
* Visually hidden until focused; revealed via :focus-visible so only keyboard
* users see it (not mouse users who accidentally hover or click).
* Rendered at the very first position inside .spl-root so Tab key reaches it first.
*/
.spl-root .spl-skip-link {
position: absolute;
left: var(--spl-space-3);
top: var(--spl-space-3);
z-index: var(--spl-z-skip-link);
padding: var(--spl-space-2) var(--spl-space-4);
background: var(--spl-color-navy-900);
color: var(--spl-color-white);
font-weight: 700;
font-size: var(--spl-text-sm);
border-radius: var(--spl-radius-md);
text-decoration: none;
/* Visually hidden until focused */
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
.spl-root .spl-skip-link:focus-visible {
/* Undo the visual-hide and show as a floating pill */
clip: auto;
clip-path: none;
width: auto;
height: auto;
overflow: visible;
white-space: normal;
/* Use the same brand focus ring from the global :focus-visible rule */
outline: 2px solid var(--spl-focus-ring);
outline-offset: 2px;
}
/* Self-contained max-width container (was relied upon from the theme). Mobile-first. */
.spl-root .shell {
width: 100%;
max-width: var(--spl-shell-max);
margin: 0 auto;
padding: 0 var(--spl-shell-pad);
}
/* Desktop: switch to proportional width matching the site header container. */
@media (width >= 1025px) {
.spl-root .shell {
width: var(--spl-shell-width);
padding: 0;
}
}
/*
* Body scroll lock — applied by the mobile filter sheet (Task 8, Plan 3.5).
*
* Using a class on (rather than writing body.style.overflow directly) avoids
* collisions with WordPress themes that also set overflow. The class is added by
* lockBodyScroll() and removed by unlockBodyScroll() in the Interactivity store.
*
* This rule lives outside .spl-root because it targets the element, which is
* never a descendant of .spl-root. It only takes effect when the sheet is open and
* the viewport is mobile-width (the sheet does not exist at desktop width).
*/
body.spl-body-lock {
overflow: hidden;
}
/*
* JS-required elements: hidden when JS is not available.
*
* The mobile filter trigger button (.spl-toolbar__sheet-trigger) must not appear
* at all when JavaScript is disabled, because the bottom-sheet depends entirely on
* the Interactivity store. The .spl-requires-js class marks elements that have no
* functional no-JS fallback.
*
* Implementation: the JS-on signal is the `spl-js` class added to by a tiny
* inline script emitted by Assets::emitJsClassifier() synchronously before paint on
* library pages. When JS runs the class is present; when JS is off it is absent.
*
* Note: `[data-wp-interactive]` cannot be used as the JS-on guard because WordPress
* sets that attribute server-side regardless of whether the Interactivity store has
* actually executed. `html.spl-js` is the correct, authoritative signal.
*
* The rule below hides .spl-requires-js elements by default (progressive-enhancement
* default-hidden). The rule below it reveals them when JS is confirmed running.
* The more specific mobile breakpoint rule in filters.css further constrains the
* trigger display to <= 640px.
*/
.spl-requires-js {
display: none;
}
/*
* When JavaScript has executed (html.spl-js is present), reveal .spl-requires-js
* elements at their intended breakpoint. The mobile breakpoint rule in filters.css
* takes over from here at <= 640px to constrain the trigger to mobile only.
*/
html.spl-js .spl-requires-js {
display: revert;
}
/* ---- component files ---- */
/*
* hero.css — .spl-hero (archive hero) + .spl-single-hero (single-item detail hero)
* + .spl-statcard + shared eyebrow/hl utilities
*
* Dark-on-dark backgrounds use gradient compositing. Glow, mask, colour,
* typography, shadow, radius, and z-index values reference --spl-* tokens.
*/
.spl-root {
/* ---------- mono eyebrow + hl (declared early — lower specificity first) ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--spl-space-2);
color: var(--spl-accent);
font-family: var(--spl-font-mono);
font-weight: 600;
font-size: var(--spl-text-xs);
letter-spacing: var(--spl-letter-spacing-eyebrow);
margin-bottom: var(--spl-space-3);
}
.eyebrow::before {
content: "//";
font-weight: 700;
opacity: 0.9;
}
.eyebrow.dark {
color: var(--spl-accent-ink);
}
/* highlight span — base accent colour on dark backgrounds */
.hl {
color: var(--spl-accent);
}
/* orange-on-white contexts: override to AA-safe ink shade (higher specificity, after .hl) */
.spl-section .hl,
.spl-subscribe .hl,
.spl-single-hero .hl {
color: var(--spl-accent-ink);
}
/* ---------- archive hero ---------- */
.spl-hero {
position: relative;
color: var(--spl-hero-text);
background:
radial-gradient(820px 360px at 86% -10%, var(--spl-hero-glow-accent), transparent 62%),
radial-gradient(680px 420px at 6% 120%, var(--spl-hero-glow-teal), transparent 60%),
linear-gradient(145deg, var(--spl-color-navy-950) 0%, var(--spl-color-navy-900) 48%, var(--spl-color-navy-850) 100%);
/* Top padding absorbs the header offset so content clears the overlay header.
Bottom padding keeps the statcard overlap working as designed. */
padding: calc(var(--spl-header-offset, 0px) + var(--spl-space-8)) 0 calc(var(--spl-space-8) + var(--spl-statcard-overlap));
overflow: hidden;
}
/* faint topology dot-grid motif */
.spl-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.5;
pointer-events: none;
background-image: radial-gradient(
circle at 1px 1px,
var(--spl-cover-grid-line) 1px,
transparent 0
);
background-size: 30px 30px;
mask-image: linear-gradient(120deg, transparent 40%, var(--spl-mask-ink) 100%);
}
.spl-hero .shell {
position: relative;
}
.spl-hero h1 {
color: var(--spl-color-white);
font-size: var(--spl-text-3xl);
max-width: 17ch;
}
.spl-hero h1 .hl {
color: var(--spl-accent);
}
.spl-hero p.lede {
color: var(--spl-on-dark-muted);
font-size: var(--spl-text-lg);
max-width: 56ch;
margin: var(--spl-space-3) 0 var(--spl-space-5);
}
/* Archive / hub hero search pill.
* The archive and taxonomy templates emit .spl-hero-search (BEM root) with
* __form / __input / __btn children. The pill look (white bg, radius-pill,
* shadow) applies to the outer wrapper so theme-hardening assertion 5 passes:
* .spl-hero-search border-radius != 0px
* The __form inherits the layout; __input and __btn are flex cells inside.
*/
.spl-hero-search {
position: relative;
display: flex;
align-items: center;
max-width: 560px;
background: var(--spl-color-white);
border-radius: var(--spl-radius-pill);
box-shadow: var(--spl-shadow-lift);
}
.spl-hero-search:focus-within {
box-shadow: var(--spl-shadow-hero-search-focus);
}
.spl-hero-search__form {
display: flex;
align-items: center;
gap: var(--spl-space-px-10);
padding: var(--spl-space-px-7) var(--spl-space-2) var(--spl-space-px-7) var(--spl-space-px-18);
width: 100%;
border-radius: var(--spl-radius-pill);
}
.spl-hero-search__input {
border: 0;
outline: 0;
flex: 1;
font-size: var(--spl-text-base);
background: transparent;
color: var(--spl-text-strong);
min-width: 0;
font-family: var(--spl-font-body);
}
.spl-hero-search__input:focus {
outline: none;
}
.spl-hero-search__btn {
flex: none;
display: grid;
place-items: center;
width: var(--spl-hero-search-btn-size);
height: var(--spl-hero-search-btn-size);
border: 0;
border-radius: var(--spl-radius-pill);
background: var(--spl-accent);
color: var(--spl-color-navy-900);
cursor: pointer;
transition: background var(--spl-motion-duration-md) var(--spl-motion-ease-standard);
}
.spl-hero-search__btn:hover {
background: var(--spl-accent-hover);
}
.spl-hero-search__btn:focus-visible {
outline: 2px solid var(--spl-color-navy-900);
outline-offset: 2px;
}
.spl-hero-search__btn svg {
width: var(--spl-icon-xl);
height: var(--spl-icon-xl);
transition: transform var(--spl-motion-duration-md) var(--spl-motion-ease-standard);
}
.spl-hero-search__btn:hover svg {
transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
.spl-hero-search__btn svg {
transition: none;
}
}
.spl-hero .hero-cta {
display: flex;
gap: var(--spl-space-3);
flex-wrap: wrap;
margin-top: var(--spl-space-4);
}
/* ---------- stat card ---------- */
.spl-statcard {
background: var(--spl-surface);
border: 1px solid var(--spl-border);
border-radius: var(--spl-radius-lg);
box-shadow: var(--spl-shadow-lift);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin-top: calc(-1 * var(--spl-statcard-overlap));
position: relative;
z-index: var(--spl-z-statcard);
overflow: hidden;
}
.spl-statcard .stat {
padding: var(--spl-space-5);
text-align: center;
border-right: 1px solid var(--spl-border);
}
.spl-statcard .stat:last-child {
border-right: 0;
}
.spl-statcard .stat b {
display: block;
font-family: var(--spl-font-heading);
font-size: var(--spl-text-2xl);
color: var(--spl-accent-ink);
}
.spl-statcard .stat span {
font-size: var(--spl-text-sm);
color: var(--spl-text);
}
/* ---------- single-item hero ----------
*
* Full-bleed dark band: the hero element spans the full width of the page.
* Content is centred using padding-inline so the inner 2-column grid aligns
* exactly to the site header container (width: min(87%, 1365px) centred).
*
* Mobile/tablet: flat --spl-shell-pad on each side (matches .shell behaviour).
* Desktop (>=1025px): padding-inline computed to produce the same left/right
* edges as the archive .shell — `max()` picks the larger of the 87%-derived
* inset and the max-width-capped inset, matching the shell model exactly:
* At 1280 → max(6.5%=83px, -42px) = 83px → inner = 1114px (= 87% × 1280)
* At 1440 → max(6.5%=94px, 37px) = 94px → inner = 1253px (= 87% × 1440)
* At 1903 → max(6.5%=124px, 269px) = 269px → inner = 1365px (capped at max)
*
* Grid: __shell (text) + __cover are the two direct children.
* .shell inside __shell neutralised below so it does not double-constrain.
*/
.spl-single-hero {
position: relative;
overflow: hidden;
color: var(--spl-hero-text);
background:
radial-gradient(820px 360px at 86% -10%, var(--spl-hero-glow-accent), transparent 62%),
radial-gradient(680px 420px at 6% 120%, var(--spl-hero-glow-teal), transparent 60%),
linear-gradient(145deg, var(--spl-color-navy-950) 0%, var(--spl-color-navy-900) 48%, var(--spl-color-navy-850) 100%);
/* Full-bleed with centred content: flat shell-pad on mobile/tablet.
Top padding absorbs the header offset so the breadcrumb/H1 clears the
overlay header; bottom padding is unchanged. */
padding-top: calc(var(--spl-header-offset, 0px) + var(--spl-space-6));
padding-bottom: var(--spl-space-6);
padding-inline: var(--spl-shell-pad);
/* 2-column grid: text shell + cover plate */
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--spl-space-8);
align-items: center;
}
/* Desktop: switch to the header-model inset so hero content aligns with
the archive .shell and the site header container at every viewport.
The compact variant (quick template) inherits this — no override needed. */
@media (width >= 1025px) {
.spl-single-hero {
padding-inline: max(
calc(50% - var(--spl-shell-width) / 2),
calc((100% - var(--spl-shell-max)) / 2)
);
}
}
/* Faint dot-grid motif (mirrors archive hero) */
.spl-single-hero::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.5;
pointer-events: none;
background-image: radial-gradient(
circle at 1px 1px,
var(--spl-cover-grid-line) 1px,
transparent 0
);
background-size: 30px 30px;
mask-image: linear-gradient(120deg, transparent 40%, var(--spl-mask-ink) 100%);
}
/* Text column — grid cell; .shell inside neutralised so it does not double-constrain. */
.spl-single-hero__shell {
position: relative;
}
/* Neutralise the .shell helper class when used inside the hero grid cell.
The hero's padding-inline already centres the entire grid; re-applying
the shell's width/margin here would double-constrain the text column. */
.spl-single-hero .shell {
max-width: none;
margin: 0;
padding: 0;
}
/* Badges row */
.spl-single-hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--spl-space-2);
margin: var(--spl-space-3) 0;
}
/* Badges on the dark hero use scrim-white background */
.spl-single-hero .spl-badge {
background: var(--spl-scrim-light);
color: var(--spl-color-white);
}
/* H1 — white on dark hero band */
.spl-single-hero__title {
color: var(--spl-color-white);
font-size: var(--spl-text-3xl);
max-width: 20ch;
margin: var(--spl-space-4) 0;
}
/* Meta line (reviewed date, etc.) */
.spl-single-hero__meta {
display: flex;
gap: var(--spl-space-4);
flex-wrap: wrap;
color: var(--spl-on-dark-dim);
font-family: var(--spl-font-mono);
font-size: var(--spl-text-sm);
margin-top: var(--spl-space-5);
}
.spl-single-hero__meta .reviewed-date {
display: inline-flex;
align-items: center;
gap: var(--spl-space-px-6);
}
/* Breadcrumb on the dark hero uses on-dark colours. The link rule targets the
BEM class (.spl-breadcrumb__link) so it wins regardless of element type. */
.spl-single-hero .spl-breadcrumb {
color: var(--spl-on-dark-muted);
}
.spl-single-hero .spl-breadcrumb__link {
color: var(--spl-on-dark-link);
}
/* Cover plate column — the visual right-hand art panel */
.spl-single-hero__cover {
position: relative;
border-radius: var(--spl-radius-lg);
overflow: hidden;
box-shadow: var(--spl-shadow-lift);
}
.spl-single-hero__cover .spl-cover:not(.spl-cover--image) {
aspect-ratio: 4 / 3;
}
/* Compact variant (quick template) — single column; no cover column.
Top padding absorbs the header offset; bottom padding is unchanged. */
.spl-single-hero--compact {
grid-template-columns: 1fr;
padding-top: calc(var(--spl-header-offset, 0px) + var(--spl-space-5));
padding-bottom: var(--spl-space-5);
}
/* Small inline motif for the compact hero */
.spl-single-hero__cover-inline {
max-width: 180px;
margin-top: var(--spl-space-4);
}
.spl-single-hero__cover-inline .spl-cover:not(.spl-cover--image) {
aspect-ratio: 4 / 3;
border-radius: var(--spl-radius-md);
overflow: hidden;
}
/*
* Responsive collapse: at 860px the two-column hero stacks to a single column.
* Title (__shell) must appear BEFORE the cover across the entire stacked range
* (both tablet 641px-860px and mobile <= 640px). Explicit orders are applied here
* so the reading sequence is: shell (badges + title + meta) then cover.
* Desktop (> 860px) keeps the 2-column side-by-side layout; no order values needed.
*/
@media (width <= 860px) {
.spl-single-hero {
grid-template-columns: 1fr;
}
.spl-single-hero__shell {
order: 1;
}
.spl-single-hero__cover {
order: 2;
}
}
}
/*
* citation.css — .spl-citation block styles
*
* Styles the citation widget that renders plain, APA, and BibTeX formats.
* All tokens defined in tokens.css; no raw colour/spacing/font/radius values.
*/
.spl-root {
.spl-citation {
margin-top: var(--spl-space-8);
padding-top: var(--spl-space-6);
border-top: var(--spl-border-width-thin) solid var(--spl-color-slate-300);
}
.spl-citation h2 {
color: var(--spl-accent-ink);
font-family: var(--spl-font-heading);
font-size: var(--spl-text-lg);
margin-bottom: var(--spl-space-3);
}
.spl-citation__label {
font-weight: 600;
margin-top: var(--spl-space-4);
margin-bottom: var(--spl-space-1);
}
.spl-citation__plain,
.spl-citation__apa {
margin: 0;
}
.spl-citation__bibtex {
background-color: var(--spl-color-grey-050);
border-radius: var(--spl-radius-md);
padding: var(--spl-space-4);
font-family: var(--spl-font-mono);
font-size: var(--spl-text-sm);
overflow-x: auto;
}
}
/*
* cover.css — .spl-cover engineered cover plate + .spl-card-ctx container query
*
* The cover plate uses a grid overlay (::before) and corner highlight (::after)
* built from scrim/overlay tokens. The .sheen hover animation is motion-gated
* in library.css via prefers-reduced-motion.
*/
.spl-root {
/* ---------- cover plate ---------- */
.spl-cover {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
text-decoration: none;
background: linear-gradient(
150deg,
var(--spl-color-navy-900) -12%,
var(--cover-hue, var(--spl-cover-hue-default)) 62%,
var(--cover-hue-lt, var(--spl-cover-hue-default-lt)) 128%
);
}
/* grid overlay */
.spl-cover::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(var(--spl-cover-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--spl-cover-grid-line) 1px, transparent 1px);
background-size: 26px 26px;
}
/* corner highlight */
.spl-cover::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
420px 170px at 16% -12%,
var(--spl-cover-highlight),
transparent 70%
);
}
.spl-cover .bp {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transition: transform var(--spl-motion-duration-cover) var(--spl-motion-ease-emphasis);
}
/* Featured image variant: ![]()
replaces the SVG motif.
object-fit and border-radius are the only additions; position/inset/size/display come
from .bp above. contain shows the whole image inside the cover plate; the brand gradient
letterboxes any uncovered area so no raw background shows through.
Hidden-toggle convention (mirrors .spl-client-view in archive.css and .spl-gate-panel
in gate.css): the Interactivity API drives data-wp-bind--hidden on both the ![]()
and the