/* ========================================================= STVMRGN V12 — "Arcade." Third theme layer. Applies only when carries .t-arcade (js/theme.js). Same content, same taxonomy, same set and guide and jukebox — dressed as a late-80s cartridge. Two faces: Press Start 2P for chrome and labels (small sizes only — it is a wide face), VT323 for everything you read. NES palette, square corners, pixel frames, a blinking cursor on the guide, and the set shows an 8-bit station ident (img/arcade/title.png) until you press CH. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap'); /* ---------- 1. Tokens ---------- */ html.t-arcade { --bg: #050510; --bg-panel: #0e0e24; --bg-panel-2: #141434; --bg-raise: #1c1c40; --ink: #fcfcfc; --ink-dim: #a8a8c8; --ink-quiet: rgba(168, 168, 200, 0.82); --ink-whisper: rgba(168, 168, 200, 0.5); --gold: #f8d878; --gold-bright: #ffe89c; --gold-deep: #9c8a30; --teal: #3cbcfc; --teal-bright: #7cd8fc; --teal-soft: rgba(60, 188, 252, 0.14); --teal-line: rgba(60, 188, 252, 0.6); --teal-glow: rgba(60, 188, 252, 0.0); --pink: #f83800; --violet: #b8f818; --rule: rgba(252, 252, 252, 0.28); --rule-soft: rgba(252, 252, 252, 0.16); --rule-gold: rgba(248, 216, 120, 0.6); --display: 'Press Start 2P', 'VT323', monospace; --body: 'VT323', 'Courier New', monospace; --mono: 'VT323', 'Courier New', monospace; --serif: 'VT323', monospace; --osd: 'Press Start 2P', monospace; --chrome-display: 'Press Start 2P', monospace; --neon-script: 'Press Start 2P', monospace; --script: 'VT323', monospace; --px: 4px; /* one "pixel" of chrome */ --shadow: var(--px) var(--px) 0 #000; background: var(--bg); color-scheme: dark; } /* starfield: CSS only, three layers of 1px stars */ html.t-arcade body { font-family: var(--body); font-size: 20px; line-height: 1.35; background-color: var(--bg); background-image: radial-gradient(rgba(252,252,252,0.55) 1px, transparent 1.5px), radial-gradient(rgba(60,188,252,0.5) 1px, transparent 1.5px), radial-gradient(rgba(248,216,120,0.45) 1px, transparent 1.5px); background-size: 233px 211px, 347px 301px, 419px 389px; background-position: 17px 23px, 101px 57px, 211px 131px; } html.t-arcade body::after { opacity: 0.18; } /* keep v10's scanlines, lighter */ html.t-arcade .grid-horizon::before { display: none; } /* synthwave floor is the wrong decade */ html.t-arcade body.home-page .signon, html.t-arcade body.home-page .signon::before { background: transparent; } html.t-arcade body.home-page .signon::before { display: none; } html.t-arcade * { border-radius: 0 !important; } /* ---------- 2. Type ---------- */ html.t-arcade h1, html.t-arcade h2, html.t-arcade h3, html.t-arcade h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: 1.4; color: var(--ink); text-shadow: 3px 3px 0 #000; } html.t-arcade h1 { font-size: clamp(22px, 3.2vw, 40px); } html.t-arcade h2 { font-size: clamp(16px, 2vw, 26px); } html.t-arcade h3 { font-size: clamp(12px, 1.3vw, 16px); line-height: 1.6; } html.t-arcade p, html.t-arcade li, html.t-arcade dd, html.t-arcade td { font-family: var(--body); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.35; } html.t-arcade .slug { font-family: var(--display); font-size: 9px; line-height: 1.9; letter-spacing: 0; text-transform: uppercase; color: var(--ink-dim); } html.t-arcade .slug .gold { color: var(--gold); } html.t-arcade .act-head__action { font-family: var(--body); font-size: 20px; color: var(--ink-dim); } html.t-arcade a { color: var(--teal); } html.t-arcade a:hover { color: var(--gold); } /* ---------- 3. Nav = HUD bar ---------- */ html.t-arcade .nav { background: #000; border-bottom: var(--px) solid var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 16px 0; } html.t-arcade .nav__mark { font-family: var(--display); font-size: 14px; letter-spacing: 0; color: var(--ink); text-shadow: 2px 2px 0 #000; } html.t-arcade .nav__mark-name { text-transform: uppercase; } html.t-arcade .nav__links { font-family: var(--display); font-size: 9px; letter-spacing: 0; text-transform: uppercase; gap: clamp(14px, 2.2vw, 28px); } html.t-arcade .nav__links a { color: var(--ink); border-bottom: 3px solid transparent; padding: 6px 0 4px; } html.t-arcade .nav__links a:hover { color: var(--gold); border-bottom-color: var(--gold); } html.t-arcade .nav__links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); box-shadow: none; } html.t-arcade .nav__toggle { color: var(--ink); } /* the pill: a pixel button with a blinking square */ html.t-arcade .nav__onair, html.t-arcade .theme-switch { display: inline-flex; align-items: center; gap: 8px; margin-left: clamp(18px, 3vw, 42px); margin-right: auto; padding: 7px 10px 6px 8px; border: 3px solid var(--ink); background: #000; box-shadow: var(--shadow); font-family: var(--display); font-size: 8px; letter-spacing: 0; color: var(--ink); text-transform: uppercase; cursor: pointer; filter: none; } html.t-arcade .nav__onair:hover, html.t-arcade .theme-switch:hover { color: var(--gold); border-color: var(--gold); } html.t-arcade .nav__onair i, html.t-arcade .theme-switch i { width: 8px; height: 8px; background: var(--gold); box-shadow: none; filter: none; animation: arcade-blink 1s steps(1) infinite; } html.t-arcade .nav__onair i::after { display: none; } @keyframes arcade-blink { 50% { opacity: 0; } } /* ---------- 4. Buttons ---------- */ html.t-arcade .button, html.t-arcade .tv-btn { font-family: var(--display); font-size: 9px; letter-spacing: 0; text-transform: uppercase; line-height: 1; padding: 12px 14px 11px; min-height: 0; border: 3px solid var(--ink); background: #000; color: var(--ink); box-shadow: var(--shadow); transition: none; } html.t-arcade .button:hover, html.t-arcade .tv-btn:hover { color: var(--gold); border-color: var(--gold); transform: none; box-shadow: var(--shadow); } html.t-arcade .button:active, html.t-arcade .tv-btn:active { transform: translate(var(--px), var(--px)); box-shadow: none; } html.t-arcade .button--gold { background: var(--gold); border-color: var(--gold); color: #000; } html.t-arcade .button--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #000; } /* ---------- 5. The set = the cabinet ---------- */ html.t-arcade .tv-set { background: #000; border: var(--px) solid var(--ink); padding: clamp(10px, 1.4vw, 16px); box-shadow: 0 0 0 var(--px) #000, 0 0 0 calc(var(--px) * 2) var(--teal), 12px 12px 0 calc(var(--px) * 2) #000; } html.t-arcade .tv-screen { background: #000; } html.t-arcade .tv-screen::after { background: repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 2px, transparent 2px 4px); } html.t-arcade .hero-set .tv-ident { display: none; } html.t-arcade .hero-set .tv-screen { /* zoomed a hair and anchored top so the baked-in PRESS START falls below the frame; the CSS one blinks instead */ background: #000 url('../img/arcade/title.png') 50% 0% / 110% auto no-repeat; image-rendering: pixelated; } html.t-arcade .hero-set:not([data-tuned]) .tv-screen::before { content: "PRESS CH \25B2 TO START"; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 4; padding: 8px 12px 7px; background: #000; border: 2px solid var(--ink); white-space: nowrap; font-family: var(--display); font-size: clamp(8px, 1vw, 12px); line-height: 1; color: var(--ink); animation: arcade-blink 1.1s steps(1) infinite; pointer-events: none; } html.t-arcade .tv-osd { color: var(--gold); text-shadow: 2px 2px 0 #000; } html.t-arcade .tv-osd__ch { font-size: clamp(14px, 2vw, 24px); } html.t-arcade .tv-osd__label { font-family: var(--display); font-weight: 400; font-size: clamp(7px, 0.8vw, 10px); letter-spacing: 0; line-height: 1.6; } html.t-arcade .tv-controls { gap: 12px; padding-top: 16px; } html.t-arcade .tv-controls__brand { font-family: var(--display); font-size: 8px; letter-spacing: 0; color: var(--ink-dim); } /* ---------- 6. The guide = level select ---------- */ html.t-arcade .home-guide__col { border-top: var(--px) solid var(--ink); padding-top: 14px; } html.t-arcade .home-guide__col h2 { font-size: clamp(14px, 1.6vw, 20px); margin: 4px 0 10px; } html.t-arcade .home-guide__col h2::before { content: ""; display: inline-block; width: 1.4em; height: 1.4em; margin-right: 10px; vertical-align: -0.3em; background: url('../img/arcade/tv.png') center / contain no-repeat; image-rendering: pixelated; } html.t-arcade .home-guide__col li { border-top: 2px dashed rgba(252,252,252,0.22); } html.t-arcade .home-guide__row { position: relative; grid-template-columns: 34px minmax(0, 1fr); padding: 8px 0 8px 22px; } html.t-arcade .home-guide__row::before, html.t-arcade .tv-guide__row::before { content: "\25B6"; position: absolute; left: 0; top: 10px; font-family: var(--display); font-size: 10px; color: var(--gold); opacity: 0; } html.t-arcade .home-guide__row:hover::before, html.t-arcade .home-guide__row:focus-visible::before, html.t-arcade li.is-tuned .home-guide__row::before, html.t-arcade .tv-guide__row:hover::before, html.t-arcade li.is-tuned .tv-guide__row::before { opacity: 1; animation: arcade-blink 0.8s steps(1) infinite; } html.t-arcade .home-guide__row:hover { background: transparent; } html.t-arcade .home-guide__row .ch { font-family: var(--display); font-size: 10px; color: var(--gold); } html.t-arcade .home-guide__row b { font-family: var(--body); font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1; text-transform: none; letter-spacing: 0; } html.t-arcade .home-guide__row em { font-family: var(--body); font-size: 17px; letter-spacing: 0; color: var(--ink-dim); margin-top: 1px; } html.t-arcade .home-guide__row:hover b, html.t-arcade .home-guide__row:focus-visible b { color: var(--gold); } html.t-arcade .home-guide__notes { font-family: var(--display); font-size: 8px; letter-spacing: 0; color: var(--teal); bottom: 10px; } html.t-arcade .home-guide__notes:hover { color: var(--gold); } html.t-arcade .home-guide__col li.is-tuned { box-shadow: none; background: rgba(60,188,252,0.08); } html.t-arcade .home-guide__col li.is-tuned .ch { color: var(--gold); text-shadow: none; } html.t-arcade .home-guide__col li.is-tuned b { color: var(--ink); } html.t-arcade .home-guide__col li.is-tuned em { color: var(--teal-bright); } html.t-arcade .tv-guide__daypart { font-family: var(--display); font-size: 9px; letter-spacing: 0; color: var(--gold); line-height: 1.8; } html.t-arcade .tv-guide li { border-bottom: 2px dashed rgba(252,252,252,0.22); } html.t-arcade .tv-guide__row { position: relative; padding-left: 22px; } html.t-arcade .tv-guide__row .ch { font-family: var(--display); font-size: 10px; color: var(--gold); } html.t-arcade .tv-guide__row .show { font-family: var(--body); font-size: clamp(22px, 2vw, 28px); text-transform: none; letter-spacing: 0; line-height: 1; } html.t-arcade .tv-guide__row .show small { font-family: var(--body); font-size: 17px; letter-spacing: 0; } html.t-arcade .tv-guide__row .now { font-family: var(--display); font-size: 8px; letter-spacing: 0; color: var(--gold); } html.t-arcade li.is-tuned .tv-guide__row .ch { color: var(--gold); text-shadow: none; } html.t-arcade .tv-guide__notes { font-family: var(--display); font-size: 8px; letter-spacing: 0; border-bottom: 2px solid var(--teal-line); } /* ---------- 7. Cards, images, sections ---------- */ html.t-arcade .headlines figure, html.t-arcade .craft-project__feature, html.t-arcade .intermission__art, html.t-arcade .station-card, html.t-arcade .portfolio-logo-strip img { border: var(--px) solid var(--ink); box-shadow: var(--shadow); transform: none; } html.t-arcade .intermission a:hover .intermission__art { transform: none; } html.t-arcade .headlines figure .tag, html.t-arcade .headlines--img figure .tag, html.t-arcade .craft-project__tag, html.t-arcade .case-grid__label, html.t-arcade .next-up .label, html.t-arcade .foot__row, html.t-arcade .case-hero__eyebrow > * { font-family: var(--display); font-size: 8px; letter-spacing: 0; line-height: 1.8; text-transform: uppercase; } html.t-arcade .headlines figure .tag, html.t-arcade .headlines--img figure .tag { color: var(--gold); background: #000; border-top: 3px solid var(--ink); } html.t-arcade .craft-project__tag { color: var(--teal); } html.t-arcade .case-grid__label { color: var(--gold); } html.t-arcade .headlines figcaption { font-family: var(--body); font-style: normal; font-size: 22px; } html.t-arcade .craft-project__body { font-family: var(--body); font-size: 21px; line-height: 1.35; } html.t-arcade .intermission { background: var(--bg-panel); border-top: var(--px) solid var(--ink); border-bottom: var(--px) solid var(--ink); } html.t-arcade .intermission__title { font-size: clamp(16px, 2.2vw, 28px); line-height: 1.5; } html.t-arcade .intermission__title .teal { color: var(--gold); } html.t-arcade .intermission__copy { font-family: var(--body); font-size: 21px; } html.t-arcade .fadeout { background: transparent; border-top: var(--px) solid var(--ink); } html.t-arcade .fadeout__title { font-size: clamp(18px, 3vw, 40px); line-height: 1.4; } html.t-arcade .fadeout__contacts { font-family: var(--body); font-size: 24px; text-transform: none; letter-spacing: 0; } html.t-arcade .fadeout__contacts a { color: var(--ink); border-bottom: 3px solid var(--gold); } html.t-arcade .fadeout__contacts a:hover { color: var(--gold); } html.t-arcade .next-up .title { font-family: var(--display); font-size: clamp(14px, 1.6vw, 20px); text-transform: uppercase; letter-spacing: 0; line-height: 1.5; } html.t-arcade .foot__tag { font-family: var(--display); font-size: 11px; letter-spacing: 0; } html.t-arcade .foot__row { color: var(--ink-dim); } html.t-arcade .foot p, html.t-arcade .foot a { font-family: var(--body); font-size: 19px; } html.t-arcade .case-grid__body p { font-family: var(--body); font-size: 22px; line-height: 1.3; } html.t-arcade .signon__bars { height: 10px; opacity: 1; box-shadow: var(--shadow); } html.t-arcade body.home-page .signon__bars { height: 10px; box-shadow: var(--shadow); } html.t-arcade .chrome { font-family: var(--display); font-style: normal; background: none; -webkit-text-fill-color: currentColor; color: var(--gold); filter: none; animation: none; text-shadow: 4px 4px 0 #000; } /* résumé and call-now pages: same chrome, readable body */ html.t-arcade .resume-title, html.t-arcade .resume-mantra, html.t-arcade .resume-download__link, html.t-arcade .resume-awards strong, html.t-arcade .resume-awards-marquee span, html.t-arcade .station-id__ticker { font-family: var(--display); font-size: 8px; letter-spacing: 0; line-height: 1.8; } html.t-arcade .resume-section h2 { font-size: clamp(12px, 1.4vw, 16px); } html.t-arcade .resume-timeline h3, html.t-arcade .resume-education-copy h3 { font-family: var(--body); font-size: 22px; text-transform: none; text-shadow: none; } html.t-arcade .callnow-card { border: var(--px) solid var(--ink); box-shadow: var(--shadow); } html.t-arcade .callnow-card h1 { font-size: clamp(16px, 2.4vw, 30px); line-height: 1.5; } html.t-arcade .callnow-card__screen p, html.t-arcade .callnow-card__screen a { font-family: var(--body); font-size: 22px; letter-spacing: 0; } html.t-arcade .callnow-card__fineprint { font-family: var(--display); font-size: 7px; line-height: 1.9; } /* ---------- 8. Sprites (img/arcade/sprites.png: coin · joystick · mic · clapper, one row) ---------- */ html.t-arcade .intermission__title::before, html.t-arcade .tv-guide__daypart::before { content: ""; display: inline-block; width: 1.6em; height: 1.6em; margin-right: 12px; vertical-align: -0.45em; background: url('../img/arcade/sprites.png') no-repeat; background-size: 400% auto; image-rendering: pixelated; } html.t-arcade .intermission__title::before { background-position: 33.3% 50%; } /* joystick */ html.t-arcade .tv-guide__daypart::before { background-position: 100% 50%; width: 2.2em; height: 2.2em; vertical-align: -0.8em; } /* clapper */ @media (max-width: 860px) { html.t-arcade .nav__links { font-size: 8px; } html.t-arcade .home-guide__row b { font-size: 21px; } }