/* callboard, the SPIKE TAPE look. * * A LOOK, not a brightness. The three screen settings (House, Dark, Tech) are * about how much light the room can take; this is about what callboard looks * like, and it works under all three. Chosen by Rob on 2026-09-21 out of three * mockups: the deck. Hard corners, thick rules, tall stencil caps like road * case lettering, and colour that is spike tape and MEANS something: * * green it is set (a time with a name in it, a finished step) * yellow this is the one now (the step you are on, a thing being asked) * pink a loose end (somebody to chase, a problem) * blue paperwork * * THE ONE RULE OF THIS FILE: every selector starts with * :root[data-look="spike"]. Nothing here can touch the Classic look, which is * what the show is running on the day this shipped. server/test.js reads this * file and fails if a single rule escapes that scope. * * It leans on app.css being token-driven: most of the look is the variables * below. The rest is the handful of components whose shape is the point. */ /* ---- tokens: shape and type, under every brightness ---- */ :root[data-look="spike"]{ --radius:0px; --radius-sm:0px; --shadow:none; --shadow-lg:none; --font-display:'Big Shoulders Display','Archivo Narrow','Arial Narrow',Impact,sans-serif; --font-body:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --tape-go:var(--teal); --tape-now:var(--amber); --tape-chase:var(--coral); --tape-paper:var(--club); --edge:var(--line); --on-tape:#0a0a0a; --glow:none; } /* ---- colour: Dark is the deck itself ---- */ :root[data-look="spike"]:not([data-theme="house"]):not([data-theme="tech"]){ --bg:#0a0a0a; --surface:#141414; --surface2:#1d1d1c; --line:#33312d; --edge:#4d4a44; --ink:#f4f2ec; --ink-dim:#c9c6bd; --ink-faint:#a5a29a; --teal:#25b866; --amber:#ffd60a; --coral:#ff4f9a; --violet:#b58cff; --club:#3fa9f5; --accent:#f4f2ec; --bulb:#ffd60a; } /* House: the same deck with the work lights on. The token colours double as TEXT colours all over the app, and tape yellow is unreadable as text on white, so the text tokens go dark and the tape keeps its own bright values. */ :root[data-look="spike"][data-theme="house"]{ --bg:#eceae4; --surface:#ffffff; --surface2:#f4f2ec; --line:#c9c5bb; --edge:#0a0a0a; --ink:#0a0a0a; --ink-dim:#3d3b37; --ink-faint:#5f5c56; --teal:#127a3e; --amber:#7a5c00; --coral:#c2185b; --violet:#5d31a6; --club:#0b6a8f; --accent:#0a0a0a; --bulb:#ffd60a; --tape-go:#25b866; --tape-now:#ffd60a; --tape-chase:#ff4f9a; --tape-paper:#3fa9f5; } /* Tech keeps its own red-and-amber palette untouched, because that palette is there to protect night vision in the house, not to look nice. Only the edges get firmer; the tape reads in Tech's colours through the tokens above. */ :root[data-look="spike"][data-theme="tech"]{ --edge:#4a2f22; --on-tape:#0a0708; } /* ---- shape: hard corners, no shadows, anywhere ---- */ :root[data-look="spike"] *, :root[data-look="spike"] *::before, :root[data-look="spike"] *::after{border-radius:0 !important;box-shadow:none !important} /* The glow was the focus ring. Hard-edged and impossible to miss instead. */ :root[data-look="spike"] :focus-visible{outline:3px solid var(--tape-now) !important;outline-offset:2px} /* ---- type: stencil caps for anything that names a thing ---- */ :root[data-look="spike"] h1, :root[data-look="spike"] h2, :root[data-look="spike"] .showcard h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.025em;line-height:1.02} :root[data-look="spike"] h1{font-size:34px} :root[data-look="spike"] .card h2{font-size:26px;letter-spacing:.025em;margin-bottom:5px} :root[data-look="spike"] .grouphd, :root[data-look="spike"] .runway h3, :root[data-look="spike"] th, :root[data-look="spike"] .stat .k{font-family:var(--font-body);font-weight:700;letter-spacing:.13em} :root[data-look="spike"] .stat .v{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:.02em} /* ---- the top bar: black in every brightness, tape along the bottom ---- The variables are re-set ON the bar, so everything inside it (the show picker, the nav, the switches) recolours itself without a rule each. */ :root[data-look="spike"] .marquee{ --bg:#0a0a0a; --surface:#0a0a0a; --surface2:#1d1d1c; --line:#3a3833; --edge:#4d4a44; --ink:#ffffff; --ink-dim:#d6d3ca; --ink-faint:#a5a29a; --accent:#ffffff; background:#0a0a0a;color:#ffffff;border:0;border-bottom:10px solid var(--tape-now)} :root[data-look="spike"][data-theme="tech"] .marquee{--ink:#d8b43c;--ink-dim:#bd9730;--accent:#d8b43c;color:#d8b43c;background:#0a0708} :root[data-look="spike"] .bulbs{display:none} /* The wordmark is button.home in the header (.wordmark is the sign-in gate's). */ :root[data-look="spike"] .home, :root[data-look="spike"] .wordmark{font-family:var(--font-display);text-transform:uppercase;font-weight:900;font-size:30px;letter-spacing:.04em;line-height:1} :root[data-look="spike"] .home b, :root[data-look="spike"] .wordmark b{color:var(--tape-now)} :root[data-look="spike"][data-theme="house"] .home b, :root[data-look="spike"][data-theme="house"] .wordmark b{color:#ffd60a} :root[data-look="spike"] .themes button{border-width:2px;text-transform:uppercase;letter-spacing:.06em;font-size:11px} /* ---- surfaces ---- */ :root[data-look="spike"] .card{border:2px solid var(--edge)} :root[data-look="spike"] .stat, :root[data-look="spike"] .addbox{border-width:2px;border-color:var(--edge)} :root[data-look="spike"] input, :root[data-look="spike"] select, :root[data-look="spike"] textarea{border:2px solid var(--edge);background:var(--surface)} :root[data-look="spike"] .chip, :root[data-look="spike"] .num, :root[data-look="spike"] .pill, :root[data-look="spike"] .pill2{border-width:2px} /* ---- buttons: gaff black or gaff white, tape yellow when you are on it ---- */ :root[data-look="spike"] button.primary{background:var(--ink);color:var(--bg);border:2px solid var(--ink); text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:13px} :root[data-look="spike"] button.primary:hover{filter:none;background:var(--tape-now);border-color:var(--tape-now);color:var(--on-tape)} /* Disabled stays gaff-coloured, never tape yellow: yellow means "this one, now". */ :root[data-look="spike"] button.primary:disabled:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)} :root[data-look="spike"] button.ghost, :root[data-look="spike"] .seg button{border:2px solid var(--edge)} :root[data-look="spike"] main button:where(:not([class])), :root[data-look="spike"] .drawer button:where(:not([class])){border:2px solid var(--edge)} :root[data-look="spike"] button.danger{border:2px solid var(--tape-chase);color:var(--coral); text-transform:uppercase;letter-spacing:.07em;font-size:13px} :root[data-look="spike"] button.danger:not(:disabled):hover{background:var(--tape-chase);color:var(--on-tape)} :root[data-look="spike"] .seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} :root[data-look="spike"] aside#rail button[aria-current="true"]{border-color:transparent;border-left:8px solid var(--tape-now);background:var(--surface)} /* ---- the runway: yellow tape across the top, the live step IS the tape ---- */ :root[data-look="spike"] .runway{border:2px solid var(--edge);border-top:10px solid var(--tape-now);background:var(--surface)} :root[data-look="spike"] .runway li{border:2px solid var(--edge)} :root[data-look="spike"] .runway li .num{border-width:2px} :root[data-look="spike"] .runway li.done .num{background:var(--tape-go);border-color:var(--tape-go);color:var(--on-tape)} :root[data-look="spike"] .runway li.next{background:var(--tape-now);border-color:var(--tape-now)} :root[data-look="spike"] .runway li.next .num{border-color:var(--on-tape);color:var(--on-tape)} :root[data-look="spike"] .runway li.next .what b, :root[data-look="spike"] .runway li.next .what span{color:var(--on-tape)} :root[data-look="spike"] .runway li.next .what b::after{color:var(--on-tape);opacity:.7} :root[data-look="spike"] .runway li.next button.primary{background:var(--on-tape);border-color:var(--on-tape);color:#ffffff} /* ---- the sign-up sheet: an open time is a dashed outline waiting for somebody; a taken one has green tape down its edge ---- */ :root[data-look="spike"] .slotbtn{border:2px dashed var(--edge);background:var(--surface)} :root[data-look="spike"] .slotbtn > div:first-child{font-family:var(--font-display) !important;font-size:23px !important; font-weight:800 !important;letter-spacing:.03em;line-height:1.05} :root[data-look="spike"] .slotbtn.taken{border-style:solid;border-left:8px solid var(--tape-go);opacity:1} :root[data-look="spike"] .slotbtn.here{background:color-mix(in srgb,var(--tape-go) 20%,var(--surface))} :root[data-look="spike"] .slotbtn.dance{border-style:solid;border-left:8px solid var(--tape-paper)} :root[data-look="spike"] .slotbtn:hover{border-color:var(--tape-now)} /* ---- loose ends are pink, things being asked are yellow ---- */ :root[data-look="spike"] .prob.note{border:2px solid var(--edge);border-left:10px solid var(--tape-chase)} :root[data-look="spike"] .askbox{border:2px solid var(--edge);border-top:10px solid var(--tape-now)} :root[data-look="spike"] .asked{border-left-width:8px} :root[data-look="spike"] .alert{border-width:2px} :root[data-look="spike"] .alert.warn{border-left:10px solid var(--tape-now)} :root[data-look="spike"] .alert.ok{border-left:10px solid var(--tape-go)} :root[data-look="spike"] .qacite{border-left-width:4px} /* the runway as one line */ :root[data-look="spike"] .runway .rwlbl{font-weight:700;letter-spacing:.13em} :root[data-look="spike"] .runway details > summary{padding:2px 0}