/* ────────────────────────────────────────────────────────────────── QuizX — Shared Design Tokens ────────────────────────────────────────────────────────────────── How to use: → public pages (Nunito, green primary) → authenticated app (Plus Jakarta + Syne, purple primary) → screen / wordcloud-screen (high-contrast for video projectors) This file defines tokens ONLY — no component class collisions. Existing inline page styles continue to win. Pages opt in via the data-theme attr; theme blocks override default :root tokens via higher specificity. ────────────────────────────────────────────────────────────────── */ /* ── Shared structural tokens (theme-independent) ─────────────────── */ :root { /* Radii */ --qx-r-4: 4px; --qx-r-6: 6px; --qx-r-8: 8px; --qx-r-10: 10px; --qx-r-12: 12px; --qx-r-14: 14px; --qx-r-16: 16px; --qx-r-20: 20px; --qx-r-24: 24px; --qx-r-pill: 999px; /* Spacing scale (multiples of 4) */ --qx-s-1: 4px; --qx-s-2: 8px; --qx-s-3: 12px; --qx-s-4: 16px; --qx-s-5: 20px; --qx-s-6: 24px; --qx-s-8: 32px; --qx-s-10: 40px; --qx-s-12: 48px; /* Elevation */ --qx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --qx-shadow-md: 0 8px 24px rgba(0, 0, 0, .35); --qx-shadow-lg: 0 16px 48px rgba(0, 0, 0, .5); /* Motion */ --qx-t-fast: .15s; --qx-t-med: .22s; --qx-t-slow: .35s; /* Z-index scale */ --qx-z-base: 1; --qx-z-sticky: 50; --qx-z-overlay: 90; --qx-z-modal: 100; --qx-z-toast: 150; } /* ── MARKETING theme — public pages (green / Nunito) ──────────────── */ [data-theme="marketing"] { --qx-bg: #0d0d1a; --qx-bg-2: #0f0f20; --qx-surface: #13131f; --qx-surface-2: #1a1a2e; --qx-text: #f0f0ff; --qx-muted: rgba(240, 240, 255, .55); --qx-faint: rgba(240, 240, 255, .22); --qx-border: rgba(255, 255, 255, .08); --qx-border-2: rgba(255, 255, 255, .15); --qx-accent: #46D39A; /* green primary */ --qx-accent-2: #3bbf87; --qx-accent-ink: #0a1a12; /* text colour on green button */ --qx-purple: #a64dff; /* secondary */ --qx-blue: #3EC2FF; --qx-yellow: #FFD700; --qx-red: #ff5c7a; --qx-font: 'Nunito', system-ui, -apple-system, sans-serif; --qx-font-display: 'Nunito', system-ui, -apple-system, sans-serif; } /* ── PRODUCT theme — authenticated app (purple / Cosmic Violet) ──── */ [data-theme="product"] { --qx-bg: #08060f; --qx-bg-2: #0d0b1e; --qx-surface: #0d0b1e; --qx-surface-2: #110d22; --qx-text: #ffffff; --qx-muted: rgba(255, 255, 255, .55); --qx-faint: rgba(255, 255, 255, .28); --qx-border: rgba(168, 85, 247, .12); --qx-border-2: rgba(168, 85, 247, .28); --qx-accent: #7c3aed; /* purple primary */ --qx-accent-2: #a855f7; --qx-accent-ink: #ffffff; --qx-accent-text: #c084fc; /* text-on-dark variant */ --qx-green: #46D39A; --qx-blue: #3EC2FF; --qx-yellow: #eab308; --qx-red: #e21b3c; --qx-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --qx-font-display: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif; } /* ── PROJECTOR theme — high contrast for video projectors / large TVs ── Projectors crush black levels and dilute saturation. Audiences sit far from the screen; small text and low-contrast UI become invisible. This theme inherits the product (purple) identity but: • near-pure-black background (no purple haze on borders) • solid 1.5px borders (no rgba alpha that disappears) • brighter accent for ring/highlight • higher base font weight via display font The actual font-size escalation is the responsibility of the page — tokens here just make sure colours and surfaces project well. ────────────────────────────────────────────────────────────────── */ [data-theme="projector"] { --qx-bg: #050208; --qx-bg-2: #0a0512; --qx-surface: #0f0820; --qx-surface-2: #160a2e; --qx-text: #ffffff; --qx-muted: rgba(255, 255, 255, .75); /* brighter than product */ --qx-faint: rgba(255, 255, 255, .45); --qx-border: rgba(255, 255, 255, .25); /* solid, projector-visible */ --qx-border-2: rgba(255, 255, 255, .55); --qx-accent: #a855f7; /* the brighter of the two purples */ --qx-accent-2: #c084fc; --qx-accent-ink: #ffffff; --qx-accent-text: #d8b4fe; --qx-green: #5deea8; /* bumped saturation */ --qx-blue: #5cd0ff; --qx-yellow: #fde047; --qx-red: #ff4d6b; --qx-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --qx-font-display: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif; } /* ── Optional helper utilities (qx- prefix avoids existing class names) ── */ /* Apply the theme font to a subtree without touching body */ .qx-font { font-family: var(--qx-font); } .qx-font-display { font-family: var(--qx-font-display); } /* Common screen-reader / utility */ .qx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus ring (use sparingly; respects theme accent) */ .qx-focus-ring:focus-visible { outline: 2px solid var(--qx-accent); outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────── App Shell — persistent left-side nav + topbar ────────────────────────────────────────────────────────────────── */ /* Root container — position-based layout. Works correctly even before shell.js runs: content offsets via margin-left, aside is fixed. */ .qx-shell { --qx-shell-w: 232px; min-height: 100vh; background: var(--qx-bg); color: var(--qx-text); font-family: var(--qx-font); } /* Left aside is fixed to the viewport */ .qx-shell-aside { position: fixed; top: 0; left: 0; width: var(--qx-shell-w); height: 100vh; background: var(--qx-bg-2); border-right: 1px solid var(--qx-border); display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; z-index: var(--qx-z-sticky); } .qx-shell-aside::-webkit-scrollbar { width: 4px; } .qx-shell-aside::-webkit-scrollbar-thumb { background: var(--qx-border-2); border-radius: 4px; } /* Logo */ .qx-shell-logo { display: flex; align-items: center; gap: 0; padding: 4px 10px 18px; font-family: var(--qx-font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--qx-text); text-decoration: none; flex-shrink: 0; } /* Brand "X" is the same on every page — it's the logo, not theme accent. */ .qx-shell-logo .qx-shell-logo-mark { background: linear-gradient(90deg, #a855f7, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Nav list */ .qx-shell-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; } .qx-shell-nav-divider { height: 1px; background: var(--qx-border); margin: 10px 6px; flex-shrink: 0; } .qx-shell-nav-section { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--qx-faint); padding: 14px 12px 6px; flex-shrink: 0; } .qx-shell-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--qx-r-10); border: none; background: transparent; color: var(--qx-muted); cursor: pointer; font-size: 13.5px; font-weight: 700; font-family: inherit; text-decoration: none; text-align: left; transition: color var(--qx-t-fast), background var(--qx-t-fast); white-space: nowrap; width: 100%; } .qx-shell-nav-item:hover { color: var(--qx-text); background: rgba(255, 255, 255, .05); } .qx-shell-nav-item.is-active { color: var(--qx-text); background: rgba(168, 85, 247, .14); } [data-theme="marketing"] .qx-shell-nav-item.is-active { background: rgba(70, 211, 154, .12); color: var(--qx-accent); } [data-theme="projector"] .qx-shell-nav-item.is-active { background: rgba(168, 85, 247, .24); } .qx-shell-nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .qx-shell-nav-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; } .qx-shell-nav-badge { margin-left: auto; background: var(--qx-accent); color: var(--qx-accent-ink); font-size: 10px; font-weight: 900; padding: 1px 7px; border-radius: var(--qx-r-pill); } /* User chip at bottom of aside */ .qx-shell-user { flex-shrink: 0; padding-top: 12px; border-top: 1px solid var(--qx-border); margin-top: 8px; position: relative; } .qx-shell-user-chip { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; border-radius: var(--qx-r-10); background: rgba(255, 255, 255, .04); border: 1px solid var(--qx-border); cursor: pointer; transition: background var(--qx-t-fast); width: 100%; font-family: inherit; text-align: left; } .qx-shell-user-chip:hover { background: rgba(255, 255, 255, .08); } .qx-shell-user-avatar { width: 30px; height: 30px; border-radius: var(--qx-r-8); background: linear-gradient(135deg, var(--qx-accent), var(--qx-accent-2, var(--qx-accent))); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: var(--qx-accent-ink); flex-shrink: 0; overflow: hidden; } .qx-shell-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .qx-shell-user-text { flex: 1; min-width: 0; line-height: 1.3; } .qx-shell-user-name { font-size: 13px; font-weight: 800; color: var(--qx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qx-shell-user-plan { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--qx-muted); text-transform: uppercase; } .qx-shell-user-caret { opacity: .35; flex-shrink: 0; transition: transform var(--qx-t-fast); } .qx-shell-user[data-open="1"] .qx-shell-user-caret { transform: rotate(180deg); } /* Dropdown menu that opens upward from the user chip. */ .qx-shell-user-menu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: var(--qx-surface-2, var(--qx-surface)); border: 1px solid var(--qx-border-2); border-radius: var(--qx-r-12); padding: 6px; box-shadow: var(--qx-shadow-lg); display: none; z-index: var(--qx-z-modal); } .qx-shell-user[data-open="1"] .qx-shell-user-menu { display: block; } .qx-shell-user-menu a, .qx-shell-user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--qx-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: var(--qx-r-8); text-align: left; text-decoration: none; } .qx-shell-user-menu a:hover, .qx-shell-user-menu button:hover { background: rgba(255, 255, 255, .07); } .qx-shell-user-menu .qx-shell-user-menu-icon { width: 20px; text-align: center; opacity: .8; font-size: 14px; flex-shrink: 0; } .qx-shell-user-menu hr { border: none; border-top: 1px solid var(--qx-border); margin: 4px 6px; } .qx-shell-user-menu .qx-shell-user-menu-logout { color: #ff5c7a; } /* Main pane — offset from the fixed aside. Same offset applies to .qx-shell-content when it is still a direct child (i.e. before shell.js wraps it in .qx-shell-main). */ .qx-shell-main, .qx-shell > .qx-shell-content { margin-left: var(--qx-shell-w); min-height: 100vh; background: var(--qx-bg); } /* If shell.js fails to mount, fall back to no-offset layout. */ .qx-shell.qx-shell-failed > .qx-shell-content, .qx-shell.qx-shell-failed .qx-shell-main { margin-left: 0; } .qx-shell-main { display: flex; flex-direction: column; min-width: 0; } /* Topbar inside main */ .qx-shell-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--qx-border); background: var(--qx-bg); flex-shrink: 0; min-height: 60px; } .qx-shell-topbar-title { flex: 1; font-family: var(--qx-font-display); font-size: 17px; font-weight: 800; color: var(--qx-text); letter-spacing: -.01em; min-width: 0; } .qx-shell-topbar-search { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--qx-border); border-radius: var(--qx-r-10); padding: 8px 14px; width: 280px; max-width: 32vw; transition: border-color var(--qx-t-fast), background var(--qx-t-fast); } .qx-shell-topbar-search:focus-within { border-color: var(--qx-accent); background: rgba(255, 255, 255, .07); } .qx-shell-topbar-search input { background: none; border: none; outline: none; color: var(--qx-text); font: inherit; font-size: 13px; font-weight: 600; flex: 1; min-width: 0; } .qx-shell-topbar-search input::placeholder { color: var(--qx-faint); } .qx-shell-topbar-search svg { opacity: .45; flex-shrink: 0; stroke: currentColor; fill: none; } /* Main scroll area */ .qx-shell-content { flex: 1; overflow-y: auto; padding: 24px 28px 48px; min-height: 0; } .qx-shell-content::-webkit-scrollbar { width: 6px; } .qx-shell-content::-webkit-scrollbar-thumb { background: var(--qx-border-2); border-radius: 4px; } /* Mobile burger (visible <768px) */ .qx-shell-burger { display: none; background: none; border: none; color: var(--qx-text); padding: 6px; cursor: pointer; flex-shrink: 0; } .qx-shell-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } /* Overlay behind open mobile drawer */ .qx-shell-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: calc(var(--qx-z-sticky) - 1); } /* ── Responsive ── */ @media (max-width: 960px) { .qx-shell-aside { width: 80vw; max-width: 280px; transform: translateX(-100%); transition: transform var(--qx-t-med); box-shadow: var(--qx-shadow-lg); } .qx-shell-aside.is-open { transform: translateX(0); } .qx-shell-main, .qx-shell > .qx-shell-content { margin-left: 0; } .qx-shell-burger { display: inline-flex; align-items: center; } .qx-shell-aside.is-open ~ .qx-shell-overlay { display: block; } .qx-shell-topbar-search { width: 100%; max-width: none; } }