/* KDC Training — custom CSS for the handful of things Tailwind's utility classes don't cover cleanly without a build step: the route/stops signature element, the video aspect-ratio box, and the quiz choice/step layout. Everything else in the app is plain Tailwind utility classes in the markup. Fonts are loaded via a in layout.py's , not @import here (keeps the CSP's style-src-elem allowlist limited to one explicit stylesheet request instead of a CSS-internal one). */ html { font-family: Inter, ui-sans-serif, system-ui; } h1, h2, h3 { font-family: 'Space Grotesk', ui-sans-serif, system-ui; color: #16181C; } h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; } h2:first-child { margin-top: 0; } main p { color: #3A3E46; line-height: 1.65; } label { font-size: 13px; color: #6B707A; display: inline-flex; flex-direction: column; gap: 4px; margin-right: 12px; } table.data { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; } table.data th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: .02em; color: #A9AEB8; text-transform: uppercase; border-bottom: 1px solid #E6E4DF; padding: 8px 12px; } table.data td { padding: 10px 12px; border-bottom: 1px solid #E6E4DF; color: #3A3E46; } table.data td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: #16181C; } /* ── Route/stops — the signature element. KDC is a delivery-route business; a KDC employee already thinks in "stops," not generic timeline steps. An onboarding path renders as a route: a line running stop to stop, each stop a marker that fills in as it's reached — the same mental model as a load sheet, not a borrowed SaaS progress-tracker widget. ─────────────────────────────────────────────── */ .route-stop { display: grid; grid-template-columns: 32px 1fr; column-gap: 16px; position: relative; padding-bottom: 28px; } .route-stop:last-child { padding-bottom: 0; } .route-marker { width: 32px; height: 32px; border-radius: 9999px; border: 2px solid #A9AEB8; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #6B707A; z-index: 1; } .route-stop.arrived .route-marker { border-color: #16A34A; color: #16A34A; background: #F0FDF4; } .route-stop.review .route-marker { border-color: #D97B0A; color: #D97B0A; background: #FEF6EB; } .route-stop:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: #E6E4DF; } .route-stop.arrived:not(:last-child)::before { background: #86EFAC; } /* ── Video embed — 16:9 box ──────────────────────────────────────────────────────────────────────── */ .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; border: 1px solid #E6E4DF; background: #F4F3F0; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ── Quiz flow ────────────────────────────────────────────────────────────────────────────────────── */ .choice { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 8px 0; border: 1.5px solid #E6E4DF; border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .choice:hover { border-color: #D97B0A; background: #FEF6EB; } .choice input { accent-color: #D97B0A; width: 16px; height: 16px; } .q-progress { font-size: 13px; color: #6B707A; margin-bottom: 12px; font-weight: 500; } .q-step { border: 1px solid #E6E4DF; border-radius: 12px; background: #fff; padding: 20px; margin-bottom: 12px; } .q-step .prompt { font-size: 15px; color: #16181C; font-weight: 500; margin-bottom: 12px; } .q-nav { display: flex; justify-content: space-between; margin-top: 16px; } .q-result { border-radius: 10px; background: #fff; border: 1px solid #E6E4DF; padding: 14px 18px; margin: 10px 0; border-left-width: 3px; } .q-result.correct { border-left-color: #16A34A; } .q-result.incorrect { border-left-color: #DC2626; } :focus-visible { outline: 2px solid #D97B0A; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── Small convenience classes for markup built directly in serve.py/admin.py (outside components.py) — mirror components.card()'s Tailwind utility string in plain CSS so both stay visually identical without repeating a long utility-class list at every call site. ──────────────────────────────────── */ .card { display: block; border-radius: 12px; border: 1px solid #E6E4DF; background: #fff; padding: 20px; box-shadow: 0 1px 2px rgba(22,24,28,.04); transition: box-shadow .15s ease, border-color .15s ease; } a.card:hover { box-shadow: 0 4px 12px rgba(22,24,28,.08); border-color: rgba(217,123,10,.4); } .card .title { font-family: 'Space Grotesk', ui-sans-serif, system-ui; font-weight: 600; color: #16181C; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .btn-primary { background: #16181C; color: #fff; border: 1px solid #16181C; } .btn-primary:hover { background: #3A3E46; } .btn-secondary { background: #fff; color: #3A3E46; border: 1px solid #E6E4DF; } .btn-secondary:hover { border-color: #A9AEB8; } input[type="email"], select { border: 1.5px solid #E6E4DF; border-radius: 8px; padding: 8px 12px; font-size: 14px; } @media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }