/* ============================================================================ Kick-Off Registration — base stylesheet Palette is driven by CSS custom properties so the admin settings page can override --ktuu-primary / --ktuu-accent / etc. inline at level. ============================================================================ */ :root { /* Brand */ --ktuu-primary: #1e4d8b; --ktuu-primary-dark: #16386a; --ktuu-accent: #2563eb; --ktuu-accent-dark: #1d4fd1; /* Neutrals */ --ktuu-bg: #f4f7fb; --ktuu-surface: #ffffff; --ktuu-surface-alt: #f8fafc; --ktuu-text: #0f1f3a; --ktuu-text-muted: #5b6b85; --ktuu-text-subtle: #8a9aaf; --ktuu-border: #d8e0ec; --ktuu-border-strong: #b9c5d6; /* Scrollbar — thin, brand-tinted slate at rest, deep brand on hover */ --ktuu-scrollbar-thumb: #b9c5d6; --ktuu-scrollbar-thumb-hover: #1e4d8b; /* Status */ --ktuu-success: #10b981; --ktuu-success-bg: #ecfdf5; --ktuu-warning: #f59e0b; --ktuu-warning-bg: #fffbeb; --ktuu-danger: #ef4444; --ktuu-danger-bg: #fef2f2; --ktuu-info: #2563eb; --ktuu-info-bg: #eff6ff; /* Radii / shadows */ --ktuu-radius-sm: 6px; --ktuu-radius-md: 10px; --ktuu-radius-lg: 14px; --ktuu-radius-pill: 9999px; --ktuu-shadow-sm: 0 1px 2px rgba(15, 31, 58, 0.06); --ktuu-shadow-md: 0 6px 24px rgba(15, 31, 58, 0.08); --ktuu-shadow-lg: 0 12px 40px rgba(15, 31, 58, 0.12); /* Spacing scale */ --ktuu-sp-1: 4px; --ktuu-sp-2: 8px; --ktuu-sp-3: 12px; --ktuu-sp-4: 16px; --ktuu-sp-5: 24px; --ktuu-sp-6: 32px; --ktuu-sp-7: 48px; /* Type */ --ktuu-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ktuu-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ktuu-fs-xs: 0.78rem; --ktuu-fs-sm: 0.875rem; --ktuu-fs-md: 1rem; --ktuu-fs-lg: 1.125rem; --ktuu-fs-xl: 1.375rem; --ktuu-fs-2xl: 1.75rem; --ktuu-fs-3xl: 2.25rem; } /* ----- Reset & base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ----- Scrollbars ---------------------------------------------------------- One thin, rounded, brand-tinted scrollbar everywhere (page + any scrollable element, including modals). The 2px transparent border + padding-box clip makes the visible thumb ~4px while keeping an 8px grab area. Firefox uses the standard properties (they inherit from to every descendant). */ html { scrollbar-width: thin; scrollbar-color: var(--ktuu-scrollbar-thumb) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ktuu-scrollbar-thumb); border-radius: var(--ktuu-radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--ktuu-scrollbar-thumb-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } body { font-family: var(--ktuu-font-body); font-size: var(--ktuu-fs-md); line-height: 1.2; color: var(--ktuu-text); background: var(--ktuu-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { font-family: var(--ktuu-font-heading); color: var(--ktuu-text); margin: 0 0 var(--ktuu-sp-3); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--ktuu-fs-3xl); } h2 { font-size: var(--ktuu-fs-2xl); } h3 { font-size: var(--ktuu-fs-xl); } p { margin: 0 0 var(--ktuu-sp-4); } a { color: var(--ktuu-accent); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--ktuu-accent-dark); text-decoration: underline; } /* ----- Layout --------------------------------------------------------------- */ .ktuu-page { min-height: 100vh; display: flex; flex-direction: column; } .ktuu-container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--ktuu-sp-5); } .ktuu-container-wide { max-width: 1200px; } .ktuu-header { background: linear-gradient(135deg, var(--ktuu-primary) 0%, var(--ktuu-accent) 100%); color: #fff; padding: var(--ktuu-sp-5) 0; box-shadow: var(--ktuu-shadow-md); } .ktuu-header h1 { color: #fff; margin: 0; display: flex; align-items: center; gap: var(--ktuu-sp-3); } /* Brand logo. The PNG ships with a solid (non-transparent) white background, so we round its corners everywhere it appears. The white backing keeps the blue mark legible on the colored header/sidebar gradients. */ .ktuu-logo { display: block; flex: none; width: auto; background: #fff; border-radius: 4px; object-fit: contain; } .ktuu-header .ktuu-logo { height: 104px; } .ktuu-header .ktuu-tagline { color: rgba(255, 255, 255, 0.85); font-size: var(--ktuu-fs-sm); margin-top: var(--ktuu-sp-2); } .ktuu-main { flex: 1; padding: var(--ktuu-sp-6) 0; } .ktuu-footer { border-top: 1px solid var(--ktuu-border); background: var(--ktuu-surface); color: var(--ktuu-text-muted); padding: var(--ktuu-sp-5) 0; font-size: var(--ktuu-fs-sm); text-align: center; } /* ----- Card ----------------------------------------------------------------- */ .ktuu-card { background: var(--ktuu-surface); border: 1px solid var(--ktuu-border); border-radius: var(--ktuu-radius-lg); box-shadow: var(--ktuu-shadow-sm); padding: var(--ktuu-sp-6); } .ktuu-card + .ktuu-card { margin-top: var(--ktuu-sp-5); } .ktuu-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ktuu-sp-3); margin-bottom: var(--ktuu-sp-5); padding-bottom: var(--ktuu-sp-4); border-bottom: 1px solid var(--ktuu-border); } .ktuu-card-header h2 { margin: 0; font-size: var(--ktuu-fs-xl); } /* ----- Form controls ------------------------------------------------------- */ .ktuu-field { margin-bottom: var(--ktuu-sp-5); } .ktuu-field label.ktuu-label { display: block; font-weight: 600; color: var(--ktuu-text); font-size: var(--ktuu-fs-sm); margin-bottom: var(--ktuu-sp-2); } .ktuu-field .ktuu-required { color: var(--ktuu-danger); margin-left: 2px; } .ktuu-field .ktuu-helper { color: var(--ktuu-text-muted); font-size: var(--ktuu-fs-sm); margin-top: var(--ktuu-sp-2); } .ktuu-field .ktuu-error { color: var(--ktuu-danger); font-size: var(--ktuu-fs-sm); margin-top: var(--ktuu-sp-2); display: flex; align-items: center; gap: var(--ktuu-sp-2); } .ktuu-input, .ktuu-select, .ktuu-textarea { width: 100%; padding: 11px 14px; font: inherit; color: var(--ktuu-text); background: var(--ktuu-surface); border: 1px solid var(--ktuu-border-strong); border-radius: var(--ktuu-radius-md); transition: border-color 0.15s, box-shadow 0.15s; appearance: none; } .ktuu-input:hover, .ktuu-select:hover, .ktuu-textarea:hover { border-color: var(--ktuu-accent); } .ktuu-input:focus, .ktuu-select:focus, .ktuu-textarea:focus { outline: none; border-color: var(--ktuu-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .ktuu-input:disabled, .ktuu-select:disabled { background: var(--ktuu-surface-alt); color: var(--ktuu-text-subtle); cursor: not-allowed; } .ktuu-textarea { min-height: 100px; resize: vertical; } .ktuu-select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%235b6b85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; } /* ---------------------------------------------------------------------------- Searchable combobox (chapter picker) ---------------------------------------------------------------------------- Progressive enhancement of a native is hidden (but still submits) and replaced by a text input plus a filtered listbox. Built to work on every device, including iOS Safari. ---------------------------------------------------------------------------- */ .ktuu-combobox { position: relative; } .ktuu-combobox-input { /* a magnifier glyph hints that this field is searchable */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cg fill='none' stroke='%235b6b85' stroke-width='1.6' stroke-linecap='round'%3e%3ccircle cx='9' cy='9' r='5.5'/%3e%3cpath d='M13.5 13.5L17 17'/%3e%3c/g%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; } .ktuu-combobox-list { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 50; left: 0; right: 0; max-height: 280px; overflow-y: auto; background: var(--ktuu-surface); border: 1px solid var(--ktuu-border-strong); border-radius: var(--ktuu-radius-md); box-shadow: 0 8px 24px rgba(15, 31, 58, 0.12); -webkit-overflow-scrolling: touch; } .ktuu-combobox-list[hidden] { display: none; } .ktuu-combobox-option { padding: 10px 12px; border-radius: var(--ktuu-radius-sm); cursor: pointer; color: var(--ktuu-text); line-height: 1.3; } .ktuu-combobox-option.is-active, .ktuu-combobox-option:hover { background: var(--ktuu-surface-alt); } .ktuu-combobox-option[aria-selected="true"] { font-weight: 600; } .ktuu-combobox-empty { padding: 10px 12px; color: var(--ktuu-text-subtle); } /* ---------------------------------------------------------------------------- File input ---------------------------------------------------------------------------- Native renders a browser-default "Choose File" button that ignores our design tokens. We style the field shell like a .ktuu-input and restyle the built-in button (::file-selector-button, with a -webkit- fallback) to match the system's pill buttons. No JS or extra markup needed — add class="ktuu-file" to the input. ---------------------------------------------------------------------------- */ .ktuu-file { width: 100%; font: inherit; color: var(--ktuu-text); background: var(--ktuu-surface); border: 1px solid var(--ktuu-border-strong); border-radius: var(--ktuu-radius-md); padding: 7px 12px 7px 7px; /* tighter left so the button sits inset */ cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .ktuu-file:hover { border-color: var(--ktuu-accent); } .ktuu-file:focus, .ktuu-file:focus-within { outline: none; border-color: var(--ktuu-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .ktuu-file:disabled { background: var(--ktuu-surface-alt); color: var(--ktuu-text-subtle); cursor: not-allowed; border-style: dashed; } /* The built-in button. Standard property first, -webkit- fallback after. */ .ktuu-file::file-selector-button, .ktuu-file::-webkit-file-upload-button { font: inherit; font-weight: 600; font-size: var(--ktuu-fs-sm); color: #fff; background: var(--ktuu-accent); border: 0; border-radius: var(--ktuu-radius-pill); padding: 8px 18px; margin-right: var(--ktuu-sp-3); cursor: pointer; transition: background 0.15s, transform 0.05s; } .ktuu-file:hover::file-selector-button, .ktuu-file:hover::-webkit-file-upload-button { background: var(--ktuu-accent-dark); } .ktuu-file:active::file-selector-button, .ktuu-file:active::-webkit-file-upload-button { transform: translateY(1px); } .ktuu-file:disabled::file-selector-button, .ktuu-file:disabled::-webkit-file-upload-button { background: var(--ktuu-border-strong); cursor: not-allowed; } /* ---------------------------------------------------------------------------- Custom checkbox / radio ---------------------------------------------------------------------------- Native appearance is stripped via `appearance: none` so the controls render identically across browsers. A 20×20 box (square for checkbox, circle for radio) sits where the native widget was. The :checked state fills with the accent color and reveals the indicator: an inline SVG checkmark (encoded into the `background-image`) for the checkbox, an inner white dot for the radio. Focus ring uses outline so it overlays cleanly on either shape. ---------------------------------------------------------------------------- */ .ktuu-check { display: flex; align-items: flex-start; gap: var(--ktuu-sp-3); padding: var(--ktuu-sp-3) 0; cursor: pointer; } .ktuu-check input[type="checkbox"], .ktuu-check input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; margin: 1px 0 0; /* nudge top so it aligns with the first line of text */ flex-shrink: 0; cursor: pointer; background-color: #fff; background-repeat: no-repeat; background-position: center; border: 1.5px solid var(--ktuu-border-strong); box-shadow: 0 1px 2px rgba(15, 31, 58, 0.04); transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; display: inline-block; vertical-align: middle; } .ktuu-check input[type="checkbox"] { border-radius: 5px; } .ktuu-check input[type="radio"] { border-radius: 50%; } .ktuu-check input[type="checkbox"]:hover, .ktuu-check input[type="radio"]:hover { border-color: var(--ktuu-accent); } .ktuu-check input[type="checkbox"]:checked, .ktuu-check input[type="radio"]:checked { background-color: var(--ktuu-accent); border-color: var(--ktuu-accent); } /* Checkmark: white SVG, only when :checked. Inlined as a data: URI so there are no extra HTTP requests and the shape can't 404. */ .ktuu-check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;utf8,"); background-size: 14px 14px; } /* Radio "dot": an inner filled circle via radial gradient — no pseudo-element needed (some browsers disallow ::after on form controls). */ .ktuu-check input[type="radio"]:checked { background-image: radial-gradient(circle, #ffffff 0 4px, transparent 5px); } .ktuu-check input[type="checkbox"]:focus-visible, .ktuu-check input[type="radio"]:focus-visible { outline: 2px solid var(--ktuu-accent); outline-offset: 2px; } .ktuu-check input[type="checkbox"]:disabled, .ktuu-check input[type="radio"]:disabled { background-color: var(--ktuu-surface-alt); border-color: var(--ktuu-border); cursor: not-allowed; opacity: 0.65; box-shadow: none; } .ktuu-check input[type="checkbox"]:disabled + .ktuu-check-label, .ktuu-check input[type="radio"]:disabled + .ktuu-check-label { color: var(--ktuu-text-muted); cursor: not-allowed; } .ktuu-check .ktuu-check-label { color: var(--ktuu-text); font-size: var(--ktuu-fs-md); line-height: 1.45; user-select: none; } .ktuu-check-group { display: flex; flex-direction: column; gap: var(--ktuu-sp-1); padding: var(--ktuu-sp-2) 0; } .ktuu-check-group .ktuu-check { padding: var(--ktuu-sp-2) 0; border-bottom: 1px dashed var(--ktuu-border); } .ktuu-check-group .ktuu-check:last-child { border-bottom: none; } /* ----- Collapsible field (ghost button → expandable section) ---------------- Used for space-heavy fields like Leadership Role. Native
/, so it toggles with no JS. The summary is a ghost (outlined) button; opening reveals a bordered body. */ .ktuu-collapse { /* spacing comes from the wrapping .ktuu-field */ margin: 0; } .ktuu-collapse-toggle { display: flex; align-items: center; gap: var(--ktuu-sp-2); cursor: pointer; list-style: none; padding: 11px 16px; border: 1.5px dashed var(--ktuu-border-strong); border-radius: var(--ktuu-radius-md); background: transparent; color: var(--ktuu-text); font-weight: 600; font-size: var(--ktuu-fs-sm); transition: background .15s ease, border-color .15s ease, color .15s ease; } .ktuu-collapse-toggle::-webkit-details-marker { display: none; } /* hide default triangle */ .ktuu-collapse-toggle:hover { background: var(--ktuu-surface-alt); border-color: var(--ktuu-accent); color: var(--ktuu-accent); } .ktuu-collapse-toggle:focus-visible { outline: 2px solid var(--ktuu-accent); outline-offset: 2px; } .ktuu-collapse-label { flex: 1; } .ktuu-collapse-chevron { transition: transform .15s ease; opacity: .7; } .ktuu-collapse[open] > .ktuu-collapse-toggle { border-style: solid; border-color: var(--ktuu-accent); color: var(--ktuu-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ktuu-collapse[open] > .ktuu-collapse-toggle .ktuu-collapse-chevron { transform: rotate(180deg); } .ktuu-collapse-body { border: 1.5px solid var(--ktuu-accent); border-top: 0; border-radius: 0 0 var(--ktuu-radius-md) var(--ktuu-radius-md); padding: var(--ktuu-sp-2) var(--ktuu-sp-4) var(--ktuu-sp-4); background: var(--ktuu-surface); } .ktuu-collapse-body .ktuu-helper { margin-top: var(--ktuu-sp-2); } .ktuu-spinner-inline { display: none; margin-left: var(--ktuu-sp-2); color: var(--ktuu-text-muted); font-size: var(--ktuu-fs-sm); } .ktuu-spinner-inline.is-visible { display: inline-flex; align-items: center; gap: 6px; } /* ----- Buttons -------------------------------------------------------------- */ .ktuu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ktuu-sp-2); font: inherit; font-weight: 600; font-size: var(--ktuu-fs-md); padding: 11px 22px; border-radius: var(--ktuu-radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.05s, box-shadow 0.15s; line-height: 1.2; white-space: nowrap; } .ktuu-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); } .ktuu-btn:active { transform: translateY(1px); } .ktuu-btn:disabled, .ktuu-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Pill variant */ .ktuu-btn-pill { border-radius: var(--ktuu-radius-pill); padding-left: 28px; padding-right: 28px; } /* Size variants */ .ktuu-btn-sm { padding: 7px 14px; font-size: var(--ktuu-fs-sm); } .ktuu-btn-lg { padding: 14px 28px; font-size: var(--ktuu-fs-lg); } /* Color variants — ghost (default) */ .ktuu-btn-ghost, .ktuu-btn { /* default is ghost */ background: transparent; border-color: var(--ktuu-primary); color: var(--ktuu-primary); } .ktuu-btn-ghost:hover, .ktuu-btn:hover { background: var(--ktuu-primary); color: #fff; text-decoration: none; } .ktuu-btn-accent.ktuu-btn-ghost, .ktuu-btn-accent { border-color: var(--ktuu-accent); color: var(--ktuu-accent); } .ktuu-btn-accent.ktuu-btn-ghost:hover, .ktuu-btn-accent:hover { background: var(--ktuu-accent); color: #fff; } .ktuu-btn-success { border-color: var(--ktuu-success); color: var(--ktuu-success); } .ktuu-btn-success:hover { background: var(--ktuu-success); color: #fff; } .ktuu-btn-warning { border-color: var(--ktuu-warning); color: #946100; } .ktuu-btn-warning:hover { background: var(--ktuu-warning); color: #fff; } .ktuu-btn-danger { border-color: var(--ktuu-danger); color: var(--ktuu-danger); } .ktuu-btn-danger:hover { background: var(--ktuu-danger); color: #fff; } /* Solid variant — when you want a filled CTA (still pill-shaped if combined) */ .ktuu-btn-solid { background: var(--ktuu-primary); border-color: var(--ktuu-primary); color: #fff; } .ktuu-btn-solid:hover { background: var(--ktuu-primary-dark); border-color: var(--ktuu-primary-dark); color: #fff; } .ktuu-btn-solid.ktuu-btn-accent { background: var(--ktuu-accent); border-color: var(--ktuu-accent); color: #fff; } .ktuu-btn-solid.ktuu-btn-accent:hover { background: var(--ktuu-accent-dark); border-color: var(--ktuu-accent-dark); } .ktuu-btn-solid.ktuu-btn-success { background: var(--ktuu-success); border-color: var(--ktuu-success); color: #fff; } .ktuu-btn-solid.ktuu-btn-warning { background: var(--ktuu-warning); border-color: var(--ktuu-warning); color: #fff; } .ktuu-btn-solid.ktuu-btn-warning:hover { background: #d97706; border-color: #d97706; color: #fff; } .ktuu-btn-solid.ktuu-btn-danger { background: var(--ktuu-danger); border-color: var(--ktuu-danger); color: #fff; } /* Button row */ .ktuu-actions { display: flex; gap: var(--ktuu-sp-3); flex-wrap: wrap; margin-top: var(--ktuu-sp-5); } .ktuu-actions-end { justify-content: flex-end; } /* ----- Alert banners (non-toast inline notices) ----------------------------- */ .ktuu-alert { border-radius: var(--ktuu-radius-md); padding: var(--ktuu-sp-4); display: flex; gap: var(--ktuu-sp-3); align-items: flex-start; margin-bottom: var(--ktuu-sp-5); font-size: var(--ktuu-fs-sm); border: 1px solid transparent; } .ktuu-alert i.fa-fw { font-size: 1.1em; margin-top: 2px; } .ktuu-alert-success { background: var(--ktuu-success-bg); border-color: #a7f3d0; color: #065f46; } .ktuu-alert-info { background: var(--ktuu-info-bg); border-color: #bfdbfe; color: #1e3a8a; } .ktuu-alert-warning { background: var(--ktuu-warning-bg); border-color: #fcd34d; color: #92400e; } .ktuu-alert-error { background: var(--ktuu-danger-bg); border-color: #fecaca; color: #991b1b; } /* ----- Misc ----------------------------------------------------------------- */ .ktuu-muted { color: var(--ktuu-text-muted); } .ktuu-mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 0.9em; } .ktuu-hidden { display: none !important; } .ktuu-spacer-lg { height: var(--ktuu-sp-6); } /* ----- Survey field types: Yes/No + Likert (horizontal radio rows) ---------- */ .ktuu-yesno-group, .ktuu-likert-group { flex-direction: row; flex-wrap: wrap; gap: var(--ktuu-sp-2) var(--ktuu-sp-4); } .ktuu-yesno-group .ktuu-check, .ktuu-likert-group .ktuu-check { border-bottom: none; padding: var(--ktuu-sp-2) 0; } /* ----- Rating (pure-CSS star control) -------------------------------------- */ .ktuu-rating { display: inline-flex; flex-direction: row-reverse; /* DOM is max→1; reverse so it reads 1→max */ justify-content: flex-end; gap: 4px; font-size: 1.7rem; line-height: 1; } .ktuu-rating input { position: absolute; opacity: 0; width: 0; height: 0; } .ktuu-rating label { color: var(--ktuu-border); cursor: pointer; transition: color 0.12s ease; } .ktuu-rating label:hover, .ktuu-rating label:hover ~ label, .ktuu-rating input:checked ~ label { color: #f59e0b; } .ktuu-rating input:focus-visible + label { outline: 2px solid var(--ktuu-accent); outline-offset: 2px; border-radius: 4px; } /* ----- Opinion scale (numbered button row) --------------------------------- */ .ktuu-scale-row { display: flex; flex-wrap: wrap; gap: 6px; } .ktuu-scale-opt { position: relative; } .ktuu-scale-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ktuu-scale-opt span { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 8px; border: 1px solid var(--ktuu-border); border-radius: var(--ktuu-radius-md); background: var(--ktuu-surface); font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .ktuu-scale-opt:hover span { border-color: var(--ktuu-accent); } .ktuu-scale-opt input:checked + span { background: var(--ktuu-primary); border-color: var(--ktuu-primary); color: #fff; } .ktuu-scale-opt input:focus-visible + span { outline: 2px solid var(--ktuu-accent); outline-offset: 2px; } .ktuu-scale-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--ktuu-fs-sm); color: var(--ktuu-text-muted); } /* ----- Ranking (reorderable list) ------------------------------------------ */ .ktuu-ranking-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ktuu-ranking-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ktuu-border); border-radius: var(--ktuu-radius-md); background: var(--ktuu-surface); } .ktuu-ranking-item.is-dragging { opacity: 0.5; } .ktuu-ranking-handle { cursor: grab; color: var(--ktuu-text-muted); } .ktuu-ranking-handle:active { cursor: grabbing; } .ktuu-ranking-rank { min-width: 1.6em; height: 1.6em; display: inline-flex; align-items: center; justify-content: center; background: var(--ktuu-primary); color: #fff; border-radius: 50%; font-size: var(--ktuu-fs-sm); font-weight: 700; } .ktuu-ranking-rank:empty { display: none; } .ktuu-ranking-label { flex: 1; } .ktuu-ranking-moves { display: inline-flex; gap: 4px; } /* ----- Instructional text (display-only field) ----------------------------- */ .ktuu-instruction-box { display: flex; gap: var(--ktuu-sp-3); align-items: flex-start; background: var(--ktuu-info-bg); border: 1px solid #bfdbfe; border-radius: var(--ktuu-radius-md); padding: var(--ktuu-sp-4); } .ktuu-instruction-icon { color: var(--ktuu-accent); margin-top: 2px; font-size: 1.1em; } .ktuu-instruction-title { font-weight: 600; margin-bottom: 4px; color: var(--ktuu-text); } .ktuu-instruction-body { color: var(--ktuu-text); line-height: 1.55; } /* ----- Responsive ----------------------------------------------------------- */ @media (max-width: 640px) { h1 { font-size: 1.6rem; } .ktuu-card { padding: var(--ktuu-sp-5); } .ktuu-actions { flex-direction: column; } .ktuu-actions .ktuu-btn { width: 100%; } .ktuu-scale-opt span { min-width: 36px; height: 36px; } }