/* ============================================================ Eight deck styles. Each overrides the tokens declared in deck.css :root, plus a few structural rules where the look needs more than a recolor. Applied via — see deck.js. ============================================================ */ /* ─── 1. Classroom ────────────────────────────────────────── The original PowerPoint look: navy + coral, warm paper. */ [data-style="classroom"] { /* tokens are the :root defaults */ } /* ─── 2. Notebook ─────────────────────────────────────────── Ruled paper, handwritten headings, taped index cards. */ [data-style="notebook"] { --ink: #2E2A25; --accent: #D1495B; --accent2: #2E6171; --accent3: #97723A; --muted: #7C7266; --slide-bg: #FDFBF4; --card: #FFFDF7; --line: #E0D8C4; --wash: #F5F0E1; --paper: #FDFBF4; /* faint horizontal rule lines + a red margin, like lined paper */ --slide-img: linear-gradient(to bottom, transparent 95%, #E4DCC8 95%), linear-gradient(to right, transparent 0 44px, #EBC9C2 44px 46px, transparent 46px); --title-font: "Caveat", "Segoe Script", cursive; --body-font: "Nunito", "Segoe UI", system-ui, sans-serif; --expr-font: "Caveat", cursive; --title-size: 56px; --cover-size: 88px; --title-weight: 700; --r-sm: 4px; --r-md: 5px; --r-lg: 6px; --r-num: 50%; --shadow: 2px 3px 0 rgba(46,42,37,.10); --panel-shadow: 2px 3px 0 rgba(46,42,37,.08); --cover-bg: linear-gradient(160deg, #2E6171 0%, #24505E 100%); --cover-eyebrow: #F2D492; --cover-sub: #F0EDE2; --cover-meta: #A9C4CC; } [data-style="notebook"] .slide { background-size: 100% 34px, 100% 100%; } [data-style="notebook"] .s-title { letter-spacing: .01em; } [data-style="notebook"] .expr .head { font-size: 38px; } [data-style="notebook"] .cards .c { border: 1px solid var(--line); border-top: 5px solid var(--accent); transform: rotate(-.5deg); } [data-style="notebook"] .cards .c:nth-child(even) { transform: rotate(.6deg); } [data-style="notebook"] .vocab .v, [data-style="notebook"] .steps .st { border: 1px solid var(--line); } /* ─── 3. Editorial ────────────────────────────────────────── Magazine: enormous serif display type, black/white, one red. */ [data-style="editorial"] { --ink: #111111; --accent: #E5322D; --accent2: #111111; --accent3: #8A8A8A; --muted: #767676; --slide-bg: #FFFFFF; --card: #FFFFFF; --line: #DCDCDC; --wash: #F4F2EF; --paper: #F7F5F2; --title-font: "Playfair Display", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --expr-font: "Playfair Display", Georgia, serif; --title-size: 54px; --cover-size: 92px; --title-weight: 800; --title-track: -.025em; --eyebrow-track: .22em; --eyebrow-size: 12px; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; --r-num: 0; --card-accent-w: 3px; --rule-w: 120px; --rule-h: 3px; --cover-bg: #FFFFFF; --cover-fg: #111111; --cover-eyebrow: #E5322D; --cover-sub: #444444; --cover-meta: #8A8A8A; } [data-style="editorial"] .expr .head { font-size: 34px; letter-spacing: -.02em; } [data-style="editorial"] .qcol section { background: transparent; border-top-width: 3px; padding-left: 0; padding-right: 0; } [data-style="editorial"] .cards .c { background: transparent; border-top-width: 3px; } [data-style="editorial"] .s-title { line-height: 1.02; } [data-style="editorial"] .cover .cover-rule { margin-top: 32px; } /* ─── 4. Pastel ───────────────────────────────────────────── Soft, rounded and airy — friendly for nervous beginners. */ [data-style="pastel"] { --ink: #4A4458; --accent: #F2836B; --accent2: #5BA6A6; --accent3: #9C8CC4; --muted: #8C86A0; --slide-bg: #FFFCF9; --card: #FFFFFF; --line: #EDE6F0; --wash: #F6F1F7; --paper: #FFF9F5; --title-font: "Nunito", system-ui, sans-serif; --body-font: "Nunito", system-ui, sans-serif; --expr-font: "Nunito", system-ui, sans-serif; --title-size: 46px; --title-weight: 800; --cover-size: 74px; --r-sm: 14px; --r-md: 18px; --r-lg: 26px; --r-num: 50%; --border-w: 0px; --card-accent-w: 6px; --shadow: 0 6px 18px rgba(120,100,150,.10); --panel-shadow: 0 8px 24px rgba(120,100,150,.09); --rule-h: 7px; --cover-bg: linear-gradient(145deg, #F7C8B8 0%, #E8C6E4 48%, #C6D9EF 100%); --cover-fg: #4A4458; --cover-eyebrow: #C4614A; --cover-sub: #5C5470; --cover-meta: #7E7595; } [data-style="pastel"] .lang div { background: var(--wash); } [data-style="pastel"] .card { border: 0; border-left: var(--card-accent-w) solid var(--accent2); } [data-style="pastel"] .qcol section { border-top: 0; border-left: 6px solid var(--accent2); } [data-style="pastel"] .qcol section:nth-child(2) { border-left-color: var(--accent); } [data-style="pastel"] .qcol section:nth-child(3) { border-left-color: var(--accent3); } [data-style="pastel"] .cards .c { border-top: 0; border-left: 6px solid var(--accent); } /* ─── 5. Midnight ─────────────────────────────────────────── Dark slides for dim rooms and evening classes. */ [data-style="midnight"] { --ink: #E8E9F3; --accent: #FF6B8B; --accent2: #4ED8C4; --accent3: #A78BFA; --muted: #9A9CB8; --slide-bg: #14162B; --card: #1C1F38; --line: #2C3050; --wash: #1E2140; --paper: #14162B; --title-font: "Source Serif 4", Georgia, serif; --body-font: "Inter", system-ui, sans-serif; --expr-font: "Source Serif 4", Georgia, serif; --title-size: 46px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --shadow: 0 4px 20px rgba(0,0,0,.35); --cover-bg: radial-gradient(760px 520px at 82% -10%, #2C2F63 0%, transparent 60%), radial-gradient(620px 480px at -8% 112%, #3A2456 0%, transparent 58%), linear-gradient(150deg, #14162B 0%, #0C0D1C 100%); --cover-fg: #FFFFFF; --cover-eyebrow: #4ED8C4; --cover-sub: #C9CBE0; --cover-meta: #7E82A8; } [data-style="midnight"] .chip { color: #0F1124; } [data-style="midnight"] .expr .n, [data-style="midnight"] .obj-list li::before { color: #0F1124; } [data-style="midnight"] .tag { color: #0F1124; } [data-style="midnight"] .vocab .ex { opacity: .62; } [data-style="midnight"] audio { filter: invert(1) hue-rotate(180deg); } /* ─── 6. Terminal ─────────────────────────────────────────── Monospace, square, amber-on-charcoal. */ [data-style="terminal"] { --ink: #D6E2D6; --accent: #FFB454; --accent2: #6FD08C; --accent3: #6BA8E8; --muted: #7E8C7E; --slide-bg: #10140F; --card: #161B15; --line: #2A332A; --wash: #171D16; --paper: #10140F; --title-font: "JetBrains Mono", Consolas, monospace; --body-font: "JetBrains Mono", Consolas, monospace; --expr-font: "JetBrains Mono", Consolas, monospace; --title-size: 36px; --cover-size: 58px; --title-weight: 700; --title-track: -.01em; --eyebrow-track: .18em; --r-sm: 0; --r-md: 2px; --r-lg: 2px; --r-pill: 2px; --r-num: 2px; --card-accent-w: 3px; --rule-w: 200px; --rule-h: 2px; --cover-bg: linear-gradient(170deg, #10140F 0%, #0A0D09 100%); --cover-fg: #6FD08C; --cover-eyebrow: #FFB454; --cover-sub: #9DB09D; --cover-meta: #5E6C5E; } [data-style="terminal"] .s-eyebrow::before { content: "// "; } [data-style="terminal"] .s-title::before { content: "> "; color: var(--accent2); } [data-style="terminal"] .expr .head { font-size: 24px; } [data-style="terminal"] .chip, [data-style="terminal"] .tag, [data-style="terminal"] .expr .n, [data-style="terminal"] .obj-list li::before { color: #10140F; } [data-style="terminal"] .vocab .v, [data-style="terminal"] .steps .st, [data-style="terminal"] .qcol section, [data-style="terminal"] .cards .c { border: 1px solid var(--line); } [data-style="terminal"] audio { filter: invert(1) hue-rotate(180deg); } /* ─── 7. Playground ───────────────────────────────────────── Loud, chunky and high-energy. */ [data-style="playground"] { --ink: #1F2A44; --accent: #FF5A5F; --accent2: #1B9AAA; --accent3: #F4A259; --muted: #6B7A99; --slide-bg: #FFFDF6; --card: #FFFFFF; --line: #1F2A44; --wash: #FFF2D9; --paper: #FFFDF6; --title-font: "Fredoka", "Segoe UI", system-ui, sans-serif; --body-font: "Nunito", system-ui, sans-serif; --expr-font: "Fredoka", system-ui, sans-serif; --title-size: 50px; --cover-size: 84px; --title-weight: 700; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-num: 50%; --border-w: 2.5px; --card-accent-w: 8px; --shadow: 4px 5px 0 #1F2A44; --panel-shadow: 5px 6px 0 #1F2A44; --rule-w: 96px; --rule-h: 9px; --cover-bg: linear-gradient(140deg, #1B9AAA 0%, #157885 55%, #F4A259 100%); --cover-eyebrow: #FFE66D; --cover-sub: #EEFBFC; --cover-meta: #BEE7EC; } [data-style="playground"] .vocab .v, [data-style="playground"] .steps .st, [data-style="playground"] .qcol section, [data-style="playground"] .cards .c, [data-style="playground"] .expr .ex div, [data-style="playground"] .road div { border: 2.5px solid var(--ink); } [data-style="playground"] .cards .c { box-shadow: 4px 5px 0 var(--ink); } [data-style="playground"] .expr .n, [data-style="playground"] .obj-list li::before { border: 2.5px solid var(--ink); } [data-style="playground"] .tag { border: 2.5px solid var(--ink); } /* ─── 8. Swiss ────────────────────────────────────────────── Strict grid, hairlines, one red, maximum whitespace. */ [data-style="swiss"] { --ink: #1A1A1A; --accent: #E30613; --accent2: #1A1A1A; --accent3: #9B9B9B; --muted: #767676; --slide-bg: #FAFAFA; --card: #FFFFFF; --line: #C9C9C9; --wash: #F0F0F0; --paper: #FAFAFA; --title-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --body-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --expr-font: "Archivo", "Helvetica Neue", Arial, sans-serif; --title-size: 42px; --cover-size: 80px; --title-weight: 700; --title-track: -.03em; --eyebrow-track: .2em; --eyebrow-size: 12px; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0; --r-num: 0; --card-accent-w: 3px; --rule-w: 100%; --rule-h: 2px; --cover-bg: #E30613; --cover-fg: #FFFFFF; --cover-eyebrow: #FFFFFF; --cover-sub: #FFE8E9; --cover-meta: #FFC4C7; --slide-pad: 56px 64px 64px; } [data-style="swiss"] .s-title { line-height: 1.04; } [data-style="swiss"] .cover .cover-rule { background: #fff; margin-top: 30px; } [data-style="swiss"] .vocab .v, [data-style="swiss"] .steps .st, [data-style="swiss"] .expr .ex div, [data-style="swiss"] .road div { background: transparent; border-top: 1px solid var(--line); } [data-style="swiss"] .qcol section { background: transparent; border-top-width: 2px; padding-left: 0; } [data-style="swiss"] .cards .c { background: transparent; border-top-width: 2px; } [data-style="swiss"] .panel { background: transparent; border-top: 2px solid var(--ink); border-radius: 0; } [data-style="swiss"] .expr .head { font-size: 30px; letter-spacing: -.02em; }