/* ========================================================================== Bursting Joy Leaderboard — "Twilight Fairway" Dark by design: these screens live on a bar TV and on phones in a dim simulator bay, so there is no light mode to fight with. ========================================================================== */ :root { --bg: #05100b; --bg-2: #081a11; /* Panels are a dark translucent scrim rather than a light film: the course photo shows through them, and text still clears 4.5:1 even over the brightest part of the sky. */ --surface: rgba(5, 18, 12, 0.58); --surface-2: rgba(255, 255, 255, 0.10); --border: rgba(255, 255, 255, 0.13); --border-2: rgba(255, 255, 255, 0.22); --fg: #e9f3ec; /* Lifted from the old #a9c0b3 / #7c9689: secondary text now sits over a visible photograph rather than near-black, and needed the contrast. */ --fg-dim: #bed2c6; --muted: #97b0a3; --accent: #3fbf6b; --accent-2: #6ee79a; --accent-ink: #04210f; --gold: #e8b74a; --gold-2: #f7dc9b; --silver: #c9d4da; --bronze: #cd8e52; --danger: #e2635a; --warn: #e0a944; --radius: 14px; --radius-lg: 22px; --shadow: 0 18px 44px rgba(0, 0, 0, 0.5); --ring: 0 0 0 3px rgba(63, 191, 107, 0.32); --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --maxw: 1120px; /* Background scene. To use a different photo, drop the file into assets/img/ and change the url below — nothing else needs to change. opacity how much of the photo shows through against the near-black page. Daylight photos need 0.35-0.5; the drawn course.svg wants 1. blur masks upscaling when the source is smaller than the screen, and lifts text legibility. Set to 0 for a genuinely high-res photo. Sizes and composition advice: README, "Swapping the background". A drawn, already-dark alternative ships alongside: course.svg */ --course-image: url('/assets/img/course-photo.jpg'); --course-opacity: 0.82; --course-blur: 1px; } /* Per-event board colours, set with data-theme on . One per season plus a holiday palette; ids must match THEMES in config.js. Each keeps a near-black ground so the course photo and white text still read. */ body[data-theme='spring'] { --accent: #5fd08a; --accent-2: #a8ecc4; --accent-ink: #06240f; --bg: #061409; --bg-2: #0c2415; --gold: #f0c987; --gold-2: #ffe6bb; --ring: 0 0 0 3px rgba(95, 208, 138, 0.32); } body[data-theme='summer'] { --accent: #35c6e8; --accent-2: #8fe6f7; --accent-ink: #03222b; --bg: #04131a; --bg-2: #082430; --gold: #ffd257; --gold-2: #ffe9a8; --ring: 0 0 0 3px rgba(53, 198, 232, 0.32); } body[data-theme='autumn'] { --accent: #e08641; --accent-2: #f7b97e; --accent-ink: #2a1204; --bg: #140b05; --bg-2: #26150a; --gold: #e8b74a; --gold-2: #f7dc9b; --ring: 0 0 0 3px rgba(224, 134, 65, 0.32); } body[data-theme='winter'] { --accent: #7fb6e8; --accent-2: #c3e2ff; --accent-ink: #06182b; --bg: #060d16; --bg-2: #0d1a29; --gold: #cfe0ee; --gold-2: #eef6ff; --silver: #dbe6ee; --ring: 0 0 0 3px rgba(127, 182, 232, 0.32); } body[data-theme='holiday'] { --accent: #2fae5e; --accent-2: #78dc9c; --accent-ink: #04200f; --bg: #0d0806; --bg-2: #1c0b0a; --danger: #e2534b; --gold: #e8bb52; --gold-2: #ffe6a3; --ring: 0 0 0 3px rgba(47, 174, 94, 0.32); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The course itself, anchored to the bottom of the viewport. It is drawn in neutral greens; the theme wash in ::after tints it, so one drawing serves all four board colours. */ body::before { content: ''; position: fixed; /* Overscanned so the blur's soft edge falls outside the viewport instead of showing as a pale border. */ inset: -16px; z-index: -2; opacity: var(--course-opacity); filter: blur(var(--course-blur, 0)); background-image: var(--course-image); background-repeat: no-repeat; /* Anchored to the bottom: the horizon stays put as the viewport changes, a portrait phone crops the sides rather than the ground, and on a wide screen it is the bright sky that gets cropped rather than the fairway. */ background-position: center bottom; background-size: cover; } /* Theme wash over the course: coloured light pools at the top, deepening to an almost-solid ground at the horizon so body text always has contrast. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Deliberately light. The photo is meant to read as a photo; legibility comes from the scrim on each panel and row, not from drowning the image. Kept stronger at the top and bottom, where the header and footer text sit. */ background: radial-gradient(1100px 620px at 15% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 28%, color-mix(in srgb, var(--bg) 30%, transparent) 62%, color-mix(in srgb, var(--bg) 62%, transparent) 100%); } /* The TV sits across a room, so give its text a heavier floor to sit on while leaving more of the course visible up top. */ body.tv::after { background: radial-gradient(1200px 680px at 12% -12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 68%, transparent) 0%, color-mix(in srgb, var(--bg) 34%, transparent) 45%, color-mix(in srgb, var(--bg) 66%, transparent) 100%); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.018em; margin: 0; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; } /* --- layout ------------------------------------------------------------- */ .shell { min-height: 100%; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px clamp(16px, 4vw, 32px); border-bottom: 1px solid var(--border); background: rgba(5, 16, 11, 0.72); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; } .brand { display: flex; align-items: center; gap: 13px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--fg); min-width: 0; } .brand:hover { text-decoration: none; } /* The lockup is white-on-transparent, so it needs the dark header behind it. */ .brand__logo { height: 42px; width: auto; flex: none; display: block; } /* Three lines, in order of what matters: the event, whose event it is, then the detail. Each gets its own line rather than being run together. */ .brand__text { min-width: 0; } .brand__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand__company { display: block; font-weight: 600; font-size: 0.82rem; color: var(--accent-2); letter-spacing: 0.01em; margin-top: 1px; overflow-wrap: break-word; } .brand__sub { color: var(--muted); font-weight: 500; font-size: 0.78rem; display: block; letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The brand takes the slack, which pushes everything else right; the pill, key and links are sized to content. Visual order is set here rather than in the markup so the phone layout can reorder without touching the DOM. */ .brand { flex: 1 1 auto; order: 1; } .topbar__nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: none; order: 2; } .topbar__actions { display: flex; gap: 6px; align-items: center; flex: none; order: 3; } .topbar__status { display: flex; align-items: center; flex: none; order: 4; } .icon-btn { order: 5; } .main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px) 72px; } .main--wide { max-width: 1400px; } .footer { padding: 26px 32px 34px; text-align: center; color: var(--muted); font-size: 0.8rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); } /* --- typography helpers ------------------------------------------------- */ /* Headings and lede can sit directly on the course photo, so they carry their own shadow rather than relying on a panel behind them. */ .eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700; color: var(--accent-2); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); } .page-title { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.08; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); } .lede { color: var(--fg-dim); font-size: 1.02rem; line-height: 1.6; margin: 12px 0 0; max-width: 62ch; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } .muted { color: var(--muted); } .section-title { font-size: 1.15rem; margin-bottom: 4px; } .stack { display: grid; gap: 18px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .nowrap { white-space: nowrap; } /* --- cards -------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 28px); /* Glass over the course rather than a solid panel: the photo stays legible through it, softened just enough that text on top stays crisp. */ backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } .card--tight { padding: 16px 18px; } /* Interactive cards lift very slightly; static ones stay put. */ .card--tight:has(a, button) { transition: border-color 0.18s ease, transform 0.18s ease; } .card--tight:has(a, button):hover { border-color: var(--border-2); transform: translateY(-1px); } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* --- buttons ------------------------------------------------------------ */ .btn { font: inherit; font-weight: 600; padding: 10px 17px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--fg); cursor: pointer; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease; display: inline-flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; line-height: 1.25; } .btn:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; } /* A short, slightly overshooting press so taps feel answered on a phone. */ .btn:active { transform: scale(0.97); transition-duration: 0.06s; } .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; } .btn--primary { background: linear-gradient(145deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 32%, transparent); } .btn--primary:hover { filter: brightness(1.07); background: linear-gradient(145deg, var(--accent), var(--accent-2)); } .btn--ghost { background: transparent; } .btn--danger { background: color-mix(in srgb, var(--danger) 20%, transparent); border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: #ffd9d5; } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 32%, transparent); } .btn--sm { padding: 6px 12px; font-size: 0.84rem; border-radius: 9px; } /* Deliberately quiet: staff need to find it, guests should not notice it. */ .icon-btn { font: inherit; font-size: 0.95rem; line-height: 1; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; opacity: 0.32; transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .icon-btn:hover { opacity: 1; background: var(--surface-2); border-color: var(--border); } .icon-btn.is-on { opacity: 1; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .btn--lg { padding: 14px 26px; font-size: 1.03rem; border-radius: 13px; } .btn--block { width: 100%; } .btn--icon { padding: 7px 10px; } /* --- forms -------------------------------------------------------------- */ .field { display: grid; gap: 6px; margin-bottom: 14px; } .field__label { font-size: 0.83rem; font-weight: 600; color: var(--fg-dim); } .field__hint { font-size: 0.76rem; color: var(--muted); line-height: 1.45; } .input, .select, .textarea { font: inherit; width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--border-2); background: rgba(0, 0, 0, 0.26); color: var(--fg); transition: border-color 0.18s ease; } .input:hover, .select:hover { border-color: rgba(255, 255, 255, 0.3); } .input::placeholder { color: #5d766a; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9c0b3' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; } .input--code { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.34em; text-align: center; text-transform: uppercase; padding: 15px 13px; } .input--score { font-variant-numeric: tabular-nums; text-align: right; } .input--inline { padding: 7px 10px; border-radius: 9px; font-size: 0.9rem; } .switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.88rem; user-select: none; } .switch input { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; } /* --- chips, pills, badges ----------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-dim); } .pill--live { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .pill--live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; } .pill--warn { color: #ffdca6; border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); } /* Steady, not pulsing: the pulse means "live", so losing it reads as stopped. */ .pill--offline { color: #ffd0cb; border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 16%, transparent); } .pill--offline::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .code-chip { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; font-size: 1.05rem; padding: 7px 15px; border-radius: 11px; background: rgba(0, 0, 0, 0.32); border: 1px dashed var(--border-2); color: var(--gold-2); } /* --- avatars ------------------------------------------------------------ */ .avatar { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #fff; background: linear-gradient(150deg, hsl(var(--hue) 55% 42%), hsl(var(--hue) 62% 27%)); border: 1px solid rgba(255, 255, 255, 0.14); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 15px; } /* --- stat tiles --------------------------------------------------------- */ .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; } .stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; } .stat__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; } /* --- tabs --------------------------------------------------------------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { font: inherit; font-weight: 600; font-size: 0.9rem; padding: 11px 15px; border: 0; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.16s ease, border-color 0.16s ease; } .tab:hover { color: var(--fg-dim); } .tab[aria-selected='true'] { color: var(--fg); border-bottom-color: var(--accent); } /* --- leaderboard -------------------------------------------------------- */ .board { width: 100%; border-collapse: collapse; } .board th { text-align: left; font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); font-weight: 700; padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; background: rgba(4, 15, 10, 0.5); } .board thead tr th:first-child { border-top-left-radius: 10px; } .board thead tr th:last-child { border-top-right-radius: 10px; } .board td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; } /* Alternating translucent bands, so the course shows between the rows while every line of text keeps its own scrim to sit on. */ .board tbody tr { transition: background 0.18s ease; } /* Both bands are neutral on purpose. An accent-tinted even row made 2nd place louder than 1st — row parity was beating the actual ranking. */ .board tbody tr:nth-child(odd) { background: rgba(4, 15, 10, 0.50); } .board tbody tr:nth-child(even) { background: rgba(4, 15, 10, 0.37); } .board .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .board .total { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; } .board__player { display: flex; align-items: center; gap: 11px; min-width: 0; } .board__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board__meta { font-size: 0.74rem; color: var(--muted); } .board tr.is-you { background: color-mix(in srgb, var(--accent) 15%, rgba(4, 15, 10, 0.50)); } /* Position is the only thing allowed to shout, so these come last and win at equal specificity — including over .is-you, which keeps its YOU label. */ .board tbody tr.is-rank-1 { background: color-mix(in srgb, var(--gold) 17%, rgba(4, 15, 10, 0.55)); box-shadow: inset 3px 0 0 var(--gold); } .board tbody tr.is-rank-2 { background: color-mix(in srgb, var(--silver) 11%, rgba(4, 15, 10, 0.52)); box-shadow: inset 3px 0 0 var(--silver); } .board tbody tr.is-rank-3 { background: color-mix(in srgb, var(--bronze) 12%, rgba(4, 15, 10, 0.52)); box-shadow: inset 3px 0 0 var(--bronze); } .board tbody tr:hover { background: color-mix(in srgb, var(--accent) 22%, rgba(4, 15, 10, 0.55)); } .board tr.is-you .board__name::after { content: 'YOU'; margin-left: 8px; font-size: 0.62rem; letter-spacing: 0.1em; padding: 2px 6px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); vertical-align: middle; font-weight: 800; } .rank { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; font-family: var(--font-display); font-weight: 800; font-size: 0.94rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-dim); font-variant-numeric: tabular-nums; } /* Winner takes a trophy; second and third take medals. */ .rank--1 { background: linear-gradient(145deg, var(--gold), #b98a1f); color: #2c1d00; border-color: transparent; box-shadow: 0 4px 14px rgba(232, 183, 74, 0.3); border-radius: 50%; } .rank--2 { background: linear-gradient(145deg, var(--silver), #8c9aa2); color: #1b2226; border-color: transparent; border-radius: 50%; } .rank--3 { background: linear-gradient(145deg, var(--bronze), #96602f); color: #2a1607; border-color: transparent; border-radius: 50%; } /* Takes the ink colour of whichever badge it sits in. */ .trophy { width: 64%; height: 64%; display: block; } .table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } /* --- podium ------------------------------------------------------------- */ .podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; } /* Winner centre-stage, the way a real podium reads. Purely visual: the markup stays in finishing order, so a single-column phone layout and a screen reader both get 1st, 2nd, 3rd. */ .podium__slot--1 { order: 2; } .podium__slot--2 { order: 1; } .podium__slot--3 { order: 3; } .podium__slot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 16px; text-align: center; position: relative; overflow: hidden; } .podium__slot--1 { border-color: color-mix(in srgb, var(--gold) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), var(--surface)); } .podium__slot--2 { border-color: color-mix(in srgb, var(--silver) 30%, transparent); } .podium__slot--3 { border-color: color-mix(in srgb, var(--bronze) 32%, transparent); } .podium__medal { display: flex; justify-content: center; line-height: 1; } .place { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .place--1 { background: linear-gradient(150deg, #f5d271, var(--gold) 45%, #a8781a); color: #2c1d00; box-shadow: 0 4px 16px rgba(232, 183, 74, 0.42); } .place--2 { background: linear-gradient(150deg, #eef3f6, var(--silver) 45%, #8b979e); color: #1b2226; } .place--3 { background: linear-gradient(150deg, #e6a877, var(--bronze) 45%, #8c5726); color: #2a1607; } .podium__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-top: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium__score { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--gold-2); margin-top: 3px; font-variant-numeric: tabular-nums; } .podium__label { font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 3px; } /* --- player switcher ----------------------------------------------------- */ /* One phone frequently covers a whole group, so switching between the players it holds is a single tap rather than a menu. */ .player-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .pchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--fg-dim); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; max-width: 100%; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease; backdrop-filter: blur(10px); } .pchip:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--fg); } .pchip .avatar { width: 26px; height: 26px; font-size: 0.64rem; border-radius: 8px; } .pchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pchip--add { padding-left: 13px; border-style: dashed; } .pchip__plus { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent-2); font-weight: 700; line-height: 1; } /* --- scorecard ---------------------------------------------------------- */ .scorecard { display: grid; gap: 12px; } .game-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; } .game-row__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; } .game-row__meta { font-size: 0.76rem; color: var(--muted); margin-top: 3px; } .game-row__entry { display: flex; gap: 8px; align-items: center; } .game-row__entry .input { width: 108px; } .game-row__standing { font-size: 0.78rem; color: var(--accent-2); font-weight: 600; margin-top: 3px; } /* --- mini golf card ------------------------------------------------------ */ .hole-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 17px; backdrop-filter: blur(12px); } .hole-card__total { text-align: right; flex: none; } .hole-card__total-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--gold-2); font-variant-numeric: tabular-nums; } .hole-card__total-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; } /* Wide enough to tap, narrow enough that 18 holes fit a phone in three rows. */ .hole-grid { display: grid; gap: 7px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); } .hole { display: flex; flex-direction: column; align-items: center; gap: 3px; } .hole__num { font-size: 0.66rem; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; } .hole__input { width: 100%; min-width: 0; text-align: center; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; padding: 9px 2px; border-radius: 9px; border: 1px solid var(--border-2); background: rgba(0, 0, 0, 0.3); color: var(--fg); } .hole__input:focus { border-color: var(--accent); outline: none; box-shadow: var(--ring); } .hole__input:disabled { opacity: 0.5; } /* --- admin grid --------------------------------------------------------- */ .score-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .score-grid th, .score-grid td { padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .score-grid th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-align: center; font-weight: 700; } .score-grid th:first-child, .score-grid td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-2); z-index: 1; min-width: 160px; } .score-grid .input { width: 92px; text-align: right; padding: 6px 9px; font-size: 0.88rem; } /* Totals derived from a hole-by-hole card: editing them discards the detail. */ .score-grid .input.is-derived { color: var(--gold-2); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .score-grid td { text-align: center; } /* --- TV display --------------------------------------------------------- */ body.tv { overflow: hidden; } .tv-stage { height: 100vh; display: flex; flex-direction: column; padding: clamp(20px, 2.6vh, 34px) clamp(24px, 3vw, 56px); } .tv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 2.5vw, 34px); margin-bottom: clamp(14px, 2vh, 26px); flex-wrap: wrap; } .tv-head__id { min-width: 0; flex: 1 1 340px; } .tv-title { font-size: clamp(1.9rem, 4.4vh, 3.4rem); line-height: 1.03; } .tv-sub { color: var(--accent-2); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; font-size: clamp(0.72rem, 1.5vh, 1rem); margin-bottom: 6px; } /* The join prompt is one panel: label across the top, QR and code side by side beneath it, so a guest reads it as a single instruction. */ .tv-join { flex: none; display: grid; grid-template-columns: auto auto; grid-template-areas: "label label" "qr code"; align-items: center; gap: clamp(6px, 1vh, 12px) clamp(12px, 1.6vw, 20px); padding: clamp(11px, 1.5vh, 18px) clamp(14px, 1.6vw, 22px); border-radius: 18px; background: rgba(4, 15, 10, 0.55); border: 1px solid var(--border); backdrop-filter: blur(12px); } .tv-join__label { grid-area: label; font-size: clamp(0.62rem, 1.2vh, 0.86rem); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-dim); white-space: nowrap; text-align: center; } .tv-join__code { grid-area: code; font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vh, 2.6rem); font-weight: 800; letter-spacing: 0.14em; color: var(--gold-2); line-height: 1.1; white-space: nowrap; } .tv-qr { grid-area: qr; width: clamp(84px, 11vh, 132px); height: clamp(84px, 11vh, 132px); background: #fff; border-radius: 12px; padding: 7px; flex: none; } .tv-qr img, .tv-qr canvas, .tv-qr svg { width: 100%; height: 100%; display: block; } .tv-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .tv-board { width: 100%; border-collapse: collapse; } .tv-board td { padding: clamp(5px, 1.05vh, 13px) 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: clamp(1rem, 2.5vh, 1.9rem); } /* Same banding as the phone board, so the course reads between the rows from across the room without costing legibility. */ .tv-board tbody tr:nth-child(odd) td { background: rgba(4, 15, 10, 0.48); } .tv-board tbody tr:nth-child(even) td { background: rgba(4, 15, 10, 0.36); } /* The podium reads as the podium from across the room; the alternating bands must never make second place look like the top of the board. */ .tv-board tbody tr.is-rank-1 td { background: color-mix(in srgb, var(--gold) 18%, rgba(4, 15, 10, 0.55)); } .tv-board tbody tr.is-rank-2 td { background: color-mix(in srgb, var(--silver) 11%, rgba(4, 15, 10, 0.52)); } .tv-board tbody tr.is-rank-3 td { background: color-mix(in srgb, var(--bronze) 12%, rgba(4, 15, 10, 0.52)); } .tv-board tbody tr.is-rank-1 td:first-child { box-shadow: inset 4px 0 0 var(--gold); } .tv-board tbody tr.is-rank-2 td:first-child { box-shadow: inset 4px 0 0 var(--silver); } .tv-board tbody tr.is-rank-3 td:first-child { box-shadow: inset 4px 0 0 var(--bronze); } .tv-board tbody tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .tv-board tbody tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* An unfinished card sits behind the completed ones and reads as provisional. */ .tv-board tr.is-unfinished .tv-name, .tv-board tr.is-unfinished .tv-value { opacity: 0.62; font-style: italic; } .tv-board tr.is-unfinished .tv-value { color: var(--fg-dim); } .tv-title, .tv-sub { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65); } .tv-join__code, .tv-join__label { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); } .tv-board .tv-rank { width: 1%; } .tv-board .tv-name { font-family: var(--font-display); font-weight: 600; } .tv-board .tv-value { text-align: right; font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold-2); white-space: nowrap; } .tv-board .tv-secondary { text-align: right; color: var(--muted); font-size: clamp(0.75rem, 1.6vh, 1.15rem); white-space: nowrap; } .tv-board tr:nth-child(1) .tv-value { color: var(--gold); } .tv-rank-badge { width: clamp(30px, 4.4vh, 54px); height: clamp(30px, 4.4vh, 54px); border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(0.85rem, 2vh, 1.5rem); background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-dim); } /* Medals for the podium: three places, so medals rather than a trophy, which reads as a single winner. Drawn rather than emoji so they are the same size and colour on every screen and hold up at viewing distance. */ .tv-rank-badge.is-medal { border: none; border-radius: 50%; color: #241a03; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .tv-rank-badge.is-medal-1 { background: linear-gradient(150deg, #f5d271, var(--gold) 45%, #a8781a); box-shadow: 0 3px 14px rgba(232, 183, 74, 0.4); } .tv-rank-badge.is-medal-2 { background: linear-gradient(150deg, #eef3f6, var(--silver) 45%, #8b979e); color: #1b2226; } .tv-rank-badge.is-medal-3 { background: linear-gradient(150deg, #e6a877, var(--bronze) 45%, #8c5726); color: #2a1607; } /* The client is the point of the display: it is their guests on the board. */ .tv-client { display: flex; align-items: center; gap: 14px; margin-top: 10px; min-width: 0; flex-wrap: wrap; } .tv-client__plate { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 12px; flex: none; /* A light plate so a dark logo is visible against the dark board. */ background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } /* Logos that are already white need the opposite treatment. */ .tv-client__plate.is-dark { background: rgba(0, 0, 0, 0.30); box-shadow: none; border: 1px solid var(--border); } .tv-client__plate img { display: block; max-height: clamp(30px, 5.2vh, 62px); max-width: clamp(120px, 20vw, 300px); width: auto; object-fit: contain; } /* Never truncated. This is the client's name on their own event — "Nei…" is worse than a second line. */ .tv-client__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.9rem, 2vh, 1.5rem); color: var(--fg); min-width: 0; overflow-wrap: break-word; } /* Our own mark, kept quiet — the venue is the host, not the headline. */ .tv-hostmark { height: clamp(34px, 5vh, 58px); width: auto; opacity: 0.5; display: block; margin: 26px auto 0; } .tv-hostmark--foot { margin: 0 0 0 4px; height: clamp(22px, 3.2vh, 38px); opacity: 0.4; } .tv-foot { display: flex; align-items: center; gap: 16px; margin-top: clamp(12px, 2vh, 22px); flex-wrap: wrap; } .tv-credit { font-size: clamp(0.6rem, 1.1vh, 0.8rem); color: var(--muted); opacity: 0.75; white-space: nowrap; } .tv-progress { flex: 1; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .tv-progress__bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; } .tv-dots { display: flex; gap: 7px; } .tv-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .tv-dot.is-on { background: var(--accent); } /* A phone previewing the TV view, or a narrow display. The join panel drops under the title and centres rather than squeezing the event name. */ @media (max-width: 900px) { .tv-head { gap: 14px; } .tv-head__id { flex: 1 1 100%; } .tv-join { width: 100%; justify-content: center; } .tv-board td { padding-left: 10px; padding-right: 10px; } } .fade-swap { animation: fadeSwap 0.5s ease; } @keyframes fadeSwap { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } } /* --- empty / loading ---------------------------------------------------- */ .empty { text-align: center; padding: 46px 22px; color: var(--muted); } .empty__icon { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.65; } .empty__title { font-family: var(--font-display); font-weight: 700; color: var(--fg-dim); font-size: 1.05rem; margin-bottom: 5px; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--accent); animation: spin 0.8s linear infinite; margin: 40px auto; } @keyframes spin { to { transform: rotate(360deg); } } /* Shaped placeholder so the board does not jump when the first snapshot lands. */ .skeleton { display: grid; gap: 9px; } .skeleton__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius); background: rgba(4, 15, 10, 0.44); animation: skeletonPulse 1.5s ease-in-out infinite; } .skeleton__badge { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.09); flex: none; } .skeleton__bar { height: 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.09); } .skeleton__bar--num { width: 46px; margin-left: auto; flex: none; } @keyframes skeletonPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } .notice { border-radius: var(--radius); padding: 14px 17px; border: 1px solid var(--border-2); background: var(--surface); font-size: 0.9rem; line-height: 1.55; } .notice--warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); } /* An enquiry nobody has answered yet. */ .is-new-lead { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* --- "book us" card ------------------------------------------------------ */ /* Quiet by design. These are a client's guests at a client's party; the card sits at the foot of a screen and never interrupts anything. */ .promo { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: rgba(4, 15, 10, 0.55); backdrop-filter: blur(12px); } .promo__logo { height: 46px; width: auto; flex: none; opacity: 0.9; } .promo__body { min-width: 0; } .promo__title { font-size: 1.02rem; margin-bottom: 4px; } .promo__text { margin: 0; font-size: 0.87rem; line-height: 1.5; color: var(--fg-dim); } .promo__services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .promo__details { margin: 10px 0 0; font-size: 0.83rem; color: var(--muted); } .promo__details a { color: var(--fg-dim); } .promo__details a:hover { color: var(--accent-2); } @media (max-width: 620px) { .promo { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; } .promo__logo { height: 38px; } } /* --- toasts ------------------------------------------------------------- */ #toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 9px; z-index: 200; width: min(440px, calc(100vw - 32px)); } .toast { padding: 12px 17px; border-radius: 12px; font-size: 0.9rem; font-weight: 500; background: #10241a; border: 1px solid var(--border-2); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; } .toast.is-in { opacity: 1; transform: none; } .toast--success { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .toast--error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: #2a1210; } /* --- modal -------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(2, 8, 5, 0.72); backdrop-filter: blur(5px); display: grid; place-items: center; padding: 20px; z-index: 300; animation: fadeSwap 0.2s ease; } .modal { background: #0b1c13; border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 26px; width: min(440px, 100%); box-shadow: var(--shadow); max-height: 88vh; overflow-y: auto; } .modal__title { font-size: 1.22rem; margin-bottom: 9px; } .modal__body { color: var(--fg-dim); font-size: 0.92rem; line-height: 1.6; margin: 0 0 18px; overflow-wrap: anywhere; } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } /* --- misc --------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .divider { height: 1px; background: var(--border); margin: 22px 0; } /* Shows the client logo the way the TV will, so the light/dark choice is checkable without walking to the screen. */ .logo-preview { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); min-height: 62px; max-width: 100%; } .logo-preview.is-dark { background: rgba(0, 0, 0, 0.34); border: 1px solid var(--border); } .logo-preview img { display: block; max-height: 54px; max-width: 210px; width: auto; object-fit: contain; } .version { font-variant-numeric: tabular-nums; font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.24); color: var(--muted); white-space: nowrap; } @media (max-width: 760px) { /* One column per mini game does not fit a phone, and letting it overflow made the board look truncated. Drop to rank / player / total — the per-game detail is a tap away on that game's own tab. */ .board .game-col { display: none; } } @media (max-width: 620px) { /* Stacked, so the podium arrangement no longer applies — put the winner back on top. */ .podium { grid-template-columns: 1fr; } .podium__slot--1, .podium__slot--2, .podium__slot--3 { order: 0; } .game-row { grid-template-columns: 1fr; } .game-row__entry { justify-content: space-between; } .game-row__entry .input { flex: 1; width: auto; } /* Two rows on a phone: identity on top with the live pill and key, page links beneath and right-aligned. The header is allowed to grow vertically — the logo, event name and company are the things people need to see, so they get the space rather than being squeezed onto one line. */ .topbar { gap: 10px; padding: 12px 14px; align-items: flex-start; } .brand { order: 1; flex: 1 1 0; align-items: flex-start; gap: 11px; } /* Actions stay in the corner on a phone; only `nav` drops to its own row. */ .topbar__actions { order: 2; } .topbar__status { order: 3; padding-top: 3px; } .icon-btn { order: 4; margin-top: -2px; } .topbar__nav { order: 5; flex: 1 0 100%; justify-content: flex-end; } .brand__logo { height: 40px; margin-top: 1px; } .brand__text { font-size: 1rem; line-height: 1.28; } /* The event name may run to two lines before truncating. */ .brand__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Company and subtitle wrap as far as they need — clamping them cut off the client's name, which is the one thing that must not be truncated. */ .brand__company { white-space: normal; overflow: visible; font-size: 0.86rem; margin-top: 2px; } .brand__sub { display: block; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; font-size: 0.79rem; margin-top: 2px; color: var(--fg-dim); } .board td, .board th { padding-left: 7px; padding-right: 7px; } .board__meta { font-size: 0.68rem; } .board .total { font-size: 1rem; } .avatar { width: 30px; height: 30px; font-size: 0.72rem; border-radius: 9px; } .rank { width: 29px; height: 29px; font-size: 0.84rem; border-radius: 8px; } /* The name column is what should absorb a narrow screen, not the numbers. */ .board__name { max-width: 42vw; } .main { padding-left: 13px; padding-right: 13px; } .card { padding-left: 15px; padding-right: 15px; } .tabs { margin-left: -13px; margin-right: -13px; padding-left: 13px; padding-right: 13px; } } @media print { body::before, body::after { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }