/* ===================================================================== * Tower Fire — Kiosk design system * A touch-first "safety console": warm neutral canvas, a single hi-vis * amber accent (on-brand for fire safety), characterful display type * (Bricolage Grotesque) over a calm UI face (Hanken Grotesk). * * The kiosk layout does NOT load the legacy application.css and Tailwind's * preflight is off, so this file owns the reset, the type, and every * component. Everything is scoped under .tf-kiosk (set on ) so it * never touches the admin screens. Components are self-contained (they carry * their own layout) so the look does not depend on a Tailwind rebuild. * ===================================================================== */ .tf-kiosk { /* neutrals — warm, paper-like */ --bg: #f3f1ec; --bg-tint: #efece4; --surface: #ffffff; --surface-2: #fbfaf7; --ink: #1b1820; --ink-2: #5d5866; --ink-3: #918b99; --line: #e7e3da; --line-2: #dcd6ca; /* hi-vis amber accent (fire-safety) */ --accent: #f59e0b; --accent-strong: #e07c00; --accent-tint: #fff3dc; --accent-line: #f4d49a; --on-accent: #2a1a00; /* semantic */ --success: #0e9f6e; --success-tint: #e6f6ef; --success-line: #b6e6d2; --warn: #c2780a; --warn-tint: #fdf0d8; --warn-line: #f1d59b; --danger: #d8443c; --danger-tint: #fcebe9; --danger-line: #f3c7c3; --info-tint: #eef1f6; --ring: 0 0 0 4px rgba(245, 158, 11, .28); --shadow-sm: 0 1px 2px rgba(20, 16, 24, .05); --shadow: 0 14px 34px -16px rgba(20, 16, 24, .22), 0 2px 6px rgba(20, 16, 24, .05); --shadow-lg: 0 36px 70px -28px rgba(20, 16, 24, .35); --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Bricolage Grotesque", var(--font-ui); } /* ---------- reset ---------- */ .tf-kiosk *, .tf-kiosk *::before, .tf-kiosk *::after { box-sizing: border-box; } .tf-kiosk { margin: 0; min-height: 100vh; font-family: var(--font-ui); font-size: 17px; line-height: 1.55; color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* layered atmosphere: warm radial washes over paper */ background-color: var(--bg); background-image: radial-gradient(1200px 680px at 84% -8%, rgba(245, 158, 11, .10), transparent 60%), radial-gradient(900px 620px at -6% 110%, rgba(27, 24, 32, .05), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%); background-attachment: fixed; } .tf-kiosk h1, .tf-kiosk h2, .tf-kiosk h3, .tf-kiosk p, .tf-kiosk ul, .tf-kiosk figure { margin: 0; } .tf-kiosk button { font: inherit; color: inherit; cursor: pointer; } .tf-kiosk input { font: inherit; color: inherit; } .tf-kiosk a { color: inherit; text-decoration: none; } .tf-kiosk img, .tf-kiosk video { display: block; max-width: 100%; } /* ---------- app shell ---------- */ .k-app { min-height: 100vh; display: flex; flex-direction: column; } .k-main { flex: 1; display: flex; flex-direction: column; } /* centered single-card screens (arm, enter, results) */ .k-screen { flex: 1; display: grid; place-items: center; padding: clamp(20px, 5vw, 56px); } .k-screen__inner { width: 100%; max-width: 30rem; } /* content screens (courses, intro, training, exam) */ .k-page { flex: 1; width: 100%; max-width: 60rem; margin: 0 auto; padding: clamp(24px, 4vw, 48px); } .k-page--narrow { max-width: 46rem; } /* ---------- top bar ---------- */ .k-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 4vw, 32px); background: rgba(23, 20, 28, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f6f4ef; border-bottom: 1px solid rgba(255, 255, 255, .06); } .k-topbar__id { display: flex; align-items: center; gap: 12px; min-width: 0; } .k-topbar__title { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-topbar__sub { color: rgba(246, 244, 239, .58); font-size: .82rem; } /* brand mark — amber flame chip */ .k-mark { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 4px 14px -4px rgba(245, 158, 11, .7), inset 0 1px 0 rgba(255,255,255,.4); } .k-mark svg { width: 19px; height: 19px; } .k-mark--lg { width: 52px; height: 52px; border-radius: 16px; } .k-mark--lg svg { width: 28px; height: 28px; } /* ---------- cards ---------- */ .k-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 44px); } .k-card__head { text-align: center; margin-bottom: 28px; } /* ---------- type ---------- */ .k-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; } .k-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; color: var(--ink); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); } .k-title--sm { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); } .k-subtitle { color: var(--ink-2); font-size: 1.02rem; margin-top: 10px; } .k-lead { color: var(--ink-2); font-size: 1.15rem; line-height: 1.6; } .k-meta { color: var(--ink-3); font-size: .9rem; font-weight: 500; } /* ---------- forms ---------- */ .k-form { display: flex; flex-direction: column; gap: 20px; } .k-field { display: flex; flex-direction: column; gap: 8px; } .k-label { font-size: .82rem; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; } .k-input { width: 100%; border: 1.5px solid var(--line-2); background: var(--surface-2); border-radius: var(--r); padding: 15px 18px; font-size: 1.1rem; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .k-input::placeholder { color: var(--ink-3); } .k-input:focus { outline: 0; border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); } .k-input--xl { text-align: center; font-size: 1.7rem; font-weight: 600; letter-spacing: .02em; padding: 22px 18px; } /* ---------- buttons ---------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 650; font-size: 1.05rem; letter-spacing: -.005em; padding: 15px 26px; min-height: 56px; border: 0; background: transparent; border-radius: var(--r); transition: transform .12s ease, box-shadow .18s ease, background .18s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent; } .k-btn:focus-visible { outline: 0; box-shadow: var(--ring); } .k-btn:active { transform: translateY(1px) scale(.995); } .k-btn--block { width: 100%; } .k-btn--lg { min-height: 64px; font-size: 1.15rem; padding: 18px 28px; } .k-btn--primary { background: linear-gradient(176deg, #ffb22e 0%, var(--accent) 46%, var(--accent-strong) 100%); color: var(--on-accent); box-shadow: 0 12px 26px -12px rgba(224, 124, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .45); } .k-btn--primary:hover { box-shadow: 0 18px 34px -12px rgba(224, 124, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .55); } .k-btn--dark { background: var(--ink); color: #fff; box-shadow: var(--shadow); } .k-btn--dark:hover { background: #2c2733; } .k-btn--ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); } .k-btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-3); } .k-btn[disabled], .k-btn.is-disabled { opacity: .42; cursor: not-allowed; box-shadow: none; } .k-btn[disabled]:active { transform: none; } /* small inline link-buttons (topbar actions, close, back) */ .k-link { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--ink-2); border: 0; background: transparent; padding: 7px 12px; border-radius: 9px; transition: background .15s ease, color .15s ease; } .k-link:hover { background: var(--surface-2); color: var(--ink); } .k-link--ondark { color: rgba(246, 244, 239, .7); } .k-link--ondark:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* ---------- selectable options (radios: training answers + exam) ---------- */ .k-options { display: flex; flex-direction: column; gap: 12px; } .k-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface-2); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease; } .k-option:hover { border-color: var(--line-2); background: var(--surface); } .k-option:active { transform: scale(.992); } /* hide native input but keep it focusable & submittable */ .k-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .k-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: border-color .15s ease, background .15s ease; } .k-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform .15s ease; } .k-option__text { font-size: 1.05rem; color: var(--ink); font-weight: 500; } /* selected state */ .k-option input:checked ~ .k-radio { border-color: var(--accent-strong); background: var(--accent); } .k-option input:checked ~ .k-radio::after { transform: scale(1); } .k-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent) inset; } .k-option input:focus-visible ~ .k-radio { box-shadow: var(--ring); } /* ---------- status badges ---------- */ .k-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; } .k-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .k-badge--neutral { color: #5d5866; background: #efece4; border-color: var(--line); } .k-badge--expiring { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); } .k-badge--overdue { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); } .k-badge--completed { color: var(--success); background: var(--success-tint); border-color: var(--success-line); } /* ---------- course grid ---------- */ .k-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 720px) { .k-grid { grid-template-columns: 1fr 1fr; } } .k-course { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease; } .k-course:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-line); } .k-course__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); } .k-course__desc { color: var(--ink-2); font-size: .96rem; } .k-course__go { margin-top: auto; padding-top: 6px; color: var(--accent-strong); font-weight: 650; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; } .k-course:hover .k-course__go { gap: 10px; } /* ---------- exam question cards ---------- */ .k-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-sm); } .k-q__num { font-family: var(--font-display); color: var(--accent-strong); font-weight: 700; } .k-q__text { font-size: 1.18rem; font-weight: 600; color: var(--ink); margin-bottom: 16px; letter-spacing: -.01em; } /* sticky exam action bar */ .k-actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 16px 18px; background: rgba(251, 250, 247, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); } .k-progress { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 600; font-size: .92rem; } .k-progress__track { width: 96px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; } .k-progress__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .3s ease; } /* ---------- header rows ---------- */ .k-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } /* ---------- result hero ---------- */ .k-hero { text-align: center; } .k-hero__emblem { width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 22px; display: grid; place-items: center; font-size: 40px; } .k-hero__emblem--pass { background: var(--success-tint); border: 1px solid var(--success-line); } .k-hero__emblem--fail { background: var(--warn-tint); border: 1px solid var(--warn-line); } .k-hero__emblem--lock { background: var(--danger-tint); border: 1px solid var(--danger-line); } .k-hero__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.025em; } .k-hero__title--pass { color: var(--success); } .k-hero__title--fail { color: var(--warn); } .k-hero__title--lock { color: var(--danger); } /* ---------- training video ---------- */ .k-video { margin-bottom: 24px; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--shadow); } /* ---------- flash ---------- */ .k-flashwrap { padding: 14px clamp(18px, 4vw, 32px) 0; } .k-flash { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: var(--r); padding: 13px 16px; font-size: .95rem; font-weight: 500; animation: k-rise .4s cubic-bezier(.2, .7, .2, 1) both; } .k-flash--notice { color: #0c7c57; background: var(--success-tint); border-color: var(--success-line); } .k-flash--alert { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-line); } .k-inline-alert { display: flex; align-items: center; gap: 10px; color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger-line); border-radius: var(--r); padding: 12px 15px; font-size: .92rem; font-weight: 500; margin-bottom: 18px; } /* ---------- helpers ---------- */ .k-stack-sm { display: flex; flex-direction: column; gap: 12px; } .k-stack-lg { display: flex; flex-direction: column; gap: 18px; } .k-center { text-align: center; } .k-mt-sm { margin-top: 14px; } .k-mt { margin-top: 22px; } /* ---------- entrance motion ---------- */ @keyframes k-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .k-rise { animation: k-rise .5s cubic-bezier(.2, .7, .2, 1) both; } .k-rise-1 { animation-delay: .04s; } .k-rise-2 { animation-delay: .10s; } .k-rise-3 { animation-delay: .16s; } .k-rise-4 { animation-delay: .22s; } @media (prefers-reduced-motion: reduce) { .tf-kiosk *, .tf-kiosk *::before, .tf-kiosk *::after { animation: none !important; transition: none !important; } }