/* ============================================================ tomasruta.com — shared styles Typography & palette ported from communities-fund-website. Layout: sticky left sidebar (table of contents) + reading column, in the spirit of gradual-disempowerment.ai. ============================================================ */ :root { --bg: #f0eee6; /* warm off-white — less yellow than the old cream */ --ink: #1f1d1a; /* near-black warm — body text (higher contrast) */ --muted: #66625a; /* secondary text */ --rule: #cfcabd; /* hairlines / borders */ --accent: #a8482a; /* terracotta — links on hover, active marker */ --card: #faf9f5; /* figure-card plate */ color-scheme: light; --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Apple Garamond", Cambria, "Times New Roman", serif; --measure: 660px; /* reading column width */ --sidebar-w: 196px; --gap: 60px; /* space between sidebar and content */ --body-size: 19px; --body-leading: 1.7; } /* Dark theme — applied when (set before paint by the inline head script, flipped by the toggle in theme.js). Figure-cards stay light plates so the light-background charts still read correctly. */ [data-theme="dark"] { --bg: #1b1a17; /* warm near-black */ --ink: #e7e3d8; /* warm off-white text */ --muted: #a39c8c; --rule: #38362f; --accent: #d77a52; /* brightened terracotta for dark backgrounds */ --card: #211f1b; /* figures go dark too, now that charts ship dark variants */ color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 28px; } body { margin: 0; position: relative; background: var(--bg); color: var(--ink); transition: background-color 0.25s ease, color 0.25s ease; font-family: var(--serif); font-size: var(--body-size); line-height: var(--body-leading); font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "calt" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: underline; text-decoration-color: rgba(42, 31, 21, 0.30); text-underline-offset: 2.5px; text-decoration-thickness: 1px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } .content a:visited { color: var(--muted); } .content a:visited:hover { color: var(--accent); } ::selection { background: rgba(168, 72, 42, 0.20); color: var(--ink); } /* ---------- Layout: sidebar + content ---------- */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--gap); max-width: calc(var(--sidebar-w) + var(--gap) + var(--measure) + 80px); margin: 0 auto; padding: 0 40px; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 58px 0 36px; display: flex; flex-direction: column; min-width: 0; } .content { padding: 58px 0 30vh; min-width: 0; } article, .page-body { max-width: var(--measure); } /* ---------- Sidebar identity ---------- */ .site-id { flex: 0 0 auto; margin-bottom: 34px; } .site-id a { text-decoration: none; } .site-name { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.005em; } .site-tagline { display: block; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } /* ---------- Sidebar table of contents ---------- */ .toc-toggle { display: none; /* desktop: hidden; shown on mobile */ appearance: none; background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); font-family: var(--serif); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; } .toc { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .toc ul { list-style: none; margin: 0; padding: 0; } .toc li { margin: 0; } .toc a { display: block; text-decoration: none; color: var(--muted); font-size: 0.92rem; line-height: 1.32; padding: 5px 0 5px 14px; border-left: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .toc a:hover { color: var(--ink); } .toc a.active { color: var(--ink); border-left-color: var(--accent); font-weight: 500; } .toc .toc-h3 a { padding-left: 28px; font-size: 0.85rem; color: var(--muted); } .sidebar-foot { flex: 0 0 auto; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.85rem; } .sidebar-foot a { color: var(--muted); text-decoration: none; } .sidebar-foot a:hover { color: var(--accent); } /* ---------- Article typography ---------- */ .essay-title { font-size: 2.55rem; line-height: 1.08; font-weight: 450; letter-spacing: -0.017em; margin: 0 0 12px; } .essay-meta { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1.9em; } .lede { font-size: 1.3em; line-height: 1.42; font-weight: 350; letter-spacing: -0.005em; margin: 0 0 1.2em; } article h2 { font-size: 1.65rem; font-weight: 540; line-height: 1.2; letter-spacing: -0.01em; margin: 2.5em 0 0.5em; } article h3 { font-size: 1.375rem; font-weight: 540; line-height: 1.3; margin: 1.9em 0 0.3em; } article h4 { font-size: 0.82rem; font-weight: 600; font-style: normal; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink); margin: 1.9em 0 0.3em; } article p { margin: 0 0 1.15em; } article ul { margin: 0 0 1.2em; padding-left: 1.25em; } article li { margin: 0.3em 0; padding-left: 0.2em; } article em { font-style: italic; } article strong { font-weight: 600; } article h2, article h3, article h4 { scroll-margin-top: 28px; } .end-rule { border: none; border-top: 1px solid var(--rule); width: 60px; margin: 2.6em 0 1.6em; } .closing { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.005em; } /* author contact note at the foot of an essay (reusable across essays) */ .contact-note { margin-top: 2.4em; color: var(--muted); font-size: 1.02rem; line-height: 1.6; font-style: italic; } /* ---------- Footnotes ---------- */ .footnote-ref { text-decoration: none; } .footnote-ref sup { font-size: 0.7em; padding: 0 0.08em; } .footnotes { margin-top: 4em; padding-top: 1.5em; border-top: 1px solid var(--rule); font-size: 0.88rem; line-height: 1.55; color: var(--muted); } .footnotes hr { display: none; } /* pandoc inserts one; rule above replaces it */ .footnotes ol { padding-left: 1.3em; margin: 0; } .footnotes li { margin: 0.55em 0; scroll-margin-top: 28px; } .footnotes p { margin: 0; } .footnote-back { text-decoration: none; margin-left: 0.35em; } /* ---------- Writing index ---------- */ .page-centered { max-width: var(--measure); margin: 0 auto; padding: 60px 28px 26vh; } .page-title { font-size: 2.2rem; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 1.3em; } .essay-list { list-style: none; margin: 0; padding: 0; } .essay-list > li { padding: 1.7em 0; border-top: 1px solid var(--rule); } .essay-list > li:first-child { border-top: none; padding-top: 0; } .essay-link { font-size: 1.45rem; font-weight: 450; line-height: 1.25; letter-spacing: -0.014em; text-decoration: none; } .essay-link:hover { color: var(--accent); } .essay-date { display: block; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 7px; } .essay-excerpt { margin: 11px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.5; } /* ---------- Responsive ---------- */ @media (max-width: 880px) { :root { --body-size: 18px; } .layout { grid-template-columns: 1fr; gap: 0; padding: 0 24px; } .sidebar { position: static; height: auto; padding: 38px 0 0; display: block; } .content { padding: 26px 0 18vh; } .site-id { margin-bottom: 14px; } .toc-toggle { display: inline-block; } .toc { display: none; margin-top: 16px; overflow: visible; } .toc.open { display: block; } .sidebar-foot { display: none; } .essay-title { font-size: 2.05rem; } .lede { font-size: 1.2em; } } /* ---------- Print ---------- */ @media print { .sidebar { display: none; } .layout { display: block; max-width: none; padding: 0; } body { background: #fff; color: #000; font-size: 11pt; } a { color: #000; } } /* ============================================================ Minisite components — shared, opt-in per essay (added 2026-06-13) Figure-cards (frame visuals on the cream) + desktop/mobile footnotes. Everything here is keyed to new classes / a body mode, so it is inert unless an essay uses it — the existing essays are unaffected. Back-port to them when ready (see ROADMAP "Back-port minisite improvements"). ============================================================ */ /* ---------- Figures: frame a visual as a plate on the cream ---------- */ .figure { margin: 2.4em 0; } .figure-card { background: var(--card); /* light plate; matches the charts' near-white interior */ border: 1px solid var(--rule); border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(42, 31, 21, 0.05), 0 10px 26px rgba(42, 31, 21, 0.06); } .figure-card img { display: block; width: 100%; height: auto; border-radius: 6px; } .figure-card iframe { display: block; width: 100%; border: 0; border-radius: 6px; min-height: 560px; /* pre-JS floor; the iframe reports its real height */ } .figure figcaption { margin: 0.78em 2px 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); } .figure figcaption b, .figure figcaption strong { color: var(--ink); font-weight: 600; } /* ---------- Footnotes: click the number, the note opens inline ---------- footnotes.js turns inline … into a numbered marker plus a hidden note. Click the marker → the note opens inline right beneath the line; click again to close. Same on every screen — no margin, no hover. Raw notes stay hidden until upgraded, so a no-JS page stays clean. */ .fn { display: none; } .fn-note { display: none; } .fn-ref { background: none; border: 0; padding: 0.3em 0.12em 0.3em 0; margin: 0; color: var(--accent); cursor: pointer; text-decoration: none; font: inherit; } .fn-ref sup { font-size: 0.72em; padding: 0 0.05em; line-height: 0; } .fn-ref:hover sup, .fn-ref:focus-visible sup { text-decoration: underline; } @media (max-width: 880px) { .fn-ref { padding: 0.45em 0.22em; } } /* bigger tap target on touch */ /* the revealed note */ .fn-note.open { display: block; margin: 0.65em 0 1em; padding: 0.6em 0.95em; border-left: 2px solid var(--accent); background: rgba(201, 189, 166, 0.12); border-radius: 0 6px 6px 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted); } .fn-note.open::before { content: attr(data-num) ".\00a0"; color: var(--accent); font-weight: 600; } .fn-note.open a { color: var(--ink); } .fn-note.open a:hover { color: var(--accent); } /* auto-built numbered list at the foot — print fallback only */ .footnotes-list { display: none; margin-top: 3.5em; padding-top: 1.5em; border-top: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.55; color: var(--muted); } .footnotes-list ol { padding-left: 1.3em; margin: 0; } .footnotes-list li { margin: 0.6em 0; scroll-margin-top: 28px; } .footnotes-list a { color: var(--muted); } .footnotes-list a:hover { color: var(--accent); } .fn-back { text-decoration: none; margin-left: 0.35em; white-space: nowrap; } /* ---------- Print: hide inline notes, show the numbered list ---------- */ @media print { .fn-note { display: none !important; } .footnotes-list { display: block !important; } } /* long URLs in notes must wrap, not overflow */ .fn-note, .footnotes-list li { overflow-wrap: anywhere; } /* ---------- Pull-quote ---------- */ article blockquote { margin: 1.9em 0; padding: 0.1em 0 0.1em 1.1em; border-left: 3px solid var(--accent); font-size: 1.2em; line-height: 1.45; font-style: italic; color: var(--ink); } article blockquote p { margin: 0; } article blockquote cite { display: block; margin-top: 0.55em; font-size: 0.62em; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---------- Dark-mode toggle (fixed top-right, in the spirit of Dario's controls) ---------- */ .theme-toggle { /* top-right of the reading area; scrolls away with the page (only at the top), like Dario's */ position: absolute; top: 14px; right: max(16px, calc(50% - 460px)); z-index: 50; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--muted); border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease, border-color 0.15s ease, background 0.2s ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--muted); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media print { .theme-toggle { display: none; } } /* ---------- Back to top (centered link at the foot, like Dario's) ---------- */ .back-to-top { display: block; text-align: center; margin: 3.4em 0 0; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; } .back-to-top:hover { color: var(--accent); } @media print { .back-to-top { display: none; } }