/* ======================================================================= ARTIST :: artist.css — every act's page, dressed as the band's own site The owner, 2026-09-23, on artist.html: "can you make them all use a ui like the frost milano one so it looks like their website not just another page". THE FROST MILANO ONE IS frost.html, and its UI is css/style.css: "Icy Y2K / late-90s GeoCities energy — beveled, chrome, snowbound". So every rule below that has a counterpart there is TRANSCRIBED from it — the ticker, the shell, the hero, the chrome wordmark, the glossy pills, the beveled tab bar, the grooved panels and their boxed heads, the tour table that stacks to cards on a phone, the checker band, the footer's pixel lines — same values, same names, so an act page reads as a sibling of his page and not an imitation of it. The site's masthead (js/info-nav.js) is tonight.css's, which already wears this family. WHAT IS NOT CARRIED OVER, on purpose: the snow and every ❄ (that is Frost Milano's brand, not the layout's — another band's page covered in his snowflakes would read as HIS page), the visitor counter (a number nobody counted), and "OFFICIAL" (nobody official made these pages). WHAT IS NEW is only what his page never needed: the A–Z roster, chips, the search box, the sizes a long band name needs, and the tab bar NOT sticky on a phone — frost.html's eight tabs stand four rows deep over the reading when it sticks at 390px, and a band page is read on a phone. All colour lives in :root, css/style.css's own tokens. Fonts arrive from the page (the three families frost.html loads); every stack has a real fallback. css/info.css is deliberately NOT linked — one skin per page, scripts/info-shell-check.mjs SKIN. ======================================================================= */ :root{ --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; --line: #e6c200; --chk-light: #f5edc8; --chk-dark: #141414; --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; --display: "Anton", "Impact", "Haettenschweiler", var(--emoji), sans-serif; --pixel: "VT323", "Courier New", var(--emoji), monospace; --body: "Space Grotesk", Verdana, Geneva, var(--emoji), sans-serif; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* the FROST ZONE ground — style.css's starfield glacier, verbatim */ body{ margin:0; font-family:var(--body); color:var(--ice-white); line-height:1.55; -webkit-text-size-adjust:100%; 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%; background-attachment:fixed; padding-bottom:84px; /* the map sticker's corner at the end of the scroll */ } a{ color:var(--ice-bright); } /* ===================== the site's masthead (js/info-nav.js) ===================== tonight.css's block: one pixel-type strip that scrolls away, so the page under it is the band's */ .ibar{ display:flex; align-items:baseline; gap:14px; padding:6px 12px 5px 74px; /* clear of the paper sticker, top-left */ padding-right:calc(12px + var(--fsg-dock-w, 0px)); 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; } .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; } /* ===================== TOP TICKER (style.css) ===================== */ .top-ticker{ position:sticky; top:0; z-index:500; background:linear-gradient(180deg,#2a2a2a,#161616); border-bottom:3px ridge var(--frost-3); overflow:hidden; white-space:nowrap; font-family:var(--pixel); font-size:1.25rem; letter-spacing:1px; color:#ffe873; text-shadow:0 0 8px rgba(255,216,0,.6); } .top-ticker__track{ display:inline-block; padding:6px 0; animation:ticker 28s linear infinite; } @keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } /* ===================== SHELL (style.css) ===================== */ .shell{ max-width:980px; margin:22px auto; padding:16px; background:linear-gradient(180deg, rgba(26,22,0,.92), rgba(20,20,20,.94)); border:5px ridge var(--frost-3); border-radius:10px; box-shadow: 0 0 0 2px #050505, 0 0 40px rgba(255,216,0,.25), inset 0 0 60px rgba(255,216,0,.06); } /* ===================== HERO (style.css) ===================== */ .hero{ text-align:center; padding:14px 12px 8px; position:relative; } .hero__blink{ font-family:var(--pixel); font-size:1.1rem; color:#ffe9a8; letter-spacing:2px; margin-bottom:10px; animation:blink 1.1s steps(2,start) infinite; } @keyframes blink{ 50%{ opacity:.15; } } /* THE WORDMARK: style.css's chrome text wordmark, which frost.html now keeps for readers under his logo. A band with no logo on file wears its NAME in it — the one thing the book knows about how it looks. */ .wordmark{ margin:0; line-height:.86; letter-spacing:2px; font-family:var(--display); font-size:clamp(3.4rem, 15vw, 9rem); font-weight:400; text-transform:uppercase; overflow-wrap:break-word; } .wordmark--long{ font-size:clamp(2.4rem, 10.5vw, 6rem); line-height:.95; } .wordmark--xlong{ font-size:clamp(1.9rem, 8vw, 4.4rem); line-height:1; } /* A BAND THAT HAS CLAIMED ITS PAGE is set as it spells itself, capitals and all (the owner, 2026-09-24: "use their own spelling in the big letters"); every other act keeps the all-capitals wordmark above. js/artist-page.js adds this class only for a name js/act-book.js namesFrom() gave it. */ .wordmark--own{ text-transform:none; line-height:1; } /* THE GOLD IS PAINTED INSIDE THE LINE'S BOX (background-clip:text), and the capitals' .86 line box stops at the baseline — so a lower-case g, j, p, q or y had its tail cut off flat (photographed at 390 px on "Agent Orange", 2026-09-24). The padding grows the painted box over the tails; the equal negative margin keeps the lines where they were. */ .wordmark--own .wordmark__line{ padding-bottom:.2em; margin-bottom:-.2em; } .wordmark__line{ display:block; background:linear-gradient(180deg, #ffffff 0%, #fff6cc 22%, #ffe27a 40%, #d6b000 55%, #ffffff 70%, #8a7200 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 2px 0 #1e1e1e) drop-shadow(0 4px 10px rgba(0,0,0,.6)); text-shadow:0 0 30px rgba(255,216,0,.35); } .wordmark__line--2{ background:linear-gradient(180deg, #ffffff 0%, #ffeaa0 30%, #d4ae00 52%, #ffffff 66%, #8a7200 100%); -webkit-background-clip:text; background-clip:text; } .hero__tag{ font-family:var(--pixel); font-size:1.35rem; color:var(--ice-light); margin:12px 0 14px; letter-spacing:1px; text-shadow:0 0 10px rgba(255,216,0,.4); } .hero__buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; } /* ===================== BUTTONS — glossy Y2K pills (style.css) ===================== */ .btn{ --b1:#ffe14d; --b2:#a68a00; display:inline-block; text-decoration:none; cursor:pointer; font-family:var(--display); letter-spacing:1.5px; text-transform:uppercase; color:#1a1600; background:linear-gradient(180deg,#ffffff 0%,var(--b1) 45%,var(--b2) 100%); border:2px solid #fff8dc; border-radius:999px; padding:10px 20px; font-size:1rem; box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 6px rgba(20,16,0,.4), 0 3px 0 #1e1e1e, 0 5px 14px rgba(0,0,0,.5); transition:transform .08s ease, filter .12s ease; text-shadow:0 1px 0 rgba(255,255,255,.5); } .btn:hover{ filter:brightness(1.12) saturate(1.1); transform:translateY(-1px); } .btn:active{ transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -2px 5px rgba(20,16,0,.5), 0 1px 0 #1e1e1e; } .btn--big{ font-size:1.3rem; padding:14px 26px; } .btn--sm{ font-size:.85rem; padding:7px 14px; } .btn--warm{ --b1:#ff86c2; --b2:#c00e63; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.4); border-color:#ffd7ec; } .btn--tonight{ --b1:#f3cf7a; --b2:#8a5a12; color:#241606; border-color:#ffeec4; text-shadow:0 1px 0 rgba(255,255,255,.45); } button.btn{ font-family:var(--display); } /* ===================== CHECKERBOARD (style.css) ===================== */ .checker-band{ height:16px; background:conic-gradient( var(--chk-dark) 0 25%, var(--chk-light) 0 50%, var(--chk-dark) 0 75%, var(--chk-light) 0) 0 0 / 16px 16px; border-top:2px solid var(--frost-4); border-bottom:2px solid var(--frost-4); margin:16px 0 20px; } /* ===================== NAV — the beveled tab bar (style.css) ===================== */ .navbar{ position:sticky; top:40px; z-index:400; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:10px; margin:14px 0 26px; background:linear-gradient(180deg,#2a2a2a,#181818); border:4px ridge var(--frost-3); border-radius:8px; box-shadow:0 4px 0 #000000, 0 8px 18px rgba(0,0,0,.5); } .navbar:empty{ display:none; } .navbar__btn{ font-family:var(--display); letter-spacing:1px; text-decoration:none; color:#fff8dc; font-size:1rem; padding:6px 14px; border-radius:6px; background:linear-gradient(180deg,#5a4a00,#2a2300); border:2px outset #e6c200; text-shadow:0 1px 0 #050505; transition:filter .12s ease, transform .08s ease; } .navbar__btn:hover{ filter:brightness(1.25); color:#fff; transform:translateY(-1px); } .navbar__btn:active{ border-style:inset; transform:translateY(1px); } /* the directory's A–Z: twenty-seven letters, so small and never sticky */ .navbar--letters{ position:static; gap:5px; } .navbar--letters .navbar__btn{ min-width:34px; text-align:center; padding:4px 6px; font-size:.95rem; } /* ===================== PANELS / SECTIONS (style.css) ===================== */ .panel{ margin:0 0 30px; padding:20px; background:linear-gradient(180deg, rgba(30,26,0,.55), rgba(10,10,10,.6)); border:3px groove var(--frost-4); border-radius:8px; scroll-margin-top:96px; } .section-head{ text-align:center; margin:0 0 6px; font-family:var(--display); font-size:clamp(1.7rem,5vw,2.6rem); font-weight:400; letter-spacing:2px; text-transform:uppercase; } .section-head span{ display:inline-block; padding:6px 22px; background:linear-gradient(180deg,#3d3200,#1a1a1a); border:3px ridge var(--frost-3); border-radius:6px; color:#fff8dc; text-shadow:0 0 14px rgba(255,216,0,.6), 0 2px 0 #050505; box-shadow:0 3px 0 #000000; } .section-sub{ text-align:center; font-family:var(--pixel); font-size:1.15rem; color:var(--ice-light); margin:8px 0 18px; } .minihead{ font-family:var(--display); font-weight:400; letter-spacing:1px; font-size:1.15rem; color:#ffe873; margin:18px 0 8px; text-shadow:0 0 10px rgba(255,216,0,.4); scroll-margin-top:60px; } .maillink{ font-family:var(--pixel); font-size:1.25rem; } /* ===================== TOUR TABLE (style.css) ===================== */ .tour__band{ font-family:var(--pixel); font-size:1rem; letter-spacing:1px; color:#ffd257; text-shadow:0 0 8px rgba(255,190,60,.35); } .tour__band b{ color:#fff8dc; } .tour-wrap{ overflow-x:auto; } .tour{ width:100%; border-collapse:separate; border-spacing:0; border:3px ridge var(--frost-3); border-radius:6px; overflow:hidden; font-size:1rem; } .tour th{ background:linear-gradient(180deg,#3d3200,#1a1a1a); font-family:var(--display); letter-spacing:1.5px; text-transform:uppercase; color:#fff8dc; padding:10px 12px; text-align:left; font-weight:400; border-bottom:2px solid #1e1e1e; } .tour td{ padding:10px 12px; border-bottom:1px dashed #8a7200; vertical-align:top; } .tour tbody tr:nth-child(odd){ background:rgba(60,50,0,.35); } .tour tbody tr:nth-child(even){ background:rgba(20,20,20,.4); } .tour tbody tr:hover{ background:rgba(255,216,0,.14); } .tour td:first-child{ font-family:var(--pixel); font-size:1.2rem; color:#ffe873; white-space:nowrap; } .tour td:last-child{ white-space:nowrap; } .tour td:last-child .btn + a{ margin-left:6px; } .art__room{ color:#fff8dc; font-weight:700; text-decoration:none; } .art__room:hover{ text-decoration:underline; } .art__meta{ display:block; font-size:.85rem; color:#d6b000; } /* ===================== FOOTER (style.css) ===================== */ .footer{ text-align:center; padding:18px 10px 6px; margin-top:6px; } .footer__line{ font-family:var(--pixel); font-size:1.05rem; color:var(--ice-light); margin:4px 0; } .footer__small{ font-size:.95rem; color:#d6b000; } /* ===================== what his page never needed ===================== the chips (rooms, bills-with, tonight) wear the tab bar's own button; the roster rows wear the tour table's striping */ .art__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .art__chips .navbar__btn{ font-size:.95rem; } .art__n{ color:var(--ice-bright); font-weight:400; margin-left:3px; } .art__more{ margin:16px 0 4px; } .art__fine{ font-size:.95rem; color:#d6b000; } .art__search{ display:block; width:100%; margin:0 0 22px; font-family:var(--body); font-size:1rem; color:#fff8dc; background:#0c0c0c; border:2px inset #8a7200; border-radius:4px; padding:10px 12px; } .art__search:focus{ outline:2px solid var(--ice-bright); border-color:var(--ice-bright); } .art__search::placeholder{ color:#d6b000; } .art__search[hidden]{ display:none; } .art__roster{ border:3px ridge var(--frost-3); border-radius:6px; overflow:hidden; } .art__row{ display:flex; align-items:baseline; gap:10px; padding:9px 12px; border-bottom:1px dashed #8a7200; color:#fff8dc; text-decoration:none; } .art__row:nth-child(odd){ background:rgba(60,50,0,.35); } .art__row:nth-child(even){ background:rgba(20,20,20,.4); } .art__row:hover, .art__row:active{ background:rgba(255,216,0,.14); } .art__row:last-child{ border-bottom:0; } .art__name{ flex:1 1 auto; font-weight:700; } .art__count{ flex:0 0 auto; font-family:var(--pixel); font-size:1.1rem; color:#ffe873; } .art__badge{ flex:0 0 auto; font-family:var(--display); letter-spacing:1px; font-size:.8rem; color:#1a1600; background:var(--ice-bright); border:2px outset var(--ice-light); border-radius:4px; padding:0 6px; } /* ===================== RESPONSIVE (style.css, plus the phone tab bar) ===================== */ @media (max-width:720px){ .navbar{ top:38px; } /* stack the tour table into cards */ .tour thead{ display:none; } .tour, .tour tbody, .tour tr, .tour td{ display:block; width:100%; } .tour tr{ margin-bottom:12px; border:2px ridge var(--frost-4); border-radius:6px; } .tour td{ border-bottom:1px dashed #8a7200; padding:8px 12px; white-space:normal; } .tour td::before{ content:attr(data-label); display:inline-block; min-width:70px; font-family:var(--display); letter-spacing:1px; color:#f0c800; margin-right:8px; } .tour td:last-child::before{ content:""; min-width:0; } } @media (max-width:760px){ /* NEW: frost.html's tabs stick four rows deep over the page at 390px; a band page is read on a phone, so here they scroll away with the hero */ .navbar{ position:static; } .ibar{ padding-top:60px; padding-left:12px; justify-content:center; flex-wrap:wrap; white-space:normal; } .shell{ margin:14px 8px; padding:10px; } .panel{ padding:16px 12px; } .section-head span{ padding:6px 14px; } } @media (max-height:460px) and (orientation:landscape){ .ibar{ padding-top:6px; padding-left:74px; justify-content:flex-start; flex-wrap:nowrap; white-space:nowrap; } .wordmark{ font-size:clamp(2.6rem, 9vw, 5rem); } .wordmark--long{ font-size:clamp(2rem, 6.5vw, 3.8rem); } .wordmark--xlong{ font-size:clamp(1.6rem, 5vw, 3rem); } .btn--big{ font-size:1.1rem; padding:10px 20px; } } /* ===================== reduced motion (style.css) ===================== */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; } html{ scroll-behavior:auto; } .top-ticker__track{ animation:none; } }