/* ============================================================================== aesthetecoding.io — SLIDE-DECK STYLESHEET ("Atelier Synthesis" deck system) Self-contained token/component set for the slide-format article. Deliberately independent from atelier.css/prose.css (different scale, different reading mode) but shares the same self-hosted font files. Catalogue of every slide situation: _templates/article-deck.html Consumed by: _templates/deck.html (production template, root-relative paths) ============================================================================== */ /* ---- SELF-HOSTED FONTS (same files as the rest of the site) --------------- */ @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-optical-sizing:auto; font-display:swap; src:url("fonts/Newsreader.woff2") format("woff2"); } @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-optical-sizing:auto; font-display:swap; src:url("fonts/Newsreader-Italic.woff2") format("woff2"); } @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/PublicSans.ttf") format("truetype"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); } /* ---- 1. THEME TOKENS ------------------------------------------------------- Two groups: FIXED brand/chip constants (same in both themes — accent chips, code/terminal panels, and any surface that's deliberately always-dark or always-white regardless of reader preference), and THEME-DEPENDENT surface tokens that drive the default (unmodified) `.slide` background/ink and any component that sits directly on it. `.slide--dark` / `.slide--gradient` / `.slide--photo` stay fixed-dark by design — they're a content choice, not the reader's theme. Theme is read from `data-theme` on , shared with the rest of the site via the same `acx-theme` localStorage key. ---------- */ :root { --accent: #efa23c; --accent-deep: #9a5a12; --brand-magenta: var(--accent-deep); --brand-pink: var(--accent); --brand-indigo: #1b150c; --brand-violet: #5b4a34; --brand-gradient: radial-gradient(120% 150% at 14% 8%, rgba(239,162,60,0.30), transparent 55%), linear-gradient(140deg, #2a1c0d 0%, #1c1409 55%, #120d06 100%); --amber-fill: linear-gradient(135deg, #efa23c 0%, #d98a2a 100%); --dark: #141009; --ink-0: #fffdf8; --on-dark-2: rgba(241,236,227,0.74); --on-dark-3: rgba(241,236,227,0.52); --border-on-dark: rgba(241,236,227,0.14); --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Public Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-md: 0 4px 14px rgba(20,16,9,0.07), 0 1px 3px rgba(20,16,9,0.05); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- 1b. THEME-DEPENDENT SURFACE TOKENS — default slide bg/ink only ------- */ :root, :root[data-theme="dark"] { --paper: var(--dark); --ink-300: rgba(241,236,227,0.34); --ink-400: var(--on-dark-3); --ink-500: rgba(241,236,227,0.60); --ink-600: var(--on-dark-2); --ink-700: rgba(241,236,227,0.80); --ink-800: rgba(241,236,227,0.88); --ink-900: #fffdf8; --surface-violet: rgba(239,162,60,0.08); --border-1: var(--border-on-dark); --border-2: rgba(241,236,227,0.22); --heading-ink: #fffdf8; --eyebrow-ink: var(--brand-pink); --accent-text: var(--accent); } :root[data-theme="light"] { --paper: #f4efe5; --ink-300: #b4a98f; --ink-400: #8a7f66; --ink-500: #6b6149; --ink-600: #5b5341; --ink-700: #4a4234; --ink-800: #2e2718; --ink-900: #1b150c; --surface-violet: #f4ecdb; --border-1: #e6dccb; --border-2: #d8ccb5; --heading-ink: #1b150c; --eyebrow-ink: var(--accent-deep); --accent-text: var(--accent-deep); } /* Cards are a deliberate always-white surface (like a paper card laid on the slide) — re-pin the ink scale locally so text inside them stays dark-on- white in both themes instead of following the slide-level theme flip. */ .card:not(.card--ghost) { --ink-300: #b4a98f; --ink-400: #8a7f66; --ink-500: #6b6149; --ink-600: #5b5341; --ink-700: #4a4234; --ink-800: #2e2718; --ink-900: #1b150c; --border-1: #e6dccb; --border-2: #d8ccb5; } /* ---- 2. BASE ---------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--paper); font-family: var(--font-sans); } deck-stage:not(:defined) { visibility: hidden; } deck-stage:not(:defined) > section { display: none; } /* ---- 3. DECK-STAGE SHELL + NAV RAIL ----------------------------------------- Slides are authored at a fixed design size (1920×1080 by default — matches every px value in this file) and the whole canvas is scaled uniformly with `transform: scale()` to fit the viewport, letterboxed. This keeps fixed-px type/spacing correct at any viewport size instead of a slide box that shrinks via aspect-ratio while its text stays literal size. ---------------- */ deck-stage { position: fixed; inset: 0; overflow: hidden; background: var(--paper); } deck-stage .deck-canvas { position: absolute; top: 50%; left: 50%; width: var(--deck-w, 1920px); height: var(--deck-h, 1080px); transform-origin: center center; } deck-stage section.slide { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; visibility: hidden; opacity: 0; } deck-stage section.slide.is-active { visibility: visible; opacity: 1; } @media (prefers-reduced-motion: no-preference) { deck-stage section.slide { transition: opacity 0.18s ease; } } deck-stage .deck-rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 240px; padding: 20px 14px; overflow-y: auto; background: rgba(20,16,9,0.92); border-right: 1px solid var(--border-on-dark); display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform 0.22s var(--ease); } deck-stage .deck-rail.is-open { transform: translateX(0); } deck-stage .deck-rail button { all: unset; cursor: pointer; padding: 9px 12px; border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 13px; color: var(--on-dark-2); display: flex; align-items: center; gap: 10px; } deck-stage .deck-rail button:hover { background: rgba(241,236,227,0.06); color: #fff; } deck-stage .deck-rail button.is-current { background: rgba(239,162,60,0.14); color: var(--accent); } deck-stage .deck-rail button .n { flex: none; opacity: 0.55; } deck-stage .deck-toggle-rail { all: unset; cursor: pointer; position: fixed; top: 18px; left: 18px; z-index: 21; width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(20,16,9,0.7); border: 1px solid var(--border-on-dark); display: flex; align-items: center; justify-content: center; color: var(--on-dark-2); } deck-stage .deck-toggle-rail:hover { color: #fff; } deck-stage .deck-topright { position: fixed; top: 18px; right: 18px; z-index: 21; display: flex; align-items: center; gap: 10px; } deck-stage .deck-theme-toggle { all: unset; cursor: pointer; box-sizing: border-box; width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(20,16,9,0.7); border: 1px solid var(--border-on-dark); display: flex; align-items: center; justify-content: center; color: var(--on-dark-2); } deck-stage .deck-theme-toggle:hover { color: #fff; } deck-stage .deck-theme-toggle .ic-moon { display: none; } :root[data-theme="light"] deck-stage .deck-theme-toggle .ic-sun { display: none; } :root[data-theme="light"] deck-stage .deck-theme-toggle .ic-moon { display: block; } deck-stage .deck-back { all: unset; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--on-dark-3); background: rgba(20,16,9,0.7); border: 1px solid var(--border-on-dark); padding: 9px 14px; border-radius: var(--radius-pill); text-decoration: none; } deck-stage .deck-back:hover { color: #fff; } deck-stage .deck-arrow { all: unset; cursor: pointer; position: fixed; top: 50%; transform: translateY(-50%); z-index: 21; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(20,16,9,0.55); border: 1px solid var(--border-on-dark); color: var(--on-dark-2); } deck-stage .deck-arrow:hover { color: #fff; } deck-stage .deck-arrow--prev { left: 18px; } deck-stage .deck-arrow--next { right: 18px; } deck-stage .deck-arrow[disabled] { opacity: 0.25; pointer-events: none; } /* ---- 4. SLIDE SHELL --------------------------------------------------------- */ .slide { height: 100%; width: 100%; padding: 90px 110px 76px; flex-direction: column; background: var(--paper); color: var(--ink-900); font-family: var(--font-sans); } .slide--gradient { background: var(--brand-gradient); color: #fff; } .slide--dark { background: var(--dark); color: #fff; } /* Section-divider slide: everything centred, no footer clutter */ .slide--divider { align-items: center; justify-content: center; text-align: center; padding: 90px; } /* ---- 5. HEADINGS ------------------------------------------------------------ */ .eyebrow { font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--eyebrow-ink); margin: 0 0 22px; } .slide--dark .eyebrow, .slide--gradient .eyebrow { color: var(--brand-pink); } .title { margin: 0; font-family: var(--font-serif); font-size: 58px; font-weight: 500; line-height: 1.04; letter-spacing: -0.018em; color: var(--heading-ink); text-wrap: balance; } .slide--gradient .title, .slide--dark .title { color: #fff; } .title--hero { font-size: 104px; font-weight: 600; line-height: 0.99; letter-spacing: -0.025em; max-width: 18ch; } .subhead { margin: 20px 0 0; font-size: 31px; font-weight: 400; line-height: 1.32; color: var(--ink-600); } .slide--dark .subhead { color: var(--on-dark-2); } .wm { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; } .wm .b { color: var(--accent); } /* ---- 6. FOOTER --------------------------------------------------------------- */ .footer { margin-top: auto; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 24px; color: var(--ink-400); border-top: 1px solid var(--border-1); } .slide--dark .footer { color: var(--on-dark-3); border-top-color: var(--border-on-dark); } /* ---- 7. CARDS ----------------------------------------------------------------- */ .card { background: var(--ink-0); border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 38px; display: flex; flex-direction: column; } .card--accent-top { border: none; border-top: 5px solid var(--accent-deep); } .card--indigo-top { border: none; border-top: 5px solid var(--brand-indigo); } .card--ghost { background: rgba(241,236,227,0.05); border: 1px solid var(--border-on-dark); box-shadow: none; } .card--ghost.is-primary { border-color: rgba(239,162,60,0.5); } /* ---- 8. PILLS & BADGES --------------------------------------------------------- */ .pill { display: inline-flex; align-self: flex-start; font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 7px 16px; } .pill--solid { background: var(--accent-deep); color: #fff; } .pill--soft { background: var(--surface-violet); color: var(--accent-text); } .badge { flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--brand-indigo); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ---- 9. LISTS ------------------------------------------------------------------ */ .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .list li { display: flex; gap: 13px; align-items: flex-start; font-size: 26px; line-height: 1.4; color: var(--ink-700); } .list__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); margin-top: 11px; } .slide--dark .list li { color: rgba(241,236,227,0.9); } .list--on-dark li { color: rgba(241,236,227,0.9); } .list--check li, .list--cross li { align-items: center; gap: 16px; font-size: 27px; } .list--check li { color: #fff; align-items: flex-start; line-height: 1.4; } .list--cross li { color: var(--on-dark-2); } .ic { flex: none; } /* ---- 10. TABLE ------------------------------------------------------------------ */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; padding: 0 24px 16px 0; font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); border-bottom: 2px solid var(--border-2); } .table th.is-accent { color: var(--accent-deep); border-bottom-color: var(--accent-deep); } .table td { padding: 18px 24px; font-size: 27px; color: var(--ink-700); border-bottom: 1px solid var(--border-1); } .table td:first-child { padding-left: 0; } .table td.col-label { font-weight: 600; color: var(--heading-ink); font-family: var(--font-sans); } .table td.col-win { background: var(--surface-violet); color: var(--ink-900); } /* ---- 11. CALLOUT ------------------------------------------------------------------ */ .callout { background: var(--surface-violet); border-left: 4px solid var(--accent-deep); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 24px 28px; font-size: 24px; line-height: 1.42; color: var(--ink-700); } /* ---- 12. CODE / FOLDER-TREE PANEL ------------------------------------------------- */ .tree { background: var(--dark); border-radius: var(--radius-lg); padding: 38px 40px; font-family: var(--font-mono); font-size: 24px; line-height: 1.65; color: rgba(241,236,227,0.82); white-space: pre; } .tree .c-key { color: rgba(241,236,227,0.96); font-weight: 500; } .tree .c-new { color: var(--accent); font-weight: 500; } .tree .c-note { color: rgba(241,236,227,0.42); } /* ---- 13. TERMINAL PANEL (shell session — deck-native port of prose.css .terminal) - */ .terminal { background: #0c0a07; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-on-dark); } .terminal__bar { display: flex; align-items: center; gap: 9px; padding: 16px 22px; border-bottom: 1px solid rgba(241,236,227,0.1); } .terminal__bar i { width: 13px; height: 13px; border-radius: 50%; display: block; } .terminal__bar i:nth-child(1) { background: #e0654f; } .terminal__bar i:nth-child(2) { background: #e0b24f; } .terminal__bar i:nth-child(3) { background: #5fb874; } .terminal__bar span { font-family: var(--font-mono); font-size: 20px; color: #6b6152; margin-left: 8px; } .terminal pre { margin: 0; padding: 30px 34px; font-family: var(--font-mono); font-size: 24px; line-height: 1.75; color: #e7dcc8; } .terminal .cmd { color: #e7dcc8; display: block; } .terminal .cmd::before { content: "$ "; color: var(--accent); } .terminal .out { color: #8c8270; display: block; } /* ---- 14. NUMBERED FLOW ------------------------------------------------------------- */ .flow { display: flex; flex-direction: column; } .flow__row { display: flex; align-items: center; gap: 20px; } .flow__num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-indigo); color: #fff; font-size: 24px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); } .flow__num.is-final { background: var(--amber-fill); color: #1b150c; } .flow__row .label { font-size: 28px; color: var(--ink-800); } .flow__row .label.is-final { font-weight: 700; color: var(--accent-deep); } .flow__line { width: 2px; height: 16px; background: var(--border-2); margin-left: 21px; } /* ---- 15. "OR" DIVIDER --------------------------------------------------------------- */ .or { flex: none; align-self: stretch; width: 54px; display: flex; flex-direction: column; align-items: center; } .or__line { flex: 1; width: 2px; background: var(--border-2); } .or__chip { flex: none; width: 50px; height: 50px; border-radius: 50%; margin: 8px 0; border: 2px solid var(--border-2); background: var(--paper); color: var(--ink-500); font-family: var(--font-mono); font-size: 24px; font-weight: 500; display: flex; align-items: center; justify-content: center; } /* ---- 16. GRADIENT BANNER ------------------------------------------------------------- */ .banner { background: var(--amber-fill); border-radius: var(--radius-lg); padding: 38px 44px; display: flex; align-items: center; gap: 28px; color: #1b150c; } .banner__tag { flex: none; font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(27,21,12,0.6); writing-mode: vertical-rl; transform: rotate(180deg); } .banner__text { font-size: 33px; font-weight: 500; line-height: 1.32; font-family: var(--font-serif); } /* ---- 17. FULL-SLIDE QUOTE (distinct from the inline .banner strip) ------------------- */ .deck-quote { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .deck-quote__mark { font-size: 120px; line-height: 0.6; color: var(--accent); margin-bottom: 12px; font-family: var(--font-serif); } .deck-quote__text { font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: 52px; line-height: 1.28; max-width: 22ch; text-wrap: balance; } .deck-quote__cite { margin-top: 32px; font-family: var(--font-mono); font-size: 24px; color: var(--ink-500); } .slide--dark .deck-quote__cite, .slide--gradient .deck-quote__cite { color: var(--on-dark-2); } .deck-quote__cite::before { content: "— "; } /* ---- 18. FULL-BLEED PHOTO SLIDE ------------------------------------------------------ */ .slide--photo { padding: 0; position: relative; overflow: hidden; } .slide--photo .deck-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); } .slide--photo .deck-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 100px 64px; background: linear-gradient(0deg, rgba(20,16,9,0.86) 0%, rgba(20,16,9,0.5) 60%, transparent 100%); color: #fff; } .slide--photo .deck-photo-cap .eyebrow { color: var(--brand-pink); } .slide--photo .deck-photo-cap .title { color: #fff; font-size: 44px; } /* ---- 19. LAYOUT HELPERS -------------------------------------------------------------- */ .row { display: flex; gap: 40px; } .fill { flex: 1; min-height: 0; } .gap-sm { gap: 32px; } .mt-lg { margin-top: 44px; } .accent { color: var(--accent-text); } .slide--dark .accent, .slide--gradient .accent { color: var(--accent); } .strong { font-weight: 700; } .muted { color: var(--ink-400); } .mono { font-family: var(--font-mono); } /* ---- 20. PRINT — one slide per page, no nav chrome ------------------------------------ */ @media print { html, body { background: #fff; height: auto; } deck-stage { position: static; display: block; overflow: visible; } deck-stage .deck-rail, deck-stage .deck-toggle-rail, deck-stage .deck-topright, deck-stage .deck-arrow { display: none !important; } deck-stage .deck-canvas { position: static; transform: none !important; width: 100%; height: auto; } deck-stage section.slide { position: static; visibility: visible !important; opacity: 1 !important; display: flex !important; width: 100%; height: 100vh; page-break-after: always; break-after: page; } deck-stage section.slide:last-child { page-break-after: auto; break-after: auto; } }