joshuaandClaude Opus 5.5
f1b3a862f8
- Share links section: scoreboard link, every judged game's judge links and open link with QR codes, and 'Copy all judge links' as plain text for WhatsApp. Warns when links point at localhost. - Error and not-found pages with plain-language copy; a real start page. - Accessibility: darker 'alert strong' red for text and white-on-red (Alert was 4.0:1 on white), no text below 70% ink, 44px block buttons and link targets, scoreboard status stays readable when idle. - vercel.json pins functions to Dublin next to the West EU database; README documents deployment and pre-game-night checks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
93 lines
1.8 KiB
CSS
93 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Design tokens from docs/UI.md. */
|
|
:root {
|
|
--stage: #1b1640;
|
|
--floodlight: #ffd23f;
|
|
--chalk: #f5f7fa;
|
|
--ink: #14213d;
|
|
--signal: #2ec4b6;
|
|
--alert: #e63946;
|
|
/* Alert darkened to pass 4.5:1 as text on white, and as a background under white text. */
|
|
--alert-strong: #c1121f;
|
|
}
|
|
|
|
/* Expose the tokens as Tailwind utilities: bg-stage, text-ink, font-display, ... */
|
|
@theme inline {
|
|
--color-stage: var(--stage);
|
|
--color-floodlight: var(--floodlight);
|
|
--color-chalk: var(--chalk);
|
|
--color-ink: var(--ink);
|
|
--color-signal: var(--signal);
|
|
--color-alert: var(--alert);
|
|
--color-alert-strong: var(--alert-strong);
|
|
--font-display: var(--font-big-shoulders), ui-sans-serif, system-ui, sans-serif;
|
|
--font-sans: var(--font-atkinson), ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: var(--chalk);
|
|
color: var(--ink);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 3px solid var(--ink);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Scoreboard reveal: a shaking "?" covers the row for a beat (the drum-roll), then the
|
|
cover fades and the team pops in. */
|
|
@keyframes reveal-in {
|
|
0%,
|
|
70% {
|
|
transform: scale(1);
|
|
}
|
|
82% {
|
|
transform: scale(1.04);
|
|
}
|
|
}
|
|
|
|
@keyframes reveal-cover {
|
|
0%,
|
|
70% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@keyframes reveal-shake {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-0.5vh) rotate(-4deg);
|
|
}
|
|
50% {
|
|
transform: translateX(0.5vh) rotate(4deg);
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--animate-reveal-in: reveal-in 1800ms ease-out both;
|
|
}
|
|
|
|
.reveal-cover {
|
|
animation: reveal-cover 1800ms ease-out both;
|
|
}
|
|
|
|
.reveal-shake {
|
|
display: inline-block;
|
|
animation: reveal-shake 140ms ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.animate-reveal-in {
|
|
animation: none;
|
|
}
|
|
|
|
.reveal-cover {
|
|
display: none;
|
|
}
|
|
}
|