/* ========================================================================== STELLA'S NEON NIGHT (site skin, loaded after styles.css) Built from the 2021 Stella's Brand Guide: cyan / magenta / yellow / plum, the neon script sign, the gold tokens and the room itself. Guide: prototypes/rebrand/brand.html Pages opt in with . That class replaces "terminal-ui", which switches off every phosphor / design-system / polish rule in styles.css (all 1,200+ of them are scoped to body.terminal-ui). What stays underneath is the base arcade layer (map, modal, cabinets, menus), which this file restyles. Faces: Nunito (for Omnes) + Silkscreen (for LoRes). No card grids, no category chips, no fake numbering, no terminal chrome. ========================================================================== */ body.neon { color-scheme: dark; /* Brand four, straight from the 2021 guide */ --cyan: #03eeff; --magenta: #fe20e1; --yellow: #f6e62b; --plum: #3c1850; /* The basement at night */ --night: #12061f; --night-2: #1c0a30; --plum-hi: #5a2a7a; --gold: #e8b23a; --ink: #fbf6ff; --ink-2: #d5c4ee; --ink-3: #9a86ba; --line: rgba(255, 255, 255, 0.09); --f-display: "Nunito", "Omnes", "Arial Rounded MT Bold", system-ui, sans-serif; --f-pixel: "Silkscreen", "LoRes 9 OT", ui-monospace, monospace; --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem); --step-0: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); --step-1: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); --step-2: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem); --step-3: clamp(2.3rem, 1.7rem + 3vw, 4.4rem); --step-4: clamp(3rem, 1.9rem + 5.6vw, 7.2rem); --gutter: clamp(16px, 4vw, 56px); --wrap: 1240px; --s: 4px; /* Remap the base layer's tokens onto the brand */ --bb-yellow: var(--yellow); --bb-red-bright: var(--magenta); --red: var(--magenta); --neon-green: var(--cyan); --neon-blue: var(--cyan); --neon-purple: var(--magenta); --neon-pink: var(--magenta); --pillar-arcade: var(--cyan); --pillar-comedy: var(--magenta); --pillar-bar: var(--magenta); --pillar-burgers: var(--yellow); --crt: var(--night-2); --font-display: var(--f-pixel); --font-heavy: var(--f-display); --font-body: var(--f-body); --font-mono: var(--f-body); --shadow-pixel-sm: none; --shadow-pixel-md: none; --shadow-pixel-lg: none; --shadow-pixel-red: none; --shadow-pixel-yellow: none; margin: 0; background: radial-gradient(70vw 50vw at -10% -8%, rgba(254, 32, 225, 0.2), transparent 60%), radial-gradient(60vw 45vw at 110% 60%, rgba(3, 238, 255, 0.1), transparent 60%), var(--night); background-attachment: fixed; color: var(--ink); font: 500 var(--step-0)/1.6 var(--f-body); overflow-x: clip; } html:has(body.neon) { background: #12061f; } /* Lock the page behind the game viewer and any other full-screen overlay */ html:has(body.neon.arcade-modal-open), body.neon.arcade-modal-open, html:has(body.neon.photo-lightbox-open) { overflow: hidden; } body.neon img { max-width: 100%; } body.neon :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; } body.neon ::selection { background: var(--magenta); color: #fff; } /* The shell: full width, content wrapped inside sections */ body.neon > .game { max-width: none; padding: 0; } body.neon main { display: block; } body.neon .skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--yellow); color: var(--night); padding: 10px 14px; font-weight: 800; } body.neon .skip-link:focus { left: 8px; } /* ========================================================================== COMPONENTS ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .room { position: relative; isolation: isolate; background: radial-gradient(60vw 50vw at -10% -5%, rgba(254, 32, 225, 0.24), transparent 60%), radial-gradient(55vw 45vw at 110% 105%, rgba(3, 238, 255, 0.16), transparent 60%), radial-gradient(1px 1px at 12px 12px, rgba(255, 255, 255, 0.07) 1px, transparent 1.5px) 0 0 / 24px 24px, linear-gradient(180deg, var(--night-2), var(--night) 70%); } /* GLITCH: heavy italic with a cyan / magenta split. The shouting voice. */ .glitch { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.92; color: var(--ink); text-shadow: -0.05em 0.02em 0 var(--cyan), 0.05em -0.02em 0 var(--magenta); text-wrap: balance; margin: 0; } /* MARQUEE: pixel type, cyan to magenta, with a yellow edge. One per page. */ .marquee { font-family: var(--f-pixel); font-weight: 700; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.02em; margin: 0; background: linear-gradient(180deg, var(--cyan) 0%, #7fb4ff 42%, var(--magenta) 58%, #ff5fd9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0.045em 0.045em 0 var(--yellow)) drop-shadow(0.03em 0.03em 0 #e0662a) drop-shadow(0 0 0.35em rgba(254, 32, 225, 0.35)); } .n-eyebrow { font: 700 var(--step--1)/1.2 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan); display: inline-flex; align-items: center; gap: 0.6em; margin: 0; } .n-eyebrow.y { color: var(--yellow); } .n-eyebrow.m { color: var(--magenta); } .lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin: 0; } .n-body { color: var(--ink-2); max-width: 60ch; margin: 0; } .fine { font: 700 0.78rem/1.4 var(--f-pixel); letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; } .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* Pixel icons (neon.js paints ) */ .px { display: inline-block; width: 1.4em; line-height: 0; flex: none; } .px svg { width: 100%; height: auto; } .px.lg { width: 3.2rem; } .px.xl { width: 5rem; } /* Pixel buttons: stepped corners, lit top edge, shaded bottom edge. Works on a bare element; a child is optional. */ body.neon .btn, body.neon a.btn, body.neon button.btn { --btn: var(--yellow); --btn-ink: var(--night); display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; padding: 0.95em 1.5em 1.05em; border: 0; border-radius: 0; background: var(--btn); color: var(--btn-ink); font: 700 0.98rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; cursor: pointer; clip-path: polygon( calc(var(--s) * 2) 0, calc(100% - var(--s) * 2) 0, calc(100% - var(--s) * 2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s) * 2), 100% calc(var(--s) * 2), 100% calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s) * 2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s) * 2) calc(100% - var(--s)), calc(100% - var(--s) * 2) 100%, calc(var(--s) * 2) 100%, calc(var(--s) * 2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s) * 2), 0 calc(100% - var(--s) * 2), 0 calc(var(--s) * 2), var(--s) calc(var(--s) * 2), var(--s) var(--s), calc(var(--s) * 2) var(--s)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.26); transition: transform 0.12s ease, filter 0.12s ease; -webkit-text-stroke: 0; text-shadow: none; } body.neon .btn > span { display: contents; } body.neon .btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.26); } body.neon .btn:active { transform: translateY(1px); box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.2); } body.neon .btn::before, body.neon .btn::after { content: none; } body.neon .btn.cyan, body.neon .btn.secondary { --btn: var(--cyan); } body.neon .btn.magenta { --btn: var(--magenta); --btn-ink: #fff; } body.neon .btn.ghost { --btn: transparent; --btn-ink: var(--ink); background: transparent; box-shadow: inset 0 0 0 3px var(--ink-3); } body.neon .btn.ghost:hover { box-shadow: inset 0 0 0 3px var(--ink); } body.neon .btn.sm { padding: 0.72em 1.05em 0.8em; font-size: 0.82rem; } /* Open-now status (neon.js + app.js paint it) */ .status { display: inline-flex; align-items: center; gap: 0.55em; font: 700 0.8rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); } .status::before { content: ""; width: 10px; height: 10px; background: var(--cyan); box-shadow: 0 0 0 3px rgba(3, 238, 255, 0.2), 0 0 12px var(--cyan); } .status.closed::before { background: var(--ink-3); box-shadow: none; } /* Pixel meter, for real quantities only */ .meter { --fill: var(--magenta); display: flex; align-items: center; gap: 10px; } .meter .track { flex: 1; height: 22px; padding: 3px; background: var(--night); box-shadow: 0 0 0 3px var(--ink-3); clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); } .meter .track i { display: block; height: 100%; background: var(--fill); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.25); } .meter.cyan { --fill: var(--cyan); } .meter.yellow { --fill: var(--yellow); } /* Neon logo. The vector sign is a mask so it can be lit in any brand color. Glow lives on the wrapper: a filter on a masked element is masked away. Named .neon-sign so it never matches : a filter on body turns it into the containing block for every fixed element. */ .neon-sign { --tube: var(--magenta); display: block; filter: drop-shadow(0 0 1px var(--tube)) drop-shadow(0 0 6px var(--tube)) drop-shadow(0 0 18px var(--tube)) drop-shadow(0 0 42px color-mix(in srgb, var(--tube) 60%, transparent)); } .neon-sign.cyan { --tube: var(--cyan); } .neon-sign.yellow { --tube: var(--yellow); } .neon-sign > .logo { background: color-mix(in srgb, #fff 45%, var(--tube)); } .logo { display: block; width: 100%; aspect-ratio: 720 / 395; background: currentColor; -webkit-mask: url(/site-assets/web/stellas-logo.svg) center / contain no-repeat; mask: url(/site-assets/web/stellas-logo.svg) center / contain no-repeat; } @keyframes tube-on { 0%, 8% { opacity: 0.15; } 10% { opacity: 1; } 12% { opacity: 0.3; } 18%, 100% { opacity: 1; } } .flicker { animation: tube-on 1.6s steps(1, end) 0.2s both; } /* Screens: games and photos in a glowing, slightly tilted frame */ .screen { --tilt: -3deg; --glow: var(--cyan); position: relative; border-radius: 22px; padding: 10px; background: linear-gradient(160deg, #2b1442, #0b0414); box-shadow: 0 0 0 2px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 36px color-mix(in srgb, var(--glow) 35%, transparent), 0 30px 60px -20px rgba(0, 0, 0, 0.8); transform: rotate(var(--tilt)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .screen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--night); display: block; } .screen::after { content: ""; position: absolute; inset: 10px; border-radius: 14px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.45)); } .screen.m { --glow: var(--magenta); --tilt: 2.5deg; } .screen.y { --glow: var(--yellow); } a:hover > .screen, .screen:hover { transform: rotate(0deg) scale(1.015); } /* Floaters: stars, rings, falling blocks */ .floaters { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .floaters > * { position: absolute; animation: bob 6s ease-in-out infinite; } .floaters > :nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; } .floaters > :nth-child(3n) { animation-duration: 9s; animation-delay: -4s; } .f-star { width: 26px; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); } .f-star.sm { width: 14px; opacity: 0.8; } .f-ring { width: 54px; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; opacity: 0.85; } .f-ring.m { border-color: var(--magenta); } .f-ring.c { border-color: var(--cyan); } .f-dot { width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--magenta); opacity: 0.7; } .f-tet { width: 60px; line-height: 0; } .f-tet svg { width: 100%; height: auto; } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 8deg)); } } @media (max-width: 700px) { .floaters .f-tet, .floaters .f-star.sm { display: none; } .floaters { opacity: 0.6; } } /* ========================================================================== HEADER (the .hud markup app.js drives, restyled) ========================================================================== */ body.neon .masthead-brand, body.neon .ticker, body.neon .now-bar, body.neon .hud .right-cell .stat, body.neon .sprite-scene { display: none !important; } body.neon .hud { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; margin: 0; height: auto; min-height: 72px; display: flex; align-items: center; gap: 26px; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); background: color-mix(in srgb, var(--night) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; } body.neon .hud::before, body.neon .hud::after { content: none; } /* The square PNG is swapped for the lit vector sign */ body.neon .hud .logo-cell { flex: none; width: 118px; aspect-ratio: 720 / 395; padding: 0; border: 0; background: none; position: relative; filter: drop-shadow(0 0 1px var(--magenta)) drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 16px color-mix(in srgb, var(--magenta) 70%, transparent)); } body.neon .hud .logo-cell::before { content: ""; position: absolute; inset: 0; background: #ff9cf3; -webkit-mask: url(/site-assets/web/stellas-logo.svg) center / contain no-repeat; mask: url(/site-assets/web/stellas-logo.svg) center / contain no-repeat; } body.neon .hud .logo-cell > * { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.neon .hud nav { display: flex; gap: 22px; align-items: center; justify-content: flex-start; flex: 1; min-width: 0; } body.neon .hud nav a { font: 800 0.98rem/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink-2); padding: 8px 0; border: 0; background: none; gap: 4px; } body.neon .hud nav a::before { content: none; } body.neon .hud nav a:hover, body.neon .hud nav a.active { color: #fff; background: none; text-shadow: -1px 0 var(--cyan), 1px 0 var(--magenta); } body.neon .hud nav .caret { font-size: 0.7em; opacity: 0.6; } body.neon .hud .nav-group { position: relative; display: flex; align-items: center; } body.neon .hud .nav-submenu { background: var(--night-2); border: 0; border-radius: 14px; padding: 10px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -10px rgba(0, 0, 0, 0.7); min-width: 200px; } body.neon .hud .nav-submenu a { display: block; padding: 10px 12px; border-radius: 8px; } body.neon .hud .nav-submenu a:hover { background: rgba(255, 255, 255, 0.05); } body.neon .hud .right-cell { display: flex; align-items: center; gap: 16px; margin-left: auto; border: 0; background: none; padding: 0; } body.neon .hud .btn-order { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.72em 1.05em 0.8em; background: var(--yellow); color: var(--night); border: 0; border-radius: 0; font: 700 0.82rem/1 var(--f-pixel); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.26); animation: none; } body.neon .hud .btn-order::before, body.neon .hud .btn-order::after { content: none; } /* Status chip app.js injects */ body.neon .hud .hud-status { order: 3; display: inline-flex; align-items: center; gap: 0.55em; font: 700 0.8rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: none; border: 0; padding: 0; margin-left: auto; white-space: nowrap; } body.neon .hud .hud-status .now-bar__lamp { width: 10px; height: 10px; border-radius: 0; background: var(--cyan); box-shadow: 0 0 0 3px rgba(3, 238, 255, 0.2), 0 0 12px var(--cyan); animation: none; } body.neon .hud .hud-status[data-open-status="closed"] .now-bar__lamp { background: var(--ink-3); box-shadow: none; } body.neon .hud .hud-status .hud-status__hours { display: none; } body.neon .hud .logo-cell { order: 1; } body.neon .hud nav { order: 2; } body.neon .hud .right-cell { order: 4; margin-left: 0; } body.neon .hud .hud-call { order: 5; display: none; } body.neon .hud .nav-toggle { order: 6; } body.neon .nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 42px; padding: 0; background: transparent; color: var(--ink); border: 0; border-radius: 0; box-shadow: inset 0 0 0 3px var(--ink-3); font-size: 20px; } body.neon .nav-toggle:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px var(--ink); } @media (max-width: 1060px) { body.neon .hud { gap: 14px; min-height: 64px; flex-wrap: wrap; } body.neon .hud .logo-cell { width: 96px; } body.neon .nav-toggle { display: inline-flex; } body.neon .hud nav { display: none; order: 9; flex-basis: 100%; } body.neon .hud.nav-open nav { display: grid; gap: 0; padding: 6px 0 22px; position: static; background: none; border: 0; } body.neon .hud.nav-open nav a { font-size: 1.5rem; font-style: italic; font-weight: 900; text-transform: uppercase; padding: 10px 0; color: var(--ink); } body.neon .hud .nav-group { display: contents; } body.neon .hud .nav-group > a .caret { display: none; } body.neon .hud .nav-submenu { display: contents !important; position: static; box-shadow: none; background: none; padding: 0; } body.neon .hud .nav-submenu a { font-size: 1.1rem !important; padding: 8px 0 8px 18px !important; font-style: normal !important; color: var(--ink-2) !important; } body.neon .hud .nav-submenu a:first-child { display: none; } body.neon .hud .hud-status { margin-left: auto; } } @media (max-width: 560px) { body.neon .hud .hud-status [data-open-text] { font-size: 0.72rem; } body.neon .hud .btn-order { padding: 0.7em 0.8em; } } /* Phone action bar app.js injects at the bottom */ body.neon .action-bar { display: none; } @media (max-width: 860px) { body.neon .action-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--night) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } body.neon .action-bar a { display: flex; align-items: center; justify-content: center; min-height: 44px; font: 700 0.78rem/1 var(--f-pixel); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 2px var(--ink-3); border: 0; } body.neon .action-bar a.primary { background: var(--yellow); color: var(--night); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.26); } body.neon footer { padding-bottom: 96px !important; } } /* ========================================================================== LEGACY CONTENT (the shared page components, restyled) ========================================================================== */ /* Main column for pages still built from panels */ body.neon main > .title-screen, body.neon main > .panel, body.neon main > section:not(.full), body.neon main > div:not(.full):not(.title-screen), body.neon main > p, body.neon main > details, body.neon main > nav { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* Hero */ body.neon .title-screen { --hero-art: none; position: relative; isolation: isolate; overflow: hidden; max-width: none !important; margin: 0 0 clamp(20px, 3vw, 40px); padding: clamp(64px, 10vw, 150px) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) clamp(48px, 7vw, 96px) !important; border: 0; text-align: left; background: linear-gradient(90deg, rgba(18, 6, 31, 0.94) 0%, rgba(18, 6, 31, 0.72) 48%, rgba(18, 6, 31, 0.35) 100%), linear-gradient(0deg, var(--night) 0%, transparent 45%), var(--hero-art) center / cover no-repeat, radial-gradient(60vw 50vw at -10% -5%, rgba(254, 32, 225, 0.3), transparent 60%), var(--night-2); } body.neon .title-screen::before, body.neon .title-screen::after { content: none; } body.neon .title-screen .hs { display: none; } body.neon .title-screen h1 { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--step-4); line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); -webkit-text-stroke: 0; text-shadow: -0.05em 0.02em 0 var(--cyan), 0.05em -0.02em 0 var(--magenta); max-width: 14ch; margin: 0; } body.neon .title-screen h1 em { display: block; font-style: italic; color: var(--ink); text-shadow: inherit; } body.neon .title-screen h1.long { font-size: var(--step-4); line-height: 0.9; } body.neon .title-screen .tagline { font: 800 var(--step-1)/1.4 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--ink-2); max-width: 40ch; margin-top: clamp(18px, 2.4vw, 28px); } body.neon .title-screen .tagline em { color: var(--yellow); font-style: normal; } body.neon .title-screen .press { font: 700 0.9rem/1 var(--f-pixel); color: var(--cyan); animation: none; } body.neon .title-screen .btn, body.neon .title-screen .row { margin-top: 26px; } /* Panels become open sections: no borders, no boxes */ body.neon .panel { margin-top: 0; margin-bottom: 0; padding-block: clamp(44px, 6vw, 88px); background: none; border: 0; box-shadow: none; border-radius: 0; } body.neon .panel::before, body.neon .panel::after { content: none; } body.neon .panel + .panel { border-top: 1px solid var(--line); } body.neon .panel-header { display: block; border: 0; padding: 0; margin: 0 0 clamp(24px, 3.4vw, 40px); } body.neon .panel-header h2 { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--step-3); line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; color: var(--ink); text-shadow: -0.05em 0.02em 0 var(--cyan), 0.05em -0.02em 0 var(--magenta); text-wrap: balance; max-width: 22ch; } body.neon .panel-header h2 em { font-style: italic; color: var(--ink); } body.neon .panel-header .round { display: none; } /* Photo + copy splits */ body.neon .split { gap: clamp(28px, 5vw, 72px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } body.neon .split .portrait { min-height: clamp(320px, 38vw, 520px); border: 0; border-radius: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 55%, transparent), 0 0 40px color-mix(in srgb, var(--magenta) 28%, transparent), 0 30px 60px -20px rgba(0, 0, 0, 0.8); transform: rotate(-2deg); image-rendering: auto; } body.neon .split .portrait::after { background: linear-gradient(180deg, transparent 55%, rgba(18, 6, 31, 0.55)); border-radius: 22px; } body.neon .split .portrait .stage-num { display: none; } body.neon .split .portrait .pin { left: 18px; bottom: 18px; background: var(--yellow); color: var(--night); border: 0; padding: 9px 13px 10px; font: 700 0.82rem/1 var(--f-pixel); letter-spacing: 0.05em; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--night); } body.neon .split .info-side { gap: 16px; padding: 0; } body.neon .eye { font: 700 var(--step--1)/1.2 var(--f-pixel); letter-spacing: 0.08em; color: var(--cyan); } body.neon h3.pillar { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--step-2); line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-shadow: -0.04em 0.015em 0 var(--cyan), 0.04em -0.015em 0 var(--magenta); } body.neon .body-copy { font: 500 var(--step-0)/1.62 var(--f-body); letter-spacing: 0; color: var(--ink-2); max-width: 62ch; } body.neon .body-copy b, body.neon .body-copy strong { color: var(--ink); font-weight: 800; } body.neon .body-copy a { color: var(--cyan); } body.neon .body-copy [style*="color:var(--yellow)"] { color: var(--yellow) !important; } /* Stat boxes become a quiet fact row */ body.neon .stats { gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } body.neon .stat-box { background: none; border: 0; padding: 0 0 0 14px; border-left: 3px solid var(--magenta); } body.neon .stat-box:nth-child(2n) { border-left-color: var(--cyan); } body.neon .stat-box:nth-child(3n) { border-left-color: var(--yellow); } body.neon .stat-box .l { font: 700 0.72rem/1.3 var(--f-pixel); letter-spacing: 0.06em; color: var(--ink-3); } body.neon .stat-box .v { font: 900 italic var(--step-1)/1.05 var(--f-display); color: var(--ink); margin-top: 6px; } body.neon .stat-box .bars { display: none; } /* Pillar / stage cards: no boxes, photo + name */ body.neon .stage-grid { gap: clamp(20px, 3vw, 36px); } body.neon .stage { background: none; border: 0; } body.neon .stage:hover { transform: none; } body.neon .stage .pic { border-radius: 18px; overflow: hidden; border: 0; } body.neon .stage .pic::after { background: linear-gradient(180deg, transparent 50%, rgba(18, 6, 31, 0.5)); } body.neon .stage .tag { display: none; } body.neon .stage .info { background: none; border: 0; padding: 14px 0 0; } body.neon .stage .nm { font: 900 italic var(--step-1)/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); letter-spacing: 0; } body.neon .stage .sub { font: 500 0.98rem/1.45 var(--f-body); color: var(--ink-2); letter-spacing: 0; text-transform: none; } body.neon .stage .lvl { display: none; } body.neon .stage .pr { font: 900 italic 1.2rem/1 var(--f-display); color: var(--yellow); } /* Menus: dotted-leader rows, no bordered blocks */ body.neon .menu-cols { gap: clamp(36px, 5vw, 72px); } body.neon .menu-block { background: none; border: 0; box-shadow: none; } body.neon .menu-block .hdbar { background: none; border: 0; padding: 0 0 14px; border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(90deg, var(--yellow) 0 4px, transparent 4px 10px) 4; grid-template-columns: 1fr auto; align-items: end; } body.neon .menu-block .hdbar h3 { font: 900 italic var(--step-2)/1 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--ink); -webkit-text-stroke: 0; text-shadow: -0.04em 0.015em 0 var(--cyan), 0.04em -0.015em 0 var(--magenta); white-space: normal; } body.neon .menu-block .hdbar .meta { font: 700 0.78rem/1.35 var(--f-pixel); letter-spacing: 0.05em; color: var(--yellow); } body.neon .menu-block .rows { padding: 18px 0 0 !important; } body.neon .menu-list { gap: 16px; } body.neon .menu-row { gap: 16px; align-items: baseline; } body.neon .menu-row .nm { font: 900 italic 1.2rem/1.1 var(--f-display); letter-spacing: 0; color: var(--ink); } body.neon .menu-row .desc { font: 500 0.98rem/1.45 var(--f-body); letter-spacing: 0; color: var(--ink-3); } body.neon .menu-row .dots { border-bottom: 3px dotted color-mix(in srgb, var(--yellow) 55%, transparent); } body.neon .menu-row .pr { font: 900 italic 1.3rem/1 var(--f-display); color: var(--yellow); } body.neon .menu-row.sub .nm { color: var(--ink-2); } body.neon .menu-row.sub .pr { color: var(--cyan); } body.neon .note-fine, body.neon .note-sm { font: 700 0.76rem/1.5 var(--f-pixel); letter-spacing: 0.05em; color: var(--ink-3); text-transform: uppercase; } /* Generic headings / text left inside legacy blocks */ body.neon h2, body.neon h3, body.neon h4 { text-wrap: balance; } body.neon main a:not(.btn):not([class]) { color: var(--cyan); } body.neon details { border-radius: 0; } body.neon details > summary { cursor: pointer; } /* ========================================================================== FOOTER ========================================================================== */ body.neon footer { margin: clamp(40px, 6vw, 80px) 0 0; padding: clamp(48px, 6vw, 72px) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) 36px; background: var(--night); border: 0; border-top: 1px solid var(--line); box-shadow: none; } body.neon footer::before, body.neon footer::after { content: none; } body.neon .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px 48px; } body.neon footer .stellas-logo { content: url(/site-assets/web/stellas-logo-white.svg); width: 170px !important; height: auto !important; aspect-ratio: 720 / 395; } body.neon footer h3 { font: 700 0.8rem/1 var(--f-pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin: 0 0 14px; } body.neon footer a { font: 700 1rem/1.3 var(--f-body); letter-spacing: 0; color: var(--ink-2); padding: 5px 0; } body.neon footer a::before { content: none; } body.neon footer a:hover { color: #fff; } body.neon footer .tagline { font: 500 1rem/1.55 var(--f-body); color: var(--ink-2); max-width: 36ch; } body.neon footer address { font-style: normal; margin-top: 16px; } body.neon footer address a, body.neon footer address span { display: inline; padding: 0; } body.neon .foot-credits { border-top: 1px solid var(--line); font: 700 0.72rem/1.4 var(--f-pixel); color: var(--ink-3); letter-spacing: 0.05em; } body.neon .foot-credits .y { color: var(--ink-3); } body.neon .foot-credits span:nth-child(n+2) { display: none; } @media (max-width: 860px) { body.neon .foot-grid { grid-template-columns: 1fr 1fr; } body.neon .foot-grid > div:first-child { grid-column: 1 / -1; } } /* Newsletter band */ body.neon .news-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center; margin: clamp(40px, 5vw, 56px) 0 0; padding: clamp(28px, 4vw, 44px); background: var(--plum); border: 0; border-radius: 22px; } body.neon .news-band h3 { font: 900 italic var(--step-2)/1 var(--f-display); text-transform: uppercase; color: var(--ink); text-shadow: -0.04em 0.015em 0 var(--cyan), 0.04em -0.015em 0 var(--magenta); margin: 0 0 8px; letter-spacing: -0.01em; } body.neon .news-band p { color: var(--ink-2); margin: 0; font: 500 1rem/1.5 var(--f-body); } body.neon .news-form { display: flex; flex-wrap: wrap; gap: 10px; } body.neon .news-form input[type="email"] { flex: 1 1 220px; min-height: 52px; padding: 0 16px; background: var(--night); color: var(--ink); border: 0; border-radius: 0; box-shadow: inset 0 0 0 3px var(--ink-3); font: 600 1rem/1 var(--f-body); } body.neon .news-form input[type="email"]:focus { box-shadow: inset 0 0 0 3px var(--cyan); outline: none; } body.neon .news-form button { min-height: 52px; padding: 0 22px; border: 0; border-radius: 0; cursor: pointer; background: var(--yellow); color: var(--night); font: 700 0.95rem/1 var(--f-pixel); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.26); } body.neon .news-status { flex-basis: 100%; margin: 0; font: 700 0.78rem/1.4 var(--f-pixel); color: var(--cyan); } @media (max-width: 760px) { body.neon .news-band { grid-template-columns: 1fr; } } /* ========================================================================== ARCADE MODAL + INLINE CABINETS ========================================================================== */ body.neon .game-cabinet { border: 0; border-radius: 22px; overflow: hidden; background: var(--night-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 50%, transparent), 0 0 40px color-mix(in srgb, var(--cyan) 22%, transparent); } body.neon .game-cabinet__title { font: 900 italic var(--step-3)/0.95 var(--f-display); text-transform: uppercase; color: var(--ink); text-shadow: -0.05em 0.02em 0 var(--cyan), 0.05em -0.02em 0 var(--magenta); -webkit-text-stroke: 0; letter-spacing: -0.01em; } body.neon .game-cabinet__sub { font: 800 var(--step-0)/1.4 var(--f-display); color: var(--ink-2); letter-spacing: 0; text-transform: none; } body.neon .game-cabinet__coin, body.neon .game-cabinet__hint { font-family: var(--f-pixel); } body.neon .arcade-modal__title { font-family: var(--f-display); font-style: italic; font-weight: 900; } @media (max-width: 860px) { body.neon .split { grid-template-columns: 1fr; } body.neon .split .portrait { transform: none; min-height: 300px; } body.neon .menu-cols { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { body.neon *, body.neon *::before, body.neon *::after { animation: none !important; transition: none !important; } } /* ========================================================================== SHARED ADDITIONS: screen-reader text, FAQ, status, map, arcade buttons ========================================================================== */ .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .status[data-open-status="closed"]::before { background: var(--ink-3); box-shadow: none; } /* FAQ: open list, no boxes. Also catches legacy details inside panels. */ .faq, body.neon .game-faq { display: grid; } .faq details, body.neon .panel details, body.neon main > details { background: none !important; border: 0 !important; border-top: 1px solid var(--line) !important; padding: 0 !important; } .faq details:last-child { border-bottom: 1px solid var(--line) !important; } .faq summary, body.neon .panel details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; font: 800 var(--step-0)/1.35 var(--f-display) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; cursor: pointer; } .faq summary::-webkit-details-marker, body.neon .panel details > summary::-webkit-details-marker { display: none; } .faq summary::after, body.neon .panel details > summary::after { content: "+"; flex: none; font: 700 1.3rem/1 var(--f-pixel); color: var(--cyan); } .faq details[open] > summary::after, body.neon .panel details[open] > summary::after { content: "\2212"; color: var(--magenta); } .faq details > p, body.neon .panel details > p { margin: 0 0 22px !important; color: var(--ink-2); max-width: 64ch; font: 500 1rem/1.62 var(--f-body); } .faq details a { color: var(--cyan); } /* Base-layer arcade buttons (map, overlays) */ body.neon .arcade-btn { font: 700 0.9rem/1 var(--f-pixel) !important; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.85em 1.3em 0.95em; border: 0 !important; border-radius: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink-3) !important; } body.neon .arcade-btn.primary { background: var(--yellow) !important; color: var(--night) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.26) !important; } body.neon .arcade-btn.sm { font-size: 0.78rem !important; padding: 0.7em 1em; } /* Downtown map + Stella-Man */ body.neon .map-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; } body.neon .map-embed, body.neon .map-wrapper { border: 0 !important; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 50%, transparent), 0 0 40px color-mix(in srgb, var(--cyan) 20%, transparent); } body.neon .map-label { font-family: var(--f-pixel); background: var(--night); color: var(--yellow); border: 0; } body.neon .game-hud .lbl, body.neon .game-hud .val, body.neon .game-instructions, body.neon .game-result { font-family: var(--f-pixel); } body.neon .game-instructions h3, body.neon .game-result h3 { font: 900 italic var(--step-2)/1 var(--f-display); text-transform: uppercase; } /* Plain lists, visit facts, hours grids used across pages */ body.neon .plain-list { color: var(--ink-2); } body.neon .hours-grid { font: 700 1rem/1.5 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; } body.neon .hours-grid .d { font: 700 0.82rem/1.9 var(--f-pixel); color: var(--yellow); } body.neon .visit-facts dt { font: 700 0.76rem/1.3 var(--f-pixel); color: var(--cyan); letter-spacing: .06em; } body.neon .visit-facts dd { margin: 4px 0 14px; color: var(--ink-2); } /* Newsletter honeypot: off-screen, not display:none, so bots still fill it */ body.neon .news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Newsletter popup (newsletter.js) */ body.neon .news-pop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 6, 31, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 200ms ease; } body.neon .news-pop.news-pop-in { opacity: 1; } body.neon .news-pop.news-pop-instant { transition: none; } body.neon .news-pop-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 36px 30px 28px; background: var(--plum); border: 0; border-radius: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 55%, transparent), 0 0 50px color-mix(in srgb, var(--magenta) 30%, transparent), 0 30px 70px rgba(0, 0, 0, 0.6); transform: translateY(8px); transition: transform 200ms ease; } body.neon .news-pop.news-pop-in .news-pop-card { transform: translateY(0); } body.neon .news-pop.news-pop-instant .news-pop-card { transition: none; transform: none; } body.neon .news-pop-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; background: none; border: 0; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; } body.neon .news-pop-x:hover { color: #fff; } body.neon .news-pop-kicker { font: 700 0.8rem/1.2 var(--f-pixel); letter-spacing: 0.08em; color: var(--yellow); margin: 0 0 12px; } body.neon .news-pop-title { font: 900 italic var(--step-2)/1 var(--f-display); text-transform: uppercase; color: var(--ink); text-shadow: -0.04em 0.015em 0 var(--cyan), 0.04em -0.015em 0 var(--magenta); margin: 0 0 12px; } body.neon .news-pop-copy { font: 500 1rem/1.55 var(--f-body); color: var(--ink-2); margin: 0 0 20px; } body.neon .news-pop .news-form { flex: 1 1 auto; } body.neon .news-pop-fine { font: 500 0.8rem/1.4 var(--f-body); color: var(--ink-3); margin: 14px 0 0; } @media (max-width: 560px) { body.neon .news-form input[type="email"], body.neon .news-form button { flex: 1 1 100%; } body.neon .news-pop-card { padding: 30px 20px 22px; } } /* Footer: Privacy Choices link app.js appends */ body.neon footer .privacy-trigger { background: none; border: 0; padding: 5px 0 !important; color: var(--ink-2) !important; font: 700 1rem/1.3 var(--f-body) !important; text-decoration: none !important; cursor: pointer; display: block; text-align: left; } body.neon footer .privacy-trigger:hover { color: #fff; } /* Small helpers only the old layers styled */ body.neon .ticker.is-offscreen .ticker-track { animation-play-state: paused; } body.neon .tier .tier-note, body.neon .tier-note { color: var(--ink-3); font-size: 0.92rem; } body.neon .price { color: var(--yellow); font-weight: 900; } /* ========================================================================== PAGE COMPONENTS ========================================================================== */ /* Hero taglines are sentence case now; keep any leftover caps readable */ body.neon .title-screen .tagline { font-size: var(--step-1); } /* ---- Comedy: the show list is a setlist, not boxes ---- */ body.neon .show, body.neon .show:has(.who-photo) { display: grid; grid-template-columns: 5.2rem 88px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--line); box-shadow: none; } body.neon .show:last-child { border-bottom: 1px solid var(--line); } body.neon .show::before, body.neon .show::after { content: none; } body.neon .show .when { background: none; border: 0; padding: 0; width: auto; height: auto; font: 700 0.76rem/1.2 var(--f-pixel); letter-spacing: 0.06em; color: var(--ink-3); text-align: center; } body.neon .show .when .d { font: 900 italic 2.6rem/0.95 var(--f-display); color: var(--yellow); margin: 2px 0; } body.neon .show .who-photo { width: 88px; height: 88px; border: 0; background: var(--night-2); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 60%, transparent), 0 0 18px color-mix(in srgb, var(--magenta) 30%, transparent); } body.neon .show .who-photo img { width: 100%; height: 100%; object-fit: cover; border: 0; } body.neon .show .who h3 { font: 900 italic var(--step-1)/1.05 var(--f-display); letter-spacing: -0.005em; text-transform: uppercase; margin: 0 0 6px; color: var(--ink); } body.neon .show .who h3 a, body.neon .show-title-link { color: var(--ink); text-decoration: none; } body.neon .show .who h3 a:hover { text-shadow: -0.04em 0 var(--cyan), 0.04em 0 var(--magenta); } body.neon .show .who p { margin: 0; font: 500 0.98rem/1.5 var(--f-body); color: var(--ink-2); } body.neon .show-bio { color: var(--ink-2); } body.neon .show-details { font: 700 0.74rem/1 var(--f-pixel); color: var(--cyan); letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; } body.neon .show-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } body.neon .show-actions > img { display: none !important; } body.neon .show-ticket-stack { display: grid; gap: 8px; } @media (max-width: 760px) { body.neon .show, body.neon .show:has(.who-photo) { grid-template-columns: 3.8rem 64px minmax(0, 1fr); gap: 14px; } body.neon .show .who-photo { width: 64px; height: 64px; } body.neon .show .when .d { font-size: 2rem; } body.neon .show-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } } /* Comedy photo wall */ body.neon .g-item { border: 0 !important; border-radius: 12px; overflow: hidden; box-shadow: none; } body.neon .g-item img { border: 0; } /* ---- Parties: packages as three columns of copy, no boxes ---- */ body.neon .tiers { gap: clamp(28px, 4vw, 56px); } body.neon .tier { background: none; border: 0; box-shadow: none; padding: 0 0 0 20px; border-left: 4px solid var(--magenta); } body.neon .tier.platinum { border-left-color: var(--cyan); } body.neon .tier.diamond { border-left-color: var(--yellow); } body.neon .tier::before, body.neon .tier::after { content: none; } body.neon .tier .lvl, body.neon .tier .eye { font: 700 0.76rem/1.3 var(--f-pixel); color: var(--ink-3); letter-spacing: 0.06em; } body.neon .tier h3 { font: 900 italic var(--step-2)/1 var(--f-display); text-transform: uppercase; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; letter-spacing: -0.01em; } body.neon .tier .who { font: 700 0.78rem/1.4 var(--f-pixel); color: var(--cyan); letter-spacing: 0.04em; } body.neon .tier .tier-price { font: 900 italic var(--step-3)/1 var(--f-display); color: var(--yellow); text-shadow: none; -webkit-text-stroke: 0; letter-spacing: -0.01em; } body.neon .tier ul { color: var(--ink-2); font: 500 1rem/1.55 var(--f-body); padding-left: 0; } body.neon .tier li::before { content: "\25B8 "; color: var(--magenta); } /* ---- Burgers: boss lineup as photos with names under them ---- */ body.neon .boss-card { background: none !important; border: 0 !important; box-shadow: none !important; transform: none; } body.neon .boss-card .pic { border-radius: 18px; overflow: hidden; border: 0; } body.neon .boss-card .info { background: none; border: 0; padding: 12px 0 0; } body.neon .boss-card .nm { font: 900 italic 1.1rem/1.1 var(--f-display); color: var(--ink); text-transform: uppercase; letter-spacing: 0; } body.neon .boss-card .pr { font: 900 italic 1.15rem/1 var(--f-display); color: var(--yellow); } body.neon .boss-card.sel .pic, body.neon .boss-card:hover .pic { box-shadow: 0 0 0 3px var(--yellow), 0 0 26px color-mix(in srgb, var(--yellow) 35%, transparent); } body.neon .boss-card .tag.spicy { background: var(--magenta); color: #fff; border: 0; font-family: var(--f-pixel); } body.neon .price-chip { background: var(--yellow); border: 0; box-shadow: none; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); } body.neon .price-chip .ps, body.neon .price-chip .pn { color: var(--night); font-family: var(--f-display); font-style: italic; font-weight: 900; } body.neon .price-chip .pl { color: var(--night); font-family: var(--f-pixel); } /* ---- Machines: pinball as a typographic list, cabinets as photos ---- */ body.neon .machine-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 34px 28px; } body.neon .machine { background: none; border: 0; padding: 0; overflow: visible; box-shadow: none; } body.neon .machine:hover { transform: none; border: 0; } body.neon .machine .mpic { width: 100%; margin: 0 0 14px; aspect-ratio: 3 / 4; border: 0; border-radius: 18px; transition: box-shadow 0.25s ease; } body.neon .machine:hover .mpic { transform: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 60%, transparent), 0 0 30px color-mix(in srgb, var(--cyan) 30%, transparent); } body.neon .machine .mnm { font: 900 italic 1.15rem/1.12 var(--f-display); color: var(--ink); letter-spacing: 0; } body.neon .machine .mmf { font: 700 0.74rem/1.3 var(--f-pixel); color: var(--cyan); letter-spacing: 0.05em; } body.neon .machine .mdesc { font: 500 0.95rem/1.5 var(--f-body); color: var(--ink-2); } body.neon .machine .mtag { font: 700 0.72rem/1.2 var(--f-pixel); color: var(--magenta); letter-spacing: 0.05em; } body.neon .machine .mlink { border: 0; padding: 0; font: 700 0.72rem/1.2 var(--f-pixel); color: var(--cyan); } body.neon .machine .mlink:hover { background: none; color: #fff; text-decoration: underline; } /* pinball rows have no photo: open list with a rule on top */ body.neon .machine:not(:has(.mpic)) { padding-top: 16px; border-top: 1px solid var(--line); } body.neon .arcade-subnav { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-block: 8px; border: 0 !important; background: none !important; justify-content: flex-start; } body.neon .arcade-subnav a { font: 800 1rem/1 var(--f-display) !important; color: var(--ink-2) !important; text-transform: none; letter-spacing: 0 !important; border: 0 !important; background: none !important; padding: 8px 0 !important; text-decoration: none; } body.neon .arcade-subnav a:hover { color: #fff !important; text-shadow: -1px 0 var(--cyan), 1px 0 var(--magenta); } body.neon .arcade-subnav a::before { content: none !important; } /* ---- Drinks / feature art ---- */ body.neon .last-call-art { border: 0 !important; border-radius: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 55%, transparent), 0 0 36px color-mix(in srgb, var(--yellow) 22%, transparent); background-image: url(/site-assets/web/game-still-last-call-800.webp) !important; background-size: cover !important; background-position: center !important; } body.neon .last-call-art > * { display: none; } body.neon main > p.body-copy { padding-inline: var(--gutter) !important; } /* ---- League (league.js renders most of this) ---- */ body.neon .league-hero { border: 0 !important; border-radius: 0; background: none; box-shadow: none; } body.neon .league-hero-poster { border: 0 !important; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 55%, transparent), 0 0 40px color-mix(in srgb, var(--magenta) 25%, transparent); } body.neon .league-hero-ctas a { font-family: var(--f-pixel) !important; } body.neon .week-status, body.neon .week-status-inner { background: none !important; border: 0 !important; box-shadow: none !important; } body.neon .ws-chip { font-family: var(--f-pixel); background: var(--yellow); color: var(--night); border: 0; } body.neon .ws-main { font: 900 italic var(--step-1)/1.1 var(--f-display); color: var(--ink); } body.neon .ws-next, body.neon .ws-note { color: var(--ink-2); font-family: var(--f-body); } body.neon .hs-card, body.neon .hof-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 16px 0 0 !important; border-top: 3px solid var(--cyan) !important; } body.neon .hof-card { border-top-color: var(--magenta) !important; } body.neon .hs-top-score, body.neon .hof-winner-name { font: 900 italic var(--step-1)/1.05 var(--f-display) !important; color: var(--ink) !important; } body.neon .hs-game, body.neon .hof-season, body.neon .hof-dates { font-family: var(--f-pixel) !important; color: var(--ink-3) !important; } body.neon .hs-week-tab { font-family: var(--f-pixel); border: 0; box-shadow: inset 0 0 0 2px var(--ink-3); background: none; color: var(--ink-2); } body.neon .hs-week-tab[aria-selected="true"], body.neon .hs-week-tab.active { background: var(--yellow); color: var(--night); box-shadow: none; } body.neon .standings-wrap { border: 0 !important; background: none !important; } body.neon .standings-table { font-family: var(--f-body); font-variant-numeric: tabular-nums; } body.neon .standings-table th { font: 700 0.72rem/1.2 var(--f-pixel); color: var(--ink-3); border-bottom: 2px solid var(--line); background: none; } body.neon .standings-table td { border-bottom: 1px solid var(--line); color: var(--ink-2); } body.neon .standings-table td.nm { color: var(--ink); font-weight: 800; } body.neon .standings-table tr:nth-child(-n+3) td.nm { color: var(--yellow); } /* ---- Party request form (party-booking.css draws the fields) ---- */ body.neon .party-request, body.neon .party-form { border-radius: 22px; } /* ---- Event pages (inline styles from the sync template) ---- */ body.neon .event-poster { border: 0 !important; border-radius: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 55%, transparent), 0 0 36px color-mix(in srgb, var(--magenta) 25%, transparent); } body.neon .event-fact, body.neon .event-note { background: none !important; border: 0 !important; border-left: 3px solid var(--magenta) !important; padding: 4px 0 4px 16px !important; } body.neon .event-fact b, body.neon .event-note h2 { color: var(--yellow) !important; font-family: var(--f-pixel) !important; } body.neon .event-note a { color: var(--cyan) !important; } /* Comedy rows without a performer photo (calendar, book a show) */ body.neon .show:not(:has(.who-photo)) { grid-template-columns: 5.2rem minmax(0, 1fr) auto; } @media (max-width: 760px) { body.neon .show:not(:has(.who-photo)) { grid-template-columns: 3.8rem minmax(0, 1fr); } } /* League hero: the room, not a red sunset */ body.neon.league-page .league-hero, body.neon .league-hero { margin: 0; padding: clamp(40px, 6vw, 80px) var(--gutter); background: radial-gradient(60vw 40vw at 50% 0%, rgba(254, 32, 225, 0.22), transparent 65%), var(--night-2); } body.neon .league-hero-horizon { display: none; } body.neon .league-cta { background: var(--yellow) !important; color: var(--night) !important; border: 0 !important; font: 700 0.95rem/1 var(--f-pixel) !important; letter-spacing: 0.05em !important; text-transform: uppercase; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.26) !important; text-shadow: none !important; } body.neon .league-cta.league-cta-ghost { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 3px var(--ink-3) !important; } /* Party request heading: glitch voice, not pixel */ body.neon .party-request__intro h3 { font: 900 italic var(--step-2)/1 var(--f-display) !important; letter-spacing: -0.01em !important; text-transform: uppercase; color: var(--ink); } /* Phones: one header row (logo, order, menu). Open status moves to the hero on home and the bottom action bar covers directions and calls. */ @media (max-width: 600px) { body.neon .hud { flex-wrap: wrap; gap: 10px; } body.neon .hud .hud-status { display: none; } body.neon .hud .right-cell { margin-left: auto; } } body.neon .screen img, body.neon .tok, body.neon .machine .mpic { height: auto; } /* ========================================================================== GAME VIEWER (app.js .arcade-modal): a lit screen with a slim header ========================================================================== */ body.neon .arcade-modal { padding: clamp(10px, 2vw, 24px); background: rgba(18, 6, 31, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.neon .arcade-modal::before { content: none; } body.neon .arcade-modal__shell { width: min(1320px, 100%); height: 100%; max-height: 100%; border: 0; border-radius: 22px; background: var(--night); box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 55%, transparent), 0 0 50px color-mix(in srgb, var(--magenta) 25%, transparent), 0 30px 80px rgba(0, 0, 0, 0.7); } body.neon .arcade-modal__header { min-height: 56px; padding: 8px 10px 8px 20px; border: 0; border-bottom: 1px solid var(--line); background: var(--night-2); gap: 10px; } body.neon .arcade-modal__title { flex: 1; font: 900 italic 1.15rem/1 var(--f-display); letter-spacing: 0; text-transform: uppercase; color: var(--ink); } body.neon .arcade-modal__frame { background: var(--night); } body.neon .arcade-modal__help, body.neon .arcade-modal__close { min-height: 40px; } body.neon .arcade-modal__close { background: var(--yellow) !important; color: var(--night) !important; box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.26) !important; } @media (max-width: 720px), (pointer: coarse) { body.neon .arcade-modal { padding: 0; } body.neon .arcade-modal__shell { border-radius: 0; box-shadow: none; } body.neon .arcade-modal__header { min-height: 48px; padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(14px, env(safe-area-inset-left)); } }