→
· first child of .hero →
· in each .theme-row (optional, "full" only), before the dots:
(use the row's THEMES c1/c2; add class "light" for tome)
============================================================ */
:root {
--art-url: url("../img/keyart.jpg");
--art-strength: 1; /* master dial, 0.4 – 1.4 */
}
/* ── A · Ambient wash — full-bleed behind everything ───────── */
.lol-ambient {
position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none;
background-image: var(--art-url);
background-size: cover;
background-position: center 24%;
filter: var(--art-filter, none);
opacity: calc(0.14 * var(--art-strength));
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 44%, transparent 78%);
mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 44%, transparent 78%);
}
[data-art="ambient"] .lol-ambient,
[data-art="full"] .lol-ambient { display: block; }
/* ── B · Hero splash — art bleeds in from the hero's right ───
Two pseudo-layers, not one: `filter` applies to the whole subtree, so the
art lives on ::before (filtered/dimmed) and the legibility scrims on
::after (untouched) — otherwise a theme's hue-rotate/sepia would tint the
darkening gradients and the hero stats would drift off --bg0. */
.lol-hero-art {
position: absolute; inset: 0; left: 38%; z-index: 0; pointer-events: none; display: none;
}
.lol-hero-art::before {
content: ''; position: absolute; inset: 0;
background-image: var(--art-url);
background-size: cover;
background-position: right 16%;
filter: var(--art-filter, none);
opacity: calc(var(--art-op, 1) * var(--art-strength));
-webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.9) 42%, #000 70%);
mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.9) 42%, #000 70%);
}
.lol-hero-art::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(90deg, color-mix(in srgb, var(--bg0) 92%, transparent), color-mix(in srgb, var(--bg0) 45%, transparent) 55%, transparent),
linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--bg0) 90%, transparent));
}
[data-art="hero"] .lol-hero-art,
[data-art="full"] .lol-hero-art { display: block; }
/* keep hero content above the art */
/* `.fcorner` is excluded: this rule exists to lift real hero CONTENT above the
key-art, but it out-specifies (0,3,0 vs 0,2,0) the corner-diamond rule in
neon.css, forcing those absolutely-positioned ornaments back to `relative` —
at which point they became flex items, appeared in a row inside the hero and
shoved the stats sideways. They carry their own z-index: 3. */
[data-art] .hero > :not(.lol-hero-art):not(.fcorner) { position: relative; z-index: 1; }
/* ── C · Theme-switcher chips — each row previews ITS accents ─
A row can't preview itself with --art-filter (that token only ever holds
the ACTIVE theme's value), so the chips keep the duotone blend, fed by the
row's own THEMES c1/c2 = that theme's (--metal, --gem). */
.lol-theme-chip {
width: 46px; height: 28px; flex: 0 0 auto;
background-image: linear-gradient(120deg, var(--tc1), var(--tc2)), var(--art-url);
background-size: cover, cover;
background-position: center 16%, center 16%;
background-blend-mode: color, normal;
border: 1px solid var(--metal-faint);
display: none;
}
[data-art="full"] .lol-theme-chip { display: block; }
.lol-theme-chip.light {
background-image: var(--art-url);
background-blend-mode: normal;
filter: grayscale(1) brightness(1.12) contrast(.9);
}