/* ============================================================================ skins.css — the VARIABLE motif library (sample one per artifact) ---------------------------------------------------------------------------- Each .skin-* class is a complete mood. Put ONE on (or a .panel) and the base.css components recolour to match — "sampling is one class." A skin does two jobs: (1) re-point the semantic tokens (--ground/--ink/--accent/elevation), (2) paint its atmosphere (stars, grain, dot-grid, coronas) in pure CSS via ::before, leaving .grain's ::after free for the noise overlay. The big expressive FIGURES (D's moiré ring system, F's rhodonea curves) are heavy SVG — keep them as optional drop-in overlays (see directions-v2.html for the canonical markup). The skin alone already gives ~80% of the look for free. Motifs (see directions-library.md): A Nocturne · B Riso Pop · D Interference · E Dot-Matrix · F Spirograph Constant identity in every skin: orange/pink/purple + an astronomy/math motif. Rule: one expressive motif per view. Bright on calm. One focal point. ========================================================================== */ /* ── Modifier: .fixed-sky — pinned atmosphere for tall / scrolling pages ────── A skin paints its ground gradient + ::before figure (starfield, corona, dot grid) sized to its ELEMENT box. On a short page that fills the viewport; on a long scrolling page the atmosphere scrolls away. Add .fixed-sky alongside any skin on to anchor both to the viewport instead. Pairs with any motif. */ .fixed-sky{background-attachment:fixed} .fixed-sky::before{position:fixed} /* ════════════════════════════════════════════════════════════════════════════ A · NOCTURNE — dark aurora ground, starfield, carved moon. (live on Parallax) Premium, dramatic. Hero pages, emotional/keepsake pieces. ════════════════════════════════════════════════════════════════════════════ */ .skin-nocturne{ --ground:#0A0712; --surface:rgba(255,255,255,.05); --ink:#F4F1FA; --muted:rgba(244,241,250,.62); --hair:rgba(255,255,255,.10); --accent:var(--pink); position:relative; color:var(--ink); background: radial-gradient(120% 90% at 80% -10%, rgba(124,58,237,.45), transparent 55%), radial-gradient(90% 80% at 10% 110%, rgba(255,46,136,.30), transparent 55%), radial-gradient(70% 60% at 95% 90%, rgba(255,106,43,.22), transparent 55%), var(--ground); } .skin-nocturne::before{ /* starfield */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8; background-image: radial-gradient(1.2px 1.2px at 8% 18%,#fff,transparent), radial-gradient(1px 1px at 18% 74%,#fff,transparent), radial-gradient(1.5px 1.5px at 32% 42%,rgba(255,180,100,.9),transparent), radial-gradient(1px 1px at 44% 88%,#fff,transparent), radial-gradient(1.3px 1.3px at 54% 12%,#fff,transparent), radial-gradient(1px 1px at 76% 55%,rgba(200,160,255,.9),transparent), radial-gradient(1.1px 1.1px at 88% 32%,#fff,transparent), radial-gradient(1px 1px at 64% 70%,#fff,transparent); } .skin-nocturne > *{position:relative; z-index:1} /* cards become luminous glass; shadows go to glow not drop */ .skin-nocturne .card{backdrop-filter:blur(8px); box-shadow:0 0 0 1px var(--hair), 0 18px 50px rgba(0,0,0,.45)} .skin-nocturne .bar{background:rgba(255,255,255,.10)} .skin-nocturne .badge{background:rgba(255,255,255,.07); color:var(--ink)} /* ════════════════════════════════════════════════════════════════════════════ B · RISO POP — bright ground, flat overprint, heavy grain, NO soft shadows. Loud, handmade, fun. Playful posts, covers, anything that must feel human-made. ════════════════════════════════════════════════════════════════════════════ */ .skin-riso{ --ground:#F7F0E1; --surface:#FFFDF6; --ink:#1A1320; --muted:#6A5F52; --hair:#1A1320; --accent:var(--orange); position:relative; color:var(--ink); background:var(--ground); } /* flat offset "print" shadows — no blur, hard ink edge (overprint feel) */ .skin-riso .card{box-shadow:5px 5px 0 0 var(--ink); border:2px solid var(--ink); border-radius:var(--r-sm)} .skin-riso .card.float{box-shadow:8px 8px 0 0 var(--purple)} .skin-riso .hero{box-shadow:8px 8px 0 0 var(--ink); border:2px solid var(--ink); border-radius:var(--r-sm)} .skin-riso .btn{border:2px solid var(--ink); border-radius:var(--r-sm); box-shadow:4px 4px 0 0 var(--ink)} .skin-riso .btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--ink)} .skin-riso .btn-solid{background:var(--orange); color:var(--ink)} .skin-riso .badge{border:2px solid var(--ink); border-radius:var(--r-pill); box-shadow:2px 2px 0 0 var(--ink)} .skin-riso .bar{background:var(--p-300)} .skin-riso::before{ /* a couple of flat overprint shapes drifting behind content */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply; background: radial-gradient(circle at 88% 12%, var(--orange) 0 90px, transparent 92px), radial-gradient(circle at 12% 92%, var(--purple) 0 70px, transparent 72px); } .skin-riso > *{position:relative; z-index:1} /* ════════════════════════════════════════════════════════════════════════════ D · INTERFERENCE FIELD — near-black field, warm corona, moiré rings. Tense, scientific drama. Backgrounds, section breaks, "deep" technical pieces. (Drop the two offset ring-set SVGs from directions-v2.html for the full moiré.) ════════════════════════════════════════════════════════════════════════════ */ .skin-interference{ --ground:#060410; --surface:rgba(255,255,255,.05); --ink:#FFFFFF; --muted:rgba(255,255,255,.68); --hair:rgba(255,255,255,.12); --accent:var(--orange); position:relative; color:var(--ink); background:var(--ground); } .skin-interference::before{ /* starfield + warm corona glow */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(360px 360px at 92% 50%, rgba(255,106,43,.30), transparent 60%), radial-gradient(300px 300px at 98% 60%, rgba(255,46,136,.28), transparent 55%), radial-gradient(1.2px 1.2px at 8% 18%,#fff,transparent), radial-gradient(1px 1px at 18% 74%,#fff,transparent), radial-gradient(1.5px 1.5px at 32% 42%,rgba(255,180,100,.9),transparent), radial-gradient(1px 1px at 24% 32%,#fff,transparent), radial-gradient(1px 1px at 16% 55%,rgba(200,160,255,.9),transparent); } .skin-interference > *{position:relative; z-index:1} .skin-interference .kicker,.skin-interference .section-label{color:#FF9C6B} .skin-interference .card{box-shadow:0 0 0 1px var(--hair)} .skin-interference .bar{background:rgba(255,255,255,.10)} /* ════════════════════════════════════════════════════════════════════════════ E · DOT MATRIX CONSTELLATION — warm-white ground, halftone dot-grid, sweep. Structured, bright, clever. Data/explainer layouts, diagrams, bright reports. ════════════════════════════════════════════════════════════════════════════ */ .skin-dotmatrix{ --ground:#FBF0E3; --surface:#FFFFFF; --ink:#120D1E; --muted:rgba(18,13,30,.72); --hair:#E3D4C2; --accent:var(--pink); position:relative; color:var(--ink); background:var(--ground); } .skin-dotmatrix::before{ /* fine halftone dot grid + warm conic light sweep */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: conic-gradient(from 200deg at 90% 0%, rgba(255,106,43,.14) 0deg, rgba(255,46,136,.18) 80deg, rgba(124,58,237,.12) 160deg, transparent 220deg), radial-gradient(circle,#D9C9B8 1px,transparent 1px); background-size:auto, 22px 22px; opacity:.85; } .skin-dotmatrix > *{position:relative; z-index:1} .skin-dotmatrix .kicker,.skin-dotmatrix .section-label{color:#C7173F} .skin-dotmatrix .bar{background:var(--o-100)} /* ════════════════════════════════════════════════════════════════════════════ F · SPIROGRAPH VORTEX — near-black, starfield, violet corona, rhodonea curves. Elegant, mathematical. Signature marks, brand moments, the math+sky identity. (Drop the rhodonea SVG from directions-v2.html for the full vortex figure.) ════════════════════════════════════════════════════════════════════════════ */ .skin-spirograph{ --ground:#0E0718; --surface:rgba(255,255,255,.05); --ink:#FFFFFF; --muted:rgba(255,255,255,.65); --hair:rgba(255,255,255,.12); --accent:var(--purple); position:relative; color:var(--ink); background:var(--ground); } .skin-spirograph::before{ /* starfield + violet→pink corona */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(420px 420px at 88% 50%, rgba(124,58,237,.35), transparent 60%), radial-gradient(320px 320px at 95% 55%, rgba(255,46,136,.20), transparent 55%), radial-gradient(1px 1px at 6% 12%,rgba(255,255,255,.9),transparent), radial-gradient(1.3px 1.3px at 14% 68%,rgba(255,255,255,.8),transparent), radial-gradient(1px 1px at 28% 44%,rgba(200,170,255,.9),transparent), radial-gradient(1.2px 1.2px at 42% 22%,rgba(255,255,255,.7),transparent), radial-gradient(1.4px 1.4px at 56% 36%,rgba(255,180,80,.8),transparent); } .skin-spirograph > *{position:relative; z-index:1} .skin-spirograph .kicker,.skin-spirograph .section-label{color:#C8AAFF} .skin-spirograph .card{box-shadow:0 0 0 1px var(--hair)} .skin-spirograph .bar{background:rgba(255,255,255,.10)}