/* ============================================================================ hack.courses — storefront design system Self-contained. No dependency on the lab app's style.css. Dark theme default; light theme via [data-theme="light"] on . ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================================ ▓▓▓ CONFIGURE HERE ▓▓▓ Change these and the whole UI follows. Two brand accents, one spacing unit, one set of control/button/radius sizes. ============================================================================ */ :root { /* -- Brand accents ------------------------------------------------------ */ --accent-1: #4b6bff; /* blue — primary actions, links, focus */ --accent-1-hover: #3a55e6; --accent-2: #f5356e; /* purple/red — price, primary CTA, highlights */ --accent-2-hover: #e01e5a; /* -- Spacing: everything derives from one unit -------------------------- */ --unit: 4px; --space-1: calc(var(--unit) * 1); /* 4 */ --space-2: calc(var(--unit) * 2); /* 8 */ --space-3: calc(var(--unit) * 3); /* 12 */ --space-4: calc(var(--unit) * 4); /* 16 */ --space-5: calc(var(--unit) * 6); /* 24 */ --space-6: calc(var(--unit) * 8); /* 32 */ --space-7: calc(var(--unit) * 12); /* 48 */ --space-8: calc(var(--unit) * 16); /* 64 */ /* -- Radius ------------------------------------------------------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; /* -- Buttons (size variants rescale from these) ------------------------- */ --btn-h: 40px; --btn-px: 18px; --btn-font: 14px; --btn-weight: 600; --btn-radius: 8px; /* -- Form controls ------------------------------------------------------ */ --control-h: 42px; --control-px: 14px; --control-radius: 8px; /* -- Layout ------------------------------------------------------------- */ --container: 1080px; --gap: var(--space-4); /* standard grid/flex gap */ --pad: var(--space-5); /* standard block padding */ --card-pad: var(--space-5); } /* ============================================================================ ▓▓▓ END CONFIG ▓▓▓ ============================================================================ */ /* Themes -------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0d0f16; --bg-glow: #10131d; --surface: #151824; --surface-2: #1b1f2e; --border: #262b3b; --border-strong: #38405a; --text: #eceef5; --text-2: #aab2c5; --text-3: #737c92; --text-faint: #4b5268; --accent-1-soft: rgba(75, 107, 255, 0.14); --accent-2-soft: rgba(245, 53, 110, 0.14); --on-accent: #ffffff; --success: #34d399; --danger: #f87171; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7); } :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fb; --bg-glow: #eef1f8; --surface: #ffffff; --surface-2: #f2f4f9; --border: #e3e7f0; --border-strong: #cbd2e2; --text: #10131c; --text-2: #444d63; --text-3: #6b7488; --text-faint: #9aa2b6; --accent-1-soft: rgba(75, 107, 255, 0.10); --accent-2-soft: rgba(245, 53, 110, 0.10); --on-accent: #ffffff; --success: #059669; --danger: #dc2626; --shadow: 0 1px 2px rgba(16,19,28,.06), 0 8px 24px -14px rgba(16,19,28,.18); --shadow-lg: 0 2px 6px rgba(16,19,28,.08), 0 24px 48px -22px rgba(16,19,28,.24); } /* Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; /* faint two-accent glow at the top, so the brand reads without shouting */ background-image: radial-gradient(120% 60% at 15% -10%, var(--accent-1-soft), transparent 60%), radial-gradient(120% 60% at 90% -20%, var(--accent-2-soft), transparent 55%); background-repeat: no-repeat; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.02em; line-height: 1.15; } code, .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; } img { display: block; max-width: 100%; } /* Layout -------------------------------------------------------------------- */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } .section { margin-top: var(--space-7); } .section + .section { margin-top: var(--space-7); } /* Topbar -------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-4); height: 60px; padding: 0 var(--space-5); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-family: 'Space Grotesk'; font-weight: 700; font-size: 16px; letter-spacing: -0.03em; color: var(--text); } .brand .mark { width: 26px; height: 26px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; display: grid; place-items: center; overflow: hidden; } .brand .mark img { width: 66%; height: 66%; object-fit: contain; display: block; } .brand-text { display: inline-block; } .brand .dim { color: var(--text-3); font-weight: 500; } .menu-btn { display: none; margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); width: 38px; height: 34px; cursor: pointer; align-items: center; justify-content: center; } .menu-btn svg { width: 18px; height: 18px; } .topnav { display: flex; align-items: center; gap: var(--space-4); flex: 1; margin-left: var(--space-4); } .nav { display: inline-flex; gap: var(--space-2); } .nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-3); transition: color .12s, background .12s; white-space: nowrap; } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a.on { color: var(--text); background: var(--accent-1-soft); } .acct { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; } .acct a, .acct .who { font-size: 14px; font-weight: 500; color: var(--text-3); white-space: nowrap; } .acct a:hover { color: var(--text); } .acct .who { color: var(--text); } .acct .who::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-right: 7px; vertical-align: middle; } /* Theme toggle (segmented) -------------------------------------------------- */ .theme { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .theme button { border: 0; background: transparent; color: var(--text-3); cursor: pointer; width: 30px; height: 24px; border-radius: 4px; display: grid; place-items: center; } .theme button svg { width: 14px; height: 14px; } :root[data-theme="dark"] .theme #t-dark, :root[data-theme="light"] .theme #t-light { background: var(--accent-1-soft); color: var(--accent-1); } /* Buttons ------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-h); padding: 0 var(--btn-px); font-family: 'Inter'; font-size: var(--btn-font); font-weight: var(--btn-weight); border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s, color .14s, transform .06s; text-align: center; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-1); color: var(--on-accent); border-color: var(--accent-1); } .btn-primary:hover { background: var(--accent-1-hover); border-color: var(--accent-1-hover); } .btn-cta { color: var(--on-accent); border: 0; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); background-size: 140% 140%; } .btn-cta:hover { background-position: 100% 0; } .btn-secondary { background: var(--accent-2); color: var(--on-accent); border-color: var(--accent-2); } .btn-secondary:hover { background: var(--accent-2-hover); border-color: var(--accent-2-hover); } .btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-outline:hover { border-color: var(--accent-1); color: var(--accent-1); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-block { width: 100%; } /* size variants rescale from the base tokens */ .btn-sm { --btn-h: 32px; --btn-px: 12px; --btn-font: 13px; } .btn-lg { --btn-h: 48px; --btn-px: 26px; --btn-font: 15px; } /* Forms --------------------------------------------------------------------- */ .field { margin-top: var(--space-4); } .field > label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: var(--space-2); } .input, .select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select { width: 100%; height: var(--control-h); padding: 0 var(--control-px); background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--control-radius); font-family: 'Inter'; font-size: 14px; transition: border-color .12s, box-shadow .12s; } .input:focus, select:focus, input:focus { outline: 0; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-1-soft); } .input::placeholder, textarea::placeholder { color: var(--text-faint); } /* keep browser autofill legible on the dark theme (light text on dark field) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--text); transition: background-color 9999s ease-out 0s; } .check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--text-2); } .check input { width: auto; height: auto; } /* Hero ---------------------------------------------------------------------- */ .hero { padding: var(--space-8) 0 var(--space-6); position: relative; } .hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); border-radius: 2px; opacity: .9; } .hero h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; max-width: 18ch; } .hero p { color: var(--text-2); font-size: 17px; max-width: 60ch; margin-top: var(--space-4); } .hero .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .chip { padding: var(--space-2) var(--space-3); border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-2); transition: border-color .12s, color .12s; } .chip:hover { border-color: var(--accent-1); color: var(--text); } .hero-stats { display: flex; gap: var(--space-6); margin-top: var(--space-6); flex-wrap: wrap; } .hero-stat .n { font-family: 'Space Grotesk'; font-weight: 700; font-size: 26px; color: var(--text); } .hero-stat .n.accent { color: var(--accent-2); } .hero-stat .l { font-size: 13px; color: var(--text-3); } /* Section headers ----------------------------------------------------------- */ .sec-head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); } .sec-head h2 { font-size: 20px; font-weight: 600; } .sec-head .count { font-size: 13px; color: var(--text-3); } .sec-head .sq { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-1); flex: none; align-self: center; } /* Course grid + cards ------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--card-pad); transition: border-color .14s, box-shadow .14s; } a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } .card .tag { align-self: flex-start; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--accent-1-soft); color: var(--accent-1); margin-bottom: var(--space-3); } .card h3 { font-size: 18px; font-weight: 600; } .card .sum { color: var(--text-2); font-size: 14px; margin-top: var(--space-2); flex: 1; } .card .meta { font-size: 13px; color: var(--text-3); margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; } .card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .price { font-family: 'Space Grotesk'; font-weight: 700; font-size: 20px; color: var(--accent-2); } .price.free { color: var(--text-3); } .price .cur { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 3px; } .owned { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success); } /* Two-column course detail -------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; } .buy { position: sticky; top: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow); } .buy .price { font-size: 34px; display: block; margin-bottom: var(--space-2); } .buy .btn { margin-top: var(--space-4); } .buy .note { font-size: 13px; color: var(--text-3); margin-top: var(--space-3); } .lab-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); } .lab-row:last-child { border-bottom: 0; } .lab-row .t { font-weight: 500; color: var(--text); } .lab-row .id { font-size: 12px; color: var(--text-3); margin-top: 2px; } .locked { font-size: 13px; color: var(--text-faint); } /* Callouts / panels --------------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); } .callout { border: 1px solid var(--border); border-left: 3px solid var(--accent-1); background: var(--surface); border-radius: var(--radius); padding: var(--space-5); } .callout.reveal { border-left-color: var(--accent-2); } .callout .k { font-size: 13px; color: var(--text-3); } .code-token { display: inline-block; font-family: 'JetBrains Mono'; font-size: 17px; color: var(--accent-2); background: var(--accent-2-soft); padding: 6px 12px; border-radius: var(--radius-sm); user-select: all; margin-top: var(--space-2); } /* Stat row (dashboard standing) --------------------------------------------- */ .stats { display: flex; gap: var(--space-6); flex-wrap: wrap; } .stat .n { font-family: 'Space Grotesk'; font-weight: 700; font-size: 30px; color: var(--text); line-height: 1; } .stat .n.rank { color: var(--accent-2); } .stat .n.pts { color: var(--accent-1); } .stat .l { font-size: 13px; color: var(--text-3); margin-top: var(--space-2); } /* Tables -------------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--text-3); padding: var(--space-3); border-bottom: 1px solid var(--border); } .table td { padding: var(--space-3); border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: middle; } .table tr:hover td { background: var(--surface-2); } .inline { display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .inline select, .inline input { height: 32px; } /* Badges -------------------------------------------------------------------- */ .badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; } .badge.paid { background: var(--accent-2-soft); color: var(--accent-2); } .badge.ok { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } .badge.pending { background: var(--surface-2); color: var(--text-3); } /* Flash --------------------------------------------------------------------- */ .flash { border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; font-size: 14px; border: 1px solid var(--border); background: var(--surface); } .flash.ok { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); } .flash.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .flash.info { border-left: 3px solid var(--accent-1); } /* Auth pages ---------------------------------------------------------------- */ .auth { max-width: 400px; margin: var(--space-8) auto 0; } .auth .panel { padding: var(--space-6); } .auth h1 { font-size: 26px; } .auth .sub { color: var(--text-2); font-size: 14px; margin-top: var(--space-2); } .auth .btn { margin-top: var(--space-5); } .alt { margin-top: var(--space-4); font-size: 14px; color: var(--text-3); text-align: center; } .alt a { color: var(--accent-1); font-weight: 500; } .lead { color: var(--text-2); font-size: 17px; } .muted { color: var(--text-3); } .back { display: inline-block; margin-top: var(--space-6); font-size: 14px; color: var(--accent-1); font-weight: 500; } .eyebrow { color: var(--text-3); font-size: 14px; margin-bottom: var(--space-2); } .title-xl { font-size: 34px; font-weight: 700; } /* Responsive ---------------------------------------------------------------- */ @media (max-width: 820px) { .split { grid-template-columns: 1fr; } .buy { position: static; } .menu-btn { display: inline-flex; } .topnav { position: absolute; top: 60px; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--space-3); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .2s, opacity .15s; } .topnav.open { max-height: 340px; opacity: 1; pointer-events: auto; } .nav { flex-direction: column; gap: 2px; } .nav a { padding: var(--space-3); } .acct { margin: var(--space-2) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); flex-wrap: wrap; gap: var(--space-3) var(--space-4); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ============================================================================ Lab cards + collectible badges ============================================================================ */ .lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--gap); } .lab-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .14s, box-shadow .14s, transform .14s; } .lab-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-2px); } .lab-illo { display: block; position: relative; aspect-ratio: 44 / 18; background: var(--surface-2); } .lab-illo > img { width: 100%; height: 100%; object-fit: cover; display: block; } .lab-badge { position: absolute; right: 14px; bottom: -22px; width: 62px; height: 62px; z-index: 2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); } .lab-badge img { width: 100%; height: 100%; } .lab-body { padding: var(--space-4); padding-top: var(--space-5); display: flex; flex-direction: column; flex: 1; } .lab-cat { font-size: 12px; font-weight: 600; letter-spacing: .01em; } .lab-title { font-family: 'Space Grotesk'; font-weight: 600; font-size: 17px; margin-top: 3px; color: var(--text); line-height: 1.25; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); } .diff { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; } .diff.intro { background: var(--surface-2); color: var(--text-3); } .diff.beginner { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } .diff.intermediate { background: var(--accent-1-soft); color: var(--accent-1); } .diff.advanced { background: var(--accent-2-soft); color: var(--accent-2); } .topic { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); } .lab-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); } .lab-foot .ch { font-size: 13px; color: var(--text-3); } .lab-foot .locked { font-size: 13px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 5px; } /* Trophy case (dashboard) */ .trophy-head { display: flex; align-items: baseline; gap: var(--space-3); } .trophy-count { font-family: 'Space Grotesk'; font-weight: 700; color: var(--accent-2); } .trophy { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-4); } .trophy .cell { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-2); background: var(--bg-glow); } .trophy .cell img { width: 76px; height: 76px; transition: transform .12s; } .trophy .cell:hover img { transform: translateY(-3px) scale(1.03); } .trophy .cell .nm { font-size: 12px; color: var(--text-2); margin-top: 8px; line-height: 1.3; } .trophy .cell.locked { background: var(--surface); } .trophy .cell.locked .nm { color: var(--text-faint); } .trophy .cell .tier { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; } .trophy .cell .tier.gold { color: #f5b301; } .trophy .cell .tier.silver { color: #aeb7c6; } .trophy .cell .tier.bronze { color: #cd7f32; } /* Lab description + HackCoins reward on cards */ .lab-desc { color: var(--text-2); font-size: 13px; margin-top: var(--space-2); line-height: 1.5; } .reward { font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; color: var(--accent-2); background: var(--accent-2-soft); padding: 3px 10px; border-radius: 999px; } /* HackCoins wallet stat */ .stat .n.hc { color: #f5b301; } /* Lab card foot: reward + price + buy */ .lab-foot-l { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .lab-price { font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; color: var(--text); } /* Course buy panel clarity */ .buy-label { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); } .buy-compare { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .buy-compare .strike { color: var(--text-3); text-decoration: line-through; font-size: 15px; } .buy-compare .save { font-size: 13px; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); padding: 2px 9px; border-radius: 999px; } /* Leaderboard */ .table tr.me td { background: var(--accent-1-soft); } .rankcell { font-weight: 600; } .medal { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; color: #0d0f16; } .medal.m1 { background: linear-gradient(180deg,#fff4bf,#f5b301); } .medal.m2 { background: linear-gradient(180deg,#ffffff,#c8d0dc); } .medal.m3 { background: linear-gradient(180deg,#f4cda6,#cd7f32); } /* Admin lab editor */ .lab-admin { display: flex; flex-direction: column; gap: var(--space-4); } .lab-admin-row { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); } .lab-admin-row.is-disabled { opacity: .6; } .lab-admin-head { display: flex; align-items: center; gap: var(--space-3); } .lab-admin-thumb { width: 76px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); flex: none; } .lab-admin-badge { width: 40px; height: 40px; margin-left: auto; flex: none; } .lab-admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); } .lab-admin-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); } .lab-admin-grid label.wide { grid-column: span 2; } .lab-admin-grid input, .lab-admin-grid select { height: 34px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; } .lab-admin-foot { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); flex-wrap: wrap; } .lab-admin-foot .btn { margin-left: auto; } @media (max-width: 720px) { .lab-admin-grid { grid-template-columns: 1fr 1fr; } .lab-admin-grid label.wide { grid-column: span 2; } } /* Team + register banner */ .team-banner { border: 1px solid var(--border); border-left: 3px solid var(--accent-1); background: var(--accent-1-soft); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--text-2); margin-bottom: var(--space-4); } /* Path progress bar */ .pathbar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .pathbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); } .pathbar.big { height: 10px; max-width: 420px; } /* Path steps */ .path-steps { list-style: none; margin: 0; padding: 0; } .path-step { display: flex; gap: var(--space-4); padding-bottom: var(--space-5); position: relative; } .path-step::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--border); } .path-step:last-child::before { display: none; } .path-node { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px; background: var(--surface-2); border: 2px solid var(--border-strong); color: var(--text-2); z-index: 1; } .path-step.done .path-node { background: var(--success); border-color: var(--success); color: #0d0f16; } .path-step.open .path-node { border-color: var(--accent-1); color: var(--accent-1); } .path-step.locked { opacity: .6; } .path-body { flex: 1; min-width: 0; } .path-narrative { color: var(--text-2); font-size: 15px; margin-bottom: var(--space-3); line-height: 1.6; } .path-lab { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-3); } .path-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); flex: none; } .path-lab-info { flex: 1; min-width: 0; } .path-action { flex: none; } @media (max-width: 640px) { .path-lab { flex-wrap: wrap; } .path-thumb { width: 100%; height: 120px; } } /* Admin teams/paths */ .admin-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); margin-bottom: var(--space-4); } .token-pill { font-family: 'JetBrains Mono'; font-size: 13px; background: var(--surface-2); color: var(--accent-1); padding: 3px 10px; border-radius: var(--radius-sm); user-select: all; } .multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; margin-top: var(--space-2); max-height: 160px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); } .multi label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); } /* Filter bar (labs) */ .filterbar { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; } .filtergroup { display: inline-flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; } .ftab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-2); } .ftab span { font-size: 11px; color: var(--text-3); background: var(--surface-2); padding: 1px 7px; border-radius: 999px; } .ftab:hover { color: var(--text); background: var(--surface-2); } .ftab.on { background: var(--accent-1-soft); color: var(--accent-1); } .ftab.red.on { background: var(--accent-2-soft); color: var(--accent-2); } .ftab.blue.on { background: color-mix(in srgb,#22d3ee 16%,transparent); color: #22d3ee; } /* Side dot on cards */ .side-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-left: 6px; } .side-dot.red { background: var(--accent-2); } .side-dot.blue { background: #22d3ee; } .lab-title { display: block; } a.lab-title:hover { color: var(--accent-1); } .lab-price.free { color: var(--text-3); } /* Notification bell */ .bell { position: relative; display: inline-flex; color: var(--text-3); } .bell svg { width: 20px; height: 20px; } .bell:hover { color: var(--text); } .bell-dot { position: absolute; top: -6px; right: -8px; background: var(--accent-2); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; } /* Reviews */ .review-form { margin-top: var(--space-4); } .stars-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; font-size: 26px; } .stars-input input { display: none; } .stars-input label { color: var(--border-strong); cursor: pointer; transition: color .1s; } .stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { color: #f5b301; } .review-list { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .review-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); } .review-head { display: flex; align-items: center; justify-content: space-between; } .review-stars { color: #f5b301; letter-spacing: 2px; } .review-item p { color: var(--text-2); font-size: 14px; margin-top: var(--space-2); } /* Notifications list */ .notif-list { display: flex; flex-direction: column; gap: var(--space-3); } .notif { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; border: 1px solid var(--border); border-left: 3px solid var(--accent-1); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); } .notif.kind-review { border-left-color: #f5b301; } .notif.kind-alert { border-left-color: var(--accent-2); } .notif-title { font-weight: 600; color: var(--text); } .notif-text { color: var(--text-2); font-size: 14px; margin-top: 4px; } /* Leaderboard JWT token box */ .token-box { display: block; font-family: 'JetBrains Mono'; font-size: 12px; color: var(--accent-1); background: var(--bg-glow); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; word-break: break-all; user-select: all; } /* Integrated lab: challenges */ .chall-list { display: flex; flex-direction: column; gap: var(--space-4); } .chall { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); border-left: 3px solid var(--border-strong); } .chall.done { border-left-color: var(--success); } .chall-head { display: flex; align-items: center; gap: var(--space-3); } .chall-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: 'Space Grotesk'; font-weight: 700; font-size: 13px; background: var(--surface-2); border: 2px solid var(--border-strong); color: var(--text-2); } .chall.done .chall-num { background: var(--success); border-color: var(--success); color: #0d0f16; } .chall-title { font-weight: 600; color: var(--text); } .chall-lore { margin-top: var(--space-3); color: var(--text-2); font-size: 14px; line-height: 1.6; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-glow); padding: var(--space-3) var(--space-4); } .chall-lore p { margin: 0 0 8px; } .chall-lore img { max-width: 100%; border-radius: var(--radius-sm); margin-top: 8px; } .chall-lore .lore, .chall-lore .message-text { color: var(--text-2); } .chall-lore code, .chall-lore pre { font-family: 'JetBrains Mono'; font-size: 12px; background: var(--bg-code, var(--surface-2)); padding: 1px 5px; border-radius: 4px; } .flag-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .flag-form .input { flex: 1; } /* Hints */ .hint-list { display: flex; flex-direction: column; gap: var(--space-3); } .hint { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-3) var(--space-4); } .hint.unlocked { border-left: 3px solid #f5b301; } .hint-icon { font-size: 18px; } .hint-text { font-size: 14px; color: var(--text-2); } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* Wallet on dashboard */ .wallet-row { display: flex; gap: var(--space-6); flex-wrap: wrap; } /* Admin: consistent spacing before a create/settings form's submit button */ form.panel > button[type="submit"] { margin-top: var(--space-5); } .lab-hints { border-top: 1px solid var(--border); margin-top: var(--space-4); padding-top: var(--space-3); } /* ============================================================================ Interactive lab (incorporated) — sidebar + content + terminal ============================================================================ */ .play-body { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--bg); } .lab-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .lab-sidebar .brand { font-size: 15px; } .lab-sidebar-title { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.25; margin-top: var(--space-2); } .lab-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .lab-sidebar-list a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2); border-left: 2px solid transparent; } .lab-sidebar-list a:hover { background: var(--surface-2); color: var(--text); } .lab-sidebar-list a.selected { background: var(--accent-1-soft); color: var(--accent-1); border-left-color: var(--accent-1); } .lab-sidebar-list a.completed::before { content: '✓ '; color: var(--success); font-weight: 700; } .lab-exit { margin-top: auto; font-size: 13px; color: var(--text-3); } .lab-exit:hover { color: var(--text); } .lab-content { padding: var(--space-5) var(--space-6); max-width: 1000px; } .lab-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); } .lab-topbar .crumbs { font-family: 'JetBrains Mono'; font-size: 13px; color: var(--text-3); display: flex; gap: 8px; } .lab-topbar .crumbs .current { color: var(--text); } .challenge .question-title { font-family: 'Space Grotesk'; font-size: 24px; font-weight: 600; margin-bottom: var(--space-4); } .challenge .question-desc { max-height: none; } .challenge .flag { font-family: 'JetBrains Mono'; font-size: 14px; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; } .challenge .btn { margin: var(--space-4) 0; } #hc-term-host { margin-top: var(--space-4); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-strong); } #hc-term-host iframe.terminal { width: 100%; height: 460px; border: 0; display: block; background: #0b0e14; } #hc-term-host iframe.fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; } #fullscreen { position: fixed; right: 20px; bottom: 20px; z-index: 201; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: none; cursor: pointer; } #fullscreen img { width: 18px; height: 18px; } @media (max-width: 820px) { .play-body { grid-template-columns: 1fr; } .lab-sidebar { position: static; height: auto; } } .hint-body { display: flex; flex-direction: column; gap: 3px; } .hint-title { font-weight: 600; font-size: 14px; color: var(--text); } /* Markdown in hints */ .hint-text.markdown p { margin: 0 0 6px; } .hint-text.markdown p:last-child { margin-bottom: 0; } .hint-text.markdown code { font-family: 'JetBrains Mono'; font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; } .hint-text.markdown pre { background: var(--bg-glow); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; } .hint-text.markdown a { color: var(--accent-1); } .hint-admin-note { font-size: 11px; color: var(--text-3); } /* GDPR cookie banner + captcha */ .cookie-banner { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--space-4); z-index: 200; width: min(920px, calc(100vw - 2 * var(--space-4))); align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border-strong); border-top: 3px solid var(--accent-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .cookie-banner.show { display: flex; } .cookie-text { font-size: 13.5px; color: var(--text-2); max-width: 62ch; } .cookie-text strong { color: var(--text); } .cookie-actions { display: inline-flex; gap: var(--space-2); flex: none; } .cap-field { display: flex; justify-content: center; } cap-widget { --cap-background: var(--surface); --cap-border-color: var(--border-strong); --cap-color: var(--text); --cap-widget-height: 44px; } /* Proper code blocks in lab challenge descriptions + question editor */ .chall-lore pre, .question-desc pre, .qedit pre, .markdown pre { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.5; background: var(--bg-glow); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; margin: 10px 0; } .chall-lore pre code, .question-desc pre code { background: none; padding: 0; font-size: inherit; } .chall-lore code, .question-desc code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; } .chall-lore .ql-syntax, .question-desc .ql-syntax { background: var(--bg-glow); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; } /* Question editor (Quill) */ .qedit { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); margin-bottom: var(--space-5); } .qedit .ql-toolbar { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-color: var(--border-strong); background: var(--surface-2); } .qedit .ql-container { border-radius: 0 0 var(--radius-sm) var(--radius-sm); border-color: var(--border-strong); min-height: 160px; font-family: 'Inter'; font-size: 14px; } .qedit .ql-editor { color: var(--text); } :root[data-theme="dark"] .qedit .ql-snow .ql-stroke { stroke: var(--text-2); } :root[data-theme="dark"] .qedit .ql-snow .ql-fill { fill: var(--text-2); } :root[data-theme="dark"] .qedit .ql-picker { color: var(--text-2); } /* ============================================================================ Challenge HTML: inline code, click-to-expand sections, collapsible hints ============================================================================ */ .chall-lore code-inline, .question-desc code-inline { display: inline; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--accent-1); font-family: 'JetBrains Mono', monospace; font-size: .86em; white-space: nowrap; } /* click-to-expand (checkbox hack — CSS only) */ .chall-lore .expandable, .question-desc .expandable { margin: var(--space-4) 0 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; } .chall-lore .expand-btn, .question-desc .expand-btn { cursor: pointer; display: block; user-select: none; margin: 0; } .chall-lore .expand-btn h3, .question-desc .expand-btn h3 { padding: var(--space-3) var(--space-4); margin: 0; font-size: 13px; font-weight: 600; color: var(--text-2); } .chall-lore .expand-btn:hover h3, .question-desc .expand-btn:hover h3 { background: var(--surface-2); color: var(--text); } .chall-lore .expand-content, .question-desc .expand-content { max-height: 0; overflow: hidden; padding: 0 var(--space-4); transition: max-height .25s ease-out, padding .25s ease; } .chall-lore .toggle-input, .question-desc .toggle-input { display: none; } .chall-lore .toggle-input:checked ~ .expand-content, .question-desc .toggle-input:checked ~ .expand-content { max-height: 2000px; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); } .chall-lore .expand-btn h3::after, .question-desc .expand-btn h3::after { content: ' ▸'; color: var(--text-3); } .chall-lore .toggle-input:checked ~ .expand-btn h3::after, .question-desc .toggle-input:checked ~ .expand-btn h3::after { content: ' ▾'; } /* hint blockquotes: collapsed until clicked (JS wraps the body) */ .chall-lore blockquote, .question-desc blockquote { border: 1px solid var(--border); border-left: 3px solid #f5b301; border-radius: var(--radius-sm); background: var(--surface); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; color: var(--text-2); } blockquote.hint-collapsible { cursor: default; } blockquote.hint-collapsible .hint-reveal { display: inline-block; font-weight: 600; color: #f5b301; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; } blockquote.hint-collapsible .hint-reveal:hover { text-decoration: underline; } blockquote.hint-collapsible:not(.revealed) .hint-body { display: none; } blockquote.hint-collapsible.revealed .hint-body { margin-top: var(--space-2); } /* ============================================================================ Admin tabs + modal editors ============================================================================ */ .tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: var(--space-5) 0 var(--space-6); overflow-x: auto; } .tab-btn { position: relative; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); font-size: 14px; font-weight: 500; padding: 10px 14px; cursor: pointer; white-space: nowrap; } .tab-btn:hover { color: var(--text); } .tab-btn.on { color: var(--accent-1); border-bottom-color: var(--accent-1); } .tab-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; background: var(--accent-2); color: #fff; padding: 1px 7px; border-radius: 999px; } .tab-panel[hidden] { display: none; } .flag-row td { background: color-mix(in srgb, var(--accent-2) 8%, transparent); } /* native modal */ .modal { width: min(560px, 94vw); max-height: 88vh; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); padding: var(--space-6); box-shadow: var(--shadow-lg); } .modal.modal-lg { width: min(820px, 94vw); } .modal::backdrop { background: rgba(4,6,12,.6); backdrop-filter: blur(2px); } .modal h2 { font-size: 20px; margin-bottom: var(--space-4); } .modal .modal-x { position: absolute; } .modal-x { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0 0; } .modal .lab-hints { margin-top: var(--space-4); } tr.is-disabled td { opacity: .55; } /* ============================================================================ "lore" transmission boxes inside challenge HTML ============================================================================ */ .chall-lore .lore, .question-desc .lore { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); line-height: 1.65; font-size: 14px; margin: 0 0 var(--space-4); overflow: visible; } .chall-lore .lore::before, .question-desc .lore::before { content: ""; position: absolute; left: var(--space-4); top: 46px; width: 36px; height: 36px; background: var(--surface-2) url("/static/robot_small.png") no-repeat center/cover; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); z-index: 2; } .chall-lore .lore::after, .question-desc .lore::after { content: "incoming transmission"; position: absolute; top: 0; left: 0; right: 0; padding: var(--space-2) var(--space-4); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); } .chall-lore .lore p, .chall-lore .lore .message-text, .question-desc .lore p, .question-desc .lore .message-text { margin: 0; padding: 46px var(--space-4) var(--space-4) 68px; white-space: normal; font-size: 14px; line-height: 1.65; } .chall-lore .lore .message-text::before, .question-desc .lore .message-text::before { content: "V.E.G.A. \2192 investigator"; display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); margin-bottom: var(--space-2); letter-spacing: .02em; } .chall-lore .lore em, .question-desc .lore em { color: var(--text); font-style: italic; } .chall-lore .lore b, .question-desc .lore b { color: var(--text); font-weight: 500; }