/* ============================================================ Coassisted static-site default theme (structural stylesheet). Vanilla CSS, no framework, no dependencies. Override per-site by creating /static-site/theme.css — that file is concatenated AFTER this one (and after the generated palette blocks), so overrides win. CSS custom properties on :root make most tweaks one-line jobs. The :root defaults below ARE the `slate` palette (light). The named [data-palette=""] blocks are GENERATED from src/palettes.ts by build.ts and prepended to dist/theme.css — this file intentionally contains NO [data-palette] blocks. carries data-palette="" to select one; unset falls through to slate. Design language: editorial/magazine. Light by default, one accent color, hairline borders, generous whitespace, system fonts, no decorative JS, no glows, no auto dark-mode flip. Metadata is design. ============================================================ */ :root { /* --- slate palette defaults (light) --- */ --bg: #ffffff; --bg-soft: #f5f7f9; --fg: #1a1d23; --muted: #57606c; --muted-strong: #333a44; --border: #e4e7eb; --border-strong: #91959b; --accent: #2563eb; --accent-hover: #1d4fd7; --accent-tint: rgba(37, 99, 235, 0.08); --accent-contrast: #ffffff; /* --- structural tokens (palette-independent) --- */ --container: 1080px; --container-narrow: 720px; --radius: 12px; --radius-sm: 8px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", monospace; /* card shadow — a single very soft lift, no glow */ --card-shadow: 0 1px 3px rgb(0 0 0 / 0.06); } /* ============================================================ Base ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; } .container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; } /* Vertical rhythm for stacked sections. */ .section { padding: 4.5rem 0; } .section-soft { background: var(--bg-soft); } @media (max-width: 720px) { .section { padding: 3rem 0; } } /* ============================================================ Type scale (fluid) ============================================================ */ h1, h2, h3, h4 { margin: 0 0 0.6rem; line-height: 1.2; } h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.1; } h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; letter-spacing: -0.015em; } h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; } /* Uppercase accent kicker, shared by eyebrow/kicker/page-label/badge. */ .eyebrow, .kicker, .page-label { display: inline-block; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.65rem; } /* ============================================================ Skip link — visually hidden until focused ============================================================ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.6rem 1rem; background: var(--accent); color: var(--accent-contrast); border-radius: 0 0 var(--radius-sm) 0; font-size: 0.9rem; font-weight: 600; } .skip-link:focus { left: 0; text-decoration: none; } /* ============================================================ Nav ============================================================ */ .site-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.5rem; max-width: var(--container); margin: 0 auto; /* Explicit anchor for the mobile .nav-menu dropdown (position: absolute; top: 100% below). Without this the dropdown depends on .site-nav being positioned — a theme.css that overrides the nav to `position: static` (a normal theming choice) would silently re-anchor the open menu to the viewport, a full screen-height below the header. */ position: relative; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.05rem; color: var(--fg); letter-spacing: -0.015em; } .brand:hover { text-decoration: none; color: var(--fg); } .brand-logo { display: block; height: 1.6rem; width: auto; border-radius: var(--radius-sm); } .nav-menu { display: flex; gap: 1.5rem; margin-left: auto; align-items: center; } .nav-menu a { color: var(--muted); font-size: 0.95rem; font-weight: 500; transition: color 0.12s ease; } .nav-menu a:hover, .nav-menu a.active, .nav-menu a[aria-current="page"] { color: var(--fg); text-decoration: none; } .nav-cta { flex: none; } .nav-toggle { display: none; background: none; border: 0; color: var(--fg); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.25rem; margin-left: auto; } @media (max-width: 720px) { .nav-toggle { display: block; } .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; /* Paint the open dropdown above positioned page content even when a theme unsticks the nav (losing .site-nav's z-index: 50 anchor). */ z-index: 10; flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 1rem 1.5rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--border); } .nav-menu.active { display: flex; } .nav-cta { align-self: flex-start; } } /* ============================================================ Heroes Clean type on `bg` with a border-bottom. No glows, no grids. ============================================================ */ /* Homepage hero — may use a barely-there accentTint wash. */ .hero-home { padding: 4.5rem 0 4rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-tint), transparent 70%); } .hero-home .eyebrow { margin-bottom: 0.85rem; } .hero-home h1 { margin: 0 0 1rem; max-width: 20ch; } .hero-dek { color: var(--muted); font-size: 1.15rem; line-height: 1.55; max-width: 58ch; margin: 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* Optional right-side hero image: two-col grid at >=900px. */ .hero-home .hero-home-inner { display: grid; gap: 2.5rem; align-items: center; } .hero-home-media { margin: 0; } .hero-home-media img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); } @media (min-width: 900px) { .hero-home-split .hero-home-inner { grid-template-columns: 1.1fr 0.9fr; } } /* Compact list header. */ .page-hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--border); } .page-hero h1 { margin: 0 0 0.75rem; } .page-dek { color: var(--muted); font-size: 1.1rem; line-height: 1.55; max-width: 60ch; margin: 0; } /* Detail (post) header. */ .post-hero { padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); } .post-hero h1 { margin: 0.35rem 0 0.9rem; max-width: 24ch; } .post-dek { color: var(--muted); font-size: 1.15rem; line-height: 1.55; max-width: 60ch; margin: 0; } /* Breadcrumb-style back link. */ .back-link { display: inline-block; color: var(--muted); font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; } .back-link:hover { color: var(--accent); text-decoration: none; } /* Shared meta line (date · read time · category · author). */ .post-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; font-size: 0.88rem; color: var(--muted); margin-top: 1rem; } .post-meta a { color: var(--muted); } .post-meta a:hover { color: var(--accent); } .meta-divider { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: 0.6; } /* Topic/tag chips (post hero). */ .post-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; } .topic-chip { display: inline-block; padding: 0.18rem 0.65rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } /* ============================================================ Prose ============================================================ */ .prose { max-width: 68ch; font-size: 17px; line-height: 1.7; } .prose > :first-child { margin-top: 0; } .prose p { margin: 1.1rem 0; } .prose h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin-top: 3rem; /* top rhythm break so listicles scan */ margin-bottom: 0.75rem; } .prose h3 { font-size: 1.25rem; font-weight: 650; margin-top: 2rem; margin-bottom: 0.6rem; } .prose ul, .prose ol { padding-left: 1.4rem; margin: 1.1rem 0; } .prose li { margin: 0.4rem 0; } .prose li > ul, .prose li > ol { margin: 0.4rem 0; } /* Links: accent underline, offset. */ .prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2px; } .prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); } /* Heading anchor links. */ .prose .heading-link { color: inherit; text-decoration: none; } .prose .heading-link:hover { color: var(--accent); } /* Styled hr. */ .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* Images + figures. */ .prose img { border-radius: var(--radius); } .prose figure { margin: 2rem 0; } .prose figure img { width: 100%; } .prose figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; text-align: center; } /* Blockquote — accentTint wash + accent border. */ .prose blockquote { margin: 1.75rem 0; padding: 0.6rem 1.25rem; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted-strong); } .prose blockquote p:first-child { margin-top: 0; } .prose blockquote p:last-child { margin-bottom: 0; } /* Code + pre. */ .prose code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-soft); border: 1px solid var(--border); padding: 0.12rem 0.4rem; border-radius: var(--radius-sm); } .prose pre { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; overflow-x: auto; line-height: 1.55; margin: 1.5rem 0; } .prose pre code { background: transparent; border: 0; padding: 0; font-size: 0.9em; } /* Tables — bordered, bgSoft header row, zebra body rows. Markdown tables come wrapped in .table-wrap so wide tables scroll instead of breaking the prose column. */ .prose .table-wrap { margin: 1.75rem 0; overflow-x: auto; } .prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.95rem; } .prose .table-wrap table { margin: 0; } .prose th, .prose td { border: 1px solid var(--border); padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; } .prose thead th { background: var(--bg-soft); font-weight: 650; color: var(--fg); } .prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-soft) 55%, var(--bg)); } /* ============================================================ Cards + grid ============================================================ */ .card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .card { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.5rem; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } /* Kicker row: badge + date. */ .card .badge { align-self: flex-start; } .card-kicker { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--muted); margin: 0; } .card h3 { font-size: 1.15rem; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; margin: 0; transition: color 0.15s ease; } .card:hover h3 { color: var(--accent); } /* Description — 2-line clamp. */ .card p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.6rem; font-size: 0.85rem; color: var(--muted); } .card-foot .card-link { color: var(--accent); font-weight: 600; flex: none; } .card:hover .card-foot .card-link { color: var(--accent-hover); } /* Featured variant — spans grid, bigger type. */ .card-featured { grid-column: 1 / -1; } @media (min-width: 760px) { .card-featured { padding: 2rem 2.25rem; } .card-featured h3 { font-size: 1.65rem; line-height: 1.25; } .card-featured p { font-size: 1.05rem; max-width: 72ch; -webkit-line-clamp: 3; line-clamp: 3; } } /* Uppercase accent kicker (category). */ .badge { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } /* Empty-state placeholder. */ .empty { color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 2rem; text-align: center; } /* ============================================================ Section bar (feed heading row on homepage/lists) ============================================================ */ .section-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; } .section-bar h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; } .section-bar-link { color: var(--muted); font-size: 0.9rem; font-weight: 500; flex: none; } .section-bar-link:hover { color: var(--accent); text-decoration: none; } /* ============================================================ Pagination ============================================================ */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin: 3rem 0 0; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--fg); } .pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .pagination [aria-current="page"], .pagination .pagination-page.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 650; } .pagination .pagination-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .pagination .pagination-pages li { margin: 0; } .pagination .is-disabled { opacity: 0.4; pointer-events: none; } /* ============================================================ Prev / next (detail page footer — two cards) ============================================================ */ .prev-next { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 3rem 0 0; } @media (min-width: 640px) { .prev-next { grid-template-columns: 1fr 1fr; } } .prev-next-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); transition: border-color 0.15s ease, transform 0.15s ease; } .prev-next-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; } .prev-next-label { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .prev-next-newer { text-align: right; } /* When a post has only a newer neighbor (the oldest post in a list), keep the lone card in the right column so its "Newer →" direction reads correctly. */ @media (min-width: 640px) { .prev-next-card.prev-next-newer:only-child { grid-column: 2; } } .prev-next-title { font-size: 1.1rem; font-weight: 650; line-height: 1.35; color: var(--fg); transition: color 0.15s ease; } .prev-next-card:hover .prev-next-title { color: var(--accent); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.88rem; } .btn-lg { padding: 0.85rem 1.5rem; font-size: 1.05rem; } /* ============================================================ Footer (3-zone) + newsletter ============================================================ */ .site-footer { border-top: 1px solid var(--border); margin-top: 4.5rem; padding: 3rem 0 2.25rem; color: var(--muted); font-size: 0.9rem; } .footer-inner { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; justify-content: space-between; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .footer-brand { display: flex; flex-direction: column; gap: 0.4rem; max-width: 32ch; } .footer-brand-name { font-weight: 700; color: var(--fg); font-size: 1rem; } .footer-tagline { color: var(--muted); font-size: 0.875rem; line-height: 1.5; } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--accent); } .footer-meta { width: 100%; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; } /* Newsletter form. */ .footer-newsletter { display: flex; flex-direction: column; gap: 0.55rem; max-width: 34ch; } .footer-newsletter-heading { font-weight: 650; color: var(--fg); margin: 0; font-size: 1rem; } .footer-newsletter-blurb { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 0; } .footer-newsletter .btn { align-self: flex-start; } .newsletter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; } .newsletter-input { flex: 1 1 12rem; min-width: 0; padding: 0.55rem 0.75rem; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 0.9rem; font-family: inherit; } .newsletter-input::placeholder { color: var(--muted); } .newsletter-input:focus { outline: none; border-color: var(--accent); } .newsletter-button { padding: 0.55rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer; background: var(--accent); color: var(--accent-contrast); font-size: 0.9rem; font-weight: 600; font-family: inherit; } .newsletter-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .newsletter-button:disabled { opacity: 0.5; cursor: not-allowed; } /* End-of-article newsletter CTA. */ .newsletter-cta { max-width: 68ch; margin: 3rem 0 0; padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-tint); } .newsletter-cta-heading { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .newsletter-cta-blurb { margin: 0 0 1.1rem; color: var(--muted-strong); font-size: 0.95rem; line-height: 1.55; } .newsletter-cta .newsletter-form { max-width: 30rem; } /* ============================================================ 404 ============================================================ */ .not-found { text-align: center; padding: 6rem 0 5rem; } .not-found .eyebrow { font-size: clamp(2.25rem, 12vw, 5rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin: 0 0 0.75rem; } .not-found h1 { margin: 0 0 0.75rem; } .not-found-dek { color: var(--muted); font-size: 1.1rem; margin: 0 auto 1.75rem; max-width: 44ch; } .not-found-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: center; } .not-found-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; justify-content: center; margin-top: 2rem; } .not-found-nav a { color: var(--muted); font-size: 0.9rem; } .not-found-nav a:hover { color: var(--accent); } /* ============================================================ Global polish ============================================================ */ ::selection { background: var(--accent-tint); color: var(--fg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* === Generated palette blocks (src/palettes.ts) === */ [data-palette="slate"] { --bg: #ffffff; --bg-soft: #f5f7f9; --fg: #1a1d23; --muted: #57606c; --muted-strong: #333a44; --border: #e4e7eb; --border-strong: #91959b; --accent: #2563eb; --accent-hover: #1d4fd7; --accent-tint: rgba(37,99,235,.08); --accent-contrast: #ffffff; } [data-palette="paper"] { --bg: #faf7f2; --bg-soft: #f1ece3; --fg: #211d17; --muted: #655c50; --muted-strong: #3d372e; --border: #e6dfd3; --border-strong: #968f82; --accent: #b02a37; --accent-hover: #921f2b; --accent-tint: rgba(176,42,55,.07); --accent-contrast: #ffffff; } [data-palette="evergreen"] { --bg: #fdfefd; --bg-soft: #f2f6f3; --fg: #182420; --muted: #54615b; --muted-strong: #31403a; --border: #e2e9e4; --border-strong: #8e9691; --accent: #137a53; --accent-hover: #0e5f40; --accent-tint: rgba(19,122,83,.08); --accent-contrast: #ffffff; } [data-palette="midnight"] { --bg: #0d1017; --bg-soft: #141924; --fg: #e8ebf0; --muted: #9aa3b2; --muted-strong: #c6ccd6; --border: #232936; --border-strong: #58606e; --accent: #7aa7ff; --accent-hover: #9dbeff; --accent-tint: rgba(122,167,255,.10); --accent-contrast: #0b1020; } /* === Per-site overrides === */ /* Site-specific CSS overrides. The central default theme is loaded first. */