* { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue: #378ADD; --blue-light: #E6F1FB; --blue-dark: #185FA5; --green: #3B6D11; --green-light: #EAF3DE; --amber: #854F0B; --amber-light: #FAEEDA; --amber-strong: #D29922; --red: #E24B4A; --red-light: #FCEBEB; --gray: #888780; --gray-light: #F5F5F4; --text: #1A1A1A; --text-muted: #555555; --border: #E0DFD9; --bg: #F2F0EA; --surface: #fff; --gold: #BA7517; --red-border: #F09595; --red-strong: #A32D2D; --green-border: #C0DD97; --amber-border: #FAC775; --toggle-off: #ccc; --boulder-topped: #1A7A2E; --boulder-attempted: #1155AA; /* results.html's per-class "top 5" line-chart palette (read via cssVar() at render time, since Chart.js/canvas can't resolve var() itself). Only the two closest to black/near-black get a dark override below — the others already have enough contrast against both a white and a dark card background. */ --chart-1: #000000; --chart-2: #7EC8E3; --chart-3: #1B5E20; --chart-4: #FFD500; --chart-5: #F28B82; --radius: 10px; --radius-sm: 6px; } /* Dark theme — toggled via a data-theme attribute on , set by /js/theme-init.js (anti-flash, runs before paint) and public/js/ui.js (the footer toggle button). Only neutrals + tint/text pairs are overridden; --blue/--gray/--amber-strong/--boulder-* already have enough contrast in both themes and double as button fills, so changing them would trade one theme's readability for the other's. */ :root[data-theme="dark"] { --blue-light: #17314A; --blue-dark: #7FC3FF; --green: #56A83A; --green-light: #1C2E12; --amber: #E3AE55; --amber-light: #3A2B10; --red: #EF6B6A; --red-light: #3A1616; --gray-light: #2A281E; --text: #EDEBE3; --text-muted: #A6A395; --border: #3A382C; --bg: #17160F; --surface: #211F16; --gold: #E0A030; --red-border: #6E3030; --red-strong: #F0A0A0; --green-border: #3F5C2A; --amber-border: #6B4A18; --toggle-off: #454234; /* --chart-1 (black) and --chart-3 (dark green) are unreadable against a dark card background; --chart-2/4/5 are already light enough to work unchanged in both themes. */ --chart-1: #EDEBE3; --chart-3: #56A83A; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 1rem 0.75rem 3rem; } .container { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } /* Cards */ .card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 1rem 1.125rem; } .card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; } /* Topbar */ .topbar { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 0 0.625rem; margin-bottom: 0.5rem; } .topbar h1 { font-size: 17px; font-weight: 600; flex: 1; } .back-btn { background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; padding: 0 4px; line-height: 1; } /* Badges */ .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-live { background: var(--green-light); color: var(--green); } .badge-closed { background: var(--gray-light); color: var(--gray); } .badge-info { background: var(--blue-light); color: var(--blue-dark); } .badge-youth { background: var(--amber-light); color: var(--amber); } /* Form fields */ .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.75rem; } .field label { font-size: 13px; color: var(--text-muted); } .field .req { color: var(--red); margin-left: 2px; } .field .hint { font-size: 11px; color: var(--amber); margin-top: 2px; } input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea { width: 100%; padding: 9px 11px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); color: var(--text); appearance: none; -webkit-appearance: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); } /* Buttons */ .btn { display: block; width: 100%; padding: 11px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; border: none; text-align: center; text-decoration: none; transition: opacity 0.15s; } .btn:hover { opacity: 0.88; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn:disabled:hover { opacity: 0.4; } .btn-primary { background: var(--blue); color: #fff; } .btn-success { background: var(--green); color: #fff; } .btn-outline { background: transparent; border: 0.5px solid var(--border); color: var(--text); } .btn-outline:hover { background: var(--gray-light); opacity: 1; } .btn-danger { background: transparent; border: 0.5px solid var(--red); color: var(--red); } .btn-sm { width: auto; padding: 5px 13px; font-size: 13px; display: inline-block; } .btn-google { background: var(--surface); border: 0.5px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; gap: 10px; } /* Alerts */ .alert { padding: 10px 13px; border-radius: var(--radius-sm); font-size: 13px; display: none; } .alert-error { background: var(--red-light); border: 0.5px solid var(--red-border); color: var(--red-strong); } .alert-success { background: var(--green-light); border: 0.5px solid var(--green-border); color: var(--green); } .alert-info { background: var(--amber-light); border: 0.5px solid var(--amber-border); color: var(--amber); } /* Danger zone card (competition delete) */ .danger-zone { background: var(--red-light); border: 0.5px solid var(--red-border); } .danger-zone .card-title { color: var(--red-strong); } /* Stat boxes */ .stat-row { display: flex; gap: 8px; } .stat-box { flex: 1; background: var(--gray-light); border-radius: var(--radius-sm); padding: 10px; text-align: center; } .stat-num { font-size: 24px; font-weight: 700; } .stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* Leaderboard rows */ .lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--border); } .lb-row:last-child { border-bottom: none; } .lb-rank { width: 24px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: center; flex-shrink: 0; } .lb-rank.gold { color: var(--gold); } .lb-name { flex: 1; font-size: 14px; font-weight: 600; } .lb-meta { font-size: 12px; color: var(--text-muted); } .lb-score { text-align: right; flex-shrink: 0; } .lb-score .main { font-size: 14px; font-weight: 600; } .lb-score .sub { font-size: 11px; color: var(--text-muted); } /* Filter pills */ .filter-row { display: flex; gap: 6px; flex-wrap: wrap; } .pill { padding: 5px 13px; border-radius: 20px; border: 0.5px solid var(--border); font-size: 12px; cursor: pointer; background: transparent; color: var(--text-muted); } .pill.active { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); font-weight: 600; } /* Tabs */ .tabs { display: flex; border-bottom: 0.5px solid var(--border); margin-bottom: 1rem; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; } .tab { flex: 1; padding: 10px 4px; font-size: 13px; text-align: center; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; } .tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } /* Toggle */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 0.5px solid var(--border); } .toggle-row:last-child { border-bottom: none; } .toggle-label { font-size: 14px; } .toggle-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .toggle { width: 40px; height: 23px; border-radius: 12px; background: var(--toggle-off); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .toggle.on { background: var(--blue); } .toggle::after { content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--surface); top: 3px; left: 3px; transition: left 0.2s; } .toggle.on::after { left: 20px; } /* Boulder grid */ .boulder-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .boulder-btn { aspect-ratio: 1; border-radius: var(--radius-sm); border: 0.5px solid var(--border); font-size: 12px; font-weight: 600; cursor: pointer; background: var(--gray-light); color: var(--text-muted); display: flex; align-items: center; justify-content: center; } .boulder-btn.topped { background: var(--green-light); border-color: var(--green); color: var(--green); } .boulder-btn.attempted { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); } .boulder-btn { position: relative; } .boulder-attempt-badge { position: absolute; top: 2px; right: 3px; font-size: 9px; font-weight: 700; opacity: 0.85; line-height: 1; } .boulder-btn.selected { background: var(--amber-strong); border-color: var(--amber-strong); color: #fff; font-weight: 700;} /* Attempt stepper */ .stepper { display: flex; align-items: center; gap: 12px; } .stepper-btn { width: 38px; height: 38px; border-radius: 50%; border: 0.5px solid var(--border); background: var(--surface); color: var(--text); font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .stepper-btn:hover { background: var(--gray-light); } .stepper-val { font-size: 24px; font-weight: 700; width: 36px; text-align: center; } /* QR placeholder */ .qr-box { width: 130px; height: 130px; border: 0.5px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-light); display: flex; align-items: center; justify-content: center; margin: 0 auto; } /* Comp list row */ .comp-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0.5px solid var(--border); cursor: pointer; } .comp-row:last-child { border-bottom: none; } .comp-row:hover .comp-name { color: var(--blue); } .comp-name { font-size: 14px; font-weight: 600; flex: 1; } .comp-meta { font-size: 12px; color: var(--text-muted); } .comp-group-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 2px; } .comp-group-label:first-child { margin-top: 0; } /* lookup.html: the competition an athlete can still log results in */ .lookup-card-live { border-left: 3px solid var(--green); } .comp-archived { margin-top: 14px; } .comp-archived summary { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; list-style: none; } .comp-archived summary::-webkit-details-marker { display: none; } .comp-archived summary::before { content: '▸ '; } .comp-archived[open] summary::before { content: '▾ '; } /* Consent */ .consent-row { display: flex; align-items: flex-start; gap: 10px; } .consent-row input { margin-top: 2px; flex-shrink: 0; } .consent-row span { font-size: 13px; color: var(--text-muted); line-height: 1.4; } /* Chart.js canvas container -- needs a defined height + relative positioning for Chart.js's responsive resizing to size the canvas correctly (paired with maintainAspectRatio:false in the JS options) */ .chart-wrap { position: relative; height: 240px; } /* Spinner */ .spinner { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 14px; } /* Admin athlete edit row */ .athlete-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 0.5px solid var(--border); } .athlete-edit-row:last-child { border-bottom: none; } /* ── v2 additions ── */ /* Page header (organiser + venue logos) */ .page-header { padding: 10px 0 4px; } .header-logos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .header-logo-bi { height: 48px; width: auto; border-radius: 6px; } .header-logo-venue { height: 44px; width: auto; border-radius: 6px; } /* Footer */ footer { margin-top: 3rem; padding: 1.25rem 0 1rem; border-top: 0.5px solid var(--border); } .footer-inner { max-width: 480px; margin: 0 auto; padding: 0 0.75rem; display: flex; align-items: center; justify-content: space-between; } .footer-logo-tindebyte { height: 28px; width: auto; opacity: 0.7; transition: opacity 0.15s; } .footer-logo-tindebyte:hover { opacity: 1; } .theme-toggle, .feedback-btn { background: none; border: 0.5px solid var(--border); border-radius: 20px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; } .theme-toggle:hover, .feedback-btn:hover { background: var(--gray-light); } /* Feedback modal */ .feedback-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; } .feedback-overlay[hidden] { display: none; } .feedback-modal { max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: 10px; } .feedback-modal textarea { resize: vertical; min-height: 90px; font-family: inherit; } /* Onboarding tips modal (athlete.html, first visit only) */ .tips-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; } .tips-overlay[hidden] { display: none; } .tips-modal { max-width: 380px; width: 100%; display: flex; flex-direction: column; gap: 12px; } .tips-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; } .tips-icon { font-size: 16px; flex-shrink: 0; } /* Boulder colours v2 — stronger contrast */ .boulder-btn.topped { background: var(--boulder-topped); border-color: var(--boulder-topped); color: #fff; font-weight: 700; } .boulder-btn.attempted { background: var(--boulder-attempted); border-color: var(--boulder-attempted); color: #fff; font-weight: 700; } /* ABC badge */ .badge-abc-a { background: var(--green-light); color: var(--green); } .badge-abc-b { background: var(--blue-light); color: var(--blue-dark); } .badge-abc-c { background: var(--amber-light); color: var(--amber); } /* Company billing card */ .billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Lookup page */ .lookup-result { background: var(--green-light); border: 0.5px solid var(--green-border); border-radius: var(--radius); padding: 1rem 1.125rem; display: none; } /* Display screen */ .display-page { background: #0D1117; color: #fff; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .display-header { background: #161B22; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #30363D; } .display-header h1 { font-size: 20px; font-weight: 700; color: #fff; } .display-header .live-dot { width: 10px; height: 10px; border-radius: 50%; background: #3FB950; display: inline-block; margin-right: 6px; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .display-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #30363D; min-height: calc(100vh - 70px); } .display-col { background: #0D1117; padding: 0; } .display-col-header { background: #161B22; padding: 12px 16px; font-size: 13px; font-weight: 700; color: #8B949E; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #30363D; } .display-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #21262D; } .display-rank { width: 26px; font-size: 14px; font-weight: 700; color: #8B949E; flex-shrink:0; } .display-rank.gold { color: #D29922; } .display-name { flex: 1; font-size: 15px; font-weight: 600; color: #E6EDF3; } .display-team { font-size: 12px; color: #8B949E; } .display-score { text-align: right; flex-shrink: 0; } .display-score .tops { font-size: 15px; font-weight: 700; color: #3FB950; } .display-score .att { font-size: 11px; color: #8B949E; } .display-youth { background: #4A2900; color: #D29922; border-radius: 20px; padding: 1px 7px; font-size: 10px; font-weight: 700; } /* Import section */ .import-zone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.15s; } .import-zone:hover { border-color: var(--blue); } .import-zone.drag-over { border-color: var(--blue); background: var(--blue-light); } /* GDPR notice */ .gdpr-notice { background: var(--gray-light); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 12px; color: var(--text-muted); line-height: 1.5; } .gdpr-notice a { color: var(--blue); } /* Focus mode (athlete.html) — a distraction-free climbing-session view: footer/links/QR card are hidden, and the page fills the viewport using dvh (not vh) so a mobile browser's collapsing address bar doesn't leave a sliver of dead space or force a page-level scroll. The boulder grid is the one thing allowed to scroll internally, as a fallback for short or landscape screens rather than shrinking touch targets to force a fit. */ body.focus-mode { height: 100dvh; overflow: hidden; padding: 0; } body.focus-mode .container { height: 100dvh; overflow: hidden; padding: 0.5rem 0.75rem; } body.focus-mode footer, body.focus-mode #athlete-links, body.focus-mode #link-card, body.focus-mode #lb-link, body.focus-mode #athlete-name, body.focus-mode #score-card { display: none !important; } /* The name is dropped (you know who you are mid-session) and padding is cut to a minimum -- but the row itself stays, since #focus-toggle is the only way back out of this mode and it has to stay reachable without scrolling, same as the boulder grid's own controls. */ body.focus-mode .topbar { padding: 0.25rem 0; margin-bottom: 0.25rem; flex-shrink: 0; } body.focus-mode #boulders-card { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; } body.focus-mode #boulder-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; } body.focus-mode #detail-panel { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 480px; border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.25); z-index: 500; }