/* =============================
EduPatch — Denim Futurism v3
Dark denim base · patch red accents
Palette drawn from the EduPatch logo
============================= */
/* Fonts are loaded via in each page
(with preconnect hints) so font fetch can run in parallel with HTML parse
instead of blocking CSSOM construction on @import resolution. */
/* ---------- tokens ---------- */
:root{
/* denim ink scale (from logo's blue patch) */
--ink-950: #050b16;
--ink-900: #0a1424;
--ink-850: #0f1d33;
--ink-800: #162942;
--ink-750: #1f3556;
--ink-700: #2a466d;
/* hairline rules */
--line: rgba(228,226,220,.08);
--line-2: rgba(228,226,220,.16);
--line-strong: rgba(228,226,220,.26);
/* v3.1: shifted cream from buttery #efe2c7 to warm-neutral paper #e4e2dc
so the cream stops reading cheerful/childish against denim. */
--cream: #e4e2dc;
--cream-2: #cac7c0;
--cream-dim: rgba(228,226,220,.60);
--stitch: rgba(228,226,220,.38);
/* v3.1: patch red dropped from #d94141 (candy) to #b23c3c (dignified oxblood).
Same hue, deeper saturation — still recognizably the logo red. */
--patch: #b23c3c;
--patch-2: #8f2d2d;
--patch-3: #6b1e1e;
--patch-glow: rgba(178,60,60,.32);
--sun: #c9a14a;
--mint: #6dd3b2;
--cyan: #5bc0eb;
/* type — v3.2 aligns display type with the logo wordmark.
Chewy is a chunky, rounded, hand-drawn display face whose strokes
and terminals echo the lettering in the EduPatch patch badge.
Nunito takes over body copy: a warm humanist sans with rounded
terminals that harmonizes with Chewy without competing. */
--display: 'Chewy', 'Shrikhand', 'Lilita One', system-ui, cursive;
--sans: 'Nunito', 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
/* system */
--radius: 2px;
--radius-lg: 6px;
--shadow-soft: 0 1px 0 rgba(228,226,220,.04), 0 14px 36px -18px rgba(0,0,0,.7);
--shadow-glow: 0 0 0 1px rgba(178,60,60,.35), 0 0 28px -6px var(--patch-glow);
--ring: var(--patch);
/* aliases kept for legacy class hooks */
--bg: var(--ink-900);
--text: var(--cream);
--muted: var(--cream-dim);
--brand: var(--patch);
--brand-600: var(--patch-2);
--brand-700: var(--patch-3);
--danger: var(--patch);
--success: var(--mint);
--warn: var(--sun);
--card: linear-gradient(180deg, var(--ink-850), var(--ink-900));
--panel: var(--ink-850);
}
/* ---------- reset & base ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ height:100%; }
body{
margin:0;
color:var(--cream);
font-family:var(--sans);
font-size:16px;
line-height:1.55;
letter-spacing:-0.003em;
background-color:var(--ink-950);
/* Ambient gradient moved to body::before (fixed layer) to avoid the
iOS Safari scroll-repaint jank of `background-attachment: fixed`. */
position:relative;
overflow-x:hidden;
}
/* futuristic grid overlay — subtle */
/* Ambient gradient layer — fixed, behind grid and content. */
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
/* v3.1: ambient glow dialed down from .18/.10 → .09/.04 and the cyan shifted
toward slate so the gradient reads as atmosphere, not stage lighting. */
background-image:
radial-gradient(900px 620px at 88% -10%, rgba(178,60,60,.09), transparent 58%),
radial-gradient(900px 500px at -10% 110%, rgba(60,90,140,.04), transparent 60%),
linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
}
/* Grid overlay — fixed, painted above the gradient, below content. */
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background-image:
repeating-linear-gradient(to right,
rgba(228,226,220,.03) 0 1px, transparent 1px 96px),
repeating-linear-gradient(to bottom,
rgba(228,226,220,.03) 0 1px, transparent 1px 96px);
mask-image: radial-gradient(1400px 900px at 50% 30%, black, transparent 85%);
-webkit-mask-image: radial-gradient(1400px 900px at 50% 30%, black, transparent 85%);
}
body > *{ position:relative; z-index:1; }
a{ color:inherit; text-decoration:none; }
a:not(.btn):not(.inline):not(.avatar-btn):not(.brand a):hover{
color:var(--patch);
text-decoration:underline;
text-decoration-color:var(--patch);
text-decoration-thickness:1px;
text-underline-offset:4px;
}
button, input, select, textarea{ font:inherit; color:inherit; }
img{ display:block; height:auto; max-width:100%; }
:is(a,button,input,select,textarea,[tabindex]):focus-visible{
outline:1px solid var(--patch);
outline-offset:3px;
box-shadow:0 0 0 4px rgba(178,60,60,.22);
}
/* ---------- typography ---------- */
h1, h2, h3, h4{
font-family:var(--display);
/* Chewy ships only at weight 400 — applying heavier weights would
trigger synthetic bolding (fuzzy). Keep the native weight and let
the chunky strokes do the work. */
font-weight:400;
color:var(--cream);
/* Chewy is already wide with round counters; don't tighten aggressively. */
letter-spacing:-0.005em;
line-height:1.08;
margin:0;
}
h1{
font-size:clamp(2.6rem, 5.8vw, 5rem);
font-weight:400;
letter-spacing:-0.005em;
line-height:1.05;
color:var(--cream);
/* Subtle soft shadow under headlines — echoes the dark outline the
logo wordmark carries, without fully doubling the letterforms. */
text-shadow: 0 2px 0 rgba(5,11,22,.45);
}
h2{
font-size:clamp(1.8rem, 3.3vw, 2.5rem);
font-weight:400;
letter-spacing:-0.002em;
line-height:1.1;
}
h3{ font-size:1.25rem; font-weight:400; letter-spacing:0; line-height:1.15; }
.kicker{
font-family:var(--mono);
font-size:.72rem;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--patch);
display:inline-flex;
align-items:center;
gap:.5rem;
}
.kicker::before{
content:"//";
color:var(--cream-dim);
font-weight:400;
}
.meta{
color:var(--cream-dim);
font-size:.92rem;
line-height:1.55;
}
.meta-sm{ font-size:.82rem; margin:.25rem 0 0; }
.meta-tight{ margin:.5rem 0 0; font-size:1.05rem; color:var(--cream); }
.muted{ color:var(--cream-dim); }
/* ---------- layout ---------- */
.container{ margin-inline:auto; width:min(1120px, 92%); }
.container-narrow{ margin-inline:auto; width:min(720px, 92%); }
.container-wide{ margin-inline:auto; width:min(1320px, 92%); }
.page{ padding:2rem 0 4rem; }
.page-tight{ padding:1.25rem 0; }
.actions{ align-items:center; display:flex; gap:.6rem; flex-wrap:wrap; }
.center{ text-align:center; }
.right{ text-align:right; }
.inline{ align-items:center; display:inline-flex; gap:.55rem; }
.row{
align-items:center;
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:space-between;
}
.section{ padding:1.75rem 0; }
.grid{ display:grid; gap:1.25rem; }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2-wide{ display:block; }
.grid-2-wide > *{ margin-bottom:1rem; }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.stack-gap-sm{ gap:.25rem; }
.stack-gap-xs{ gap:.35rem; }
/* ---------- surfaces ---------- */
.card{
position:relative;
background:var(--card);
border:1px solid var(--line-2);
border-radius:var(--radius-lg);
padding:1.5rem;
box-shadow:var(--shadow-soft);
}
/* HUD corner brackets in cream — v3.1 dialed from .7 → .35 so the
brackets read as a quiet tell-tale rather than a decorative frame. */
.card::before, .card::after{
content:"";
position:absolute;
width:10px; height:10px;
pointer-events:none;
opacity:.35;
}
.card::before{
top:10px; left:10px;
border-top:1px solid var(--cream);
border-left:1px solid var(--cream);
}
.card::after{
bottom:10px; right:10px;
border-bottom:1px solid var(--cream);
border-right:1px solid var(--cream);
}
.card-flat{ box-shadow:none; }
.card-outline{ border-color:var(--line-strong); }
.card-pad-lg{ padding:2rem; }
.card-pad-sm{ padding:1rem; }
.panel{
background:var(--panel);
border:1px solid var(--line-2);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
}
.surface{
background:rgba(228,226,220,.03);
border:1px dashed var(--stitch);
border-radius:var(--radius-lg);
}
/* ---------- buttons ---------- */
.btn{
position:relative;
align-items:center;
display:inline-flex;
justify-content:center;
gap:.5rem;
padding:.9rem 1.3rem;
font-family:var(--mono);
font-size:.78rem;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--cream);
background:transparent;
border:1px solid var(--cream);
border-radius:var(--radius);
cursor:pointer;
transition: all .18s cubic-bezier(.2,.6,.2,1);
}
/* button corner accents appear on hover */
.btn::before, .btn::after{
content:"";
position:absolute;
width:7px; height:7px;
opacity:0;
transition:opacity .15s;
pointer-events:none;
}
.btn::before{
top:-1px; left:-1px;
border-top:2px solid var(--patch);
border-left:2px solid var(--patch);
}
.btn::after{
bottom:-1px; right:-1px;
border-bottom:2px solid var(--patch);
border-right:2px solid var(--patch);
}
.btn:hover::before, .btn:hover::after{ opacity:1; }
.btn-primary{
background:var(--patch);
border-color:var(--patch);
color:var(--cream);
box-shadow:var(--shadow-glow);
}
.btn-primary:hover{
background:var(--patch-2);
border-color:var(--patch);
/* v3.1: glow halved (40px → 18px) so hover reads as lift, not bloom. */
box-shadow:0 0 0 1px var(--patch), 0 0 18px -8px var(--patch-glow);
transform:translateY(-1px);
}
.btn-primary::before, .btn-primary::after{ display:none; }
.btn-ghost{
background:transparent;
border-color:var(--cream);
color:var(--cream);
}
.btn-ghost:hover{
background:rgba(228,226,220,.06);
border-color:var(--cream);
color:var(--cream);
}
.btn-danger{
background:transparent;
border-color:var(--patch);
color:var(--patch);
}
.btn-danger:hover{ background:rgba(178,60,60,.1); }
.btn-small{
font-size:.7rem;
padding:.55rem .85rem;
letter-spacing:.14em;
}
/* ---------- inputs ---------- */
.select-control{
background:rgba(228,226,220,.04);
border:1px solid var(--line-2);
border-radius:var(--radius);
color:var(--cream);
font-family:var(--sans);
font-size:.98rem;
padding:.85rem .95rem;
transition: border-color .15s, box-shadow .15s;
width:100%;
}
.select-control::placeholder{ color:var(--cream-dim); }
.select-control:focus{
outline:none;
border-color:var(--patch);
box-shadow:0 0 0 3px rgba(178,60,60,.22);
}
.select-control:hover:not(:focus){ border-color:var(--line-strong); }
textarea.select-control{ min-height:6rem; resize:vertical; }
/*