/* ═══════════════════════════════════════════════════════════════════════ gamification.css — student dashboard + honors wall (GAMIFICATION_UI_SPEC) Loaded AFTER portal.css from base.html. Every class is gx- prefixed to keep the cascade collision-free. All effects are CSS/SVG, one-shot and fill-safe: the non-animated rule is the finished state, keyframes only supply the `from` — so the global reduced-motion kill leaves a complete, static UI. No CDN, no external asset, no JS (CSP: script-src 'self'). ═══════════════════════════════════════════════════════════════════════ */ /* ── §1.1 Metals (the honor channel) — one gold across the product ────── */ :root { --gx-gold-hi: #f0d68a; --gx-gold: #d8b24a; --gx-gold-lo: #a07818; --gx-silver-hi:#e8ecf2; --gx-silver:#b8bcc4; --gx-silver-lo:#7e858f; --gx-bronze-hi:#e8b984; --gx-bronze:#c08a4a; --gx-bronze-lo:#8a5a2a; --gx-parchment:#f6efdc; --gx-navy:#11182d; /* §1.3 component tokens */ --gx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gx-fill-dur: 900ms; --gx-draw-dur: 1000ms; --gx-seal-dur: 1200ms; --gx-track: color-mix(in srgb, var(--accent) 12%, transparent); } /* ── §1.2 Per-program palette (identity channel; entity-stable, never rank) */ [data-program="msc-applied-ai-systems"] { --prog:#6f4fd0; --prog-bright:#9d8cf0; } [data-program="lynx-cortex-advanced-ai"] { --prog:#4f36a8; --prog-bright:#9d8cf0; } [data-program="lynx-cortex-security"] { --prog:#b03040; --prog-bright:#e06a78; } [data-program="lynx-cortex-advanced-security"] { --prog:#8a2432; --prog-bright:#e06a78; } [data-program="lynx-cortex-networking"] { --prog:#0f7f8f; --prog-bright:#4fb3c1; } [data-program="lynx-cortex-advanced-networking"] { --prog:#0b5b66; --prog-bright:#4fb3c1; } [data-program="lynx-cortex-crypto"] { --prog:#2f5fbf; --prog-bright:#7d9ff0; } [data-program="lynx-cortex-advanced-crypto"] { --prog:#1f4390; --prog-bright:#7d9ff0; } [data-program="lynx-cortex-python"] { --prog:#2f7d4f; --prog-bright:#62b98a; } [data-program="lynx-cortex-advanced-python"] { --prog:#1f5c3a; --prog-bright:#62b98a; } [data-program="lynx-cortex-hardware"] { --prog:#b45a1e; --prog-bright:#e08a4e; } [data-program="lynx-cortex-advanced-hardware"] { --prog:#8a4415; --prog-bright:#e08a4e; } [data-program="lynx-cortex-automation"] { --prog:#8a4a7d; --prog-bright:#c583b4; } [data-program="lynx-cortex-advanced-automation"] { --prog:#6a3760; --prog-bright:#c583b4; } /* ── §1.4 Theme discipline (the portal stamps data-theme on ) ────── */ :root[data-theme="light"] { --gx-crest-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); --gx-glyph-ink: #ffffff; } :root[data-theme="dark"] { --gx-crest-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); --gx-glyph-ink: var(--gx-parchment); } /* ── a11y utility (§8.5): visually-hidden live region for ceremonies ───── */ .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; } /* ── §3-A Header row: level lozenge · XP bar · epithet chips ───────────── */ .gx-header { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .gx-header .gx-xp { flex: 1 1 260px; min-width: 220px; } .gx-chips { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .gx-more { font-size: 0.78rem; } /* ── §2.2 The level badge (heraldic lozenge, ring metal by band) ───────── */ .gx-level { display: inline-flex; align-items: center; gap: 12px; } .gx-level-lozenge { position: relative; width: 48px; height: 48px; display: grid; place-items: center; } .gx-level-lozenge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .gx-lozenge-field { fill: var(--bg-elev); stroke: var(--border); stroke-width: 1; } .gx-lozenge-ring { fill: none; stroke: var(--gx-ring-metal, var(--gx-bronze)); stroke-width: 2.5; } .gx-level[data-band="1"], .gx-level[data-band="2"] { --gx-ring-metal: var(--gx-bronze); } .gx-level[data-band="3"], .gx-level[data-band="4"] { --gx-ring-metal: var(--gx-silver); } .gx-level[data-band="5"], .gx-level[data-band="6"], .gx-level[data-band="7"] { --gx-ring-metal: var(--gx-gold); } .gx-level[data-band="7"] .gx-level-lozenge { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gx-gold) 45%, transparent)); } .gx-level-num { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--fg); } .gx-level-meta { display: flex; flex-direction: column; line-height: 1.25; } .gx-level-label { font-weight: 650; color: var(--fg); } .gx-level-band { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .gx-level-band .gx-glyph { width: 14px; height: 14px; color: var(--gx-ring-metal, var(--gx-bronze)); } /* ── §2.3 XP progress bar (M1: grow + one-shot sheen; fill-safe) ───────── */ .gx-xp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 6px; font-size: 0.82rem; } .gx-xp-label { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .gx-xp-val { color: var(--fg); font-variant-numeric: tabular-nums; } .gx-xp-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--gx-track); overflow: hidden; } .gx-xp-fill { position: absolute; inset: 0 auto 0 0; width: var(--xp-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); animation: gx-xp-grow var(--gx-fill-dur) var(--gx-ease) both; } @keyframes gx-xp-grow { from { width: 0; } } /* finished state lives in the rule */ .gx-xp-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); transform: translateX(-100%); animation: gx-sheen 700ms ease-out var(--gx-fill-dur) 1 both; } @keyframes gx-sheen { to { transform: translateX(100%); } } /* ── §2.4 Level-up moment (M2: one-shot, ceremonial, ≤ 1.6s, no loop) ──── */ .gx-level-up .gx-lozenge-ring { stroke-dasharray: 1; animation: boot-draw 900ms var(--gx-ease) both; } .gx-level-up .gx-level-lozenge::before { content: ""; position: absolute; inset: -6px; border-radius: 12px; border: 2px solid var(--gx-gold); transform: rotate(45deg) scale(0.6); opacity: 0; animation: gx-ring-burst 1100ms var(--gx-ease) 200ms 1 both; } @keyframes gx-ring-burst { 0% { transform: rotate(45deg) scale(0.6); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: rotate(45deg) scale(1.5); opacity: 0; } } .gx-level-up .gx-level-band { animation: about-reveal 620ms var(--gx-ease) 500ms both; } /* ── §3 Dashboard layout ───────────────────────────────────────────────── */ .gx-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); align-items: start; } @media (max-width: 720px) { .gx-two-col { grid-template-columns: 1fr; } } .gx-two-col > .card:only-child { grid-column: 1 / -1; } .gx-crest-strip { display: flex; gap: var(--space); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; } .gx-crest-strip > * { scroll-snap-align: start; flex: none; } /* ── §4.5 Crest card ───────────────────────────────────────────────────── */ .gx-crest { margin: 0; text-align: center; width: 132px; } .gx-crest .gx-crest-svg { width: 100%; height: auto; } .gx-crest-strip .gx-crest { width: 96px; } .gx-crest[data-state="earned"] .gx-crest-svg { filter: drop-shadow(var(--gx-crest-shadow)); } .gx-crest[data-state="locked"] { opacity: 0.55; } .gx-crest-name { display: block; font-weight: 650; font-size: 0.86rem; color: var(--fg); margin-top: 4px; } .gx-crest-honor { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--muted); font-style: italic; } .gx-metal-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border); flex: none; } .gx-metal-gold { background: linear-gradient(135deg, var(--gx-gold-hi), var(--gx-gold-lo)); } .gx-metal-silver { background: linear-gradient(135deg, var(--gx-silver-hi), var(--gx-silver-lo)); } .gx-metal-bronze { background: linear-gradient(135deg, var(--gx-bronze-hi), var(--gx-bronze-lo)); } .gx-crest svg { transition: transform var(--transition); } .gx-crest:hover svg { transform: translateY(-2px); } /* M3 — crest draw-in on the honors wall's first paint (fill-safe: the metal frame carries pathLength="1"; killed animation leaves dashoffset at 0). */ .gx-wall-draw .gx-crest[data-state="earned"] .gx-crest-svg path[pathLength] { stroke-dasharray: 1; animation: boot-draw var(--gx-draw-dur) var(--gx-ease) both; } .gx-wall-draw .gx-crest { animation: about-reveal 620ms var(--gx-ease) both; } /* ── §6 The wall grid ──────────────────────────────────────────────────── */ .gx-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-md); justify-items: center; } /* ── §6.1 Phase medallions (row doubles as a completion map) ───────────── */ .gx-medal-group { margin-bottom: var(--space-md); } .gx-medal-title { margin: 0 0 6px; font-weight: 650; font-size: 0.9rem; } .gx-medal-row { display: flex; flex-wrap: wrap; gap: 6px; } .gx-medal-coin { display: inline-grid; place-items: center; } .gx-medal-legend { margin-top: var(--space-sm); } /* ── §6.2 Tier seals (wax roundels; program hue = wax color) ───────────── */ .gx-seal-row { display: flex; flex-wrap: wrap; gap: var(--space); } .gx-seal { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-width: 92px; text-align: center; } .gx-seal:not(.is-earned) { opacity: 0.6; } .gx-seal-label { font-size: 0.68rem; color: var(--muted); line-height: 1.3; } .gx-seal-count { margin: var(--space-sm) 0 0; } /* M4 — seal-strike (one-shot press-in + a single rim light-sweep). */ .gx-seal.is-new svg { animation: gx-seal-pop 500ms var(--gx-ease) both; } @keyframes gx-seal-pop { 0% { transform: scale(0.7); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } } .gx-seal.is-new { position: relative; } .gx-seal.is-new::after { content: ""; position: absolute; top: 0; left: 50%; width: 56px; height: 56px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.5) 78%, transparent 86%); animation: gx-seal-sweep var(--gx-seal-dur) ease-out 500ms 1 both; } @keyframes gx-seal-sweep { from { transform: translateX(-50%) rotate(0turn); opacity: 1; } to { transform: translateX(-50%) rotate(1turn); opacity: 0; } } /* ── §6.3 Streak ribbons (SVG chips + worded captions) ─────────────────── */ .gx-ribbon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .gx-ribbon-item { display: flex; align-items: center; gap: var(--space); flex-wrap: wrap; } .gx-ribbon-item svg { flex: none; } /* ── §6.4 Combo epithet banners (pennon chips; navy field, gold border) ── */ .gx-epithet { display: inline-block; padding: 4px 14px 4px 12px; background: var(--gx-navy); color: var(--gx-gold-hi); border: 1px solid var(--gx-gold-lo); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.06em; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); } :root[data-theme="light"] .gx-epithet { background: #1c2540; } /* keep ≥4.5:1 */ .gx-candidacy { font-style: italic; } /* ── §3-E Recent awards ────────────────────────────────────────────────── */ .gx-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .gx-award { display: flex; align-items: center; gap: var(--space-sm); } .gx-award-mark { display: inline-grid; place-items: center; flex: none; } .gx-award-label { font-size: 0.85rem; color: var(--fg); } /* ── §5 Credential cards ───────────────────────────────────────────────── */ .gx-cred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space); align-items: start; } .gx-credential { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); padding: var(--space-md); border-top: 3px solid var(--gx-gold); box-shadow: var(--shadow-sm); max-width: 420px; } .gx-cred-rung { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .gx-cred-title { margin: 2px 0 0; font-size: 1.2rem; } .gx-cred-honorific { margin: 2px 0 0; font-style: italic; color: var(--gx-gold-lo); } :root[data-theme="dark"] .gx-cred-honorific { color: var(--gx-gold-hi); } .gx-cred-motto { margin: 0; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .gx-cred-clause { font-size: 0.76rem; color: var(--muted); line-height: 1.5; border-left: 2px solid var(--border); padding-left: 10px; margin: var(--space) 0; } .gx-cred-verify { display: flex; align-items: center; gap: 12px; } .gx-cred-qr svg { width: 64px; height: 64px; border-radius: 4px; background: #fff; /* QR quiet zone must stay white in both themes */ padding: 4px; } .gx-cred-verify-meta { display: flex; flex-direction: column; gap: 2px; } /* Apex (#7, Doctor Praesidii): quiet dignity — gold gradient rule + glow only. */ .gx-cred-apex { border-top-color: transparent; border-image: linear-gradient(90deg, var(--gx-gold-hi), var(--gx-gold-lo)) 1; border-top-width: 3px; border-top-style: solid; } .gx-cred-apex .gx-cred-honorific { text-shadow: 0 0 8px color-mix(in srgb, var(--gx-gold) 45%, transparent); } /* ── Quiet-start empty wall (§6.5) ─────────────────────────────────────── */ .gx-quiet-start { border-left: 3px solid var(--gx-gold-lo); } /* ── Reduced motion (M-table §7): the global portal.css kill switch already zeroes every animation/transition; this explicit block restates the contract for the gx- surfaces so the finished states are guaranteed even if these components are ever exported standalone. ──────────────────────── */ @media (prefers-reduced-motion: reduce) { .gx-xp-fill, .gx-xp-fill::after, .gx-level-up .gx-lozenge-ring, .gx-level-up .gx-level-lozenge::before, .gx-level-up .gx-level-band, .gx-seal.is-new svg, .gx-seal.is-new::after, .gx-wall-draw .gx-crest, .gx-wall-draw .gx-crest[data-state="earned"] .gx-crest-svg path[pathLength] { animation: none !important; } .gx-crest svg { transition: none !important; } .gx-crest:hover svg { transform: none; } .gx-badge { transition: none !important; } .gx-badge:hover .gx-badge-img { transform: none; } } /* ── P2 Modern badge collection (plan §5.2) ────────────────────────────── */ /* Header title cluster: role badge sits beside the page heading. */ .page-header-title { display: flex; align-items: center; gap: 0.9rem; } .page-header-title > div { min-width: 0; } .gx-role-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0.55rem 0.2rem 0.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elev); } .gx-role-badge-img { width: 34px; height: 34px; display: block; flex: none; } .gx-role-badge-label { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .gx-badge-wall { display: grid; gap: var(--space-md); } .gx-badge-group { } .gx-badge-group-head { margin: 0 0 0.5rem; font-weight: 650; font-size: 0.9rem; } .gx-badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-md); justify-items: center; } /* Dashboard compact strip: horizontal, scrollable, earned badges only. */ .gx-badge-strip { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-start; } .gx-badge { margin: 0; text-align: center; width: 96px; transition: transform var(--transition); } .gx-badge-img, .gx-badge-svg svg { width: 72px; height: 72px; display: block; margin: 0 auto; } .gx-badge[data-earned="true"] .gx-badge-img { filter: drop-shadow(var(--gx-crest-shadow)); } .gx-badge:hover .gx-badge-img { transform: translateY(-2px); } /* Locked silhouette: SAME raster, greyed + dimmed (plan §5.2). */ .gx-badge.is-locked .gx-badge-img, .gx-badge.is-locked .gx-badge-svg { filter: grayscale(1) brightness(0.55) opacity(0.6); } .gx-badge-label { display: block; margin-top: 5px; font-size: 0.78rem; font-weight: 600; color: var(--fg); } .gx-badge.is-locked .gx-badge-label { color: var(--muted); font-weight: 500; } /* ── P2 Modern grade scheme (plan §3.1 src-7) ──────────────────────────── */ .gx-grade-legend { list-style: none; margin: 0.6rem 0 0.4rem; padding: 0; display: grid; gap: 0.4rem; } .gx-grade-legend-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.25rem 0; } .gx-grade-legend-name { min-width: 8.5rem; font-size: 0.82rem; font-weight: 600; color: var(--fg); } .grade-gems-modern { gap: 4px; } .grade-gems-modern .gg-hex { width: 26px; height: 26px; display: block; } .grade-gems-modern.gg-sm .gg-hex { width: 18px; height: 18px; } .grade-gems-modern.gg-lg .gg-hex { width: 34px; height: 34px; }