/* ============================================================================ TERMINAL — web design system Shared by towerpunk.com and (later) the studio site. The whole brand derives from ONE hue triplet in :root. To re-skin for a second site, change --accent-h/s/l (and the wordmark in js/site.js). Mirrors the game's CORPO-RETRO UI system (see cybertower/CORPO_RETRO.md): one amber ladder, labels left / values right, panel chrome, no bright colors. ============================================================================ */ /* ---------------------------------------------------------------- TOKENS -- */ :root { /* THE BRAND DIAL — change these three for a new site identity */ --accent-h: 43; --accent-s: 80%; --accent-l: 48%; /* derived accent ladder (mirrors TerminalPalette roles in-game) */ --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-hero: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 11%)); --accent-label: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.58); --accent-lore: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.42); --accent-dim: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.24); --accent-wash: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08); --border: hsl(var(--accent-h) 50% 37%); --border-hi: hsl(var(--accent-h) 60% 52%); --glow: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 11%) / 0.38); /* fixed palette */ --bg: #0E0E0E; --alert: #C04030; --ok: #73B87A; /* type */ --font: "Cascadia Mono", "SF Mono", "Consolas", "DejaVu Sans Mono", monospace; --fs-micro: 10px; --fs-small: 11px; --fs-body: 13px; --fs-lead: 15px; --track: 0.08em; --track-wide: 0.14em; /* space (4px base) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --maxw: 980px; } /* Example second theme — the studio site. Set . Phosphor-green instead of amber; every component follows automatically. */ [data-theme="studio"] { --accent-h: 145; --accent-s: 42%; --accent-l: 52%; } /* ------------------------------------------------------------------ BASE -- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--accent); font-family: var(--font); font-size: var(--fs-body); letter-spacing: var(--track); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* CRT overlays — scanlines + vignette. Purely decorative, never blocks input. */ body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0,0,0,0.17) 2px 3px ); } body::after { content: ""; position: fixed; inset: 0; z-index: 91; pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.6) 100%); } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hero); } ::selection { background: var(--accent); color: var(--bg); } /* keyboard focus — the game's corner-tick convention, simplified */ :focus-visible { outline: 1px solid var(--border-hi); outline-offset: 3px; } /* --------------------------------------------------------------- LAYOUT -- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--s5); } main { flex: 1 0 auto; } .section { padding-block: var(--s7); } .section + .section { border-top: 1px solid var(--accent-dim); } .stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s6); } /* ------------------------------------------------------------ TYPE ROLES -- */ /* Mirrors the in-game text ladder: same hue, descending alpha. */ .t-hero { font-size: clamp(44px, 10vw, 96px); font-weight: 400; line-height: 1; letter-spacing: var(--track-wide); color: var(--accent-hero); text-shadow: 0 0 20px var(--glow), 0 0 64px hsl(var(--accent-h) var(--accent-s) 60% / 0.13); } .t-header { font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--accent); text-shadow: 0 0 12px var(--glow); } .t-value { color: var(--accent); } .t-label { color: var(--accent-label); text-transform: uppercase; font-size: var(--fs-small); } .t-lore { color: var(--accent-lore); } .t-dim { color: var(--accent-dim); } .t-alert { color: var(--alert); } .t-ok { color: var(--ok); } .t-up { text-transform: uppercase; } .t-small { font-size: var(--fs-small); } .t-micro { font-size: var(--fs-micro); } .lede { font-size: clamp(14px, 2.2vw, var(--fs-lead)); text-transform: uppercase; line-height: 1.6; } .prose { color: var(--accent-lore); max-width: 62ch; line-height: 1.95; } /* blinking terminal cursor */ .cursor { display: inline-block; width: 8px; height: 1em; background: var(--accent); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ------------------------------------------------------------------ NAV -- */ .nav { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; background: var(--bg); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s3); } .nav__mark { font-size: var(--fs-lead); letter-spacing: var(--track-wide); color: var(--accent-hero); text-shadow: 0 0 12px var(--glow); } .nav__links { display: flex; gap: var(--s5); flex-wrap: wrap; } .nav__link { font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-label); padding-bottom: 2px; border-bottom: 1px solid transparent; } .nav__link:hover { color: var(--accent-hero); } .nav__link[aria-current="page"] { color: var(--accent-hero); border-bottom-color: var(--border-hi); } /* ---------------------------------------------------------------- STRIP -- */ /* The thin status readout — used under nav or above footer. */ .strip { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-label); padding-block: var(--s3); border-bottom: 1px solid var(--accent-dim); } /* ---------------------------------------------------------------- PANEL -- */ /* The core container. Mirrors build_std_root/header/sep chrome in-game. */ .panel { border: 1px solid var(--border); background: var(--bg); } .panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--accent); } .panel__body { padding: var(--s4); } .panel--flush .panel__body { padding: 0; } /* ----------------------------------------------------------------- SPEC -- */ /* Key/value readout. LOCKED grammar: labels left, values right. */ .spec { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s6); font-size: var(--fs-small); text-transform: uppercase; } .spec dt { color: var(--accent-dim); } .spec dd { color: var(--accent); } @media (max-width: 560px) { .spec { grid-template-columns: 1fr; gap: 0; } .spec dt { margin-top: var(--s3); } } /* --------------------------------------------------------------- BUTTON -- */ /* Bracketed terminal buttons: write labels as [ TEXT ] in the markup. */ .btn { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--border); color: var(--accent-hero); background: transparent; font-family: var(--font); font-size: var(--fs-body); letter-spacing: var(--track); text-transform: uppercase; padding: var(--s3) var(--s5); cursor: pointer; transition: background 0.14s, text-shadow 0.14s, border-color 0.14s; } .btn:hover { background: var(--accent-wash); border-color: var(--border-hi); text-shadow: 0 0 10px var(--glow); } .btn:active { opacity: 0.7; } .btn--primary { border-color: var(--border-hi); box-shadow: inset 0 0 24px hsl(var(--accent-h) var(--accent-s) 50% / 0.06); } .btn--dim { color: var(--accent-label); } .btn--small { font-size: var(--fs-small); padding: var(--s2) var(--s3); } .btn[aria-disabled="true"], .btn:disabled { color: var(--accent-dim); border-color: var(--accent-dim); cursor: not-allowed; pointer-events: none; } .btn-row { display: flex; gap: var(--s4); flex-wrap: wrap; } /* ---------------------------------------------------------------- GRIDS -- */ .grid { display: grid; gap: var(--s4); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ----------------------------------------------------------------- CARD -- */ /* Media tile: framed thumb + caption strip. */ .card { border: 1px solid var(--border); display: flex; flex-direction: column; } .card__media { aspect-ratio: 16 / 9; background: #080808; display: grid; place-items: center; overflow: hidden; position: relative; } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__placeholder { font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-dim); text-align: center; padding: var(--s4); } .card__caption { border-top: 1px solid var(--border); padding: var(--s3) var(--s4); font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-label); display: flex; justify-content: space-between; gap: var(--s3); } a.card:hover { border-color: var(--border-hi); } a.card:hover .card__caption { color: var(--accent-hero); } /* ---------------------------------------------------------------- GAUGE -- */ /* Flush fill + same-color frame — matches the in-game GaugeBar. */ .gauge { height: 10px; border: 1px solid var(--border); background: transparent; position: relative; cursor: pointer; overflow: hidden; } .gauge__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); transition: width 0.12s linear; } .gauge--tall { height: 14px; } /* --------------------------------------------------------------- TICKER -- */ .ticker-wrap { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; white-space: nowrap; padding-block: var(--s3); font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-label); } .ticker { display: inline-block; padding-left: 100%; animation: ticker-scroll 90s linear infinite; } .ticker span { margin-right: 64px; } @keyframes ticker-scroll { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ticker { animation: none; padding-left: 0; } .cursor { animation: none; } } /* --------------------------------------------------------------- FOOTER -- */ .footer { border-top: 1px solid var(--border); margin-top: var(--s7); padding-block: var(--s5) var(--s6); font-size: var(--fs-small); text-transform: uppercase; } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); } .footer__head { color: var(--accent-dim); margin-bottom: var(--s2); } .footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--s1); } .footer__list a { color: var(--accent-label); } .footer__list a:hover { color: var(--accent-hero); } .footer__base { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--accent-dim); display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; color: var(--accent-dim); } /* ---------------------------------------------------------- AUDIO DECK -- */ /* The music player. Mirrors the in-game AUDIO DECK: spectrum VU + track list. */ .deck { display: grid; grid-template-columns: 1fr; gap: var(--s4); } @media (min-width: 760px) { .deck { grid-template-columns: 1fr 300px; align-items: start; } } .deck__now { display: flex; flex-direction: column; gap: var(--s3); } .deck__title { font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--accent-hero); text-shadow: 0 0 12px var(--glow); } .deck__meta { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-label); } .deck__vu { width: 100%; height: 108px; display: block; border: 1px solid var(--accent-dim); background: #080808; } .deck__transport { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .deck__time { font-size: var(--fs-small); color: var(--accent-label); font-variant-numeric: tabular-nums; } .tracklist { list-style: none; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .tracklist__group { padding: var(--s2) var(--s4); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--accent-dim); border-bottom: 1px solid var(--accent-dim); position: sticky; top: 0; background: var(--bg); } .track { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; padding: var(--s2) var(--s4); background: transparent; border: 0; border-bottom: 1px solid var(--accent-dim); color: var(--accent-label); font-family: var(--font); font-size: var(--fs-small); letter-spacing: var(--track); text-transform: uppercase; text-align: left; cursor: pointer; } .track:hover { background: var(--accent-wash); color: var(--accent); } .track[aria-current="true"] { color: var(--accent-hero); background: var(--accent-wash); } .track[aria-current="true"] .track__idx::before { content: "▸ "; } .track__idx { color: var(--accent-dim); margin-right: var(--s2); font-variant-numeric: tabular-nums; } .track__bpm { color: var(--accent-dim); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------- MONITOR -- */ /* The hero: an amber terminal bezel framing live footage of the world. States are driven by js/hero.js off SITE.hero — placeholder / loop / trailer. The world stays FULL COLOR inside the frame (per STYLE_BIBLE); only the chrome is amber. Scanlines cross the footage — that's what sells "screen". */ .monitor { border: 1px solid var(--border-hi); background: var(--bg); box-shadow: 0 0 40px hsl(var(--accent-h) var(--accent-s) 50% / 0.07); position: relative; } .monitor__strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--accent-label); } .monitor__rec { display: inline-flex; align-items: center; gap: var(--s2); } .monitor__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alert); animation: rec-pulse 2s ease-in-out infinite; } @keyframes rec-pulse { 50% { opacity: 0.25; } } .monitor__screen { position: relative; aspect-ratio: 16 / 9; background: #060606; overflow: hidden; } .monitor__screen > video, .monitor__screen > img, .monitor__screen > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } /* CRT treatment INSIDE the screen — denser than the page-wide overlay. */ .monitor__crt { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.22) 2px 3px), radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,0.55) 100%); box-shadow: inset 0 0 60px rgba(0,0,0,0.55), inset 0 0 140px rgba(0,0,0,0.3); } /* corner ticks — the focus marks from the game's UI */ .monitor__ticks { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .monitor__ticks::before, .monitor__ticks::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; } .monitor__ticks::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; } .monitor__ticks::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; } .monitor__placeholder { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: var(--s2); text-align: center; padding: var(--s5); font-size: var(--fs-small); text-transform: uppercase; color: var(--accent-dim); background: repeating-linear-gradient(115deg, transparent 0 22px, hsl(var(--accent-h) 40% 30% / 0.05) 22px 44px); } /* facade play control — only shown when a trailer is configured */ .monitor__play { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; transition: background 0.18s; } .monitor__play:hover { background: hsl(var(--accent-h) 60% 40% / 0.10); } .monitor__play span { border: 1px solid var(--border-hi); background: hsl(0 0% 4% / 0.72); color: var(--accent-hero); padding: var(--s3) var(--s5); font-size: var(--fs-body); text-transform: uppercase; letter-spacing: var(--track); text-shadow: 0 0 12px var(--glow); } .monitor__caption { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); border-top: 1px solid var(--border); font-size: var(--fs-micro); text-transform: uppercase; color: var(--accent-dim); } @media (prefers-reduced-motion: reduce) { .monitor__dot { animation: none; } } /* --------------------------------------------------- MEDIA GRID VARIANTS -- */ /* A 500-floor tower is a vertical subject in a horizontal medium, so the media grid deliberately mixes aspect ratios instead of forcing 16:9. */ .media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); align-items: start; } /* full-tower shot: tall slot, spans two rows on wide screens */ .card--tall .card__media { aspect-ratio: 9 / 16; } @media (min-width: 720px) { .media-grid .card--tall { grid-row: span 2; } } /* horizontal slice: the SimTower money shot */ .card--wide .card__media { aspect-ratio: 16 / 9; } @media (min-width: 720px) { .media-grid .card--wide { grid-column: span 2; } } /* room detail crop: square-ish, shows off the art */ .card--detail .card__media { aspect-ratio: 4 / 3; } .card__media img { image-rendering: auto; } /* Pixel-art crops shown at/above 1:1 should stay crisp, not smoothed. */ .card--detail .card__media img { image-rendering: pixelated; } /* --------------------------------------------------------------- UTILS -- */ .u-center { text-align: center; } .u-mt-0 { margin-top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }