/* ============================================================ A.H.A. — production stylesheet Design law (from AHA Reference): 1980s broadcast data terminal. Palette: BLACK #000000 · RED #FF0000 (loss/alert) · GREEN #00FF00 (profit/live) · BLUE #0000FF (the AI's voice only) · WHITE #FFFFFF (chrome/labels). No other hues, no smooth gradients, no glow, no shadows, no rounded corners, no anti-aliased decoration. Type: Press Start 2P = section headers / wordmark / hero numbers ONLY. VT323 = all data, labels, tickers, statuses, body copy, tables. Motion: frame-stepped only (steps()), hard cuts, ~530ms blink. Spacing: 8px grid. ============================================================ */ :root { --black: #000000; --red: #FF0000; /* price down / loss / alerts only */ --green: #00FF00; /* price up / profit / live status */ --blue: #0000FF; /* the AI — forecasts, outputs, its voice */ --white: #FFFFFF; /* chrome, labels, borders, headers */ --g: 8px; /* base grid unit */ --pixel: 'Press Start 2P', monospace; --mono: 'VT323', monospace; --maxw: 1200px; } /* ---- reset ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--black); color: var(--white); font-family: var(--mono); /* overflow-x: clip (NOT hidden): clip stops horizontal scroll without making a scroll container. `hidden` forces overflow-y to compute to `auto`, which breaks ScrollTrigger's position:fixed pin. */ overflow-x: clip; /* keep the retro edges crisp — no smoothing on the pixel art */ -webkit-font-smoothing: none; text-rendering: optimizeSpeed; } img { image-rendering: pixelated; } ::selection { background: var(--blue); color: var(--white); } a { color: var(--green); text-decoration: none; } a:hover { color: var(--white); } /* hard cut, no transition */ button { font-family: var(--mono); cursor: pointer; } /* ---- keyframes (frame-stepped only) ---- */ @keyframes aha-blink { /* ~530ms on / ~530ms off */ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes aha-track { /* one-shot horizontal tear, hard steps */ 0%, 92%, 100% { transform: translateX(0); opacity: 1; } 93% { transform: translateX(-3px); opacity: 0.85; } 95% { transform: translateX(4px); opacity: 1; } 97% { transform: translateX(-2px); opacity: 0.9; } } .blink { animation: aha-blink 1.06s steps(1) infinite; } /* ============================================================ GLOBAL CHROME ============================================================ */ /* single subtle scanline overlay — one per page, max */ #scanlines { position: fixed; inset: 0; z-index: 400; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,0.18) 3px 4px ); } .wrap { max-width: var(--maxw); margin: 0 auto; } /* teletext block divider */ .rule { height: 12px; background: repeating-linear-gradient(90deg, var(--white) 0 24px, var(--black) 24px 36px); } .rule--rainbow { height: 12px; background: repeating-linear-gradient(90deg, var(--blue) 0 20px, var(--black) 20px 28px, var(--red) 28px 48px, var(--black) 48px 56px, var(--green) 56px 76px, var(--black) 76px 84px, var(--white) 84px 104px, var(--black) 104px 112px); } /* ---- status bar (live chrome) ---- */ #statusbar { position: sticky; top: 0; z-index: 100; background: var(--black); border-bottom: 2px solid var(--white); } #statusbar .bar { max-width: var(--maxw); margin: 0 auto; padding: 8px clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .wordmark { font-family: var(--pixel); font-size: 15px; color: var(--white); letter-spacing: 0; line-height: 1.4; } .wordmark .dot { color: var(--blue); } .sb-meta { font-size: 20px; color: var(--white); opacity: 0.7; letter-spacing: 1px; } .sb-meta .live { color: var(--green); } .sb-clock { font-size: 20px; letter-spacing: 1px; color: var(--white); } .sb-market--open { color: var(--green); } .sb-market--closed { color: var(--red); } .nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 21px; letter-spacing: 1px; } .nav a { color: var(--green); } .nav a:hover { color: var(--white); } /* buy button — green fill, black text, hard hover to white */ .btn-buy { background: var(--green); color: var(--black) !important; padding: 8px 16px; font-family: var(--mono); font-size: 18px; letter-spacing: 1px; border: 2px solid var(--green); } .btn-buy:hover { background: var(--white); border-color: var(--white); color: var(--black) !important; } /* ============================================================ SECTIONS ============================================================ */ section { max-width: var(--maxw); margin: 0 auto; padding: clamp(24px,5vw,64px) clamp(16px,4vw,48px); } .kicker { font-size: 20px; letter-spacing: 2px; color: var(--green); margin-bottom: 8px; } h1, h2 { margin: 0; } h2.section-head { font-family: var(--pixel); font-size: clamp(20px, 3.4vw, 32px); color: var(--white); line-height: 1.25; margin: 0 0 8px; } .section-lede { font-size: 24px; margin: 0 0 24px; opacity: 0.8; line-height: 1.15; } /* ============================================================ HERO ============================================================ */ .hero { padding: clamp(32px,6vw,72px) clamp(16px,4vw,48px); } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; } .hero-eyebrow { font-size: 20px; letter-spacing: 2px; color: var(--white); opacity: 0.6; margin-bottom: 16px; } h1.hero-mark { font-family: var(--pixel); font-size: clamp(34px, 7vw, 72px); line-height: 1.15; color: var(--white); } h1.hero-mark .dot { color: var(--blue); } .hero-tag { font-family: var(--mono); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.05; margin: 0 0 16px; color: var(--green); } .hero-copy { font-size: 24px; line-height: 1.25; margin: 0 0 32px; color: var(--white); opacity: 0.88; max-width: 52ch; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; } .btn { font-family: var(--mono); font-size: 24px; letter-spacing: 1px; padding: 16px 24px; border: 2px solid transparent; display: inline-block; } .btn--green { background: var(--green); color: var(--black) !important; border-color: var(--green); } .btn--green:hover { background: var(--white); border-color: var(--white); color: var(--black) !important; } .btn--ghost { border-color: var(--white); color: var(--white) !important; } .btn--ghost:hover { background: var(--white); color: var(--black) !important; } /* live tape panel */ .panel { border: 2px solid var(--white); background: var(--black); position: relative; overflow: hidden; } .panel--blue { border-color: var(--blue); } .panel-head { background: var(--white); color: var(--black); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; } .panel-head .ph-title { font-family: var(--mono); font-size: 22px; letter-spacing: 1px; } .panel-head .ph-live { font-size: 20px; letter-spacing: 1px; } .tape-body { padding: 16px; display: flex; gap: 16px; align-items: flex-start; } #hero-bot { display: grid; grid-template-columns: repeat(16, 1fr); width: 120px; flex: 0 0 auto; } #hero-bot > div { aspect-ratio: 1; } .tape-chartwrap { flex: 1; min-width: 0; } .tape-chartwrap .lbl { display: flex; justify-content: space-between; font-size: 20px; color: var(--white); opacity: 0.7; margin-bottom: 8px; } .tape-chartwrap .lbl .fv { color: var(--blue); opacity: 1; } #hero-chart { display: grid; width: 100%; } #hero-chart > div { aspect-ratio: 1; } .tape-ticker { border-top: 2px solid var(--white); padding: 8px 16px; font-size: 22px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; } .tape-status { border-top: 2px solid var(--white); padding: 8px 16px; font-size: 24px; letter-spacing: 1px; color: var(--green); } .up { color: var(--green); } .down { color: var(--red); } .ai { color: var(--blue); } /* ============================================================ THE NIGHT SHIFT — canvas scrollimation Pinned stage + scrubbed canvas scene. Captions are positioned and styled inline by app.js (they ride the layout gutters). ============================================================ */ /* full-bleed: override the generic `section` max-width/padding */ #nightshift { position: relative; background: var(--black); max-width: none; margin: 0; padding: 0; } #ns-stage { position: relative; width: 100%; height: 100vh; background: var(--black); overflow: hidden; } #ns-title { position: absolute; top: 0; left: 0; right: 0; height: 8%; max-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 5; pointer-events: none; } #ns-title .ns-t1 { font-family: var(--pixel); color: var(--white); font-size: clamp(9px, 1.5vw, 18px); letter-spacing: 2px; } /* the acronym, spelled out */ #ns-title .ns-t2 { font-family: var(--mono); color: var(--white); opacity: 0.65; font-size: clamp(8px, 0.9vw, 13px); letter-spacing: 2px; white-space: nowrap; } /* DASHBOARD button — app.js parks it above the sleeping robot's head */ #ns-dash { position: absolute; display: none; z-index: 7; font-family: var(--mono); font-size: clamp(16px, 1.4vw, 22px); letter-spacing: 1px; background: var(--green); color: var(--black) !important; border: 2px solid var(--green); padding: 4px 14px; white-space: nowrap; pointer-events: auto; } #ns-dash:hover { background: var(--white); border-color: var(--white); color: var(--black) !important; } /* once the scene reaches the looping phase the button pops to a full CTA */ #ns-dash.loop { font-size: clamp(20px, 2vw, 30px); padding: 10px 26px; border: 3px solid var(--white); } /* one-shot, frame-stepped pop — no smooth easing */ @keyframes ns-dash-pop { 0% { transform: translate(-50%, -100%) scale(0.4); } 50% { transform: translate(-50%, -100%) scale(1.25); } 100% { transform: translate(-50%, -100%) scale(1); } } #ns-dash.pop { animation: ns-dash-pop 0.25s steps(3) 1; } #ns-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #ns-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--mono); color: var(--white); font-size: 18px; opacity: 0.65; z-index: 5; pointer-events: none; } /* mobile fallback: six stacked static canvases, built by app.js */ #ns-fallback { display: none; background: var(--black); } /* ============================================================ THE FEE ============================================================ */ .fee { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px,3vw,40px); align-items: center; border: 2px solid var(--white); padding: clamp(16px,3vw,40px); background: var(--black); } .fee-num { font-family: var(--pixel); font-size: clamp(48px,9vw,90px); color: var(--white); line-height: 1; } .fee-num .pct { color: var(--blue); } .fee-sub { font-size: 24px; opacity: 0.8; margin-top: 8px; } .fee-bar { display: flex; height: 32px; border: 2px solid var(--white); margin-bottom: 16px; } .fee-bar .treasury { flex: 2; background: var(--blue); } .fee-bar .ops { flex: 1; background: var(--white); } .fee-legend { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 8px; } .swatch { width: 20px; height: 20px; display: inline-block; } .swatch--blue { background: var(--blue); } .swatch--white { background: var(--white); } .fee-legend b { font-weight: 400; } .fee-legend .b { color: var(--blue); } .fee-note { font-size: 22px; opacity: 0.7; margin: 16px 0 0; } /* ============================================================ HONEST PANEL + mascot states ============================================================ */ .honest { border: 2px solid var(--white); background: var(--black); padding: clamp(24px,4vw,40px); } .honest-head { font-family: var(--pixel); font-size: clamp(15px,2.6vw,22px); color: var(--white); margin-bottom: 8px; line-height: 1.4; } .honest-list { display: flex; flex-direction: column; gap: 16px; font-size: 24px; line-height: 1.25; max-width: 74ch; margin-top: 24px; } .honest-list .row { display: flex; gap: 16px; } .honest-list .row .gt { color: var(--white); opacity: 0.5; } .honest-mascots { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; } .mascot-state { border: 2px solid var(--white); background: var(--black); padding: 16px; display: flex; flex-direction: column; align-items: center; width: 200px; position: relative; } .mascot-state .ms-top { width: 100%; display: flex; justify-content: space-between; font-size: 18px; color: var(--white); opacity: 0.55; margin-bottom: 8px; } .mascot-grid { display: grid; grid-template-columns: repeat(16, 1fr); width: 160px; margin: 8px 0 16px; } .mascot-grid > div { aspect-ratio: 1; } .mascot-state .ms-title { font-family: var(--mono); font-size: 22px; letter-spacing: 1px; line-height: 1.1; text-align: center; } .mascot-state .ms-sub { font-size: 19px; opacity: 0.85; margin-top: 8px; text-align: center; line-height: 1.1; } /* ============================================================ FOOTER ============================================================ */ footer { border-top: 2px solid var(--white); background: var(--black); margin-top: 24px; } footer .foot { max-width: var(--maxw); margin: 0 auto; padding: clamp(24px,5vw,56px) clamp(16px,4vw,48px); } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px,4vw,48px); } .foot-mark { font-family: var(--pixel); font-size: 15px; color: var(--white); margin-bottom: 16px; } .foot-mark .dot { color: var(--blue); } .foot p { font-size: 22px; opacity: 0.75; margin: 0; max-width: 34ch; } .foot-col .h { font-size: 22px; letter-spacing: 1px; color: var(--white); opacity: 0.6; margin-bottom: 16px; } .foot-col .line { font-size: 21px; line-height: 1.5; } .foot-col .addr { color: var(--green); word-break: break-all; } .foot-col .muted { opacity: 0.6; } .foot-links { display: flex; flex-direction: column; gap: 8px; font-size: 22px; } .foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 19px; opacity: 0.55; margin-top: 16px; } /* ============================================================ LOADER overlay (single gate — intro removed) ============================================================ */ #loader-overlay { position: fixed; inset: 0; z-index: 500; background: var(--black); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 40px; } #loader-overlay.hidden { display: none; } #ql-title { font-family: var(--mono); font-size: 24px; color: var(--white); letter-spacing: 1px; } #ql-bar { font-family: var(--mono); font-size: 26px; letter-spacing: 1px; color: var(--white); white-space: pre; line-height: 1; } #ql-bot { display: grid; grid-template-columns: repeat(16, 1fr); width: 176px; } #ql-bot > div { aspect-ratio: 1; } #ql-status { font-family: var(--mono); font-size: 24px; letter-spacing: 1px; height: 28px; display: flex; align-items: center; } /* ============================================================ RESPONSIVE — mobile single column, same grid discipline ============================================================ */ @media (max-width: 767px) { .nav { width: 100%; margin-left: 0; margin-top: 8px; gap: 16px; font-size: 19px; } .hero-grid { grid-template-columns: 1fr; } .tape-body { flex-direction: column; align-items: center; } #hero-bot { width: 96px; } .tape-chartwrap { width: 100%; } .honest-mascots { justify-content: center; } .mascot-state { width: 100%; max-width: 280px; } .sb-meta, .sb-clock { font-size: 18px; } /* night shift: app.js swaps the pinned stage for stacked static canvases */ #ns-stage { display: none; } #ns-fallback { display: block; } }