/* ========================================================= WISHBUSTERZ — direction 04, "Green Cascade" Five iterations, switched by [data-variant] on . Every component reads tokens only; variants redefine tokens and never restyle components directly. ========================================================= */ *, *::before, *::after { box-sizing: border-box; } :root { /* type scale */ --s0: .78rem; --s1: .9rem; --s2: 1.02rem; --s3: 1.35rem; --s4: 1.8rem; --s5: 2.6rem; --hero: clamp(2.1rem, 6.2vw, 4.4rem); --ff-m: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Courier New", monospace; --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rad: 2px; --shell: 1120px; --glow: none; --rain-density: 15; /* px between columns — smaller = denser */ --rain-speed: 1; --rain-alpha: .78; --panel-blur: none; } /* ---------- 1 · Classic Cascade ---------- */ :root[data-variant="classic"] { --bg: #000000; --bg2: #04120a; --bg3: #071c0f; --ink: #c8ffd9; --dim: #4d9c67; --faint: #2c6a41; --acc: #00ff41; --acc2: #8affb0; --warn: #ffb000; --line: rgba(0,255,65,.20); --line2: rgba(0,255,65,.42); --ff-d: var(--ff-m); --ff-b: var(--ff-m); --rain-rgb: 0,255,65; --rain-head: 200,255,220; --rain-density: 14; --rain-alpha: .85; --rain-speed: 1.15; --glow: 0 0 .5em rgba(0,255,65,.55); --scrim: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.86) 55%, rgba(0,0,0,.95)); } /* ---------- 2 · Terminal Discipline ---------- */ :root[data-variant="terminal"] { --bg: #070b08; --bg2: #0d130f; --bg3: #121a14; --ink: #dde7df; --dim: #7d8f82; --faint: #5b6b60; --acc: #6fd58a; --acc2: #a9e8bb; --warn: #e0a33c; --line: rgba(111,213,138,.16); --line2: rgba(111,213,138,.34); --ff-d: var(--ff-m); --ff-b: var(--ff-sans); --rain-rgb: 95,180,125; --rain-head: 205,240,215; --rain-density: 30; --rain-alpha: .34; --rain-speed: .55; --glow: none; --scrim: linear-gradient(180deg, rgba(7,11,8,.82), rgba(7,11,8,.94) 50%, rgba(7,11,8,.98)); } /* ---------- 3 · Red Pill ---------- */ :root[data-variant="redpill"] { --bg: #0a0203; --bg2: #17070a; --bg3: #1f0a0e; --ink: #ffd8d2; --dim: #a8635a; --faint: #7a4239; --acc: #ff3d2e; --acc2: #ff9b8a; --warn: #ffc24d; --line: rgba(255,61,46,.22); --line2: rgba(255,61,46,.46); --ff-d: var(--ff-m); --ff-b: var(--ff-m); --rain-rgb: 255,61,46; --rain-head: 255,214,205; --rain-density: 16; --rain-alpha: .72; --rain-speed: 1.35; --glow: 0 0 .55em rgba(255,61,46,.5); --scrim: linear-gradient(180deg, rgba(10,2,3,.66), rgba(10,2,3,.88) 55%, rgba(10,2,3,.96)); } /* ---------- 4 · White Rabbit ---------- */ :root[data-variant="rabbit"] { --bg: #eef1ec; --bg2: #ffffff; --bg3: #e4eae3; --ink: #0d1a11; --dim: #4c6153; --faint: #7b8d81; --acc: #0b7a34; --acc2: #12a34a; --warn: #9a6a00; --line: rgba(13,26,17,.16); --line2: rgba(11,122,52,.5); --ff-d: var(--ff-m); --ff-b: var(--ff-sans); --rain-rgb: 92,132,104; --rain-head: 11,90,42; --rain-density: 22; --rain-alpha: .3; --rain-speed: .7; --glow: none; --scrim: linear-gradient(180deg, rgba(238,241,236,.78), rgba(238,241,236,.93) 50%, rgba(238,241,236,.97)); } /* ---------- 5 · Deep Construct ---------- */ :root[data-variant="construct"] { --bg: #04090c; --bg2: rgba(120,220,215,.055); --bg3: rgba(120,220,215,.1); --ink: #d8f5ef; --dim: #7ba39e; --faint: #55807c; --acc: #4ff5d8; --acc2: #63cfff; --warn: #ffc86b; --line: rgba(79,245,216,.2); --line2: rgba(79,245,216,.45); --ff-d: var(--ff-m); --ff-b: var(--ff-sans); --rain-rgb: 79,245,216; --rain-head: 216,255,250; --rain-density: 19; --rain-alpha: .55; --rain-speed: .85; --glow: 0 0 .7em rgba(79,245,216,.4); --rad: 10px; --panel-blur: blur(9px); --scrim: radial-gradient(120% 80% at 50% -10%, rgba(79,245,216,.09), transparent 60%), linear-gradient(180deg, rgba(4,9,12,.7), rgba(4,9,12,.9) 55%, rgba(4,9,12,.97)); } /* ========================================================= Base ========================================================= */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ff-b); font-size: var(--s2); line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } #rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } .scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--scrim); } .nav, main, .foot, .switch { position: relative; z-index: 2; } .shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.2rem); } a { color: var(--acc); text-decoration: none; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: .5rem; background: var(--bg2); color: var(--acc); padding: .6rem 1rem; border: 1px solid var(--line2); z-index: 50; } .skip:focus { left: 1rem; } /* ========================================================= Nav ========================================================= */ .nav { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 62px; } .logo { display: flex; align-items: center; gap: .5rem; font-family: var(--ff-d); } .logo-mark { color: var(--acc); text-shadow: var(--glow); } .logo-text { color: var(--ink); letter-spacing: .16em; font-size: var(--s1); font-weight: 700; } .nav-links { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.9rem); } .nav-links a { font-family: var(--ff-d); font-size: var(--s0); letter-spacing: .13em; text-transform: uppercase; color: var(--dim); transition: color .18s ease, text-shadow .18s ease; } .nav-links a:hover { color: var(--acc); text-shadow: var(--glow); } .nav-live { display: inline-flex; align-items: center; gap: .45rem; color: var(--acc) !important; } .dot { width: .48rem; height: .48rem; border-radius: 50%; background: var(--acc); box-shadow: var(--glow); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .28; transform: scale(.78); } } /* ========================================================= Hero ========================================================= */ .hero { padding: clamp(4rem, 13vh, 8.5rem) 0 clamp(3.5rem, 9vh, 6rem); } .eyebrow { font-family: var(--ff-d); font-size: var(--s0); color: var(--acc); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 1.5rem; opacity: 0; animation: fade .6s ease .15s forwards; } .hero-h { font-family: var(--ff-d); font-size: var(--hero); line-height: 1.04; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1.6rem; color: var(--ink); text-shadow: var(--glow); max-width: 16ch; text-wrap: balance; min-height: 1.1em; } .caret { display: inline-block; width: .56em; height: .92em; background: var(--acc); vertical-align: -.09em; margin-left: .06em; box-shadow: var(--glow); animation: blink 1.05s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-sub { font-size: var(--s2); color: var(--dim); max-width: 56ch; margin: 0 0 2.2rem; opacity: 0; animation: fade .7s ease .5s forwards; } .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 3.4rem; opacity: 0; animation: fade .7s ease .72s forwards; } @keyframes fade { to { opacity: 1; } } .btn { font-family: var(--ff-d); font-size: var(--s1); letter-spacing: .06em; padding: .78rem 1.5rem; border-radius: var(--rad); background: var(--acc); color: var(--bg); border: 1px solid var(--acc); transition: box-shadow .2s ease, transform .2s ease; } .btn:hover { box-shadow: 0 0 1.6em -.2em var(--acc); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--acc); } .stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 6vw, 4rem); margin: 0; padding-top: 1.8rem; border-top: 1px solid var(--line); } .stats div { display: flex; flex-direction: column-reverse; gap: .2rem; } .stats dt { font-family: var(--ff-d); font-size: var(--s0); color: var(--faint); letter-spacing: .13em; text-transform: uppercase; } .stats dd { margin: 0; font-family: var(--ff-d); font-size: var(--s4); color: var(--acc); font-variant-numeric: tabular-nums; text-shadow: var(--glow); } /* ========================================================= Sections ========================================================= */ .band { padding: clamp(3.4rem, 9vh, 6rem) 0; border-top: 1px solid var(--line); } .sec-h { font-family: var(--ff-d); font-size: var(--s4); font-weight: 700; letter-spacing: -.005em; margin: 0 0 .5rem; color: var(--ink); } .sec-sub { color: var(--dim); font-size: var(--s1); margin: 0 0 2.6rem; max-width: 58ch; } .sec-head { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2.4rem; } .sec-head .sec-sub { margin-bottom: 0; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* ---- steps ---- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .steps li { border: 1px solid var(--line); background: var(--bg2); backdrop-filter: var(--panel-blur); border-radius: var(--rad); padding: 1.5rem 1.4rem; } .step-n { font-family: var(--ff-d); font-size: var(--s0); color: var(--acc); letter-spacing: .18em; } .steps h3 { font-family: var(--ff-d); font-size: var(--s3); margin: .6rem 0 .55rem; color: var(--ink); } .steps p { margin: 0; color: var(--dim); font-size: var(--s1); } /* ---- filters ---- */ .filters { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { font-family: var(--ff-d); font-size: var(--s0); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--dim); border: 1px solid var(--line); padding: .45rem .9rem; border-radius: var(--rad); cursor: pointer; transition: color .18s ease, border-color .18s ease; } .chip:hover { color: var(--acc); border-color: var(--line2); } .chip.is-on { color: var(--bg); background: var(--acc); border-color: var(--acc); } /* ---- cards ---- */ .cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); } .card { border: 1px solid var(--line); background: var(--bg2); backdrop-filter: var(--panel-blur); border-radius: var(--rad); padding: 1.4rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .card:hover { border-color: var(--line2); box-shadow: 0 0 2.2em -.9em var(--acc); transform: translateY(-3px); } .card[hidden] { display: none; } .card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .num { font-family: var(--ff-d); font-size: var(--s0); color: var(--faint); letter-spacing: .1em; } .pill { font-family: var(--ff-d); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .55rem; border-radius: var(--rad); border: 1px solid currentColor; } .pill-ok { color: var(--acc); } .pill-no { color: var(--warn); } .pill-live { color: var(--acc2); } .card h3 { font-family: var(--ff-d); font-size: var(--s3); margin: .15rem 0 0; color: var(--ink); } .wish { margin: 0; color: var(--acc); font-size: var(--s1); font-style: italic; } .card-body { margin: 0; color: var(--dim); font-size: var(--s1); flex: 1; } .card-foot { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; font-family: var(--ff-d); font-size: var(--s0); color: var(--faint); border-top: 1px solid var(--line); padding-top: .85rem; margin-top: .4rem; } .go { margin-left: auto; color: var(--acc); transition: transform .2s ease; } .card:hover .go { text-shadow: var(--glow); } /* ---- wiki ---- */ .wiki { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .wiki li { border-bottom: 1px solid var(--line); } .wiki a { display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 1.2rem; align-items: baseline; padding: 1.15rem .4rem; color: var(--ink); transition: background .2s ease, padding-left .2s ease; } .wiki a:hover { background: var(--bg2); padding-left: 1rem; } .wk-cat { font-family: var(--ff-d); font-size: var(--s0); color: var(--acc); letter-spacing: .14em; text-transform: uppercase; } .wk-t { font-size: var(--s2); } .wiki a:hover .wk-t { color: var(--acc); text-shadow: var(--glow); } .wk-m { font-family: var(--ff-d); font-size: var(--s0); color: var(--faint); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .wiki a { grid-template-columns: 1fr auto; gap: .3rem 1rem; } .wk-cat { grid-column: 1 / -1; } } /* ---- about ---- */ .about { display: grid; gap: 2.4rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } @media (max-width: 820px) { .about { grid-template-columns: 1fr; } } .about p { color: var(--dim); max-width: 62ch; } .lede { font-size: var(--s3); color: var(--ink) !important; line-height: 1.45; } .lede em { color: var(--acc); font-style: italic; } .callout { border: 1px solid var(--line2); background: var(--bg2); backdrop-filter: var(--panel-blur); border-radius: var(--rad); padding: 1.6rem 1.4rem; } .callout h3 { font-family: var(--ff-d); font-size: var(--s3); margin: 0 0 .5rem; color: var(--acc); text-shadow: var(--glow); } .callout p { margin: 0 0 1.1rem; font-size: var(--s1); } .callout .small { font-size: var(--s0); color: var(--faint); margin: 1rem 0 0; } /* ---- follow ---- */ .follow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .fbtn { border: 1px solid var(--line); background: var(--bg2); backdrop-filter: var(--panel-blur); border-radius: var(--rad); padding: 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .fbtn:hover { border-color: var(--line2); transform: translateY(-3px); box-shadow: 0 0 2em -1em var(--acc); } .fbtn-p { font-family: var(--ff-d); font-size: var(--s3); color: var(--acc); text-shadow: var(--glow); } .fbtn-m { font-size: var(--s0); color: var(--dim); } .band-end { padding-bottom: clamp(4rem, 11vh, 7rem); } /* ---- footer ---- */ .foot { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); } .foot-in { display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; font-family: var(--ff-d); font-size: var(--s0); color: var(--faint); letter-spacing: .06em; } .foot a { color: var(--dim); } .foot a:hover { color: var(--acc); } /* ========================================================= Preview-only variant switcher — delete with the markup ========================================================= */ .switch { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; font-family: var(--ff-m); } .switch-toggle { font: inherit; font-size: .8rem; cursor: pointer; background: rgba(16,18,20,.94); color: #e8ecea; border: 1px solid rgba(255,255,255,.22); padding: .6rem .95rem; border-radius: 7px; box-shadow: 0 6px 22px rgba(0,0,0,.45); } .switch-toggle b { color: #fff; } .switch-panel { position: absolute; right: 0; bottom: calc(100% + .5rem); width: 275px; background: rgba(16,18,20,.97); border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: .5rem; box-shadow: 0 10px 34px rgba(0,0,0,.55); } .switch-lbl { margin: .25rem .5rem .55rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #8b938f; } .switch-panel button { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: transparent; border: 0; border-radius: 6px; padding: .5rem .55rem; color: #e8ecea; } .switch-panel button:hover { background: rgba(255,255,255,.09); } .switch-panel b { display: block; font-size: .8rem; } .switch-panel i { display: block; font-style: normal; font-size: .7rem; color: #939b97; margin-top: .1rem; } /* ========================================================= Motion off ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } .eyebrow, .hero-sub, .hero-cta { opacity: 1; } .caret { opacity: 1; } }