/* ========================================================================== themes.css — additional themes for the Net site Activate by setting The default (no attribute) remains the original light theme. ========================================================================== */ /* ========================================================================== 1. ATELIER — matches the main portfolio (index.html) Dark editorial. Warm gold on near-black. Cormorant Garamond serif for headings, Inter for body, Space Mono for code & meta labels. ========================================================================== */ :root[data-theme="atelier"] { --color-bg: #0a0a0a; --color-bg-2: #101010; --color-bg-3: #161616; --color-text: #d4cfc7; /* warm off-white */ --color-cream: #f5f0e8; /* for headings */ --color-muted: #7a746c; --color-accent: #c9a96e; /* gold */ --color-accent-hover: #e2c99a; /* gold light */ --color-accent-dim: #8a6d3f; --color-border: rgba(201, 169, 110, 0.18); --color-border-soft: rgba(201, 169, 110, 0.08); --color-code-bg: #000000; --color-code-text: #e8dfc9; --color-code-inline-bg: rgba(201, 169, 110, 0.08); --color-code-inline-text:#e2c99a; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-serif: "Cormorant Garamond", Georgia, serif; --font-code: "Space Mono", "Fira Code", ui-monospace, monospace; --shadow: 0 2px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --glow: 0 0 40px rgba(201, 169, 110, 0.06); } :root[data-theme="atelier"] body { background: var(--color-bg); color: var(--color-text); font-weight: 300; letter-spacing: 0.01em; } /* layered atmosphere: subtle vignette + faint grid */ :root[data-theme="atelier"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 600px at 80% -10%, rgba(201, 169, 110, 0.06), transparent 60%), radial-gradient(800px 500px at 10% 110%, rgba(201, 169, 110, 0.04), transparent 60%); } :root[data-theme="atelier"] body > * { position: relative; z-index: 1; } /* ---- typography hierarchy ---- */ :root[data-theme="atelier"] .site-title, :root[data-theme="atelier"] .hero h2, :root[data-theme="atelier"] .courses-heading, :root[data-theme="atelier"] .about h3, :root[data-theme="atelier"] .course-card h4, :root[data-theme="atelier"] .lesson h2, :root[data-theme="atelier"] .lesson h3, :root[data-theme="atelier"] .lesson h4 { font-family: var(--font-serif); font-weight: 400; color: var(--color-cream); letter-spacing: 0.005em; } :root[data-theme="atelier"] .site-title { font-weight: 600; font-size: 1.35rem; color: var(--color-accent); } :root[data-theme="atelier"] .hero h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 300; line-height: 1.1; color: var(--color-cream); } /* serif italic hangs on a single word if present */ :root[data-theme="atelier"] .hero h2 em, :root[data-theme="atelier"] .courses-heading em { font-style: italic; color: var(--color-accent); } :root[data-theme="atelier"] .hero-lede, :root[data-theme="atelier"] .about p, :root[data-theme="atelier"] .course-card p, :root[data-theme="atelier"] .lesson p, :root[data-theme="atelier"] .lesson li { color: var(--color-text); font-weight: 300; line-height: 1.9; } /* ---- header ---- */ :root[data-theme="atelier"] .site-header { background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(18px); border-bottom: 1px solid var(--color-border); } :root[data-theme="atelier"] .site-brand { color: var(--color-muted); font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; } :root[data-theme="atelier"] .site-brand:hover { color: var(--color-accent); } /* ---- hero ---- */ :root[data-theme="atelier"] .hero { border-bottom: 1px solid var(--color-border); padding: 3rem 0 2.5rem; margin-bottom: 3rem; position: relative; } :root[data-theme="atelier"] .hero::before { /* eyebrow */ content: "— קורס לימודי תכנות"; display: block; font-family: var(--font-code); font-size: 0.68rem; letter-spacing: 0.35em; color: var(--color-accent); margin-bottom: 1.75rem; text-transform: uppercase; } /* section headings on landing — use a thin gold line instead of a heavy bar */ :root[data-theme="atelier"] .courses-heading, :root[data-theme="atelier"] .about h3 { font-size: 1.8rem; border-bottom: 0; padding: 0; padding-bottom: 0.4rem; position: relative; margin-bottom: 2rem; } :root[data-theme="atelier"] .courses-heading::after, :root[data-theme="atelier"] .about h3::after { content: ""; position: absolute; right: 0; bottom: 0; width: 80px; height: 1px; background: linear-gradient(to left, var(--color-accent), transparent); } /* ---- course cards ---- */ :root[data-theme="atelier"] .course-card { background: var(--color-bg-2); border: 1px solid var(--color-border-soft); border-radius: 0; /* editorial: sharp corners */ padding: 2.5rem 2rem 2rem; box-shadow: none; transition: border-color 0.4s, transform 0.4s, box-shadow 0.4s; } :root[data-theme="atelier"] .course-card::before { /* hairline at top — replaces left strip */ content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1px; inset: 0 0 auto 0; background: linear-gradient(to right, transparent, var(--color-accent), transparent); transform: scaleX(0); transform-origin: center; transition: transform 0.5s ease; } :root[data-theme="atelier"] .course-card:hover { border-color: var(--color-border); transform: translateY(-4px); box-shadow: var(--glow); } :root[data-theme="atelier"] .course-card:hover::before { transform: scaleX(1); } :root[data-theme="atelier"] .course-badge { background: transparent; color: var(--color-accent); border: 1px solid var(--color-border); border-radius: 0; font-family: var(--font-code); font-size: 0.65rem; letter-spacing: 0.25em; padding: 0.35rem 0.85rem; } :root[data-theme="atelier"] .course-badge.html { background: transparent; color: #e2c99a; } :root[data-theme="atelier"] .course-card h4 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; margin: 0.75rem 0 0.5rem; color: var(--color-cream); } :root[data-theme="atelier"] .course-card p { font-size: 0.95rem; color: var(--color-muted); } :root[data-theme="atelier"] .course-meta li { background: transparent; border: 1px solid var(--color-border-soft); color: var(--color-muted); font-family: var(--font-code); font-size: 0.7rem; letter-spacing: 0.08em; border-radius: 0; padding: 0.25rem 0.7rem; } :root[data-theme="atelier"] .course-cta { font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); } /* ---- about ---- */ :root[data-theme="atelier"] .about { border-top: 1px solid var(--color-border); margin-top: 4rem; padding-top: 3rem; } /* ---- footer ---- */ :root[data-theme="atelier"] .site-footer { border-top: 1px solid var(--color-border); background: transparent; } /* ---- TOC ---- */ :root[data-theme="atelier"] .toc { background: transparent; border-left: 1px solid var(--color-border); } :root[data-theme="atelier"] .toc h2 { font-family: var(--font-code); color: var(--color-accent); font-size: 0.7rem; letter-spacing: 0.3em; } :root[data-theme="atelier"] .toc nav a { color: var(--color-text); font-weight: 300; border-radius: 0; transition: color 0.25s, padding-right 0.25s, border-color 0.25s; border-right: 1px solid transparent; padding-right: 0.9rem; } :root[data-theme="atelier"] .toc nav a::before { color: var(--color-accent-dim); font-family: var(--font-code); font-size: 0.78rem; } :root[data-theme="atelier"] .toc nav a:hover { color: var(--color-accent); background: transparent; border-right-color: var(--color-accent); } :root[data-theme="atelier"] .toc nav a.active { background: transparent; color: var(--color-accent); border-right: 1px solid var(--color-accent); } :root[data-theme="atelier"] .toc nav a.active::before { color: var(--color-accent); } /* ---- lessons ---- */ :root[data-theme="atelier"] .lesson h2 { font-size: 2.6rem; font-weight: 400; border-bottom: 0; padding-bottom: 0.5rem; position: relative; } :root[data-theme="atelier"] .lesson h2::after { content: ""; position: absolute; right: 0; bottom: 0; width: 120px; height: 1px; background: linear-gradient(to left, var(--color-accent), transparent); } :root[data-theme="atelier"] .lesson h3 { font-size: 1.55rem; color: var(--color-accent); } :root[data-theme="atelier"] .lesson h4 { font-size: 1.15rem; color: var(--color-cream); font-style: italic; } /* tables */ :root[data-theme="atelier"] .lesson table { border: 1px solid var(--color-border); } :root[data-theme="atelier"] .lesson th { background: transparent; color: var(--color-accent); border-bottom: 1px solid var(--color-accent); font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; } :root[data-theme="atelier"] .lesson td { border: 1px solid var(--color-border-soft); } :root[data-theme="atelier"] .lesson tbody tr:nth-child(even) { background: rgba(201, 169, 110, 0.025); } /* inline code */ :root[data-theme="atelier"] :not(pre) > code { background: var(--color-code-inline-bg); color: var(--color-code-inline-text); border: 1px solid var(--color-border-soft); border-radius: 2px; font-family: var(--font-code); font-size: 0.88em; } /* code blocks */ :root[data-theme="atelier"] pre, :root[data-theme="atelier"] pre[class*="language-"] { background: var(--color-code-bg); color: var(--color-code-text); border: 1px solid var(--color-border); border-radius: 0; box-shadow: var(--shadow); font-family: var(--font-code); font-size: 0.88rem; } :root[data-theme="atelier"] pre::before { /* gold accent top-line on code blocks */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--color-accent), transparent); } /* copy button */ :root[data-theme="atelier"] .copy-btn { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 0; font-family: var(--font-code); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; padding: 0.3rem 0.7rem; } :root[data-theme="atelier"] .copy-btn:hover { color: var(--color-accent); border-color: var(--color-accent); background: rgba(201, 169, 110, 0.05); } :root[data-theme="atelier"] .copy-btn.copied { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } /* blockquote & tip */ :root[data-theme="atelier"] blockquote { background: var(--color-bg-2); border-right: 2px solid var(--color-accent); color: var(--color-text); border-radius: 0; font-style: italic; font-family: var(--font-serif); font-size: 1.05rem; } :root[data-theme="atelier"] .tip { background: var(--color-bg-2); border-right: 2px solid var(--color-accent); color: var(--color-text); border-radius: 0; } :root[data-theme="atelier"] .tip strong { color: var(--color-accent); } :root[data-theme="atelier"] hr { border-top: 1px solid var(--color-border); } /* lesson nav (prev/next) */ :root[data-theme="atelier"] .lesson-nav { border-top: 1px solid var(--color-border); } :root[data-theme="atelier"] .lesson-nav a { background: transparent; border: 1px solid var(--color-border); border-radius: 0; color: var(--color-text); } :root[data-theme="atelier"] .lesson-nav a:hover { background: transparent; border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--glow); } :root[data-theme="atelier"] .lesson-nav a .direction { font-family: var(--font-code); color: var(--color-accent-dim); letter-spacing: 0.22em; font-size: 0.65rem; } :root[data-theme="atelier"] .lesson-nav a:hover .direction { color: var(--color-accent); } :root[data-theme="atelier"] .lesson-nav a .title { font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem; } /* menu toggle (hamburger) */ :root[data-theme="atelier"] .menu-toggle span { background: var(--color-cream); } /* ========================================================================== 2. TERMINAL — retro IDE vibe, Solarized dark + amber accents ========================================================================== */ :root[data-theme="terminal"] { --color-bg: #0d1117; --color-bg-2: #161b22; --color-bg-3: #1c232d; --color-text: #c9d1d9; --color-cream: #f0f6fc; --color-muted: #7d8590; --color-accent: #58a6ff; /* bright VSCode-blue */ --color-accent-hover: #79b8ff; --color-accent-warm: #f0b429; /* amber highlights */ --color-accent-green: #7ee787; --color-accent-magenta: #d2a8ff; --color-border: #30363d; --color-border-soft: #21262d; --color-code-bg: #010409; --color-code-text: #e6edf3; --color-code-inline-bg: rgba(88, 166, 255, 0.12); --color-code-inline-text:#79c0ff; --font-body: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --font-serif: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --font-code: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --shadow: 0 0 0 1px var(--color-border), 0 2px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 0 0 1px var(--color-accent), 0 8px 40px rgba(88, 166, 255, 0.18); } :root[data-theme="terminal"] body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; font-weight: 400; } /* subtle scanline grid */ :root[data-theme="terminal"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(88, 166, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(88, 166, 255, 0.025) 1px, transparent 1px); background-size: 32px 32px; } :root[data-theme="terminal"] body > * { position: relative; z-index: 1; } /* header */ :root[data-theme="terminal"] .site-header { background: var(--color-bg-2); border-bottom: 1px solid var(--color-border); font-family: var(--font-code); } :root[data-theme="terminal"] .site-title { color: var(--color-accent); font-size: 1rem; font-weight: 700; letter-spacing: 0; } :root[data-theme="terminal"] .site-title::before { content: "$ "; color: var(--color-accent-green); } :root[data-theme="terminal"] .site-brand { color: var(--color-muted); font-family: var(--font-code); font-size: 0.85rem; } :root[data-theme="terminal"] .site-brand:hover { color: var(--color-accent); } /* hero */ :root[data-theme="terminal"] .hero { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 6px; padding: 2rem 2rem 1.75rem; margin-bottom: 2.5rem; position: relative; } :root[data-theme="terminal"] .hero::before { content: "● ● ●"; position: absolute; top: 0.75rem; left: 1rem; color: var(--color-muted); font-size: 0.7rem; letter-spacing: 0.3em; } :root[data-theme="terminal"] .hero::after { content: "~/lessons/README.md"; position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); color: var(--color-muted); font-size: 0.72rem; font-family: var(--font-code); } :root[data-theme="terminal"] .hero h2 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--color-cream); margin-top: 1.5rem; line-height: 1.4; } :root[data-theme="terminal"] .hero h2::before { content: "# "; color: var(--color-accent); } :root[data-theme="terminal"] .hero-lede { color: var(--color-text); font-size: 0.95rem; line-height: 1.75; } /* section headings */ :root[data-theme="terminal"] .courses-heading, :root[data-theme="terminal"] .about h3 { color: var(--color-accent-warm); border-bottom: 1px dashed var(--color-border); border-bottom-width: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0; } :root[data-theme="terminal"] .courses-heading::before, :root[data-theme="terminal"] .about h3::before { content: "// "; color: var(--color-muted); } /* course cards */ :root[data-theme="terminal"] .course-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 6px; padding: 1.75rem 1.6rem; box-shadow: none; font-family: var(--font-code); } :root[data-theme="terminal"] .course-card::before { background: var(--color-accent); width: 3px; } :root[data-theme="terminal"] .course-card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 8px 32px rgba(88, 166, 255, 0.15); } :root[data-theme="terminal"] .course-badge { background: rgba(88, 166, 255, 0.1); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 3px; font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.2rem 0.7rem; } :root[data-theme="terminal"] .course-badge.html { background: rgba(240, 180, 41, 0.1); color: var(--color-accent-warm); border-color: var(--color-accent-warm); } :root[data-theme="terminal"] .course-card h4 { color: var(--color-cream); font-size: 1.15rem; font-weight: 700; } :root[data-theme="terminal"] .course-card h4::before { content: "> "; color: var(--color-accent-green); } :root[data-theme="terminal"] .course-card p { color: var(--color-muted); font-size: 0.9rem; } :root[data-theme="terminal"] .course-meta li { background: var(--color-bg-3); color: var(--color-accent-warm); border: 1px solid var(--color-border); border-radius: 3px; font-family: var(--font-code); font-size: 0.78rem; padding: 0.15rem 0.6rem; } :root[data-theme="terminal"] .course-cta { color: var(--color-accent); font-family: var(--font-code); font-size: 0.88rem; } :root[data-theme="terminal"] .course-cta::before { content: "$ "; color: var(--color-accent-green); } /* about */ :root[data-theme="terminal"] .about p { color: var(--color-text); } /* footer & header borders */ :root[data-theme="terminal"] .site-footer { border-top: 1px solid var(--color-border); } /* TOC */ :root[data-theme="terminal"] .toc { background: var(--color-bg-2); border-left: 1px solid var(--color-border); } :root[data-theme="terminal"] .toc h2 { color: var(--color-accent-warm); font-family: var(--font-code); font-size: 0.75rem; } :root[data-theme="terminal"] .toc h2::before { content: "// "; color: var(--color-muted); } :root[data-theme="terminal"] .toc nav a { color: var(--color-text); font-family: var(--font-code); font-size: 0.85rem; border-radius: 3px; } :root[data-theme="terminal"] .toc nav a::before { color: var(--color-muted); } :root[data-theme="terminal"] .toc nav a:hover { background: var(--color-bg-3); color: var(--color-accent); } :root[data-theme="terminal"] .toc nav a.active { background: rgba(88, 166, 255, 0.12); color: var(--color-accent); border-left: 2px solid var(--color-accent); } :root[data-theme="terminal"] .toc nav a.active::before { color: var(--color-accent); } /* lessons */ :root[data-theme="terminal"] .lesson h2 { color: var(--color-cream); border-bottom: 1px solid var(--color-border); font-size: 1.75rem; } :root[data-theme="terminal"] .lesson h2::before { content: "# "; color: var(--color-accent); } :root[data-theme="terminal"] .lesson h3 { color: var(--color-accent-warm); font-size: 1.25rem; } :root[data-theme="terminal"] .lesson h3::before { content: "## "; color: var(--color-muted); } :root[data-theme="terminal"] .lesson h4 { color: var(--color-accent-green); font-size: 1.05rem; } :root[data-theme="terminal"] .lesson h4::before { content: "### "; color: var(--color-muted); } /* tables */ :root[data-theme="terminal"] .lesson table { border: 1px solid var(--color-border); } :root[data-theme="terminal"] .lesson th { background: var(--color-bg-3); color: var(--color-accent-warm); border-bottom: 1px solid var(--color-accent-warm); } :root[data-theme="terminal"] .lesson td { border: 1px solid var(--color-border); } :root[data-theme="terminal"] .lesson tbody tr:nth-child(even) { background: rgba(88, 166, 255, 0.03); } /* inline code */ :root[data-theme="terminal"] :not(pre) > code { background: var(--color-code-inline-bg); color: var(--color-code-inline-text); border: 1px solid var(--color-border-soft); border-radius: 3px; } /* code blocks */ :root[data-theme="terminal"] pre, :root[data-theme="terminal"] pre[class*="language-"] { background: var(--color-code-bg); color: var(--color-code-text); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: none; } :root[data-theme="terminal"] .copy-btn { background: var(--color-bg-3); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 3px; font-family: var(--font-code); } :root[data-theme="terminal"] .copy-btn:hover { background: rgba(88, 166, 255, 0.1); color: var(--color-accent); border-color: var(--color-accent); } :root[data-theme="terminal"] .copy-btn.copied { background: rgba(126, 231, 135, 0.12); color: var(--color-accent-green); border-color: var(--color-accent-green); } /* blockquote & tip */ :root[data-theme="terminal"] blockquote { background: var(--color-bg-2); border-right: 3px solid var(--color-accent); color: var(--color-text); } :root[data-theme="terminal"] .tip { background: rgba(240, 180, 41, 0.06); border-right: 3px solid var(--color-accent-warm); color: var(--color-text); border-radius: 4px; } :root[data-theme="terminal"] .tip strong { color: var(--color-accent-warm); } :root[data-theme="terminal"] hr { border-top: 1px dashed var(--color-border); } /* lesson nav */ :root[data-theme="terminal"] .lesson-nav { border-top: 1px solid var(--color-border); } :root[data-theme="terminal"] .lesson-nav a { background: var(--color-bg-2); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-code); } :root[data-theme="terminal"] .lesson-nav a:hover { background: var(--color-bg-3); border-color: var(--color-accent); color: var(--color-accent); } :root[data-theme="terminal"] .lesson-nav a .direction { color: var(--color-accent-warm); } :root[data-theme="terminal"] .lesson-nav a .title { color: var(--color-cream); } /* hamburger */ :root[data-theme="terminal"] .menu-toggle span { background: var(--color-accent); } /* ========================================================================== 3. PARCHMENT — scholarly, warm cream with terracotta accent ========================================================================== */ :root[data-theme="parchment"] { --color-bg: #f6f0e0; --color-bg-2: #efe7d2; --color-bg-3: #e8dec3; --color-text: #2d2418; --color-cream: #17130a; --color-muted: #6b5a3e; --color-accent: #9b3824; /* terracotta / manuscript red */ --color-accent-hover: #7a2b1a; --color-accent-dim: #a86a4f; --color-border: #c9bd9a; --color-border-soft: #dcd1ad; --color-code-bg: #1f1a12; --color-code-text: #ead8b8; --color-code-inline-bg: #e8dec3; --color-code-inline-text:#9b3824; --font-body: "Cormorant Garamond", "Georgia", serif; --font-serif: "Cormorant Garamond", "Georgia", serif; --font-code: "IBM Plex Mono", "Courier New", ui-monospace, monospace; --shadow: 0 1px 3px rgba(45, 36, 24, 0.08); --shadow-lg: 0 12px 32px rgba(45, 36, 24, 0.12); } :root[data-theme="parchment"] body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 19px; font-weight: 400; line-height: 1.7; } /* subtle paper grain */ :root[data-theme="parchment"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 20% 30%, rgba(155, 56, 36, 0.03) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(107, 90, 62, 0.04) 0%, transparent 50%); } :root[data-theme="parchment"] body > * { position: relative; z-index: 1; } :root[data-theme="parchment"] .site-header { background: var(--color-bg); border-bottom: 2px double var(--color-border); } :root[data-theme="parchment"] .site-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; color: var(--color-cream); font-style: italic; } :root[data-theme="parchment"] .site-brand { font-family: var(--font-code); font-size: 0.78rem; color: var(--color-muted); letter-spacing: 0.15em; text-transform: uppercase; } /* hero */ :root[data-theme="parchment"] .hero { border-bottom: 2px double var(--color-border); padding: 2.5rem 0 2rem; text-align: center; } :root[data-theme="parchment"] .hero h2 { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 400; color: var(--color-cream); margin-inline: auto; line-height: 1.15; } :root[data-theme="parchment"] .hero h2::before, :root[data-theme="parchment"] .hero h2::after { color: var(--color-accent); margin: 0 0.5rem; font-style: italic; } :root[data-theme="parchment"] .hero h2::before { content: "❦ "; } :root[data-theme="parchment"] .hero h2::after { content: " ❦"; } :root[data-theme="parchment"] .hero-lede { font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-text); margin-inline: auto; text-align: center; max-width: 60ch; } /* section headings */ :root[data-theme="parchment"] .courses-heading, :root[data-theme="parchment"] .about h3 { font-family: var(--font-serif); font-size: 2rem; color: var(--color-accent); border-bottom: 0; padding-bottom: 0; font-style: italic; font-weight: 500; position: relative; padding-left: 1rem; margin: 0 auto 2rem 0; } :root[data-theme="parchment"] .courses-heading::before { content: "§"; color: var(--color-accent-dim); margin-left: 0.5rem; font-style: normal; } /* course cards */ :root[data-theme="parchment"] .course-card { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 3px; padding: 2rem 1.8rem; box-shadow: var(--shadow); } :root[data-theme="parchment"] .course-card::before { background: var(--color-accent); width: 4px; } :root[data-theme="parchment"] .course-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); } :root[data-theme="parchment"] .course-badge { background: var(--color-accent); color: var(--color-bg); border-radius: 2px; font-family: var(--font-code); font-size: 0.75rem; letter-spacing: 0.15em; } :root[data-theme="parchment"] .course-badge.html { background: #b25a2e; } :root[data-theme="parchment"] .course-card h4 { font-family: var(--font-serif); font-size: 1.55rem; font-weight: 600; color: var(--color-cream); font-style: italic; } :root[data-theme="parchment"] .course-card p { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-text); line-height: 1.7; } :root[data-theme="parchment"] .course-meta li { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); font-family: var(--font-code); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; } :root[data-theme="parchment"] .course-cta { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--color-accent); } /* footer */ :root[data-theme="parchment"] .site-footer { border-top: 2px double var(--color-border); } /* TOC */ :root[data-theme="parchment"] .toc { background: var(--color-bg-2); border-left: 2px double var(--color-border); } :root[data-theme="parchment"] .toc h2 { font-family: var(--font-code); color: var(--color-accent); font-size: 0.75rem; letter-spacing: 0.25em; } :root[data-theme="parchment"] .toc nav a { font-family: var(--font-serif); font-size: 1rem; color: var(--color-text); border-radius: 2px; } :root[data-theme="parchment"] .toc nav a::before { color: var(--color-accent-dim); font-family: var(--font-code); } :root[data-theme="parchment"] .toc nav a:hover { background: var(--color-bg-3); color: var(--color-accent); } :root[data-theme="parchment"] .toc nav a.active { background: var(--color-accent); color: var(--color-bg); } :root[data-theme="parchment"] .toc nav a.active::before { color: rgba(246, 240, 224, 0.7); } /* lessons */ :root[data-theme="parchment"] .lesson h2 { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; font-style: italic; color: var(--color-cream); border-bottom: 2px double var(--color-border); padding-bottom: 0.5rem; } :root[data-theme="parchment"] .lesson h3 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-accent); font-style: italic; } :root[data-theme="parchment"] .lesson h4 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-cream); font-weight: 600; } /* tables */ :root[data-theme="parchment"] .lesson table { border: 2px double var(--color-border); } :root[data-theme="parchment"] .lesson th { background: var(--color-accent); color: var(--color-bg); font-family: var(--font-code); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; } :root[data-theme="parchment"] .lesson td { border: 1px solid var(--color-border); } :root[data-theme="parchment"] .lesson tbody tr:nth-child(even) { background: var(--color-bg-2); } /* inline code */ :root[data-theme="parchment"] :not(pre) > code { background: var(--color-bg-3); color: var(--color-accent); border: 1px solid var(--color-border); font-family: var(--font-code); font-size: 0.9em; border-radius: 2px; } /* code blocks */ :root[data-theme="parchment"] pre, :root[data-theme="parchment"] pre[class*="language-"] { background: var(--color-code-bg); color: var(--color-code-text); border: 1px solid #5a4a28; border-radius: 3px; font-family: var(--font-code); box-shadow: var(--shadow); } :root[data-theme="parchment"] .copy-btn { background: rgba(234, 216, 184, 0.1); color: var(--color-code-text); border: 1px solid rgba(234, 216, 184, 0.25); border-radius: 2px; font-family: var(--font-code); } :root[data-theme="parchment"] .copy-btn:hover { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* blockquote & tip */ :root[data-theme="parchment"] blockquote { background: var(--color-bg-2); border-right: 3px solid var(--color-accent); font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--color-text); border-radius: 0; } :root[data-theme="parchment"] .tip { background: #fff7e0; border-right: 3px solid var(--color-accent-dim); font-family: var(--font-serif); color: var(--color-text); border-radius: 0; } :root[data-theme="parchment"] .tip strong { color: var(--color-accent); } :root[data-theme="parchment"] hr { border: 0; height: 14px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: center; margin: 2.5rem 0; } /* lesson nav */ :root[data-theme="parchment"] .lesson-nav { border-top: 2px double var(--color-border); } :root[data-theme="parchment"] .lesson-nav a { background: var(--color-bg-2); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-serif); border-radius: 2px; } :root[data-theme="parchment"] .lesson-nav a:hover { background: var(--color-bg); border-color: var(--color-accent); color: var(--color-accent); } :root[data-theme="parchment"] .lesson-nav a .direction { font-family: var(--font-code); color: var(--color-accent-dim); letter-spacing: 0.15em; } :root[data-theme="parchment"] .lesson-nav a .title { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--color-cream); } /* hamburger */ :root[data-theme="parchment"] .menu-toggle span { background: var(--color-cream); } /* ========================================================================== Theme picker — floating widget (shared across all themes) ========================================================================== */ .theme-picker { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); font-family: var(--font-code, ui-monospace, monospace); transition: background 0.3s, border-color 0.3s; } /* atelier override: sharp corners, gold border */ :root[data-theme="atelier"] .theme-picker { background: rgba(10, 10, 10, 0.9); border: 1px solid var(--color-border); border-radius: 0; backdrop-filter: blur(12px); } :root[data-theme="terminal"] .theme-picker { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 6px; } :root[data-theme="parchment"] .theme-picker { background: var(--color-bg-2); border: 1px solid var(--color-border); border-radius: 2px; } .theme-picker-label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-muted, #6b7280); margin: 0 0.25rem 0.15rem; text-align: right; } .theme-picker-row { display: flex; gap: 0.35rem; } .theme-swatch { width: 2.25rem; height: 2.25rem; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; cursor: pointer; padding: 0; position: relative; overflow: hidden; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.active { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25); } :root[data-theme="atelier"] .theme-swatch.active { border-color: #c9a96e; box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.3); } :root[data-theme="terminal"] .theme-swatch.active { border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3); } :root[data-theme="parchment"].theme-swatch.active, :root[data-theme="parchment"] .theme-swatch.active { border-color: #9b3824; box-shadow: 0 0 0 2px rgba(155, 56, 36, 0.3); } /* each swatch uses two halves to signal bg + accent */ .theme-swatch[data-theme="light"] { background: linear-gradient(135deg, #ffffff 50%, #4f46e5 50%); } .theme-swatch[data-theme="atelier"] { background: linear-gradient(135deg, #0a0a0a 50%, #c9a96e 50%); } .theme-swatch[data-theme="terminal"] { background: linear-gradient(135deg, #0d1117 50%, #58a6ff 50%); } .theme-swatch[data-theme="parchment"] { background: linear-gradient(135deg, #f6f0e0 50%, #9b3824 50%); } /* Prism override: atelier tones */ :root[data-theme="atelier"] code[class*="language-"] .token.comment, :root[data-theme="atelier"] code[class*="language-"] .token.prolog, :root[data-theme="atelier"] code[class*="language-"] .token.doctype, :root[data-theme="atelier"] code[class*="language-"] .token.cdata { color: #5a5349; } :root[data-theme="atelier"] code[class*="language-"] .token.keyword, :root[data-theme="atelier"] code[class*="language-"] .token.tag { color: #c9a96e; } :root[data-theme="atelier"] code[class*="language-"] .token.string, :root[data-theme="atelier"] code[class*="language-"] .token.char { color: #d4b98a; } :root[data-theme="atelier"] code[class*="language-"] .token.number, :root[data-theme="atelier"] code[class*="language-"] .token.boolean { color: #e2c99a; } :root[data-theme="atelier"] code[class*="language-"] .token.class-name, :root[data-theme="atelier"] code[class*="language-"] .token.function { color: #f5f0e8; } :root[data-theme="atelier"] code[class*="language-"] .token.punctuation { color: #7a746c; } /* ========================================================================== Inline theme picker (mounted in .site-header) — luxury style ========================================================================== */ .site-theme { display: flex; align-items: center; } .theme-picker--inline { position: static; flex-direction: row; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; background: transparent; border: 1px solid var(--color-border, rgba(201, 169, 110, 0.3)); border-radius: 999px; box-shadow: none; backdrop-filter: none; transition: border-color 0.3s, background 0.3s; } .theme-picker--inline:hover { border-color: var(--color-accent, #c9a96e); } .theme-picker--inline .theme-picker-label { display: none; } .theme-picker--inline .theme-picker-row { display: flex; gap: 0.35rem; margin: 0; } .theme-picker--inline .theme-swatch { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .theme-picker--inline .theme-swatch:hover { transform: scale(1.15); } .theme-picker--inline .theme-swatch.active { transform: scale(1.1); } :root[data-theme="atelier"] .theme-picker--inline .theme-swatch.active { border-color: #c9a96e; box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.35); } :root[data-theme="terminal"] .theme-picker--inline .theme-swatch.active { border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3); } :root[data-theme="parchment"] .theme-picker--inline .theme-swatch.active { border-color: #9b3824; box-shadow: 0 0 0 2px rgba(155, 56, 36, 0.3); } .theme-picker--inline .theme-swatch.active:not(.no-default) { box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25); border-color: #4f46e5; } :root[data-theme="atelier"] .theme-picker--inline, :root[data-theme="terminal"] .theme-picker--inline, :root[data-theme="parchment"] .theme-picker--inline { border-radius: 999px; background: transparent; backdrop-filter: none; } @media (max-width: 600px) { .theme-picker--inline { padding: 0.25rem 0.45rem; gap: 0.3rem; } .theme-picker--inline .theme-swatch { width: 1rem; height: 1rem; } }