/* ============================================================================ Registration form - the whole stylesheet. Mobile first, and that is not a slogan: the overwhelming majority of race entries are typed on a phone, one-handed, outdoors, often in sunlight, often in a hurry the night before entries close. Everything below follows from that. - Controls are 48px tall. That is the size of a thumb, not the size of a mouse pointer, and it is the single change that does most for completion. - 16px is the minimum font size on any input. iOS zooms the viewport on focus for anything smaller, which throws the layout across the screen and feels broken. - One column until 640px. Two-column forms on a phone are how people end up filling in the wrong box. - Contrast is high and the accent is dark, not neon: this has to be legible on a cracked screen at midday. - No CSS framework. The whole file is ~10 KB and loads in one request. Dark mode follows the system, because a form opened from a phone at 23:50 is being read in bed. ============================================================================ */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --muted: #64748b; --accent: #0f172a; --accent-text: #ffffff; --ok: #059669; --warn: #b45309; --warn-bg: #fffbeb; --warn-border: #fcd34d; --danger: #dc2626; --danger-bg: #fef2f2; --danger-border: #fecaca; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ============================================================================ COLOUR PROFILES (data-theme on , set by rgSetTheme from the form's theme) 'auto' (or no attribute) FOLLOWS THE DEVICE - the @media block below. Every other value is an explicit choice and ignores the system setting. The organizer picks one in reg_builder; 'auto' keeps the original light/dark behaviour. ============================================================================ */ /* shared dark palette, applied by AUTO-at-night and by the forced DARK theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --bg: #0b1120; --surface: #111827; --surface-2: #1f2937; --border: #263244; --border-strong: #37455c; --text: #e5e7eb; --muted: #94a3b8; --accent: #e5e7eb; --accent-text: #0b1120; --ok: #34d399; --warn: #fbbf24; --warn-bg: #2a2110; --warn-border: #6b4d10; --danger: #f87171; --danger-bg: #2b1414; --danger-border: #6b2020; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); } } /* forced DARK - same palette, but regardless of the device setting */ :root[data-theme="dark"] { --bg: #0b1120; --surface: #111827; --surface-2: #1f2937; --border: #263244; --border-strong: #37455c; --text: #e5e7eb; --muted: #94a3b8; --accent: #38bdf8; --accent-text: #05121f; --ok: #34d399; --warn: #fbbf24; --warn-bg: #2a2110; --warn-border: #6b4d10; --danger: #f87171; --danger-bg: #2b1414; --danger-border: #6b2020; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35); } /* forced LIGHT needs nothing - the :root defaults above are already light, and the @media dark block no longer targets a forced theme. */ /* colour profiles: light base, one confident accent (buttons, steps, focus, choices) */ :root[data-theme="ocean"] { --accent: #0369a1; --accent-text: #ffffff; } :root[data-theme="forest"] { --accent: #047857; --accent-text: #ffffff; } :root[data-theme="sunset"] { --accent: #c2410c; --accent-text: #ffffff; } :root[data-theme="grape"] { --accent: #7c3aed; --accent-text: #ffffff; } :root[data-theme="rose"] { --accent: #be185d; --accent-text: #ffffff; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .rg-app { /* 100vh first: on a browser that has never heard of dvh, the second line is simply ignored and the page is still full height. Every modern feature in this file is written this way - the fallback is not decoration, it is what a 2019 Android phone at a start line actually renders. */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .rg-main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 16px 16px 24px; /* the bottom inset keeps the primary button clear of the iOS home bar */ padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } .rg-footer { text-align: center; padding: 24px 16px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 12px; } .rg-footer a { color: var(--muted); } /* ------------------------------ header ------------------------------ */ .rg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 4px 16px; } .rg-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .rg-header-html { flex: 1; min-width: 0; } .rg-header-html :is(h1, h2) { margin: 0; font-size: 22px; letter-spacing: -.02em; } /* ------------------------------ stepper ------------------------------ */ .rg-stepper { display: flex; gap: 4px; margin: 0 0 16px; } .rg-stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; } /* the connecting rail, drawn behind the dots */ .rg-stepper-item::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); } .rg-stepper-item:first-child::before { display: none; } .rg-stepper-item.is-done::before, .rg-stepper-item.is-now::before { background: var(--accent); } .rg-stepper-dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; } .rg-stepper-item.is-done .rg-stepper-dot, .rg-stepper-item.is-now .rg-stepper-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .rg-stepper-label { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; } .rg-stepper-item.is-now .rg-stepper-label { color: var(--text); font-weight: 600; } /* ------------------------------ card ------------------------------ */ .rg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .rg-center { text-align: center; } .rg-center h1 { font-size: 22px; margin: 8px 0; } .rg-h2 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 12px; } .rg-h2:first-child { margin-top: 0; } .rg-section { font-size: 16px; font-weight: 700; margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid var(--border); grid-column: 1 / -1; } .rg-lead { color: var(--muted); margin: 4px 0 16px; } .rg-muted { color: var(--muted); } .rg-ok { color: var(--ok); font-weight: 600; } .rg-danger { color: var(--danger); } .rg-sm { font-size: 14px; } .rg-xs { font-size: 12px; } .rg-hero { width: 100%; height: auto; max-height: 260px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 16px; display: block; } /* organizer HTML: it comes out of a rich-text editor and we do not control it, so it is contained rather than styled */ .rg-html { overflow-wrap: break-word; overflow-wrap: anywhere; } .rg-html img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .rg-html :is(h1, h2, h3) { line-height: 1.25; } .rg-html a { color: var(--text); } .rg-html-sm { font-size: 14px; color: var(--muted); } .rg-html-sm :is(h1, h2, h3) { color: var(--text); } /* ------------------------------ races ------------------------------ */ .rg-races { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .rg-race { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; } .rg-race:hover:not(:disabled) { border-color: var(--border-strong); } .rg-race.is-selected { border-color: var(--accent); background: var(--surface-2); } .rg-race.is-full { opacity: .5; cursor: not-allowed; } .rg-race-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rg-race-title { font-weight: 700; font-size: 17px; } .rg-race-sub { font-size: 13px; color: var(--muted); } .rg-race-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 2px; } .rg-race-price { font-weight: 700; font-size: 16px; white-space: nowrap; } .rg-free { color: var(--ok); font-size: 14px; } .rg-race-desc { margin: -4px 2px 4px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); } .rg-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; } .rg-chip-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); } .rg-chip-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } /* ------------------------------ fields ------------------------------ */ .rg-fields { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .rg-fields { grid-template-columns: 1fr 1fr; } .rg-field.is-wide { grid-column: 1 / -1; } } .rg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rg-label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .rg-req { color: var(--danger); font-weight: 700; } .rg-opt { color: var(--border-strong); font-weight: 400; font-size: 11px; } .rg-price-tag { margin-left: auto; color: var(--ok); font-weight: 700; font-size: 12px; } .rg-input { width: 100%; min-height: 48px; padding: 0 14px; /* 16px exactly: anything smaller and iOS zooms the page on focus */ font-size: 16px; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color .12s, box-shadow .12s; -webkit-appearance: none; appearance: none; } .rg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 23, 42, .15); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } .rg-input::placeholder { color: var(--border-strong); } .rg-textarea { min-height: 88px; padding: 12px 14px; line-height: 1.5; resize: vertical; } .rg-select { /* the caret, inline, so there is no icon font and no extra request */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; } .rg-field.is-error .rg-input { border-color: var(--danger); } .rg-error { color: var(--danger); font-size: 13px; font-weight: 500; } /* checkbox / radio: the whole row is the target, not the 16px box */ .rg-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; font-size: 14px; line-height: 1.45; } .rg-check.is-error { border-color: var(--danger); background: var(--danger-bg); } .rg-check-inline { margin-top: 0; } .rg-check input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); } .rg-radios { display: flex; flex-direction: column; gap: 8px; } .rg-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; } .rg-radio.is-on { border-color: var(--accent); background: var(--surface-2); } .rg-radio input { width: 20px; height: 20px; accent-color: var(--accent); } .rg-radio span { display: flex; align-items: center; gap: 8px; flex: 1; } .rg-terms { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .rg-terms > summary { cursor: pointer; padding: 14px; font-weight: 600; font-size: 14px; list-style: none; } .rg-terms > summary::-webkit-details-marker { display: none; } .rg-terms > summary::after { content: " ▾"; color: var(--muted); } .rg-terms[open] > summary::after { content: " ▴"; } .rg-terms > div { padding: 0 14px 14px; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------ relay members ------------------------------ */ .rg-member { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .rg-member-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rg-member-no { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* ------------------------------ photo ------------------------------ */ .rg-photo { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .rg-photo-who { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; } .rg-photo-body { display: flex; gap: 14px; align-items: center; } .rg-photo-frame { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 2px dashed var(--border-strong); display: grid; place-items: center; } .rg-photo-frame.is-ok { border-style: solid; border-color: var(--ok); } .rg-photo-frame img { width: 100%; height: 100%; object-fit: cover; } .rg-photo-icon { width: 40px; height: 40px; fill: var(--border-strong); } .rg-photo-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .rg-photo-side p { margin: 0; } /* the file input is invisible; the label is the button */ .rg-btn-file { position: relative; overflow: hidden; } .rg-btn-file input[type=file] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; cursor: pointer; font-size: 0; } .rg-btn-file.is-disabled { opacity: .5; pointer-events: none; } /* ------------------------------ price ------------------------------ */ .rg-price { margin-top: 20px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .rg-price-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; } .rg-price-k { color: var(--muted); min-width: 0; } .rg-price-v { font-weight: 600; white-space: nowrap; } .rg-price-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-strong); font-size: 17px; } .rg-price-total .rg-price-k { color: var(--text); font-weight: 700; } .rg-price-total .rg-price-v { font-weight: 800; } .rg-price.is-compact .rg-price-total { margin-top: 0; padding-top: 0; border-top: 0; } /* ------------------------------ summary ------------------------------ */ .rg-summary { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .rg-summary-tight { margin: 16px 0; text-align: left; } .rg-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; border-top: 1px solid var(--border); font-size: 14px; } .rg-summary-row:first-child { border-top: 0; } .rg-summary-k { color: var(--muted); flex: 0 0 42%; } .rg-summary-v { font-weight: 600; text-align: right; overflow-wrap: break-word; overflow-wrap: anywhere; } .rg-summary-head { padding: 9px 14px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } /* ------------------------------ buttons ------------------------------ */ .rg-actions { display: flex; gap: 10px; margin-top: 24px; } .rg-actions .rg-btn-primary { flex: 1; } .rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; font-family: inherit; font-size: 16px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: opacity .12s, transform .06s; -webkit-tap-highlight-color: transparent; } .rg-btn:active:not(:disabled) { transform: scale(.985); } .rg-btn:disabled { opacity: .45; cursor: not-allowed; } .rg-btn-primary { background: var(--accent); color: var(--accent-text); } .rg-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .rg-btn-block { width: 100%; margin-top: 12px; } .rg-btn-link { background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; } /* ------------------------------ alerts ------------------------------ */ .rg-alert { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid; margin: 12px 0; font-size: 14px; text-align: left; } .rg-alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .rg-alert-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); } .rg-icon { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: #fff; } .rg-icon-ok { background: var(--ok); } .rg-icon-warn { background: var(--warn); } /* ------------------------------ language ------------------------------ */ .rg-langs { display: flex; gap: 2px; flex: 0 0 auto; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .rg-lang { min-width: 40px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .rg-lang.is-on { background: var(--accent); color: var(--accent-text); } /* ------------------------------ spinner ------------------------------ */ .rg-spinner { width: 28px; height: 28px; margin: 8px auto; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: rg-spin .7s linear infinite; } .rg-spinner-sm { width: 16px; height: 16px; border-width: 2px; margin: 0; } @keyframes /* --- multi-event race picker --- */ .rg-race-group { margin: 18px 0 8px; padding-bottom: 4px; font-weight: 700; font-size: 15px; color: var(--rg-fg, #1a1a1a); border-bottom: 1px solid var(--rg-line, #e3e3e3); } .rg-race-group:first-child { margin-top: 4px; } /* on a multi-select form a chosen race keeps a check so it is clear several can be on at once (a radio would imply only one) */ .rg-race.is-multi.is-selected::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--rg-primary, #0a7); color: #fff; font-size: 13px; font-weight: 700; } .rg-race.is-multi { position: relative; } /* --- GDPR confidentiality link (always shown on step 1) --- */ .rg-privacy-link { margin: 10px 0 2px; font-size: 14px; } .rg-privacy-link a { color: var(--primary, #0a7); text-decoration: underline; } /* --- footer: accepted-cards banner + copyright (as registrationc1) --- */ .rg-footer { flex-direction: column; gap: 6px; } .rg-footer .rg-cards { max-width: 280px; width: 70%; height: auto; margin: 0 auto; display: block; } .rg-footer .rg-copy { font-size: 12px; opacity: .75; } /* --- date field: dd/mm/yyyy text box + native calendar-picker button --- */ .rg-date { display: flex; gap: 6px; align-items: stretch; } .rg-date .rg-date-text { flex: 1; min-width: 0; } .rg-date-pick { flex: 0 0 48px; width: 48px; padding: 0; border: 1px solid var(--border, #cfd6e0); border-radius: var(--radius, 10px); background: var(--surface-2, #f4f6f9); cursor: pointer; } /* show ONLY the calendar icon of the native date input (Chrome/Safari/Edge) */ .rg-date-pick::-webkit-datetime-edit, .rg-date-pick::-webkit-inner-spin-button, .rg-date-pick::-webkit-clear-button { display: none; } .rg-date-pick::-webkit-calendar-picker-indicator { margin: 0 auto; opacity: 1; cursor: pointer; transform: scale(1.3); }