/* ==================== Anthroprime ECOD design system ==================== Colour tokens live in :root (light, the default) and are overridden by [data-theme="dark"]. The preference is set on by js/theme.js — and by a tiny inline script in index.html before first paint. Every surface below reads from these tokens, so a single attribute re-skins the app. */ :root { --bg: #f4f7f8; --bg-deep: #eef3f4; --bg-glow: rgba(21, 155, 150, .06); --card: #ffffff; --ink: #132338; --ink-2: #516178; --ink-3: #8a98a9; --line: #e2e9ed; --line-strong: #d4dfe5; --line-soft: #edf2f4; --line-hover: #bdcdd4; --brand: #159b96; --brand-dark: #087872; --brand-deep: #075b62; --brand-soft: #e0f5f2; --brand-wash: #f0fbf9; --brand-line: #cae9e4; --sidebar-1: #0a1e30; --sidebar: #0d2234; --sidebar-2: #102c40; --sidebar-3: #0b1b2b; --sidebar-ink: #c9d8e2; --green: #147a57; --green-bg: #e2f5ec; --green-line: #c1e6d5; --amber: #a36317; --amber-bg: #fff3db; --amber-line: #f0d9ac; --red: #b53a35; --red-bg: #ffedeb; --red-line: #f0c8c3; --blue: #315ca8; --blue-bg: #e9effd; --blue-line: #c9d7f1; --grey: #68788b; --grey-bg: #eef2f5; --grey-line: #dce3e8; --violet: #7553a8; --violet-bg: #f1eafd; --gold: #a2631a; --gold-bg: #fff1d8; /* surfaces */ --surface: #ffffff; /* inputs, quiz cards, solid chips */ --surface-2: #fbfdfd; /* modal head/foot, quiet blocks */ --surface-3: #f8fafb; /* quoted answers, recessed panels */ --surface-hover: #f7fbfb; /* table row hover */ --card-bg: rgba(255, 255, 255, .94); --card-bg-flat: rgba(255, 255, 255, .7); --topbar-bg: rgba(255, 255, 255, .83); --topbar-line: rgba(213, 225, 231, .85); --track: #e9f0f1; --step-dot-bg: #eff3f5; --step-dot-line: #d6e0e5; --step-line: #d9e2e6; --pip-off: #dbe3e8; --opt-hover-line: #9ebdc1; --placeholder: #a7b2bf; --focus-ring: rgba(21, 155, 150, .11); --focus-outline: rgba(21, 155, 150, .35); --sel-bg: #e0f5f2; --sel-ink: #075b62; --strip-bg: linear-gradient(105deg, #f0fbfa, #f8fbfd); --note-bg: linear-gradient(110deg, #edf6ff, #f5f8ff); --note-line: #d4e1f5; --note-ink: #4a6284; --attention-bg: linear-gradient(105deg, #fffaf0, #fff); --attention-line: #f0ddb8; --attention-sub: #a68c61; --journey-bg: linear-gradient(115deg, #fff, #f7fcfb); --quiz-card-bg: linear-gradient(105deg, #f3fcfa, #fff); --rubric-bg: #fff9ed; --rubric-line: #efe0bb; --rubric-ink: #72532b; --scrim: rgba(8, 27, 40, .52); /* auth (login) surfaces */ --auth-bg: #eef5f6; --auth-ink: #0d2333; --auth-orb-1: rgba(21, 155, 150, .35); --auth-orb-2: rgba(66, 133, 244, .22); --auth-orb-3: rgba(255, 176, 92, .18); --auth-mesh: rgba(16, 60, 70, .055); --auth-beam: rgba(255, 255, 255, .5); --panel-bg: rgba(255, 255, 255, .62); --panel-line: rgba(255, 255, 255, .85); --panel-ink: #132338; --story-bg: radial-gradient(520px 340px at 86% 88%, rgba(44, 192, 177, .26), transparent 66%), linear-gradient(148deg, #072336 0%, #0c3848 54%, #0a6f72 142%); --story-ring: rgba(155, 238, 223, .13); --story-ink: #ffffff; --story-ink-2: #b6ced3; --story-ink-3: #7298a3; --story-accent: #6be0cc; --glass-bg: rgba(10, 37, 52, .42); --glass-line: rgba(205, 245, 236, .2); --auth-card-bg: rgba(255, 255, 255, .74); --auth-card-line: rgba(255, 255, 255, .9); --auth-card-shadow: 0 28px 64px rgba(8, 40, 52, .16), 0 2px 8px rgba(8, 40, 52, .06); --auth-input-bg: rgba(255, 255, 255, .82); --auth-spotlight: rgba(21, 155, 150, .16); --switch-bg: rgba(19, 35, 56, .05); /* brand mark — the navy the AP handshake logo is drawn on. Fixed in both themes so the logo tile keeps its intended contrast. */ --logo-navy: #22314a; --radius: 16px; --radius-sm: 11px; --blur: 18px; --shadow: 0 1px 2px rgba(16, 39, 56, .04), 0 10px 28px rgba(16, 39, 56, .055); --shadow-lg: 0 18px 50px rgba(10, 32, 47, .12); --font: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Space Grotesk", "Manrope", sans-serif; --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ------------------------------ dark theme ------------------------------ */ /* Screen-only: printed output (report cards, PDFs) always falls back to the light palette in :root, so ink-on-paper stays readable in dark mode. */ @media screen { [data-theme="dark"] { --bg: #070e15; --bg-deep: #050b11; --bg-glow: rgba(43, 181, 168, .1); --card: #0f1b25; --ink: #e9f2f6; --ink-2: #a8bcc8; --ink-3: #7b919e; --line: #1b2934; --line-strong: #263a4a; --line-soft: #16232d; --line-hover: #37505f; --brand: #2bb5a8; --brand-dark: #45cdb9; --brand-deep: #86e3d0; --brand-soft: rgba(43, 181, 168, .16); --brand-wash: rgba(43, 181, 168, .08); --brand-line: rgba(43, 181, 168, .32); --sidebar-1: #07131c; --sidebar: #0a1620; --sidebar-2: #0d1e29; --sidebar-3: #081319; --sidebar-ink: #c4d5e0; --green: #55d6a3; --green-bg: rgba(30, 110, 84, .28); --green-line: rgba(85, 214, 163, .3); --amber: #e8b964; --amber-bg: rgba(163, 99, 23, .26); --amber-line: rgba(232, 185, 100, .3); --red: #f2918a; --red-bg: rgba(168, 56, 50, .26); --red-line: rgba(242, 145, 138, .3); --blue: #85a9f2; --blue-bg: rgba(49, 92, 168, .3); --blue-line: rgba(133, 169, 242, .3); --grey: #a3b4c1; --grey-bg: rgba(104, 120, 139, .22); --grey-line: rgba(163, 180, 193, .24); --violet: #b79ce8; --violet-bg: rgba(117, 83, 168, .26); --gold: #e6b45c; --gold-bg: rgba(162, 99, 26, .26); --surface: #101d27; --surface-2: #0d1922; --surface-3: #0c1720; --surface-hover: rgba(43, 181, 168, .07); --card-bg: rgba(16, 29, 39, .92); --card-bg-flat: rgba(14, 26, 35, .66); --topbar-bg: rgba(9, 17, 24, .78); --topbar-line: rgba(38, 58, 74, .8); --track: #16242e; --step-dot-bg: #13212b; --step-dot-line: #2a3d4b; --step-line: #22323d; --pip-off: #243744; --opt-hover-line: #3c5a66; --placeholder: #64798a; --focus-ring: rgba(43, 181, 168, .22); --focus-outline: rgba(99, 226, 205, .5); --sel-bg: rgba(43, 181, 168, .3); --sel-ink: #eafffa; --strip-bg: linear-gradient(105deg, rgba(43, 181, 168, .09), rgba(16, 29, 39, .4)); --note-bg: linear-gradient(110deg, rgba(49, 92, 168, .18), rgba(16, 29, 39, .5)); --note-line: rgba(133, 169, 242, .24); --note-ink: #b9c9e4; --attention-bg: linear-gradient(105deg, rgba(163, 99, 23, .16), rgba(16, 29, 39, .5)); --attention-line: rgba(232, 185, 100, .26); --attention-sub: #c9a978; --journey-bg: linear-gradient(115deg, rgba(16, 29, 39, .95), rgba(43, 181, 168, .07)); --quiz-card-bg: linear-gradient(105deg, rgba(43, 181, 168, .08), rgba(16, 29, 39, .6)); --rubric-bg: rgba(163, 99, 23, .12); --rubric-line: rgba(232, 185, 100, .26); --rubric-ink: #e0c088; --scrim: rgba(2, 8, 13, .68); --auth-bg: #050c13; --auth-ink: #e9f2f6; --auth-orb-1: rgba(43, 181, 168, .3); --auth-orb-2: rgba(78, 116, 240, .26); --auth-orb-3: rgba(224, 120, 190, .14); --auth-mesh: rgba(140, 200, 210, .07); --auth-beam: rgba(120, 220, 210, .1); --panel-bg: rgba(11, 21, 29, .5); --panel-line: rgba(150, 220, 225, .16); --panel-ink: #e9f2f6; --story-bg: radial-gradient(520px 340px at 86% 88%, rgba(43, 181, 168, .22), transparent 66%), linear-gradient(148deg, #04121d 0%, #072531 54%, #06444a 142%); --story-ring: rgba(120, 226, 210, .12); --story-ink: #f2fbfa; --story-ink-2: #a7c3c9; --story-ink-3: #6d8f99; --story-accent: #63e2cd; --glass-bg: rgba(6, 20, 28, .5); --glass-line: rgba(140, 226, 214, .18); --auth-card-bg: rgba(13, 25, 34, .68); --auth-card-line: rgba(140, 226, 214, .16); --auth-card-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3); --auth-input-bg: rgba(8, 17, 24, .62); --auth-spotlight: rgba(43, 181, 168, .18); --switch-bg: rgba(255, 255, 255, .05); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .34); --shadow-lg: 0 24px 62px rgba(0, 0, 0, .5); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: radial-gradient(700px 360px at 82% -10%, var(--bg-glow), transparent 65%), var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; min-height: 100vh; display: flex; -webkit-font-smoothing: antialiased; } body::selection { background: var(--sel-bg); color: var(--sel-ink); } body { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } a { color: var(--brand-dark); text-decoration: none; } a:hover { text-decoration: none; } button, input, select, textarea { font-family: inherit; } button { -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4 { margin: 0 0 .45em; line-height: 1.2; letter-spacing: -.025em; } h1, h2 { font-family: var(--display); } h1 { font-size: clamp(25px, 2.5vw, 32px); letter-spacing: -.04em; } h2 { font-size: 20px; } h3 { font-size: 16px; } p { margin: .4em 0; } code { background: var(--grey-bg); padding: 2px 6px; border-radius: 6px; font-family: var(--mono); font-size: 12px; } ::placeholder { color: var(--placeholder); } /* ----------------------------- accessibility ----------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-180%); background: var(--brand-deep); color: #fff; padding: 9px 13px; border-radius: 8px; font-weight: 700; box-shadow: var(--shadow-lg); } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 2px; } /* ----------------------------- shell / layout ----------------------------- */ #sidebar { width: 270px; flex: 0 0 270px; min-height: 100vh; height: 100vh; position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; overflow: hidden; color: var(--sidebar-ink); background: linear-gradient(170deg, var(--sidebar-1) 0%, var(--sidebar) 56%, var(--sidebar-3) 100%); box-shadow: 10px 0 35px rgba(8, 28, 43, .08); } #sidebar::before { content: ""; position: absolute; width: 280px; height: 280px; right: -150px; top: 120px; border-radius: 50%; background: rgba(21, 155, 150, .09); filter: blur(2px); pointer-events: none; } #sidebar:empty { display: none; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } .view { padding: 34px 42px 72px; max-width: 1440px; width: 100%; margin: 0 auto; } #nav-scrim { display: none; } /* sidebar */ .brand { position: relative; padding: 27px 24px 22px; border-bottom: 1px solid rgba(225, 245, 247, .1); z-index: 1; } .brand .logo { display: inline-flex; align-items: center; gap: 11px; color: #fff; font-size: 19px; letter-spacing: -.02em; } .brand .logo:hover { text-decoration: none; } .brand .logo strong { font-family: var(--display); font-size: 18px; letter-spacing: -.01em; display: block; line-height: 1; } .brand .logo small { display: block; color: #8da8b7; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; } .brand .logo .mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--logo-navy); box-shadow: 0 7px 18px rgba(10, 22, 40, .32); --logo-cut: var(--logo-navy); /* gaps show the tile behind the mark */ } .brand .logo .mark .mark-svg { width: 27px; height: auto; display: block; } .brand-status { display: flex; align-items: center; gap: 7px; color: #7e9aaa; font-size: 10.5px; margin-top: 19px; letter-spacing: .015em; } .brand-status span, .live-status i, .online-dot { width: 7px; height: 7px; border-radius: 50%; background: #45d4ae; box-shadow: 0 0 0 4px rgba(69, 212, 174, .12); display: inline-block; } .nav { flex: 1; padding: 17px 13px; overflow-y: auto; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .nav-group + .nav-group { margin-top: 19px; } .nav .nav-label { color: #648192; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 0 12px 8px; } .nav a { display: flex; align-items: center; gap: 12px; color: #aebfca; padding: 10px 12px; border-radius: 10px; margin: 3px 0; font-size: 13px; font-weight: 600; transition: color .18s, background .18s, transform .18s; } .nav a:hover { color: #fff; background: rgba(255, 255, 255, .065); transform: translateX(2px); } .nav a.active { color: #fff; background: linear-gradient(100deg, rgba(26, 169, 159, .95), rgba(22, 133, 139, .9)); box-shadow: 0 8px 18px rgba(3, 111, 112, .2), inset 0 1px rgba(255,255,255,.16); } .nav a .ico { width: 19px; height: 19px; display: grid; place-items: center; color: currentColor; opacity: .82; flex: 0 0 auto; } .nav a.active .ico { opacity: 1; } .nav a .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .side-user { position: relative; z-index: 1; padding: 16px 15px 17px; border-top: 1px solid rgba(225, 245, 247, .1); } .side-user-card { padding: 12px 10px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.075); border-radius: 13px; } .side-user .who { color: #fff; font-weight: 600; display: flex; align-items: center; gap: 9px; min-width: 0; } .side-user .avatar, .topbar-avatar { width: 31px; height: 31px; border-radius: 10px; background: linear-gradient(145deg, #f6c77d, #d9845d); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 11px; font-weight: 700; flex: 0 0 auto; } .who-copy { min-width: 0; display: flex; flex-direction: column; } .who-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .who-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7893a4; font-size: 10px; margin-top: 2px; } .side-user .role { display: flex; align-items: center; gap: 7px; color: #87a2b1; text-transform: capitalize; margin: 11px 2px 0; font-size: 10.5px; } .side-user .online-dot { width: 6px; height: 6px; box-shadow: none; } .side-user .signout { width: 100%; justify-content: center; margin-top: 11px; } /* top bar */ #topbar { min-height: 76px; padding: 13px 42px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-line); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); } #topbar:empty { display: none; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; } .topbar-context { display: flex; flex-direction: column; gap: 2px; } .topbar-context strong { font-family: var(--display); font-size: 16px; letter-spacing: -.025em; } .eyebrow { color: var(--brand-dark); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } .topbar-context .eyebrow { color: var(--ink-3); } .live-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11px; font-weight: 600; } .live-status i { width: 6px; height: 6px; box-shadow: none; } .topbar-divider { width: 1px; height: 22px; background: var(--line); } .topbar-role { color: var(--ink-2); font-size: 11px; font-weight: 700; text-transform: capitalize; } .topbar-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; } .mobile-nav-toggle { display: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; width: 36px; height: 36px; cursor: pointer; font-size: 18px; line-height: 1; } .theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; box-shadow: 0 2px 5px rgba(16, 39, 56, .03); transition: color .18s, border-color .18s, background .18s, transform .18s; } .theme-toggle:hover { color: var(--brand-dark); border-color: var(--brand-line); background: var(--brand-wash); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(.94); } .theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ----------------------------- page chrome ----------------------------- */ .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 28px; } .page-heading h1 { margin: 7px 0 5px; } .page-heading p { color: var(--ink-2); margin: 0; max-width: 650px; } .page-heading .heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .heading-dot { color: var(--brand); } .section-kicker { color: var(--ink-3); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .panel-head h2, .panel-head h3 { margin: 3px 0 0; } .panel-head p { color: var(--ink-3); font-size: 12px; margin: 5px 0 0; } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 20px; align-items: start; } .dashboard-grid .card { height: calc(100% - 20px); } .dashboard-side { display: grid; gap: 0; } .dashboard-side .card { margin-bottom: 20px; } .panel-orb { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: 14px; font-weight: 800; } .status-list { display: grid; gap: 2px; } .status-row { display: grid; grid-template-columns: 1fr auto 15px; align-items: center; gap: 9px; padding: 9px 7px; border-radius: 9px; transition: background .14s; } .status-row:hover { background: var(--brand-wash); }.status-row strong { font-family: var(--display); font-size: 17px; color: var(--ink); }.status-arrow { color: var(--ink-3); font-size: 15px; }.status-row:hover .status-arrow { color: var(--brand-dark); } .action-callout { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 10px 11px; border-radius: 10px; color: var(--amber); background: var(--amber-bg); font-size: 10.5px; }.action-callout > span:first-child { width: 17px; height: 17px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e5b763; color: #fff; font-weight: 800; }.action-callout a { margin-left: auto; color: var(--amber); font-weight: 800; text-decoration: underline; } .activity-list { display: grid; }.activity-item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 8px 0; }.activity-item + .activity-item { border-top: 1px solid var(--line-soft); }.activity-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }.activity-message { color: var(--ink-2); line-height: 1.4; } .toolbar-card { display: flex; align-items: center; gap: 14px; padding: 13px 16px; margin-bottom: 16px; }.toolbar-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11px; font-weight: 800; white-space: nowrap; }.toolbar-icon { width: 25px; height: 25px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: 8px; font-size: 16px; }.toolbar-card input[type=search] { width: 260px; }.toolbar-card select { width: min(320px, 100%); }.toolbar-fields { flex: 1; }.toolbar-hint { margin-left: auto; color: var(--ink-3); font-size: 10.5px; white-space: nowrap; }.filter-pills .chip { cursor: pointer; transition: background .14s, color .14s; }.filter-pills .chip:hover, .filter-pills .chip.selected { color: #fff; background: var(--brand); }.filter-pills .chip b { margin-left: 5px; opacity: .7; font-size: 10px; }.info-strip { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 11.5px; padding: 13px 16px; background: var(--strip-bg); }.info-strip-icon { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); font-weight: 800; }.account-summary { display: flex; align-items: center; gap: 9px; padding: 13px 16px; color: var(--ink-2); font-size: 11px; }.account-summary-number { color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 700; }.summary-divider { height: 19px; width: 1px; background: var(--line-strong); margin: 0 5px; }.table-card { padding: 6px 14px; }.workspace-pill, .journey-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 10px; font-weight: 800; }.workspace-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.attention-card { display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-color: var(--attention-line); background: var(--attention-bg); }.attention-card > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--amber); font-size: 11.5px; }.attention-card small { color: var(--attention-sub); font-size: 10px; }.attention-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--amber-bg); color: var(--amber); font-weight: 800; } .journey-card { background: var(--journey-bg); }.journey-spark { width: 30px; height: 30px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 9px; }.candidate-heading { align-items: center; }.quiz-topbar, .score-topbar { position: sticky; top: 91px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; background: var(--topbar-bg); backdrop-filter: blur(var(--blur)); }.quiz-title, .score-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }.quiz-title h2, .score-identity h2 { margin: 3px 0 0; font-size: 17px; }.quiz-back { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: 17px; }.quiz-back a { color: inherit; }.quiz-progress { width: min(310px, 38%); }.quiz-progress-label { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 10px; margin-bottom: 7px; }.quiz-track { height: 6px; overflow: hidden; border-radius: 99px; background: var(--track); }.quiz-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55cabb, var(--brand-dark)); transition: width .2s ease; }.quiz-submit-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: var(--brand-line); background: var(--quiz-card-bg); }.quiz-submit-card h3 { margin: 3px 0; }.back-link { color: var(--brand-dark); font-size: 11px; font-weight: 800; white-space: nowrap; }.score-identity { gap: 14px; }.score-separator { width: 1px; height: 32px; background: var(--line); }.score-actions { justify-content: flex-end; } /* ----------------------------- components ----------------------------- */ .card, .stat { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 23px 25px; margin-bottom: 20px; } .card.flat { box-shadow: none; background: var(--card-bg-flat); } .card h2, .card h3 { margin-top: 0; } .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .muted { color: var(--ink-3); } .small { font-size: 12px; } .mono { font-family: var(--mono); font-size: 11.5px; } .hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } .btn { font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; border-radius: 10px; padding: 10px 16px; border: 1px solid transparent; cursor: pointer; background: linear-gradient(110deg, var(--brand), #118b8c); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; box-shadow: 0 6px 14px rgba(11, 137, 132, .14); transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; } .btn:hover { color: #fff; background: linear-gradient(110deg, var(--brand-dark), #087477); box-shadow: 0 8px 18px rgba(11, 137, 132, .23); transform: translateY(-1px); } .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 2px 5px rgba(16, 39, 56, .03); } .btn.secondary:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line-hover); } .btn.danger { background: var(--surface); color: var(--red); border-color: var(--red-line); box-shadow: none; } .btn.danger:hover { color: var(--red); background: var(--red-bg); border-color: var(--red); } .btn.ghost { background: transparent; color: var(--brand-dark); border-color: transparent; box-shadow: none; padding: 7px 10px; } .btn.ghost:hover { color: var(--brand-deep); background: var(--brand-soft); box-shadow: none; } .btn.sm { padding: 7px 11px; font-size: 11.5px; border-radius: 8px; } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn.block { width: 100%; } .btn-icon { font-size: 15px; line-height: 0; transform: rotate(90deg); } .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 800; border: 1px solid transparent; white-space: nowrap; letter-spacing: .005em; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; } .badge.green { color: var(--green); background: var(--green-bg); border-color: var(--green-line); } .badge.amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); } .badge.red { color: var(--red); background: var(--red-bg); border-color: var(--red-line); } .badge.blue { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-line); } .badge.grey { color: var(--grey); background: var(--grey-bg); border-color: var(--grey-line); } .chip { display: inline-block; background: var(--grey-bg); color: var(--ink-2); border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 800; } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; } /* metric cards */ .metric-grid { margin-bottom: 22px; } .stat { position: relative; overflow: hidden; padding: 19px 20px; min-height: 132px; } .stat::after { content: ""; position: absolute; width: 100px; height: 100px; right: -44px; bottom: -52px; border-radius: 50%; background: var(--brand-soft); opacity: .7; } .stat .stat-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; } .stat .stat-icon { width: 33px; height: 33px; border-radius: 10px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); font-size: 16px; } .stat .stat-trend { color: var(--green); background: var(--green-bg); border-radius: 999px; padding: 3px 7px; font-size: 9.5px; font-weight: 800; } .stat .num { position: relative; z-index: 1; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: -.06em; margin-top: 15px; } .stat .lbl { position: relative; z-index: 1; color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: .01em; margin-top: 1px; } .stat.stat-gold .stat-icon { color: var(--gold); background: var(--gold-bg); } .stat.stat-gold::after { background: var(--gold-bg); } .stat.stat-blue .stat-icon { color: var(--blue); background: var(--blue-bg); } .stat.stat-blue::after { background: var(--blue-bg); } .stat.stat-violet .stat-icon { color: var(--violet); background: var(--violet-bg); } .stat.stat-violet::after { background: var(--violet-bg); } /* tables */ table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; } table.data th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--ink-3); font-weight: 800; padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.data td { padding: 14px 13px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background .14s; } table.data tbody tr:hover { background: var(--surface-hover); } table.data .actions { text-align: right; white-space: nowrap; } table.data .actions .btn { vertical-align: middle; } /* Horizontal scroll is kept on the card, with a keyboard-reachable region so wide tables remain operable without a mouse. */ .card:has(> table.data) { overflow-x: auto; } .card:has(> table.data):focus-visible { outline: 3px solid var(--focus-outline); outline-offset: -3px; } /* form controls */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea { font: inherit; font-size: 13px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); transition: border-color .16s, box-shadow .16s, background .16s; } input:hover, select:hover, textarea:hover { border-color: var(--line-hover); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; transition: background-color 9999s ease-in-out 0s; } textarea { resize: vertical; min-height: 84px; } label.f { display: block; margin-bottom: 15px; } label.f > span.lbl { display: block; font-size: 11px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .01em; } label.f .help { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; } label.f .req { color: var(--red); } label.f .field-err, .field-err { font-size: 10.5px; font-weight: 700; color: var(--red); margin-top: 5px; display: flex; align-items: flex-start; gap: 5px; } .field-err::before { content: "!"; flex: none; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--red-bg); font-size: 9px; font-weight: 900; } input.invalid, select.invalid, textarea.invalid { border-color: var(--red); background: var(--red-bg); } input.invalid:focus, select.invalid:focus, textarea.invalid:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(181, 58, 53, .13); } .modal-intro { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; } .confirm-copy { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); } body.modal-open { overflow: hidden; } .f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .f-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .check { display: flex; align-items: center; gap: 8px; font-weight: 600; } .check input { width: 16px; height: 16px; accent-color: var(--brand); } /* pipeline / progress */ .stage-bars .bar-row { display: grid; grid-template-columns: 170px minmax(80px, 1fr) 34px; gap: 12px; align-items: center; margin-bottom: 13px; } .stage-bars .track { background: var(--track); height: 9px; border-radius: 99px; overflow: hidden; } .stage-bars .fill { background: linear-gradient(90deg, #54c7b7, var(--brand-dark)); height: 100%; border-radius: 99px; } .stepper { display: flex; gap: 0; margin: 9px 0 3px; flex-wrap: wrap; } .step { flex: 1; min-width: 115px; position: relative; text-align: center; padding: 0 6px; } .step .dot { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--step-dot-bg); color: var(--grey); border: 2px solid var(--step-dot-line); position: relative; z-index: 1; } .step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--step-line); z-index: 0; } .step:first-child::before { display: none; } .step.done .dot { background: var(--green-bg); color: var(--green); border-color: var(--green-line); } .step.done::before { background: var(--green); } .step.current .dot { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); } .step .name { font-size: 10.5px; font-weight: 800; color: var(--ink-2); } .step.done .name { color: var(--green); } .step.current .name { color: var(--brand-dark); } .progress { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; min-width: 90px; } .progress > span { display: block; height: 100%; background: linear-gradient(90deg, #61c8b8, var(--brand)); border-radius: 99px; } /* quiz */ .q-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 21px 22px; margin-bottom: 15px; box-shadow: 0 3px 12px rgba(16, 39, 56, .025); } .q-card .q-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; } .q-card .q-num { flex: 0 0 auto; width: 29px; height: 29px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; display: grid; place-items: center; font-size: 11.5px; } .q-card .q-prompt { font-weight: 800; font-size: 14px; letter-spacing: -.01em; } .opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color .14s, background .14s, transform .14s; } .opt:hover { border-color: var(--opt-hover-line); transform: translateX(2px); } .opt.selected { border-color: var(--brand); background: var(--brand-wash); box-shadow: inset 3px 0 var(--brand); } .opt input { margin-top: 3px; accent-color: var(--brand); } .opt.correct { border-color: #8acdaf; background: var(--green-bg); } .opt.wrong { border-color: #e4aaa2; background: var(--red-bg); } .scale-row { display: flex; gap: 8px; } .scale-row button { width: 45px; height: 42px; font-weight: 800; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2); cursor: pointer; font-size: 14px; transition: all .14s; } .scale-row button:hover { border-color: var(--brand); color: var(--brand-dark); } .scale-row button.selected { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 5px 12px rgba(21,155,150,.2); } .save-state { font-size: 11px; color: var(--ink-3); } .save-state.saved { color: var(--green); } .comp-header { margin: 31px 0 13px; padding: 0 0 9px 2px; border-bottom: 1px solid var(--line); position: relative; } .comp-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 50px; height: 2px; background: var(--brand); } .comp-header h3 { margin: 0; } .comp-header .meta { color: var(--ink-3); font-size: 11px; margin-top: 4px; } /* rubric / assessor */ .rubric { background: var(--rubric-bg); border: 1px solid var(--rubric-line); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--rubric-ink); } blockquote.answer { margin: 0; background: var(--surface-3); border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; padding: 13px 16px; white-space: pre-wrap; font-size: 13px; color: var(--ink-2); } .score-input { width: 90px; } .demo-creds { background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note-ink); border-radius: 12px; padding: 13px 16px; font-size: 11.5px; margin-bottom: 20px; } .demo-creds code { background: var(--surface-2); border: 1px solid var(--note-line); color: var(--note-ink); } details.fold { margin: 9px 0; } details.fold summary { cursor: pointer; font-weight: 800; color: var(--ink-2); font-size: 11.5px; } /* report card */ .report { overflow: hidden; position: relative; } .report::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -100px; top: -150px; background: var(--brand-wash); pointer-events: none; } .report-hero { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; position: relative; } .score-ring { width: 126px; height: 126px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: 0 0 auto; box-shadow: 0 10px 23px rgba(14, 114, 116, .09); } .score-ring .inner { width: 98px; height: 98px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; } .score-ring .val { font-family: var(--display); font-size: 27px; font-weight: 700; letter-spacing: -.06em; } .score-ring .cap { font-size: 9px; color: var(--ink-3); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; } .level-pips { display: inline-flex; gap: 3px; vertical-align: middle; } .level-pips i { width: 14px; height: 6px; border-radius: 4px; background: var(--pip-off); display: inline-block; } .level-pips i.on { background: var(--brand); } .lvl-target { opacity: .9; } /* ------------------------- printable report card ------------------------- */ .report-document { width: 100%; max-width: 1040px; margin: 0 auto; } .report-actions { padding: 12px 18px; } .report.report-cover { padding: 0; overflow: hidden; } .report-brandbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 25px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(105deg, var(--surface-2), var(--brand-wash)); } .report-brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; } .report-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: var(--logo-navy); --logo-cut: var(--logo-navy); box-shadow: 0 7px 17px rgba(12, 42, 56, .16); overflow: hidden; } .report-logo { width: 27px; height: 27px; display: block; } .report-brand-copy { display: grid; gap: 2px; min-width: 0; } .report-brand-copy strong { color: var(--ink); font: 700 16px/1.1 var(--display); letter-spacing: -.03em; } .report-brand-copy small { color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .report-document-label { display: grid; gap: 3px; text-align: right; color: var(--brand-dark); font-size: 9px; font-weight: 800; letter-spacing: .11em; } .report-document-label b { color: var(--ink); font: 700 15px/1.1 var(--display); letter-spacing: .01em; } .report-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 25px 25px 0; } .report-header-row h1 { margin: 5px 0 3px; font-size: clamp(25px, 3vw, 34px); } .report-kicker { color: var(--brand-dark); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .report-subtitle { color: var(--ink-2); font-size: 12px; } .report-meta-line { margin-top: 8px; line-height: 1.55; } .report-status-stamp { display: grid; gap: 4px; min-width: 148px; padding: 11px 13px; border: 1px solid var(--brand-line); border-radius: 11px; color: var(--brand-dark); background: var(--brand-wash); text-align: right; } .report-status-stamp span { font-size: 8px; font-weight: 800; letter-spacing: .12em; } .report-status-stamp b { color: var(--ink); font: 700 13px/1.2 var(--display); } .report.report-cover > .hr { margin: 20px 25px; } .report-hero { padding: 0 25px 22px; } .report-score-ring { width: 138px; height: 138px; background: transparent; box-shadow: none; } .report-score-ring .report-donut { width: 100%; height: 100%; } .report-donut { display: block; width: 148px; height: 148px; overflow: visible; } .report-donut-track { stroke: var(--track); } .report-donut-value { transition: stroke-dasharray .25s ease; } .report-donut-number { fill: var(--ink); font: 700 21px var(--display); letter-spacing: -.05em; } .report-donut-label { fill: var(--ink-3); font: 800 6px var(--font); letter-spacing: .14em; } .report-readiness-copy { min-width: 260px; } .report-readiness-copy h3 { margin: 0 0 5px; font-size: 18px; } .report-readiness-copy p { max-width: 570px; margin: 0; line-height: 1.65; } .report-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--surface-2); } .report-stat-strip > div { display: grid; gap: 4px; padding: 13px 17px; border-right: 1px solid var(--line); } .report-stat-strip > div:last-child { border-right: 0; } .report-stat-strip span { color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .report-stat-strip b { color: var(--ink); font: 700 16px var(--display); } .report-visual-summary, .report-competency-card, .report-improvement-card, .report-strength-card, .report-breakdown-card { padding: 22px 25px; } .report-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; } .report-section-head.compact { margin-bottom: 14px; } .report-section-head h2 { margin: 3px 0 4px; font-size: 20px; } .report-section-head p { margin: 0; color: var(--ink-3); font-size: 11px; line-height: 1.5; } .report-print-note { color: var(--ink-3); font: 500 9px var(--mono); white-space: nowrap; } .report-summary-grid { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(360px, 1.35fr); gap: 14px; } .report-chart-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 15px; } .report-chart-title { display: grid; gap: 3px; margin-bottom: 12px; } .report-chart-title span { color: var(--ink-2); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .report-chart-title small { color: var(--ink-3); font-size: 10px; } .report-score-panel { display: grid; grid-template-columns: 125px minmax(0, 1fr); align-items: center; column-gap: 12px; } .report-score-panel .report-chart-title { grid-column: 1 / -1; } .report-score-panel > .report-donut { width: 120px; height: 120px; grid-row: 2 / span 2; } .report-score-detail { display: grid; gap: 3px; align-self: end; } .report-score-detail b { font: 700 21px var(--display); letter-spacing: -.04em; } .report-score-detail span { color: var(--ink-2); font-size: 10px; line-height: 1.35; } .report-earned-line { display: flex; justify-content: space-between; gap: 8px; align-self: start; padding-top: 9px; margin-top: 9px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 10px; } .report-earned-line b { color: var(--ink-2); } .report-pie-layout { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 12px; } .report-pie { display: block; width: 142px; height: 142px; } .report-pie-center { fill: var(--ink); font: 700 14px var(--display); } .report-pie-center-label { fill: var(--ink-3); font: 800 5px var(--font); letter-spacing: .11em; } .report-legend { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; } .report-legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; font-size: 10px; } .report-legend-dot { width: 7px; height: 7px; border-radius: 50%; } .report-legend-name { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; } .report-legend b { color: var(--ink); font-size: 10px; } .report-bars-panel { margin-top: 14px; } .report-bars { display: grid; gap: 11px; } .report-bar-row { display: grid; grid-template-columns: minmax(190px, .9fr) minmax(180px, 1.65fr) 58px; align-items: center; gap: 12px; } .report-bar-label { display: grid; gap: 3px; min-width: 0; } .report-bar-label span { overflow: hidden; color: var(--ink-2); font-size: 10.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .report-bar-label small { color: var(--ink-3); font-size: 9px; } .report-bar-track { position: relative; height: 9px; overflow: visible; border-radius: 99px; background: var(--track); } .report-bar-fill { display: block; height: 100%; border-radius: inherit; } .report-target-marker { position: absolute; top: -4px; width: 2px; height: 17px; border-radius: 2px; background: var(--ink); opacity: .72; } .report-bar-value { color: var(--ink); font: 700 12px var(--display); text-align: right; } .report-section-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; font-weight: 800; } .report-section-icon.amber { color: var(--amber); background: var(--amber-bg); } .report-section-icon.green { color: var(--green); background: var(--green-bg); } .report-improvement-card { border-left: 4px solid var(--amber); } .report-improvement-row { padding: 14px 0; } .report-improvement-meta { margin: 5px 0 8px; } .report-focus { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; color: var(--ink-2); background: var(--amber-bg); font-size: 10.5px; line-height: 1.5; } .report-focus b { color: var(--amber); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; } .report-strength-card { border-left: 4px solid var(--green); } .report-strength-pills { margin-top: 5px; } .report-strength-pills .chip { color: var(--green); background: var(--green-bg); } .report-strength-pills .chip b { margin-left: 5px; } .report-breakdown-card { margin-top: 20px; } .report-breakdown-heading { margin: 19px 0 9px; padding-top: 1px; color: var(--ink-2); font-size: 14px; } .report-chart-empty { padding: 20px 0; color: var(--ink-3); font-size: 11px; } .report-footer { display: flex; justify-content: space-between; gap: 15px; padding: 15px 2px 4px; color: var(--ink-3); font-size: 9px; line-height: 1.5; } .report-footer b { color: var(--brand-dark); } /* modal / toast */ #modal-root .backdrop { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 40; padding: 20px; backdrop-filter: blur(5px); } .modal { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 70px rgba(5, 22, 34, .3); width: 640px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; } .modal.wide { width: 780px; } .modal .m-head { padding: 19px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); } .modal .m-head h3 { margin: 0; font-size: 17px; } .modal .m-body { padding: 22px; overflow-y: auto; } .modal .m-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); } .modal .x { background: var(--grey-bg); border: 0; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; color: var(--ink-2); cursor: pointer; } .modal .x:hover { background: var(--line); color: var(--ink); } #toast-root { position: fixed; bottom: 23px; right: 23px; z-index: 60; display: flex; flex-direction: column; gap: 9px; } .toast { display: flex; align-items: flex-start; gap: 10px; background: #102a3b; color: #fff; border-radius: 11px; padding: 12px 13px 12px 16px; font-size: 12px; font-weight: 600; line-height: 1.5; box-shadow: 0 11px 27px rgba(10,25,35,.22); max-width: 390px; border-left: 4px solid var(--brand); } .toast.toast-in { animation: slidein .2s ease-out; } .toast.toast-out { animation: slideout .22s ease-in forwards; } .toast .toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .toast .toast-icon { flex: none; width: 17px; height: 17px; margin-top: .5px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 10px; font-weight: 900; } .toast .toast-x { flex: none; background: transparent; border: 0; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1; padding: 2px 3px; margin: -1px -2px 0 0; border-radius: 5px; cursor: pointer; transition: color .15s, background .15s; } .toast .toast-x:hover { color: #fff; background: rgba(255,255,255,.14); } .toast .toast-x:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 1px; } .toast.error { border-left-color: var(--red); } .toast.error .toast-icon { background: rgba(255,138,128,.24); color: #ffd9d4; } .toast.success { border-left-color: #36c28d; } .toast.success .toast-icon { background: rgba(54,194,141,.26); color: #cdf5e5; } @keyframes slidein { from { transform: translateY(8px); opacity: 0; } } @keyframes slideout { to { transform: translateY(6px); opacity: 0; } } /* --------------------------------------------------------------------------- Auth (sign-in) — Anthroprime ECOD Layered, blurred, animated: drifting light orbs + mesh behind a glass shell, a spotlight-and-tilt sign-in card, and a segmented theme switch. --------------------------------------------------------------------------- */ .auth-stage { position: fixed; inset: 0; z-index: 30; overflow: auto; display: grid; grid-template-columns: 1fr; padding: 26px; background: var(--auth-bg); color: var(--auth-ink); } /* backdrop: blurred orbs, mesh, sweeping beam, grain */ .auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1s ease; } .auth-stage.is-ready .auth-bg { opacity: 1; } .auth-orb { position: absolute; display: block; border-radius: 50%; filter: blur(72px); will-change: transform; } .orb-one { width: 52vmax; height: 52vmax; top: -22%; left: -14%; background: var(--auth-orb-1); animation: orbDrift 26s ease-in-out infinite alternate; } .orb-two { width: 44vmax; height: 44vmax; right: -14%; bottom: -22%; background: var(--auth-orb-2); animation: orbDrift 32s ease-in-out -8s infinite alternate-reverse; } .orb-three { width: 30vmax; height: 30vmax; top: 46%; left: 48%; background: var(--auth-orb-3); animation: orbDrift 22s ease-in-out -14s infinite alternate; } .auth-mesh { position: absolute; inset: -2px; background-image: linear-gradient(var(--auth-mesh) 1px, transparent 1px), linear-gradient(90deg, var(--auth-mesh) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 10%, transparent 76%); mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 10%, transparent 76%); animation: meshDrift 40s linear infinite; } .auth-beam { position: absolute; top: -20%; left: -70%; width: 240%; height: 140%; background: linear-gradient(100deg, transparent 38%, var(--auth-beam) 50%, transparent 62%); filter: blur(48px); animation: beamSweep 18s linear infinite; } .auth-grain { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); } /* glass shell */ .auth-shell { position: relative; margin: auto; width: min(1140px, 100%); min-height: min(706px, calc(100vh - 52px)); display: grid; grid-template-columns: 1.03fr .97fr; overflow: hidden; border-radius: 28px; border: 1px solid var(--panel-line); background: var(--panel-bg); backdrop-filter: blur(28px) saturate(155%); -webkit-backdrop-filter: blur(28px) saturate(155%); box-shadow: 0 40px 100px rgba(6, 30, 42, .22), 0 4px 14px rgba(6, 30, 42, .07); opacity: 0; transform: translateY(24px) scale(.985); } .auth-stage.is-ready .auth-shell { animation: shellIn .8s cubic-bezier(.2, .85, .25, 1) forwards; } .glass { background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: 16px; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); } /* --- left: brand story --- */ .auth-story { position: relative; display: flex; overflow: hidden; padding: 38px 42px 26px; color: var(--story-ink); background: var(--story-bg); opacity: 0; } .auth-stage.is-ready .auth-story { animation: riseIn .75s cubic-bezier(.2, .85, .25, 1) .08s forwards; } .auth-story::before, .auth-story::after { content: ""; position: absolute; border: 1px solid var(--story-ring); border-radius: 50%; pointer-events: none; } .auth-story::before { width: 520px; height: 520px; right: -215px; top: -160px; } .auth-story::after { width: 380px; height: 380px; right: -150px; top: -90px; } .story-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; width: 100%; } .story-head, .story-copy, .story-board, .story-foot { position: relative; z-index: 1; } .auth-stage.is-ready .story-head { animation: riseIn .6s cubic-bezier(.2, .85, .25, 1) .22s both; } .auth-stage.is-ready .story-copy { animation: riseIn .6s cubic-bezier(.2, .85, .25, 1) .3s both; } .auth-stage.is-ready .story-board { animation: riseIn .7s cubic-bezier(.2, .85, .25, 1) .4s both; } .auth-stage.is-ready .story-foot { animation: riseIn .6s cubic-bezier(.2, .85, .25, 1) .5s both; } .story-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* brand lockup */ .auth-logo { display: inline-flex; align-items: center; gap: 12px; } .auth-mark { position: relative; width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--logo-navy); box-shadow: 0 10px 24px rgba(10, 22, 40, .3), inset 0 1px rgba(255, 255, 255, .16); overflow: hidden; --logo-cut: var(--logo-navy); } .auth-mark .mark-svg { width: 31px; height: auto; display: block; position: relative; z-index: 1; } .auth-mark::after { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 255, 255, .55) 72%, transparent 88%); animation: markSpin 6s linear infinite; } .auth-wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--story-ink); } .auth-wordmark strong { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1; } .auth-wordmark em { font-style: normal; font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .18em; padding: 4px 7px 3px; border-radius: 7px; color: var(--story-accent); background: rgba(107, 224, 204, .13); border: 1px solid rgba(107, 224, 204, .26); } .story-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; color: var(--story-ink-2); border: 1px solid var(--story-ring); background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .story-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--story-accent); animation: pulseDot 2.6s ease-in-out infinite; } .story-copy { max-width: 470px; } .story-copy .eyebrow.light { color: var(--story-accent); } .story-title { position: relative; color: var(--story-ink); font-size: clamp(33px, 3.6vw, 47px); line-height: 1.05; margin: 14px 0 16px; } .rotator { position: relative; display: inline-block; height: 1.1em; min-width: 10.5ch; vertical-align: bottom; } .rot-word { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--story-accent); opacity: 0; animation: wordCycle 9s cubic-bezier(.4, 0, .2, 1) infinite; } .rot-word:nth-child(2) { animation-delay: 3s; } .rot-word:nth-child(3) { animation-delay: 6s; } .story-lede { max-width: 420px; color: var(--story-ink-2); font-size: 13px; line-height: 1.72; margin: 0 0 20px; } .story-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .story-points li { display: flex; align-items: flex-start; gap: 11px; color: var(--story-ink-2); font-size: 11.5px; line-height: 1.5; } .story-points b { display: block; color: var(--story-ink); font-size: 12px; margin-bottom: 1px; } .story-points .pt-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--story-accent); background: rgba(107, 224, 204, .12); border: 1px solid rgba(107, 224, 204, .2); } .story-points svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* floating capability board */ .story-board { position: relative; min-height: 196px; } .board-glow { position: absolute; width: 230px; height: 150px; left: 60px; top: 30px; border-radius: 50%; background: rgba(26, 190, 175, .22); filter: blur(42px); } .mini-report { position: absolute; width: min(302px, 72%); left: 22px; top: 6px; padding: 16px 17px 14px; animation: floatY 9s ease-in-out infinite; } .mini-head { display: flex; align-items: center; justify-content: space-between; color: var(--story-ink-3); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .mini-dots { letter-spacing: 2px; opacity: .7; } .mini-score-row { display: flex; align-items: center; gap: 13px; padding: 15px 0 13px; } .mini-ring { width: 52px; height: 52px; flex: 0 0 auto; } .mini-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; } .ring-track { stroke: rgba(255, 255, 255, .12); } .ring-fill { stroke: var(--story-accent); stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 6px rgba(107, 224, 204, .55)); } .ring-fill.is-on { stroke-dashoffset: 15.8; transition: stroke-dashoffset 1.7s cubic-bezier(.2, .8, .2, 1) .5s; } .mini-ring-label b { display: flex; align-items: baseline; gap: 1px; color: var(--story-ink); font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.04em; line-height: 1; } .mini-ring-label small { display: block; color: var(--story-ink-3); font-size: 9px; margin-top: 6px; line-height: 1.35; } .mini-bars { display: flex; flex-direction: column; gap: 6px; } .mini-bars span { display: block; height: 5px; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--story-accent), rgba(107, 224, 204, .35)); } .auth-stage.is-ready .mini-bars span { width: var(--w); transition: width 1.3s cubic-bezier(.2, .8, .2, 1); } .auth-stage.is-ready .mini-bars span:nth-child(2) { transition-delay: .12s; } .auth-stage.is-ready .mini-bars span:nth-child(3) { transition-delay: .24s; } .mini-bar-labels { display: flex; justify-content: space-between; color: var(--story-ink-3); font-size: 7.5px; margin-top: 8px; letter-spacing: .02em; } .float-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; color: var(--story-ink); font-size: 9.5px; } .float-chip .chip-icon { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--story-accent); background: rgba(107, 224, 204, .14); } .float-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .float-chip b { display: block; font-family: var(--display); font-size: 13px; letter-spacing: -.02em; } .float-chip small { display: block; color: var(--story-ink-3); font-size: 8.5px; margin-top: 1px; } .chip-one { right: 4px; top: 26px; animation: floatY 7s ease-in-out -1.5s infinite; } .chip-two { right: 26px; bottom: 4px; animation: floatY 8.5s ease-in-out -3s infinite; } .story-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--story-ink-3); font-size: 9.5px; letter-spacing: .02em; } .story-foot b { color: var(--story-accent); margin: 0 5px; opacity: .8; } /* --- right: sign-in panel --- */ .auth-panel { display: grid; place-items: center; padding: 34px 38px; color: var(--panel-ink); opacity: 0; } .auth-stage.is-ready .auth-panel { animation: riseIn .75s cubic-bezier(.2, .85, .25, 1) .18s forwards; } .auth-card { position: relative; width: min(432px, 100%); border-radius: 24px; border: 1px solid var(--auth-card-line); background: var(--auth-card-bg); backdrop-filter: blur(24px) saturate(165%); -webkit-backdrop-filter: blur(24px) saturate(165%); box-shadow: var(--auth-card-shadow); transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; will-change: transform; } .card-spotlight { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--auth-spotlight), transparent 68%); } .auth-card:hover .card-spotlight { opacity: 1; } .auth-card.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); } .auth-card-inner { position: relative; z-index: 1; padding: 30px 36px 26px; } .auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; } .auth-logo-mobile { display: none; } /* theme switch */ .theme-switch { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--switch-bg); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(6, 30, 42, .06); } .theme-thumb { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(150deg, var(--brand), #0e8587); box-shadow: 0 5px 12px rgba(11, 137, 132, .34); transition: transform .34s cubic-bezier(.34, 1.4, .5, 1); } .theme-switch[data-active="1"] .theme-thumb { transform: translateX(30px); } .theme-switch[data-active="2"] .theme-thumb { transform: translateX(60px); } .theme-opt { position: relative; z-index: 1; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; transition: color .2s ease, transform .2s ease; } .theme-opt:hover { color: var(--brand-dark); } .theme-opt:active { transform: scale(.92); } .theme-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-opt[aria-checked="true"] { color: #fff; } .theme-opt[aria-checked="true"]:hover { color: #fff; } .auth-heading { margin-bottom: 24px; } .auth-heading h2 { font-size: 30px; margin: 9px 0 6px; letter-spacing: -.04em; } .auth-heading p { color: var(--ink-3); font-size: 12.5px; margin: 0; } /* fields */ .login-field { margin-bottom: 16px !important; } .login-field > .lbl { color: var(--ink-2) !important; font-size: 11px !important; transition: color .2s ease; } .login-field:focus-within > .lbl { color: var(--brand-dark); } .input-wrap { position: relative; display: block; } .input-wrap input { padding: 13px 46px 13px 41px; border-radius: 13px; font-size: 12.5px; background: var(--auth-input-bg); border-color: var(--line-strong); } .input-wrap input:hover { border-color: var(--line-hover); } .input-wrap input:focus { background: var(--surface); } .input-wrap::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } .input-wrap:focus-within::after { transform: scaleX(1); } .input-icon { position: absolute; z-index: 1; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); transition: color .2s ease, transform .25s ease; } .input-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .input-wrap:focus-within .input-icon { color: var(--brand-dark); transform: translateY(-50%) scale(1.06); } .login-field.filled .input-icon { color: var(--brand-dark); } .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--ink-3); cursor: pointer; transition: background .18s, color .18s, transform .18s; } .password-toggle:hover { background: var(--brand-soft); color: var(--brand-dark); } .password-toggle:active { transform: translateY(-50%) scale(.92); } .password-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* submit */ .login-submit { position: relative; overflow: hidden; margin-top: 10px; padding: 14px 18px; border-radius: 13px; justify-content: space-between; font-size: 12.8px; } .login-submit .btn-label, .login-submit .btn-arrow { position: relative; z-index: 1; } .login-submit .btn-arrow { width: 19px; height: 19px; display: grid; place-items: center; transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .login-submit .btn-arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .login-submit:hover .btn-arrow { transform: translateX(5px); } .login-submit:active { transform: translateY(0) scale(.99); } .btn-shine { position: absolute; inset: 0; z-index: 0; transform: translateX(-130%); background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%); animation: shineSweep 4.2s ease-in-out infinite; } .login-submit.is-busy { cursor: progress; } .login-submit.is-busy .btn-shine { animation: none; opacity: 0; } .login-submit.is-success { background: linear-gradient(110deg, #17a673, #0e8f7c); box-shadow: 0 10px 24px rgba(16, 143, 118, .3); } .login-submit.is-success .btn-arrow { transform: none; } .login-submit.is-success .btn-shine { animation: none; opacity: 0; } /* demo quick-fill */ .demo-fold { margin-top: 20px; } .demo-fold summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--ink-3); font-size: 11px; font-weight: 800; letter-spacing: .01em; padding: 7px 2px; transition: color .18s; } .demo-fold summary::-webkit-details-marker { display: none; } .demo-fold summary:hover { color: var(--brand-dark); } .demo-summary-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--brand-dark); background: var(--brand-soft); } .demo-summary-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .demo-fold[open] summary { color: var(--brand-dark); } .demo-list { display: grid; gap: 8px; margin-top: 6px; animation: fadeSlide .26s ease-out; } .demo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; } .demo-row:hover { border-color: var(--brand-line); transform: translateX(3px); box-shadow: 0 6px 16px rgba(11, 44, 56, .07); } .demo-row.picked { border-color: var(--brand); background: var(--brand-wash); } .demo-role { font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-dark); } .demo-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .demo-meta code { background: var(--brand-wash); color: var(--brand-deep); border-radius: 6px; padding: 1px 6px; font-size: 10.5px; width: max-content; } .demo-meta small { color: var(--ink-3); font-size: 9.5px; } .demo-use { font-size: 9.5px; font-weight: 800; color: var(--ink-3); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); } .demo-row:hover .demo-use { color: #fff; background: var(--brand); border-color: var(--brand); } /* trust + footer */ .auth-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; color: var(--ink-3); font-size: 10px; line-height: 1.5; } .security-icon { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: var(--green-bg); } .security-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .auth-foot { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 10.5px; } .auth-foot b { color: var(--ink-2); } /* inline error */ #login-err:empty { display: none; } .login-err { display: flex; align-items: center; gap: 9px; background: var(--red-bg); color: var(--red); border: 1px solid var(--red-line); border-radius: 12px; padding: 11px 13px; font-size: 11.5px; font-weight: 600; margin-bottom: 15px; animation: fadeSlide .24s ease-out; } .login-err .error-icon { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; } .login-err svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* exit */ .auth-stage.is-leaving { animation: stageOut .38s cubic-bezier(.4, 0, .6, 1) forwards; } /* keyframes */ @keyframes orbDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 4%, 0) scale(1.08); } 100% { transform: translate3d(-5%, 7%, 0) scale(.96); } } @keyframes meshDrift { from { background-position: 0 0, 0 0; } to { background-position: 48px 48px, 48px 48px; } } @keyframes beamSweep { 0% { transform: translateX(-14%) rotate(0deg); opacity: 0; } 12% { opacity: .85; } 50% { transform: translateX(14%) rotate(2deg); opacity: .5; } 88% { opacity: .8; } 100% { transform: translateX(32%) rotate(0deg); opacity: 0; } } @keyframes markSpin { to { transform: rotate(360deg); } } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(107, 224, 204, .5); } 70% { box-shadow: 0 0 0 7px rgba(107, 224, 204, 0); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes wordCycle { 0% { opacity: 0; transform: translateY(.42em); } 5%, 28% { opacity: 1; transform: translateY(0); } 33%, 100% { opacity: 0; transform: translateY(-.42em); } } @keyframes shineSweep { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } } @keyframes shellIn { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } @keyframes stageOut { to { opacity: 0; transform: scale(1.02); filter: blur(6px); } } /* short desktop viewports (laptops): drop the decorative board, then the bullet list */ @media (min-width: 901px) and (max-height: 800px) { .story-board { display: none; } .story-copy { margin-bottom: 0; } } @media (min-width: 901px) and (max-height: 660px) { .story-points { display: none; } .story-title { font-size: clamp(28px, 3vw, 36px); margin: 10px 0 12px; } .auth-story { padding: 30px 38px 20px; } .auth-card-inner { padding: 24px 32px 22px; } .auth-heading { margin-bottom: 18px; } .auth-heading h2 { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .auth-bg, .auth-orb, .auth-mesh, .auth-beam, .auth-mark::after, .story-badge i, .mini-report, .chip-one, .chip-two, .btn-shine, .rot-word { animation: none !important; } .auth-shell, .auth-story, .auth-panel, .story-head, .story-copy, .story-board, .story-foot { opacity: 1 !important; transform: none !important; animation: none !important; } .auth-bg { opacity: 1; } .auth-card { transform: none !important; } .rot-word { position: static; opacity: 1; } .rot-word + .rot-word { display: none; } .rotator { height: auto; min-width: 0; } .ring-fill.is-on { transition: none; } .auth-stage.is-leaving { animation-duration: .01ms; } } .spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }.spinner-light { width: 15px; height: 15px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }.loading { display: grid; place-items: center; padding: 70px 0; color: var(--ink-3); gap: 10px; font-size: 12px; }.error-page, .empty-page { max-width: 560px; margin: 70px auto; padding: 36px; text-align: center; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.error-icon, .empty-illustration { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 14px; color: var(--brand-dark); background: var(--brand-soft); font-family: var(--display); font-size: 22px; font-weight: 700; }.error-page .error-icon { color: var(--red); background: var(--red-bg); font-size: 18px; }.empty-page h1 { margin: 8px 0; }.empty-page p { color: var(--ink-2); } .empty { text-align: center; padding: 45px 16px; color: var(--ink-3); }.empty .big { font-size: 34px; margin-bottom: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------- allocation: question-count picker ------------------- */ .alloc-scope { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin: 4px 0 16px; display: grid; gap: 9px; } .alloc-scope legend { padding: 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .scope-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .scope-opt:hover { border-color: var(--opt-hover-line); background: var(--surface-hover); } .scope-opt.selected { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 0 0 3px var(--focus-ring); } .scope-opt input { margin-top: 3px; flex: none; accent-color: var(--brand); } .scope-copy { display: grid; gap: 2px; } .scope-copy b { font-size: 13px; color: var(--ink); } .scope-copy small { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; } .scope-count { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: end; padding: 4px 2px 2px; } .scope-count-max { font-weight: 600; font-size: 11px; } .scope-presets { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 9px; } .scope-bank-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 11px 13px; border: 1px solid var(--amber-line); background: var(--amber-bg); border-radius: var(--radius-sm); } .scope-bank-note-copy { display: grid; gap: 3px; min-width: 0; } .scope-bank-note-copy b { font-size: 12.5px; color: var(--amber); } .scope-bank-note-copy small { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; } .catalogue-strip { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 16px; } .catalogue-strip-copy { display: grid; gap: 2px; flex: 1; min-width: 0; color: var(--ink-2); font-size: 11.5px; } .catalogue-strip-copy b { color: var(--ink); font-size: 12.5px; } .catalogue-strip-copy small { color: var(--ink-3); font-size: 11px; line-height: 1.5; } .catalogue-strip .btn { flex: none; } .chip.preset { border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-family: inherit; transition: border-color .15s ease, background .15s ease, color .15s ease; } .chip.preset:hover { border-color: var(--brand); color: var(--brand-dark); } .chip.preset.selected { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--brand); } .alloc-preview { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-3); padding: 14px; min-height: 96px; } .alloc-preview-loading { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; padding: 12px 2px; } .alloc-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .alloc-preview-head b { font-size: 15px; font-family: var(--display); } .alloc-preview-head .muted { font-size: 11.5px; margin-left: 6px; } .alloc-split { display: grid; gap: 7px; } .alloc-split-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(60px, 2fr) 28px; align-items: center; gap: 10px; font-size: 12px; } .alloc-split-row.is-empty { opacity: .55; } .alloc-split-name { display: grid; font-weight: 700; color: var(--ink-2); line-height: 1.3; } .alloc-split-name small { font-size: 10px; font-weight: 600; color: var(--ink-3); } .alloc-split-bar { height: 7px; border-radius: 999px; background: var(--track); overflow: hidden; } .alloc-split-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width .28s ease; } .alloc-split-count { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); } .alloc-note { margin-top: 11px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; } .alloc-warn { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--amber); font-weight: 600; } .alloc-warn > span:first-child { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-bg); font-weight: 800; } @media (prefers-reduced-motion: reduce) { .alloc-split-bar i { transition: none; } } /* ----------------------------- responsive ----------------------------- */ @media (max-width: 1120px) { .view { padding-left: 28px; padding-right: 28px; } #topbar { padding-left: 28px; padding-right: 28px; } .auth-shell { grid-template-columns: 1fr .95fr; } .auth-story { padding: 32px 32px 22px; } .auth-panel { padding: 30px; } .auth-card-inner { padding: 28px 30px 24px; } .story-title { font-size: clamp(29px, 3.4vw, 38px); } } @media (max-width: 900px) { body { display: block; } #sidebar { width: 280px; height: 100vh; min-height: 100vh; position: fixed; left: 0; top: 0; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 16px 0 40px rgba(5, 23, 36, .2); } #sidebar.open { transform: translateX(0); } #nav-scrim.visible { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(7, 23, 34, .42); backdrop-filter: blur(2px); } .main-col { min-height: 100vh; } #topbar { min-height: 68px; padding: 11px 18px; } .mobile-nav-toggle { display: grid; place-items: center; } .topbar-right { gap: 9px; }.topbar-role, .topbar-divider { display: none; }.live-status { font-size: 10px; }.topbar-avatar { width: 29px; height: 29px; } .view { padding: 24px 18px 52px; } .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 22px; } .page-heading .heading-actions { width: 100%; } .page-heading .heading-actions .btn { flex: 1; } .candidate-heading .journey-status { align-self: flex-start; } .step { min-width: 96px; margin-bottom: 12px; } .step .name { font-size: 9.5px; } .stage-bars .bar-row { grid-template-columns: 135px minmax(60px,1fr) 28px; gap: 8px; } .dashboard-grid { grid-template-columns: minmax(0, 1fr); }.dashboard-grid .card { height: auto; } .toolbar-card { flex-wrap: wrap; }.toolbar-hint { margin-left: 0; }.toolbar-fields { flex: 1 1 100%; } .quiz-topbar, .score-topbar { top: 68px; } .auth-stage { padding: 14px; align-items: start; } .auth-shell { grid-template-columns: 1fr; min-height: 0; border-radius: 24px; } .auth-story { padding: 28px 26px 20px; } .story-board, .story-points { display: none; } .story-title { font-size: clamp(28px, 5vw, 36px); margin: 10px 0 12px; } .story-lede { margin: 0; font-size: 12px; } .auth-panel { padding: 26px 22px 30px; } } @media (max-width: 650px) { .auth-stage { padding: 0; display: block; } .auth-shell { min-height: 100vh; border-radius: 0; border: 0; box-shadow: none; } .auth-story { padding: 22px 20px 18px; } .story-badge { display: none; } .story-title { font-size: 27px; margin: 8px 0 10px; } .rotator { min-width: 9.5ch; } .story-lede { font-size: 11.5px; } .story-foot { font-size: 8.5px; gap: 8px; } .auth-panel { padding: 20px 18px 34px; } .auth-card { border-radius: 20px; } .auth-card-inner { padding: 24px 22px 22px; } .auth-logo-mobile { display: inline-flex; color: var(--panel-ink); } .auth-logo-mobile .auth-wordmark { color: var(--panel-ink); } .auth-logo-mobile .auth-mark { width: 34px; height: 34px; border-radius: 11px; } .auth-logo-mobile .auth-mark svg { width: 19px; height: 19px; } .auth-logo-mobile .auth-wordmark strong { font-size: 16px; } .auth-card-top { margin-bottom: 20px; } .auth-heading { margin-bottom: 20px; } .auth-heading h2 { font-size: 26px; } .demo-meta small { display: none; } h1 { font-size: 27px; } .view { padding: 20px 14px 44px; } .grid.cols-4, .grid.cols-3, .grid.cols-2, .f-row, .f-row-3 { grid-template-columns: 1fr; } .card, .stat { padding: 18px; border-radius: 14px; margin-bottom: 15px; } .card.flat { padding: 13px; } .panel-head { flex-direction: column; gap: 9px; } .stage-bars .bar-row { grid-template-columns: 112px minmax(40px,1fr) 24px; font-size: 11px; } .toolbar-card { align-items: stretch; }.toolbar-card .toolbar-label { width: 100%; }.toolbar-fields { flex-direction: column; }.toolbar-card input[type=search], .toolbar-card select { width: 100%; }.toolbar-hint { width: 100%; } .quiz-topbar, .score-topbar { align-items: flex-start; flex-direction: column; }.quiz-progress { width: 100%; }.score-actions { width: 100%; justify-content: space-between; }.score-identity { width: 100%; align-items: flex-start; }.score-separator { display: none; } .quiz-submit-card { align-items: stretch; flex-direction: column; }.quiz-submit-card .btn { width: 100%; } .row.between { align-items: flex-start; } table.data { min-width: 620px; } .card:has(> table.data) { overflow-x: auto; } .q-card { padding: 17px 15px; }.q-card .q-prompt { font-size: 13px; } .report-brandbar { padding: 15px 18px 13px; }.report-brand-copy small { white-space: normal; }.report-document-label { display: none; } .report-header-row { padding: 20px 18px 0; }.report-status-stamp { min-width: 0; padding: 9px; }.report-status-stamp b { font-size: 11px; } .report.report-cover > .hr { margin-left: 18px; margin-right: 18px; }.report-hero { gap: 18px; padding-left: 18px; padding-right: 18px; } .report-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-stat-strip > div:nth-child(2) { border-right: 0; }.report-stat-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .report-visual-summary, .report-competency-card, .report-improvement-card, .report-strength-card, .report-breakdown-card { padding: 18px; } .report-summary-grid { grid-template-columns: 1fr; }.report-score-panel { grid-template-columns: 125px minmax(0, 1fr); }.report-pie-layout { grid-template-columns: 125px minmax(0, 1fr); gap: 8px; }.report-pie { width: 120px; height: 120px; } .report-bar-row { grid-template-columns: minmax(112px, .9fr) minmax(60px, 1.2fr) 48px; gap: 8px; }.report-bar-label span { white-space: normal; }.report-footer { flex-direction: column; } .score-ring { width: 106px; height: 106px; }.score-ring .inner { width: 82px; height: 82px; }.score-ring .val { font-size: 23px; } .modal .m-body { padding: 17px; }.modal .m-head, .modal .m-foot { padding-left: 17px; padding-right: 17px; } .modal .m-foot { flex-direction: column-reverse; }.modal .m-foot .btn { width: 100%; justify-content: center; } .scope-count { grid-template-columns: 1fr; gap: 10px; }.scope-presets { padding-bottom: 0; } .alloc-split-row { grid-template-columns: minmax(90px, 1fr) minmax(40px, 1.2fr) 24px; font-size: 11.5px; } #toast-root { left: 14px; right: 14px; bottom: 14px; }.toast { max-width: none; } } @media print { @page { size: A4; margin: 13mm 12mm 15mm; } html { color-scheme: light !important; } /* beats the inline style from js/theme.js */ #sidebar, #topbar, .no-print, #nav-scrim { display: none !important; } body { background: #fff !important; color: #132338 !important; font-size: 11px; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .main-col, .view { display: block; width: 100%; max-width: none; padding: 0; } .report-document { max-width: none; } .card { box-shadow: none; border-color: #d9e2e6; break-inside: avoid; } .report.report-cover { border: 1px solid #d9e2e6; } .report::before { display: none; } .report-brandbar { background: #f0fbf9 !important; } .report-brand-mark { box-shadow: none; } .report-visual-summary { break-inside: avoid; } .report-chart-panel { background: #fbfdfd !important; } .report-donut-track { stroke: #e3ebed; } .report-table { font-size: 9.5px; } .report-table th, .report-table td { padding: 8px 7px; } .report-breakdown-card { break-before: page; } .report-breakdown-heading { break-after: avoid; } .report-table tr { break-inside: avoid; } .report-footer { border-top: 1px solid #d9e2e6; margin-top: 5mm; } }