/* ============================================================================ PEOPLEAPS Web QR — component design system Bespoke, adaptive (light/dark), build-free. Tokens live inline in the layout (resources/views/components/layouts/app.blade.php); this file is the cacheable bulk. Never rename the classes the Livewire views bind to (.card .state .pill .q .opt .consent .eyebrow .sub .hint .err) or move copy into pseudo-content — the Livewire tests assert on rendered text. ============================================================================ */ /* ---- Chrome outside the card: language switch, brand, footer ------------- */ .langbar { display: flex; justify-content: flex-end; margin-bottom: 12px; } .langbar .seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .langbar .seg { background: var(--surface-3); } } .langbar a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 13px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--on-canvas-dim); text-decoration: none; transition: color var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std); } .langbar a.on { background: var(--surface); /* fallback */ background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--highlight)), var(--surface-2)); color: var(--accent-ink); box-shadow: var(--shadow-1), inset 0 1px 0 var(--highlight); } .langbar a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .brand { text-align: center; color: var(--on-canvas); letter-spacing: .14em; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 14px; } .brand::before { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: -1px 8px 0 0; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, var(--accent-strong), var(--accent)); box-shadow: 0 0 0 3px var(--accent-tint); /* fallback */ box-shadow: 0 0 0 3px var(--accent-tint), 0 2px 6px -1px color-mix(in srgb, var(--accent) 60%, transparent); } @media (prefers-reduced-motion: no-preference) { .langbar { animation: chrome-in var(--dur-3) var(--ease-out) both; } .brand { animation: chrome-in var(--dur-3) var(--ease-out) 40ms both; } @keyframes chrome-in { from { opacity: 0; transform: translateY(-4px); } } } .foot { text-align: center; color: var(--on-canvas-dim); font-size: 11.5px; letter-spacing: .01em; margin-top: 22px; font-variant-numeric: tabular-nums; } /* ---- The card: the "material" -------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-5); padding: clamp(20px, 5.2vw, 28px); box-shadow: var(--shadow-card), inset 0 1px 0 var(--highlight); } .wrap.wide .card { border-radius: var(--r-6); } .card + .card { margin-top: 14px; } @media (prefers-reduced-motion: no-preference) { .card { animation: card-in var(--dur-3) var(--ease-out) both; } @keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.994); } } } /* ---- Typography ---------------------------------------------------------- */ h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.021em; margin: 0 0 4px; } .sub { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin: 0 0 4px; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); } .hint { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 5px; font-style: normal; } .err { color: var(--err); font-size: 13px; line-height: 1.45; margin-top: 6px; font-style: normal; } .divider { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; text-align: center; } /* ---- Forms --------------------------------------------------------------- */ label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: var(--ink); } input[type=text], input[type=email], textarea { width: 100%; font-size: 16px; /* 16px = no iOS zoom on focus */ color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); outline: none; font-family: inherit; box-shadow: inset 0 1px 2px rgba(24, 26, 54, .05); transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std); } input[type=text], input[type=email] { padding: 13px 14px; } textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; } input[type=text]:focus, input[type=email]:focus, textarea:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } input[type=text][aria-invalid="true"], input[type=email][aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-tint); } input[type=text][aria-invalid="true"]:focus, input[type=email][aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-tint); /* fallback */ box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 34%, transparent); } ::placeholder { color: var(--ink-3); opacity: 1; font-style: normal; } /* Consent — custom checkbox on the real native input (keeps wire:model) */ .consent { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-2); font-size: 13px; line-height: 1.45; color: var(--ink-2); font-weight: 400; cursor: pointer; transition: border-color var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std); } .consent:has(input:checked) { border-color: var(--accent); background: var(--accent-tint-2); } .consent:has(input[aria-invalid="true"]) { border-color: var(--err); background: var(--err-tint); } .consent input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer; border: 1.5px solid var(--line); border-radius: 6px; background: var(--surface); transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-1) var(--ease-spring); } .consent input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat; } .consent input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } /* ---- Primary button ------------------------------------------------------ */ button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 22px; min-height: 50px; padding: 14px 18px; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--on-accent); background: var(--accent); /* fallback */ background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border: none; border-radius: var(--r-3); cursor: pointer; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2) var(--ease-std), filter var(--dur-2) var(--ease-std), background var(--dur-2) var(--ease-std), opacity var(--dur-2) var(--ease-std); } @media (hover: hover) { button:hover { filter: brightness(1.04) saturate(1.03); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .22); } } button:active { transform: scale(.975); } button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), var(--shadow-2); } button:disabled { opacity: 1; background: var(--surface-3); color: var(--ink-3); box-shadow: none; filter: none; transform: none; cursor: not-allowed; } /* Spinner used by assessment / evaluation submit buttons. */ .spin { animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Learner hub (the post-scan menu of activities) ---------------------- */ .hub-head { padding-bottom: 2px; } .hub-lead { text-align: center; color: var(--ink-2); font-size: 14px; margin: 6px 0 0; } .hub-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .hub-tile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); text-decoration: none; color: var(--ink); transition: transform var(--dur-1) var(--ease-spring), background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std); } a.hub-tile { box-shadow: var(--shadow-1); } @media (hover: hover) { a.hub-tile:hover { border-color: var(--accent); background: var(--accent-tint-2); transform: translateY(-1px); box-shadow: var(--shadow-2); } } a.hub-tile:active { transform: scale(.99); } a.hub-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .hub-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--surface-3); color: var(--ink-2); } .hub-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; } .hub-name { font-weight: 650; font-size: 15.5px; letter-spacing: -.01em; } .hub-cap { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; } .hub-mark { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ink-3); } .hub-mark svg { width: 100%; height: 100%; display: block; } .hub-tile.is-available .hub-num { background: var(--accent-tint); color: var(--accent-ink); } .hub-tile.is-available .hub-mark { color: var(--accent); } .hub-tile.is-locked { opacity: .62; background: var(--surface-2); } .hub-tile.is-locked .hub-name { color: var(--ink-2); } .hub-tile.is-done { background: var(--ok-tint); border-color: transparent; } .hub-tile.is-done .hub-num { background: var(--ok); color: #fff; } .hub-tile.is-done .hub-mark { color: var(--ok); } .hub-foot { text-align: center; color: var(--ink-3); font-size: 12.5px; margin-top: 14px; } /* Dimensional per-state number discs (match the .state .icon language). */ .hub-num { position: relative; box-shadow: inset 0 1px 0 var(--highlight); } .hub-num::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1.5px 0 var(--highlight), inset 0 0 0 1px rgba(255, 255, 255, .10); } .hub-tile.is-available .hub-num { background: var(--accent-tint); color: var(--accent-ink); } .hub-tile.is-available .hub-num { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--accent-tint)); box-shadow: 0 8px 16px -9px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 var(--highlight); } .hub-tile.is-done .hub-num { background: var(--ok); color: #fff; } .hub-tile.is-done .hub-num { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, #fff 28%, var(--ok)), var(--ok)); box-shadow: 0 8px 16px -9px color-mix(in srgb, var(--ok) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); } .hub-tile.is-locked .hub-num { background: var(--surface-3); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); } /* Directional chevron nudge on the live tile (no coloured rail/border). */ .hub-tile .hub-mark svg { transition: transform var(--dur-2) var(--ease-out); } @media (hover: hover) { a.hub-tile.is-available:hover .hub-mark svg { transform: translateX(3px); } } /* Completed tiles recede so the next action dominates. */ .hub-tile.is-done { background: var(--ok-tint); border-color: transparent; } .hub-tile.is-done .hub-name { color: var(--ink-2); font-weight: 600; } .hub-tile.is-done .hub-cap { color: var(--ink-3); } .hub-tile.is-done .hub-mark { color: var(--ok); } /* Calmer, legible locked affordance (drops the blanket opacity). */ .hub-tile.is-locked { opacity: 1; background: var(--surface-2); } .hub-tile.is-locked .hub-name { color: var(--ink-2); } .hub-tile.is-locked .hub-cap { color: var(--ink-3); } .hub-tile.is-locked .hub-mark { color: var(--ink-3); opacity: .8; } /* Lead line + checkout note card. */ .hub-lead { margin: 8px 0 2px; font-weight: 550; color: var(--ink-2); } .hub-head { padding-bottom: 4px; } .hub-foot { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 18px; padding: 12px 14px; background: var(--accent-tint-2); border: 1px solid var(--line-2); border-radius: var(--r-3); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; } .hub-foot-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-ink); } /* Staggered tile entrance (hub never shows more than 4 tiles). */ @media (prefers-reduced-motion: no-preference) { .hub-list li { animation: hub-tile-in var(--dur-3) var(--ease-out) both; } .hub-list li:nth-child(1) { animation-delay: 40ms; } .hub-list li:nth-child(2) { animation-delay: 90ms; } .hub-list li:nth-child(3) { animation-delay: 140ms; } .hub-list li:nth-child(4) { animation-delay: 190ms; } @keyframes hub-tile-in { from { opacity: 0; transform: translateY(6px); } } } /* Primary call-to-action link on completion screens (filled, with a soft sheen). */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 14px 20px; font-family: inherit; font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--on-accent); text-decoration: none; cursor: pointer; background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border: none; border-radius: var(--r-3); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2) var(--ease-std), filter var(--dur-2) var(--ease-std); } @media (hover: hover) { .btn-primary:hover { filter: brightness(1.04) saturate(1.03); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .22); } } .btn-primary:active { transform: scale(.98); } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), var(--shadow-2); } .btn-primary .ic { width: 18px; height: 18px; flex: 0 0 auto; } /* Quiet, secondary "back to menu" button (for non-success nudges). */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 18px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--accent-ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease-spring), background var(--dur-2) var(--ease-std); } @media (hover: hover) { .btn-ghost:hover { background: var(--surface-3); } } .btn-ghost:active { transform: scale(.985); } .btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .btn-ghost .ic { width: 16px; height: 16px; flex: 0 0 auto; } /* Stacked action area on a state screen: metadata chip, then the primary CTA. */ .state-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; } .state-actions .stamp { margin-top: 0; align-self: center; } /* ---- Pills --------------------------------------------------------------- */ .pill { display: inline-block; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.2; vertical-align: middle; } .pill.in { background: var(--accent-tint); color: var(--accent-ink); } .pill.out { background: var(--warn-tint); color: var(--warn); } /* ---- Status states (ok / bad) ------------------------------------------- */ .state { text-align: center; padding: 8px 4px; } .state .icon { width: 62px; height: 62px; border-radius: 50%; margin: 6px auto 16px; display: grid; place-items: center; font-size: 29px; font-weight: 800; line-height: 1; position: relative; } /* Glossy top edge on every state disc — the dimensional, "hardware" feel. */ .state .icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1.5px 0 var(--highlight), inset 0 0 0 1px rgba(255, 255, 255, .10); } /* Fallback flat tint first; the gradient + colour halo enhance where color-mix is supported. */ .state.ok .icon { background: var(--ok-tint); color: var(--ok); } .state.ok .icon { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--ok) 24%, var(--surface)), var(--ok-tint)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--ok) 55%, transparent); } .state.bad .icon { background: var(--err-tint); color: var(--err); } .state.bad .icon { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--err) 24%, var(--surface)), var(--err-tint)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--err) 50%, transparent); } /* Already checked in/out today — a calm, POSITIVE confirmation. A third, on-brand colour language (quiet INDIGO) that can never read as green success or red error; the word "Already" in the eyebrow carries the meaning so nothing rides on hue. */ .state.already .icon { background: var(--accent-tint); color: var(--accent-ink); } .state.already .icon { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--accent-tint)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .state.already .eyebrow { margin-bottom: 6px; } .state.already .hint { margin-top: 10px; } /* The original time as a NEUTRAL "recorded / on file" chip (not the live accent pill). */ .state.already .stamp { display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; font-style: normal; } /* Let any state disc carry a line-art glyph instead of a text character. */ .state .icon svg { width: 30px; height: 30px; display: block; } /* Calm informational disc (quiet indigo) — expired / not-found / unavailable. Never reads as red error/fault. Inherits the pop entrance + ::after gloss from .state .icon. */ .state.info .icon { background: var(--accent-tint); color: var(--accent-ink); } .state.info .icon { background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--accent-tint)); box-shadow: 0 14px 30px -12px var(--accent-tint), 0 0 0 8px var(--accent-tint-2); /* fallback */ box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-ink); } /* Settle in with --ease-out (no celebratory overshoot) — the motion says "non-event, already handled". More specific than .state .icon, so it overrides the ease. */ @media (prefers-reduced-motion: no-preference) { .state.already .icon { animation: pop var(--dur-3) var(--ease-out) both; } } @media (prefers-reduced-motion: no-preference) { .state .icon { animation: pop var(--dur-3) var(--ease-spring) both; } @keyframes pop { from { opacity: 0; transform: scale(.6); } } } /* ---- Question blocks & option rows (assessment / evaluation) ------------- */ .q { padding: 16px 0; border-top: 1px solid var(--line); } .q:first-of-type { border-top: none; padding-top: 6px; } .q-title { font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: -.006em; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; } .q-num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-ink); background: var(--accent-tint); /* fallback */ background: radial-gradient(135% 135% at 50% 12%, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--accent-tint)); box-shadow: inset 0 1px 0 var(--highlight); } .q-text { flex: 1 1 auto; min-width: 0; padding-top: 2px; } .opt { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .opt input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer; border: 1.5px solid var(--line); border-radius: 50%; background: var(--surface); transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-1) var(--ease-spring); } .opt input[type=radio]:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); } .opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); } @media (hover: hover) { .opt:hover { border-color: var(--accent); } } /* Confirmed single-answer rows (assessment) — stronger fill, accent rail, animated check. Scoped to exclude .q--scale (evaluation rating keeps its own segmented look). */ .q:not(.q--scale) .opt { position: relative; } .q:not(.q--scale) .opt:active { transform: scale(.99); } .q:not(.q--scale) .opt:has(input:checked) { background: var(--accent-tint); /* fallback */ background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } @supports ((-webkit-mask: url('#m')) or (mask: url('#m'))) { .q:not(.q--scale) .opt::after { content: ""; margin-left: auto; flex: none; width: 18px; height: 18px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); } .q:not(.q--scale) .opt:has(input:checked)::after { opacity: 1; transform: scale(1); } } /* Fallback for engines without :has() — still show the checked radio clearly */ .opt input[type=radio]:focus-visible { box-shadow: 0 0 0 3px var(--ring); } /* ---- 5-point segmented rating (evaluation Objective questions) ----------- */ .q--scale { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .q--scale .q-title { flex-basis: 100%; margin-bottom: 2px; } .q--scale .opt { position: relative; flex: 1 1 0; min-width: 0; min-height: 62px; margin: 0; flex-direction: column; justify-content: center; text-align: center; gap: 0; padding: 12px 6px; } .q--scale .opt > span { font-size: 11.5px; line-height: 1.2; font-weight: 600; color: var(--ink-2); transition: color var(--dur-2) var(--ease-std); } /* Visually hide the real radio but keep it focusable + bound to wire:model */ .q--scale .opt input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; border: none; box-shadow: none; cursor: pointer; } .q--scale .opt { transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-spring); } .q--scale .opt:has(input:checked) { background: var(--accent); /* fallback */ background: linear-gradient(180deg, var(--accent-strong), var(--accent)); border-color: var(--accent); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22); /* fallback */ box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); } .q--scale .opt:has(input:checked) > span { color: var(--on-accent); } @media (hover: hover) { .q--scale .opt:hover { border-color: var(--accent); background: var(--accent-tint-2); transform: translateY(-1px); } .q--scale .opt:has(input:checked):hover { filter: brightness(1.04) saturate(1.03); } } .q--scale .opt:active { transform: scale(.97); } .q--scale .opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); } .q--scale .opt:has(input:checked):has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring), var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22); /* fallback */ box-shadow: 0 0 0 3px var(--ring), var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px color-mix(in srgb, var(--accent) 55%, transparent); } /* Ordinal digit above each rating word. */ .q--scale .opt > .q--scale-n { font-size: 12px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color var(--dur-2) var(--ease-std); } .q--scale .opt:has(input:checked) > .q--scale-n { color: var(--on-accent); } /* Roomier, distinctly recessed comment field (evaluation only — scan inputs aren't inside .q). */ .q textarea { min-height: 96px; } /* ---- Assessment progress bar + hero score ------------------------------- */ .q-progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 16px 0 0; } .q-progress__bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: width var(--dur-3) var(--ease-out); } .q-progress__label { margin: 6px 0 2px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* Timed-assessment countdown chip (shown only when the admin sets countdown + duration). */ .q-timer { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding: 8px 14px; border-radius: var(--r-pill); font-size: 15px; font-weight: 650; color: var(--ink); background: var(--surface-2); box-shadow: var(--shadow-1); transition: color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std); } .q-timer__ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); } .q-timer__label { color: var(--ink-3); font-weight: 600; } .q-timer__val { font-variant-numeric: tabular-nums; letter-spacing: .3px; } .q-timer--low { color: var(--warn); background: var(--warn-tint); } .q-timer--low .q-timer__ic { color: currentColor; } .q-timer--low .q-timer__label { color: currentColor; opacity: .85; } .q-submit__busy { display: inline-flex; align-items: center; gap: 8px; } .q-submit .spin { width: 18px; height: 18px; flex: 0 0 auto; } .score-line { margin: 4px 0 2px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .score-num { display: block; margin-top: 2px; font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--accent-ink); font-variant-numeric: tabular-nums; text-transform: none; } /* Calm re-scan hint chip on the check-in error card. */ .state.bad .rescan { display: inline-block; margin-top: 16px; padding: 8px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.3; }