/** * Full-screen guided "add your club" flow (phones). * * Club Index's port of Community Run Calendar's assets/submit-wizard.css, * renamed crc- -> cia- throughout. Nothing in here applies until * assets/js/add-club-wizard.js adds .cia-wizard-active to . * * Design tokens and button classes are club-index's own (assets/css/ * club-index.css — --ci-primary, --ci-gray-*, --ci-radius*, --ci-transition, * .club-index-btn / --primary / --outline), not CRC's, so the wizard chrome * matches this plugin's actual look rather than inventing a parallel one. * club-index.css already fully styles the desktop form (see its "TILMELD * KLUB FORMULAR" section) — that is untouched here, on purpose: this file * only adds the mobile full-screen mechanics. * * Dropped versus submit-wizard.css, because the add-club form has neither: * - the collapsible Leaflet map picker (.crc-map-collapse and friends), * - the race-type "pill" checkboxes (.crc-checkbox-pill) — this form's * plain .club-index-form__checkbox gets its own, equivalent tap-target * bump instead, * - a standalone button component to port — reuses the existing * .club-index-btn / .club-index-btn--primary / .club-index-btn--outline * instead of introducing .cia-btn. */ /* Step visibility. Marked !important on purpose: some field groups may carry their own inline display (e.g. #ci-kontingent-group, toggled by the existing "Gratis medlemskab" script), and the step state has to win while the wizard is open. */ .cia-wizard-step-hidden { display: none !important; } /* ================================================= Wizard: page-level state */ html.cia-wizard-active, html.cia-wizard-active body { overflow: hidden !important; overscroll-behavior: none; } /* ------------------------------------------------------------ The panel */ html.cia-wizard-active .club-index-form { position: fixed; top: calc(60px + env(safe-area-inset-top, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 10040; margin: 0; max-width: none; width: auto; padding: 18px 16px 28px; border-radius: 0; box-shadow: none; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* 16px text everywhere inside the panel: anything smaller makes iOS Safari zoom the page the moment a field is focused. Overrides club-index.css's 15px .club-index-form__group input/textarea/select rule while the wizard is open. */ html.cia-wizard-active .club-index-form input[type="text"], html.cia-wizard-active .club-index-form input[type="url"], html.cia-wizard-active .club-index-form input[type="email"], html.cia-wizard-active .club-index-form input[type="tel"], html.cia-wizard-active .club-index-form input[type="number"], html.cia-wizard-active .club-index-form select, html.cia-wizard-active .club-index-form textarea { font-size: 16px; padding: 12px 14px; border-radius: var(--ci-radius, 8px); } html.cia-wizard-active .club-index-form label { font-size: 15px; } html.cia-wizard-active .club-index-form .club-index-form__group { margin-bottom: 18px; } /* One field per row on a phone (e.g. postnummer + by). club-index.css already stacks .club-index-form__row under 600px; this just makes sure it stays stacked at the wizard's own 782px breakpoint too. */ html.cia-wizard-active .club-index-form .club-index-form__row { flex-direction: column; } html.cia-wizard-active .club-index-form .club-index-form__group--small { max-width: none; } /* Bigger tap targets for the training-day / gratis checkboxes. */ html.cia-wizard-active .club-index-form .club-index-form__checkbox { padding: 10px 4px; font-size: 15px; } /* Fieldset chrome doesn't need its own border while it's a full-bleed wizard step — the topbar/footer already frame it. */ html.cia-wizard-active .club-index-form .club-index-form__section { border: 0; padding: 0; margin: 0; } /* --------------------------------------------------------------- Chrome */ .cia-wizard-chrome { position: fixed; inset: 0; z-index: 10050; pointer-events: none; font-family: inherit; } .cia-wizard-topbar, .cia-wizard-footer { position: absolute; left: 0; right: 0; pointer-events: auto; /* Near-solid rather than glassy: the page behind is still there, and showing ghosted theme text through the bar looks like a bug. */ background: #fff; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .cia-wizard-topbar { top: 0; display: flex; align-items: center; gap: 4px; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 6px 0; border-bottom: 1px solid var(--ci-gray-200, #e5e7eb); box-sizing: border-box; } .cia-wizard-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ci-gray-500, #6b7280); cursor: pointer; -webkit-tap-highlight-color: transparent; } .cia-wizard-iconbtn:hover:not(:disabled) { background: var(--ci-gray-100, #f3f4f6); color: var(--ci-gray-900, #111827); } .cia-wizard-iconbtn:disabled { opacity: 0.3; cursor: default; } .cia-wizard-titles { flex: 1 1 auto; min-width: 0; text-align: center; padding: 0 2px; } .cia-wizard-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ci-gray-900, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cia-wizard-title:focus { outline: none; } .cia-wizard-counter { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ci-gray-500, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cia-wizard-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ci-gray-200, #e5e7eb); } .cia-wizard-progress-bar { height: 100%; width: 0; background: var(--ci-primary, #2563eb); border-radius: 0 3px 3px 0; transition: width var(--ci-transition, 0.28s cubic-bezier(0.4, 0, 0.2, 1)); } /* --------------------------------------------------------------- Footer */ .cia-wizard-footer { bottom: 0; display: flex; align-items: center; gap: 10px; height: calc(72px + env(safe-area-inset-bottom, 0px)); padding: 0 16px env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--ci-gray-200, #e5e7eb); box-sizing: border-box; } .cia-wizard-footer .club-index-btn { min-height: 48px; font-size: 16px; border-radius: var(--ci-radius, 8px); justify-content: center; } .cia-wizard-prev { flex: 0 0 auto; padding: 0 18px; } .cia-wizard-next { flex: 1 1 auto; } .cia-wizard-next--submit { font-weight: 700; } /* ---------------------------------------------------------------- Errors */ .cia-wizard-error { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #fca5a5; border-radius: var(--ci-radius, 8px); background: #fee2e2; color: #991b1b; font-size: 14px; line-height: 1.45; } /* ---------------------------------------------------------- Review step */ .cia-wizard-review-title { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: var(--ci-gray-900, #111827); } .cia-wizard-review-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ci-gray-600, #4b5563); } .cia-wizard-summary { margin: 0; border-top: 1px solid var(--ci-gray-200, #e5e7eb); } .cia-wizard-summary-label { margin: 0; padding: 12px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ci-gray-400, #9ca3af); } .cia-wizard-summary-value { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 2px 0 12px; border-bottom: 1px solid var(--ci-gray-200, #e5e7eb); font-size: 15px; line-height: 1.45; color: var(--ci-gray-900, #111827); overflow-wrap: break-word; word-break: break-word; } .cia-wizard-summary-edit { flex: 0 0 auto; margin-left: auto; padding: 4px 10px; border: 1px solid var(--ci-gray-200, #e5e7eb); border-radius: 999px; background: #fff; color: var(--ci-primary, #2563eb); font-size: 12px; font-weight: 600; cursor: pointer; } .cia-wizard-summary-edit:hover { background: var(--ci-primary, #2563eb); border-color: var(--ci-primary, #2563eb); color: #fff; } /* --------------------------------------------------------------- Success */ .cia-wizard-success { padding: 24px 4px; text-align: center; } .cia-wizard-success-icon { color: var(--ci-success, #10b981); } .cia-wizard-success-title { margin: 10px 0 8px; font-size: 21px; font-weight: 700; color: var(--ci-gray-900, #111827); } .cia-wizard-success-text { margin: 0 auto 22px; max-width: 32em; font-size: 15px; line-height: 1.55; color: var(--ci-gray-600, #4b5563); } .cia-wizard-success-actions { display: flex; flex-direction: column; gap: 10px; } .cia-wizard-success-actions .club-index-btn { justify-content: center; min-height: 48px; font-size: 16px; border-radius: var(--ci-radius, 8px); } /* --------------------------------------------------- Re-open the wizard */ .cia-wizard-reopen { max-width: 720px; margin: 0 auto 14px; } .cia-wizard-reopen .club-index-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; border-radius: var(--ci-radius, 8px); } /* Landscape phones: less vertical room, so trim the chrome. */ @media (max-height: 460px) { html.cia-wizard-active .club-index-form { top: calc(52px + env(safe-area-inset-top, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .cia-wizard-topbar { height: calc(52px + env(safe-area-inset-top, 0px)); } .cia-wizard-counter { display: none; } .cia-wizard-footer { height: calc(64px + env(safe-area-inset-bottom, 0px)); } }