/* ================================================================
redesign.css — RoboCAD Academy 2026 visual rebuild.
Loaded LAST so it owns the cascade.
Direction: editorial / drafting-sheet. Warm paper, deep ink,
confident cobalt, signature coral. Fraunces (display) +
Inter (body) + JetBrains Mono (technical metadata). Big tabular
numbers, dimension-line dividers, sheet title blocks, blueprint
dot grid. Built to feel like a printed engineering handbook,
not a SaaS landing page.
================================================================ */
/* Fonts are loaded via a non-blocking in each page (incl. Fraunces).
The render-blocking @import that used to live here was removed for faster first paint. */
/* ---------- 1. Tokens ---------- */
:root,
body,
body.light-theme {
--rc-paper: #F5F1E6;
--rc-paper-soft: #FAF7EE;
--rc-paper-deep: #ECE6D4;
--rc-card: #FFFFFF;
--rc-card-soft: #FBF9F2;
--rc-ink: #0F1419;
--rc-ink-soft: #2A323D;
--rc-mute: #5B6470;
--rc-mute-soft: #8A929C;
--rc-rule: #1A1F2A;
--rc-rule-soft: #D9D2BE;
--rc-rule-faint: #E7E1CE;
--rc-cobalt: #1C5DCF;
--rc-cobalt-deep: #0E3F95;
--rc-cobalt-tint: rgba(28, 93, 207, 0.10);
--rc-coral: #D9583B;
--rc-coral-deep: #B33F25;
--rc-coral-tint: rgba(217, 88, 59, 0.12);
--rc-amber: #C58A1F;
--rc-green: #2E7D49;
--rc-graphite: #6A6F77;
--rc-display: "Fraunces", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
--rc-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--rc-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
--bg: var(--rc-paper);
--bg-card: var(--rc-card);
--bg-card-hover: var(--rc-card-soft);
--surface: rgba(15, 20, 25, 0.04);
--surface-1: rgba(15, 20, 25, 0.025);
--surface-2: rgba(15, 20, 25, 0.05);
--surface-3: rgba(15, 20, 25, 0.08);
--border: var(--rc-rule-soft);
--border-strong: var(--rc-rule);
--text: var(--rc-ink);
--text-muted: var(--rc-mute);
--accent: var(--rc-cobalt);
--accent-hover: var(--rc-cobalt-deep);
--accent-glow: var(--rc-cobalt-tint);
--accent-dim: rgba(28, 93, 207, 0.06);
--green: var(--rc-green);
--green-bg: rgba(46, 125, 73, 0.08);
--red: var(--rc-coral-deep);
--red-bg: var(--rc-coral-tint);
--yellow: var(--rc-amber);
--info: var(--rc-cobalt);
--info-bg: var(--rc-cobalt-tint);
--phase-1: var(--rc-cobalt);
--phase-2: #1F7A50;
--phase-3: var(--rc-amber);
--phase-4: var(--rc-coral);
--phase-5: #5A3FA0;
--radius: 6px;
--radius-sm: 4px;
--font: var(--rc-sans);
--font-mono: var(--rc-mono);
--shadow-sm: 0 1px 0 rgba(15,20,25,0.06);
--shadow-md: 0 1px 0 rgba(15,20,25,0.06), 0 8px 24px -12px rgba(15,20,25,0.18);
--shadow-lg: 0 1px 0 rgba(15,20,25,0.06), 0 22px 48px -22px rgba(15,20,25,0.28);
}
/* ---------- 2. Page foundation ---------- */
html { scroll-behavior: smooth; font-size: 16px; }
body,
body.light-theme {
background: var(--rc-paper);
background-image: radial-gradient(circle at 1px 1px, rgba(15,20,25,0.07) 1px, transparent 1.5px);
background-size: 28px 28px;
background-attachment: fixed;
color: var(--rc-ink);
font-family: var(--rc-sans);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
body::after, body.light-theme::after { display: none !important; }
::selection { background: var(--rc-ink); color: var(--rc-paper); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (min-width: 1400px) { .container { max-width: 1240px; } }
/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5,
.section-title, .phase-title,
.module-page-header h1, .hero-content h1 {
font-family: var(--rc-display);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--rc-ink);
line-height: 1.04;
font-variation-settings: "opsz" 120, "SOFT" 30;
}
h1, .hero-content h1, .module-page-header h1 {
font-size: clamp(2.4rem, 5.4vw, 4.2rem);
font-weight: 500;
}
h2, .section-title {
font-size: clamp(1.9rem, 3.4vw, 2.8rem);
font-weight: 500;
line-height: 1.08;
}
h3, .phase-title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.15rem; }
p, .module-desc, .phase-desc {
font-family: var(--rc-sans);
color: var(--rc-ink-soft);
line-height: 1.65;
}
.section-title { text-align: left; margin-bottom: 12px; }
a { color: var(--rc-cobalt); text-decoration-color: var(--rc-rule-soft); text-underline-offset: 3px; }
a:hover { color: var(--rc-cobalt-deep); text-decoration-color: currentColor; }
code, kbd, .module-number, .module-time, .module-tag, .phase-number, .stat-card-value {
font-family: var(--rc-mono);
font-feature-settings: "tnum", "zero";
}
kbd {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-bottom-width: 2px;
padding: 1px 6px;
border-radius: 4px;
font-size: 0.82em;
color: var(--rc-ink);
box-shadow: none;
}
/* ---------- 4. Navbar ---------- */
#navbar, nav#navbar {
background: rgba(245, 241, 230, 0.85);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--rc-rule);
box-shadow: none;
position: sticky;
top: 0;
z-index: 50;
}
#navbar .nav-container {
max-width: 1240px;
margin: 0 auto;
padding: 14px 28px;
display: flex;
align-items: center;
gap: 18px;
}
#navbar .nav-logo {
font-family: var(--rc-display);
font-weight: 600;
font-variation-settings: "opsz" 144, "SOFT" 30;
font-size: 1.32rem;
letter-spacing: -0.02em;
color: var(--rc-ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
#navbar .nav-logo::before {
content: "";
width: 24px; height: 24px;
background:
linear-gradient(var(--rc-ink), var(--rc-ink)) center / 24px 1px no-repeat,
linear-gradient(var(--rc-ink), var(--rc-ink)) center / 1px 24px no-repeat,
linear-gradient(var(--rc-coral), var(--rc-coral)) center / 8px 8px no-repeat;
border: 1px solid var(--rc-ink);
border-radius: 2px;
flex-shrink: 0;
}
#navbar .nav-links {
list-style: none;
margin-left: auto;
display: flex;
align-items: center;
gap: 4px;
padding: 0;
}
#navbar .nav-links a {
font-family: var(--rc-sans);
font-size: 0.93rem;
font-weight: 500;
color: var(--rc-ink-soft);
text-decoration: none;
padding: 8px 14px;
border-radius: 4px;
transition: color 120ms ease, background-color 120ms ease;
}
#navbar .nav-links a:hover { color: var(--rc-ink); background: rgba(15,20,25,0.05); }
#navbar .nav-links a.active { color: var(--rc-ink); background: rgba(15,20,25,0.08); }
#navbar .nav-cmdk {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
padding: 6px 10px 6px 12px;
font-family: var(--rc-sans);
font-size: 0.82rem;
color: var(--rc-mute);
cursor: pointer;
}
#navbar .nav-cmdk:hover { border-color: var(--rc-ink); background: var(--rc-card-soft); color: var(--rc-ink); }
#navbar .nav-cmdk-keys { display: inline-flex; gap: 2px; }
#navbar .nav-cmdk-keys kbd {
background: transparent; border: 1px solid var(--rc-rule-soft);
color: var(--rc-mute); padding: 0 5px; font-size: 0.7rem;
border-bottom-width: 1px;
}
#navbar .nav-auth-btn,
#navbar a.nav-auth-btn {
background: var(--rc-ink);
color: var(--rc-paper-soft) !important;
padding: 9px 16px;
border-radius: 4px;
font-weight: 600;
}
#navbar .nav-auth-btn:hover { background: var(--rc-cobalt-deep); }
#navbar .nav-user-avatar {
background: var(--rc-cobalt);
color: var(--rc-paper);
font-weight: 700;
border-radius: 4px;
}
#navbar .role-badge {
background: var(--rc-rule-faint);
color: var(--rc-ink);
border: 1px solid var(--rc-rule-soft);
font-family: var(--rc-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
}
#navbar .role-badge.teacher { background: var(--rc-coral); color: var(--rc-paper); border-color: var(--rc-coral-deep); }
/* ---------- 5. Hero ---------- */
#hero {
background: transparent;
padding: 72px 28px 56px;
border-bottom: 1px solid var(--rc-rule);
position: relative;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 56px;
align-items: center;
max-width: 1240px;
margin: 0 auto;
}
#hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, var(--rc-rule) 1px, transparent 1px),
linear-gradient(to bottom, var(--rc-rule) 1px, transparent 1px);
background-size: 80px 80px;
background-position: -1px -1px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.10), transparent 65%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.10), transparent 65%);
opacity: 0.7;
}
#hero > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
#hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px 40px; }
}
#hero .hero-content { max-width: 620px; }
#hero .hero-content h1 {
margin: 18px 0 18px;
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
#hero .hero-content h1 em,
#hero .hero-content h1 .accent {
font-style: italic;
font-weight: 400;
color: var(--rc-coral-deep);
font-variation-settings: "opsz" 144, "SOFT" 100;
}
#hero .hero-subtitle {
font-size: 1.12rem;
color: var(--rc-ink-soft);
line-height: 1.6;
max-width: 56ch;
margin-bottom: 28px;
}
#hero .eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--rc-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rc-mute);
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
#hero .eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--rc-coral);
}
#hero .hero-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
#hero .hero-visual {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
box-shadow: var(--shadow-md);
padding: 18px 18px 0;
position: relative;
overflow: hidden;
}
#hero .hero-visual::before {
content: "";
position: absolute;
inset: 8px;
border: 1px dashed var(--rc-rule-soft);
border-radius: 2px;
pointer-events: none;
}
#hero .hero-visual model-viewer {
width: 100% !important;
max-width: 460px;
height: 380px !important;
margin: 0 auto;
display: block;
--poster-color: transparent;
background: transparent !important;
}
#hero .hero-visual::after {
content: "SHEET 00 / 21 · YONKITCAT · REV 3 · 2026";
display: block;
border-top: 1px solid var(--rc-rule);
margin: 12px -18px -1px;
padding: 10px 18px;
font-family: var(--rc-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
color: var(--rc-mute);
background: var(--rc-card-soft);
text-transform: uppercase;
font-weight: 600;
}
/* Buttons */
.btn, a.btn {
font-family: var(--rc-sans);
font-weight: 600;
font-size: 0.95rem;
border-radius: 4px;
padding: 12px 20px;
border: 1px solid transparent;
transition: transform 80ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary, a.btn-primary {
background: var(--rc-ink); color: var(--rc-paper); border-color: var(--rc-ink);
}
.btn-primary:hover, a.btn-primary:hover {
background: var(--rc-cobalt); border-color: var(--rc-cobalt); color: var(--rc-paper);
}
.btn-ghost, a.btn-ghost {
background: transparent; color: var(--rc-ink); border-color: var(--rc-rule);
}
.btn-ghost:hover, a.btn-ghost:hover { background: var(--rc-card); border-color: var(--rc-ink); }
.btn-outline, a.btn-outline {
background: transparent; color: var(--rc-ink); border-color: var(--rc-rule);
padding: 9px 14px; font-size: 0.88rem;
}
.btn-outline:hover { background: var(--rc-ink); color: var(--rc-paper); border-color: var(--rc-ink); }
/* ---------- 6. Stats strip ---------- */
#stats-tracker { padding: 0; background: transparent !important; }
#stats-tracker .container { padding: 0 28px; }
#stats-tracker .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
overflow: hidden;
margin: -32px 0 0;
position: relative;
z-index: 2;
}
@media (max-width: 720px) {
#stats-tracker .stats-grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
}
#stats-tracker .stat-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 14px;
padding: 18px 20px;
background: transparent !important;
border: 0;
border-right: 1px solid var(--rc-rule-soft);
box-shadow: none !important;
border-radius: 0;
position: relative;
}
#stats-tracker .stat-card:last-child { border-right: 0; }
@media (max-width: 720px) {
#stats-tracker .stat-card:nth-child(2n) { border-right: 0; }
#stats-tracker .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--rc-rule-soft); }
}
#stats-tracker .stat-card-icon {
width: 36px; height: 36px;
border: 1px solid var(--rc-rule);
border-radius: 2px;
display: grid; place-items: center;
color: var(--rc-ink);
background: var(--rc-paper-soft);
}
#stats-tracker .stat-card-icon svg { width: 18px; height: 18px; }
#stats-tracker .stat-card-content { display: flex; flex-direction: column; gap: 2px; }
#stats-tracker .stat-card-value {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 144;
font-size: 1.85rem;
color: var(--rc-ink);
letter-spacing: -0.02em;
line-height: 1;
}
#stats-tracker .stat-card-total,
#stats-tracker .stat-card-unit {
font-family: var(--rc-mono);
font-size: 0.85rem;
color: var(--rc-mute);
font-weight: 500;
margin-left: 4px;
}
#stats-tracker .stat-card-label {
font-family: var(--rc-mono);
font-size: 0.64rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
font-weight: 600;
margin-top: 6px;
}
/* ---------- 7. Progress bar ---------- */
#progress-bar { padding: 30px 0 0; background: transparent !important; }
#progress-bar .progress-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 10px;
}
#progress-bar h3 {
font-family: var(--rc-mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
font-weight: 700;
text-transform: uppercase;
color: var(--rc-mute);
}
#progress-bar #progress-text {
font-family: var(--rc-mono);
font-size: 0.85rem;
color: var(--rc-ink);
font-weight: 600;
}
#progress-bar .progress-track {
background: var(--rc-rule-faint);
height: 6px;
border-radius: 0;
overflow: hidden;
position: relative;
}
#progress-bar .progress-fill {
height: 100%;
background: var(--rc-ink);
transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---------- 8. Modules ---------- */
#modules { padding: 80px 0 64px; background: transparent !important; counter-reset: phase; }
#modules .section-title {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
}
#modules .section-title::before {
content: "§ 01 THE SYLLABUS";
display: block;
font-family: var(--rc-mono);
font-size: 0.72rem;
color: var(--rc-mute);
letter-spacing: 0.2em;
font-weight: 600;
margin-bottom: 14px;
text-transform: uppercase;
}
.author-note {
border-left: 2px solid var(--rc-coral);
background: var(--rc-card-soft);
border-radius: 0 4px 4px 0;
padding: 18px 22px;
margin: 26px 0 56px;
max-width: 720px;
font-size: 1.02rem;
color: var(--rc-ink-soft);
line-height: 1.65;
font-style: italic;
font-family: var(--rc-display);
font-weight: 400;
font-variation-settings: "opsz" 14, "SOFT" 50;
}
.author-note .by {
display: block;
margin-top: 8px;
font-style: normal;
font-family: var(--rc-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
font-weight: 600;
}
.phase-group {
position: relative;
padding: 36px 0 8px;
border-top: 1px solid var(--rc-rule);
margin-top: 36px;
counter-increment: phase;
}
.phase-group:first-of-type { border-top: 0; padding-top: 8px; margin-top: 0; }
.phase-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: 28px;
margin-bottom: 36px;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
}
.phase-header::before,
.phase-header[data-glyph]::before { display: none !important; content: none !important; }
.phase-header .phase-number {
grid-row: 1 / span 2;
grid-column: 1;
font-family: var(--rc-display);
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 30;
font-size: clamp(4.5rem, 9vw, 7.5rem);
line-height: 0.86;
letter-spacing: -0.04em;
color: transparent;
background: transparent;
padding: 0;
border: 0;
margin: 0;
text-transform: none;
align-self: end;
position: relative;
}
.phase-header .phase-number::before {
content: counter(phase, decimal-leading-zero);
color: var(--rc-ink);
display: block;
}
.phase-header .phase-number::after {
content: "";
position: absolute;
left: 0; right: 28%; bottom: 0; height: 3px;
background: var(--rc-coral);
}
.phase-header .phase-title {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 96, "SOFT" 40;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.1;
color: var(--rc-ink);
margin: 0;
grid-row: 1;
grid-column: 2;
}
.phase-header .phase-desc {
grid-row: 2;
grid-column: 2;
color: var(--rc-mute);
font-size: 0.98rem;
margin: 6px 0 0;
}
.phase-header::after {
content: "PHASE " counter(phase) " / 5";
grid-row: 1 / span 2;
grid-column: 3;
align-self: end;
font-family: var(--rc-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
border: 1px solid var(--rc-rule);
border-radius: 2px;
padding: 6px 10px;
background: var(--rc-card);
white-space: nowrap;
}
/* ---------- Module cards ---------- */
.modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
background: var(--rc-rule-soft);
border: 1px solid var(--rc-rule);
border-radius: 4px;
overflow: hidden;
}
@media (max-width: 980px) {
.modules-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.modules-grid { grid-template-columns: 1fr; }
}
.module-card-link {
text-decoration: none;
color: inherit;
display: block;
background: var(--rc-card);
transition: background 140ms ease;
}
.module-card-link:hover { background: var(--rc-card-soft); }
.module-card-link:hover .module-card-btn {
background: var(--rc-ink); color: var(--rc-paper); border-color: var(--rc-ink);
}
.module-card {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 22px 22px 20px;
box-shadow: none !important;
display: grid;
grid-template-rows: auto auto 1fr auto auto;
gap: 10px;
height: 100%;
min-height: 240px;
position: relative;
transform: none !important;
}
.module-card:hover { transform: none !important; box-shadow: none !important; }
.module-card::before, .module-card::after { display: none !important; }
.module-card .module-header {
display: flex; align-items: center; gap: 8px; margin-bottom: 1px;
}
.module-card .module-number {
font-family: var(--rc-mono);
font-weight: 700;
font-size: 0.82rem;
color: var(--rc-ink);
background: var(--rc-paper-deep);
border: 1px solid var(--rc-rule);
border-radius: 2px;
padding: 3px 7px;
letter-spacing: 0.05em;
}
.module-card .module-tag {
font-family: var(--rc-mono);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
.module-card .module-tag::before { content: "/ "; color: var(--rc-mute-soft); }
.module-card h3 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 36, "SOFT" 40;
font-size: 1.2rem;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--rc-ink);
margin: 0;
}
.module-card .module-desc {
color: var(--rc-mute);
font-size: 0.92rem;
line-height: 1.55;
margin: 0;
}
.module-card .module-meta {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
margin-top: 4px;
}
.module-card .module-difficulty {
font-family: var(--rc-mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 2px;
border: 1px solid var(--rc-rule-soft);
background: var(--rc-card);
color: var(--rc-ink);
}
.module-card .module-difficulty.beginner { color: var(--rc-green); border-color: rgba(46,125,73,0.4); }
.module-card .module-difficulty.intermediate { color: var(--rc-cobalt); border-color: rgba(28,93,207,0.4); }
.module-card .module-difficulty.advanced { color: var(--rc-coral-deep); border-color: rgba(217,88,59,0.4); }
.module-card .module-time {
font-family: var(--rc-mono);
font-size: 0.78rem;
color: var(--rc-mute);
background: transparent !important;
border: 0;
padding: 0;
}
.module-card .module-time::before { content: "· "; }
.module-card .completed-badge {
position: absolute;
top: 18px; right: 18px;
width: 22px; height: 22px;
background: var(--rc-green);
color: var(--rc-paper);
border-radius: 50%;
display: grid; place-items: center;
font-size: 0.75rem; font-weight: 700;
}
.module-card .module-card-btn {
align-self: start;
margin-top: 8px;
background: transparent;
color: var(--rc-ink);
border: 1px solid var(--rc-rule);
padding: 8px 14px;
font-family: var(--rc-sans);
font-size: 0.85rem;
border-radius: 4px;
width: max-content;
transition: all 120ms ease;
}
/* ---------- 9. Footer ---------- */
footer {
background: var(--rc-ink) !important;
color: var(--rc-paper-soft) !important;
margin-top: 80px;
padding: 56px 0 24px;
position: relative;
border-top: 1px solid var(--rc-rule);
}
footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background: repeating-linear-gradient(90deg, var(--rc-coral) 0 12px, transparent 12px 28px);
}
footer .site-footer {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 760px) {
footer .site-footer { grid-template-columns: 1fr; gap: 36px; }
}
footer .site-footer-brand {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 30;
font-size: 1.8rem;
color: var(--rc-paper) !important;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
footer .site-footer-tag {
color: rgba(245,241,230,0.7) !important;
max-width: 36ch;
line-height: 1.55;
}
footer .site-footer-label {
font-family: var(--rc-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245,241,230,0.5) !important;
margin-bottom: 14px;
font-weight: 700;
}
footer .site-footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer .site-footer-col a {
color: var(--rc-paper-soft) !important;
text-decoration: none;
font-size: 0.95rem;
}
footer .site-footer-col a:hover { color: var(--rc-coral) !important; }
footer .site-footer-col li { color: rgba(245,241,230,0.7); font-size: 0.92rem; }
footer .site-footer-bottom {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
margin-top: 40px; padding-top: 22px;
border-top: 1px solid rgba(245,241,230,0.12);
font-family: var(--rc-mono);
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(245,241,230,0.55);
}
footer .site-footer-keys kbd {
background: rgba(245,241,230,0.05);
border: 1px solid rgba(245,241,230,0.18);
color: var(--rc-paper-soft);
border-bottom-width: 1px;
}
/* ---------- 10. Module page ---------- */
.module-page { padding: 56px 0 80px; background: transparent !important; }
.module-page .container { max-width: 880px; }
.module-page .back-link {
font-family: var(--rc-mono);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--rc-mute);
text-decoration: none;
display: inline-flex; gap: 6px;
margin-bottom: 28px;
}
.module-page .back-link:hover { color: var(--rc-ink); }
.module-page .module-page-header {
border-bottom: 1px solid var(--rc-rule);
padding-bottom: 28px;
margin-bottom: 36px;
}
.module-page .module-page-header h1 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 50;
font-size: clamp(2.4rem, 4.8vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 14px 0 14px;
}
.module-page .module-page-header .module-desc {
font-size: 1.1rem;
color: var(--rc-ink-soft);
max-width: 62ch;
line-height: 1.6;
}
.module-page .module-page-header .module-header { display: inline-flex; gap: 8px; align-items: center; }
.module-page .module-page-meta { display: flex; gap: 8px; margin-top: 16px; }
.learning-objectives {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
padding: 22px 24px;
margin-bottom: 40px;
position: relative;
}
.learning-objectives::before {
content: "OBJECTIVES";
position: absolute;
top: -7px;
line-height: 1;
left: 18px;
right: auto;
height: auto;
background: var(--rc-paper);
padding: 0 8px;
font-family: var(--rc-mono);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--rc-mute);
}
.learning-objectives h3 { display: none; }
.learning-objectives ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.learning-objectives li {
padding-left: 28px;
position: relative;
color: var(--rc-ink-soft);
line-height: 1.55;
}
.learning-objectives li::before {
content: "□";
position: absolute;
left: 0;
top: 0;
color: var(--rc-cobalt);
font-size: 1.1rem;
line-height: 1.35;
font-weight: 700;
}
.content-section { margin: 48px 0; }
.content-section h2 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 96, "SOFT" 50;
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
line-height: 1.1;
color: var(--rc-ink);
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--rc-rule-soft);
}
.content-section h2::before {
content: "§";
color: var(--rc-coral);
margin-right: 8px;
font-weight: 400;
}
.workflow-step {
display: grid;
grid-template-columns: 36px 1fr;
gap: 18px;
padding: 18px 0;
border-top: 1px dashed var(--rc-rule-soft);
}
.workflow-step:first-child { border-top: 0; padding-top: 0; }
.workflow-step .step-num {
width: 32px; height: 32px;
border: 1px solid var(--rc-ink);
border-radius: 50%;
color: var(--rc-ink);
background: var(--rc-paper-soft);
font-family: var(--rc-mono);
font-weight: 700;
display: grid; place-items: center;
font-size: 0.85rem;
}
.workflow-step strong { color: var(--rc-ink); font-weight: 600; }
.workflow-step p { color: var(--rc-ink-soft); margin: 4px 0 0; }
.concept-block, .key-action {
background: var(--rc-card);
border: 1px solid var(--rc-rule-soft);
border-left: 3px solid var(--rc-cobalt);
border-radius: 2px;
padding: 18px 20px;
margin: 18px 0;
box-shadow: none !important;
}
.key-action { border-left-color: var(--rc-coral); background: var(--rc-card-soft); }
.concept-block h5 {
font-family: var(--rc-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
margin: 0 0 10px;
}
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feature-list li {
padding-left: 18px;
position: relative;
color: var(--rc-ink-soft);
}
.feature-list li::before {
content: "—";
position: absolute;
left: 0;
color: var(--rc-coral);
font-weight: 700;
}
/* ---------- 11. New homepage sections ---------- */
.rc-strap {
border-top: 1px solid var(--rc-rule);
border-bottom: 1px solid var(--rc-rule);
background: var(--rc-card-soft);
font-family: var(--rc-mono);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--rc-ink-soft);
overflow: hidden;
}
.rc-strap-track { display: flex; gap: 0; padding: 12px 0; }
.rc-strap-item {
flex: 1;
text-align: center;
border-right: 1px solid var(--rc-rule-soft);
padding: 0 16px;
font-weight: 500;
}
.rc-strap-item:last-child { border-right: 0; }
.rc-strap-item strong { color: var(--rc-ink); font-weight: 700; }
@media (max-width: 720px) {
.rc-strap-track { flex-wrap: wrap; }
.rc-strap-item { flex: 1 1 50%; padding: 6px 12px; }
.rc-strap-item:nth-child(2n) { border-right: 0; }
}
.rc-built-section {
padding: 80px 0;
border-top: 1px solid var(--rc-rule);
}
.rc-built-section .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
@media (max-width: 900px) {
.rc-built-section .container { grid-template-columns: 1fr; gap: 36px; }
}
.rc-built-eyebrow {
font-family: var(--rc-mono);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: var(--rc-mute);
margin-bottom: 14px;
}
.rc-built-section h2 {
font-size: clamp(2.2rem, 4.2vw, 3.2rem);
line-height: 1.05;
margin-bottom: 18px;
}
.rc-built-section h2 em { font-style: italic; color: var(--rc-coral-deep); font-weight: 400; }
.rc-built-section p { font-size: 1.05rem; color: var(--rc-ink-soft); max-width: 52ch; }
.rc-built-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.rc-built-list li {
display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
color: var(--rc-ink-soft);
}
.rc-built-list li::before {
content: "+"; color: var(--rc-coral);
font-family: var(--rc-mono); font-weight: 700;
font-size: 0.95rem; line-height: 1.55;
}
.rc-built-card {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
padding: 22px;
box-shadow: var(--shadow-md);
position: relative;
}
.rc-built-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px dashed var(--rc-rule-soft);
border-radius: 2px;
overflow: hidden;
margin-bottom: 14px;
}
.rc-built-card-grid div {
padding: 14px;
border-right: 1px dashed var(--rc-rule-soft);
border-bottom: 1px dashed var(--rc-rule-soft);
}
.rc-built-card-grid div:nth-child(2n) { border-right: 0; }
.rc-built-card-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.rc-built-card-grid .label {
font-family: var(--rc-mono);
font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--rc-mute); font-weight: 700; margin-bottom: 6px;
}
.rc-built-card-grid .value {
font-family: var(--rc-display);
font-variation-settings: "opsz" 96, "SOFT" 30;
font-weight: 500;
font-size: 1.45rem;
color: var(--rc-ink);
line-height: 1;
letter-spacing: -0.02em;
}
.rc-built-card-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--rc-rule-soft);
font-family: var(--rc-mono);
font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--rc-mute); font-weight: 600;
}
.rc-teams { padding: 64px 0; border-top: 1px solid var(--rc-rule); }
.rc-teams h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 36px; max-width: 22ch; }
.rc-teams h2 em { font-style: italic; color: var(--rc-coral-deep); font-weight: 400; }
.rc-teams-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--rc-rule);
border-radius: 4px;
overflow: hidden;
background: var(--rc-rule-soft);
}
@media (max-width: 800px) {
.rc-teams-grid { grid-template-columns: repeat(2, 1fr); }
}
.rc-team { background: var(--rc-card); padding: 26px 22px; transition: background 140ms ease; }
.rc-team:hover { background: var(--rc-card-soft); }
.rc-team .rc-team-code {
font-family: var(--rc-mono);
font-size: 0.68rem; letter-spacing: 0.2em; font-weight: 700;
color: var(--rc-mute); text-transform: uppercase; margin-bottom: 10px;
}
.rc-team h3 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 60, "SOFT" 40;
font-size: 1.4rem; line-height: 1.1; margin: 0 0 6px; color: var(--rc-ink);
}
.rc-team p { font-size: 0.9rem; color: var(--rc-mute); line-height: 1.55; }
/* ---------- 12. Resets / hostile overrides ---------- */
section { background: transparent !important; }
[data-glyph]::before { display: none !important; }
.phase-header { background: transparent !important; box-shadow: none !important; }
.skip-link { background: var(--rc-ink); color: var(--rc-paper); padding: 8px 14px; border-radius: 0 0 4px 4px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* ================================================================
PATCH 1 — Spacing & fit fixes
================================================================ */
/* Remove the negative-margin overlap from the stats grid. Stats now
sit cleanly between progress bar and modules. */
#stats-tracker .stats-grid { margin: 0 !important; }
#stats-tracker { padding: 24px 0 0 !important; }
/* Restore some breathing room around progress bar */
#progress-bar { padding: 32px 0 8px !important; }
/* Tighten the hero. 72px → 56px top, and don't double-pad. */
#hero {
padding: 56px 28px 64px !important;
margin-bottom: 0;
}
@media (max-width: 900px) {
#hero { padding: 40px 24px 36px !important; }
}
/* Strap: small breathing room above/below so it doesn't kiss the hero rule */
.rc-strap { margin: 0; }
.rc-strap-track { padding: 14px 0; }
/* Modules: spacing above & below + first phase has no top border */
#modules { padding: 72px 0 64px !important; }
.phase-group { border-top: 1px solid var(--rc-rule); padding-top: 40px; margin-top: 40px; }
.phase-group:first-of-type,
#modules .phase-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
/* Belt-and-braces: also remove top border on the first .phase-group regardless of sibling order */
.author-note + .phase-group { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
/* Author-note bottom margin */
.author-note { margin: 26px 0 48px !important; }
/* Phase header layout — give the title room and prevent the right-side
stamp from crowding long titles */
.phase-header { gap: 24px 32px !important; }
.phase-header .phase-number { min-width: 4.2ch; }
.phase-header .phase-title { padding-right: 12px; }
@media (max-width: 720px) {
.phase-header {
grid-template-columns: auto 1fr !important;
gap: 14px 22px !important;
}
.phase-header::after {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
justify-self: start;
margin-top: 6px;
}
}
/* Capstone + teams: tighten the gap between large sections */
.rc-built-section { padding: 72px 0 !important; }
.rc-teams { padding: 56px 0 72px !important; }
/* Footer breathing room */
footer { margin-top: 0 !important; }
/* Section-level reset — don't apply the global section padding to
sections that own their padding. Remove the over-broad rule. */
section { padding-block: 0 !important; }
/* Module card title clamp — keep h3 from pushing the description into
overflow on long titles like "Reading Drawings II - Sections, GD&T &
BOMs". This is purely a visual safety net, not a hard truncation. */
.module-card h3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.module-card .module-desc {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Stats-tracker icon area on narrow widths */
@media (max-width: 480px) {
#stats-tracker .stat-card { padding: 14px 14px; gap: 10px; }
#stats-tracker .stat-card-icon { width: 32px; height: 32px; }
#stats-tracker .stat-card-value { font-size: 1.55rem; }
}
/* Hero visual on small screens: drop the fixed 380px height so the
model-viewer doesn't overflow narrow viewports */
@media (max-width: 600px) {
#hero .hero-visual model-viewer {
height: 300px !important;
max-width: 100% !important;
}
}
/* Navbar: push cmdk button to the right side near nav-links so it
doesn't sit awkwardly next to the logo */
#navbar .nav-cmdk { margin-left: auto; }
#navbar .nav-links { margin-left: 0 !important; }
/* Hero buttons: ensure correct vertical alignment */
#hero .hero-buttons { margin-top: 8px; }
/* Strap track text should not break awkwardly on narrow widths */
.rc-strap-item { white-space: normal; }
@media (max-width: 520px) {
.rc-strap-item { font-size: 0.72rem; padding: 4px 10px; }
}
/* Built-section grid on small widths — visual order */
@media (max-width: 900px) {
.rc-built-section .container { gap: 28px; }
.rc-built-card { order: 2; }
}
/* Teams cards: keep paragraph from squeezing on narrow widths */
@media (max-width: 800px) {
.rc-team { padding: 22px 18px; }
.rc-team h3 { font-size: 1.25rem; }
}
/* Built card 2x2 grid — collapse to 1-col on very narrow widths
so labels don't truncate */
@media (max-width: 360px) {
.rc-built-card-grid { grid-template-columns: 1fr; }
.rc-built-card-grid div { border-right: 0 !important; }
}
/* Footer site-footer-bottom on narrow widths */
@media (max-width: 520px) {
footer .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Module page horizontal rhythm */
@media (max-width: 720px) {
.module-page .container { padding: 0 22px; }
}
/* ================================================================
PATCH 2 — Empirical fixes after viewing localhost:5173
================================================================ */
/* A. Module cards: legacy styles.css clamps them to 33.333% - 14px
inside a flex layout. Force them to fill the grid cell. */
.modules-grid > .module-card-link,
.modules-grid .module-card-link {
max-width: none !important;
min-width: 0 !important;
width: 100% !important;
flex: 0 0 auto !important;
}
/* B. Phase number: polish.css hides .phase-header .phase-number with
display:none and my redesign.css didn't override display. */
.phase-header .phase-number {
display: block !important;
}
/* C. Hero visual title block — was flowing weird because model-viewer
doesn't fully fill the card and the ::after collided with it.
Pin it absolutely to the card bottom, full width. */
#hero .hero-visual { padding: 24px 0 64px !important; }
#hero .hero-visual::before {
inset: 12px 12px 56px !important; /* dashed inner rect stops above title block */
}
#hero .hero-visual::after {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: 0 !important;
border-top: 1px solid var(--rc-rule) !important;
border-radius: 0 0 4px 4px;
text-align: center;
}
/* Force the model-viewer to actually fill the card width */
#hero .hero-visual model-viewer {
width: calc(100% - 24px) !important;
max-width: 100% !important;
height: 360px !important;
margin: 0 12px !important;
display: block;
}
@media (max-width: 600px) {
#hero .hero-visual model-viewer { height: 280px !important; }
#hero .hero-visual { padding: 18px 0 48px !important; }
#hero .hero-visual::before { inset: 10px 10px 42px !important; }
}
/* D. Phase-progress widget (injected by phase-progress.js) styling.
The HTML is roughly:
3/3
...
Place it in the phase header right column above the PHASE n/5 stamp. */
.phase-header { position: relative; }
.phase-progress {
grid-column: 3;
grid-row: 1;
align-self: end;
justify-self: end;
display: inline-flex !important;
align-items: center;
gap: 10px;
font-family: var(--rc-mono);
font-size: 0.78rem;
color: var(--rc-mute);
margin-bottom: 6px;
}
.phase-progress .phase-progress-count {
font-weight: 700;
color: var(--rc-ink);
letter-spacing: 0.02em;
}
.phase-progress .phase-progress-count b { font-weight: 700; color: var(--rc-coral-deep); font-style: normal; }
.phase-progress .phase-progress-count .sep { color: var(--rc-mute-soft); margin: 0 2px; }
.phase-progress .phase-progress-dots { display: inline-flex; gap: 4px; }
.phase-progress .phase-progress-dots i {
width: 8px; height: 8px;
border: 1px solid var(--rc-rule-soft);
border-radius: 50%;
background: transparent;
display: inline-block;
}
.phase-progress .phase-progress-dots i.done {
background: var(--rc-coral);
border-color: var(--rc-coral-deep);
}
/* The phase-header stamp ("PHASE 1 / 5") needs to move to row 2 so it
sits below the dots */
.phase-header::after {
grid-row: 2 !important;
margin-top: 0;
}
@media (max-width: 720px) {
.phase-progress {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
justify-self: start;
}
}
/* E. Background dot grid was making large text feel watery — tone it
down dramatically so the page feels crisper. */
body,
body.light-theme {
background-image: radial-gradient(circle at 1px 1px, rgba(15,20,25,0.035) 0.8px, transparent 1.2px) !important;
background-size: 32px 32px !important;
}
/* F. Stamp box "PHASE 1/5" — make it slightly bigger / cleaner */
.phase-header::after {
padding: 7px 12px !important;
font-size: 0.72rem !important;
background: transparent !important;
border: 1px solid var(--rc-rule) !important;
}
/* G. Reading-progress bar (injected on module pages) */
.reading-progress {
height: 3px;
background: transparent;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 60;
}
.reading-progress-fill {
height: 100%;
background: var(--rc-coral);
}
/* H. Hero buttons — tighten to keep proper visual weight */
#hero .btn-primary { font-size: 0.95rem; padding: 13px 22px; }
/* I. Keep hero content max width but expand a touch for desktop */
@media (min-width: 1100px) {
#hero .hero-content { max-width: 640px; }
}
/* J. Force the first .phase-group to NOT show top border even when
preceded by .author-note (the :first-of-type selector misses it). */
#modules .phase-group { border-top: 1px solid var(--rc-rule); padding-top: 48px; margin-top: 48px; }
#modules .phase-group:first-of-type,
#modules .author-note + .phase-group {
border-top: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* K. Old "0/3 ●●●" placeholder element (if not phase-progress.js) — show
.phase-progress only when it has children */
.phase-progress:empty { display: none !important; }
/* ================================================================
PATCH 3 — Polish after second visual review
================================================================ */
/* A. Eyebrow text was nearly invisible in screenshots: bump size +
contrast + tighten letter-spacing. */
#hero .eyebrow,
.rc-built-eyebrow {
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
color: var(--rc-ink-soft) !important;
font-weight: 700 !important;
}
#hero .eyebrow::before {
width: 32px !important;
height: 2px !important;
}
/* B. Failsafe: never leave content invisible due to lost animation
triggers. If animate-* class survives but is-visible never
arrives, ensure final opacity is 1. */
.animate-fade-up,
.animate-slide-up,
.animate-fade-in,
.animate-scale-in {
opacity: 1 !important;
transform: none !important;
}
.animate-fade-up.is-visible,
.animate-slide-up.is-visible,
.animate-fade-in.is-visible,
.animate-scale-in.is-visible {
opacity: 1 !important;
}
/* C. Section titles & module page header — make sure they're always
at full contrast. */
.section-title,
.module-page-header h1,
#hero .hero-content h1 {
color: var(--rc-ink) !important;
opacity: 1 !important;
}
/* D. Module page progress bar (the "MODULE 1 OF 21" header strip)
sits inside the existing nav area — refine its rule line. */
.module-progress-header,
.module-progress-bar {
border-bottom: 1px solid var(--rc-rule-soft);
padding: 14px 0 18px;
margin-bottom: 24px;
}
/* E. Module page H1 — Fraunces with SOFT 50 was reading a touch loose.
Tighten kerning and reduce the SOFT axis. */
.module-page-header h1,
#hero .hero-content h1 {
font-variation-settings: "opsz" 144, "SOFT" 30 !important;
letter-spacing: -0.025em !important;
}
/* F. Glossary page H1 — apply same big editorial treatment */
.glossary-page h1,
.glossary-header h1,
main h1.section-title,
.glossary-intro h1 {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 144, "SOFT" 30 !important;
font-size: clamp(2.4rem, 4.8vw, 3.6rem) !important;
color: var(--rc-ink) !important;
letter-spacing: -0.025em !important;
line-height: 1.04 !important;
opacity: 1 !important;
}
/* G. Glossary page section titles (category headings) */
.glossary-category h2,
.glossary-section h2,
.glossary-page h2 {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 80, "SOFT" 30 !important;
color: var(--rc-ink) !important;
}
/* H. Strap separator below hero - add a touch of breathing room */
.rc-strap-track { padding: 16px 0 !important; }
/* I. Reduce decorative SOFT axis on phase titles so they read crisper
when rendered at smaller sizes */
.phase-header .phase-title {
font-variation-settings: "opsz" 96, "SOFT" 30 !important;
letter-spacing: -0.025em !important;
}
/* J. Module card titles — slightly tighter kerning */
.module-card h3 {
font-variation-settings: "opsz" 36, "SOFT" 30 !important;
letter-spacing: -0.02em !important;
}
/* K. Built section h2 — same tightening */
.rc-built-section h2,
.rc-teams h2 {
font-variation-settings: "opsz" 120, "SOFT" 30 !important;
letter-spacing: -0.025em !important;
}
/* L. Module page back-link arrow size + chip alignment */
.module-page .back-link { gap: 8px; font-size: 0.78rem !important; }
/* M. Hero buttons spacing tighter on smaller screens */
@media (max-width: 700px) {
#hero .hero-buttons { gap: 10px; }
#hero .hero-buttons .btn { padding: 11px 16px; font-size: 0.9rem; }
}
/* N. Footer hash strip — make slightly more subtle on very wide screens */
footer::before {
background: repeating-linear-gradient(90deg,
var(--rc-coral) 0 14px,
transparent 14px 32px) !important;
}
/* O. Smart-resume hero-meta line: looks fine but let's style it */
#hero .hero-meta {
font-family: var(--rc-mono);
font-size: 0.78rem;
color: var(--rc-mute);
margin-top: 14px;
letter-spacing: 0.04em;
}
/* ================================================================
PATCH 4 — Critical: body opacity stuck at 0
================================================================ */
/* animations.css has `body { animation: pageIn 0.3s both }` with
`from { opacity: 0 }`. Under prefers-reduced-motion (or any case
where the animation gets short-circuited), the body can be stuck
at opacity 0 — making low-contrast / small text invisible. Force
the body to be fully visible. */
body,
body.review-mode,
body.light-theme,
body.review-mode.light-theme {
opacity: 1 !important;
animation: none !important;
}
/* Same defensive override for any animate-* layer that might be
stuck mid-transition. */
.animate-fade-up,
.animate-slide-up,
.animate-fade-in,
.animate-scale-in,
.hero-content,
.hero-visual,
.stat-card,
.module-card-link {
opacity: 1 !important;
}
/* ================================================================
PATCH 5 — Eyebrow text invisible: polish.css applies a
gradient/clip-text shimmer that makes the actual text fill
transparent. Restore solid text fill.
================================================================ */
#hero .eyebrow,
.hero-content .eyebrow,
.rc-built-eyebrow {
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
animation: none !important;
}
/* Same defensive override for any other elements that the polish
.gradient-text rules might have hit unintentionally. */
.section-title,
.module-page-header h1,
#hero .hero-content h1,
.phase-header .phase-title,
.module-card h3,
.rc-built-section h2,
.rc-teams h2 {
-webkit-text-fill-color: currentColor !important;
background-clip: border-box !important;
-webkit-background-clip: border-box !important;
}
/* ================================================================
PATCH 6 — Comprehensive polish pass
================================================================ */
/* A. Module grid: empty cells in 5-module phases were showing as
tan rectangles. Switch to a layout where the modules-grid is
transparent and dividers come from card borders. Empty cells
now blend into the page. */
.modules-grid {
background: transparent !important;
border: 1px solid var(--rc-rule) !important;
overflow: hidden;
border-radius: 4px !important;
}
.module-card-link {
background: var(--rc-card) !important;
border-right: 1px solid var(--rc-rule-soft);
border-bottom: 1px solid var(--rc-rule-soft);
box-sizing: border-box;
}
/* Last column: no right border */
.modules-grid .module-card-link:nth-child(3n) { border-right: 0; }
/* Last row helpers — we hide bottom border on cards in the LAST row
regardless of phase size. Works for 3, 4, 5, 6 cards via nth-last. */
.modules-grid .module-card-link:nth-last-child(-n+3):nth-child(3n+1),
.modules-grid .module-card-link:nth-last-child(-n+3):nth-child(3n+1) ~ .module-card-link {
border-bottom: 0;
}
@media (max-width: 980px) {
.modules-grid .module-card-link:nth-child(3n) { border-right: 1px solid var(--rc-rule-soft); }
.modules-grid .module-card-link:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) {
.modules-grid .module-card-link { border-right: 0 !important; }
.modules-grid .module-card-link:last-child { border-bottom: 0; }
}
/* B. Phase header — tighten the gap so the title sits closer to the
numeral. Currently the numeral has wide empty space next to it. */
.phase-header {
grid-template-columns: max-content 1fr auto !important;
gap: 4px 32px !important;
align-items: end !important;
}
.phase-header .phase-number {
grid-row: 1 / span 2 !important;
align-self: stretch !important;
padding-right: 4px;
}
.phase-header .phase-title {
align-self: end;
margin-bottom: 6px;
}
.phase-header .phase-desc {
align-self: start;
margin-top: 0;
}
/* C. Phase numeral underline accent — anchor it to the right edge of
the numeral so it doesn't float in space. */
.phase-header .phase-number::after {
left: 6px !important;
right: 28% !important;
bottom: 6px !important;
}
/* D. Phase header right column (dots + stamp) — vertical alignment */
.phase-progress {
grid-row: 1 !important;
grid-column: 3 !important;
align-self: end;
}
.phase-header::after {
grid-row: 2 !important;
grid-column: 3 !important;
margin-top: 6px !important;
}
/* E. Model viewer — hide the progress bar (thin line at top of card) */
#hero .hero-visual model-viewer::part(default-progress-bar),
#hero .hero-visual model-viewer::part(default-progress-mask) {
display: none !important;
}
/* F. Capstone "spec sheet" card — soften the box-shadow and tighten
internal spacing. */
.rc-built-card { box-shadow: var(--shadow-sm); padding: 24px; }
.rc-built-card-grid div { padding: 16px 14px; }
/* G. Team grid cards — add a small tech tag-mark above the FRC/FTC
code so it feels more like a labelled diagram. */
.rc-team::before {
content: "";
display: block;
width: 18px;
height: 2px;
background: var(--rc-coral);
margin-bottom: 14px;
}
/* H. Footer link weight & spacing */
footer .site-footer-col a { font-weight: 500; }
footer .site-footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* I. Navbar — give the cmdk button a tiny mono "search" feel */
#navbar .nav-cmdk-text { color: var(--rc-mute); }
#navbar .nav-cmdk-icon { color: var(--rc-mute); font-size: 0.9rem; }
/* J. Active nav link — replace amber underline with cobalt */
#navbar .nav-links a.active {
background: rgba(28, 93, 207, 0.10) !important;
color: var(--rc-cobalt) !important;
}
/* K. Module page Phase·Section breadcrumb in top right corner —
give it more presence */
.module-page-header .phase-info,
.module-progress-meta a,
.module-progress-meta {
font-family: var(--rc-mono);
font-size: 0.78rem;
color: var(--rc-mute);
text-decoration: none;
}
.module-progress-meta a { color: var(--rc-cobalt); }
.module-progress-meta a:hover { text-decoration: underline; }
/* L. Author note — tighten and add a small extra divider above */
.author-note { padding: 22px 26px !important; }
.author-note::before {
/* Small "PROLOGUE" or technical label could go here later. */
}
/* M. Module card hover lift — subtle slide-right indicator instead of
transform lift (keeps the grid alignment crisp). */
.module-card-link {
transition: background 140ms ease !important;
position: relative;
}
.module-card-link::after {
content: "";
position: absolute;
left: 22px;
bottom: 18px;
width: 0;
height: 1px;
background: var(--rc-ink);
transition: width 200ms ease;
}
.module-card-link:hover::after { width: 32px; }
/* N. Section title eyebrow — give the "§ 01 THE SYLLABUS" prefix a
little more breathing room. */
#modules .section-title::before {
letter-spacing: 0.22em !important;
color: var(--rc-coral-deep) !important;
margin-bottom: 18px !important;
}
/* O. Hero subtitle — slight increase in line-height for readability */
#hero .hero-subtitle { line-height: 1.65 !important; }
/* P. Strap — tighten paddings */
.rc-strap { padding: 4px 0 !important; }
.rc-strap-track { padding: 16px 28px !important; }
.rc-strap-item { font-weight: 600 !important; }
/* Q. Stats: ensure no left/right padding leak on mobile */
@media (max-width: 540px) {
#stats-tracker { padding: 20px 0 0 !important; }
#stats-tracker .container { padding: 0 22px !important; }
}
/* R. Phase headers on smaller widths — title can wrap; make sure
the numeral doesn't get awkwardly narrow */
@media (max-width: 720px) {
.phase-header {
grid-template-columns: max-content 1fr !important;
gap: 12px 22px !important;
}
.phase-header .phase-number {
font-size: clamp(3.5rem, 14vw, 5rem) !important;
}
.phase-progress {
grid-column: 2 !important;
grid-row: 3 !important;
justify-self: start !important;
margin-top: 8px;
}
.phase-header::after {
grid-column: 2 !important;
grid-row: 4 !important;
justify-self: start !important;
margin-top: 4px !important;
}
}
/* S. Stats grid: when stacked 2x2 on tablet, give each cell its own
bottom border so it visually reads as a small table. */
@media (max-width: 720px) {
#stats-tracker .stats-grid { gap: 0; }
}
/* T. Tighten capstone built section grid gap and make the spec sheet
smaller on tablet */
@media (max-width: 1000px) {
.rc-built-section .container { gap: 36px; }
.rc-built-card-grid .value { font-size: 1.3rem; }
}
/* U. Footer columns alignment on smaller screens */
@media (max-width: 920px) and (min-width: 761px) {
footer .site-footer { grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
}
/* ================================================================
PATCH 7 — Phase header tightening + more polish
================================================================ */
/* A. Phase header: switch to flex so the title hugs the numeral
instead of floating in the middle column of a 3-col grid. */
.phase-header {
display: flex !important;
flex-wrap: wrap;
align-items: flex-end;
gap: 0 28px !important;
}
.phase-header .phase-number {
grid-row: auto !important;
grid-column: auto !important;
flex: 0 0 auto;
padding-right: 0 !important;
}
.phase-header .phase-title-block {
/* If we wrap title+desc; otherwise individual flex items */
}
.phase-header .phase-title {
flex: 1 1 auto;
grid-row: auto !important;
grid-column: auto !important;
align-self: flex-end !important;
margin-bottom: 14px;
min-width: 200px;
}
.phase-header .phase-desc {
flex-basis: 100%;
margin-top: 4px !important;
margin-left: clamp(180px, 16vw, 280px);
grid-row: auto !important;
grid-column: auto !important;
}
.phase-progress {
margin-left: auto !important;
grid-row: auto !important;
grid-column: auto !important;
order: 3;
align-self: flex-end !important;
margin-bottom: 14px;
}
.phase-header::after {
order: 4;
margin-left: 18px;
align-self: flex-end !important;
grid-row: auto !important;
grid-column: auto !important;
margin-bottom: 14px;
margin-top: 0 !important;
}
@media (max-width: 720px) {
.phase-header { gap: 6px 18px !important; }
.phase-header .phase-desc { margin-left: 0; flex-basis: 100%; }
.phase-progress { order: 2; margin-left: 18px !important; align-self: center !important; margin-bottom: 0; }
.phase-header::after { order: 5; margin-left: 0; flex-basis: max-content; margin-bottom: 0; }
}
/* B. Phase numeral underline — shorter, anchored under the numeral */
.phase-header .phase-number::after {
left: 6px !important;
right: auto !important;
width: 64px !important;
bottom: 10px !important;
height: 3px !important;
}
/* C. Phase title margin tweak */
.phase-header .phase-title {
line-height: 1.05 !important;
}
/* D. Slim down hero card padding so the model breathes */
#hero .hero-visual { padding: 22px 0 56px !important; }
#hero .hero-visual model-viewer { height: 380px !important; }
/* E. Hero buttons — make "Continue with Module N" link arrow consistent */
#hero .btn-primary::after { content: ""; }
/* F. Module-card hover indicator — bump weight subtly */
.module-card-link:hover::after { width: 40px; height: 1.5px; background: var(--rc-coral); }
/* G. Section spacing: reduce gap between phases so the page feels
more connected. */
#modules .phase-group {
padding-top: 36px !important;
margin-top: 36px !important;
}
#modules .phase-group:first-of-type,
#modules .author-note + .phase-group {
padding-top: 4px !important;
margin-top: 4px !important;
}
/* H. Author note quote mark sizing */
.author-note { position: relative; padding-left: 32px !important; }
.author-note::before {
content: "\201C"; /* fancy left double quote */
position: absolute;
left: 12px;
top: 4px;
font-family: var(--rc-display);
font-size: 2.6rem;
color: var(--rc-coral);
line-height: 1;
font-style: normal;
}
/* I. Strap separator — give it a tiny crosshair tick */
.rc-strap-item { position: relative; }
/* J. Capstone built section — refine eyebrow */
.rc-built-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
}
.rc-built-eyebrow::before {
content: "";
width: 24px;
height: 1px;
background: var(--rc-coral);
}
/* K. Module card numbers — tighter chip */
.module-card .module-number {
padding: 2px 6px !important;
font-size: 0.78rem !important;
}
/* L. Module card title size — slightly smaller for visual hierarchy
vs the phase title */
.module-card h3 { font-size: 1.15rem !important; }
/* M. Module card desc — let it breathe a bit more */
.module-card .module-desc { line-height: 1.6 !important; }
/* N. Improve module card meta — separator dot positioning */
.module-card .module-time::before { content: ""; margin: 0; }
.module-card .module-time { margin-left: 4px; }
.module-card .module-time::after { content: ""; }
/* O. Capstone card label "SPEC SHEET · CAPSTONE / MODULE 21" */
.rc-built-card-foot { font-size: 0.68rem !important; }
/* P. Hero buttons: arrow microinteraction */
.hero-buttons .btn { transition: transform 120ms ease, background 120ms ease; }
.hero-buttons .btn-ghost:hover { transform: translateX(2px); }
/* Q. Footer hash strip — make it more deliberate at intersection */
footer::before { height: 6px !important; }
/* R. Glossary page intro - more breathing room */
.glossary-intro,
.glossary-page > *:first-child { padding-top: 56px; }
/* S. Glossary alphabet chips: cleaner technical button look */
.glossary-letter,
.alphabet-filter button,
.glossary-letters button {
font-family: var(--rc-mono);
font-weight: 700;
color: var(--rc-ink);
background: transparent;
border: 1px solid var(--rc-rule-soft);
border-radius: 2px;
padding: 6px 10px;
transition: all 120ms ease;
}
.glossary-letter:hover,
.alphabet-filter button:hover { border-color: var(--rc-ink); background: var(--rc-card); }
.glossary-letter.active,
.alphabet-filter button.active { background: var(--rc-ink); color: var(--rc-paper); border-color: var(--rc-ink); }
.glossary-letter:disabled,
.alphabet-filter button:disabled,
.glossary-letter[disabled] { opacity: 0.3; cursor: default; }
/* T. Reading-progress bar (top of module page) — slim coral */
.reading-progress { height: 2px; background: rgba(0,0,0,0.04); }
.reading-progress-fill { background: var(--rc-coral); }
/* ================================================================
PATCH 8 — Revert phase header to clean 2-row grid (PATCH 7's
flex approach broke the layout).
================================================================ */
.phase-header {
display: grid !important;
grid-template-columns: max-content auto 1fr auto auto !important;
column-gap: 24px !important;
row-gap: 4px !important;
align-items: end !important;
flex-wrap: nowrap !important;
}
.phase-header .phase-number {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
align-self: end !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
.phase-header .phase-title {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: end !important;
justify-self: start !important;
flex: none !important;
margin: 0 0 14px 0 !important;
min-width: 0 !important;
white-space: nowrap;
}
.phase-header .phase-desc {
grid-column: 2 / -1 !important;
grid-row: 2 !important;
flex: none !important;
margin: 4px 0 0 0 !important;
align-self: start !important;
}
.phase-progress {
grid-column: 4 !important;
grid-row: 1 !important;
align-self: end !important;
margin: 0 0 14px 0 !important;
order: 0 !important;
flex: none !important;
}
.phase-header::after {
grid-column: 5 !important;
grid-row: 1 !important;
align-self: end !important;
margin: 0 0 14px 0 !important;
order: 0 !important;
justify-self: end !important;
}
/* Mobile: stack vertically */
@media (max-width: 760px) {
.phase-header {
grid-template-columns: max-content 1fr !important;
grid-template-rows: auto auto auto auto !important;
column-gap: 18px !important;
row-gap: 4px !important;
}
.phase-header .phase-number {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
font-size: clamp(3.5rem, 14vw, 5.5rem) !important;
}
.phase-header .phase-title {
grid-column: 2 !important;
grid-row: 1 !important;
white-space: normal !important;
margin: 0 0 4px 0 !important;
}
.phase-header .phase-desc {
grid-column: 2 !important;
grid-row: 2 !important;
margin: 0 !important;
}
.phase-progress {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
justify-self: start !important;
margin: 8px 0 0 0 !important;
}
.phase-header::after {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
justify-self: start !important;
margin: 4px 0 0 0 !important;
}
}
/* Phase numeral underline accent — short, anchored below numeral */
.phase-header .phase-number::after {
left: 4px !important;
right: auto !important;
width: 56px !important;
bottom: 12px !important;
height: 3px !important;
background: var(--rc-coral) !important;
}
/* Tighten phase title kerning */
.phase-header .phase-title {
letter-spacing: -0.025em !important;
font-variation-settings: "opsz" 96, "SOFT" 20 !important;
}
/* ================================================================
PATCH 9 — Inner pages: login, glossary, settings polish
================================================================ */
/* A. Login "Sign In with Google" button — black on cobalt was
almost unreadable. Make it white text. */
.login-google-btn,
button.login-google-btn,
.google-signin-btn {
color: var(--rc-paper) !important;
background: var(--rc-ink) !important;
border: 1px solid var(--rc-ink) !important;
font-family: var(--rc-sans) !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
border-radius: 4px !important;
padding: 13px 20px !important;
transition: background 120ms ease, transform 120ms ease;
}
.login-google-btn:hover,
.google-signin-btn:hover {
background: var(--rc-cobalt) !important;
border-color: var(--rc-cobalt) !important;
transform: translateY(-1px);
}
/* B. Login card framing */
.login-card,
.auth-card,
.signin-container {
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule) !important;
border-radius: 4px !important;
box-shadow: var(--shadow-lg) !important;
padding: 36px 36px 32px !important;
position: relative;
}
.login-card::before,
.auth-card::before {
content: "AUTHENTICATION";
position: absolute;
top: -10px;
left: 18px;
background: var(--rc-paper);
padding: 0 8px;
font-family: var(--rc-mono);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--rc-mute);
}
/* C. Login page heading */
.login-card h1,
.login-card h2,
.auth-card h1,
.auth-card h2 {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 96, "SOFT" 30 !important;
font-size: 1.9rem !important;
color: var(--rc-ink) !important;
margin: 4px 0 10px !important;
letter-spacing: -0.02em;
}
.login-card p,
.auth-card p {
color: var(--rc-ink-soft) !important;
line-height: 1.55;
margin-bottom: 24px;
}
/* D. Glossary alphabet tabs (actual class is .glossary-alpha-tab) */
.glossary-alpha-tab {
font-family: var(--rc-mono) !important;
font-weight: 700 !important;
color: var(--rc-ink) !important;
background: transparent !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 2px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
transition: all 120ms ease !important;
cursor: pointer;
}
.glossary-alpha-tab:hover {
border-color: var(--rc-ink) !important;
background: var(--rc-card) !important;
color: var(--rc-ink) !important;
}
.glossary-alpha-tab.active,
.glossary-alpha-tab[aria-current="true"],
.glossary-alpha-tab.is-active {
background: var(--rc-ink) !important;
color: var(--rc-paper) !important;
border-color: var(--rc-ink) !important;
}
.glossary-alpha-tab[disabled],
.glossary-alpha-tab.disabled,
.glossary-alpha-tab.empty {
opacity: 0.3 !important;
cursor: default !important;
pointer-events: none;
}
.glossary-alpha-tabs {
display: flex !important;
flex-wrap: wrap;
gap: 4px !important;
justify-content: center;
margin: 8px 0 32px;
}
/* E. Glossary search field */
#glossary-filter,
.glossary-search input,
input.glossary-search-input {
width: 100% !important;
max-width: 480px !important;
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule) !important;
border-radius: 4px !important;
padding: 13px 18px !important;
font-family: var(--rc-sans) !important;
font-size: 0.98rem !important;
color: var(--rc-ink) !important;
box-shadow: var(--shadow-sm) !important;
transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
#glossary-filter:focus,
.glossary-search input:focus {
outline: none !important;
border-color: var(--rc-ink) !important;
box-shadow: 0 0 0 3px var(--rc-cobalt-tint) !important;
}
.glossary-search {
display: flex !important;
justify-content: center;
margin: 24px 0 24px !important;
}
/* F. Glossary category headers */
.glossary-category h2,
.glossary-group h2,
.glossary-section h2 {
font-family: var(--rc-display) !important;
font-weight: 600 !important;
font-variation-settings: "opsz" 60, "SOFT" 30 !important;
font-size: 1.3rem !important;
color: var(--rc-ink) !important;
letter-spacing: -0.015em;
}
/* G. Glossary cards */
.glossary-card,
.glossary-item {
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
padding: 18px 20px !important;
box-shadow: none !important;
transition: border-color 140ms ease;
}
.glossary-card:hover,
.glossary-item:hover {
border-color: var(--rc-ink) !important;
}
.glossary-card h3,
.glossary-card h4,
.glossary-item h3,
.glossary-item h4 {
font-family: var(--rc-sans) !important;
font-weight: 700 !important;
font-size: 0.98rem !important;
color: var(--rc-ink) !important;
margin: 0 0 6px !important;
letter-spacing: 0;
}
.glossary-card p,
.glossary-item p {
color: var(--rc-ink-soft) !important;
font-size: 0.9rem !important;
line-height: 1.5;
margin: 0 0 12px !important;
}
.glossary-card .covered-in,
.glossary-card .module-ref,
.glossary-card [class*="covered"] {
font-family: var(--rc-mono) !important;
font-size: 0.66rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
color: var(--rc-mute) !important;
border-top: 1px dashed var(--rc-rule-soft);
padding-top: 10px;
margin-top: 8px;
}
/* H. Glossary intro */
.glossary-intro p,
.glossary-page > p {
font-size: 1.05rem !important;
color: var(--rc-ink-soft) !important;
max-width: 60ch;
line-height: 1.55;
}
/* I. Settings stat cards — use mono labels, Fraunces numbers */
.settings-stat,
.settings-stat-card {
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
padding: 18px !important;
box-shadow: none !important;
}
.settings-stat-value {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 120 !important;
font-size: 1.8rem !important;
color: var(--rc-ink) !important;
line-height: 1 !important;
letter-spacing: -0.02em;
}
.settings-stat-label,
.settings-stat .label {
font-family: var(--rc-mono) !important;
font-size: 0.64rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
font-weight: 600 !important;
color: var(--rc-mute) !important;
margin-top: 6px !important;
}
/* J. Settings section headers */
.settings-section {
border-left: 3px solid var(--rc-cobalt) !important;
background: var(--rc-card) !important;
border-radius: 0 4px 4px 0;
padding: 22px 24px !important;
margin-bottom: 20px;
border-top: 1px solid var(--rc-rule-soft) !important;
border-right: 1px solid var(--rc-rule-soft) !important;
border-bottom: 1px solid var(--rc-rule-soft) !important;
}
.settings-section-label,
.settings-section > [class*="label"]:first-child {
font-family: var(--rc-mono) !important;
font-size: 0.7rem !important;
letter-spacing: 0.2em !important;
font-weight: 700 !important;
text-transform: uppercase;
color: var(--rc-mute) !important;
margin-bottom: 10px !important;
}
/* K. Clear All Progress button — soften the red, use coral */
.clear-progress-btn,
button.clear-progress-btn,
#clear-progress-btn {
background: var(--rc-coral-deep) !important;
color: var(--rc-paper) !important;
border: 1px solid var(--rc-coral-deep) !important;
font-family: var(--rc-sans) !important;
font-weight: 600 !important;
border-radius: 4px !important;
padding: 11px 18px !important;
transition: background 120ms ease;
}
.clear-progress-btn:hover { background: var(--rc-coral) !important; }
/* ================================================================
PATCH 10 — Module page chapter feel + nav polish
================================================================ */
/* A. Module page H1 — add a coral underline accent that mirrors
the phase numerals on the homepage so the module reads as
a chapter in the same handbook. */
.module-page-header h1 {
position: relative;
padding-bottom: 6px;
display: inline-block;
}
.module-page-header h1::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 56px;
height: 3px;
background: var(--rc-coral);
}
/* B. Module page back link arrow + label spacing */
.module-page .back-link {
align-items: center;
color: var(--rc-mute) !important;
}
.module-page .back-link:hover { color: var(--rc-ink) !important; }
/* C. "MODULE 1 OF 21" header strip — a touch more editorial */
.module-progress-bar,
.module-progress-strip {
background: transparent !important;
border-bottom: 1px solid var(--rc-rule-soft) !important;
padding: 18px 0 22px !important;
margin-bottom: 32px;
}
.module-progress-label,
.module-progress-bar > [class*="label"]:first-child {
font-family: var(--rc-mono) !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
font-size: 0.72rem !important;
color: var(--rc-mute) !important;
text-transform: uppercase;
}
/* D. "Phase 1 · Getting Started" link on the right of module strip —
let it inherit our cobalt link color */
.module-progress-bar a,
.module-progress-strip a {
color: var(--rc-cobalt) !important;
font-family: var(--rc-sans) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
text-decoration: none !important;
}
.module-progress-bar a:hover { text-decoration: underline !important; }
/* E. The 1-21 progress bar inside the module-progress strip */
.module-progress-bar [class*="segment"],
.module-progress-track [class*="cell"],
.module-progress-cells > * {
height: 4px !important;
border-radius: 1px !important;
}
/* F. "ON THIS PAGE" floating TOC — make it feel like a sidebar
annotation, not a tacked-on widget. */
.on-this-page,
.toc,
nav.toc,
aside.on-this-page,
[class*="on-this-page"],
[class*="table-of-contents"] {
border-left: 2px solid var(--rc-rule-soft) !important;
padding: 0 0 0 16px !important;
background: transparent !important;
box-shadow: none !important;
}
.on-this-page h2,
.on-this-page h3,
.toc h2,
.toc-title {
font-family: var(--rc-mono) !important;
font-size: 0.72rem !important;
letter-spacing: 0.2em !important;
font-weight: 700 !important;
text-transform: uppercase;
color: var(--rc-mute) !important;
margin: 0 0 12px !important;
}
.on-this-page a,
.toc a {
color: var(--rc-ink-soft) !important;
text-decoration: none !important;
font-size: 0.9rem !important;
}
.on-this-page a:hover,
.toc a:hover { color: var(--rc-ink) !important; }
.on-this-page a.active,
.toc a.active { color: var(--rc-coral-deep) !important; font-weight: 600; }
/* G. Bottom-left "Navigate · Esc Home" floater — make it less
assertive: minimal box with mono type. */
.kbd-hints,
.kbd-navigate,
.nav-hint-floater,
[class*="keyboard-hint"],
[class*="kbd-overlay"] {
background: rgba(245, 241, 230, 0.92) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
padding: 8px 12px !important;
font-family: var(--rc-mono) !important;
font-size: 0.74rem !important;
color: var(--rc-mute) !important;
box-shadow: var(--shadow-sm) !important;
}
/* H. Dev "Review: ON" + "Dark Mode" pills in the navbar — make
them smaller / quieter so they read as dev tools, not features. */
.review-toggle-btn,
.theme-toggle-btn,
.dark-mode-btn,
button[data-action*="theme"] {
font-size: 0.72rem !important;
padding: 5px 10px !important;
min-height: 28px !important;
border-radius: 3px !important;
background: transparent !important;
border: 1px solid var(--rc-rule-soft) !important;
color: var(--rc-mute) !important;
font-family: var(--rc-mono) !important;
font-weight: 600 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.review-toggle-btn:hover,
.theme-toggle-btn:hover { color: var(--rc-ink) !important; border-color: var(--rc-ink) !important; }
/* I. "Review Mode — all phases unlocked" banner — make it less
visually loud (gradient amber → ink translucent strip) */
.review-banner,
.review-mode-banner,
[class*="review-banner"] {
background: rgba(15, 20, 25, 0.92) !important;
color: var(--rc-paper-soft) !important;
border-bottom: 1px solid var(--rc-rule);
font-family: var(--rc-mono) !important;
font-size: 0.74rem !important;
letter-spacing: 0.06em !important;
padding: 6px 16px !important;
}
.review-banner button,
.review-banner-dismiss {
background: var(--rc-coral) !important;
color: var(--rc-paper) !important;
border: 0 !important;
border-radius: 3px !important;
padding: 4px 12px !important;
font-family: var(--rc-mono) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* J. Knowledge check / quiz block (end of module page) — give it a
proper chapter-ending feel */
.knowledge-check,
.quiz-block,
.module-quiz,
section[class*="knowledge-check"] {
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule) !important;
border-radius: 4px !important;
padding: 36px 36px 32px !important;
margin: 56px 0 24px !important;
position: relative;
box-shadow: var(--shadow-md);
}
.knowledge-check::before {
content: "CHECK YOUR UNDERSTANDING";
position: absolute;
top: -10px;
left: 22px;
background: var(--rc-paper);
padding: 0 8px;
font-family: var(--rc-mono);
font-size: 0.66rem;
letter-spacing: 0.22em;
font-weight: 700;
color: var(--rc-coral-deep);
}
.knowledge-check h2,
.knowledge-check h3 {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 80, "SOFT" 30 !important;
font-size: 1.4rem !important;
color: var(--rc-ink) !important;
margin: 0 0 18px !important;
letter-spacing: -0.02em;
}
.knowledge-check button {
font-family: var(--rc-sans);
font-weight: 500;
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
padding: 12px 16px;
color: var(--rc-ink);
text-align: left;
transition: border-color 120ms ease, background 120ms ease;
cursor: pointer;
}
.knowledge-check button:hover { border-color: var(--rc-ink); background: var(--rc-card-soft); }
.knowledge-check button.correct {
border-color: var(--rc-green) !important;
background: rgba(46, 125, 73, 0.06) !important;
color: var(--rc-green) !important;
}
.knowledge-check button.incorrect {
border-color: var(--rc-coral-deep) !important;
background: rgba(217, 88, 59, 0.06) !important;
color: var(--rc-coral-deep) !important;
}
/* K. Module page next/prev navigation at the bottom — give it
structure */
.module-nav,
.module-bottom-nav,
.module-page-footer,
.module-next-prev,
nav[class*="module-nav"] {
display: flex !important;
justify-content: space-between !important;
gap: 18px !important;
margin: 56px 0 0 !important;
padding-top: 32px !important;
border-top: 1px solid var(--rc-rule-soft) !important;
}
.module-nav a,
.module-bottom-nav a {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
text-decoration: none !important;
padding: 14px 18px !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
color: var(--rc-ink) !important;
transition: border-color 120ms ease, background 120ms ease !important;
max-width: 320px;
}
.module-nav a:hover { border-color: var(--rc-ink) !important; background: var(--rc-card) !important; }
.module-nav a > .label,
.module-nav a > .direction,
.module-nav a > small {
font-family: var(--rc-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rc-mute);
font-weight: 700;
}
.module-nav a > .title,
.module-nav a > strong {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 40, "SOFT" 30;
font-size: 1.1rem;
color: var(--rc-ink);
letter-spacing: -0.015em;
}
/* L. Sub-headers inside module content (h2 with §) — give them
a small mono section label above */
.content-section h2 { margin-top: 32px; }
.content-section + .content-section { margin-top: 48px; }
/* M. Inline images inside workflow-step — give them a subtle frame */
.workflow-step img {
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 3px !important;
box-shadow: var(--shadow-sm);
background: var(--rc-card);
}
/* N. KBD chips inside module steps */
.workflow-step kbd,
.content-section kbd {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-bottom-width: 2px;
padding: 1px 6px;
border-radius: 3px;
font-family: var(--rc-mono);
font-size: 0.78em;
color: var(--rc-ink);
}
/* ================================================================
PATCH 11 — Fix module page H1 layout + minor polish
================================================================ */
/* A. Module page H1 must be block — patch 10 set it inline-block
so the underline could anchor, but that put the back-link
next to the title. Use a wrapper trick instead. */
.module-page-header h1 {
display: block !important;
position: relative;
padding-bottom: 8px;
padding-left: 0;
width: max-content;
max-width: 100%;
}
/* B. Module page back-link should be BLOCK above the title */
.module-page .back-link {
display: inline-flex !important;
margin-bottom: 18px !important;
}
/* C. Module header chip row (the "01 EXPLORE") sits between
back-link and h1 */
.module-page-header .module-header {
display: flex !important;
align-items: center;
gap: 10px !important;
margin: 8px 0 12px !important;
}
/* D. Don't disrupt the underline accent — keep coral line */
.module-page-header h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 56px;
height: 3px;
background: var(--rc-coral);
}
/* E. Smart-resume hero-meta text — make the "6 of 21 modules
complete" subtle */
#hero .hero-meta,
#hero p.hero-meta {
font-family: var(--rc-mono);
font-size: 0.78rem;
color: var(--rc-mute);
letter-spacing: 0.06em;
margin-top: 14px !important;
}
/* F. Module page module-page-header bottom border — softer */
.module-page-header {
border-bottom: 1px solid var(--rc-rule-soft) !important;
}
/* G. Module page description max-width */
.module-page-header .module-desc {
max-width: 60ch !important;
}
/* ================================================================
PATCH FINAL — Quiz block (kc-*) + remaining inner-page polish
================================================================ */
/* ---------- A. Knowledge-check quiz block (real class names) ----- */
/* Confirmed classes: .knowledge-check, .kc-header, .kc-questions,
.kc-question, .kc-options, .kc-option */
.knowledge-check {
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule) !important;
border-radius: 4px !important;
padding: 38px 36px 32px !important;
margin: 64px 0 32px !important;
position: relative;
box-shadow: var(--shadow-md) !important;
}
.knowledge-check::before {
content: "CHECK YOUR UNDERSTANDING";
position: absolute;
top: -10px;
left: 24px;
background: var(--rc-paper);
padding: 0 10px;
font-family: var(--rc-mono);
font-size: 0.66rem;
letter-spacing: 0.22em;
font-weight: 700;
color: var(--rc-coral-deep);
text-transform: uppercase;
}
.knowledge-check .kc-header,
.knowledge-check h2,
.knowledge-check h3 {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 80, "SOFT" 30 !important;
font-size: 1.5rem !important;
color: var(--rc-ink) !important;
margin: 4px 0 20px !important;
letter-spacing: -0.02em;
line-height: 1.15;
}
.knowledge-check .kc-intro,
.knowledge-check > p {
color: var(--rc-ink-soft) !important;
margin-bottom: 22px;
}
/* Questions stack */
.kc-questions {
display: flex !important;
flex-direction: column;
gap: 28px !important;
}
/* Each question block */
.kc-question {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.kc-question > h4,
.kc-question > .kc-question-text,
.kc-question > p:first-child,
.kc-question > [class*="prompt"] {
font-family: var(--rc-display) !important;
font-weight: 500 !important;
font-variation-settings: "opsz" 60, "SOFT" 30 !important;
font-size: 1.12rem !important;
color: var(--rc-ink) !important;
margin: 0 0 12px !important;
letter-spacing: -0.015em;
line-height: 1.3;
}
/* Options group */
.kc-options {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
/* Option button — the actual buttons */
.kc-option {
display: flex !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
text-align: left !important;
font-family: var(--rc-sans) !important;
font-weight: 500 !important;
font-size: 0.96rem !important;
color: var(--rc-ink) !important;
background: var(--rc-card) !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
padding: 13px 18px !important;
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease, transform 80ms ease !important;
position: relative;
line-height: 1.4;
}
/* Letter chip prefix on each option — like A, B, C, D in a test */
.kc-option::before {
content: counter(opt, upper-alpha) "";
counter-increment: opt;
flex-shrink: 0;
width: 26px;
height: 26px;
background: var(--rc-paper-deep);
border: 1px solid var(--rc-rule-soft);
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--rc-mono);
font-size: 0.74rem;
font-weight: 700;
color: var(--rc-ink);
line-height: 1;
}
.kc-options { counter-reset: opt; }
.kc-option:hover {
border-color: var(--rc-ink) !important;
background: var(--rc-card-soft) !important;
}
.kc-option:active { transform: translateY(1px); }
/* Selected state */
.kc-option.selected,
.kc-option[aria-pressed="true"] {
border-color: var(--rc-cobalt) !important;
background: var(--rc-cobalt-tint) !important;
}
.kc-option.selected::before,
.kc-option[aria-pressed="true"]::before {
background: var(--rc-cobalt) !important;
color: var(--rc-paper) !important;
border-color: var(--rc-cobalt) !important;
}
/* Correct / incorrect feedback */
.kc-option.correct,
.kc-option[data-correct="true"] {
border-color: var(--rc-green) !important;
background: rgba(46, 125, 73, 0.08) !important;
color: var(--rc-green) !important;
}
.kc-option.correct::before,
.kc-option[data-correct="true"]::before {
background: var(--rc-green) !important;
color: var(--rc-paper) !important;
border-color: var(--rc-green) !important;
content: "\2713"; /* checkmark */
}
.kc-option.incorrect,
.kc-option[data-correct="false"] {
border-color: var(--rc-coral-deep) !important;
background: rgba(217, 88, 59, 0.06) !important;
color: var(--rc-coral-deep) !important;
}
.kc-option.incorrect::before,
.kc-option[data-correct="false"]::before {
background: var(--rc-coral-deep) !important;
color: var(--rc-paper) !important;
border-color: var(--rc-coral-deep) !important;
content: "\00D7"; /* x mark */
}
.kc-option:disabled {
cursor: default;
pointer-events: none;
}
/* Submit / next button */
.knowledge-check .kc-submit,
.knowledge-check [class*="submit"],
.knowledge-check .kc-next,
.knowledge-check button.next {
background: var(--rc-ink) !important;
color: var(--rc-paper) !important;
border: 1px solid var(--rc-ink) !important;
border-radius: 4px;
padding: 12px 22px;
font-family: var(--rc-sans);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
margin-top: 16px;
transition: background 120ms ease, transform 80ms ease;
}
.knowledge-check .kc-submit:hover { background: var(--rc-cobalt) !important; }
/* Feedback line under questions */
.kc-feedback,
.knowledge-check [class*="feedback"],
.kc-explanation {
font-family: var(--rc-sans);
font-size: 0.92rem;
color: var(--rc-ink-soft);
background: var(--rc-card-soft);
border-left: 3px solid var(--rc-cobalt);
padding: 12px 16px;
border-radius: 0 4px 4px 0;
margin-top: 12px;
line-height: 1.55;
}
.kc-feedback.correct { border-left-color: var(--rc-green); }
.kc-feedback.incorrect { border-left-color: var(--rc-coral-deep); }
/* Score / result summary at the end */
.kc-result,
.knowledge-check .kc-score,
.knowledge-check .kc-complete {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 80;
font-size: 1.3rem;
color: var(--rc-ink);
text-align: center;
padding: 20px;
border: 1px dashed var(--rc-rule-soft);
border-radius: 4px;
margin-top: 18px;
}
/* ---------- B. Module content fine-tuning ---------- */
/* Inline images inside content sections — captions could be added
via CSS later but for now, frame nicely */
.content-section img,
.workflow-step img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 3px !important;
background: var(--rc-card);
margin: 14px 0;
box-shadow: var(--shadow-sm);
}
/* "Key action" callouts inside modules — used for pull-quote style */
.key-action {
background: var(--rc-card-soft) !important;
border: 1px solid var(--rc-rule-soft) !important;
border-left: 3px solid var(--rc-coral) !important;
border-radius: 0 4px 4px 0 !important;
padding: 18px 22px !important;
margin: 22px 0 !important;
}
.key-action strong {
display: block;
font-family: var(--rc-mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--rc-coral-deep);
margin-bottom: 6px;
}
.key-action p {
color: var(--rc-ink-soft);
margin: 0;
line-height: 1.55;
}
/* Code blocks inside content */
.content-section code,
code {
font-family: var(--rc-mono);
font-size: 0.88em;
color: var(--rc-cobalt-deep);
background: rgba(28, 93, 207, 0.06);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid rgba(28, 93, 207, 0.18);
}
.content-section pre {
background: var(--rc-ink);
color: var(--rc-paper-soft);
padding: 18px 20px;
border-radius: 4px;
overflow-x: auto;
margin: 18px 0;
font-family: var(--rc-mono);
font-size: 0.9rem;
line-height: 1.55;
}
.content-section pre code {
background: transparent;
border: 0;
padding: 0;
color: var(--rc-paper-soft);
}
/* ---------- C. Module page footer next/prev ---------- */
.module-footer,
.module-page-footer,
nav.module-prev-next,
.module-bottom-nav {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
margin: 64px 0 24px !important;
padding-top: 36px !important;
border-top: 1px solid var(--rc-rule-soft) !important;
}
.module-footer a,
.module-page-footer a,
nav.module-prev-next a,
.module-bottom-nav a {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 18px 22px !important;
border: 1px solid var(--rc-rule-soft) !important;
border-radius: 4px !important;
color: var(--rc-ink) !important;
text-decoration: none !important;
transition: border-color 140ms ease, background 140ms ease !important;
line-height: 1.3;
}
.module-footer a:hover,
.module-page-footer a:hover { border-color: var(--rc-ink) !important; background: var(--rc-card-soft) !important; }
.module-footer a.prev,
.module-footer a:first-child { text-align: left; }
.module-footer a.next,
.module-footer a:last-child { text-align: right; }
/* ---------- D. "On this page" TOC at bottom of header (mono links) - */
.module-page-header + .toc,
.module-toc,
.on-this-page,
.module-page-header > .toc {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--rc-rule-soft);
}
.module-toc h3,
.on-this-page h3 {
font-family: var(--rc-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: var(--rc-mute);
margin: 0 0 14px;
}
.module-toc ol,
.module-toc ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px 24px;
counter-reset: toc;
}
.module-toc li { counter-increment: toc; }
.module-toc li::before {
content: "0" counter(toc) " ";
font-family: var(--rc-mono);
font-size: 0.74rem;
color: var(--rc-mute);
font-weight: 700;
letter-spacing: 0.05em;
}
.module-toc a {
color: var(--rc-cobalt);
text-decoration: none;
font-weight: 500;
}
.module-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- E. Module page H1 chapter ornament -------------------- */
/* Add a small "MODULE" eyebrow above the H1 for chapter feel */
/* (Already have module-progress strip; this is supplementary if
that's not present.) */
.module-page-header > .module-header .module-number {
background: var(--rc-paper-soft);
border: 1px solid var(--rc-rule);
border-radius: 3px;
padding: 3px 8px;
font-family: var(--rc-mono);
font-weight: 700;
font-size: 0.85rem;
color: var(--rc-ink);
letter-spacing: 0.05em;
}
.module-page-header > .module-header .module-tag {
background: transparent;
color: var(--rc-cobalt);
border: 0;
padding: 3px 8px;
font-family: var(--rc-mono);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ---------- F. Section progress bar inside modules ---------------- */
.section-progress,
.section-progress-bar {
height: 2px;
background: rgba(0,0,0,0.04);
margin: 24px 0;
}
.section-progress-fill {
height: 100%;
background: var(--rc-coral);
transition: width 360ms ease;
}
/* ---------- G. Glossary search empty state ----------------------- */
.glossary-no-results,
.glossary-empty,
.glossary-grid:empty + .glossary-no-results {
text-align: center;
color: var(--rc-mute);
font-family: var(--rc-display);
font-style: italic;
font-size: 1.1rem;
padding: 60px 20px;
border: 1px dashed var(--rc-rule-soft);
border-radius: 4px;
margin: 24px 0;
}
/* ---------- H. Settings page additional polish ------------------- */
.settings-page .container,
.settings-content {
max-width: 920px;
margin: 0 auto;
}
.settings-page h1,
.settings-content h1 {
margin: 56px 0 8px !important;
}
.theme-toggle-row,
.settings-toggle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 0;
}
/* ---------- I. Login page extras --------------------------------- */
.login-page {
min-height: calc(100vh - 240px);
display: grid;
place-items: center;
padding: 60px 24px;
}
.login-card {
max-width: 460px;
width: 100%;
}
.login-footer-note,
.login-fine-print {
font-family: var(--rc-mono);
font-size: 0.72rem;
color: var(--rc-mute);
margin-top: 18px;
letter-spacing: 0.04em;
}
/* ---------- J. Class join page ------------------------------------ */
.join-class-page,
.join-page {
min-height: calc(100vh - 240px);
display: grid;
place-items: center;
padding: 60px 24px;
}
.join-form,
.join-class-form {
background: var(--rc-card);
border: 1px solid var(--rc-rule);
border-radius: 4px;
box-shadow: var(--shadow-lg);
padding: 36px;
max-width: 460px;
width: 100%;
position: relative;
}
.join-form::before {
content: "JOIN A CLASS";
position: absolute;
top: -10px;
left: 18px;
background: var(--rc-paper);
padding: 0 8px;
font-family: var(--rc-mono);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--rc-mute);
}
.join-form input[type="text"],
.join-class-input {
width: 100%;
background: var(--rc-paper-soft);
border: 1px solid var(--rc-rule);
border-radius: 4px;
padding: 13px 16px;
font-family: var(--rc-mono);
font-size: 1rem;
color: var(--rc-ink);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.join-form input[type="text"]:focus {
outline: none;
border-color: var(--rc-ink);
box-shadow: 0 0 0 3px var(--rc-cobalt-tint);
}
/* ---------- K. Dashboard page ------------------------------------ */
.dashboard-page h1,
.dashboard h1 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 120, "SOFT" 30;
font-size: clamp(2.2rem, 4vw, 3rem);
letter-spacing: -0.025em;
color: var(--rc-ink);
margin-bottom: 12px;
}
.dashboard-section,
.class-card,
.class-tile {
background: var(--rc-card);
border: 1px solid var(--rc-rule-soft);
border-radius: 4px;
padding: 22px;
margin: 16px 0;
transition: border-color 140ms ease;
}
.class-card:hover,
.class-tile:hover { border-color: var(--rc-ink); }
.class-card h3,
.class-tile h3 {
font-family: var(--rc-display);
font-weight: 500;
font-variation-settings: "opsz" 60, "SOFT" 30;
font-size: 1.25rem;
color: var(--rc-ink);
margin-bottom: 6px;
letter-spacing: -0.015em;
}
/* ---------- L. Diagram-mount (interactive demos) ------------------ */
.diagram-mount {
border: 1px solid var(--rc-rule);
border-radius: 4px;
background: var(--rc-card);
padding: 20px;
margin: 18px 0;
box-shadow: var(--shadow-sm);
}
/* ---------- M. Tighten the navbar on shrunk widths ---------------- */
@media (max-width: 980px) {
#navbar .nav-cmdk-text { display: none; }
#navbar .nav-cmdk { padding: 6px 8px; }
}
@media (max-width: 720px) {
#navbar .nav-container { gap: 10px; padding: 12px 18px; }
#navbar .nav-logo { font-size: 1.15rem; }
#navbar .nav-cmdk { display: none; }
#navbar .nav-links { gap: 2px; }
#navbar .nav-links a { padding: 6px 10px; font-size: 0.86rem; }
}
/* ---------- N. Focus states everywhere (a11y) --------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
outline: 2px solid var(--rc-cobalt) !important;
outline-offset: 2px !important;
border-radius: 3px;
}
/* ---------- O. Hover lift on team cards --------------------------- */
.rc-team {
transition: background 140ms ease, transform 200ms ease !important;
}
.rc-team:hover { background: var(--rc-card-soft) !important; }
/* ---------- P. Print stylesheet (handbook printout) --------------- */
@media print {
body {
background: white !important;
background-image: none !important;
color: black !important;
}
#navbar, footer, .review-banner, .skip-link,
.review-toggle-btn, .theme-toggle-btn,
.kbd-hints, [class*="kbd-overlay"] { display: none !important; }
a { color: black !important; text-decoration: underline; }
.module-page, .container { max-width: none !important; padding: 0 !important; }
.module-card-link { break-inside: avoid; }
.knowledge-check, .key-action, .concept-block { break-inside: avoid; }
}
/* Current Phase stat card — minimal, de-emphasised, tighter spacing */
#stats-tracker .stat-card--phase {
grid-template-columns: 1fr;
gap: 0;
padding: 10px 14px;
justify-items: start;
}
#stats-tracker .stat-card--phase .stat-card-icon { display: none; }
#stats-tracker .stat-card--phase .stat-card-value { font-size: 1.2rem; }
#stats-tracker .stat-card--phase .stat-card-total { font-size: 0.78rem; margin-left: 2px; }
#stats-tracker .stat-card--phase .stat-card-label { opacity: 0.75; }
/* Minimal phase grouping on the homepage roadmap */
.phase-block { margin-top: 44px; }
.phase-block:first-of-type { margin-top: 20px; }
.phase-block-title {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 14px;
font-family: var(--rc-display);
font-weight: 500;
font-size: clamp(1.25rem, 2vw, 1.55rem);
color: var(--rc-ink);
letter-spacing: -0.01em;
}
.phase-block-num {
font-family: var(--rc-mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--rc-mute);
white-space: nowrap;
}
/* Bottom prev/next nav — spacing + centered pair */
.module-nav-bottom {
justify-content: center !important;
align-items: center !important;
gap: 28px !important;
margin-bottom: 80px !important;
}
.module-nav-bottom > div { flex: 0 0 auto !important; }
.module-nav-bottom > div:last-child { text-align: center !important; }