/* ═══════════════════════════════════════════════════════════════
AcerAcademy — Shared Design System
Load this on every page for consistent look and feel.
Note: pages that link this file should also add
and
in before this stylesheet, so the Inter font request in the
@import below doesn't wait for this file to finish downloading first.
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
--bg: #060b18;
--surface: #0d1526;
--surface2:#111827;
--border: rgba(255,255,255,.07);
--accent: #818cf8;
--accent2: #6366f1;
--text: #e2e8f0;
/* Muted tones lightened from the original #475569/#64748b so both
comfortably clear WCAG AA (4.5:1) contrast against the dark
background — same slate-blue hue family, just legible. */
--muted: #8a97b0;
--muted2: #a3adc2;
--radius: 14px;
--radius-sm: 10px;
--font: 'Inter', system-ui, sans-serif;
--shadow: 0 4px 24px rgba(0,0,0,.4);
--glow: 0 0 0 1px rgba(129,140,248,.3), 0 4px 20px rgba(99,102,241,.25);
--transition: .18s cubic-bezier(.4,0,.2,1);
--focus-ring: 0 0 0 3px rgba(129,140,248,.35);
color-scheme: dark;
/* ── Design System v2 tokens ──────────────────────────────────
Same canonical names/values as ace-theme.css, so components
built against the v2 system look identical regardless of which
of the two stylesheets a given page happens to load. Legacy
--accent/--accent2 etc. above are left untouched so existing
pages don't visually shift. */
--color-brand-400: #a78bfa;
--color-brand-500: var(--accent2); /* #6366f1 — same brand purple as ace-theme.css */
--color-brand-600: #4f46e5;
--color-surface-1: var(--surface);
--color-surface-2: var(--surface2);
--color-border-v2: rgba(255,255,255,.07);
--color-text-primary: var(--text);
--color-text-secondary: var(--muted2);
--color-text-tertiary: var(--muted);
--text-xs:0.6875rem; --text-sm:0.8125rem; --text-base:0.9375rem; --text-md:1.0625rem;
--text-lg:1.3125rem; --text-xl:1.625rem; --text-2xl:2rem; --text-3xl:2.5rem;
--weight-regular:500; --weight-medium:600; --weight-bold:700; --weight-black:800;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
--space-12:48px; --space-16:64px;
--radius-full: 999px;
--ease-standard: cubic-bezier(.4,0,.2,1);
--ease-emphasized: cubic-bezier(.2,0,0,1);
--duration-fast: 120ms;
--duration-base: 180ms;
--duration-slow: 320ms;
--duration-celebration: 900ms;
--shadow-glow: var(--glow);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
/* Respect the "no images loaded" / responsive-image case so an
accidental ![]()
never overflows its container. */
img, svg { max-width: 100%; display: block; }
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
/* ── Accessibility: visible keyboard focus ──────────────────────
Every interactive element gets a clear, on-brand focus ring when
navigated to via keyboard (mouse/touch clicks stay clean). */
a, button, input, select, textarea, [tabindex] { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Utility for visually-hidden but screen-reader-accessible labels */
.ace-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;
}
/* Skip-to-content link — hidden until focused, then jumps above the header */
.ace-skip-link {
position: absolute;
left: 12px; top: -48px;
background: var(--accent2);
color: #fff;
padding: 10px 16px;
border-radius: 8px;
font-size: .82rem;
font-weight: 700;
text-decoration: none;
z-index: 1000;
transition: top var(--transition);
}
.ace-skip-link:focus { top: 12px; }
/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.ace-btn:hover, .ace-card:hover { transform: none !important; }
}
/* Subtle, opt-in entrance animation for hero/card content */
@keyframes ace-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.ace-fade-in { animation: ace-fade-up .5s cubic-bezier(.4,0,.2,1) both; }
.ace-fade-in-delay-1 { animation-delay: .08s; }
.ace-fade-in-delay-2 { animation-delay: .16s; }
.ace-fade-in-delay-3 { animation-delay: .24s; }
/* ══ HEADER ══════════════════════════════════════════════════ */
.ace-header {
background: rgba(6,11,24,.92);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border);
padding: 0 28px;
display: flex;
align-items: center;
gap: 14px;
height: 62px;
position: sticky;
top: 0;
z-index: 500;
box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.3);
}
@media(max-width:700px) {
.ace-header { padding: 0 14px; gap: 10px; height: 56px; }
}
.ace-brand {
text-decoration: none;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: -.5px;
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 60%, #c084fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
white-space: nowrap;
flex-shrink: 0;
}
.ace-nav-link {
text-decoration: none;
color: var(--muted);
font-size: .82rem;
font-weight: 500;
padding: 5px 10px;
border-radius: 8px;
transition: color var(--transition), background var(--transition);
white-space: nowrap;
}
.ace-nav-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.ace-nav-link.active { color: var(--accent); background: rgba(129,140,248,.1); }
.ace-spacer { flex: 1; }
/* ══ HERO BANNER ════════════════════════════════════════════ */
.ace-hero {
background: linear-gradient(135deg,#060918 0%,#0d1a40 50%,#130a30 100%);
border-bottom: 1px solid var(--border);
padding: 28px 36px 24px;
}
@media(max-width:700px) { .ace-hero { padding: 20px 16px; } }
.ace-hero h1 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.5rem); font-weight: 900; letter-spacing: -.5px; margin-bottom: 6px; line-height: 1.25; }
.ace-hero h1 span { background: linear-gradient(135deg,#818cf8,#c084fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ace-hero p { color: var(--muted2); font-size: .85rem; max-width: 600px; line-height: 1.6; }
/* ══ WRAP ═══════════════════════════════════════════════════ */
.ace-wrap {
max-width: 900px;
margin: 0 auto;
padding: 32px 24px 80px;
}
@media(max-width:700px) { .ace-wrap { padding: 18px 14px 80px; } }
/* ══ CARDS ══════════════════════════════════════════════════ */
.ace-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ace-card:hover { border-color: rgba(129,140,248,.25); }
.ace-card-glow:hover { box-shadow: var(--glow); transform: translateY(-2px); }
/* ══ BUTTONS ════════════════════════════════════════════════ */
.ace-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: var(--accent2);
color: #fff;
border: none;
border-radius: 10px;
padding: 9px 20px;
font-size: .85rem;
font-weight: 700;
font-family: var(--font);
cursor: pointer;
transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
text-decoration: none;
line-height: 1.3;
}
.ace-btn:hover { background: #4f46e5; transform: translateY(-1px); }
.ace-btn:active { transform: translateY(0); }
.ace-btn:disabled,
.ace-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.ace-btn-ghost {
background: transparent;
border: 1px solid var(--border);
color: var(--muted2);
}
.ace-btn-ghost:hover { border-color: var(--accent); color: var(--text); background: rgba(129,140,248,.07); transform: none; }
.ace-btn-sm { padding: 6px 14px; font-size: .78rem; }
/* ══ FORM ELEMENTS ══════════════════════════════════════════ */
.ace-input, .ace-select, .ace-textarea {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
border-radius: 10px;
padding: 9px 14px;
font-size: .85rem;
font-family: var(--font);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
}
.ace-input:focus, .ace-select:focus, .ace-textarea:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.ace-input::placeholder, .ace-textarea::placeholder { color: var(--muted); }
.ace-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
/* ══ LABELS ═════════════════════════════════════════════════ */
.ace-label {
display: block;
font-size: .71rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 6px;
}
/* ══ SECTION HEAD ═══════════════════════════════════════════ */
.ace-section-head {
font-size: .71rem;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.ace-section-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* ══ STAT CARDS ═════════════════════════════════════════════ */
.ace-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; }
.ace-stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
text-align: center;
}
.ace-stat-val { font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: 4px; }
.ace-stat-lbl { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* ══ CHIPS / BADGES ═════════════════════════════════════════ */
.ace-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(129,140,248,.12);
border: 1px solid rgba(129,140,248,.2);
color: var(--accent);
border-radius: 20px;
padding: 4px 12px;
font-size: .74rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.ace-chip:hover, .ace-chip.active {
background: rgba(129,140,248,.25);
border-color: var(--accent);
}
/* ══ EMPTY STATE ════════════════════════════════════════════ */
.ace-empty {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.ace-empty-icon { font-size: 3rem; margin-bottom: 12px; display: block; }
.ace-empty p { font-size: .88rem; line-height: 1.6; }
/* ══ MOBILE ═════════════════════════════════════════════════ */
@media(max-width:700px) {
.ace-hero { padding: 18px 14px; }
.ace-hero h1 { font-size: 1.25rem; }
.ace-stats { grid-template-columns: repeat(2,1fr); }
.ace-card { padding: 16px; }
h1 { font-size: 1.3rem !important; }
h2 { font-size: 1.05rem !important; }
}
/* ══ UTILITY ════════════════════════════════════════════════ */
.ace-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ace-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media(max-width:600px) { .ace-grid-2,.ace-grid-3 { grid-template-columns: 1fr; } }
.ace-flex { display: flex; align-items: center; gap: 12px; }
.ace-mb { margin-bottom: 20px; }
.ace-mt { margin-top: 20px; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.fw-900 { font-weight: 900; }
/* ═══════════════════════════════════════════════════════════════
Core Component Library (Design System v2, Phase 2)
Mirrors the same classes/behavior in ace-theme.css so a component
looks identical no matter which shared stylesheet a page loads.
═══════════════════════════════════════════════════════════════ */
.btn2{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
font-family:var(--font);font-size:var(--text-sm);font-weight:var(--weight-bold);
padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;
border:none;text-decoration:none;line-height:1.3;
transition:background var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.btn2-sm{padding:6px 14px;font-size:var(--text-xs)}
.btn2-primary{background:var(--color-brand-500);color:#fff}
.btn2-primary:hover{background:var(--color-brand-600);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn2-primary:active{transform:translateY(0)}
.btn2-secondary{background:transparent;color:var(--color-text-primary);border:1.5px solid var(--border)}
.btn2-secondary:hover{border-color:var(--color-brand-500);color:var(--color-brand-400)}
.btn2-ghost{background:transparent;color:var(--color-text-secondary);border:none}
.btn2-ghost:hover{background:rgba(255,255,255,.06);color:var(--color-text-primary)}
.btn2:disabled,.btn2[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important}
.card2{
background:var(--color-surface-1);border:1px solid var(--border);
border-radius:var(--radius);padding:var(--space-5);
transition:border-color var(--duration-base) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard),
transform var(--duration-base) var(--ease-standard);
}
.card2-interactive{cursor:pointer}
.card2-interactive:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px);border-color:var(--color-brand-500)}
.badge2{
display:inline-flex;align-items:center;gap:4px;
font-size:var(--text-xs);font-weight:var(--weight-bold);
padding:3px 10px;border-radius:var(--radius-full);
white-space:nowrap;
}
.badge2-brand{background:rgba(129,140,248,.15);color:var(--color-brand-400)}
.badge2-success{background:rgba(52,211,153,.12);color:#34d399}
.badge2-warning{background:rgba(251,191,36,.12);color:#fbbf24}
.badge2-danger{background:rgba(248,113,113,.12);color:#f87171}
.text2-title{font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--color-text-primary);letter-spacing:-.01em}
.text2-page-title{font-size:var(--text-xl);font-weight:var(--weight-black);color:var(--color-text-primary);letter-spacing:-.02em}
.text2-body{font-size:var(--text-base);font-weight:var(--weight-regular);color:var(--color-text-primary);line-height:1.6}
.text2-label{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em}
.text2-meta{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-tertiary)}
.ring2{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ring2 svg{transform:rotate(-90deg)}
.ring2 circle{fill:none;stroke-linecap:round}
.ring2 .ring2-track{stroke:var(--surface2)}
.ring2 .ring2-fill{
stroke:var(--color-brand-500);
transition:stroke-dashoffset var(--duration-slow) var(--ease-emphasized), stroke var(--duration-slow);
}
.ring2[data-tier="low"] .ring2-fill{stroke:#fbbf24}
.ring2[data-tier="high"] .ring2-fill{stroke:#34d399}
.ring2-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:var(--weight-black);color:var(--color-text-primary)}
.empty2{text-align:center;padding:var(--space-12) var(--space-5);color:var(--color-text-tertiary)}
.empty2-icon{font-size:2.4rem;margin-bottom:var(--space-3);display:block;line-height:1}
.empty2-title{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-2)}
.empty2-desc{font-size:var(--text-sm);line-height:1.6;max-width:360px;margin:0 auto var(--space-5)}
@keyframes ring2-celebrate{0%{transform:scale(1)}30%{transform:scale(1.08)}100%{transform:scale(1)}}
.ring2-celebrate{animation:ring2-celebrate var(--duration-celebration) var(--ease-emphasized)}