/* ========================================================================= kavitha — A publishing theme for writers and builders v0.1.0 · MIT · github.com/snehithkumar-d/kavitha Direction D — Magazine spread. Newspaper-style masthead, asymmetric featured-post hero, sidebar list, section bands, 3-up project grid. This is the SHIPPED stylesheet. For v0.2+ the build pipeline (PostCSS + esbuild) will assemble this from src/css/*.css imports. Today, edit here directly if you're touching v0.1.0. ======================================================================== */ /* ------------------------------------------------------------------------- 1. FONTS Loaded via Google Fonts CSS in default.hbs . The @font-face declarations are managed there. Self-hosting is on the v0.2 backlog pending a proper TTF→woff2 conversion pipeline (the shipped fetch script grabbed sliced static subsets that broke variable axes). ----------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 2. DESIGN TOKENS ----------------------------------------------------------------------- */ :root { /* Type stacks */ --font-serif: 'Fraunces', Charter, 'Iowan Old Style', 'Source Serif Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Resolved cascade: 1. --gh-font-body / --gh-font-heading — Ghost admin → Design → Customize → Fonts (always wins) 2. --kavitha-body-font / --kavitha-heading-font — set inline by default.hbs from @custom.body_font 3. --font-serif default */ --kavitha-body-font: var(--gh-font-body, var(--font-serif)); --kavitha-heading-font: var(--gh-font-heading, var(--kavitha-body-font)); /* Tunable design tokens (formerly magic numbers) */ --featured-min-h: 380px; --card-image-ratio: 16 / 10; --overlay-light-soft: rgba(255, 255, 255, 0.18); --overlay-dark-soft: rgba(0, 0, 0, 0.18); --touch-target: 40px; /* Widths */ --content-w: 720px; /* prose */ --wide-w: 1100px; /* indices, home, projects */ --gutter: 24px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Type scale */ --fs-xs: 11px; --fs-s: 13px; --fs-m: 15px; --fs-l: 17px; --fs-xl: 21px; --fs-2xl: 28px; --fs-3xl: 40px; --fs-4xl: 56px; --fs-5xl: 72px; /* Light theme defaults */ --bg: #fdfdfa; --surface: #f4f3ed; --ink: #111111; --muted: #6b6b6b; --line: #e0ddd2; --line-bold: #111111; /* Accent — Ghost injects --ghost-accent-color from @site.accent_color. --accent-text is set by the bootstrap script in default.hbs based on relative luminance, with an optional admin override. */ --accent: var(--ghost-accent-color, #1e6b6b); --accent-text: #ffffff; --accent-soft: color-mix(in oklab, var(--accent) 8%, var(--bg)); /* Sodo Search modal vars (the search modal lives in shadow DOM — — so root custom properties are the only way to style it). */ --sodo-search-color-accent: var(--accent); --sodo-search-color-bg: var(--bg); --sodo-search-color-text: var(--ink); /* Portal (members modal) vars */ --portal-color-accent: var(--accent); /* Misc */ --radius-s: 4px; --radius-m: 6px; --radius-l: 12px; --shadow-soft: 0 1px 2px rgba(17, 17, 17, 0.04); --transition-fast: 0.15s ease; } [data-theme="dark"] { --bg: #0e0f12; --surface: #181a1f; --ink: #ececea; --muted: #8a8d94; --line: #2a2c32; --line-bold: #ececea; --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--bg)); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3); --sodo-search-color-bg: var(--bg); --sodo-search-color-text: var(--ink); } @media (prefers-color-scheme: dark) { /* Auto mode: respect OS preference UNLESS user manually set a theme. When the bootstrap script sets data-theme="light", that wins. */ html:not([data-theme]) { --bg: #0e0f12; --surface: #181a1f; --ink: #ececea; --muted: #8a8d94; --line: #2a2c32; --line-bold: #ececea; --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--bg)); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3); } } /* ------------------------------------------------------------------------- 3. RESET & BASE ----------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-padding-top: 96px; } @media (max-width: 640px) { html { scroll-padding-top: 72px; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--kavitha-body-font); font-size: var(--fs-m); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } hr { border: none; border-top: 1px solid var(--line); margin: var(--s-7) 0; } ::selection { background: var(--accent); color: var(--accent-text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-s); } /* ------------------------------------------------------------------------- 4. TYPOGRAPHY ----------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--kavitha-heading-font); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--s-4); color: var(--ink); } .post-body h1 { font-size: var(--fs-3xl); margin-top: var(--s-8); margin-bottom: var(--s-4); } .post-body h2 { font-size: var(--fs-2xl); margin-top: var(--s-8); margin-bottom: var(--s-4); } .post-body h3 { font-size: var(--fs-xl); margin-top: var(--s-7); margin-bottom: var(--s-3); } .post-body h4 { font-size: var(--fs-l); margin-top: var(--s-6); margin-bottom: var(--s-3); } /* Anchor-scroll offset — keep TOC clicks + browser fragment navigation from landing the heading underneath the sticky header. Value covers header + a small breathing buffer. */ .post-body h2, .post-body h3, .post-body h4 { scroll-margin-top: 96px; } @media (max-width: 640px) { .post-body h2, .post-body h3, .post-body h4 { scroll-margin-top: 72px; } } .post-body h5 { font-size: var(--fs-m); margin-top: var(--s-5); margin-bottom: var(--s-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .post-body h6 { font-size: var(--fs-s); margin-top: var(--s-5); margin-bottom: var(--s-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .post-body > :first-child { margin-top: 0; } p { margin: 0 0 var(--s-5); } ul, ol { margin: 0 0 var(--s-5); padding-left: var(--s-6); } li { margin-bottom: var(--s-2); } blockquote { margin: var(--s-7) 0; padding: 0 0 0 var(--s-5); border-left: 2px solid var(--accent); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-l); color: var(--ink); line-height: 1.5; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 0.15em 0.35em; border-radius: var(--radius-s); } pre { font-family: var(--font-mono); font-size: var(--fs-s); background: var(--surface); color: var(--ink); padding: var(--s-5); border-radius: var(--radius-m); overflow-x: auto; line-height: 1.55; margin: var(--s-6) 0; border: 1px solid var(--line); } [data-theme="dark"] pre, @media (prefers-color-scheme: dark) { html:not([data-theme]) pre { border-color: color-mix(in oklab, var(--ink) 18%, var(--surface)); } } [data-theme="dark"] pre { border-color: color-mix(in oklab, var(--ink) 18%, var(--surface)); } pre code { background: transparent; padding: 0; font-size: inherit; border-radius: 0; } table { width: 100%; border-collapse: collapse; margin: var(--s-6) 0; font-size: var(--fs-s); } th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); } th { font-weight: 600; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; } /* ------------------------------------------------------------------------- 5. LAYOUT ----------------------------------------------------------------------- */ .site-wrap { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1; } .container { max-width: var(--wide-w); margin: 0 auto; padding: 0 var(--gutter); width: 100%; } .container-narrow { max-width: calc(var(--content-w) + (var(--gutter) * 2)); } /* ------------------------------------------------------------------------- 6. SITE HEADER (Direction D — newspaper masthead) ----------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); } .site-header-inner { max-width: var(--wide-w); margin: 0 auto; padding: var(--s-5) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .site-brand { text-decoration: none; font-family: var(--font-serif); font-weight: 500; font-style: italic; /* 24px hardcoded to match the Direction B preview spec exactly; --fs-xl (21px) was too small, --fs-2xl (28px) too chunky for the longer "Snehith Kumar" wordmark. */ font-size: 24px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 500; line-height: 1; color: var(--ink); flex-shrink: 0; } .site-brand-logo { max-height: 32px; width: auto; } .site-brand-text { display: inline-block; } .site-nav { display: flex; align-items: center; gap: var(--s-6); } .site-nav-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-s); text-transform: lowercase; letter-spacing: 0; color: var(--muted); } .site-nav-list li { margin: 0; } .site-nav-list a { display: inline-flex; align-items: center; height: var(--touch-target); text-decoration: none; transition: color var(--transition-fast); } .site-nav-list a:hover { color: var(--ink); } .site-nav-list a[aria-current="page"] { color: var(--ink); font-weight: 500; } .site-nav-list a[aria-current="page"]::before { content: '> '; color: var(--accent); margin-right: 2px; } .site-nav-actions { display: flex; align-items: center; gap: var(--s-4); color: var(--muted); } .site-search, .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); color: var(--muted); border-radius: var(--radius-s); transition: color var(--transition-fast), background var(--transition-fast); } .site-search:hover, .theme-toggle:hover { color: var(--ink); background: var(--surface); } .site-members-link { display: inline-flex; align-items: center; height: var(--touch-target); padding: 0 var(--s-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; color: var(--muted); } .site-members-link:hover { color: var(--ink); } .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle-sun { display: block; } [data-theme="dark"] .theme-toggle-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-toggle-sun { display: block; } html:not([data-theme]) .theme-toggle-moon { display: none; } } /* Logo center variant */ .site-header[data-nav-layout="center"] .site-header-inner { flex-wrap: wrap; justify-content: center; } .site-header[data-nav-layout="center"] .site-brand { order: -1; width: 100%; text-align: center; } /* ------------------------------------------------------------------------- 7. HOME (Direction B terminal hero + magazine spread elements) ----------------------------------------------------------------------- */ /* Terminal-style hero — asymmetric grid: hero (1.6fr) + status sidebar (1fr). Toggle data-hero-card="true" wraps the hero text in a teal accent card. */ .site-hero { padding: var(--s-7) 0 var(--s-8); } .site-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-7); align-items: start; } .site-hero-main { max-width: 760px; } /* Card variant — wraps hero in a teal-gradient block (Preview D style) */ .site-hero[data-hero-card="true"] .site-hero-main { max-width: none; background: linear-gradient(135deg, color-mix(in oklab, #0a0b0d 80%, var(--accent)) 0%, var(--accent) 100%); color: var(--accent-text); padding: var(--s-7); border-radius: var(--radius-m); position: relative; overflow: hidden; } .site-hero[data-hero-card="true"] .site-hero-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--overlay-light-soft), transparent 50%); pointer-events: none; } .site-hero[data-hero-card="true"] .site-hero-main > * { position: relative; } .site-hero[data-hero-card="true"] .site-hero-prompt { color: rgba(255, 255, 255, 0.75); } .site-hero[data-hero-card="true"] .site-hero-title { color: var(--accent-text); } .site-hero[data-hero-card="true"] .site-hero-bio { color: rgba(255, 255, 255, 0.92); } /* Status sidebar — admin-editable Now/Based/Writing/Reading rows */ .site-hero-status { padding-top: var(--s-2); font-family: var(--font-mono); } /* Match the section-band-label font (mono, --fs-s, --ink, lowercase) so "$ status" in the sidebar reads at the same weight/size as "$ selected projects" / "$ recent writing" elsewhere on the page. */ .status-heading { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ink); line-height: 1.3; letter-spacing: 0; text-transform: lowercase; font-weight: 500; margin: 0 0 var(--s-4); } .status-heading::before { content: '$ '; color: var(--accent); margin-right: 4px; } .status-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); } .status-row { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-2); font-size: var(--fs-s); line-height: 1.45; align-items: baseline; } .status-row dt { margin: 0; font-weight: 600; color: var(--ink); } .status-row dd { margin: 0; color: var(--muted); position: relative; } .status-row dd::before { content: '· '; color: var(--muted); opacity: 0.5; margin-right: 2px; } .site-hero-prompt, .page-breadcrumb { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--accent); margin: 0 0 var(--s-4); letter-spacing: 0; line-height: 1.4; } .page-breadcrumb { display: block; margin-top: var(--s-4); font-size: var(--fs-xs); } .site-hero-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 500; font-weight: 500; font-size: var(--fs-5xl); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 var(--s-4); color: var(--ink); } .site-hero-bio { font-family: var(--font-sans); font-size: var(--fs-l); color: var(--muted); line-height: 1.5; margin: 0; max-width: 540px; } /* Terminal post-list — flat date-col + body rows for the home recent-writing */ .terminal-list { list-style: none; padding: 0; margin: 0; } .terminal-list-row { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); align-items: baseline; margin: 0; } .terminal-list-row:last-child { border-bottom: none; } .terminal-list-date { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); letter-spacing: 0; } .terminal-list-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 60, 'wght' 500; font-weight: 500; font-size: var(--fs-xl); line-height: 1.2; margin: 0 0 var(--s-1); letter-spacing: -0.005em; } .terminal-list-title a { text-decoration: none; color: var(--ink); } .terminal-list-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); } .terminal-list-excerpt { font-family: var(--font-sans); font-size: var(--fs-m); color: var(--muted); line-height: 1.5; margin: 0; } /* Legacy magazine hero kept for backward compat (other templates may still reference it) */ .home-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-6); margin-bottom: var(--s-8); } /* Empty state — zero posts */ .home-empty { padding: var(--s-9) 0; text-align: center; border-top: 2px solid var(--line-bold); border-bottom: 1px solid var(--line); margin-bottom: var(--s-8); } .home-empty-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-4); } .home-empty-deck { font-family: var(--font-sans); font-size: var(--fs-xl); color: var(--muted); margin: 0 0 var(--s-6); line-height: 1.4; } .home-empty-cta { font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); letter-spacing: 0.04em; margin: 0; } .featured-post { background: linear-gradient(135deg, color-mix(in oklab, #0a0b0d 80%, var(--accent)) 0%, var(--accent) 100%); color: var(--accent-text); min-height: var(--featured-min-h); padding: var(--s-7) var(--s-6); border-radius: var(--radius-m); display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; position: relative; overflow: hidden; transition: transform var(--transition-fast); } .featured-post:hover { transform: translateY(-2px); } .featured-post::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--overlay-light-soft), transparent 50%); pointer-events: none; } .featured-post > * { position: relative; } .featured-post-meta .tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .featured-post-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; margin: var(--s-4) 0 var(--s-3); max-width: 560px; color: var(--accent-text); } .featured-post-excerpt { font-family: var(--font-sans); font-size: var(--fs-l); line-height: 1.4; margin: 0; max-width: 520px; /* No opacity reduction — full --accent-text contrast for WCAG AA. */ } .featured-post-cta { font-family: var(--font-mono); font-size: var(--fs-s); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--s-5); display: inline-block; } .home-sidebar { display: flex; flex-direction: column; } .sidebar-block { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--line); } .sidebar-block:last-child { border-bottom: none; } .sidebar-block-heading { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-3); font-weight: 500; } .sidebar-block-sub { font-family: var(--font-sans); font-size: var(--fs-s); color: var(--muted); margin: 0 0 var(--s-3); line-height: 1.4; } .sidebar-list { list-style: none; padding: 0; margin: 0; } .sidebar-list li { padding: var(--s-2) 0; margin-bottom: 0; } .sidebar-list-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 60; font-weight: 500; font-size: var(--fs-l); line-height: 1.25; margin: 0 0 var(--s-1); } .sidebar-list-title a { text-decoration: none; } .sidebar-list-title a:hover { text-decoration: underline; } .sidebar-list .meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); } .sidebar-more { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; margin-top: var(--s-3); } .sidebar-now { font-family: var(--font-serif); font-size: var(--fs-l); line-height: 1.45; margin: 0; } /* ------------------------------------------------------------------------- 8. SECTION BAND ----------------------------------------------------------------------- */ .section-band { border-top: 1px solid var(--line); margin: var(--s-8) 0 var(--s-5); padding-top: var(--s-4); display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-s); letter-spacing: 0; text-transform: lowercase; } .section-band-label { font-weight: 500; color: var(--ink); margin: 0; font-size: inherit; line-height: 1.3; letter-spacing: 0; text-transform: lowercase; font-family: var(--font-mono); } .section-band-label .band-prompt { color: var(--accent); margin-right: 4px; } .section-band-more { color: var(--accent); text-decoration: none; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; } .section-band-more:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- 9. PROJECT CARDS / GRID ----------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-2); } .project-grid-home { grid-template-columns: repeat(3, 1fr); } .project-grid-collection { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .project-card { background: var(--accent); color: var(--accent-text); padding: var(--s-4) var(--s-4); border-radius: var(--radius-s); text-decoration: none; min-height: 140px; display: flex; flex-direction: column; gap: var(--s-2); transition: transform var(--transition-fast); } .project-card:hover { transform: translateY(-2px); } .project-card-meta { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: 0.8; letter-spacing: 0; text-transform: lowercase; display: flex; justify-content: space-between; align-items: baseline; margin: 0; } .project-card-kind::before { content: ''; } .project-card-title { font-family: var(--font-serif); font-style: italic; font-variation-settings: 'opsz' 60, 'wght' 500, 'SOFT' 80; font-weight: 500; font-size: var(--fs-l); margin: var(--s-1) 0 0; line-height: 1.15; color: var(--accent-text); letter-spacing: -0.005em; } .project-card-excerpt { font-family: var(--font-sans); font-size: var(--fs-xs); margin: 0; opacity: 0.88; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .project-card-cta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0; text-transform: lowercase; margin-top: auto; padding-top: var(--s-3); opacity: 0.9; } /* ------------------------------------------------------------------------- 10. POST CARDS / FEED ----------------------------------------------------------------------- */ .collection-header { margin: var(--s-7) 0 var(--s-7); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); } .collection-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-3); } .collection-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0; } .collection-subtitle { font-family: var(--font-sans); font-size: var(--fs-l); color: var(--muted); margin: var(--s-3) 0 0; } .collection-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-3); letter-spacing: 0.04em; text-transform: uppercase; } .collection-empty { margin: var(--s-8) 0; padding: var(--s-7) 0; text-align: center; font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .post-feed { display: grid; gap: var(--s-7); } .post-card { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line); } .post-card:last-child { border-bottom: none; } .post-card.has-image { grid-template-columns: 200px 1fr; gap: var(--s-5); align-items: start; } .post-card-image { display: block; } .post-card-image img { border-radius: var(--radius-s); aspect-ratio: var(--card-image-ratio); object-fit: cover; } .post-card-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .post-card-meta .dot { opacity: 0.5; } .post-card-tag { color: var(--accent); text-decoration: none; } .post-card-tag:hover { text-decoration: underline; } .post-card-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'wght' 600; font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -0.015em; margin: 0; } .post-card-title a { text-decoration: none; } .post-card-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; } .post-card-excerpt { font-family: var(--font-sans); font-size: var(--fs-m); color: var(--muted); line-height: 1.5; margin: 0; } /* ------------------------------------------------------------------------- 11. POST DETAIL ----------------------------------------------------------------------- */ .post-header { margin: var(--s-7) 0 var(--s-7); } .post-header-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; margin-bottom: var(--s-4); } .post-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-4); } .post-deck { font-family: var(--font-sans); font-size: var(--fs-xl); color: var(--muted); line-height: 1.4; margin: 0 0 var(--s-5); } .post-byline { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .post-byline .dot { opacity: 0.5; } .post-byline-author { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--ink); font-weight: 500; } .post-byline-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .post-byline-tag { color: var(--accent); text-decoration: none; } /* Feature image — magazine-cover treatment. Default = full-bleed edge-to-edge. Always shows the FULL image (no crop) at natural aspect ratio. Caption aligns left at content width so it reads as part of the body, not a centered standalone. */ .post-feature-image { margin: var(--s-6) calc(50% - 50vw) var(--s-7); border-bottom: 1px solid var(--line); } .post-feature-image img { display: block; width: 100%; height: auto; border-radius: 0; } .post-feature-image figcaption { max-width: calc(var(--content-w) + (var(--gutter) * 2)); margin: var(--s-3) auto 0; padding: 0 var(--gutter) var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-align: left; letter-spacing: 0.02em; } /* The Wide / Inline / Full-width custom theme settings now all collapse to the same full-bleed treatment — the magazine aesthetic doesn't have a meaningful "narrow inline hero" mode. Variants kept as no-ops so admin's choice remains a non-breaking write. */ .post-feature-image-full, .post-feature-image-wide, .post-feature-image-inline { /* unified full-bleed (see above) */ } .post-body { font-family: var(--kavitha-body-font); font-size: var(--fs-l); line-height: 1.65; margin-top: var(--s-7); } .post-body > :first-child { margin-top: 0; } .post-body > :last-child { margin-bottom: 0; } .post-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); } .post-tags { display: flex; gap: var(--s-2); margin: var(--s-7) 0; flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--line); } .post-tag-chip { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); text-decoration: none; padding: var(--s-1) var(--s-3); background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); border-radius: var(--radius-s); letter-spacing: 0.04em; text-transform: uppercase; } .post-tag-chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .post-prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin: var(--s-8) 0 var(--s-8); padding: var(--s-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .post-prev-next:not(:has(a)) { display: none; } .post-prev, .post-next { text-decoration: none; display: flex; flex-direction: column; gap: var(--s-1); } .post-next { text-align: right; } .post-prev .label, .post-next .label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .post-prev .title, .post-next .title { font-family: var(--font-serif); font-size: var(--fs-l); color: var(--ink); line-height: 1.25; } .post-comments { margin: var(--s-8) 0; } .post-comments-title { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-5); font-weight: 500; } /* ------------------------------------------------------------------------- 12. PROJECT POST DETAIL ----------------------------------------------------------------------- */ .project-post-header { margin: var(--s-7) 0 var(--s-7); } .project-post-back { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-decoration: none; margin-bottom: var(--s-5); letter-spacing: 0.04em; text-transform: uppercase; } .project-post-back:hover { color: var(--accent); } .project-post-header-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-7); align-items: start; } .project-post-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); } .project-post-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-3); } .project-post-deck { font-family: var(--font-sans); font-size: var(--fs-xl); color: var(--muted); line-height: 1.4; margin: 0; } .project-post-meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); padding: var(--s-4); background: var(--surface); border-radius: var(--radius-s); } .project-post-meta dt { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .project-post-meta dd { margin: 0; font-family: var(--font-sans); font-size: var(--fs-s); color: var(--ink); } .project-post-feature { margin: var(--s-6) 0 var(--s-7); border-bottom: 1px solid var(--line); } .project-post-feature img { display: block; width: 100%; height: auto; border-radius: 0; } .project-post-feature figcaption { max-width: calc(var(--content-w) + (var(--gutter) * 2)); margin: var(--s-3) auto 0; padding: 0 var(--gutter) var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-align: left; letter-spacing: 0.02em; } /* ------------------------------------------------------------------------- 13. PAGE TEMPLATES ----------------------------------------------------------------------- */ .page-header { margin: var(--s-7) 0; } .page-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-4); } .page-deck { font-family: var(--font-sans); font-size: var(--fs-l); color: var(--muted); margin: 0; } .page-feature { margin: var(--s-6) calc(50% - 50vw) var(--s-7); border-bottom: 1px solid var(--line); } .page-feature img { display: block; width: 100%; height: auto; border-radius: 0; } .page-feature figcaption { max-width: calc(var(--content-w) + (var(--gutter) * 2)); margin: var(--s-3) auto 0; padding: 0 var(--gutter) var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-align: left; letter-spacing: 0.02em; } .page-about-header { margin: var(--s-7) 0; padding-bottom: var(--s-5); border-bottom: 2px solid var(--line-bold); } .page-about-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--s-3); } .page-about-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-3); } .page-about-deck { font-family: var(--font-sans); font-size: var(--fs-xl); color: var(--muted); line-height: 1.4; margin: 0; } .page-about-portrait { margin: var(--s-7) 0 var(--s-5); max-width: 280px; } .page-about-portrait img { border-radius: var(--radius-m); } .page-body { font-size: var(--fs-l); line-height: 1.65; } /* ------------------------------------------------------------------------- 14. AUTHOR PAGE ----------------------------------------------------------------------- */ .author-header { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-5); align-items: start; } .author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; } .author-meta { display: flex; flex-direction: column; gap: var(--s-2); } .author-links { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); } .author-links a { color: var(--accent); text-decoration: none; } /* ------------------------------------------------------------------------- 15. MEMBERS CTA ----------------------------------------------------------------------- */ .members-cta { background: var(--accent); color: var(--accent-text); padding: var(--s-6) var(--s-6); border-radius: var(--radius-m); margin: var(--s-7) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; } .members-cta-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 60, 'wght' 600; font-size: var(--fs-xl); color: var(--accent-text); margin: 0 0 var(--s-1); } .members-cta-text { font-family: var(--font-sans); font-size: var(--fs-s); margin: 0; opacity: 0.85; max-width: 480px; } .members-cta-button { display: inline-block; background: var(--bg); color: var(--ink); padding: var(--s-3) var(--s-5); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--fs-xs); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; transition: transform var(--transition-fast); } .members-cta-button:hover { transform: translateY(-1px); } /* ------------------------------------------------------------------------- 16. PAGINATION ----------------------------------------------------------------------- */ .pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--s-7) 0; margin-top: var(--s-7); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; } .pagination a { color: var(--accent); text-decoration: none; } .pagination a:hover { text-decoration: underline; } .pagination-current { color: var(--muted); } .pagination .disabled { color: color-mix(in oklab, var(--muted) 40%, var(--bg)); } /* ------------------------------------------------------------------------- 17. SITE FOOTER ----------------------------------------------------------------------- */ .site-footer { margin-top: var(--s-9); padding: var(--s-5) 0; border-top: 1px solid var(--line); } .site-footer-inner { max-width: var(--wide-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; } .site-footer-left { display: flex; gap: var(--s-2); align-items: center; } .site-footer-links { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; } .site-footer-links a { color: var(--muted); text-decoration: none; } .site-footer-links a:hover { color: var(--accent); } .site-footer-tag { color: var(--muted); } .site-footer-secondary { max-width: var(--wide-w); margin: 0 auto; padding: var(--s-3) var(--gutter) var(--s-4); border-bottom: 1px solid var(--line); } .site-footer-secondary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-s); color: var(--muted); letter-spacing: 0; } .site-footer-secondary-list a { color: var(--muted); text-decoration: none; } .site-footer-secondary-list a:hover { color: var(--accent); } /* Accent color toggle (two preset swatches — lives in the footer row) */ .accent-toggle { display: inline-flex; align-items: center; gap: 6px; } .site-footer-divider { color: var(--muted); opacity: 0.5; } .accent-swatch { appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); padding: 0; cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .accent-swatch:hover { transform: scale(1.15); } .accent-swatch.accent-teal { background: #1e6b6b; } .accent-swatch.accent-terracotta { background: #c15f3c; } .accent-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); border-color: transparent; } /* ------------------------------------------------------------------------- 18. ERROR PAGE ----------------------------------------------------------------------- */ .error-page { padding: var(--s-9) 0; text-align: center; } .error-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-l); color: var(--accent); letter-spacing: 0.04em; margin-bottom: var(--s-4); } .error-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 600; font-size: var(--fs-4xl); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 var(--s-4); } .error-body { font-family: var(--font-sans); font-size: var(--fs-l); color: var(--muted); margin-bottom: var(--s-7); } .error-nav { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; } .error-link { display: inline-block; padding: var(--s-3) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-xs); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .error-link:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); } /* ------------------------------------------------------------------------- 19. LEXICAL CARDS — every Ghost editor card variant covered ----------------------------------------------------------------------- */ /* Generic card width modifiers */ .kg-width-wide { max-width: var(--wide-w); margin-left: calc(-1 * (var(--wide-w) - var(--content-w)) / 2); margin-right: calc(-1 * (var(--wide-w) - var(--content-w)) / 2); } .kg-width-full { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; } .kg-card { margin: var(--s-7) 0; } /* Image card — clean inline default, no border-radius, mono left caption */ .kg-image-card img { display: block; width: 100%; height: auto; border-radius: 0; } .kg-image-card.kg-width-full img { border-radius: 0; } .kg-image-card figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); text-align: left; margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--line); letter-spacing: 0.02em; } .kg-image-card.kg-width-full figcaption { max-width: calc(var(--content-w) + (var(--gutter) * 2)); margin: var(--s-2) auto 0; padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--s-3)); } /* Gallery */ .kg-gallery-card .kg-gallery-row { display: flex; gap: var(--s-3); margin-bottom: var(--s-3); } .kg-gallery-card .kg-gallery-image img { border-radius: var(--radius-s); } /* Bookmark */ .kg-bookmark-card a { display: flex; border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); overflow: hidden; background: var(--surface); transition: border-color var(--transition-fast); } .kg-bookmark-card a:hover { border-color: var(--accent); } .kg-bookmark-content { padding: var(--s-5); flex: 1; min-width: 0; } .kg-bookmark-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-l); margin: 0 0 var(--s-2); } .kg-bookmark-description { font-family: var(--font-sans); font-size: var(--fs-s); color: var(--muted); margin: 0 0 var(--s-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kg-bookmark-metadata { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s-3); align-items: center; } .kg-bookmark-icon { width: 16px; height: 16px; } .kg-bookmark-thumbnail { width: 200px; flex-shrink: 0; } .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* Callout */ .kg-callout-card { padding: var(--s-5); border-radius: var(--radius-m); background: var(--accent-soft); border-left: 3px solid var(--accent); display: flex; gap: var(--s-3); } .kg-callout-emoji { font-size: var(--fs-l); line-height: 1.4; flex-shrink: 0; } .kg-callout-text { font-family: var(--font-sans); font-size: var(--fs-m); margin: 0; } /* Callout color variants. Base background is muted-tinted with the variant color; left-rail is the variant color full strength. Works in both light and dark mode because we use color-mix() against --surface (which itself theme-swaps). */ .kg-callout-card-grey { background: var(--surface); border-left-color: var(--muted); } .kg-callout-card-white { background: var(--bg); border-left-color: var(--line-bold); } .kg-callout-card-blue { background: color-mix(in oklab, #3b82f6 12%, var(--surface)); border-left-color: #3b82f6; } .kg-callout-card-green { background: color-mix(in oklab, #16a34a 12%, var(--surface)); border-left-color: #16a34a; } .kg-callout-card-yellow { background: color-mix(in oklab, #d97706 12%, var(--surface)); border-left-color: #d97706; } .kg-callout-card-red { background: color-mix(in oklab, #dc2626 12%, var(--surface)); border-left-color: #dc2626; } .kg-callout-card-pink { background: color-mix(in oklab, #db2777 12%, var(--surface)); border-left-color: #db2777; } .kg-callout-card-purple { background: color-mix(in oklab, #9333ea 12%, var(--surface)); border-left-color: #9333ea; } .kg-callout-card-accent { background: var(--accent-soft); border-left-color: var(--accent); } /* Toggle */ .kg-toggle-card { border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-4) var(--s-5); } .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .kg-toggle-heading-text { font-family: var(--font-serif); font-weight: 500; margin: 0; font-size: var(--fs-l); } .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content { display: block; padding-top: var(--s-3); } .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; } /* Button */ .kg-button-card { text-align: center; } .kg-btn { display: inline-block; padding: var(--s-3) var(--s-6); background: var(--accent); color: var(--accent-text); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--fs-xs); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; } .kg-button-card-alignment-left { text-align: left; } .kg-button-card-alignment-right { text-align: right; } /* Header card */ .kg-header-card { padding: var(--s-7) var(--s-6); background: var(--surface); border-radius: var(--radius-m); text-align: center; } .kg-header-card.kg-style-dark { background: var(--ink); color: var(--bg); } .kg-header-card.kg-style-accent { background: var(--accent); color: var(--accent-text); } .kg-header-card-title { font-family: var(--font-serif); font-size: var(--fs-3xl); margin: 0 0 var(--s-3); } .kg-header-card-subtitle { font-family: var(--font-sans); font-size: var(--fs-l); opacity: 0.85; } /* Product card — image, title, rating, description, button */ .kg-product-card { border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-5); background: var(--surface); display: grid; gap: var(--s-3); } .kg-product-card-image img { border-radius: var(--radius-s); width: 100%; } .kg-product-card-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-xl); margin: 0; } .kg-product-card-rating { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: 0.04em; } .kg-product-card-description { font-family: var(--font-sans); font-size: var(--fs-m); color: var(--ink); margin: 0; line-height: 1.5; } .kg-product-card-button { display: inline-block; align-self: start; padding: var(--s-3) var(--s-5); background: var(--accent); color: var(--accent-text); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--fs-xs); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; } /* NFT card — image + collection name + chain badge + price */ .kg-nft-card { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--surface); text-decoration: none; color: var(--ink); display: block; transition: border-color var(--transition-fast); } .kg-nft-card:hover { border-color: var(--accent); } .kg-nft-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .kg-nft-metadata { padding: var(--s-4) var(--s-5); } .kg-nft-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-l); margin: 0 0 var(--s-2); } .kg-nft-creator, .kg-nft-collection-name { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.04em; } /* File card */ .kg-file-card { display: flex; border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--s-4); text-decoration: none; color: var(--ink); background: var(--surface); transition: border-color var(--transition-fast); } .kg-file-card:hover { border-color: var(--accent); } /* Audio + video */ .kg-audio-card audio, .kg-video-card video { width: 100%; border-radius: var(--radius-m); } /* Embed */ .kg-embed-card { display: flex; flex-direction: column; align-items: center; } .kg-embed-card iframe { max-width: 100%; border-radius: var(--radius-m); border: none; } /* Blockquote alt */ .kg-blockquote-alt { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-2xl); line-height: 1.35; text-align: center; border: none; padding: 0; margin: var(--s-7) 0; } /* ------------------------------------------------------------------------- 20. RESPONSIVE ----------------------------------------------------------------------- */ /* Tablet landscape — 900px+ uses full magazine layout, 768-900 needs 2-up project grid */ @media (max-width: 900px) { .site-hero-grid { grid-template-columns: 1fr; gap: var(--s-6); } .home-hero { grid-template-columns: 1fr; } .featured-post { min-height: 280px; padding: var(--s-6) var(--s-5); } .featured-post-title { font-size: var(--fs-3xl); } .project-grid { grid-template-columns: 1fr 1fr; } .project-post-header-grid { grid-template-columns: 1fr; gap: var(--s-5); } .post-card.has-image { grid-template-columns: 1fr; } .post-card.has-image .post-card-image { order: -1; } .post-card.has-image .post-card-image img { aspect-ratio: 21 / 9; } } /* Tablet portrait / small landscape — 2-up project grid stays comfortable, post-card image shrinks */ @media (max-width: 768px) { .featured-post-title { font-size: var(--fs-2xl); } .post-title, .project-post-title { font-size: var(--fs-3xl); } .post-body { font-size: var(--fs-m); } .members-cta { padding: var(--s-5); } .members-cta-title { font-size: var(--fs-l); } } @media (max-width: 640px) { :root { --gutter: 16px; } .site-header-inner { flex-wrap: wrap; gap: var(--s-3); } .site-nav { width: 100%; justify-content: space-between; gap: var(--s-3); } .site-nav-list { gap: var(--s-3); flex-wrap: wrap; } .post-title, .featured-post-title, .project-post-title { font-size: var(--fs-3xl); } .site-hero-title { font-size: var(--fs-4xl); } .site-hero { padding: var(--s-5) 0 var(--s-6); } .terminal-list-row { grid-template-columns: 1fr; gap: var(--s-1); } .collection-title { font-size: var(--fs-2xl); } .project-grid { grid-template-columns: 1fr; } .post-prev-next { grid-template-columns: 1fr; gap: var(--s-4); } .post-next { text-align: left; } .members-cta { grid-template-columns: 1fr; gap: var(--s-3); } .members-cta-button { justify-self: start; } .author-header { grid-template-columns: 1fr; } .pagination { flex-wrap: wrap; gap: var(--s-3); justify-content: flex-start; } .post-feature-image-wide, .post-feature-image-full { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); } .site-footer-inner { flex-direction: column; align-items: flex-start; } } /* ------------------------------------------------------------------------- 21. PRINT ----------------------------------------------------------------------- */ @media print { /* Force light tokens — print is always paper. Centralizes the override instead of leaking raw #fff/#000 throughout the print block. */ :root { --bg: #ffffff; --ink: #000000; --muted: #444444; --line: #cccccc; --line-bold: #000000; --surface: #f5f5f5; --accent-text: #000000; } .site-header, .site-footer, .post-prev-next, .members-cta, .post-comments, .pagination, .theme-toggle, .site-search, .site-members-link, .scroll-progress, .skip-link, .share-buttons, .code-copy, .mermaid-toolbar, .reading-rail { display: none !important; } .post-body pre[data-lang]::before { display: none; } .post-body pre { background: #f4f4f4; color: #111; border: 1px solid #ddd; } .mermaid-diagram { border-color: #ddd; page-break-inside: avoid; } .mermaid-stage { transform: none !important; } body { background: var(--bg); color: var(--ink); } .post-body { font-size: 11pt; line-height: 1.5; } a { color: var(--ink); text-decoration: underline; } } /* ------------------------------------------------------------------------- 22. SKIP LINK + SCROLL PROGRESS + COMPONENTS ADDED IN v0.1.2 ----------------------------------------------------------------------- */ /* Skip-to-content link — visible only on keyboard focus */ .skip-link { position: absolute; top: 0; left: 0; transform: translateY(-110%); z-index: 1000; padding: var(--s-3) var(--s-5); background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: transform 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; } /* Scroll progress bar — only visible on post templates. CSS scroll-timeline where supported; source.js JS fallback elsewhere. */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; pointer-events: none; background: transparent; display: none; } .post-template .scroll-progress, .page-template-post-project .scroll-progress { display: block; } .scroll-progress-bar { width: 0%; height: 100%; background: var(--accent); transition: width 0.05s linear; } @supports (animation-timeline: scroll()) { .post-template .scroll-progress-bar, .page-template-post-project .scroll-progress-bar { width: 100%; transform-origin: 0 50%; animation: scroll-grow linear forwards; animation-timeline: scroll(root); transition: none; } @keyframes scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* Related posts */ .related-posts { margin: var(--s-8) 0; padding-top: var(--s-5); border-top: 1px solid var(--line); } .related-posts-heading { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-4); font-weight: 500; } .related-posts-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); } .related-posts-list li { margin: 0; } .related-posts-list a { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) 0; text-decoration: none; border-bottom: 1px solid var(--line); } .related-posts-list a:last-child { border-bottom: none; } .related-posts-title { font-family: var(--font-serif); font-variation-settings: 'opsz' 60, 'wght' 500; font-size: var(--fs-l); color: var(--ink); line-height: 1.25; } .related-posts-list a:hover .related-posts-title { text-decoration: underline; text-decoration-color: var(--accent); } .related-posts-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.02em; } /* Share buttons */ .share-buttons { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-7) 0; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .share-buttons-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-right: var(--s-2); } .share-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: var(--touch-target); height: var(--touch-target); padding: 0 var(--s-3); border-radius: var(--radius-s); background: var(--surface); color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; transition: color var(--transition-fast), background var(--transition-fast); border: 1px solid transparent; cursor: pointer; } .share-button:hover { color: var(--accent); border-color: var(--accent); } .share-button svg { flex-shrink: 0; } .share-button-status { font-family: var(--font-mono); font-size: var(--fs-xs); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 20. CODE BLOCKS — themed surface (dark in dark-mode, light parchment in light-mode), Prism tokens, copy button, lang label. Surface and token palette are driven by --code-bg / --code-fg / token custom props so a single rule re-skins both modes. ----------------------------------------------------------------------- */ :root { --code-bg: #f6f4ee; --code-fg: #24292f; --code-muted: #6e7781; --code-line: rgba(0, 0, 0, 0.06); --code-button-bg: rgba(0, 0, 0, 0.04); --code-button-fg: #57606a; --code-button-bd: rgba(0, 0, 0, 0.12); --tok-comment: #6a737d; --tok-punc: #24292f; --tok-keyword: #d73a49; --tok-string: #22863a; --tok-number: #b8860b; --tok-function: #6f42c1; --tok-variable: #e36209; } [data-theme="dark"], html:not([data-theme]) { /* Dark mode (default + explicit) — keep the GitHub-dark palette */ } [data-theme="dark"] { --code-bg: #0d1014; --code-fg: #e6e6e6; --code-muted: #6c7480; --code-line: rgba(255, 255, 255, 0.08); --code-button-bg: rgba(255, 255, 255, 0.06); --code-button-fg: #c9d1d9; --code-button-bd: rgba(255, 255, 255, 0.12); --tok-comment: #6c7480; --tok-punc: #c9d1d9; --tok-keyword: #ff7b72; --tok-string: #7ee787; --tok-number: #ffa657; --tok-function: #d2a8ff; --tok-variable: #ffa657; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --code-bg: #0d1014; --code-fg: #e6e6e6; --code-muted: #6c7480; --code-line: rgba(255, 255, 255, 0.08); --code-button-bg: rgba(255, 255, 255, 0.06); --code-button-fg: #c9d1d9; --code-button-bd: rgba(255, 255, 255, 0.12); --tok-comment: #6c7480; --tok-punc: #c9d1d9; --tok-keyword: #ff7b72; --tok-string: #7ee787; --tok-number: #ffa657; --tok-function: #d2a8ff; --tok-variable: #ffa657; } } .post-body pre { position: relative; margin: var(--s-7) 0; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-line); border-radius: var(--radius-m); font-family: var(--font-mono); font-size: var(--fs-s); line-height: 1.55; overflow-x: auto; -webkit-overflow-scrolling: touch; } .post-body pre code { background: transparent; padding: 0; color: inherit; font-family: inherit; font-size: inherit; border: 0; } /* Inline code keeps the prose-friendly chip look */ .post-body :not(pre) > code { background: var(--surface); color: var(--ink); padding: 1px 6px; border-radius: var(--radius-s); font-family: var(--font-mono); font-size: 0.92em; border: 1px solid var(--line); } /* Language label — top-left chip pulled from data-lang attribute set by source.js */ .post-body pre[data-lang]::before { content: attr(data-lang); position: absolute; top: var(--s-3); left: var(--s-4); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--code-muted); pointer-events: none; } /* Copy button — always visible (theme-adaptive surface) */ .code-copy { position: absolute; top: var(--s-3); right: var(--s-3); padding: 4px 10px; background: var(--code-button-bg); color: var(--code-button-fg); border: 1px solid var(--code-button-bd); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .code-copy:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Prism tokens — driven by --tok-* custom props so light/dark both work */ .post-body .token.comment, .post-body .token.prolog, .post-body .token.doctype, .post-body .token.cdata { color: var(--tok-comment); font-style: italic; } .post-body .token.punctuation { color: var(--tok-punc); } .post-body .token.property, .post-body .token.tag, .post-body .token.boolean, .post-body .token.number, .post-body .token.constant, .post-body .token.symbol, .post-body .token.deleted { color: var(--tok-keyword); } .post-body .token.selector, .post-body .token.attr-name, .post-body .token.string, .post-body .token.char, .post-body .token.builtin, .post-body .token.inserted { color: var(--tok-string); } .post-body .token.operator, .post-body .token.entity, .post-body .token.url, .post-body .language-css .token.string, .post-body .style .token.string { color: var(--tok-function); } .post-body .token.atrule, .post-body .token.attr-value, .post-body .token.keyword { color: var(--tok-keyword); } .post-body .token.function, .post-body .token.class-name { color: var(--tok-function); } .post-body .token.regex, .post-body .token.important, .post-body .token.variable { color: var(--tok-variable); } .post-body .token.important, .post-body .token.bold { font-weight: bold; } .post-body .token.italic { font-style: italic; } /* ------------------------------------------------------------------------- 21. MERMAID DIAGRAMS — lazy-rendered SVGs (see source.js). Diagram bg matches the prose surface, not the code block, so it reads as a figure rather than another code chunk. ----------------------------------------------------------------------- */ .mermaid-diagram { position: relative; margin: var(--s-7) 0; padding: var(--s-6) var(--s-5) var(--s-5); background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; min-height: 200px; } .mermaid-diagram::before { content: 'diagram'; position: absolute; top: var(--s-3); left: var(--s-4); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); pointer-events: none; } .mermaid-stage svg .edgeLabel, .mermaid-stage svg .edgeLabel rect, .mermaid-stage svg .edgeLabel foreignObject div { background: transparent !important; color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; } .mermaid-stage svg .nodeLabel, .mermaid-stage svg .nodeLabel p { font-family: var(--font-mono) !important; } .mermaid-stage svg .node rect, .mermaid-stage svg .node polygon, .mermaid-stage svg .node circle, .mermaid-stage svg .node ellipse, .mermaid-stage svg .node path { stroke-width: 1.2px !important; } .mermaid-stage svg .flowchart-link { stroke-width: 1.2px !important; } .mermaid-stage svg .marker { fill: var(--muted) !important; stroke: var(--muted) !important; } .mermaid-stage { cursor: grab; transform-origin: 0 0; transition: none; text-align: center; user-select: none; touch-action: none; } .mermaid-stage svg { max-width: 100%; height: auto; display: inline-block; pointer-events: none; } .mermaid-toolbar { position: absolute; top: var(--s-3); right: var(--s-3); display: inline-flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 2px; z-index: 2; opacity: 0; transition: opacity var(--transition-fast); } .mermaid-diagram:hover .mermaid-toolbar, .mermaid-toolbar:focus-within { opacity: 1; } .mermaid-toolbar button { appearance: none; background: transparent; border: 0; color: var(--muted); font-family: var(--font-mono); font-size: 14px; line-height: 1; width: 26px; height: 26px; border-radius: var(--radius-s); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .mermaid-toolbar button:hover { background: var(--surface); color: var(--accent); } .mermaid-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mermaid-diagram:fullscreen { background: var(--bg); padding: var(--s-7); border-radius: 0; } .mermaid-diagram:fullscreen .mermaid-stage { min-height: 80vh; display: flex; align-items: center; justify-content: center; } .mermaid-error { display: block; margin: var(--s-3) 0 0; padding: var(--s-3); background: #0d1014; color: #e6e6e6; border-radius: var(--radius-s); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: left; white-space: pre-wrap; word-break: break-word; } .mermaid-error-caption { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: #d97706; text-align: left; } /* ------------------------------------------------------------------------- 22. READING RAIL — sticky on-this-page TOC, left of post content. Resting: thin column of dashes (one per heading), active dash highlighted. Hover / focus-within: panel expands with full heading labels. Scroll-tracked via IntersectionObserver in source.js. ----------------------------------------------------------------------- */ .reading-rail { position: fixed; top: 50%; left: max(var(--s-5), calc(50vw - 720px)); transform: translateY(-50%); z-index: 40; max-height: 70vh; display: none; pointer-events: auto; font-family: var(--font-mono); } @media (min-width: 1280px) { .reading-rail { display: block; } } .reading-rail-list { list-style: none; margin: 0; padding: var(--s-3); display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-m); border: 1px solid transparent; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), padding var(--transition-fast); overflow-y: auto; max-height: 70vh; scrollbar-width: thin; } .reading-rail-item { margin: 0; } .reading-rail-link { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-s); line-height: 1.3; transition: color var(--transition-fast), background var(--transition-fast); } .reading-rail-dash { flex-shrink: 0; display: block; width: 14px; height: 1.5px; background: currentColor; opacity: 0.55; border-radius: 1px; transition: width var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast); } .reading-rail-h3 .reading-rail-dash { width: 9px; margin-left: 8px; } .reading-rail-link[aria-current="true"] { color: var(--ink); } .reading-rail-link[aria-current="true"] .reading-rail-dash { width: 22px; background: var(--ink); opacity: 1; } .reading-rail-h3 .reading-rail-link[aria-current="true"] .reading-rail-dash { width: 16px; } .reading-rail-label { font-size: 12px; line-height: 1.35; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: max-width var(--transition-base), opacity var(--transition-fast), padding var(--transition-fast); } /* Expanded state — hover, focus-within, or programmatic .is-open */ .reading-rail:hover .reading-rail-list, .reading-rail:focus-within .reading-rail-list { background: var(--bg); border-color: var(--line); box-shadow: 0 8px 32px color-mix(in oklab, var(--ink) 12%, transparent); padding: var(--s-3) var(--s-4); } .reading-rail:hover .reading-rail-label, .reading-rail:focus-within .reading-rail-label { max-width: 240px; opacity: 1; } .reading-rail-link:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); } .reading-rail-link:hover .reading-rail-dash { opacity: 1; } .reading-rail-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .reading-rail-list, .reading-rail-link, .reading-rail-dash, .reading-rail-label { transition: none; } }