/* * themes.css — Swappable Theme Demo * Course Chapter Template · cloudflare-vibe/demo/ * * Architecture: one base layer (all component rules via tokens) + * N theme token-sets scoped by [data-theme] on . * To add a theme: append one [data-theme="x"] { ...token overrides... } block. * No HTML changes required. * * Design tokens (16 swappable): * --font-body --font-head --font-mono * --fs-h1 --fs-h2 --fs-body * --lh-body --space-section * --radius --border-w --border-color * --shadow --shadow-hover --shadow-hard * --bg --surface * --ink --ink-soft --ink-muted * --accent --accent-2 */ /* ═══════════════════════════════════════════════════════════════ THEME TOKEN-SETS Each block redefines ALL tokens. Base layer reads only tokens. ═══════════════════════════════════════════════════════════════ */ /* ── Theme 1: Clean Light (default — nVision Light v3 + Cloudflare orange) ── */ [data-theme="clean-light"] { --font-body: 'Heebo', sans-serif; --font-head: 'Heebo', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-h1: clamp(28px, 4vw, 40px); --fs-h2: 28px; --fs-h3: 22px; --fs-body: 16.5px; --lh-body: 1.9; --space-section: 56px; --radius: 14px; --border-w: 1px; --border-color: #e6e8ef; --border-strong: #d6dae3; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05); --shadow-hover: 0 12px 34px rgba(16,24,40,.10), 0 3px 10px rgba(16,24,40,.05); --shadow-hard: none; --bg: #f8f9fb; --surface: #ffffff; --surface-hover: #f8fafc; --ink: #1a1a2e; --ink-soft: #5b6577; --ink-muted: #94a3b8; --accent: #f6821f; --accent-2: #fbad41; --accent-glow: rgba(246,130,31,.10); --accent-2-glow: rgba(251,173,65,.10); /* component-specific helpers that also change per theme */ --do-now-bg: #f0fdf4; --do-now-border: #bbf7d0; --do-now-rail: #22c55e; --do-now-ink: #15803d; --do-now-badge-bg: #dcfce7; --exercise-bg: #fffbeb; --exercise-border: #fde68a; --exercise-rail: #f59e0b; --exercise-ink: #b45309; --framework-bg: #fff7ed; --framework-border: #fed7aa; --framework-rail: var(--accent); --framework-ink: #c2620f; --warning-bg: #fffbeb; --warning-border: #fef3c7; --warning-rail: #f59e0b; --lo-bg: #eef2ff; --lo-border: #c7d2fe; --lo-rail: #6366f1; --lo-ink: #4f46e5; --prereq-bg: #f8fafc; --prereq-rail: #94a3b8; --prereq-ink: #64748b; --glossary-rail: #8b5cf6; --glossary-ink: #7c3aed; --deliverables-rail: #6366f1; --deliverables-ink: #4f46e5; --check-bg: #faf5ff; --check-border: #e9d5ff; --check-rail: #a855f7; --check-ink: #9333ea; --summary-bg: #eef2ff; --summary-border: #c7d2fe; --summary-rail: #6366f1; --summary-ink: #4f46e5; --work-bg: #f0fdf4; --work-border: #bbf7d0; --work-rail: #22c55e; --work-ink: #15803d; --tip-bg: #eff6ff; --tip-border: #dbeafe; --th-bg: #f1f5f9; --pre-bg: #1e293b; --pre-ink: #e2e8f0; --code-bg: #f1f5f9; --code-ink: #b45309; --nav-bg: rgba(255,255,255,0.85); --nav-border: var(--border-color); --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); --tag-default-bg: #f1f5f9; --tag-default-ink: #475569; } /* ── Theme 2: Paper-Cut (editorial magazine, warm parchment, hard shadows) ── */ [data-theme="paper-cut"] { --font-body: 'Heebo', sans-serif; --font-head: 'Instrument Serif', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-h1: clamp(30px, 4.5vw, 46px); --fs-h2: 30px; --fs-h3: 22px; --fs-body: 16px; --lh-body: 1.85; --space-section: 48px; --radius: 4px; --border-w: 1.5px; --border-color: #11110d; --border-strong: #11110d; /* Hard offset shadows — direction-aware via RTL-safe approach */ --shadow: 4px 6px 0 #11110d; --shadow-hover: 7px 10px 0 #11110d; --shadow-hard: 6px 8px 0 #11110d; --bg: #f4f0e8; --surface: #ede9df; --surface-hover: #e5e0d4; --ink: #11110d; --ink-soft: #3a3830; --ink-muted: #7a7567; --accent: #3f6df6; --accent-2: #f6821f; --accent-glow: rgba(63,109,246,.12); --accent-2-glow: rgba(246,130,31,.12); /* component-specific */ --do-now-bg: #e8f4e8; --do-now-border: #11110d; --do-now-rail: #11110d; --do-now-ink: #1a5c1a; --do-now-badge-bg: #d9ee65; --exercise-bg: #fef8e4; --exercise-border: #11110d; --exercise-rail: #11110d; --exercise-ink: #7a5c00; --framework-bg: #fff3e0; --framework-border: #11110d; --framework-rail: var(--accent-2); --framework-ink: #7a4000; --warning-bg: #fdf5d0; --warning-border: #11110d; --warning-rail: #c79a00; --lo-bg: #e8ecff; --lo-border: #11110d; --lo-rail: var(--accent); --lo-ink: var(--accent); --prereq-bg: #f0ede6; --prereq-rail: #7a7567; --prereq-ink: #7a7567; --glossary-rail: var(--accent); --glossary-ink: var(--accent); --deliverables-rail: var(--accent); --deliverables-ink: var(--accent); --check-bg: #f5f0ff; --check-border: #11110d; --check-rail: #7b50d0; --check-ink: #5c2ea0; --summary-bg: #e8ecff; --summary-border: #11110d; --summary-rail: var(--accent); --summary-ink: var(--accent); --work-bg: #e8f4e8; --work-border: #11110d; --work-rail: #1a5c1a; --work-ink: #1a5c1a; --tip-bg: #e8f0ff; --tip-border: #11110d; --th-bg: #e0dbd0; --pre-bg: #1c1a14; --pre-ink: #f0ece0; --code-bg: #e0dbd0; --code-ink: #7a4000; --nav-bg: rgba(244,240,232,0.92); --nav-border: #11110d; --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); --tag-default-bg: #e0dbd0; --tag-default-ink: #3a3830; } /* ── Theme 3: Neo-Brutalism (stark black/white, thick borders, hot accent) ── */ [data-theme="neo-brutalism"] { --font-body: 'Heebo', sans-serif; --font-head: 'Heebo', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-h1: clamp(32px, 5vw, 52px); --fs-h2: 32px; --fs-h3: 22px; --fs-body: 16px; --lh-body: 1.75; --space-section: 64px; --radius: 0px; --border-w: 3px; --border-color: #000000; --border-strong: #000000; --shadow: 5px 5px 0 #000000; --shadow-hover: 8px 8px 0 #000000; --shadow-hard: 5px 5px 0 #000000; --bg: #ffffff; --surface: #ffffff; --surface-hover: #fff8e6; --ink: #000000; --ink-soft: #1a1a1a; --ink-muted: #444444; --accent: #ff4d00; --accent-2: #ffe600; --accent-glow: rgba(255,77,0,.15); --accent-2-glow: rgba(255,230,0,.15); /* component-specific */ --do-now-bg: #eaffea; --do-now-border: #000; --do-now-rail: #000; --do-now-ink: #006600; --do-now-badge-bg: var(--accent-2); --exercise-bg: #fffde0; --exercise-border: #000; --exercise-rail: #000; --exercise-ink: #000; --framework-bg: var(--accent-2); --framework-border: #000; --framework-rail: #000; --framework-ink: #000; --warning-bg: #ffe8e8; --warning-border: #000; --warning-rail: var(--accent); --lo-bg: #f0f0ff; --lo-border: #000; --lo-rail: #000; --lo-ink: #000; --prereq-bg: #f5f5f5; --prereq-rail: #000; --prereq-ink: #000; --glossary-rail: #000; --glossary-ink: #000; --deliverables-rail: var(--accent); --deliverables-ink: var(--accent); --check-bg: #fff0ff; --check-border: #000; --check-rail: #000; --check-ink: #000; --summary-bg: var(--accent-2); --summary-border: #000; --summary-rail: #000; --summary-ink: #000; --work-bg: #eaffea; --work-border: #000; --work-rail: #000; --work-ink: #006600; --tip-bg: #e8f4ff; --tip-border: #000; --th-bg: #000; --pre-bg: #000000; --pre-ink: #ffffff; --code-bg: #f0f0f0; --code-ink: var(--accent); --nav-bg: #ffffff; --nav-border: #000000; --gradient-accent: var(--accent); --tag-default-bg: #000; --tag-default-ink: #fff; } /* ═══════════════════════════════════════════════════════════════ BASE LAYER — all component rules, references only tokens above ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* RTL-safe transitions — smooth theme swap */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: var(--lh-body); font-size: var(--fs-body); min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; } /* Paper-cut hover lift — cards translate on hover in that theme only */ [data-theme="paper-cut"] .step-box, [data-theme="paper-cut"] .chapter-card, [data-theme="paper-cut"] .do-now, [data-theme="paper-cut"] .exercise, [data-theme="paper-cut"] .framework, [data-theme="paper-cut"] .check-yourself, [data-theme="paper-cut"] .chapter-summary, [data-theme="paper-cut"] .glossary { transition: transform 0.15s ease, box-shadow 0.15s ease; } /* RTL: lift goes right in RTL to match offset direction */ [data-theme="paper-cut"] .step-box:hover, [data-theme="paper-cut"] .do-now:hover, [data-theme="paper-cut"] .exercise:hover, [data-theme="paper-cut"] .framework:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hover); } /* Neo-Brutalism: all-caps mono labels on callout-title */ [data-theme="neo-brutalism"] .callout-title { font-family: var(--font-mono) !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px !important; } /* Neo-Brutalism: heavy heading weight */ [data-theme="neo-brutalism"] h1, [data-theme="neo-brutalism"] h2, [data-theme="neo-brutalism"] h3 { font-weight: 900; } /* Paper-Cut: serif headings */ [data-theme="paper-cut"] h1, [data-theme="paper-cut"] h2, [data-theme="paper-cut"] h3, [data-theme="paper-cut"] .chapter-header h1 { font-family: var(--font-head); font-weight: 400; font-style: italic; letter-spacing: -0.02em; } /* Paper-Cut: code/badge/mono elements */ [data-theme="paper-cut"] .time-badge, [data-theme="paper-cut"] .chapter-num, [data-theme="paper-cut"] .chapter-number, [data-theme="paper-cut"] .checklist li::before { font-family: var(--font-mono); } /* ── Navigation ── */ .nav-bar { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: var(--border-w) solid var(--nav-border); padding: 14px 24px; transition: background 0.3s ease, border-color 0.3s ease; } .nav-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.3px; font-family: var(--font-head); } .nav-logo span { color: var(--accent); } /* Override gradient text for Paper-Cut / Brutalism where background clips look odd */ [data-theme="paper-cut"] .nav-logo span, [data-theme="neo-brutalism"] .nav-logo span { background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: var(--accent); color: var(--accent); } .nav-back { color: var(--ink-soft); text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius); border: var(--border-w) solid var(--border-color); transition: all 0.2s; } .nav-back:hover { color: var(--ink); border-color: var(--accent); background: var(--surface-hover); box-shadow: var(--shadow); } .nav-links { display: flex; gap: 8px; align-items: center; } .nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; padding: 6px 12px; border-radius: var(--radius); transition: all 0.2s; } .nav-links a:hover { color: var(--ink); background: var(--surface-hover); } /* ── Chapter Header ── */ .chapter-header { max-width: 900px; margin: 0 auto; padding: 60px 24px 40px; border-bottom: var(--border-w) solid var(--border-color); } .chapter-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; } .chapter-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--accent); border-radius: var(--radius); font-size: 18px; font-weight: 700; color: white; font-family: var(--font-mono); border: var(--border-w) solid var(--border-color); } [data-theme="neo-brutalism"] .chapter-num { box-shadow: var(--shadow); } .chapter-phase { padding: 4px 12px; border-radius: calc(var(--radius) + 50px); font-size: 12px; font-weight: 600; border: var(--border-w) solid var(--border-color); } .phase-foundation { background: #eef2ff; color: #4f46e5; } .phase-growth { background: #ecfdf5; color: #059669; } .phase-mastery { background: #fef2f2; color: #e11d48; } [data-theme="neo-brutalism"] .phase-foundation, [data-theme="neo-brutalism"] .phase-growth, [data-theme="neo-brutalism"] .phase-mastery { background: var(--accent-2); color: #000; border: 2px solid #000; font-family: var(--font-mono); text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; } [data-theme="paper-cut"] .phase-foundation, [data-theme="paper-cut"] .phase-growth, [data-theme="paper-cut"] .phase-mastery { background: transparent; border: var(--border-w) solid var(--ink); color: var(--ink); font-family: var(--font-mono); font-size: 11px; } .chapter-header h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.25; margin-bottom: 16px; letter-spacing: -0.4px; font-family: var(--font-head); color: var(--ink); } .chapter-header .subtitle { font-size: 18px; color: var(--ink-soft); line-height: 1.7; font-family: var(--font-body); } /* ── Table of Contents ── */ .toc { max-width: 900px; margin: 0 auto; padding: 32px 24px; } .toc-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--ink-soft); font-family: var(--font-head); } [data-theme="neo-brutalism"] .toc-title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; border-bottom: 3px solid #000; padding-bottom: 8px; } .toc-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; } .toc-list a { display: block; padding: 10px 16px; color: var(--ink-soft); text-decoration: none; font-size: 14px; border-radius: var(--radius); border: var(--border-w) solid transparent; transition: all 0.2s; } .toc-list a:hover { color: var(--ink); background: var(--surface); border-color: var(--border-color); box-shadow: var(--shadow); } /* ── Content Area ── */ .content { max-width: 900px; margin: 0 auto; padding: 20px 24px 100px; } .content h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: var(--space-section); margin-bottom: 20px; padding-top: 24px; padding-bottom: 12px; border-top: var(--border-w) solid var(--border-color); scroll-margin-top: 80px; letter-spacing: -0.3px; font-family: var(--font-head); color: var(--ink); } [data-theme="neo-brutalism"] .content h2 { border-bottom: 3px solid #000; } .content h3 { font-size: var(--fs-h3); font-weight: 600; margin: 36px 0 14px; color: var(--accent); font-family: var(--font-head); } [data-theme="neo-brutalism"] .content h3 { font-weight: 900; color: var(--ink); border-right: 6px solid var(--accent); padding-right: 12px; } [data-theme="paper-cut"] .content h3 { font-style: italic; } .content h4 { font-size: 18px; font-weight: 600; margin: 28px 0 12px; font-family: var(--font-head); color: var(--ink); } .content p { margin-bottom: 18px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); } .content ul, .content ol { margin: 0 24px 20px 0; padding: 0; } .content li { margin-bottom: 10px; font-size: 16px; line-height: 1.8; color: var(--ink-soft); } .content li strong { color: var(--ink); } .content strong { font-weight: 600; color: var(--ink); } .content em { color: var(--accent); font-style: normal; font-weight: 600; } [data-theme="paper-cut"] .content em { font-style: italic; font-weight: 400; } /* Inline code + code blocks */ .content code { font-family: var(--font-mono); background: var(--code-bg); color: var(--code-ink); padding: 2px 6px; border-radius: 4px; font-size: 0.88em; direction: ltr; unicode-bidi: embed; border: var(--border-w) solid var(--border-color); } [data-theme="clean-light"] .content code { border: none; border-radius: 6px; } .content pre { background: var(--pre-bg); color: var(--pre-ink); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; margin: 20px 0; direction: ltr; text-align: left; box-shadow: var(--shadow); border: var(--border-w) solid var(--border-color); } .content pre code { background: none; color: inherit; padding: 0; border: none; font-size: 13.5px; line-height: 1.7; } /* ── Callout Boxes (generic tip/warning/example) ── */ .tip, .example, .warning, .stat-box { padding: 20px 24px; border-radius: var(--radius); margin: 24px 0; font-size: 15px; border: var(--border-w) solid var(--border-color); box-shadow: var(--shadow); } .tip { background: var(--tip-bg); border-right: 4px solid var(--accent); } .example { background: var(--surface); border-right: 4px solid var(--accent-2); } .warning { background: var(--warning-bg); border-right: 4px solid var(--warning-rail); } [data-theme="neo-brutalism"] .tip, [data-theme="neo-brutalism"] .example, [data-theme="neo-brutalism"] .warning { border-right-width: 3px; border-right-color: #000; border-color: #000; } .stat-box { background: var(--surface); text-align: center; } .stat-box .big-number { font-size: 36px; font-weight: 800; color: var(--accent); font-family: var(--font-mono); } .callout-title { font-weight: 700; margin-bottom: 8px; display: block; font-family: var(--font-head); } /* ── Tables ── */ .content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; border: var(--border-w) solid var(--border-color); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .content th { background: var(--th-bg); padding: 12px 16px; text-align: right; font-weight: 700; border-bottom: var(--border-w) solid var(--border-color); font-family: var(--font-head); color: var(--ink); } [data-theme="neo-brutalism"] .content th { color: #fff; font-family: var(--font-mono); text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; } .content td { padding: 12px 16px; border-bottom: var(--border-w) solid var(--border-color); color: var(--ink-soft); } .content tr:hover td { background: var(--surface-hover); } /* ── Stats Grid ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; } /* ── Step Boxes ── */ .step-box { background: var(--surface); border: var(--border-w) solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 20px 0; } .step-box .step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); border-radius: 50%; font-size: 14px; font-weight: 700; color: white; margin-left: 12px; font-family: var(--font-mono); } [data-theme="neo-brutalism"] .step-box .step-num { border-radius: 0; border: 2px solid #000; } [data-theme="paper-cut"] .step-box .step-num { border-radius: 0; border: var(--border-w) solid var(--ink); } .step-box h4 { display: inline; margin: 0; } .step-box p { margin-top: 12px; } /* ── Checklist ── */ .checklist { list-style: none; margin: 16px 0; padding: 0; } .checklist li { padding: 8px 0; padding-right: 36px; position: relative; color: var(--ink-soft); } .checklist li::before { content: "[ ]"; position: absolute; right: 0; color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 13px; } /* ── Chapter Navigation ── */ .chapter-nav { max-width: 900px; margin: 0 auto; padding: 40px 24px; display: flex; justify-content: space-between; gap: 16px; border-top: var(--border-w) solid var(--border-color); } .chapter-nav a { display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: var(--border-w) solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; transition: all 0.2s; flex: 1; max-width: 45%; color: inherit; } .chapter-nav a:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); } [data-theme="paper-cut"] .chapter-nav a:hover { transform: translate(-3px, -3px); } [data-theme="neo-brutalism"] .chapter-nav a:hover { transform: translate(-3px, -3px); background: var(--accent-2); } .chapter-nav .label { font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; font-family: var(--font-mono); } .chapter-nav .title { font-size: 15px; font-weight: 600; color: var(--ink); font-family: var(--font-head); } /* ── Footer ── */ .footer { border-top: var(--border-w) solid var(--border-color); padding: 32px 24px; text-align: center; } .footer p { color: var(--ink-muted); font-size: 14px; font-family: var(--font-body); } .footer a { color: var(--accent); text-decoration: none; } /* ── Section Tags ── */ .section-tags { display: flex; gap: 8px; margin: 40px 0 0; flex-wrap: wrap; } .tag { display: inline-block; padding: 3px 11px; border-radius: calc(var(--radius) + 50px); font-size: 11px; font-weight: 600; background: var(--tag-default-bg); color: var(--tag-default-ink); font-family: var(--font-mono); border: var(--border-w) solid var(--border-color); } [data-theme="clean-light"] .tag { border-color: transparent; } [data-theme="paper-cut"] .tag { border-color: var(--ink); } .tag-beginner { background: #dcfce7; color: #15803d; } .tag-intermediate { background: #fef9c3; color: #a16207; } .tag-advanced { background: #fee2e2; color: #b91c1c; } .tag-free { background: #fef3e2; color: #c2620f; } .tag-paid { background: #fee2e2; color: #b91c1c; } .tag-time { background: #eef2ff; color: #4f46e5; } .tag-practical { background: #e0f2fe; color: #0369a1; } .tag-theory { background: #f1f5f9; color: #475569; } [data-theme="neo-brutalism"] .tag-beginner, [data-theme="neo-brutalism"] .tag-intermediate, [data-theme="neo-brutalism"] .tag-advanced, [data-theme="neo-brutalism"] .tag-free, [data-theme="neo-brutalism"] .tag-paid, [data-theme="neo-brutalism"] .tag-time, [data-theme="neo-brutalism"] .tag-practical, [data-theme="neo-brutalism"] .tag-theory { background: #000; color: #fff; border-radius: 0; } /* ── Do Now ── */ .do-now { padding: 18px 22px; border-radius: var(--radius); margin: 22px 0; font-size: 15px; background: var(--do-now-bg); border: var(--border-w) solid var(--do-now-border); border-right: 4px solid var(--do-now-rail); box-shadow: var(--shadow); } .do-now .callout-title { color: var(--do-now-ink); } .do-now .time-badge { display: inline-block; background: var(--do-now-badge-bg); color: var(--do-now-ink); padding: 2px 10px; border-radius: calc(var(--radius) + 50px); font-size: 12px; font-weight: 600; margin-right: 8px; font-family: var(--font-mono); border: var(--border-w) solid var(--border-color); } /* ── Deliverables ── */ .deliverables { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--surface); border: var(--border-w) solid var(--border-color); box-shadow: var(--shadow); border-right: 4px solid var(--deliverables-rail); } .deliverables .callout-title { color: var(--deliverables-ink); font-size: 17px; } .deliverables ul { list-style: none; margin: 12px 0 0; padding: 0; } .deliverables li { padding: 6px 0; padding-right: 28px; position: relative; color: var(--ink-soft); font-size: 15px; } .deliverables li::before { content: "\2713"; position: absolute; right: 0; color: #16a34a; font-weight: 700; font-family: var(--font-mono); } /* ── Exercise ── */ .exercise { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--exercise-bg); border: var(--border-w) solid var(--exercise-border); border-right: 4px solid var(--exercise-rail); box-shadow: var(--shadow); } .exercise .callout-title { color: var(--exercise-ink); } .exercise ol { margin: 12px 24px 0 0; padding: 0; } .exercise li { margin-bottom: 8px; color: var(--ink-soft); } /* ── Learning Objectives ── */ .learning-objectives { padding: 20px 24px; border-radius: var(--radius); margin: 16px 0; background: var(--lo-bg); border: var(--border-w) solid var(--lo-border); border-right: 4px solid var(--lo-rail); box-shadow: var(--shadow); } .learning-objectives .callout-title { color: var(--lo-ink); font-size: 16px; } .learning-objectives ul { list-style: none; margin: 10px 0 0; padding: 0; } .learning-objectives li { padding: 4px 0; padding-right: 26px; position: relative; color: var(--ink-soft); font-size: 15px; } .learning-objectives li::before { content: "\1F3AF"; position: absolute; right: 0; } /* ── Prerequisites ── */ .prerequisites { padding: 20px 24px; border-radius: var(--radius); margin: 16px 0; background: var(--prereq-bg); border: var(--border-w) solid var(--border-color); border-right: 4px solid var(--prereq-rail); box-shadow: var(--shadow); } .prerequisites .callout-title { color: var(--prereq-ink); font-size: 16px; } .prerequisites ul { list-style: none; margin: 10px 0 0; padding: 0; } .prerequisites li { padding: 4px 0; padding-right: 24px; position: relative; color: var(--ink-soft); font-size: 15px; } .prerequisites li::before { content: "\2192"; position: absolute; right: 0; color: var(--prereq-rail); font-weight: 700; } /* ── Project Thread ── */ .project-thread { padding: 20px 24px; border-radius: var(--radius); margin: 16px 0; background: var(--framework-bg); border: var(--border-w) solid var(--framework-border); border-right: 4px solid var(--accent); box-shadow: var(--shadow); } .project-thread .callout-title { color: var(--framework-ink); font-size: 16px; } /* ── Glossary ── */ .glossary { padding: 20px 24px; border-radius: var(--radius); margin: 20px 0; background: var(--surface); border: var(--border-w) solid var(--border-color); box-shadow: var(--shadow); border-right: 4px solid var(--glossary-rail); } .glossary .callout-title { color: var(--glossary-ink); font-size: 16px; } .glossary table { width: 100%; } /* ── Framework ── */ .framework { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--framework-bg); border: var(--border-w) solid var(--framework-border); border-right: 4px solid var(--framework-rail); box-shadow: var(--shadow); } .framework .callout-title { color: var(--framework-ink); font-size: 17px; } .framework table { width: 100%; } /* ── Check Yourself ── */ .check-yourself { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--check-bg); border: var(--border-w) solid var(--check-border); border-right: 4px solid var(--check-rail); box-shadow: var(--shadow); } .check-yourself .callout-title { color: var(--check-ink); font-size: 17px; } .check-yourself ol { margin: 12px 24px 0 0; padding: 0; } .check-yourself li { margin-bottom: 10px; color: var(--ink-soft); } /* ── Chapter Summary ── */ .chapter-summary { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--summary-bg); border: var(--border-w) solid var(--summary-border); border-right: 4px solid var(--summary-rail); box-shadow: var(--shadow); } .chapter-summary .callout-title { color: var(--summary-ink); font-size: 17px; } /* ── Work Routine ── */ .work-routine { padding: 24px; border-radius: var(--radius); margin: 24px 0; background: var(--work-bg); border: var(--border-w) solid var(--work-border); border-right: 4px solid var(--work-rail); box-shadow: var(--shadow); } .work-routine .callout-title { color: var(--work-ink); font-size: 17px; } .work-routine table { width: 100%; } /* ── Hero (Landing Page) ── */ .hero { position: relative; padding: 92px 24px 64px; text-align: center; overflow: hidden; } .hero-content { position: relative; max-width: 800px; margin: 0 auto; } .hero h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 900; line-height: 1.15; margin-bottom: 22px; letter-spacing: -0.5px; color: var(--ink); font-family: var(--font-head); } .hero p { font-size: 18px; color: var(--ink-soft); max-width: 600px; margin: 0 auto 36px; line-height: 1.8; } /* ── Chapter Cards Grid ── */ .chapters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; margin-bottom: 56px; } .chapter-card { position: relative; background: var(--surface); border: var(--border-w) solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; transition: all 0.25s ease; text-decoration: none; color: inherit; display: block; overflow: hidden; } .chapter-card:hover { background: var(--surface-hover); border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-3px); } [data-theme="paper-cut"] .chapter-card:hover { transform: translate(-4px, -4px); } [data-theme="neo-brutalism"] .chapter-card:hover { transform: translate(-4px, -4px); background: var(--accent-2); } .chapter-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--accent); border-radius: var(--radius); font-size: 16px; font-weight: 700; color: white; margin-bottom: 16px; font-family: var(--font-mono); border: var(--border-w) solid var(--border-color); } .chapter-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; font-family: var(--font-head); color: var(--ink); } .chapter-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; } .chapter-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-muted); font-family: var(--font-mono); } /* ── Chapter List / Curriculum ── */ .curriculum { max-width: 920px; margin: 0 auto; padding: 8px 24px 96px; } .chapter-list { display: flex; flex-direction: column; gap: 10px; } .chapter-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--surface); border: var(--border-w) solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: all 0.2s; } .chapter-row:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateX(-3px); } [data-theme="paper-cut"] .chapter-row:hover { transform: translate(-4px, -3px); } [data-theme="neo-brutalism"] .chapter-row:hover { transform: translate(-4px, 0); background: var(--accent-2); } .chapter-row .num { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: var(--radius); font-size: 15px; font-weight: 800; font-family: var(--font-mono); border: var(--border-w) solid var(--border-color); } .chapter-row .row-body { flex: 1; min-width: 0; } .chapter-row .row-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; font-family: var(--font-head); } .chapter-row .row-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .chapter-row .row-meta { font-size: 12px; color: var(--ink-muted); margin-top: 5px; display: flex; gap: 14px; font-family: var(--font-mono); } .chapter-row .go { flex-shrink: 0; color: var(--accent); font-size: 18px; opacity: .6; transition: opacity .2s; } .chapter-row:hover .go { opacity: 1; } /* ── Responsive ── */ @media (max-width: 768px) { .hero { padding: 56px 20px 44px; } .chapters-grid { grid-template-columns: 1fr; } .nav-links { display: none; } .chapter-header { padding: 40px 20px 30px; } .content { padding: 20px 20px 60px; } .content h2 { font-size: 24px; } .chapter-nav { flex-direction: column; } .chapter-nav a { max-width: 100%; } .chapter-row { padding: 14px 16px; gap: 12px; } } /* ── Theme transition (smooth swap) ── */ .do-now, .exercise, .framework, .warning, .tip, .example, .deliverables, .learning-objectives, .prerequisites, .project-thread, .glossary, .check-yourself, .chapter-summary, .work-routine, .step-box, .chapter-card, .chapter-row, .toc-list a, .chapter-nav a, .nav-bar, body, .content h2, .content h3, .tag, .checklist li::before, .content code, .content pre, .content th, .content table { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, font-family 0.1s ease; }