/* stravica.ai, "Quiet Authority" (global) + "Methodology Notebook" (rcf body) * Hand-rolled CSS, zero deps. Tokens at :root; section-specific overrides on .page--. */ /* -------- Tokens (Quiet Authority, global chrome) -------- */ :root { --paper: #f7f5f0; --ink: #0a0a0a; --mute: #3a3a3a; --rule: #d4cdb8; --signal: #c14a3a; /* burnt orange */ --signal-2: #a23a2c; --max-w: 72rem; /* ~1152px */ --max-w-prose: 40rem; /* ~640px, comfortable read */ --gutter: clamp(1.25rem, 3vw, 2.5rem); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --type-base: 17px; color-scheme: light; } /* -------- Dark mode (OS preference, only when not manually overridden) -------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16181c; /* near-black, slight warmth */ --ink: #e8e4d8; /* warm off-white, mirrors the cream */ --mute: #9a948a; --rule: #2c2e34; --signal: #e67353; /* brightened burnt orange for dark contrast */ --signal-2: #f08566; color-scheme: dark; } } /* Manual override: data-theme attribute on beats the media query. */ :root[data-theme="dark"] { --paper: #16181c; --ink: #e8e4d8; --mute: #9a948a; --rule: #2c2e34; --signal: #e67353; --signal-2: #f08566; color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* -------- Reset / base -------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--type-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; } a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; } a:hover { color: var(--signal); } .skip { position: absolute; left: -9999px; top: auto; background: var(--ink); color: var(--paper); padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.875rem; } .skip:focus { left: 1rem; top: 1rem; z-index: 100; } /* -------- Header -------- */ .site-header { border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 1.5rem var(--gutter); display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; } .site-header__brand { text-decoration: none; } .brand-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; font-feature-settings: "ss01", "ss02"; letter-spacing: -0.01em; } .site-header__nav { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; } .site-header__nav a { text-decoration: none; padding: 0.25rem 0.25rem; border-bottom: 1px solid transparent; } .site-header__theme { margin-left: 0.5rem; padding: 0.25rem 0.45rem; background: transparent; border: 1px solid var(--rule); border-radius: 999px; color: var(--mute); font-size: 0.95rem; line-height: 1; cursor: pointer; vertical-align: baseline; transition: color 0.15s ease, border-color 0.15s ease; } .site-header__theme:hover, .site-header__theme:focus-visible { color: var(--signal); border-color: var(--signal); outline: none; } .site-header__theme-glyph { display: inline-block; font-family: var(--font-mono); } .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { border-bottom-color: var(--signal); color: var(--ink); } /* -------- Footer -------- */ .site-footer { border-top: 1px solid var(--rule); margin-top: 6rem; } .site-footer__inner { max-width: var(--max-w); margin: 0 auto; padding: 2rem var(--gutter); } .site-footer__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--mute); margin: 0; } .site-footer__sep { opacity: 0.5; padding: 0 0.4em; } /* -------- Hero (home) -------- */ .hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem); } .hero__inner { max-width: var(--max-w-prose); margin: 0 auto; padding: 0 var(--gutter); } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal); margin: 0 0 1.25rem; } .hero__headline { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.5rem; /* Variable-font opsz axis, large display setting */ font-variation-settings: "opsz" 144; } .hero__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); margin: 0 0 2.5rem; max-width: 36rem; } .hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; } .cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; font-family: var(--font-body); font-size: 1rem; font-weight: 500; text-decoration: none; border: 1px solid var(--ink); border-radius: 0; transition: background 0.15s ease, color 0.15s ease; } .cta--primary { background: var(--ink); color: var(--paper); } .cta--primary:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); } .cta--secondary { background: transparent; color: var(--ink); } .cta--secondary:hover { background: var(--ink); color: var(--paper); } .cta__arrow { transition: transform 0.15s ease; } .cta:hover .cta__arrow { transform: translateX(2px); } /* -------- Lanes (home, 3-col) -------- */ .lanes { border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 5rem) 0; } .lanes__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 56rem) { .lanes__inner { grid-template-columns: repeat(3, 1fr); gap: 3rem; } } .lane { display: flex; flex-direction: column; gap: 0.75rem; } .lane__eyebrow { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal); margin: 0; } .lane__heading { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0; font-variation-settings: "opsz" 24; letter-spacing: -0.005em; } .lane__body { font-size: 1rem; color: var(--mute); margin: 0; line-height: 1.6; } .lane__cta { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; } .lane__cta a { text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--signal); padding-bottom: 0.125rem; } .lane__cta a:hover { color: var(--signal); } .lane__cta .lane__cta-placeholder { color: var(--mute); border-bottom: 1px dashed var(--rule); padding-bottom: 0.125rem; cursor: default; } /* -------- Latest writing (home) -------- */ .latest { border-top: 1px solid var(--rule); padding: clamp(3rem, 6vw, 5rem) 0; } .latest__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .latest__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .latest__heading { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0; font-variation-settings: "opsz" 24; } .latest__all { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--signal); padding-bottom: 0.125rem; } .latest__all:hover { color: var(--signal); } .latest__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 56rem) { .latest__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .latest__item { display: flex; flex-direction: column; gap: 0.5rem; } .latest__date { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--signal); margin: 0; } .latest__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; margin: 0; line-height: 1.3; } .latest__title a { text-decoration: none; color: var(--ink); } .latest__title a:hover { color: var(--signal); } .latest__deck { font-size: 0.9375rem; color: var(--mute); margin: 0; line-height: 1.55; } /* -------- Coda (home, body-of-work paragraph) -------- */ .coda { border-top: 1px solid var(--rule); padding: clamp(2.5rem, 5vw, 4rem) 0; } .coda__inner { max-width: var(--max-w-prose); margin: 0 auto; padding: 0 var(--gutter); } .coda__inner p { font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; line-height: 1.5; font-style: italic; color: var(--ink); margin: 0; font-variation-settings: "opsz" 36; } /* ================================================================ Editorial body, "Methodology Notebook" within the global chrome. Activated by .page--rcf (methodology section) and .page--blog (posts). Same body styling, cream paper, Source Serif Pro, signal-orange margin-rule on quotes. ================================================================ */ .page--rcf, .page--blog { --paper: #fbf7ed; /* warm cream */ --ink: #1a1a1a; /* rich black */ --rule: #d4cdb8; --signal: #c14a3a; /* same accent, continuity */ --font-body: 'Source Serif Pro', 'Source Serif 4', Georgia, serif; --type-base: 18px; } /* RCF + Blog section colours in dark mode (notebook tones, dark) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--rcf, :root:not([data-theme="light"]) .page--blog { --paper: #181a1e; --ink: #ece6d3; --rule: #2e2f35; --signal: #e67353; } } :root[data-theme="dark"] .page--rcf, :root[data-theme="dark"] .page--blog { --paper: #181a1e; --ink: #ece6d3; --rule: #2e2f35; --signal: #e67353; } .page--rcf body, .page--blog body { font-size: var(--type-base); } .rcf-section { max-width: var(--max-w-prose); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter); } .rcf-section__eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal); margin: 0 0 1.25rem; } .rcf-section__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.1; margin: 0 0 1.25rem; letter-spacing: -0.015em; font-variation-settings: "opsz" 144; } .rcf-section__deck { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0 0 3rem; font-style: italic; border-left: 2px solid var(--signal); padding-left: 1rem; } .rcf-section__body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 2.5rem 0 0.75rem; font-variation-settings: "opsz" 36; } .rcf-section__body p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.1rem; font-feature-settings: "onum", "kern"; } .rcf-section__body em { font-style: italic; color: var(--ink); } .rcf-section__nextup { border-top: 1px solid var(--rule); margin-top: 4rem; padding-top: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--mute); display: flex; flex-direction: column; gap: 0.25rem; } .rcf-section__nextup-label { text-transform: uppercase; letter-spacing: 0.12em; color: var(--signal); } /* -------- RCF child-page navigation (back / prev / next) -------- */ .rcf-section__body a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; } .rcf-section__back { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1.5rem; } .rcf-section__back a { color: var(--signal); text-decoration: none; } .rcf-section__back a:hover { text-decoration: underline; text-underline-offset: 3px; } .rcf-section__body ul, .rcf-section__body ol { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; padding-left: 1.25rem; margin: 0 0 1.1rem; } .rcf-section__body li { margin: 0 0 0.35rem; } .rcf-section__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 2rem 0 0.5rem; font-variation-settings: "opsz" 24; } .rcf-section__body blockquote { border-left: 2px solid var(--signal); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--ink); } .rcf-section__body code { font-family: var(--font-mono); font-size: 0.92em; background: rgba(193, 74, 58, 0.08); padding: 0.05em 0.3em; border-radius: 2px; } .rcf-section__body strong { font-weight: 600; } /* Lineage-page comparison table, six rows, four columns, tighter than prose. */ .rcf-lineage-table { width: 100%; border-collapse: collapse; margin: 1.75rem 0 2rem; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; } .rcf-lineage-table thead th { text-align: left; font-weight: 500; padding: 0.5rem 0.65rem; border-bottom: 2px solid var(--rule); letter-spacing: 0.01em; color: var(--ink-mute, var(--ink)); } .rcf-lineage-table tbody th, .rcf-lineage-table tbody td { vertical-align: top; padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--rule); } .rcf-lineage-table tbody th { font-weight: 600; white-space: nowrap; } .rcf-lineage-table tbody tr:last-child th, .rcf-lineage-table tbody tr:last-child td { border-bottom: none; } @media (max-width: 40rem) { .rcf-lineage-table { font-size: 0.8125rem; } .rcf-lineage-table thead th, .rcf-lineage-table tbody th, .rcf-lineage-table tbody td { padding: 0.45rem 0.45rem; } } /* Hub-page table of contents, ordered list, signal-numbered. */ .rcf-toc { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: rcf-toc; } .rcf-toc > li { counter-increment: rcf-toc; border-top: 1px solid var(--rule); padding: 1.25rem 0 0.5rem; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; } .rcf-toc > li::before { content: counter(rcf-toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--signal); letter-spacing: 0.08em; padding-top: 0.15rem; } .rcf-toc__title { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 0.25rem; font-variation-settings: "opsz" 24; } .rcf-toc__title a { text-decoration: none; color: var(--ink); } .rcf-toc__title a:hover { color: var(--signal); } .rcf-toc__teaser { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--mute); margin: 0; } /* Prev/next strip at the foot of concept pages. */ .rcf-section__pager { border-top: 1px solid var(--rule); margin-top: 4rem; padding-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; } .rcf-section__pager > * { display: flex; flex-direction: column; gap: 0.25rem; } .rcf-section__pager > .rcf-section__pager-next { text-align: right; align-items: flex-end; } .rcf-section__pager-label { color: var(--signal); } .rcf-section__pager a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 0.125rem; font-family: var(--font-display); font-size: 1rem; text-transform: none; letter-spacing: 0; font-variation-settings: "opsz" 24; } .rcf-section__pager a:hover { color: var(--signal); } /* Glossary + document-types definition lists. */ .rcf-defs { margin: 2rem 0 0; } .rcf-defs__term { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; margin: 1.75rem 0 0.35rem; font-variation-settings: "opsz" 24; } .rcf-defs__term-id { font-family: var(--font-mono); font-size: 0.8em; color: var(--signal); margin-left: 0.5rem; letter-spacing: 0.05em; } .rcf-defs__desc { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; margin: 0 0 0.5rem; } /* FAQ, question/answer pairs. */ .rcf-faq__q { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin: 2.25rem 0 0.5rem; font-variation-settings: "opsz" 24; } .rcf-faq__a { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1rem; } .rcf-faq__updated { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mute); margin: 0.25rem 0 0; } /* -------- Blog index -------- */ .blog-index { padding: clamp(3rem, 8vw, 6rem) 0; } .blog-index__inner { max-width: var(--max-w-prose); margin: 0 auto; padding: 0 var(--gutter); } .blog-index__eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal); margin: 0 0 1.25rem; } .blog-index__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1.25rem; font-variation-settings: "opsz" 144; } .blog-index__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); margin: 0 0 3rem; max-width: 36rem; } .blog-index__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2.5rem; } .blog-index__item { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); } .blog-index__item:last-child { border-bottom: 0; } .blog-index__date { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--signal); margin: 0; } .blog-index__entry-title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0; line-height: 1.25; font-variation-settings: "opsz" 36; } .blog-index__entry-title a { text-decoration: none; color: var(--ink); } .blog-index__entry-title a:hover { color: var(--signal); } .blog-index__entry-deck { font-size: 1rem; color: var(--ink); margin: 0; line-height: 1.55; font-style: italic; } .blog-index__empty { border-top: 1px solid var(--rule); padding-top: 2rem; font-family: var(--font-body); font-style: italic; color: var(--mute); } /* -------- Blog post (uses page--blog body styling) -------- */ .post { max-width: var(--max-w-prose); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) var(--gutter); } .post__eyebrow { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--signal); margin: 0 0 1.25rem; } .post__eyebrow a { color: var(--signal); text-decoration: none; } .post__eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; } .post__sep { padding: 0 0.6em; opacity: 0.5; } .post__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 1.25rem; font-variation-settings: "opsz" 144; } .post__deck { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0 0 3rem; font-style: italic; border-left: 2px solid var(--signal); padding-left: 1rem; } .post__body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 2.5rem 0 0.75rem; font-variation-settings: "opsz" 36; } .post__body p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.1rem; font-feature-settings: "onum", "kern"; } .post__body em { font-style: italic; } .post__body a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; } .post__signoff { margin: 3rem 0 0; font-family: var(--font-body); font-size: 1.0625rem; font-style: italic; color: var(--ink); } .post__footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.5rem; font-family: var(--font-mono); font-size: 0.875rem; } .post__footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--signal); } /* ================================================================ RCF child-page shell: sidebar + content two-column layout. Applied only to the 10 RCF child pages (not the hub). Mobile: sidebar collapses to a
accordion above the page. Desktop (>= 56rem): sticky left sidebar, content beside it. ================================================================ */ .rcf-shell { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr; gap: 0; } .rcf-shell__content { min-width: 0; } /* Inside the shell, .rcf-section drops its outer horizontal padding because the shell already provides the gutter. Top/bottom rhythm is preserved. */ .rcf-shell .rcf-section { padding-left: 0; padding-right: 0; max-width: var(--max-w-prose); margin-left: 0; margin-right: 0; } /* Sidebar: shared core typography. */ .rcf-sidebar { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; color: var(--ink); } .rcf-sidebar__nav { display: flex; flex-direction: column; gap: 0.25rem; } .rcf-sidebar__back { font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; } .rcf-sidebar__back a { color: var(--signal); text-decoration: none; } .rcf-sidebar__back a:hover { text-decoration: underline; text-underline-offset: 3px; } .rcf-sidebar__heading { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--signal); margin: 1.25rem 0 0.5rem; } .rcf-sidebar__heading:first-of-type { margin-top: 0; } .rcf-sidebar__list { list-style: none; padding: 0; margin: 0 0 0.25rem; display: flex; flex-direction: column; } .rcf-sidebar__list li { margin: 0; } .rcf-sidebar__list a { display: block; padding: 0.35rem 0.5rem 0.35rem 0.75rem; border-left: 2px solid transparent; color: var(--ink); text-decoration: none; line-height: 1.4; } .rcf-sidebar__list a:hover { color: var(--signal); border-left-color: var(--rule); } .rcf-sidebar__list a[aria-current="page"] { border-left-color: var(--signal); color: var(--ink); font-weight: 600; background: rgba(193, 74, 58, 0.06); } /* Mobile-first: sidebar renders as a native
accordion at the top of the page, closed by default. */ .rcf-shell > .rcf-sidebar { margin: 1.5rem 0 2rem; } .rcf-sidebar__collapse { border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.35); border-radius: 2px; } .rcf-sidebar__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; } .rcf-sidebar__summary::-webkit-details-marker { display: none; } .rcf-sidebar__summary::marker { content: ""; } .rcf-sidebar__summary::after { content: "+"; font-family: var(--font-mono); font-size: 1rem; color: var(--signal); margin-left: auto; } .rcf-sidebar__collapse[open] .rcf-sidebar__summary::after { content: "\2212"; } .rcf-sidebar__summary-label { color: var(--ink); } .rcf-sidebar__summary-hint { color: var(--mute); font-size: 0.75rem; } .rcf-sidebar__nav { padding: 0.5rem 1rem 1.25rem; border-top: 1px solid var(--rule); } @media (min-width: 56rem) { .rcf-shell { grid-template-columns: 14.5rem 1fr; column-gap: 3rem; align-items: start; } .rcf-shell > .rcf-sidebar { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; margin: 0; padding-top: 3rem; padding-right: 1.5rem; border-right: 1px solid var(--rule); } /* On desktop the
is purely structural: collapse chrome is hidden and the nav is always visible regardless of open state. Overriding the UA display:none on closed-
children works in current Chrome/Safari/Firefox. */ .rcf-shell > .rcf-sidebar .rcf-sidebar__collapse { border: 0; background: transparent; border-radius: 0; } .rcf-shell > .rcf-sidebar .rcf-sidebar__summary { display: none; } .rcf-shell > .rcf-sidebar .rcf-sidebar__nav { display: flex !important; flex-direction: column; gap: 0.25rem; padding: 0; border-top: 0; } .rcf-shell .rcf-section { padding-top: clamp(3rem, 6vw, 4.5rem); } } /* ================================================================ Heading anchors, discrete copy-link button on h1/h2/h3 in written content. Visible on hover or keyboard focus only. ================================================================ */ .post__body h1, .post__body h2, .post__body h3, .rcf-section__body h1, .rcf-section__body h2, .rcf-section__body h3, .rcf-section__header h1, .rcf-section__header h2, .post__header h1 { /* Scroll offset so anchor-jumped headings clear the page top edge. */ scroll-margin-top: 1.25rem; } .heading-anchor { /* Inline-flex so the icon centres on the heading baseline cleanly. */ display: inline-flex; align-items: center; justify-content: center; margin-left: 0.4rem; width: 1.5rem; height: 1.5rem; vertical-align: middle; color: var(--signal); opacity: 0; text-decoration: none; border-radius: 4px; transition: opacity 200ms ease, background-color 150ms ease; } .heading-anchor:hover { background: rgba(193, 74, 58, 0.10); color: var(--signal-2); text-decoration: none; } .heading-anchor:focus-visible { opacity: 1; outline: 2px solid var(--signal); outline-offset: 2px; } :root[data-theme="dark"] .heading-anchor:hover, :where(html:not([data-theme="light"])) .heading-anchor:hover { background: rgba(230, 115, 83, 0.14); } /* Reveal on hover or focus of the heading itself, OR hover of the anchor button. Touch devices that fake :hover get the icon shown permanently once an anchor link has been used, handled in JS. */ h1:hover > .heading-anchor, h2:hover > .heading-anchor, h3:hover > .heading-anchor, h1:focus-within > .heading-anchor, h2:focus-within > .heading-anchor, h3:focus-within > .heading-anchor, .heading-anchor:hover, .heading-anchor:focus-visible { opacity: 1; } .heading-anchor__icon { display: block; width: 1rem; height: 1rem; } /* Screen-reader-only text for the copy-link control. */ .heading-anchor__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Brief highlight on the landed/copied heading. */ @keyframes heading-anchor-flash { 0% { background-color: rgba(193, 74, 58, 0.18); } 100% { background-color: transparent; } } .heading-anchor--flash { animation: heading-anchor-flash 1500ms ease-out 1; border-radius: 4px; } :root[data-theme="dark"] .heading-anchor--flash, :where(html:not([data-theme="light"])) .heading-anchor--flash { animation-name: heading-anchor-flash-dark; } @keyframes heading-anchor-flash-dark { 0% { background-color: rgba(230, 115, 83, 0.22); } 100% { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .heading-anchor--flash { animation-duration: 600ms; } .heading-anchor { transition: none; } } /* Copy-success toast, small, positioned next to the icon. */ .heading-anchor__toast { position: absolute; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; z-index: 50; } .heading-anchor__toast--in { opacity: 1; transform: translateY(0); } /* ================================================================ Scroll-aware sidebar infographic slot. A fixed-position right rail on wide viewports; hidden on narrow ones (the diagram lives in the prose elsewhere if needed). When no mapped H2 is in view, the wrapper takes hidden=true via JS. ================================================================ */ .sidebar-infographic-slot { /* Hidden on small screens, the page's prose carries the meaning. */ display: none; } @media (min-width: 80rem) { .sidebar-infographic-slot { display: block; position: fixed; top: 6rem; right: clamp(1rem, calc((100vw - var(--max-w)) / 2), 4rem); width: 14.5rem; max-height: calc(100vh - 8rem); overflow: hidden; z-index: 5; /* The wrapper is shown/hidden via [hidden] attribute on JS; the :not([hidden]) selector handles the visible state. We override the user-agent display:none for [hidden] only when the slot is allowed to show on this viewport. */ } .sidebar-infographic-slot[hidden] { display: none; } } .sidebar-infographic-slot__label { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--signal); margin: 0 0 0.5rem; } .sidebar-infographic { cursor: zoom-in; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.35); border-radius: 2px; padding: 0.75rem 0.75rem 0.5rem; opacity: 0; transition: opacity 240ms ease; /* SVGs inside need to fit the rail width. */ max-width: 100%; } :root[data-theme="dark"] .sidebar-infographic, :root:not([data-theme="light"]) .sidebar-infographic { background: rgba(255, 255, 255, 0.02); } .sidebar-infographic[hidden] { display: none; } .sidebar-infographic.is-visible { opacity: 1; } .sidebar-infographic:hover { border-color: var(--signal); } .sidebar-infographic:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* Constrain inner figure size in the sidebar, the figure is fluid. */ .sidebar-infographic figure { margin: 0; } /* Honour prefers-reduced-motion: instant swap, no transition. */ .sidebar-infographic-slot[data-reduced-motion="1"] .sidebar-infographic { transition: none; } /* ================================================================ Click-to-enlarge modal. Full-page dimmed overlay, centred content area, fade on open. ================================================================ */ .infographic-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; } .infographic-modal[hidden] { display: none; } .infographic-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); cursor: zoom-out; } :root[data-theme="dark"] .infographic-modal__backdrop, :root:not([data-theme="light"]) .infographic-modal__backdrop { background: rgba(0, 0, 0, 0.8); } .infographic-modal__content { position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; padding: 1.5rem 2rem 2rem; width: min(80vw, 1100px); max-height: calc(100vh - 4rem); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .infographic-modal__close { position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: 0; width: 2.5rem; height: 2.5rem; font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer; border-radius: 4px; } .infographic-modal__close:hover { background: rgba(193, 74, 58, 0.1); color: var(--signal); } .infographic-modal__close:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .infographic-modal__title { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin: 0 2rem 1rem 0; color: var(--mute); letter-spacing: 0.02em; font-variation-settings: "opsz" 24; } .infographic-modal__body { width: 100%; } .infographic-modal__body figure { margin: 0; width: 100%; } body.infographic-modal-open { overflow: hidden; }