/* StratLAN — The Music, Wrapped '26. Spotify-Wrapped-style story cards, LAN-neon palette, sarcastic voice. Signika (display) + Heebo (body). OKLCH, no pure #000/#fff. Motion model: default (no root class) renders every animated element at its FINAL state, so no-JS / reduced-motion / headless renders are complete. Script adds `.motion` to only when motion is allowed; `.motion` sets the start state and a reveal (`.on`) brings it home. */ :root{ --ink:oklch(0.16 0.030 315); --cream:oklch(0.97 0.012 320); --char:oklch(0.20 0.045 320); --up:oklch(0.82 0.17 158); --down:oklch(0.66 0.21 18); --display:'Signika',system-ui,sans-serif; --body:'Heebo',system-ui,sans-serif; --ease:cubic-bezier(0.16,1,0.3,1); --wrap:1100px; --z-progress:60; --z-totop:65; --z-confetti:70; --z-toast:80; --z-modal:90; } *{box-sizing:border-box; margin:0} /* one full-screen card per scroll — snap each story page into place */ html{scroll-behavior:smooth; scroll-snap-type:y proximity; overflow-anchor:none} /* proximity: gentle snap near card edges without trapping tall cards (mandatory clamped too hard). Arrow keys do the deliberate card-to-card stepping. */ body{background:var(--ink); color:var(--cream); font-family:var(--body); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden} h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.02em} a{color:inherit} /* track titles that link out to Spotify — plain text, never underlined; keyboard focus ring only */ .splink{color:inherit; text-decoration:none; cursor:pointer} /* an album cover that links to its track — transparent to layout; covers already lift on hover */ .cover-link{display:contents} .cover-link:focus-visible{outline:none} .cover-link:focus-visible .cover{outline:3px solid currentColor; outline-offset:4px} img{max-width:100%; display:block} b,strong{font-weight:700} :focus-visible{outline:3px solid currentColor; outline-offset:3px; border-radius:5px} .num{font-variant-numeric:tabular-nums} /* ---------- Story-progress (Wrapped/IG story bar) ---------- */ .progress{position:fixed; inset:8px 12px auto 12px; z-index:var(--z-progress); display:flex; gap:5px; pointer-events:none} .progress .seg{flex:1; height:3px; border-radius:3px; background:oklch(0.97 0.012 320 / .28); overflow:hidden} .progress .seg i{display:block; height:100%; width:0; background:var(--cream); border-radius:3px} /* JS opts each segment into chapter-jump: a tall transparent hit area over the thin visible bar. */ .progress .seg.nav{pointer-events:auto; cursor:pointer; box-sizing:content-box; border-block:9px solid transparent; background-clip:padding-box} .progress .seg.nav:focus-visible{outline:2px solid var(--cream); outline-offset:3px} /* ---------- Back to the top (on-screen twin of the Home/arrow keyboard nav) ---------- */ .to-top{position:fixed; z-index:var(--z-totop); right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); width:46px; height:46px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--cream); color:var(--ink); cursor:pointer; box-shadow:0 8px 22px oklch(0.10 0.03 315 / .5); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease)} .to-top.on{opacity:1; transform:none; pointer-events:auto} .to-top:hover{transform:translateY(-2px)} .to-top:active{transform:scale(.94)} @media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .2s linear; transform:none} .to-top.on{transform:none} .to-top:hover{transform:none} } /* ---------- Story cards ---------- */ .story{position:relative} .card{min-height:100svh; display:grid; place-items:center; padding:14vh 26px; background:var(--field); color:var(--ink-c); position:relative; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always} .card-inner{width:100%; max-width:var(--wrap); position:relative; z-index:1} .card::before{content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:radial-gradient(70% 55% at 78% 12%, var(--glow, transparent), transparent 65%)} .motion .card-inner{opacity:0; transform:translateY(26px) scale(.985); transition:opacity .7s var(--ease), transform .7s var(--ease)} .motion .card.on .card-inner{opacity:1; transform:none} /* themes: --field bg, --ink-c text, --pop accent figure, --glow soft light spot */ .t-purple{--field:oklch(0.47 0.13 322); --ink-c:var(--cream); --pop:oklch(0.86 0.15 88); --glow:oklch(0.62 0.16 330 / .5)} .t-magenta{--field:oklch(0.51 0.21 352); --ink-c:var(--cream); --pop:oklch(0.88 0.19 128); --glow:oklch(0.70 0.22 352 / .55)} .t-indigo{--field:oklch(0.50 0.17 274); --ink-c:var(--cream); --pop:oklch(0.86 0.16 88); --glow:oklch(0.66 0.18 292 / .55)} .t-lime{--field:oklch(0.86 0.19 128); --ink-c:var(--char); --pop:oklch(0.35 0.16 330); --glow:oklch(0.94 0.14 128 / .7)} .t-gold{--field:oklch(0.82 0.15 84); --ink-c:var(--char); --pop:oklch(0.46 0.22 350); --glow:oklch(0.92 0.13 92 / .7)} .t-ink{--field:oklch(0.18 0.045 315); --ink-c:var(--cream); --pop:oklch(0.88 0.19 128); --glow:oklch(0.50 0.14 330 / .5)} /* card typography */ .kicker{font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,2.6vw,1.4rem); opacity:.86; margin-bottom:18px} .figure{font-family:var(--display); font-weight:700; color:var(--pop); line-height:.86; font-size:clamp(4.2rem,17vw,9rem); font-variant-numeric:tabular-nums; letter-spacing:-.03em; text-wrap:balance} .figure .unit{font-size:.32em; letter-spacing:0} .name{font-family:var(--display); font-weight:700; color:var(--pop); line-height:.98; font-size:clamp(2.6rem,10vw,6rem); letter-spacing:-.03em; text-wrap:balance} .sub{font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,3vw,1.6rem); margin-top:8px; opacity:.9} .line{font-size:clamp(1.1rem,2.5vw,1.45rem); max-width:32ch; margin-top:22px; text-wrap:pretty} .line b{font-weight:700} .card-inner.mid{text-align:center; justify-items:center; margin-inline:auto; display:grid} .card-inner.mid .line{margin-inline:auto} /* album cover art — fills the sparse name/figure cards */ .cover{width:clamp(150px,30vw,300px); aspect-ratio:1; border-radius:14px; object-fit:cover; flex-shrink:0; box-shadow:0 22px 55px oklch(0.10 0.02 315 / .45); background:color-mix(in oklch, var(--field) 60%, black); transition:transform .3s var(--ease), box-shadow .3s var(--ease)} .cover:hover{transform:rotate(-2deg) translateY(-5px); box-shadow:0 30px 65px oklch(0.10 0.02 315 / .55)} .cover:active{transform:scale(.97)} .card-inner.media{display:grid; grid-template-columns:1fr auto; gap:clamp(26px,5vw,64px); align-items:center; max-width:var(--wrap)} .card-inner.media .mt{min-width:0} .cover-c{margin:0 auto 24px} /* centered cover for .mid cards */ @media(max-width:640px){ .card-inner.media{grid-template-columns:1fr; justify-items:start; gap:26px} .card-inner.media .ma{order:-1} .cover{width:clamp(140px,44vw,210px)} } /* list thumbnails (top-5 + receipts) */ .thumb{width:34px; height:34px; border-radius:6px; object-fit:cover; flex-shrink:0; background:oklch(0.30 0.05 315)} .chart.chart--art .row{grid-template-columns:1.5rem 34px 1fr auto} .bar.art{grid-template-columns:1.4rem 30px 1fr auto} .bar.art .thumb{width:30px; height:30px} /* intro card — muted green VU-meter backdrop on a dark purple room */ .card--hero{background:radial-gradient(125% 95% at 50% 26%, oklch(0.27 0.10 322), oklch(0.15 0.04 315) 68%)} .card--hero::before{display:none} /* the meter owns the backdrop */ .card--hero .wave{position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; -webkit-mask:linear-gradient(to top, #000 20%, oklch(0 0 0 / .55) 52%, transparent 82%); mask:linear-gradient(to top, #000 20%, oklch(0 0 0 / .55) 52%, transparent 82%)} .card--hero .wave-scrim{position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(115% 80% at 50% 40%, transparent 0%, oklch(0.14 0.03 315 / .22) 60%, oklch(0.13 0.03 315 / .5) 100%)} .card--hero .card-inner{z-index:1} .card--hero .intro-title,.card--hero .intro-sub,.card--hero .cue{text-shadow:0 2px 34px oklch(0.10 0.02 315 / .85)} .intro-brand{width:clamp(140px,26vw,190px); height:auto; margin-bottom:30px; filter:drop-shadow(0 8px 26px oklch(0.16 0.03 315 / .5))} .intro-title{font-size:clamp(2.4rem,10.5vw,5.4rem); font-weight:700; letter-spacing:-.03em; text-wrap:balance; line-height:.98} .intro-title span{color:var(--pop)} .intro-sub{font-size:clamp(1.05rem,2.6vw,1.35rem); max-width:34ch; margin:22px auto 0; opacity:.92; text-wrap:pretty} .cue{display:inline-block; margin-top:38px; font-family:var(--display); font-weight:600; font-size:.95rem; padding:13px 30px; border-radius:100px; text-decoration:none; background:var(--cream); color:var(--field); transition:.25s var(--ease)} .cue:hover{transform:translateY(-2px)} .cue:active{transform:translateY(1px) scale(.98)} /* multi-figure row (the crowd) */ .figrow{display:flex; gap:clamp(18px,5vw,72px); flex-wrap:wrap; justify-content:center; width:100%} .figrow .fig{text-align:center; flex:0 1 auto; min-width:0} .figrow .fig .n{font-family:var(--display); font-weight:700; color:var(--pop); font-size:clamp(2.6rem,10vw,5.5rem); line-height:.9; font-variant-numeric:tabular-nums} .figrow .fig .l{font-family:var(--display); font-weight:600; font-size:clamp(.95rem,2.2vw,1.15rem); margin-top:8px; opacity:.9} /* top-5 list card */ .chart{display:grid; gap:10px; width:100%; max-width:640px; margin-inline:auto; text-align:left} .chart .row{display:grid; grid-template-columns:1.6rem 1fr auto; align-items:center; gap:14px; padding:12px 4px; border-bottom:2px solid color-mix(in oklch, var(--ink-c) 16%, transparent)} .chart .row:last-child{border-bottom:0} .chart .rk{font-family:var(--display); font-weight:700; color:var(--pop); font-size:1.3rem; font-variant-numeric:tabular-nums} .chart{min-width:0} .chart .tt{font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,3vw,1.5rem); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .chart .tt em{font-style:normal; opacity:.6; font-weight:400; font-size:.8em} .chart .ct{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; opacity:.9} /* person card (champion / night owl) */ .person{display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,5vw,52px); align-items:center} .person-av{width:clamp(128px,26vw,220px); aspect-ratio:1; border-radius:50%; object-fit:cover; border:5px solid var(--pop); background:color-mix(in oklch, var(--field) 70%, black); box-shadow:0 24px 60px oklch(0.10 0.02 315 / .45); transition:transform .3s var(--ease), box-shadow .3s var(--ease)} .person-av:hover{transform:scale(1.05) rotate(-2deg); box-shadow:0 28px 70px oklch(0.10 0.02 315 / .55)} .person-av:active{transform:scale(.96)} .person-name{font-family:var(--display); font-weight:700; color:var(--pop); font-size:clamp(2.4rem,9vw,5rem); line-height:.96} .person-role{font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,2.6vw,1.5rem); margin-top:6px; opacity:.92} .split{height:14px; display:flex; border-radius:8px; overflow:hidden; margin-top:18px; width:100%; max-width:min(420px,100%); background:color-mix(in oklch, var(--ink-c) 16%, transparent)} .split u{display:block; height:100%; width:var(--to)} .split .u{background:var(--up)} .split .d{background:var(--down)} .motion .split u{width:0; transition:width 1s var(--ease) .2s} .motion .on .split u{width:var(--to)} .splitcap{display:flex; justify-content:space-between; gap:12px; width:100%; max-width:min(420px,100%); margin-top:9px; font-size:.9rem; font-variant-numeric:tabular-nums; opacity:.92} @media(max-width:560px){ .person{grid-template-columns:1fr; text-align:center; justify-items:center} .split,.splitcap{margin-inline:auto} .person .line{margin-inline:auto} } /* ---------- The full receipts (charts) ---------- */ .receipts{max-width:var(--wrap); margin:0 auto; padding:16vh 26px 8vh} .receipts-head{text-align:center; margin-bottom:14px} .receipts-head h2{font-size:clamp(2rem,6vw,3.2rem)} .receipts-head p{opacity:.7; margin-top:10px; color:var(--cream)} .receipts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px} @media(max-width:820px){ .receipts-grid{grid-template-columns:1fr} } .rc{background:oklch(0.21 0.045 315); border:1px solid oklch(0.33 0.05 315); border-radius:18px; padding:24px; min-width:0} .rc h3{font-size:1.1rem; margin-bottom:4px} .rc .rc-sub{opacity:.72; font-size:.8rem; margin-bottom:18px} .bars{display:flex; flex-direction:column; gap:9px} .bar{display:grid; grid-template-columns:1.4rem 1fr auto; gap:10px; align-items:center; font-size:.92rem} .bar .rk{font-family:var(--display); font-weight:700; opacity:.62; text-align:right; font-variant-numeric:tabular-nums} .bar .nm{position:relative; min-width:0; padding:7px 11px; border-radius:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:oklch(0.26 0.055 315)} .bar .nm i{position:absolute; inset:0; width:var(--w); z-index:0; border-radius:8px; background:linear-gradient(90deg, oklch(0.55 0.20 350 / .8), oklch(0.5 0.17 300 / .45))} .motion .rc .bar .nm i{width:0; transition:width .9s var(--ease)} .motion .rc.on .bar .nm i{width:var(--w)} .bar .nm span{position:relative; z-index:1} .bar .nm em{font-style:normal; opacity:.5} .bar .vv{font-family:var(--display); font-weight:700; font-variant-numeric:tabular-nums; opacity:.85} /* sharpest-selectors mini list */ .mini{display:flex; flex-direction:column; gap:12px} .minirow{display:flex; align-items:center; gap:12px} .mini-av{width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; background:oklch(0.26 0.055 315); border:1px solid oklch(0.33 0.05 315)} .minirow .mn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500} .minirow .mv{font-family:var(--display); font-weight:700; color:var(--up); font-variant-numeric:tabular-nums; white-space:nowrap} .minirow .mv em{font-style:normal; font-weight:400; opacity:.5; font-size:.72em; color:var(--cream)} /* odds & ends facts */ .facts2{display:flex; flex-direction:column} .f2{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:11px 0; border-bottom:1px solid oklch(0.33 0.05 315)} .f2:last-child{border-bottom:0; padding-bottom:0} .f2 .fk{opacity:.6; font-size:.82rem; flex-shrink:0} .f2 .fv{text-align:right; min-width:0} .f2 .fv b{font-weight:700} .f2 .fv em{display:block; font-style:normal; opacity:.45; font-size:.75rem} /* ---------- Footer / share ---------- */ .foot{text-align:center; padding:12vh 26px 15vh; border-top:1px solid oklch(0.33 0.05 315)} .foot-brand{margin:0 auto 24px; opacity:.8} .foot-note{font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,3.4vw,2rem); max-width:24ch; margin:0 auto 22px; line-height:1.2; text-wrap:balance} .foot-note span{color:oklch(0.88 0.19 128)} .foot-fine{opacity:.5; font-size:.85rem; max-width:56ch; margin:0 auto; font-variant-numeric:tabular-nums} /* ---------- Overdrive #2: cinematic cover wall + lightbox morph ---------- */ .card--wall{overflow:hidden} .card--wall .wall{position:absolute; inset:-9%; z-index:0; display:grid; place-items:center; perspective:1300px; pointer-events:none} .card--wall .wall-plane{display:grid; width:118%; grid-template-columns:repeat(auto-fill,minmax(clamp(74px,13vw,132px),1fr)); gap:clamp(7px,1.3vw,15px); transform-style:preserve-3d; will-change:transform} .card--wall .tile{padding:0; border:0; background:none; border-radius:10px; overflow:hidden; aspect-ratio:1; min-width:0; cursor:zoom-in; pointer-events:auto; box-shadow:0 14px 34px oklch(0.07 0.02 315 / .55); transition:box-shadow .25s var(--ease)} .card--wall .tile img{width:100%; height:100%; object-fit:cover; display:block} .card--wall .tile:hover{box-shadow:0 0 0 2px oklch(0.82 0.14 90 / .6), 0 22px 48px oklch(0.07 0.02 315 / .7); z-index:3} .card--wall .wall-scrim2{position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(58% 42% at 50% 50%, oklch(0.07 0.02 315 / .94) 0%, oklch(0.09 0.02 315 / .7) 42%, transparent 82%), radial-gradient(120% 95% at 50% 50%, transparent 30%, oklch(0.10 0.02 315 / .6) 88%), linear-gradient(oklch(0.11 0.03 315 / .24), oklch(0.11 0.03 315 / .24))} .card--wall .wall-cap{position:relative; z-index:2} .card--wall .wall-cap .kicker{text-shadow:0 2px 10px oklch(0.07 0.02 315 / 1), 0 2px 26px oklch(0.07 0.02 315 / .95)} .card--wall .wall-title{font-size:clamp(1.4rem,4.8vw,3rem); text-wrap:balance; max-width:20ch; margin-inline:auto; text-shadow:0 2px 8px oklch(0.06 0.02 315 / 1), 0 4px 30px oklch(0.06 0.02 315 / .95)} .card--wall .wall-hint{margin-top:16px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5; font-family:var(--display); font-weight:600} /* assemble on reveal (staggered) */ .motion .card--wall .tile{opacity:0; transform:scale(.5); filter:blur(7px); transition:opacity .55s var(--ease), transform .7s var(--ease), filter .55s var(--ease); transition-delay:calc(var(--i) * 22ms)} .motion .card--wall.on .tile{opacity:1; transform:scale(1); filter:blur(0)} /* tap-to-enlarge lightbox (View Transitions shared-element morph) */ .lightbox{position:fixed; inset:0; z-index:var(--z-modal); display:none; place-items:center; padding:24px; text-align:center; background:oklch(0.10 0.02 315 / .9); backdrop-filter:blur(7px); cursor:zoom-out} .lightbox.show{display:grid} .lightbox img{max-width:min(82vw,540px); max-height:74vh; border-radius:16px; box-shadow:0 34px 90px oklch(0.05 0.01 315 / .8)} .lightbox .lb-name{margin-top:20px; font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--cream); max-width:40ch; text-wrap:balance} ::view-transition-group(cover-morph){animation-duration:.5s; animation-timing-function:cubic-bezier(0.16,1,0.3,1)} /* ---------- Delight: confetti finale + Konami toast ---------- */ .confetti-cv{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:var(--z-confetti)} .toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:var(--z-toast); background:oklch(0.22 0.05 315); color:var(--cream); border:1px solid oklch(0.42 0.10 330); font-family:var(--display); font-weight:600; font-size:1rem; padding:13px 22px; border-radius:100px; box-shadow:0 18px 45px oklch(0.10 0.02 315 / .6); max-width:calc(100vw - 32px); text-align:center; transition:transform .45s var(--ease)} .toast.show{transform:translate(-50%,0)} /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .person-av,.cover,.cue{transition:none} .person-av:hover,.cover:hover,.cover:active,.person-av:active{transform:none} .toast{transition:none; transform:translate(-50%,0)} } /* ================= Edition bonus cards ("extras") ================= */ /* Warm/summer palette themes — reuse the --field/--ink-c/--pop/--glow contract. */ .x-sun {--field:oklch(0.78 0.16 68); --ink-c:var(--char); --pop:oklch(0.46 0.21 18); --glow:oklch(0.88 0.15 72 /.75)} .x-gold {--field:oklch(0.82 0.15 84); --ink-c:var(--char); --pop:oklch(0.47 0.22 350); --glow:oklch(0.92 0.13 92 /.7)} .x-amber {--field:oklch(0.63 0.15 52); --ink-c:var(--cream); --pop:oklch(0.90 0.15 92); --glow:oklch(0.74 0.16 55 /.6)} .x-coral {--field:oklch(0.59 0.19 22); --ink-c:var(--cream); --pop:oklch(0.92 0.16 96); --glow:oklch(0.70 0.20 22 /.6)} .x-aqua {--field:oklch(0.71 0.12 200); --ink-c:var(--char); --pop:oklch(0.42 0.16 350); --glow:oklch(0.84 0.13 195 /.65)} .x-sky {--field:oklch(0.59 0.13 233); --ink-c:var(--cream); --pop:oklch(0.90 0.15 92); --glow:oklch(0.72 0.15 233 /.6)} .x-night {--field:oklch(0.34 0.09 255); --ink-c:var(--cream); --pop:oklch(0.86 0.16 92); --glow:oklch(0.56 0.13 262 /.5)} .x-magenta{--field:oklch(0.55 0.20 350); --ink-c:var(--cream); --pop:oklch(0.88 0.19 128); --glow:oklch(0.72 0.22 350 /.55)} .x-divider{--field:linear-gradient(158deg, oklch(0.66 0.17 55), oklch(0.50 0.19 15) 52%, oklch(0.34 0.13 300)); --ink-c:var(--cream); --pop:oklch(0.90 0.14 92); --glow:oklch(0.72 0.18 40 /.6)} /* editorial split: narrative left, feature art / ranked list right (no left-pushed voids) */ .x-wrap{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr); gap:clamp(30px,5vw,68px); align-items:center; width:100%; max-width:var(--wrap)} .x-wrap.x-solo{grid-template-columns:minmax(0,60ch); justify-content:center} .x-main{min-width:0} .x-title{font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.02; letter-spacing:-.03em; margin-top:6px; text-wrap:balance} .x-stat{display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap} .x-stat-n{font-family:var(--display); font-weight:700; color:var(--pop); line-height:.82; font-size:clamp(3rem,8.5vw,5.6rem); font-variant-numeric:tabular-nums; letter-spacing:-.03em} .x-stat-l{font-size:clamp(.95rem,1.7vw,1.15rem); opacity:.85; max-width:22ch; font-weight:500} .x-main .line{margin-top:16px; max-width:46ch} /* name & shame chip */ .x-culprit{display:inline-flex; align-items:center; gap:14px; margin-top:26px; max-width:100%; background:color-mix(in oklch, var(--ink-c) 13%, transparent); border-radius:100px; padding:7px 20px 7px 8px} .x-cul-avs{display:inline-flex; flex:none} .x-cul-avs .x-cul-av{margin-left:-13px} .x-cul-avs .x-cul-av:first-child{margin-left:0} .x-cul-av{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2.5px color-mix(in oklch, var(--field) 82%, black)} .x-cul-txt{display:grid; line-height:1.18; min-width:0} .x-cul-txt em{font-style:normal; font-family:var(--display); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; opacity:.72} .x-cul-txt b{font-family:var(--display); font-weight:700; font-size:1.12rem; text-wrap:balance} .x-cul-n{font-family:var(--display); font-weight:700; color:var(--pop); font-variant-numeric:tabular-nums; font-size:.86em; opacity:.9} /* aside — feature art + ranked list, no nested-card chrome */ .x-aside{min-width:0; display:grid; gap:22px; align-content:center} .x-art{margin:0} .x-art .cover{width:100%; max-width:300px; margin-inline:auto; border-radius:16px} .x-list-h{font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; opacity:.68; margin-bottom:4px} .x-list ol{list-style:none; display:grid} .x-list li{display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:baseline; padding:9px 2px; border-bottom:1px solid color-mix(in oklch, var(--ink-c) 16%, transparent)} .x-list li:first-child{border-top:1px solid color-mix(in oklch, var(--ink-c) 16%, transparent)} .xl-l{font-weight:500; min-width:0} .xl-s{display:block; font-size:.78em; opacity:.62; font-weight:400} .xl-v{font-family:var(--display); font-weight:700; color:var(--pop); font-variant-numeric:tabular-nums; white-space:nowrap} @media(max-width:820px){ .x-wrap,.x-wrap.x-solo{grid-template-columns:1fr; gap:26px} .x-art .cover{max-width:220px} } /* ================= By-the-numbers dashboard (under receipts) ================= */ .dash{max-width:var(--wrap); margin:64px auto 0; padding:0 26px} .dash .receipts-head{text-align:left} /* one seamless ledger panel (hairline gridlines via gap), not a grid of cards. Exactly 5 across so the 10 stats fill two full rows (no dangling empty cells). */ .dash-tiles{margin-top:24px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:color-mix(in oklch, var(--cream) 14%, transparent); border:1px solid color-mix(in oklch, var(--cream) 14%, transparent); border-radius:16px; overflow:hidden} @media(max-width:760px){ .dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } .tile{background:var(--ink); padding:20px 22px 18px; display:flex; flex-direction:column; gap:6px} .tile-n{font-family:var(--display); font-weight:700; font-size:clamp(2rem,4.2vw,2.9rem); color:var(--cream); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em} .tile-l{font-size:.86rem; opacity:.6; line-height:1.25} /* charts as ruled full-width rows, not boxed cards */ .dash-charts{margin-top:36px; border-top:1px solid color-mix(in oklch, var(--cream) 14%, transparent)} .spark{padding:16px 2px 14px; border-bottom:1px solid color-mix(in oklch, var(--cream) 12%, transparent)} .spark-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px} .spark-l{font-family:var(--display); font-weight:600; font-size:1.02rem} .spark-v{font-family:var(--display); font-weight:700; font-size:1.2rem; font-variant-numeric:tabular-nums; color:var(--cream)} .spark svg{width:100%; height:74px; display:block} .spark .sg{stroke:color-mix(in oklch, var(--cream) 8%, transparent); stroke-width:1} .spark .sa{opacity:.20; stroke:none} .spark .sl{fill:none; stroke-width:2.4; vector-effect:non-scaling-stroke} .spark.c-plays .sa{fill:oklch(0.82 0.15 84)} .spark.c-plays .sl{stroke:oklch(0.82 0.15 84)} .spark.c-req .sa{fill:oklch(0.72 0.12 200)} .spark.c-req .sl{stroke:oklch(0.72 0.12 200)} .spark.c-votes .sa{fill:oklch(0.66 0.20 350)} .spark.c-votes .sl{stroke:oklch(0.66 0.20 350)} /* hover scrubber: vertical guide + point dot + value/time tooltip (edition colours via --ink/--cream) */ .spark{position:relative} .spark svg{cursor:crosshair} .spark-guide,.spark-dot,.spark-tip{position:absolute; z-index:2; pointer-events:none; opacity:0; transition:opacity .12s var(--ease)} .spark.hot .spark-guide,.spark.hot .spark-dot,.spark.hot .spark-tip{opacity:1} .spark-guide{width:1px; background:color-mix(in oklch, var(--cream) 34%, transparent); transform:translateX(-.5px)} .spark-dot{width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); background:var(--cream); box-shadow:0 0 0 3px var(--ink)} .spark-tip{transform:translate(-50%,-100%); background:color-mix(in oklch, var(--ink) 80%, var(--cream)); color:var(--cream); border:1px solid color-mix(in oklch, var(--cream) 20%, transparent); border-radius:10px; padding:6px 11px; white-space:nowrap; text-align:center; line-height:1.25; box-shadow:0 12px 30px oklch(0.08 0.01 0 / .5)} .spark-tip b{font-family:var(--display); font-weight:700; font-size:1.05rem; margin-right:4px} .spark-tip em{display:block; font-style:normal; opacity:.62; font-size:.72rem; font-variant-numeric:tabular-nums; margin-top:1px} @media (prefers-reduced-motion:reduce){ .spark-guide,.spark-dot,.spark-tip{transition:none} } .spark-days{display:flex; justify-content:space-between; font-size:.72rem; opacity:.5; padding:8px 4px 0} /* ================= Summer edition reskin ================= */ /* Not a 4-line field swap: the whole surface commits to summer heat. Each base theme gets a warm field + a COMPLEMENTARY pop (citrus-on-warm, gold-on-blue) so every figure sings, and a warm glow so the "sun spot" reads as heat, not spring. The dark base + chrome (hero night, receipts, bars, footer, wall, toast) is a deep OCEAN-TEAL night — poolside after dark — so the warm cards pop against it and nothing reads brown. Warm ember glow + sunset bar fills stay on top. Scoped under .ed-summer only — Spring is untouched, app.js byte-identical across editions. */ .ed-summer{--ink:oklch(0.185 0.04 210); /* app.js reads these: confetti finale + hero VU meter, themed to summer (spring keeps its own via app.js fallbacks) */ --confetti:#ff8a3d, #ff5a6a, #b6e84a, #fcdd5b, #40d6c4, #f7f0fb; /* sunset·coral·lime·gold·aqua·cream */ --vu-on:64,214,196; --vu-cap:150,240,228; --vu-off:120,180,175} /* aqua pool-light equaliser (RGB triples) */ /* base card themes — field + complementary pop + warm glow (were: field only) */ .ed-summer .t-purple {--field:oklch(0.555 0.16 45); --pop:oklch(0.90 0.18 124); --glow:oklch(0.83 0.16 72 /.62)} /* sunset orange · lime pop (field tuned so cream body clears 4.5:1) */ .ed-summer .t-magenta{--field:oklch(0.565 0.19 22); --pop:oklch(0.90 0.15 96); --glow:oklch(0.73 0.20 28 /.60)} /* watermelon coral · crisp sun-gold pop */ .ed-summer .t-indigo {--field:oklch(0.53 0.13 232); --pop:oklch(0.90 0.15 96); --glow:oklch(0.82 0.12 215 /.58)} /* sea/sky blue · crisp sun-gold pop */ .ed-summer .t-lime {--pop:oklch(0.48 0.20 25)} /* light lime field kept · deep watermelon-seed pop (was spring purple) */ .ed-summer .t-gold {--pop:oklch(0.50 0.21 24)} /* light gold field kept · deep coral pop (was spring magenta) */ .ed-summer .t-ink {--field:oklch(0.24 0.05 210); --pop:oklch(0.90 0.15 96); --glow:oklch(0.60 0.16 45 /.55)} /* teal night · sun-gold pop · WARM ember glow kept on top */ /* hero — golden-hour horizon fading into ocean-teal night (green equaliser reads as dusk) */ .ed-summer .card--hero{background:radial-gradient(125% 98% at 50% 20%, oklch(0.47 0.16 58), oklch(0.30 0.10 260) 42%, oklch(0.17 0.05 212) 76%)} .ed-summer .card--hero .intro-title,.ed-summer .card--hero .intro-sub,.ed-summer .card--hero .cue{text-shadow:0 2px 34px oklch(0.10 0.03 212 /.85)} .ed-summer .intro-brand{filter:drop-shadow(0 8px 26px oklch(0.13 0.04 212 /.55))} /* receipts — teal-night panels + WARM sunset bar fills (kept warm to pop on the teal) */ .ed-summer .rc{background:oklch(0.22 0.045 210); border-color:oklch(0.35 0.05 212)} .ed-summer .bar .nm{background:oklch(0.27 0.05 210)} .ed-summer .bar .nm i{background:linear-gradient(90deg, oklch(0.66 0.19 48 /.88), oklch(0.58 0.21 22 /.5))} .ed-summer .mini-av{background:oklch(0.27 0.05 210); border-color:oklch(0.35 0.05 212)} .ed-summer .f2{border-color:oklch(0.35 0.05 212)} .ed-summer .thumb{background:oklch(0.30 0.045 210)} .ed-summer .spark.c-votes .sa{fill:oklch(0.66 0.20 25)} .ed-summer .spark.c-votes .sl{stroke:oklch(0.66 0.20 25)} /* coral (plays=gold, requests=sea-teal keep their contrast) */ /* footer — teal hairline + crisp sun-gold highlight */ .ed-summer .foot{border-color:oklch(0.35 0.05 212)} .ed-summer .foot-note span{color:oklch(0.90 0.15 96)} /* crisp sun-gold, not mustard-on-black */ .ed-summer .foot-brand{filter:none} /* cover-wall scrims + toast — deep teal-night wash */ .ed-summer .card--wall .wall-scrim2{background: radial-gradient(58% 42% at 50% 50%, oklch(0.08 0.03 212 /.94) 0%, oklch(0.10 0.03 212 /.7) 42%, transparent 82%), radial-gradient(120% 95% at 50% 50%, transparent 30%, oklch(0.12 0.03 212 /.6) 88%), linear-gradient(oklch(0.13 0.03 212 /.24), oklch(0.13 0.03 212 /.24))} .ed-summer .toast{background:oklch(0.24 0.05 210); border-color:oklch(0.46 0.10 212)} .fb-hours{display:flex;align-items:flex-end;gap:2px;height:48px;margin-top:1.4rem;width:min(34ch,90%);margin-inline:auto} .fb-hours .fb-bar{flex:1;min-height:2px;height:var(--h);background:currentColor;opacity:.55;border-radius:2px} /* ============================================================================ P-LAN, Fallout/Vault-Tec reskin (blue #00aad9 + yellow #f3ff00). Scoped under .party-plan (P-LAN editions carry it; StratLAN never does, so this is inert for StratLAN). Deliberately overrides StratLAN's DESIGN.md house-style bans, see ADR 0007. Palette values are the starting point, tuned by screenshot against the 4.5:1 bar. ============================================================================ */ .party-plan{ --ink:oklch(0.15 0.05 245); /* deep Vault-navy base, behind/between cards */ --char:oklch(0.22 0.05 250); /* navy text on the yellow light fields */ /* Vault-Tec typeface: Oswald (bold condensed poster/signage) display, Barlow body. StratLAN never carries .party-plan so it keeps Signika/Heebo. index.html loads these families for P-LAN pages only. */ --display:'Oswald',system-ui,sans-serif; --body:'Barlow',system-ui,sans-serif; /* app.js reads these off : confetti finale + hero VU meter */ --confetti:#00aad9, #f3ff00, #35ff7a, #ffb43d, #d0472a, #f7f0fb; /* blue·yellow·Pip-Boy green·amber·Nuka rust·cream */ --vu-on:243,255,0; --vu-cap:255,255,170; --vu-off:120,150,40; /* yellow Vault-Tec equaliser (RGB triples) */ } /* Wasteland spread, six Fallout hues so no two neighbouring cards share a colour. Dark fields (navy/blue/rust) carry cream text; light fields (green/yellow/amber) carry navy --char. Pops are varied per field to break the blue+yellow-on-everything monotony. */ .party-plan .t-ink {--field:oklch(0.22 0.06 248); --pop:oklch(0.93 0.19 106); --glow:oklch(0.55 0.13 235 / .5)} /* deep navy · yellow pop */ .party-plan .t-purple {--field:oklch(0.50 0.12 232); --pop:oklch(0.88 0.15 80); --glow:oklch(0.66 0.14 230 / .5)} /* Vault blue · amber pop (brightened to clear 3:1) */ .party-plan .t-magenta{--field:oklch(0.50 0.17 33); --pop:oklch(0.93 0.19 106); --glow:oklch(0.64 0.18 34 / .5)} /* Nuka rust · yellow pop */ .party-plan .t-indigo {--field:oklch(0.86 0.18 152); --ink-c:var(--char); --pop:oklch(0.42 0.13 245); --glow:oklch(0.92 0.15 150 / .6)} /* Pip-Boy green · navy pop */ .party-plan .t-lime {--field:oklch(0.92 0.19 106); --ink-c:var(--char); --pop:oklch(0.50 0.19 33); --glow:oklch(0.95 0.16 106 / .6)} /* Vault yellow · rust pop (deepened for margin) */ .party-plan .t-gold {--field:oklch(0.80 0.14 74); --ink-c:var(--char); --pop:oklch(0.42 0.15 240); --glow:oklch(0.90 0.13 78 / .6)} /* terminal amber · blue pop (deepened to clear 3:1) */ /* longest-wait is the only t-magenta card with a media inner; recolour it to Vault blue so it does not sit rust-on-rust against the champion card that precedes it in the story. */ .party-plan .t-magenta:has(.card-inner.media){--field:oklch(0.50 0.12 232); --pop:oklch(0.88 0.15 80); --glow:oklch(0.66 0.14 230 / .5)} /* Extras (.x-*) under P-LAN: match the Vault-Tec palette instead of the default purple. */ .party-plan .x-gold {--field:oklch(0.80 0.14 74); --ink-c:var(--char); --pop:oklch(0.42 0.15 240); --glow:oklch(0.90 0.13 78 / .6)} .party-plan .x-night {--field:oklch(0.22 0.06 248); --pop:oklch(0.93 0.19 106); --glow:oklch(0.55 0.13 235 / .5)} /* dark Nuka-rust field, so it carries cream text like its sibling .t-magenta (the base .x-sun is a light field with --char navy text; without this the Whamageddon card renders navy-on-rust ~2.9:1). */ .party-plan .x-sun {--field:oklch(0.50 0.17 33); --ink-c:var(--cream); --pop:oklch(0.93 0.19 106); --glow:oklch(0.64 0.18 34 / .5)} /* hero, vault-blue glow sinking into navy; pop pinned to yellow so t-purple's amber stays off the anchor card */ .party-plan .card--hero{--pop:oklch(0.93 0.19 106); background:radial-gradient(125% 95% at 50% 22%, oklch(0.42 0.13 235), oklch(0.20 0.07 248) 60%, oklch(0.13 0.05 245) 100%)} .party-plan .card--hero .intro-title,.party-plan .card--hero .intro-sub,.party-plan .card--hero .cue{text-shadow:0 2px 30px oklch(0.10 0.04 245 / .85)} /* the yellow equaliser is the brightest hero meter of any edition; float a soft navy scrim behind the intro text so cream copy clears contrast over the tallest bars. */ .party-plan .card--hero .card-inner{isolation:isolate} .party-plan .card--hero .card-inner::before{content:""; position:absolute; inset:-9% -14%; z-index:-1; pointer-events:none; background:radial-gradient(58% 60% at 50% 47%, oklch(0.13 0.05 245 / .66), oklch(0.13 0.05 245 / .30) 54%, transparent 78%); filter:blur(7px)} /* receipts, navy panels + blue hairline */ .party-plan .rc{background:oklch(0.22 0.06 248); border-color:oklch(0.42 0.10 240)} .party-plan .receipts-head p{color:var(--cream)} /* P-LAN logo is near-square (1075x864); the shared footer forces 130x55, squashing it */ .party-plan .foot-brand{height:auto} /* per-event breakdown bars (combined P-LAN only; card renders "" without S.events, so inert on StratLAN) */ .party-plan .pe-chart{display:grid; gap:10px; margin:22px auto; width:100%; max-width:min(460px,100%)} .party-plan .pe-row{display:grid; grid-template-columns:3rem 1fr auto; align-items:center; gap:12px} .party-plan .pe-tag{font-weight:700; font-variant-numeric:tabular-nums} .party-plan .pe-bar{display:block; height:16px; border-radius:8px; background:var(--pop); min-width:6px} .party-plan .pe-val{font-weight:700; font-variant-numeric:tabular-nums}