/*
* Rezumable blog stylesheet — SELF-CONTAINED.
*
* Consumed by two surfaces that do NOT share the SPA CSS bundle:
* 1. The Flask-rendered public pages (templates/blog/list.html + post.html),
* which link it directly and use the page-chrome classes below.
* 2. The Blog Studio editor (BlogEditor.tsx), which injects this stylesheet
* and gives its Tiptap content area class="blog-article" so authoring is
* WYSIWYG with the published page.
*
* Because the Flask pages never load the SPA bundle, this file defines its own
* --blog-* variables (the one sanctioned place for hex values outside the token
* system). Dark mode keys off the .dark class on , set by the same
* pre-hydration theme script the SPA uses.
*
* Class contract with the Jinja templates (templates/blog/_layout.html + list.html + post.html):
* .blog-page body wrapper (bg, text color, font, sticky footer)
* .blog-header > .blog-header-inner (flex row): .blog-wordmark-link > .blog-wordmark (SVG,
* letterforms currentColor, accent uses var(--primary)), .blog-nav (a links,
* aria-current="page" on the active one), .blog-header-actions (.blog-signin, .blog-cta)
* .blog-main content column between header and footer
* .blog-list-header h1 + intro p on /blog
* .blog-hero-card newest post (): .blog-hero-text (.blog-kicker, h2, p,
* .blog-card-meta with .blog-readmore) + .blog-hero-cover (img)
* .blog-list 2-col grid of .blog-card (): optional .blog-card-cover (img),
* .blog-card-body > .blog-card-title (h3), .blog-card-desc (p),
* .blog-card-meta; .blog-empty when no posts
* .blog-article long-form post body (also the editor content area); post.html nests
* .blog-post-header (h1 + .blog-byline: .blog-author, time, .blog-updated,
* optional .blog-preview-banner) before the content HTML
* .blog-footer > .blog-footer-inner > .blog-footer-grid (.blog-footer-brand with wordmark +
* .blog-footer-social, 2x .blog-footer-col with .blog-footer-heading + ul) +
* .blog-footer-bottom
* .blog-meta generic muted byline helper (used by the editor surface)
*/
:root {
/* Type system (founder decision 2026-08-18): article READING text is a
zero-download system serif; headings, byline, captions, code, and all
page/editor chrome stay Inter. Applies identically in the Studio editor
(same stylesheet) so authoring is WYSIWYG. */
--blog-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--blog-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
--blog-bg: #fbfbfd;
--blog-fg: #1b1c26;
--blog-muted: #5c5f70;
--blog-border: #e4e5ee;
--blog-surface: #ffffff;
--blog-primary: #5b4fe8; /* canonical brand indigo */
--blog-primary-hover: #4a3fd4;
--blog-link: #4f43d9; /* deepened for AA on light backgrounds */
--blog-code-bg: #f1f1f7;
--blog-code-fg: #3a3d52;
}
.dark {
--blog-bg: #0a0a0a;
--blog-fg: #f9fafb;
--blog-muted: #9ba3af;
--blog-border: rgba(255, 255, 255, 0.1);
--blog-surface: #131316;
--blog-primary: #5b4fe8;
--blog-primary-hover: #6c61f0;
--blog-link: #a5a0f6; /* lightened for AA on dark backgrounds */
--blog-code-bg: #17181d;
--blog-code-fg: #d7d9e3;
}
/* ── Page shell ──────────────────────────────────────────────────────────── */
.blog-page {
/* Alias consumed by the wordmark SVG's accent path (copied from the SPA,
where the accent is fill="var(--primary)"). Scoped to .blog-page (the
Flask pages' body class) so injecting this stylesheet in the SPA cannot
override the app-wide --primary token. Same value in both themes. */
--primary: #5b4fe8;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--blog-bg);
color: var(--blog-fg);
font-family: var(--blog-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.blog-page a:focus-visible,
.blog-page button:focus-visible {
outline: 2px solid var(--blog-link);
outline-offset: 2px;
border-radius: 0.25rem;
}
.blog-page h1 {
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 0.5rem;
}
.blog-meta {
color: var(--blog-muted);
font-size: 0.875rem;
}
/* ── Header ──────────────────────────────────────────────────────────────── */
.blog-header {
border-bottom: 1px solid var(--blog-border);
/* full-width border, centered 72rem content column */
padding: 0.875rem max(1.25rem, calc((100vw - 72rem) / 2));
}
.blog-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.blog-header nav {
display: flex;
align-items: center;
gap: 1.25rem;
}
.blog-header a {
color: var(--blog-muted);
text-decoration: none;
font-size: 0.875rem;
transition: color 0.15s ease;
}
.blog-header a:hover {
color: var(--blog-fg);
}
.blog-header nav a[aria-current='page'] {
color: var(--blog-fg);
}
.blog-wordmark-link {
display: inline-flex;
align-items: center;
color: var(--blog-fg);
}
.blog-wordmark {
display: block;
width: auto;
}
.blog-header-actions {
display: flex;
align-items: center;
gap: 0.875rem;
}
.blog-header .blog-cta {
background: var(--blog-primary);
color: #ffffff;
padding: 0.5rem 0.875rem;
border-radius: 0.5rem;
font-weight: 600;
transition: background-color 0.15s ease;
}
.blog-header .blog-cta:hover {
background: var(--blog-primary-hover);
color: #ffffff;
}
@media (max-width: 40rem) {
/* Narrow screens: wordmark + actions only; the footer repeats the nav links. */
.blog-nav {
display: none;
}
}
/* ── Footer ──────────────────────────────────────────────────────────────── */
.blog-footer {
margin-top: auto;
border-top: 1px solid var(--blog-border);
padding: 2rem max(1.25rem, calc((100vw - 72rem) / 2)) 2.5rem;
color: var(--blog-muted);
font-size: 0.8125rem;
}
.blog-footer a {
color: var(--blog-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.blog-footer a:hover {
color: var(--blog-fg);
}
.blog-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 40rem) {
.blog-footer-grid {
grid-template-columns: 2fr 1fr 1fr;
gap: 2.5rem;
}
}
.blog-footer-brand .blog-wordmark {
color: var(--blog-fg);
}
.blog-footer-brand p {
margin: 0.75rem 0;
line-height: 1.6;
}
.blog-footer-social {
display: flex;
align-items: center;
gap: 0.75rem;
}
.blog-footer-heading {
font-size: 0.8125rem;
font-weight: 600;
color: var(--blog-fg);
margin-bottom: 0.75rem;
}
.blog-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.blog-footer-bottom {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--blog-border);
}
/* ── Main column ─────────────────────────────────────────────────────────── */
.blog-main {
flex: 1;
width: 100%;
box-sizing: border-box;
padding: 3rem 1.25rem 4.5rem;
}
/* ── Listing (/blog): featured hero + grid ───────────────────────────────── */
.blog-list-header {
max-width: 52rem;
margin: 0 auto 2rem;
}
.blog-list-header p {
margin: 0;
color: var(--blog-muted);
line-height: 1.6;
}
.blog-empty {
max-width: 52rem;
margin: 2rem auto;
text-align: center;
color: var(--blog-muted);
}
/* Hero: the newest post, full width. */
.blog-hero-card {
max-width: 52rem;
margin: 0 auto 1rem;
display: flex;
align-items: stretch;
border: 1px solid var(--blog-border);
border-radius: 1rem;
background: var(--blog-surface);
overflow: hidden;
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-hero-card:hover {
border-color: var(--blog-primary);
transform: translateY(-2px);
}
.blog-hero-text {
flex: 1.1;
min-width: 0;
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.blog-kicker {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blog-link);
}
.blog-hero-text h2 {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0;
color: var(--blog-fg);
}
.blog-hero-text p {
margin: 0;
font-size: 0.95rem;
color: var(--blog-muted);
line-height: 1.6;
}
.blog-hero-text .blog-card-meta {
margin-top: auto;
padding-top: 0.5rem;
}
.blog-hero-cover {
flex: 1;
width: 45%;
min-height: 14rem;
object-fit: cover;
display: block;
}
.blog-readmore {
margin-left: auto;
color: var(--blog-link);
font-weight: 600;
font-size: 0.8125rem;
}
/* Grid: everything after the hero, two-up. */
.blog-list {
width: 100%;
max-width: 52rem;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.blog-card {
display: block;
border: 1px solid var(--blog-border);
border-radius: 0.85rem;
background: var(--blog-surface);
color: inherit;
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
overflow: hidden;
}
.blog-card:hover {
border-color: var(--blog-primary);
transform: translateY(-2px);
}
.blog-card-cover {
display: block;
width: 100%;
height: 8rem;
object-fit: cover;
}
.blog-card-body {
padding: 0.95rem 1.1rem 1.05rem;
min-width: 0;
}
@media (max-width: 40rem) {
.blog-hero-card {
flex-direction: column-reverse;
}
.blog-hero-cover {
width: 100%;
min-height: 0;
height: 11rem;
}
.blog-list {
grid-template-columns: 1fr;
}
}
.blog-card-title {
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.35;
margin: 0 0 0.375rem;
color: var(--blog-fg);
}
.blog-card-desc {
margin: 0 0 0.625rem;
font-size: 0.85rem;
line-height: 1.55;
color: var(--blog-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
font-size: 0.8125rem;
color: var(--blog-muted);
}
/* ── Post header (public page) ───────────────────────────────────────────── */
.blog-post-header {
margin-bottom: 2.5rem;
}
.blog-post-header h1 {
font-size: 2.25rem;
}
.blog-byline {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.75rem;
margin-top: 0.75rem;
font-size: 0.875rem;
color: var(--blog-muted);
}
.blog-author {
color: var(--blog-fg);
font-weight: 500;
}
.blog-preview-banner {
margin: 0 0 1.25rem;
padding: 0.625rem 0.875rem;
border: 1px solid rgba(245, 158, 11, 0.45);
border-radius: 0.5rem;
background: rgba(245, 158, 11, 0.12);
color: #92610b;
font-size: 0.875rem;
}
.dark .blog-preview-banner {
color: #fbd38d;
}
/* Post hero: the share image rendered at the top of the article. */
.blog-hero {
display: block;
width: 100%;
height: auto;
border-radius: 0.75rem;
margin: 0 0 2rem;
}
/* ── Article body (public page + editor content area) ────────────────────── */
.blog-article {
max-width: 68ch;
margin-left: auto;
margin-right: auto;
/* Serif reading text; sized up slightly because serifs render smaller than
Inter at equal size. Headings/captions below opt back into --blog-sans. */
font-family: var(--blog-serif);
font-size: 1.125rem;
line-height: 1.78;
color: var(--blog-fg);
overflow-wrap: break-word;
}
/* The post header (title, byline, preview banner) is chrome, not reading text. */
.blog-post-header {
font-family: var(--blog-sans);
}
.blog-article > :first-child {
margin-top: 0;
}
.blog-article p {
margin: 1.25em 0;
}
.blog-article h2 {
font-family: var(--blog-sans);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.3;
margin: 2.25em 0 0.75em;
}
.blog-article h3 {
font-family: var(--blog-sans);
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.35;
margin: 1.75em 0 0.5em;
}
.blog-article a {
color: var(--blog-link);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.blog-article a:hover {
color: var(--blog-primary-hover);
}
.blog-article strong {
font-weight: 600;
}
.blog-article ul,
.blog-article ol {
margin: 1.25em 0;
padding-left: 1.5rem;
}
.blog-article ul {
list-style: disc;
}
.blog-article ol {
list-style: decimal;
}
.blog-article li {
margin: 0.375em 0;
}
.blog-article li p {
margin: 0.375em 0;
}
.blog-article blockquote {
margin: 1.5em 0;
padding: 0.25em 0 0.25em 1.25rem;
border-left: 3px solid var(--blog-primary);
color: var(--blog-muted);
font-style: italic;
}
.blog-article blockquote p {
margin: 0.5em 0;
}
.blog-article code {
background: var(--blog-code-bg);
color: var(--blog-code-fg);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.875em;
padding: 0.15em 0.4em;
border-radius: 0.375rem;
}
.blog-article pre {
background: var(--blog-code-bg);
color: var(--blog-code-fg);
margin: 1.5em 0;
padding: 1rem 1.25rem;
border-radius: 0.625rem;
overflow-x: auto;
font-size: 0.875rem;
line-height: 1.6;
}
.blog-article pre code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
color: inherit;
}
.blog-article img {
display: block;
max-width: 100%;
height: auto;
border-radius: 0.625rem;
margin: 1.75em auto;
}
.blog-article figure {
margin: 1.75em 0;
}
.blog-article figure img {
margin: 0 auto;
}
.blog-article figcaption {
margin-top: 0.625rem;
text-align: center;
font-family: var(--blog-sans);
font-size: 0.8125rem;
color: var(--blog-muted);
}
.blog-article hr {
border: none;
border-top: 1px solid var(--blog-border);
margin: 2.5em 0;
}
/* Editor-only: selected image outline inside Tiptap (no effect on public pages). */
.blog-article img.ProseMirror-selectednode {
outline: 2px solid var(--blog-primary);
outline-offset: 2px;
}
/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.blog-page *,
.blog-card,
.blog-article * {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}