/* ======================================================================= TONIGHT :: tonight.css — the night, on the FROST ZONE's own ice The owner's ruling, 2026-08-27, rebuilding this page: one screen, a map with bar icons or a bar selector, pick a bar → the artists that night → the room's other nights — "it should look more like the frost musician website but not exactly." THE FROST MUSICIAN WEBSITE IS frost.html — FROST MILANO's own page (css/style.css: "Icy Y2K / late-90s GeoCities energy — beveled, chrome, snowbound") — and the first cut of this skin dressed the page in css/neck.css's juke joint instead, which is the OTHER musician's website. The owner said so. This is the correction. So: the navy-ice starfield ground, chrome-gradient Anton display, VT323 pixel type, glossy beveled Y2K pills, ice-bright cyan with the hot pink saved for the one thing that is HOT (a camera live right now) — frost .html's own vocabulary, arranged for a map and a bill, not a copy of its homepage. The GTA-blip pins the owner asked for stay; they wear frost colours now. AND THEN THE LIST CAME BACK, 2026-09-01: "the who's playing tonight feature is hard to access there should be a easier way than the map brought up first." The page opens on .tn__list — one row per room, on the starfield — and the map is the other half of a LIST/MAP switch in the header. The list is deliberately laid straight on the page ground rather than given a panel of its own: .tn__bill is the ice PANEL and it slides over the list, and two panels stacked read as one flat sheet. THE PAGE NEVER SCROLLS — the 2026-08-27 ruling's first sentence, load-bearing: height:100dvh + overflow:hidden on the body; the map PANS inside its own box; the LIST scrolls inside .tn__rooms (both of those are a control being a control, not a page scrolling — the same distinction the native bar selector already relied on); and the bill keeps a last-resort internal overflow a normal night never reaches. All colour lives in :root below, lifted from css/style.css's own tokens so the site reads as one place. Fonts arrive from the page (the same three families frost.html loads); every stack has a real fallback. css/info.css is deliberately NOT linked — scripts/info-shell-check.mjs carries the per-page skin ruling. ======================================================================= */ :root{ /* the ice — css/style.css's own values, same names where it has them */ --ice-deep: #0a0a0a; --ice-deep2: #1e1e1e; --ice-mid: #3d3200; --ice-bright: #ffd800; --ice-light: #ffe873; --ice-white: #fff8dc; --frost-3: #d6b000; --frost-4: #8a7200; --warm: #ff2d95; /* the hot accent, used sparingly — LIVE only */ --gold: #ffd84d; /* frost.html's own "who's playing tonight" gold */ --gold-deep: #a86a06; --line: #e6c200; --display: "Anton", "Impact", "Haettenschweiler", sans-serif; --pixel: "VT323", "Courier New", monospace; --body: "Space Grotesk", Verdana, Geneva, sans-serif; } /* ===================== the one screen ===================== */ * { box-sizing: border-box; } html, body { height: 100%; } body{ margin: 0; height: 100dvh; overflow: hidden; /* THE RULING: no page scroll, ever */ color: var(--ice-white); font-family: var(--body); font-size: 14px; line-height: 1.45; -webkit-text-size-adjust: 100%; /* the FROST ZONE ground — style.css's starfield glacier, verbatim, so this page and the front door read as one site */ background-color: var(--ice-deep); background-image: radial-gradient(1.5px 1.5px at 20px 30px, #ffffff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 120px 80px, #fff0a8 50%, transparent 51%), radial-gradient(1px 1px at 70px 160px, #ffffff 50%, transparent 51%), radial-gradient(1px 1px at 180px 200px, #e8c84a 50%, transparent 51%), radial-gradient(circle at 50% -10%, #3d3200 0%, transparent 55%), linear-gradient(180deg, #121212 0%, #0a0a0a 60%, #000000 100%); background-size: 220px 240px, 220px 240px, 220px 240px, 220px 240px, 100% 100%, 100% 100%; } .wrap{ height: 100dvh; display: flex; flex-direction: column; position: relative; } /* ===================== the masthead js/info-nav.js builds ===================== */ .ibar{ flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; padding: 6px 12px 5px; background: rgba(10,10,10, .85); border-bottom: 2px solid var(--ice-mid); font-family: var(--pixel); font-size: 15px; letter-spacing: .04em; white-space: nowrap; overflow-x: auto; padding-right: calc(12px + var(--fsg-dock-w, 0px)); } .ibar a{ color: var(--ice-light); text-decoration: none; } .ibar a:active{ color: var(--ice-bright); } .ibar__brand{ color: var(--ice-bright); } .ibar .ibar__cur{ color: #161616; background: var(--ice-bright); border: 2px outset var(--ice-light); padding: 0 7px; border-radius: 4px; } body[data-info-shell] .fsg-dock{ justify-content: flex-end; } /* ===================== the header row ===================== */ .tn__head{ flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; padding: 6px calc(12px + var(--fsg-dock-w, 0px)) 6px 12px; background: rgba(30,30,30, .55); border-bottom: 2px solid var(--ice-mid); } .tn__title{ margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: .05em; /* the FROST MILANO chrome — ice gradient through the letters */ background: linear-gradient(180deg, #ffffff 8%, var(--ice-light) 42%, var(--frost-3) 58%, var(--ice-white) 92%); -webkit-background-clip: text; background-clip: text; color: var(--ice-white); -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(3, 12, 22, .8)); } .tn__date{ font-family: var(--pixel); font-size: 15px; color: var(--frost-3); letter-spacing: .04em; white-space: nowrap; } /* THE SEARCH BOX, standing in the slot the `pick a bar…` select used to hold (2026-09-01, "add a search"). Same beveled ice pill, because it is doing that control's job and more; .tn__views still owns the auto margin and pushes it right. `type="search"` gets the platform's own ✕ on WebKit — it is kept, it fires `input`, and it is the fastest way back to the whole night. */ .tn__find[hidden]{ display: none; } /* display:flex outranks [hidden] */ .tn__find{ max-width: 38vw; min-width: 0; flex: 0 1 auto; position: relative; display: flex; } .tn__q{ width: 100%; min-width: 0; font-family: var(--pixel); font-size: 15px; color: #161616; background: linear-gradient(180deg, var(--ice-white), var(--ice-light)); border: 2px outset var(--line); border-radius: 6px; padding: 3px 8px; -webkit-appearance: none; appearance: none; } .tn__q{ padding-right: 26px; } /* the ✕'s lane, so text never runs under it */ .tn__q::placeholder{ color: #7a6a20; opacity: 1; } /* OUR clear control — see tonight.html for why it is not the platform's */ .tn__qx{ position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--pixel); font-size: 16px; line-height: 1; color: var(--ice-white); background: var(--frost-4); border: 1px solid #161616; border-radius: 50%; cursor: pointer; padding: 0; } .tn__qx[hidden]{ display: none; } /* display:flex outranks [hidden] */ .tn__qx:active{ background: var(--ice-mid); } .tn__q:focus{ outline: none; border-color: var(--ice-bright); box-shadow: 0 0 0 2px rgba(255,216,0, .35); } /* the platform ✕ is dark-on-light here, which is the right way round on an ice-white field; without this WebKit draws it mid-grey and it vanishes */ .tn__q::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #8a7200; cursor: pointer; -webkit-mask: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #000 44%, #000 56%, transparent 56%); mask: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #000 44%, #000 56%, transparent 56%); } /* the LIST / MAP switch — the 2026-09-01 ruling, made pressable. The night chips' own beveled recipe, because that is already this page's word for "the one of these you are looking at". */ .tn__views{ margin-left: auto; flex: 0 0 auto; display: flex; gap: 4px; } .tn__view{ font-family: var(--pixel); font-size: 14px; letter-spacing: .05em; color: var(--ice-light); background: rgba(61,50,0, .55); border: 2px outset var(--frost-4); border-radius: 5px; padding: 1px 9px; cursor: pointer; } .tn__view:active{ border-style: inset; } .tn__view.is-on{ color: #161616; background: var(--ice-bright); border-color: var(--ice-light); } /* ===================== the list — who is playing ===================== The night as a column of rooms on the glacier: the room in the chrome display face, the act under it, the state in a chip. It is a column of BUTTONS, one per room, because a row's whole job is to open that room's handbill and a button is the control a thumb and a screen reader both already understand. */ .tn__list{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 2px solid var(--ice-mid); } .tn__list[hidden]{ display: none; } /* display:flex outranks [hidden] */ /* ===================== which night — the day chips ===================== TONIGHT · TOMORROW · SAT (the 2026-09-01 product pass, "Tonight / Sat chips" for the Saturday demo). They sit at the top of the LIST and not in the header, on purpose: they are a LIST control exactly as the search is — js/live-map.js draws the clock's night and takes no date — so they must leave with the list, and .tn__list[hidden] takes them along for free. The header at 375px is already two rows (title + LIST/MAP, then the search), and a third row of chips wrapping inside a flex header cost more list height than a strip of their own directly over the rooms they change. The handbill's night chips' own beveled recipe (.tn__night), because that is already this page's word for "the one of these you are looking at". */ .tn__days{ flex: 0 0 auto; display: flex; gap: 5px; padding: 5px 12px; background: rgba(10,10,10, .45); border-bottom: 1px solid var(--ice-mid); overflow-x: auto; /* a control being a control: a wide week pans here */ -webkit-overflow-scrolling: touch; } .tn__days:empty{ display: none; } .tn__day{ flex: 0 0 auto; font-family: var(--pixel); font-size: 14px; letter-spacing: .05em; color: var(--ice-light); background: rgba(61,50,0, .55); border: 2px outset var(--frost-4); border-radius: 5px; padding: 1px 9px; cursor: pointer; white-space: nowrap; } .tn__day:active{ border-style: inset; } .tn__day.is-on{ color: #161616; background: var(--ice-bright); border-color: var(--ice-light); } /* WHICH BOARD — MUSIC | COMEDY (2026-09-08, "make a tab that switches between comedy and music"). Two tabs the width of the list, the lit one ice like LIST / MAP, each wearing its count of rooms on the list's night. Bigger than the night chips on purpose: the board is the first thing a visitor decides, the night the second. A list control — it stands inside #tnList and leaves with it. */ .tn__kinds{ flex: 0 0 auto; display: flex; gap: 5px; padding: 6px 12px 0; background: rgba(10,10,10, .45); } .tn__kinds:empty{ display: none; } .tn__kind{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--display); font-size: 18px; letter-spacing: .06em; line-height: 1; color: var(--ice-light); background: rgba(61,50,0, .55); border: 2px outset var(--frost-4); border-bottom: 0; border-radius: 7px 7px 0 0; padding: 5px 6px 4px; cursor: pointer; } .tn__kind:active{ border-style: inset; } .tn__kind.is-on{ color: #161616; background: var(--ice-bright); border-color: var(--ice-light); } .tn__kindcount{ font-family: var(--pixel); font-size: 13px; letter-spacing: .04em; opacity: .85; } .tn__count{ flex: 0 0 auto; padding: 4px 12px; background: rgba(10,10,10, .9); border-bottom: 2px solid var(--ice-mid); font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: var(--frost-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* THE ONE THING ON THIS PAGE THAT SCROLLS, and it scrolls inside itself. ⚠ THE TAIL PADDING IS NOT DECORATION. js/frost-map.js pins the fast-travel MAP sticker to the bottom-left corner with position:fixed, ~86 x 76px of it, and it sat squarely on the last rooms of the night — the map view never noticed because a map has no rows. The padding lets the final row be scrolled clear of it; .tn__listfoot below reserves its corner the way .lmap__bar already does. */ .tn__rooms{ flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 72px; } .tn__room{ display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 5px 12px 6px; background: transparent; border: 0; border-bottom: 1px solid rgba(230,194,0, .25); cursor: pointer; font: inherit; color: inherit; } .tn__room:active{ background: rgba(255,216,0, .10); } .tn__room.is-open{ background: rgba(255,216,0, .12); box-shadow: inset 3px 0 0 var(--ice-bright); } .tn__room.is-best{ box-shadow: inset 3px 0 0 var(--gold); } .tn__room.is-best.is-open{ box-shadow: inset 3px 0 0 var(--ice-bright); } .tn__rhead{ display: flex; align-items: baseline; gap: 8px; } .tn__rname{ flex: 1 1 auto; min-width: 0; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .03em; line-height: 1.25; color: var(--ice-white); text-shadow: 0 0 10px rgba(255,216,0, .28), 0 1px 0 rgba(3, 12, 22, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the crown rank() earns — a watchable stream or a NAMED act on a stage this minute, and nothing looser. frost.html's own tonight-gold. */ .tn__rbest{ flex: 0 0 auto; font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; color: #2a1c00; background: var(--gold); border-radius: 4px; padding: 0 6px; box-shadow: 0 0 8px rgba(255, 216, 77, .5); } .tn__rchip{ flex: 0 0 auto; font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; border-radius: 4px; padding: 0 6px; white-space: nowrap; } /* the hot pink is the ONE hot thing — a camera live right now — and it is spent here for the same reason .lmap__pin--live spends it */ .tn__rchip--live{ color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); box-shadow: 0 0 10px rgba(255, 45, 149, .5); } .tn__rchip--on{ color: #161616; background: var(--ice-bright); box-shadow: 0 0 8px rgba(255,216,0, .55); } .tn__rchip--soon{ color: var(--ice-light); background: rgba(61,50,0, .7); border: 1px solid var(--frost-4); } /* the room GIVES something that night — data/events.json. Gold, because the gold on this page is already "who's playing tonight" (frost.html's own), and a gift is the one other thing worth a second colour on a row. */ .tn__rchip--gift{ color: #3a2600; background: var(--gold); box-shadow: 0 0 8px rgba(255, 216, 77, .5); } /* ---- the strip over the rooms: this week's events, one line each ---- */ .tn__gifts{ display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; } .tn__gift{ display: flex; align-items: baseline; gap: 8px; min-width: 0; width: 100%; text-align: left; cursor: pointer; font-family: var(--pixel); font-size: 15px; line-height: 1.2; color: var(--ice-white); background: linear-gradient(180deg, rgba(255, 216, 77, .16), rgba(255, 216, 77, .06)); border: 1px solid rgba(255, 216, 77, .55); border-radius: 6px; padding: 5px 8px; } .tn__giftday{ flex: 0 0 auto; color: var(--gold); letter-spacing: .06em; } .tn__giftroom{ flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn__giftwhat{ flex: 1 1 auto; min-width: 0; color: var(--ice-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn__rbill{ display: flex; align-items: baseline; gap: 9px; } .tn__rtime{ flex: 0 0 auto; /* WIDER THAN THE HANDBILL'S 52px ON PURPOSE. The bill sets its column inside a 420px sheet where "10:00PM (doors)" wraps anyway; out here the row is the full width of a phone and the act sits directly beside the clock, so the column has to clear VT323's widest time on its own. */ min-width: 62px; font-family: var(--pixel); font-size: 15px; color: var(--gold); } .tn__ract{ flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--ice-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the search's second shelf. It is a HEADING and not a row: what follows is not an answer to "who is playing tonight", and it must not be mistakable for one at a glance. */ .tn__group{ padding: 7px 12px 5px; background: rgba(10,10,10, .55); border-top: 1px solid var(--ice-mid); border-bottom: 1px solid var(--ice-mid); font-family: var(--pixel); font-size: 12px; letter-spacing: .06em; color: var(--frost-4); } /* a dark room is quieter than a billed one, in the one dimension that cannot be missed at a glance: its name is not lit */ .tn__room.is-dark .tn__rname{ color: var(--frost-3); text-shadow: none; } .tn__room.is-dark .tn__ract{ color: var(--frost-4); font-style: italic; } .tn__none{ padding: 20px 12px; color: var(--ice-light); opacity: .8; line-height: 1.5; } .tn__none b{ color: var(--ice-white); } .tn__none a{ color: var(--ice-bright); } /* whose listing said so — its own strip under the scroller, holding the corner clear for the fast-travel MAP sticker exactly as .lmap__bar does */ .tn__listfoot{ flex: 0 0 auto; margin: 0; padding: 4px 10px 4px 96px; background: rgba(10,10,10, .9); border-top: 2px solid var(--ice-mid); font-family: var(--pixel); font-size: 13px; line-height: 1.45; letter-spacing: .02em; color: var(--frost-4); } .tn__listfoot:empty{ display: none; } /* ===================== the map — the city under ice ===================== */ /* THE HOST IS THE MAP: LiveMap.mount() stamps its `lmap` class onto the element it is handed, so .tn__map and .lmap are ONE box (the first cut styled them as parent and child and buried the masthead). */ .tn__map{ flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--ice-deep); } .tn__map[hidden]{ display: none; } /* display:flex outranks [hidden] */ .tn__stage{ flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; } .lmap__scroll{ flex: 1 1 auto; min-height: 0; overflow: auto; /* the map PANS here; the page never moves */ background: #141414; } .lmap__frame{ position: relative; width: 100%; } .lmap__img{ display: block; width: 100%; height: auto; /* THE BAKED SVG IS ALREADY THE NIGHT (#101216 ground, pale streets) — the frost look keeps it dark and pushes it BLUE. A bare hue-rotate turned the already-cool ground olive (rotating blue away, and the river went khaki — seen, not guessed): near-greys carry no hue to rotate. So FULL sepia first gives every tone one warm hue (a partial sepia left the river's baked blue to rotate into mud), and the rotate carries that to ice — the sepia+rotate trick, re-inked in the viewing, never in the artefact. */ filter: sepia(1) hue-rotate(175deg) saturate(1.7) brightness(1.08) contrast(1.04); } .lmap__marks{ position: absolute; inset: 0; } /* the pins — GTA-map blips (the owner's ask), in frost colours: gold for a bill tonight (frost.html's own tonight-gold), ice-bright for a room that is ON this minute, and the hot pink saved for the one HOT thing — a camera live right now. Dim rooms stay small dots on purpose: 121 full-size blips would bury the lit ones, GTA's own move with inactive marks. Glyphs ride ::before so js/live-map.js stays untouched; its "●" text for live pins hides under font-size:0. */ .lmap__pin{ position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #0e0e0e; background: var(--gold); cursor: pointer; font-size: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255,232,115, .35), 0 2px 4px rgba(0, 0, 0, .6); } .lmap__pin::before{ content: "\266A"; /* ♪ — the book filed music here */ font: 700 13px/1 Georgia, "Times New Roman", serif; color: #161616; } .lmap__pin--on{ width: 30px; height: 30px; background: var(--ice-bright); box-shadow: 0 0 0 1px rgba(255,248,220, .5), 0 0 10px rgba(255,216,0, .8), 0 2px 4px rgba(0, 0, 0, .6); } .lmap__pin--on::before{ font-size: 17px; color: #161616; } .lmap__pin--live{ width: 32px; height: 32px; background: var(--warm); animation: tn-pulse 1.6s ease-in-out infinite; } .lmap__pin--live::before{ content: "\25B6"; /* ▶ — watchable right now */ font-size: 14px; color: #ffffff; padding-left: 3px; } .lmap__pin--dim{ width: 9px; height: 9px; background: var(--frost-4); border: 1px solid transparent; opacity: .55; box-shadow: none; } .lmap__pin--dim::before{ content: ""; } @keyframes tn-pulse{ 0%,100% { box-shadow: 0 0 0 2px rgba(255, 45, 149, .55), 0 2px 4px rgba(0,0,0,.6); } 50% { box-shadow: 0 0 0 9px rgba(255, 45, 149, .12), 0 2px 4px rgba(0,0,0,.6); } } /* the map's one strip: zoom, caption, the ODbL credit that travels with it */ .lmap__bar{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; /* the fast-travel MAP sticker (hud.css) pins over this strip's left corner — the zoom chip starts clear of it */ padding: 4px 10px 4px 96px; background: rgba(10,10,10, .9); border-top: 2px solid var(--ice-mid); font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: var(--frost-3); white-space: nowrap; overflow: hidden; } .lmap__zoom{ font-family: var(--pixel); font-size: 14px; letter-spacing: .05em; color: #161616; background: linear-gradient(180deg, var(--ice-white), var(--ice-light)); border: 2px outset var(--line); border-radius: 5px; padding: 1px 9px; cursor: pointer; } .lmap__zoom:active{ border-style: inset; } .lmap__zoom[aria-pressed="true"]{ background: var(--ice-bright); } .lmap__cap{ overflow: hidden; text-overflow: ellipsis; } .lmap__attr{ margin-left: auto; color: var(--frost-4); text-decoration: none; } /* ===================== the bill — an ice panel ===================== */ .tn__bill{ position: absolute; z-index: 40; color: var(--ice-white); background: linear-gradient(180deg, #2a2400 0%, var(--ice-deep2) 55%, #181818 100%); border: 2px outset var(--line); border-radius: 10px; box-shadow: inset 0 0 60px rgba(255,216,0, .06), 0 10px 30px rgba(0, 0, 0, .6); display: flex; flex-direction: column; /* landscape: full-height sheet on the LEFT — the profile pill owns the top-right, and a 390px phone cannot spare the header band */ top: 0; left: 0; bottom: 0; width: min(48%, 420px); } .tn__bill[hidden]{ display: none; } @media (orientation: portrait){ .tn__bill{ top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 64%; } } .tn__billhead{ flex: 0 0 auto; padding: 8px 12px 6px; border-bottom: 2px solid var(--ice-mid); background: rgba(255,216,0, .07); } .tn__venue{ margin: 0; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .04em; line-height: 1.15; color: var(--ice-white); text-shadow: 0 0 12px rgba(255,216,0, .35), 0 2px 0 rgba(3, 12, 22, .8); padding-right: 26px; } .tn__where{ margin: 2px 0 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: var(--frost-3); } .tn__close{ position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; font-family: var(--pixel); font-size: 15px; line-height: 1; color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); border: 2px outset #ffd7ec; border-radius: 50%; cursor: pointer; } .tn__close:active{ border-style: inset; } /* the nights — beveled ice chips; the shown night is the lit one */ .tn__nights{ flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-bottom: 1px solid var(--ice-mid); background: rgba(10,10,10, .45); overflow-x: auto; } .tn__night, .tn__step{ font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: var(--ice-light); background: rgba(61,50,0, .55); border: 2px outset var(--frost-4); border-radius: 5px; padding: 1px 8px; cursor: pointer; white-space: nowrap; } .tn__night:active, .tn__step:active{ border-style: inset; } .tn__night.is-on{ color: #161616; background: var(--ice-bright); border-color: var(--ice-light); } .tn__step:disabled{ opacity: .35; cursor: default; } /* the bill itself — the acts */ .tn__acts{ flex: 1 1 auto; min-height: 0; overflow-y: auto; /* last-resort guard; a normal bill fits */ padding: 7px 12px; } .tn__actrow{ padding: 6px 0; border-bottom: 1px solid rgba(230,194,0, .25); } .tn__actrow:last-child{ border-bottom: 0; } .tn__acthead{ display: flex; align-items: baseline; gap: 9px; } .tn__time{ flex: 0 0 auto; font-family: var(--pixel); font-size: 15px; color: var(--gold); min-width: 52px; } .tn__act{ font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--ice-white); } .tn__onnow{ flex: 0 0 auto; margin-left: auto; font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; color: #161616; background: var(--ice-bright); border-radius: 4px; padding: 0 6px; box-shadow: 0 0 8px rgba(255,216,0, .55); } .tn__meta, .tn__note{ margin: 2px 0 0; font-size: 11.5px; color: var(--frost-3); } .tn__empty{ padding: 18px 2px; color: var(--ice-light); opacity: .8; } /* the bill's feet — glossy Y2K pills, css/style.css's own button recipe */ .tn__feet{ flex: 0 0 auto; padding: 7px 12px; border-top: 2px solid var(--ice-mid); background: rgba(10,10,10, .5); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tn__go, .tn__watch{ font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; border-radius: 999px; padding: 6px 14px; border: 2px solid var(--ice-white); box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(20,16,0,.4), 0 3px 0 #1e1e1e; } .tn__go{ color: #161616; background: linear-gradient(180deg, #ffe560, #b89400); } .tn__watch{ color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); border-color: #ffd7ec; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .tn__go:active, .tn__watch:active{ transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 1px 0 #1e1e1e; } .tn__src{ flex: 1 1 100%; margin: 2px 0 0; font-size: 9.5px; line-height: 1.5; color: var(--frost-3); } .tn__src a{ color: var(--frost-3); } /* ===================== LISTEN — js/tonight-listen.js ===================== */ .listen{ margin-top: 5px; } .listen__btn{ display: inline-flex; align-items: center; gap: 7px; font-family: var(--body); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; color: #161616; background: linear-gradient(180deg, var(--ice-white), #f0cf40); border: 2px solid #fff; border-radius: 999px; padding: 4px 12px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(20,16,0,.35), 0 2px 0 #1e1e1e; } .listen__btn:active{ transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 #1e1e1e; } .listen__btn.is-on{ color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); border-color: #ffd7ec; text-shadow: 0 1px 1px rgba(0,0,0,.4); } .listen__ico{ font-size: 9px; line-height: 1; } .listen__out{ font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: var(--ice-bright); } .listen__not, .listen__how, .listen__off{ margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--frost-3); } .listen__off{ margin: 0 0 8px; font-family: var(--pixel); font-size: 14px; } /* the box the ONE iframe is laid over — empty by contract; it reserves the embed's compact height or the dock measures a hairline */ .listen__slot{ margin-top: 7px; height: 80px; border-radius: 8px; background: rgba(3, 12, 22, .55); border: 1px solid var(--ice-mid); } /* landscape: the bill takes the left 48%, so the selector keeps to the free half rather than running under the sheet's edge */ @media (orientation: landscape){ .tn__find{ max-width: 26vw; } } /* A NARROW PORTRAIT PHONE: THE SEARCH TAKES ITS OWN ROW. Measured at 390px: TONIGHT + the date + LIST/MAP + the profile pill's reserve leave about 38px for it, which showed the word "pick" and a chevron back when it was a select — a control too small to read is worse than a control on a second line, and a search box needs more room than a select did, not less: you have to see what you typed. The header is flex:0 0 auto, so wrapping costs the list one row of height. It must cost ONE and not two, which is what the hidden date buys: with it visible, LIST/MAP wrapped as well and the header ran to three rows. .tn__count leads with the same short date directly over the rooms, which is the better place for it anyway. */ @media (max-width: 440px){ .tn__head{ flex-wrap: wrap; } /* THE MASTHEAD WRAPS TOO. It is nowrap + overflow-x:auto above, which on a 390px portrait phone measured scrollWidth 562 in a 390px bar: PLAY sat at 384-422 and YOU at 436-465, both past the right edge, with nothing but a clipped "E" to say the row scrolls. The one PLAY door (ROADMAP.md, the coordination pass, decision 1) was invisible on the listings page unless the visitor swiped the bar sideways. Wrapping is what css/info.css's .ibar already does on every other register page; it costs the list one row, the same price .tn__head pays just above. Measured after: every item's right edge <= 390. */ .ibar{ flex-wrap: wrap; white-space: normal; row-gap: 2px; } .tn__date{ display: none; } .tn__find{ flex: 1 1 100%; max-width: none; margin-top: 6px; } /* the count line is nowrap and ellipsises rather than wrapping, so it must never merely fit — it must fit with slack. Measured on a 390px phone in a 366px content box: 14px = 393 (clipped), 13px = 367 (one pixel of margin, which is not margin), 12px = 340. A month with a longer name and a three-digit night both live inside that 26px. */ .tn__count{ font-size: 12px; } } /* ===================== PLAN MY NIGHT ===================== ROADMAP-LIVE.md §PLAN MY NIGHT, v1. The owner's rule for these screens (2026-09-08, memory feedback-ui-mockups-obvious): one big question, big tiles, the picked one solid gold with a tick, ONE big gold button that names the action, BACK / SKIP small and grey on purpose, and the entry point the only gold thing on the list. The sheet is .tn__bill's — the handbill's own panel — with these modifiers on it. */ .tn__planrow{ margin: 0 0 8px; } .tn__planbtn{ display: block; width: 100%; text-align: left; cursor: pointer; padding: 8px 12px 9px; border-radius: 8px; color: #3a2600; background: linear-gradient(180deg, #ffe89a 0%, var(--gold) 55%, #e6b800 100%); border: 2px outset #fff0b8; box-shadow: 0 0 14px rgba(255, 216, 77, .35); } .tn__planbtn:active{ border-style: inset; } .tn__planbtn b{ display: block; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .05em; line-height: 1; } .tn__planbtn small{ display: block; margin-top: 3px; font-family: var(--pixel); font-size: 14px; letter-spacing: .03em; color: #5a3d00; } /* the strip that stands in for the button once a night exists */ .tn__planstrip{ display: flex; align-items: center; gap: 6px; } .tn__planopen{ flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer; font-family: var(--pixel); font-size: 15px; letter-spacing: .05em; line-height: 1.2; color: var(--gold); background: linear-gradient(180deg, rgba(255, 216, 77, .18), rgba(255, 216, 77, .07)); border: 1px solid rgba(255, 216, 77, .7); border-radius: 6px; padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn__planx{ flex: 0 0 auto; width: 28px; height: 28px; font-family: var(--pixel); font-size: 16px; line-height: 1; color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); border: 2px outset #ffd7ec; border-radius: 50%; cursor: pointer; } /* ---- the sheet, asking ---- */ .tn__askhead{ padding-right: 34px; } .tn__askeyebrow{ margin: 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .08em; color: var(--frost-3); } .tn__dots{ display: inline-flex; gap: 5px; margin-top: 5px; } .tn__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ice-mid); } .tn__dot.is-on{ background: var(--gold); box-shadow: 0 0 6px rgba(255, 216, 77, .7); } .tn__ask{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 8px; } .tn__askq{ margin: 0 0 3px; font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.02; letter-spacing: .03em; color: #fff; text-shadow: 0 0 12px rgba(255,216,0, .35), 0 2px 0 rgba(3, 12, 22, .8); } .tn__askq--small{ font-size: 19px; margin-top: 6px; } .tn__asksub{ margin: 0 0 10px; font-family: var(--pixel); font-size: 15px; letter-spacing: .03em; color: var(--ice-light); } .tn__tiles{ display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; } .tn__tiles--row{ flex-direction: row; flex-wrap: wrap; } .tn__tile{ position: relative; display: block; width: 100%; text-align: left; cursor: pointer; padding: 8px 36px 8px 11px; border-radius: 7px; color: var(--ice-white); background: rgba(255,216,0, .08); border: 1px solid var(--line); } .tn__tiles--row .tn__tile{ width: auto; flex: 1 1 auto; text-align: center; padding: 8px 26px 8px 10px; } .tn__tile b{ display: block; font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .04em; line-height: 1.05; } .tn__tile small{ display: block; margin-top: 2px; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--ice-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn__tile.is-on{ background: var(--gold); border-color: var(--gold); color: #3a2600; box-shadow: 0 0 10px rgba(255, 216, 77, .35); } .tn__tile.is-on small{ color: #5a3d00; } .tn__tile.is-on::after{ content: "\2713"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--pixel); font-size: 22px; line-height: 1; } .tn__tile.is-dim{ opacity: .42; cursor: default; } .tn__askline{ margin: 0 0 8px; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--frost-3); } .tn__askfoot{ flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px 10px; border-top: 2px solid var(--ice-mid); background: rgba(255,216,0, .07); } .tn__askgo{ font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .06em; line-height: 1; color: #3a2600; background: linear-gradient(180deg, #ffe89a 0%, var(--gold) 55%, #e6b800 100%); border: 2px outset #fff0b8; border-radius: 8px; padding: 9px 10px; cursor: pointer; box-shadow: 0 0 12px rgba(255, 216, 77, .35); } .tn__askgo:active{ border-style: inset; } .tn__asksmall{ font-family: var(--pixel); font-size: 14px; letter-spacing: .05em; color: var(--frost-3); background: none; border: 0; padding: 4px 2px; cursor: pointer; white-space: nowrap; } /* ---- the answer ---- */ .tn__plansub{ margin: 2px 0 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; color: var(--gold); } .tn__stops{ list-style: none; margin: 0; padding: 0; } .tn__stop{ display: grid; grid-template-columns: 62px 1fr 26px; gap: 0 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(255,216,0, .15); } .tn__stoptime{ grid-column: 1; font-family: var(--pixel); font-size: 16px; letter-spacing: .03em; color: var(--gold); } .tn__stopname{ grid-column: 2; text-align: left; font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .03em; line-height: 1.1; color: var(--ice-white); background: none; border: 0; padding: 0; cursor: pointer; } .tn__stop.is-food .tn__stopname{ color: var(--ice-bright); cursor: default; } .tn__stopx{ grid-column: 3; grid-row: 1 / span 3; align-self: start; justify-self: end; width: 24px; height: 24px; font-family: var(--pixel); font-size: 15px; line-height: 1; color: #fff; background: linear-gradient(180deg, #ff86c2, #c00e63); border: 2px outset #ffd7ec; border-radius: 50%; cursor: pointer; } .tn__stopact{ grid-column: 2; font-size: 12px; line-height: 1.3; color: var(--ice-light); } .tn__stopwhy{ grid-column: 2; font-family: var(--pixel); font-size: 13px; letter-spacing: .02em; color: var(--frost-3); } .tn__leg{ display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 70px; font-family: var(--pixel); font-size: 14px; letter-spacing: .06em; color: var(--ice-light); } .tn__leg::before{ content: "\2193"; color: var(--line); } .tn__uber{ font-family: var(--pixel); font-size: 13px; letter-spacing: .08em; text-decoration: none; color: var(--ice-white); background: rgba(255,216,0, .10); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; } .tn__planempty{ margin: 8px 0 0; font-family: var(--pixel); font-size: 14px; letter-spacing: .02em; color: var(--gold); } .tn__credit{ margin: 10px 0 0; font-family: var(--pixel); font-size: 12px; letter-spacing: .02em; color: var(--frost-3); } /* the handbill's own way into the night */ .tn__addplan{ font-family: var(--pixel); font-size: 15px; letter-spacing: .06em; color: #3a2600; background: linear-gradient(180deg, #ffe89a 0%, var(--gold) 55%, #e6b800 100%); border: 2px outset #fff0b8; border-radius: 7px; padding: 5px 10px; cursor: pointer; } .tn__addplan.is-in{ color: var(--gold); background: rgba(255, 216, 77, .12); border: 1px solid rgba(255, 216, 77, .7); }