/* ========================================================================== DDCET Result Checker - design tokens + base styles Calm, clean, and responsive. Mobile-first, no visual clutter. ========================================================================== */ :root { /* Pure monochrome palette (zinc). No hue, no accent colours anywhere - * contrast, weight, and elevation carry hierarchy. */ --bg: #fafafa; /* zinc-50 */ --bg-elev: #ffffff; /* zinc-0 */ --bg-soft: #f4f4f5; /* zinc-100 */ --surface-muted: #f4f4f5; /* zinc-100 */ --text: #09090b; /* zinc-950 */ --text-muted: #52525b; /* zinc-600 */ --text-subtle: #a1a1aa; /* zinc-400 */ --border: #e4e4e7; /* zinc-200 */ --border-strong: #d4d4d8; /* zinc-300 */ /* "Brand" is just near-black - primary buttons, links, active nav. */ --brand: #09090b; /* zinc-950 */ --brand-700: #000000; /* hover goes to pure black */ --brand-50: #f4f4f5; /* zinc-100 for subtle tint */ --brand-text: #ffffff; /* Semantic variants, rendered WITHOUT hue. Visual weight (border, text * intensity, background depth) communicates severity instead. */ --success: #18181b; /* zinc-900 */ --success-bg: #f4f4f5; /* zinc-100 */ --warn: #27272a; /* zinc-800 */ --warn-bg: #e4e4e7; /* zinc-200 */ --danger: #09090b; /* zinc-950 */ --danger-bg: #e4e4e7; /* zinc-200 */ --info: #52525b; /* zinc-600 */ --info-bg: #f4f4f5; /* zinc-100 */ /* Consistent 4-step radius scale */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; /* Soft, neutral-tinted shadows (no color cast) */ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-sm: 0 2px 6px -1px rgba(9, 9, 11, 0.06); --shadow: 0 8px 24px -12px rgba(9, 9, 11, 0.14); --shadow-md: 0 12px 28px -10px rgba(9, 9, 11, 0.18); --shadow-lg: 0 16px 40px -20px rgba(9, 9, 11, 0.22); /* Uniform spacing scale for any future use */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --container: 1100px; --nav-h: 64px; --ease: cubic-bezier(.4, 0, .2, 1); --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Default to the light palette defined above. Dark mode is opt-in via the * header toggle, which sets data-theme="dark" on and persists to * localStorage. Native form controls follow via color-scheme. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; --bg: #09090b; /* zinc-950 */ --bg-elev: #18181b; /* zinc-900 */ --bg-soft: #27272a; /* zinc-800 */ --surface-muted: #27272a; /* zinc-800 */ --text: #fafafa; /* zinc-50 */ --text-muted: #d4d4d8; /* zinc-300 - readable on dark */ --text-subtle: #71717a; /* zinc-500 */ --border: #27272a; /* zinc-800 */ --border-strong: #3f3f46; /* zinc-700 */ --brand: #fafafa; /* inverted: light sits on dark */ --brand-700: #ffffff; --brand-50: #27272a; --brand-text: #09090b; --success: #fafafa; --success-bg: #27272a; --warn: #e4e4e7; --warn-bg: #3f3f46; --danger: #ffffff; --danger-bg: #3f3f46; --info: #d4d4d8; --info-bg: #27272a; } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; } h1, h2, h3, h4 { margin: 0 0 .5rem; color: var(--text); font-family: var(--display); letter-spacing: -0.02em; line-height: 1.2; } h1 { font-size: clamp(2rem, 2.4vw + 1rem, 2.9rem); font-weight: 600; letter-spacing: -0.03em; } h2 { font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem); font-weight: 600; } h3 { font-size: 1.15rem; font-weight: 600; } p { margin: 0 0 1rem; color: var(--text-muted); } code { font-family: var(--mono); background: var(--surface-muted); padding: .1em .35em; border-radius: 4px; font-size: .9em; } /* Layout */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } .stack > * + * { margin-top: 1rem; } .grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ========================================================================== Header (.hdr) - mobile-first, desktop via min-width ========================================================================== */ /* Glassmorphism navbar: translucent surface + heavy backdrop blur + * saturation boost to pick up colour from whatever scrolls beneath it. * Thin hairline border plus an inset top-highlight give the "pane of * frosted glass" look. Both states stay translucent; scrolled just * tightens opacity and adds a soft drop shadow for separation. */ /* Light mode: pure-white --bg-elev at 60% opacity reads as an almost-solid * white band. Drop the alpha and tint toward --bg (zinc-50) so the blur * actually earns its keep. */ .hdr { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 42%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid color-mix(in oklab, var(--text) 8%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), -webkit-backdrop-filter .25s var(--ease), backdrop-filter .25s var(--ease); } .hdr.is-scrolled { background: color-mix(in oklab, var(--bg) 68%, transparent); backdrop-filter: saturate(200%) blur(22px); -webkit-backdrop-filter: saturate(200%) blur(22px); border-bottom-color: color-mix(in oklab, var(--text) 14%, transparent); box-shadow: 0 8px 24px -14px rgba(9, 9, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* Dark mode keeps the previous tuning - the surface is already dark so * a higher opacity doesn't blow out, and the inset highlight needs to be * much subtler (6-8%) to read as "edge glow" instead of "white line". */ html[data-theme="dark"] .hdr { background: color-mix(in oklab, var(--bg-elev) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .hdr.is-scrolled { background: color-mix(in oklab, var(--bg-elev) 78%, transparent); box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Opaque fallback for (older) browsers that don't support backdrop-filter - * without blur the translucent background would just look washed out. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr { background: var(--bg-elev); border-bottom-color: var(--border); } .hdr.is-scrolled { background: var(--bg-elev); box-shadow: var(--shadow-xs); } } .hdr__row { height: var(--nav-h); display: flex; align-items: center; gap: .75rem; } /* Logo - flat two-child structure, always horizontal */ .hdr__logo { display: flex; align-items: center; gap: .6rem; color: var(--text); font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; } .hdr__logo:hover { text-decoration: none; } .hdr__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: var(--brand-text); font-weight: 700; font-size: 13px; flex-shrink: 0; } .hdr__name { font-size: 1.05rem; line-height: 1; } /* Right-side action cluster: always visible (mobile + desktop). * Mobile: nav is a fixed drawer so this cluster sits in-flow with * margin-left:auto. Desktop: nav becomes inline, takes the space, and * the cluster naturally trails it. */ .hdr__end { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; } /* Hamburger (mobile only) */ .hdr__toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text); cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s; } .hdr__toggle:hover { background: var(--surface-muted); border-color: var(--brand); color: var(--brand); } .hdr__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Theme toggle - same chrome as the hamburger so the cluster reads as one * unit. One SVG visible at a time: moon in light mode (tap to go dark), * sun in dark mode (tap to go light). */ .hdr__theme { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s; } .hdr__theme:hover { background: var(--surface-muted); border-color: var(--text-muted); color: var(--text); } .hdr__theme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .hdr__theme svg { width: 18px; height: 18px; } .hdr__theme-sun { display: none; } .hdr__theme-moon { display: block; } html[data-theme="dark"] .hdr__theme-sun { display: block; } html[data-theme="dark"] .hdr__theme-moon { display: none; } /* Backdrop shown behind the mobile drawer */ .hdr__backdrop { position: fixed; inset: 0; top: var(--nav-h); z-index: 38; background: rgba(10, 13, 30, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; } /* Mobile drawer - positioned below the sticky header row */ .hdr__nav { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 39; display: flex; flex-direction: column; gap: .1rem; padding: .9rem 1rem 1.1rem; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .35); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s; } .hdr.is-open .hdr__nav { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .2s ease, opacity .2s ease, visibility 0s; } .hdr.is-open .hdr__backdrop { opacity: 1; pointer-events: auto; } .hdr__link { display: flex; align-items: center; padding: .85rem 1rem; border-radius: 10px; color: var(--text); font-weight: 500; font-size: .98rem; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; } .hdr__link:hover { background: var(--surface-muted); text-decoration: none; } .hdr__link.is-active { color: var(--brand); background: var(--brand-50); border-color: color-mix(in oklab, var(--brand) 30%, transparent); } .hdr__cta { margin-top: .6rem; display: flex; align-items: center; justify-content: center; padding: .95rem 1rem; border-radius: 11px; background: var(--brand); color: var(--brand-text); font-weight: 600; font-size: .96rem; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .35); } .hdr__cta:hover { background: var(--brand-700); text-decoration: none; } /* Desktop - swap in horizontal nav, hide the hamburger + drawer chrome */ @media (min-width: 900px) { .hdr__toggle { display: none; } .hdr__backdrop { display: none; } .hdr__end { margin-left: 0; } /* nav takes the auto push instead */ .hdr__nav { margin-left: auto; /* shove nav (and trailing actions) right */ position: static; flex-direction: row; align-items: center; gap: .15rem; padding: 0; background: transparent; border: 0; box-shadow: none; transform: none; opacity: 1; visibility: visible; transition: none; } .hdr__link { padding: .55rem .9rem; color: var(--text-muted); font-size: .92rem; } .hdr__link:hover { color: var(--text); background: var(--surface-muted); } .hdr__link.is-active { border-color: transparent; } .hdr__cta { margin-top: 0; margin-left: .4rem; padding: .55rem 1.05rem; font-size: .9rem; border-radius: 10px; box-shadow: var(--shadow-sm); } } /* Very small phones: tighter nav row */ @media (max-width: 400px) { :root { --nav-h: 58px; } .hdr__row { gap: .5rem; } .hdr__mark { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; } .hdr__name { font-size: .98rem; } .hdr__toggle { width: 38px; height: 38px; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .93rem; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: all .16s ease; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--brand); color: var(--brand-text); box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .35); } .btn-primary:hover { background: var(--brand-700); color: var(--brand-text); } .btn-ghost { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-muted); } .btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); } .btn-outline:hover { background: var(--brand-50); } .btn-lg { padding: .8rem 1.3rem; font-size: .98rem; border-radius: 11px; } .btn-sm { padding: .45rem .8rem; font-size: .85rem; } .btn-block { width: 100%; } /* Hero - calm pastel wash, no floating shapes */ .hero { position: relative; overflow: hidden; padding: 3rem 0 2.5rem; isolation: isolate; border-bottom: 1px solid var(--border); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 70% at 50% 0%, rgba(15, 23, 42, .04), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(15, 23, 42, .03), transparent 70%); } @media (min-width: 720px) { .hero { padding: 4rem 0 3.25rem; } } .hero-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: var(--bg-elev); padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--border); margin-bottom: 1rem; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.4); opacity: .55; } } .hero h1 { margin-bottom: .9rem; } .hero h1 .hl { color: var(--brand); } .hero p.lede { font-size: 1.05rem; color: var(--text-muted); max-width: 580px; margin: 0 auto 1.4rem; } .hero-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; } .hero-cta .btn { min-width: 150px; } .hero-stats { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; max-width: 640px; margin-left: auto; margin-right: auto; } .hero-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; text-align: center; transition: border-color .15s; } .hero-stat:hover { border-color: var(--border-strong); } .hero-stat-n { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2vw + .5rem, 1.75rem); color: var(--text); line-height: 1; letter-spacing: -0.02em; } .hero-stat-suffix { font-size: .85rem; color: var(--text-subtle); font-family: var(--font); font-weight: 500; margin-left: .1rem; } .hero-stat-l { font-size: .78rem; color: var(--text-subtle); margin-top: .4rem; } @media (max-width: 560px) { .hero-stats { grid-template-columns: 1fr; max-width: 360px; } .hero-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; } .hero-stat-n { font-size: 1.25rem; } .hero-stat-l { margin-top: 0; } } /* Podium */ .podium-wrap { margin-top: 2rem; margin-bottom: 1.5rem; padding-top: .5rem; } .podium-title { text-align: center; margin-bottom: 1.1rem; } .podium-title h2 { font-size: 1.3rem; margin-bottom: .2rem; } .podium-title p { color: var(--text-subtle); margin: 0; font-size: .88rem; } .podium { display: grid; gap: .75rem; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; max-width: 640px; margin: 0 auto; } .podium-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem .9rem; text-align: center; transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--text); } .podium-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; color: inherit; } .podium-rank { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1rem; color: #fff; margin-top: -1.5rem; box-shadow: 0 6px 14px -6px rgba(0,0,0,.22); } .podium-card.p1 { border-color: var(--text); background: var(--bg-elev); transform: translateY(-14px); box-shadow: var(--shadow); } .podium-card.p1 .podium-rank { background: var(--text); color: var(--bg-elev); } .podium-card.p2 { border-color: var(--border-strong); } .podium-card.p2 .podium-rank { background: var(--text-muted); color: var(--bg-elev); } .podium-card.p3 { border-color: var(--border-strong); } .podium-card.p3 .podium-rank { background: var(--text-subtle); color: var(--bg-elev); } .podium-seat { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--text); } .podium-score { font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--text); line-height: 1; } .podium-score .suffix { font-size: .78rem; font-weight: 500; color: var(--text-subtle); margin-left: .15rem; font-family: var(--font); } .podium-branch { font-size: .72rem; color: var(--text-subtle); line-height: 1.35; } .podium-series { display: inline-flex; padding: .15rem .55rem; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: .7rem; font-weight: 600; letter-spacing: .03em; } @media (max-width: 640px) { .podium { grid-template-columns: 1fr; gap: .6rem; } .podium-card.p1 { transform: none; order: -1; } .podium-rank { margin-top: -1.3rem; } } /* Seat lookup */ .lookup-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1.4fr; align-items: center; } .lookup-title { font-weight: 600; font-family: var(--display); font-size: 1.02rem; margin-bottom: .15rem; } .lookup-sub { font-size: .9rem; } .seat-search { display: flex; gap: .5rem; width: 100%; } .seat-search .input { flex: 1; } @media (max-width: 640px) { .lookup-row { grid-template-columns: 1fr; gap: .75rem; } } /* Cards - subtle lift on hover, refined depth */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); } .card.is-interactive:hover, a.card:hover, .podium-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .card-head h2, .card-head h3 { margin: 0; } .card-body { padding: 1.25rem; } .card-body.pad-0 { padding: 0; } @media (max-width: 520px) { .card-head { padding: .9rem 1rem; } .card-body { padding: 1rem; } } .card-hero { background: var(--bg-elev); } /* Alerts - monochrome; severity signalled by border weight and text emphasis, not hue. info (lightest) < success < warn < danger (heaviest). */ .alert { border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; border-left: 3px solid var(--border-strong); } .alert strong { color: var(--text); } .alert a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--text) 45%, transparent); transition: text-decoration-color .15s var(--ease); } .alert a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--text); } .alert-info { background: var(--info-bg); border-color: var(--border); border-left-color: var(--text-subtle); } .alert-success { background: var(--success-bg); border-color: var(--border-strong); border-left-color: var(--text-muted); } .alert-warn { background: var(--warn-bg); border-color: var(--border-strong); border-left-color: var(--text); font-weight: 500; } .alert-danger { background: var(--danger-bg); border-color: var(--border-strong); border-left-color: var(--text); font-weight: 600; border-left-width: 4px; } .alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; } /* Forms */ .field { margin-bottom: 1rem; } .label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem; color: var(--text); } .help { font-size: .8rem; color: var(--text-subtle); margin-top: .3rem; } .input, .select { width: 100%; padding: .85rem 1rem; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text); font-size: .94rem; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .input:hover, .select:hover { border-color: var(--text-muted); } .input:focus, .select:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--text) 12%, transparent); } .file { width: 100%; border-radius: 12px; border: 2px dashed var(--border-strong); background: var(--surface-muted); cursor: pointer; transition: border-color .15s, background .15s; } .file:hover { border-color: var(--brand); background: var(--brand-50); } .file-label { display: flex; align-items: center; gap: .8rem; padding: 1rem; cursor: pointer; color: var(--text-muted); min-height: 64px; } .file-label:hover { color: var(--text); } .file-label .icon { width: 40px; height: 40px; flex: 0 0 40px; color: var(--brand); border-radius: 10px; padding: 9px; background: var(--bg-elev); box-shadow: var(--shadow-xs); } .file input[type=file] { display: none; } .file.has-file { border-color: var(--brand); background: var(--brand-50); border-style: solid; } .file.has-file .file-label { color: var(--text); } /* Steps */ .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; } .steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: .75rem; padding: .55rem 0; font-size: .94rem; } .steps li + li { border-top: 1px dashed var(--border); } .steps li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: .8rem; font-family: var(--display); margin-top: 1px; } /* Tables - airy rows, subtle zebra for scanning, typographic emphasis only */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tbl, table.dataTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; } table.tbl th, table.dataTable thead th, table.tbl td, table.dataTable tbody td { padding: .85rem .95rem; text-align: left; border-bottom: 1px solid var(--border); } /* Very subtle zebra - barely perceptible, but helps scanning long lists */ table.tbl tbody tr:nth-child(even) > td, table.dataTable tbody tr:nth-child(even) > td { background: color-mix(in oklab, var(--surface-muted) 50%, transparent); } table.tbl thead th, table.dataTable thead th { background: var(--surface-muted); font-weight: 600; color: var(--text); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } table.tbl tbody tr:hover, table.dataTable tbody tr:hover { background: var(--surface-muted); } table.tbl tbody tr:last-child td, table.dataTable tbody tr:last-child td { border-bottom: 0; } .row-ok { background: transparent; } .row-warn { background: var(--surface-muted); } .row-bad { background: var(--surface-muted); box-shadow: inset 3px 0 0 var(--text); } .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid var(--border); } .badge-ok { background: var(--bg-elev); color: var(--text); border-color: var(--border); } .badge-info { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); } .badge-warn { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); font-weight: 700; } .badge-bad { background: var(--text); color: var(--bg-elev); border-color: var(--text); font-weight: 700; } /* Result hero */ .result-hero { display: grid; gap: 1.5rem; grid-template-columns: auto 1fr; align-items: center; padding: 1.5rem; background: var(--bg-elev); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } @media (max-width: 720px) { .result-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 1.25rem; } } .score-ring { position: relative; width: 160px; height: 160px; flex: 0 0 160px; } @media (min-width: 720px) { .score-ring { width: 176px; height: 176px; flex: 0 0 176px; } } .score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .score-ring .track { stroke: var(--border); } .score-ring .fill { stroke: url(#scoreGrad); transition: stroke-dashoffset 1.2s ease-out; stroke-linecap: round; } .score-ring .inner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .score-ring .n { font-family: var(--display); font-weight: 600; font-size: 2.2rem; letter-spacing: -0.02em; line-height: 1; color: var(--text); } .score-ring .of { font-size: .82rem; color: var(--text-subtle); margin-top: .2rem; } .score-ring .lbl { font-size: .7rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .08em; margin-top: .15rem; } /* Tier chip - the background is set inline from `tier.color`, which is * always a dark zinc shade (#09090b..#a1a1aa). Text must stay white in * BOTH themes so it reads against that always-dark inline background. */ .tier-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; font-weight: 600; font-size: .85rem; background: var(--brand); color: #ffffff; box-shadow: var(--shadow-xs); } .tier-chip .dot { width: 7px; height: 7px; background: #ffffff; border-radius: 50%; opacity: .85; } .result-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; justify-content: inherit; } @media (max-width: 720px) { .result-meta { justify-content: center; } } .meta-pill { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface-muted); border: 1px solid var(--border); padding: .28rem .65rem; border-radius: 999px; font-size: .78rem; color: var(--text-muted); font-weight: 500; } .meta-pill strong { color: var(--text); font-family: var(--mono); font-weight: 700; } .result-headline { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1.3vw + 1rem, 1.6rem); letter-spacing: -0.02em; margin: .25rem 0 .15rem; } .result-tagline { color: var(--text-muted); margin: 0; font-size: .95rem; } .rank-summary { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; justify-content: inherit; } @media (max-width: 720px) { .rank-summary { justify-content: center; } } .rank-cell .v { font-family: var(--display); font-size: 1.4rem; font-weight: 600; color: var(--text); line-height: 1; } .rank-cell .l { font-size: .75rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; } /* Section bars */ .section-bars { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin-top: 1rem; } @media (max-width: 560px) { .section-bars { grid-template-columns: 1fr; } } .section-bar { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-xs); } .section-bar h4 { font-family: var(--font); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-subtle); margin: 0 0 .4rem; font-weight: 600; } .section-bar .score { font-family: var(--display); font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--text); } .section-bar .score .suffix { font-size: .82rem; color: var(--text-subtle); margin-left: .15rem; font-weight: 500; font-family: var(--font); } .section-bar .track { margin-top: .6rem; height: 7px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; } .section-bar .fill { height: 100%; width: 0%; border-radius: 999px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); background: var(--brand); } .section-bar.be2 .fill { background: var(--text-muted); } /* Mini stats */ .mini-stats { display: grid; gap: .7rem; margin-top: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 640px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } } .mini-stat { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); box-shadow: var(--shadow-xs); } .mini-stat .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); font-weight: 600; } .mini-stat .v { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--text); margin-top: .2rem; line-height: 1; } .mini-stat.ok .v { color: var(--success); } .mini-stat.bad .v { color: var(--danger); } .mini-stat.warn .v { color: var(--warn); } /* Achievements */ .achievements { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: .25rem; } .ach { display: flex; gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); transition: transform .18s ease, box-shadow .18s ease; } .ach:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .ach .ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; color: var(--brand-text); background: var(--brand); } /* Glyphs inherit --brand-text so they're always legible: * light mode → dark bg + white glyph * dark mode → light bg + dark glyph. */ .ach .ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; } /* Achievement icons - monochrome; variance in depth distinguishes them. */ .ach-sharpshooter .ic { background: var(--text); } .ach-be1-perfect .ic { background: var(--brand); } .ach-be2-perfect .ic { background: var(--text-muted); } .ach-full-attempt .ic { background: var(--text); } .ach-clean-sweep .ic { background: var(--text-muted); } .ach-elite .ic { background: var(--text); } .ach-balanced .ic { background: var(--brand); } .ach .n { font-weight: 600; color: var(--text); font-size: .92rem; line-height: 1.15; } .ach .d { font-size: .76rem; color: var(--text-subtle); margin-top: .15rem; } .ach-locked { opacity: .5; filter: grayscale(.7); } .ach-locked .ic { background: var(--surface-muted); color: var(--text-subtle); } /* Question-by-question compact grid - replaces the old 100-row table so * the result page doesn't scroll forever. Every question is a tile with * its number + your answer; colour/border encodes status; tooltip has * the full detail. */ .qbq-section + .qbq-section { margin-top: 1.5rem; } .qbq-section__head { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .6rem; } .qbq-section__title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .qbq-section__range { font-family: var(--mono); font-size: .78rem; color: var(--text-muted); } /* Fixed 10-column grid on desktop, 5 on phones - every tile sits in the * same column across every row so it reads like a page of graph paper. */ .qbq-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .4rem; } .qbq-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-elev); font-family: var(--mono); transition: transform .12s var(--ease), box-shadow .12s var(--ease); position: relative; cursor: pointer; user-select: none; min-width: 0; } .qbq-tile:hover, .qbq-tile:focus-visible, .qbq-tile.is-active { transform: translateY(-2px); box-shadow: var(--shadow-sm); z-index: 2; outline: none; } .qbq-tile.is-active { box-shadow: 0 0 0 2px var(--text), var(--shadow-sm); } .qbq-tile__n { font-size: .62rem; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; line-height: 1; } .qbq-tile__pick { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1; display: inline-flex; align-items: baseline; gap: 1px; } .qbq-tile__pick small { font-size: .58rem; font-weight: 600; color: inherit; opacity: .65; margin-left: 1px; } /* Status variants */ .qbq-tile.is-correct { background: var(--text); border-color: var(--text); } .qbq-tile.is-correct .qbq-tile__n, .qbq-tile.is-correct .qbq-tile__pick { color: var(--bg-elev); } .qbq-tile.is-wrong { background: var(--bg-elev); border: 2px solid var(--text); } .qbq-tile.is-wrong .qbq-tile__pick { color: var(--text); } .qbq-tile.is-skipped { background: var(--surface-muted); border-color: var(--border); } .qbq-tile.is-skipped .qbq-tile__n, .qbq-tile.is-skipped .qbq-tile__pick { color: var(--text-subtle); } .qbq-tile.is-multi { background: var(--bg-elev); border: 1.5px dashed var(--text-muted); } .qbq-tile.is-multi .qbq-tile__pick { color: var(--text-muted); } .qbq-tile.is-dropped { background: var(--surface-muted); border-color: var(--border-strong); } .qbq-tile.is-dropped .qbq-tile__pick { color: var(--text-muted); } /* Legend */ .qbq-legend { display: flex; gap: .5rem; flex-wrap: wrap; } .qbq-legend__chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--text-muted); font-weight: 600; } .qbq-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--border); background: var(--bg-elev); flex-shrink: 0; } .qbq-swatch.is-correct { background: var(--text); border-color: var(--text); } .qbq-swatch.is-wrong { background: var(--bg-elev); border: 2px solid var(--text); } .qbq-swatch.is-skipped { background: var(--surface-muted); border-color: var(--border); } .qbq-swatch.is-multi { background: var(--bg-elev); border: 1.5px dashed var(--text-muted); } .qbq-swatch.is-dropped { background: var(--surface-muted); border-color: var(--border-strong); } @media (max-width: 520px) { .qbq-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; } .qbq-tile__n { font-size: .58rem; } .qbq-tile__pick { font-size: .85rem; } } /* Floating tooltip - absolutely positioned, JS places it above the tapped * tile on click (mobile friendly) and on hover (desktop). Replaces the * native `title` attribute which browsers hide on touch screens. */ .qbq-tooltip { position: fixed; z-index: 50; background: var(--text); color: var(--bg-elev); padding: .5rem .75rem; border-radius: 8px; font-size: .82rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s var(--ease); max-width: calc(100vw - 1.5rem); } .qbq-tooltip[hidden] { display: none; } .qbq-tooltip.is-visible { opacity: 1; } .qbq-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--text); } .qbq-tooltip strong { color: var(--bg-elev); font-weight: 700; font-family: var(--mono); } .qbq-tooltip .sep { opacity: .5; margin: 0 .35rem; } .qbq-tooltip .bad { text-decoration: line-through; opacity: .7; } /* Share */ .share-row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: .25rem; } .share-row .btn { width: 100%; } .share-row a.btn { text-decoration: none; } /* Homepage share-nudge card - "more students = better ranks" CTA */ .share-nudge .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center; } .share-nudge__title { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: -.015em; } .share-nudge__body { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.55; max-width: 58ch; } .share-nudge__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .share-nudge__actions a.btn { text-decoration: none; } @media (max-width: 680px) { .share-nudge .card-body { grid-template-columns: 1fr; } .share-nudge__actions { justify-content: stretch; } .share-nudge__actions .btn { flex: 1; } } /* ========================================================================== Footer (.ftr) - mobile-first. Clean BEM structure, one rule per selector. ========================================================================== */ .ftr { margin-top: 3rem; background: var(--bg-elev); border-top: 1px solid var(--border); } .ftr__wrap { padding: 1.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.75rem; } /* --- Compact CTA card --- */ .ftr__cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(80% 120% at 100% 0%, rgba(15, 23, 42, .04), transparent 70%), radial-gradient(80% 120% at 0% 100%, rgba(15, 23, 42, .03), transparent 70%), var(--bg-soft); } .ftr__cta-kicker { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); } .ftr__cta-title { margin: .3rem 0 0; font-family: var(--display); font-size: clamp(1.1rem, 1vw + 1rem, 1.4rem); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.25; } .ftr__cta-btn { align-self: stretch; } /* --- Columns grid --- */ /* Mobile-first: brand row spans full width, the two link columns sit * side-by-side underneath so the footer isn't a single long column. */ .ftr__grid { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr__col--brand { grid-column: 1 / -1; } /* Brand column */ .ftr__col--brand { display: flex; flex-direction: column; gap: .75rem; } .ftr__about { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.55; max-width: 320px; } .ftr__socials { display: flex; gap: .5rem; } .ftr__icon { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text-muted); transition: background .15s, border-color .15s, color .15s, transform .15s; } .ftr__icon:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-text); transform: translateY(-2px); text-decoration: none; } /* Link columns */ .ftr__heading { margin: 0 0 .6rem; font-family: var(--font); font-size: .72rem; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .1em; } .ftr__list { list-style: none; padding: 0; margin: 0; } .ftr__list li { margin-bottom: .4rem; } .ftr__list li:last-child { margin-bottom: 0; } .ftr__list a { color: var(--text-muted); font-size: .92rem; transition: color .12s; } .ftr__list a:hover { color: var(--brand); text-decoration: none; } /* --- Divider + bottom strip --- */ .ftr__rule { height: 1px; background: var(--border); } .ftr__bottom { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .65rem; } .ftr__copy { margin: 0; font-size: .8rem; color: var(--text-subtle); line-height: 1.55; max-width: 46ch; } .ftr__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; } .ftr__legal a { font-size: .82rem; color: var(--text-subtle); transition: color .12s; } .ftr__legal a:hover { color: var(--brand); text-decoration: none; } /* --- Tablet --- */ @media (min-width: 640px) { .ftr__wrap { padding: 2.25rem 1.5rem 1.5rem; gap: 2rem; } .ftr__cta { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 1.5rem; padding: 1.5rem 1.75rem; } .ftr__cta-btn { align-self: auto; flex-shrink: 0; } .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; } .ftr__col--brand { grid-column: 1 / -1; } .ftr__bottom { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 1rem; } .ftr__legal { justify-content: flex-end; } } /* --- Desktop --- */ @media (min-width: 960px) { .ftr__wrap { padding: 2.5rem 0 1.5rem; } .ftr__grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: 2.5rem; } .ftr__col--brand { grid-column: auto; } } /* Shared page header for static pages (about, privacy, faq, blog index, * error pages). A subtler sibling to the homepage .hero - no radial * background, tighter vertical rhythm, left-aligned by default. */ .page-header { padding: 2.25rem 0 1.75rem; border-bottom: 1px solid var(--border); background: var(--bg-elev); margin-bottom: 2rem; } .page-header__inner { max-width: 820px; margin: 0 auto; padding: 0 1.25rem; } .page-header--center .page-header__inner { text-align: center; } .page-header .eyebrow { margin-bottom: .85rem; } .page-header h1 { margin: 0 0 .6rem; letter-spacing: -0.025em; font-size: clamp(1.65rem, 1.6vw + 1rem, 2.35rem); font-weight: 600; } .page-header p.lede { margin: 0; color: var(--text-muted); font-size: 1.02rem; line-height: 1.55; max-width: 62ch; } .page-header--center p.lede { margin-left: auto; margin-right: auto; } @media (max-width: 640px) { .page-header { padding: 1.5rem 0 1.25rem; margin-bottom: 1.5rem; } .page-header__inner { padding: 0 1rem; } } /* Prose - article body used by about/privacy/faq/blog posts */ .prose { max-width: 720px; margin: 0 auto; } .prose > header { margin-bottom: 1.75rem; } .prose h2 { margin-top: 2.25rem; margin-bottom: .6rem; font-size: 1.3rem; letter-spacing: -.015em; } .prose h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.08rem; } .prose p, .prose li { color: var(--text-muted); font-size: 1rem; line-height: 1.65; } .prose p { margin: 0 0 1rem; } .prose a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover { text-decoration-thickness: 2px; } /* Anchors styled as buttons or post-cards opt out of prose link styling. */ .prose a.btn, .prose a.post-card { text-decoration: none; } .prose a.btn:hover, .prose a.post-card:hover { text-decoration: none; } .prose a.btn-primary, .prose a.btn-primary:hover { color: var(--brand-text); } .prose a.btn-ghost, .prose a.btn-ghost:hover { color: var(--text); } .prose a.btn-outline, .prose a.btn-outline:hover { color: var(--brand); } .prose a.post-card, .prose a.post-card:hover { color: inherit; } .prose a.post-card * { text-decoration: none; } .prose ul, .prose ol { padding-left: 1.25rem; margin: .75rem 0 1.25rem; } .prose li { margin-bottom: .45rem; } .prose li strong { color: var(--text); } .prose blockquote { margin: 1.25rem 0; padding: .85rem 1.1rem; border-left: 3px solid var(--text); background: var(--surface-muted); color: var(--text); border-radius: 0 10px 10px 0; } .prose table { width: 100%; margin: 1.25rem 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); border-collapse: separate; border-spacing: 0; } .prose th, .prose td { padding: .7rem .85rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .92rem; } .prose th { background: var(--surface-muted); font-weight: 600; color: var(--text); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; } .prose tr:last-child td { border-bottom: 0; } .prose img { border-radius: var(--radius); margin: 1rem 0; } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } .prose code { font-family: var(--mono); background: var(--surface-muted); padding: .12em .4em; border-radius: 4px; font-size: .88em; color: var(--text); } .meta-row { display: flex; gap: 1rem; color: var(--text-muted); font-size: .88rem; margin-bottom: 1.25rem; flex-wrap: wrap; } /* Error-page (500/404) hero glyph + action row */ .error-hero { display: grid; place-items: center; padding: .5rem 0 1rem; color: var(--text-muted); } .error-hero svg { width: 84px; height: 84px; } .error-list { list-style: disc; padding-left: 1.25rem; color: var(--text-muted); } .error-list li { margin-bottom: .45rem; } .error-list strong { color: var(--text); } .error-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; } /* Blog cards */ .post-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .related-reading { margin-top: 2.5rem; } .related-reading__title { font-size: 1.1rem; margin: 0 0 1rem; color: var(--text); } .post-card { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--text); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; color: inherit; } .post-thumb { aspect-ratio: 16/9; background: var(--brand); color: #ffffff; display: grid; place-items: center; font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; padding: 1rem; text-align: center; font-family: var(--display); position: relative; overflow: hidden; } .post-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25) 100%); pointer-events: none; } .post-card-body { padding: 1.1rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; } .post-card-tag { font-size: .68rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; } .post-card h3 { font-size: 1.05rem; margin-bottom: .45rem; line-height: 1.3; } .post-card p { font-size: .9rem; margin-bottom: .85rem; color: var(--text-muted); line-height: 1.55; } .post-card-meta { margin-top: auto; font-size: .78rem; color: var(--text-subtle); display: flex; justify-content: space-between; gap: .5rem; padding-top: .75rem; border-top: 1px dashed var(--border); } /* FAQ - bordered accordion with subtle open state, no icon fanfare */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .55rem; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .faq details:hover { border-color: var(--border-strong); } .faq details[open] { border-color: var(--text); box-shadow: var(--shadow-xs); } .faq summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .1rem 0; font-size: .98rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transform-origin: 70% 70%; transition: transform .2s var(--ease), border-color .2s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--text); } .faq details > *:not(summary) { margin-top: .85rem; color: var(--text-muted); font-size: .95rem; line-height: 1.6; } .faq details > *:not(summary) strong { color: var(--text); } .faq details p { margin: 0 0 .75rem; } .faq details p:last-child { margin-bottom: 0; } /* Preferred-branch bars (replaces Chart.js doughnut). * Three fixed-ratio columns keep every row aligned regardless of branch * name length or count digit-width. */ .branch-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; } .branch-bars__item { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(100px, 1fr) 96px; gap: .9rem; align-items: center; font-size: .9rem; } .branch-bars__name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .branch-bars__track { display: block; height: 8px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; } .branch-bars__fill { display: block; height: 100%; background: var(--text); border-radius: 999px; transition: width .6s var(--ease); } .branch-bars__stats { display: inline-flex; gap: .45rem; align-items: baseline; justify-content: flex-end; font-variant-numeric: tabular-nums; } .branch-bars__count { font-weight: 700; color: var(--text); } .branch-bars__pct { color: var(--text-muted); font-weight: 500; font-size: .82rem; } .branch-bars__loading, .branch-bars__empty { padding: .35rem 0; } @media (max-width: 520px) { .branch-bars__item { grid-template-columns: minmax(0, 1fr) minmax(60px, 80px) 78px; gap: .6rem; font-size: .85rem; } .branch-bars__pct { font-size: .78rem; } } /* Confetti */ #confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 60; } /* Utility */ .text-center { text-align: center; } /* .text-muted picks the readable mid-gray token (--text-muted = zinc-600, * ~8.3:1 on white). The earlier mapping pointed at --text-subtle (zinc-400, * ~2.4:1) which failed WCAG AA on the branch card and several other spots. */ .text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .hidden { display: none !important; } .divider { height: 1px; background: var(--border); margin: 1.25rem 0; } /* ========================================================================= Leaderboard / DataTables 2.x DT2 emits `.dt-container`, `.dt-layout-row`, `.dt-layout-cell`, `.dt-length`, `.dt-search`, `.dt-input`, `.dt-info`, `.dt-paging`, `.dt-paging-button`. ========================================================================= */ .dt-container { font-size: .92rem; display: flex; flex-direction: column; gap: .85rem; } /* Toolbar rows (above + below table) sit as flex rows, space-between */ .dt-container .dt-layout-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .dt-container .dt-layout-cell { display: inline-flex; align-items: center; } .dt-container .dt-layout-cell.dt-end { margin-left: auto; } /* Length + search wrappers */ .dt-container .dt-length, .dt-container .dt-search { position: relative; display: inline-flex; align-items: center; gap: .6rem; margin: 0; } /* Small caption-style labels on the controls */ .dt-container .dt-length > label, .dt-container .dt-search > label { margin: 0; font-size: .78rem; color: var(--text-subtle); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* DT2 puts an empty after the search - hide it when empty */ .dt-container .dt-search > label:empty { display: none; } /* --- Search input: magnifier icon sits inside the field --- */ .dt-container .dt-search::before { content: ""; position: absolute; left: .9rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: center / contain no-repeat url("data:image/svg+xml;utf8,"); pointer-events: none; z-index: 1; opacity: .85; transition: opacity .15s; } .dt-container .dt-search:focus-within::before { opacity: 1; } .dt-container .dt-search input.dt-input, .dt-container input[type="search"].dt-input { width: 280px; height: 40px; padding: 0 .95rem 0 2.35rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: .92rem; box-shadow: var(--shadow-xs); transition: border-color .15s, box-shadow .15s, background .15s; } .dt-container .dt-search input.dt-input::placeholder { color: var(--text-subtle); font-weight: 400; } .dt-container .dt-search input.dt-input:hover { border-color: var(--text-muted); } .dt-container .dt-search input.dt-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); } /* Webkit's search clear (x) - themed */ .dt-container .dt-search input.dt-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-right: -.25rem; background: center / contain no-repeat url("data:image/svg+xml;utf8,"); cursor: pointer; opacity: .7; } .dt-container .dt-search input.dt-input::-webkit-search-cancel-button:hover { opacity: 1; } /* --- Length select: matches the input geometry, custom caret on the right --- */ .dt-container .dt-length select.dt-input, .dt-container select.dt-input { height: 40px; padding: 0 2.1rem 0 .9rem; border: 1px solid var(--border-strong); border-radius: 10px; background-color: var(--bg-elev); color: var(--text); font: inherit; font-size: .92rem; font-weight: 500; box-shadow: var(--shadow-xs); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px; transition: border-color .15s, box-shadow .15s, background-color .15s; } .dt-container .dt-length select.dt-input:hover, .dt-container select.dt-input:hover { border-color: var(--text-muted); } .dt-container .dt-length select.dt-input:focus, .dt-container select.dt-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); } /* Mobile: stack the toolbar rows, full-width controls */ @media (max-width: 640px) { .dt-container .dt-layout-row { flex-direction: column; align-items: stretch; gap: .6rem; } .dt-container .dt-layout-cell { width: 100%; } .dt-container .dt-layout-cell.dt-end { margin-left: 0; } .dt-container .dt-search, .dt-container .dt-length { width: 100%; } .dt-container .dt-search input.dt-input, .dt-container input[type="search"].dt-input { width: 100%; } .dt-container .dt-length select.dt-input, .dt-container select.dt-input { flex: 1; } } /* Leaderboard table - sticky header, tabular numerics, horizontal scroll * on narrow viewports, and progressive column hiding below 960/720/540px * so mobile keeps only the columns that actually matter. */ .leaderboard-wrap table.dataTable { border: 0; margin: 0; min-width: 560px; } /* The DataTables 2.x cell wrapping the table: make IT scrollable so * search / length / pagination controls stay put. */ .leaderboard-wrap .dt-layout-cell:has(> table.dataTable) { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); } .leaderboard-wrap table.dataTable thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-soft); border-bottom: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border); white-space: nowrap; } .leaderboard-wrap table.dataTable tbody tr { transition: background .12s; } .leaderboard-wrap table.dataTable tbody tr.row-clickable { cursor: pointer; } .leaderboard-wrap table.dataTable tbody tr.row-clickable:hover td { background: var(--brand-50); } .leaderboard-wrap table.dataTable tbody td, .leaderboard-wrap table.dataTable thead th { vertical-align: middle; } .leaderboard-wrap .col-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .9rem; color: var(--text); } .leaderboard-wrap .col-right { color: var(--text); font-weight: 600; } .leaderboard-wrap .col-wrong { color: var(--text-muted); font-weight: 600; } .leaderboard-wrap .dt-center { text-align: center; } /* Progressive column hiding. Column order in the rendered : * 1 Rank · 2 Seat · 3 Series · 4 Total · 5 BE01 · 6 BE02 * 7 Right · 8 Wrong · 9 Attempted · 10 Unattempted · 11 Branch * * < 960px drop the per-section counts (Attempted / Unattempted) * < 720px also drop Right / Wrong * < 540px also drop Series / BE01 / BE02 → leaves Rank · Seat · Total · Branch */ @media (max-width: 960px) { .leaderboard-wrap table.dataTable thead th:nth-child(9), .leaderboard-wrap table.dataTable thead th:nth-child(10), .leaderboard-wrap table.dataTable tbody td:nth-child(9), .leaderboard-wrap table.dataTable tbody td:nth-child(10) { display: none; } } @media (max-width: 720px) { .leaderboard-wrap table.dataTable thead th:nth-child(7), .leaderboard-wrap table.dataTable thead th:nth-child(8), .leaderboard-wrap table.dataTable tbody td:nth-child(7), .leaderboard-wrap table.dataTable tbody td:nth-child(8) { display: none; } .leaderboard-wrap table.dataTable { min-width: 460px; } } @media (max-width: 540px) { .leaderboard-wrap table.dataTable thead th:nth-child(3), .leaderboard-wrap table.dataTable thead th:nth-child(5), .leaderboard-wrap table.dataTable thead th:nth-child(6), .leaderboard-wrap table.dataTable tbody td:nth-child(3), .leaderboard-wrap table.dataTable tbody td:nth-child(5), .leaderboard-wrap table.dataTable tbody td:nth-child(6) { display: none; } .leaderboard-wrap table.dataTable { min-width: 0; } .leaderboard-wrap table.dataTable tbody td, .leaderboard-wrap table.dataTable thead th { padding: .65rem .55rem; } } /* Rank pill + medal */ .rank-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 .5rem; border-radius: 999px; background: var(--surface-muted); color: var(--text-muted); font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; } .rank-pill.rank-1, .rank-pill.rank-2, .rank-pill.rank-3 { padding: 0; color: var(--bg-elev); } .rank-pill .rank-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--bg-elev); font-family: var(--display); } .rank-pill.rank-1 .rank-medal { background: var(--text); box-shadow: var(--shadow-sm); } .rank-pill.rank-2 .rank-medal { background: var(--text-muted); box-shadow: var(--shadow-xs); } .rank-pill.rank-3 .rank-medal { background: var(--text-subtle); box-shadow: var(--shadow-xs); } /* Seat link */ .seat-link { font-family: var(--mono); font-weight: 600; color: var(--text); border-bottom: 1px dashed var(--border-strong); padding-bottom: 1px; } .seat-link:hover { color: var(--brand); border-color: var(--brand); text-decoration: none; } /* Series pill (A/B/C/D each get a tint) */ .series-pill { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 6px; font-family: var(--mono); font-weight: 700; font-size: .78rem; color: var(--bg-elev); } .series-pill.series-A { background: var(--text); } .series-pill.series-B { background: var(--text-muted); } .series-pill.series-C { background: var(--text-subtle); color: var(--text); } .series-pill.series-D { background: var(--border-strong); color: var(--text); } /* Score chip (tier rendered as weight/contrast, no hue) */ .score-chip { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: .88rem; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); } .score-topper { background: var(--text); color: var(--bg-elev); border-color: var(--text); } .score-gold { background: var(--bg-elev); color: var(--text); border-color: var(--text); font-weight: 800; } .score-silver { background: var(--surface-muted); color: var(--text); border-color: var(--border-strong); } .score-bronze { background: var(--bg-elev); color: var(--text-muted); border-color: var(--border-strong); } .score-rookie { background: var(--surface-muted); color: var(--text-muted); border-color: var(--border); } /* Branch pill */ .branch-pill { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 500; background: var(--brand-50); color: var(--brand); white-space: nowrap; } /* Info text + pagination (DT2 classes) */ .dt-container .dt-info { color: var(--text-subtle); font-size: .86rem; } /* Selectors use `div.dt-container` to out-specify the library's rules, * which ship with gradient backgrounds, inset shadows, and !important * text colors. Every background is explicit to stop the default gradient * from painting over it. */ div.dt-container .dt-paging { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; } div.dt-container .dt-paging .dt-paging-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev) !important; color: var(--text-muted) !important; background-image: none !important; box-shadow: none !important; font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; } div.dt-container .dt-paging .dt-paging-button:hover { background: var(--surface-muted) !important; background-image: none !important; border-color: var(--border-strong); color: var(--text) !important; text-decoration: none; box-shadow: none !important; } div.dt-container .dt-paging .dt-paging-button:active { background: var(--surface-muted) !important; background-image: none !important; box-shadow: none !important; outline: none; } div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: #09090b !important; background-color: #09090b !important; background-image: none !important; border: 1px solid #09090b !important; color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; font-weight: 600; } html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.current, html[data-theme="dark"] div.dt-container .dt-paging .dt-paging-button.current:hover { background: #fafafa !important; background-color: #fafafa !important; border-color: #fafafa !important; color: #09090b !important; } div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active { opacity: .4; cursor: not-allowed; background: transparent !important; background-image: none !important; border-color: var(--border); color: var(--text-subtle) !important; box-shadow: none !important; } div.dt-container .dt-paging .ellipsis { padding: 0 .35rem; color: var(--text-subtle); } /* Processing overlay */ /* Processing overlay. The dots inside use --dt-row-selected (RGB triplet) * which DataTables hard-codes to 13, 110, 253 (blue). Override both the * variable AND the concrete dot selector to stay monochrome in both themes. */ .dt-container .dt-processing { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); font-weight: 500; --dt-row-selected: 9, 9, 11; /* zinc-950 RGB */ } html[data-theme="dark"] .dt-container .dt-processing { --dt-row-selected: 250, 250, 250; /* zinc-50 RGB */ } .dt-container div.dt-processing > div:last-child > div { background: var(--text) !important; } /* =========================================================================== Reveal animations - fade + slight upward motion on scroll ========================================================================= */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .anim-fade-up { animation: fade-up .5s var(--ease) both; } /* Focus rings - soft monochrome across the board */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; } button:focus-visible, a:focus-visible { outline-offset: 3px; } /* Button micro-press */ .btn:active { transform: translateY(1px); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .score-ring .fill { transition: none; } .reveal { opacity: 1; transform: none; } } /* =========================================================================== Sitewide notices banner (admin-posted) =========================================================================*/ .maintenance-bar { background: var(--danger); color: #fff; font-size: .92rem; line-height: 1.45; } .maintenance-bar .container { padding-top: .65rem; padding-bottom: .65rem; } .maintenance-bar strong { color: #fff; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; margin-right: .35rem; font-weight: 800; } .notice-bar { border-bottom: 1px solid var(--border); background: var(--surface-muted); } .notice-bar .container { padding-top: .65rem; padding-bottom: .65rem; display:flex; flex-direction:column; gap:.5rem; } .notice-bar__item { border-radius: 10px; padding: .6rem .9rem; border: 1px solid transparent; font-size: .92rem; color: var(--text); line-height: 1.45; } .notice-bar__item--info { background: var(--info-bg); border-color: color-mix(in oklab, var(--info) 25%, transparent); } .notice-bar__item--success { background: var(--success-bg); border-color: color-mix(in oklab, var(--success) 25%, transparent); } .notice-bar__item--warn { background: var(--warn-bg); border-color: color-mix(in oklab, var(--warn) 30%, transparent); } .notice-bar__item--danger { background: var(--danger-bg); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } .notice-bar__text { display:block; } /* =========================================================================== Upload paused card (homepage, when admin has disabled uploads) =========================================================================*/ .upload-paused { display:flex; flex-direction:column; align-items:center; text-align:center; padding: 1.25rem .5rem .5rem; gap: .75rem; } .upload-paused__icon { width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center; background: var(--warn-bg); color: var(--warn); } .upload-paused__title { margin:0; font-size: 1.15rem; color: var(--text); } .upload-paused__body { margin:0 0 .5rem; color: var(--text-muted); max-width: 42ch; font-size: .94rem; line-height: 1.5; } /* =========================================================================== Admin panel - shell, sidebar, topbar =========================================================================*/ .admin-body { background: var(--surface-muted); } .admin-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; } .admin-nav { background: var(--bg-elev); border-right: 1px solid var(--border); padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; height: 100vh; z-index: 20; } .admin-nav__brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); font-weight: 700; font-size: 1rem; padding: .25rem 0; } .admin-nav__brand:hover { text-decoration: none; color: var(--text); } .admin-nav nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; } .admin-nav__link { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px; color: var(--text-muted); text-decoration: none; font-size: .92rem; font-weight: 500; line-height: 1.2; } .admin-nav__link:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; } .admin-nav__link.is-active { background: var(--brand-50); color: var(--brand); } .admin-nav__link svg { width: 18px; height: 18px; flex-shrink: 0; } .admin-nav__foot { display: flex; flex-direction: column; gap: .4rem; margin-top: auto; } .admin-nav__foot .btn { justify-content: center; } .admin-nav__open { position: fixed; top: .75rem; left: .75rem; z-index: 30; width: 40px; height: 40px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); display: none; cursor: pointer; } .admin-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; z-index: 19; } .admin-main { padding: 1.75rem 2rem 3rem; min-width: 0; } .admin-topbar { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .admin-topbar h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; color: var(--text); } .admin-topbar__sub { margin: .3rem 0 0; font-size: .92rem; color: var(--text-muted); } .admin-flashes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; } .admin-section { display: flex; flex-direction: column; gap: 1rem; } .admin-card { border-radius: 12px; } .admin-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .admin-shell { grid-template-columns: 1fr; } .admin-nav { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 16px 40px rgba(15, 23, 42, .2); } .admin-nav.is-open { transform: translateX(0); } .admin-nav.is-open ~ .admin-backdrop { display: block; } .admin-nav__open { display: grid; place-items: center; } .admin-main { padding: 4rem 1rem 3rem; } } @media (max-width: 780px) { .admin-row, .admin-row--four { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .admin-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .admin-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; align-items: start; } .admin-grid-2--end { align-items: end; } @media (max-width: 600px) { .admin-grid-2 { grid-template-columns: 1fr; } } .admin-hint { padding: .85rem 1rem; background: var(--brand-50); border-left: 3px solid var(--brand); border-radius: 8px; font-size: .9rem; color: var(--text); } /* Stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; } .stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; } .stat-card__label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .stat-card__value { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; color: var(--text); line-height: 1; } .stat-card__foot { font-size: .75rem; color: var(--text-muted); margin-top: .4rem; } /* Hourly bars chart */ .hourly-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 0 .25rem .25rem; } .hourly-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; } .hourly-bar__fill { display: block; width: 100%; max-width: 22px; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 70%, black)); border-radius: 3px 3px 0 0; height: var(--pct, 1%); min-height: 3px; } .hourly-bar__count { position: absolute; bottom: calc(var(--pct, 0%) + 4px); font-size: .68rem; color: var(--text-muted); font-weight: 600; } .hourly-bar__label { font-size: .66rem; color: var(--text-subtle); margin-top: 4px; font-variant-numeric: tabular-nums; } /* Branch distribution list */ .branch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; } .branch-list li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: .75rem; align-items: center; font-size: .9rem; } .branch-list__name { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .branch-list__bar { display: block; height: 8px; background: var(--surface-muted); border-radius: 999px; overflow: hidden; } .branch-list__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 70%, transparent)); border-radius: 999px; } .branch-list__count { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; min-width: 2ch; font-weight: 600; } /* Admin table */ .admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .admin-table th, .admin-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table th { background: var(--surface-muted); font-weight: 700; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .admin-table td.num, .admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .admin-table tr.is-flagged { background: color-mix(in oklab, var(--warn-bg) 70%, transparent); } .admin-table a { color: var(--brand); font-weight: 600; text-decoration: none; } .admin-table a:hover { text-decoration: underline; } .admin-table__actions { display: flex; gap: .35rem; white-space: nowrap; justify-content: flex-end; } .admin-table__actions form { display: inline; margin: 0; } .admin-table .nowrap { white-space: nowrap; } .admin-table--compact th, .admin-table--compact td { padding: .45rem .4rem; font-size: .85rem; } .table-wrap { overflow-x: auto; border-radius: 8px; } /* Search row */ .admin-search { display: flex; gap: .5rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; } .admin-search input { flex: 1; min-width: 220px; } /* Pagination */ .admin-paginate { display: flex; gap: .75rem; align-items: center; justify-content: center; padding: 1rem 0 0; } .admin-paginate__info { font-size: .88rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Admin notice list (Notices page) */ .admin-notice-list { display: flex; flex-direction: column; gap: .6rem; } .admin-notice-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .85rem 1rem; } .admin-notice-item.is-off { opacity: .55; } .admin-notice-item__body { flex: 1 1 auto; min-width: 0; } .admin-notice-item__body p { margin: 0 0 .35rem; color: var(--text); } .admin-notice-item__meta { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .admin-notice-item__actions { display: flex; gap: .4rem; flex-shrink: 0; } /* Per-series toggle buttons */ .series-toggle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; } @media (max-width: 600px) { .series-toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .series-toggle { width: 100%; padding: .95rem .5rem; background: var(--surface-muted); border: 1.5px solid var(--border-strong); border-radius: 10px; color: var(--text-muted); cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: border-color .12s, background .12s, color .12s; } .series-toggle:hover { border-color: var(--brand); color: var(--text); } .series-toggle.is-on { background: var(--success-bg); border-color: var(--success); color: var(--success); } .series-toggle__name { font-weight: 700; font-size: .95rem; } .series-toggle__state { font-size: .7rem; font-weight: 800; letter-spacing: .08em; } /* Pills (status badges) */ .pill { display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; } .pill--ok { background: var(--success-bg); color: var(--success); } .pill--off { background: var(--danger-bg); color: var(--danger); } .pill--warn { background: var(--warn-bg); color: var(--warn); } /* Status dl (overview "Quick status" card) */ .admin-status { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: .7rem 1rem; margin: 0; } .admin-status dt { color: var(--text-muted); font-size: .9rem; } .admin-status dd { margin: 0; color: var(--text); font-weight: 600; font-size: .92rem; } .admin-status dd a { color: var(--brand); font-weight: 600; } /* Key-value snippet (activity details) */ .kv { display: inline-block; background: var(--surface-muted); padding: .12em .55em; border-radius: 4px; font-size: .8rem; margin: 0 .25rem .25rem 0; color: var(--text-muted); } .kv b { color: var(--text); font-weight: 700; margin-right: .2rem; } .kv__action { background: var(--brand-50); color: var(--brand); padding: .15em .5em; border-radius: 4px; font-size: .82rem; } /* Meta-pill variants used across admin (status chips in card heads) */ .meta-pill--ok { background: var(--success-bg); color: var(--success); } .meta-pill--off { background: var(--danger-bg); color: var(--danger); } /* History tile (per series on answer keys page) */ .admin-history { display: flex; flex-direction: column; gap: .5rem; } .admin-history__title { margin: 0; font-size: .88rem; color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .admin-history__empty { margin: 0; font-size: .88rem; } /* Login page (standalone, not inside admin shell) */ .admin-body--login { display: grid; place-items: center; padding: 1rem; min-height: 100vh; } .admin-login { width: 100%; max-width: 420px; } .admin-login__card { padding: 1.75rem; } .admin-login__brand { display: flex; align-items: center; gap: .55rem; color: var(--text-muted); font-size: .85rem; font-weight: 600; margin-bottom: .75rem; } .admin-login__title { margin: 0 0 1.25rem; font-size: 1.5rem; letter-spacing: -.02em; } .admin-login__error { margin-bottom: 1rem; } .admin-login__foot { margin: 1.25rem 0 0; text-align: center; font-size: .88rem; } .admin-login__foot a { color: var(--text-muted); text-decoration: none; } .admin-login__foot a:hover { color: var(--brand); text-decoration: underline; } /* Danger button (used across admin) */ .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: color-mix(in oklab, var(--danger) 85%, black); color: #fff; border-color: color-mix(in oklab, var(--danger) 85%, black); }