/* fonts / theme / chrome / components / audience-switcher are loaded as direct tags in the page (build-blog.cjs), not @import here — more robust on the deployed worker + mobile than a nested @import chain. */ /* ────────────────────────────────────────────────────────── /blog — the Zenrows blog (static, generated from content/blog). Editorial reading surface: warm-dark, hairline, type-led. Index listing + long-form article template. No fills, border-before-fill. ─────────────────────────────────────────────────────────── */ main { position: relative; z-index: 1; } .back-to-top, .back-to-top * { cursor: none; } .bp-blur[data-reveal] { opacity: 0; filter: blur(16px); transform: translateZ(0); backface-visibility: hidden; will-change: filter, opacity; transition: opacity 0.7s ease, filter 0.7s ease; } .bp-blur[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateZ(0); } /* ═══ Index — hero ═══ */ .bp-hero { padding: clamp(112px, 15vh, 168px) var(--page-gutter, 7vw) clamp(40px, 6vh, 64px); } .bp-hero-h1 { margin: clamp(12px, 1.6vh, 20px) 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(44px, 6.4vw, 100px); line-height: 0.96; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); } .bp-hero-sub { margin: clamp(16px, 2vh, 24px) 0 0; font-family: var(--font-base); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: var(--text-secondary); max-width: 52ch; } .bp-chips { margin: clamp(24px, 3.2vh, 38px) 0 0; display: flex; flex-wrap: wrap; gap: 8px; } /* gap between the tag chips and the search field below them */ .bp-chips + .bp-search { margin-top: clamp(22px, 2.8vh, 32px); } .bp-chip { font-family: var(--font-code); font-size: clamp(11.5px, 0.95vw, 13px); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 14px; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } .bp-chip:hover { color: var(--text-primary); border-color: var(--border); } .bp-hero--tag { padding-bottom: clamp(24px, 4vh, 40px); } .bp-hero--tag .link-cta { display: inline-block; margin-bottom: 20px; } /* ═══ Index / tag — bento grid ═══ */ .bp-grid-act { padding: clamp(36px, 5vh, 60px) var(--page-gutter, 7vw) clamp(100px, 14vh, 170px); } .bp-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.5vw, 22px); grid-auto-rows: minmax(232px, auto); } .bp-card--w6 { grid-column: span 6; } .bp-card--w4 { grid-column: span 4; } .bp-card--w3 { grid-column: span 3; } .bp-card--w2 { grid-column: span 2; } /* the index grid keeps the bento; pagination re-bentos each page (blog.js) */ .bp-bento.is-filtering { grid-auto-flow: dense; } /* search bar */ /* .bp-search moved to _shared/components.css (shared atom) */ /* pagination */ .bp-pager { margin: clamp(30px, 4vh, 48px) 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .bp-pager:empty { display: none; } .bp-page-btn { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle, #3a302a); border-radius: 10px; background: none; cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; color: var(--text-secondary, #b8ada3); transition: border-color .15s, color .15s; } .bp-page-btn:hover:not(:disabled) { color: var(--text-primary, #fff); border-color: #52453b; } .bp-page-btn[aria-current="true"] { color: #fff; background: #7C4FE8; border-color: #7C4FE8; } .bp-page-btn:disabled { opacity: .4; cursor: default; } .bp-page-gap { padding: 0 4px; color: var(--text-tertiary, #8a7f76); } .bp-empty { margin: clamp(40px, 8vh, 80px) 0; text-align: center; color: var(--text-tertiary, #b8ada3); font-size: 17px; font-family: var(--font-base, system-ui, sans-serif); } .bp-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease; } .bp-card:hover { border-color: var(--border); transform: translateY(-4px); } .bp-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: clamp(22px, 2.2vw, 32px); } .bp-card-tags, .bp-head-tags { display: flex; flex-wrap: wrap; gap: 8px; } .bp-card-tag { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #7ADAE6; text-decoration: none; } .bp-card-title { margin: auto 0 0; padding-top: 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.08; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); } .bp-card-excerpt { margin: 12px 0 0; font-family: var(--font-base); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.5; color: var(--text-secondary); } .bp-card-meta { margin: 18px 0 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); } /* author avatar — fetched image, or an initials monogram fallback */ .bp-avatar { flex: none; border-radius: 50%; object-fit: cover; } .bp-avatar--mono { display: inline-grid; place-items: center; line-height: 1; background: color-mix(in srgb, var(--text-primary) 12%, transparent); color: var(--text-secondary); font-family: var(--font-display); font-weight: 500; } .bp-card-meta .bp-avatar { width: 22px; height: 22px; font-size: 10.5px; margin-right: 2px; } .bp-byline-who { display: flex; align-items: center; gap: 12px; } .bp-byline-who .bp-avatar { width: 40px; height: 40px; font-size: 15px; } a.bp-author { text-decoration: none; color: inherit; transition: color 0.15s; } a.bp-author:hover { color: #7ADAE6; } /* author archive page */ .bp-hero--author .bp-author-lede { margin: 12px 0 0; font-family: var(--font-code); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #7ADAE6; } .bp-author-links { margin: 16px 0 0; font-family: var(--font-code); font-size: 13px; } .bp-author-links a { color: var(--text-secondary); text-decoration: none; } .bp-author-links a:hover { color: var(--text-primary); } /* size-aware emphasis: the recent post reads almost editorial; narrow tiles stay tight */ .bp-card--w6 { min-height: clamp(300px, 38vh, 440px); } .bp-card--w6 .bp-card-body { padding: clamp(30px, 3vw, 48px); } .bp-card--w6 .bp-card-title { font-size: clamp(30px, 4vw, 58px); line-height: 1.0; max-width: 18ch; } .bp-card--w6 .bp-card-excerpt { font-size: clamp(15px, 1.3vw, 18px); max-width: 60ch; } .bp-card--w4 .bp-card-title { font-size: clamp(22px, 2.2vw, 30px); } .bp-card--w2 .bp-card-title { font-size: clamp(18px, 1.5vw, 22px); } .bp-card--w2 .bp-card-excerpt { display: none; } /* cover image rides the wide tiles only: full-bleed right, clipped to the radius. The image column is a proportion of the card, so a big tile gets a big image. */ /* cover glyph rides the WIDE tiles only (w4 / w6); narrow tiles stay text-only. Every card carries the cover in the DOM so pagination can re-bento any card; CSS reveals it only on a wide tile. */ .bp-card-img { display: none; position: relative; overflow: hidden; } .bp-card--w4, .bp-card--w6 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 40%); } .bp-card--w6 { grid-template-columns: minmax(0, 1fr) minmax(220px, 48%); } /* only the wide tiles reveal the cover (and centre the glyph). Must override the display:none above AND the .bp-cover-art display, so it is qualified by the tile. */ .bp-card--w4 .bp-card-img, .bp-card--w6 .bp-card-img { display: grid; place-items: center; } @media (max-width: 600px) { .bp-card--w4, .bp-card--w6 { grid-template-columns: 1fr; } .bp-card--w4 .bp-card-img, .bp-card--w6 .bp-card-img { order: -1; height: 150px; } } /* ── topic glyph covers: a drawn-on line-art panel per category, in the nav mega-glyph language. Inline SVG (animates live), no image weight. ── */ .bp-cover-art { --bc: #7ADAE6; background: radial-gradient(120% 120% at 78% 16%, color-mix(in srgb, var(--bc) 9%, transparent), transparent 60%), var(--background, #1D1612); } .bp-cover-art--purple { --bc: #7C4FE8; } .bp-cover-art svg { position: relative; width: 58%; max-width: 150px; aspect-ratio: 1; display: block; } .bp-cover-tag { z-index: 1; position: absolute; left: clamp(16px, 1.4vw, 22px); bottom: clamp(14px, 1.4vw, 20px); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bc); opacity: 0.9; } .bc-stroke, .bc-accent { fill: none; stroke-linecap: round; stroke-linejoin: round; } .bc-stroke { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.4; } .bc-accent { stroke: var(--bc); stroke-width: 2.4; } .bp-cover-art .bc-fill { fill: rgba(255, 255, 255, 0.85); } .bp-cover-art .bc-fill-accent { fill: var(--bc); } .bp-cover-art .bc-stroke, .bp-cover-art .bc-accent { stroke-dasharray: var(--d, 200); } @keyframes bcDraw { from { stroke-dashoffset: var(--d, 200); opacity: 0.15; } to { stroke-dashoffset: 0; opacity: 1; } } .bp-cover-art.is-drawn .bc-stroke, .bp-cover-art.is-drawn .bc-accent { animation: bcDraw 760ms cubic-bezier(0.65, 0, 0.35, 1) both; } .bp-cover-art.is-drawn .bc-accent { animation-delay: 200ms; } @keyframes bcPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } .bp-cover-art.is-drawn .bc-pulse { transform-box: fill-box; transform-origin: center; animation: bcPulse 1900ms ease-in-out 900ms infinite; } @media (prefers-reduced-motion: reduce) { .bp-cover-art.is-drawn .bc-stroke, .bp-cover-art.is-drawn .bc-accent, .bp-cover-art.is-drawn .bc-pulse { animation: none; } } /* ═══ Article ═══ */ .bp-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: #7C4FE8; z-index: 60; transition: width 0.1s linear; } .bp-article { position: relative; } .bp-head { padding: clamp(108px, 14vh, 156px) var(--page-gutter, 7vw) clamp(36px, 5vh, 56px); } /* head content stays in the article column (stops at the TOC zone), not full-bleed */ .bp-head .bp-title { max-width: 760px; } .bp-head .bp-lede { max-width: 640px; } .bp-head .bp-byline { max-width: 760px; } .bp-head-tags { margin-bottom: 18px; } .bp-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 5.2vw, 76px); line-height: 0.99; letter-spacing: var(--tracking-denser, -0.03em); color: var(--text-primary); } .bp-lede { margin: clamp(20px, 2.6vh, 30px) 0 0; font-family: var(--font-base); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--text-secondary); } .bp-byline { margin: clamp(26px, 3.4vh, 40px) 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: clamp(20px, 2.6vh, 28px); border-top: 1px solid var(--border-subtle); } .bp-author { font-family: var(--font-base); font-weight: 600; font-size: clamp(14px, 1.1vw, 16px); color: var(--text-primary); display: flex; align-items: baseline; gap: 10px; } .bp-author-role { font-weight: 400; font-size: clamp(12px, 0.95vw, 13.5px); color: var(--text-tertiary); } .bp-byline-meta { font-family: var(--font-code); font-size: 12.5px; color: var(--text-tertiary); } .bp-layout { padding: clamp(20px, 4vh, 48px) var(--page-gutter, 7vw) 0; display: grid; grid-template-columns: minmax(0, 820px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); } .bp-article:has(.bp-toc) .bp-layout { grid-template-columns: minmax(0, 760px) clamp(200px, 20vw, 250px) minmax(0, 1fr); } .bp-toc { order: 2; } .bp-toc nav { position: sticky; top: clamp(96px, 12vh, 120px); display: flex; flex-direction: column; gap: 9px; border-left: 1px solid var(--border-subtle); padding-left: 16px; } .bp-toc-label { position: sticky; top: clamp(64px, 9vh, 92px); margin: 0 0 4px; padding-left: 16px; font-family: var(--font-code); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quaternary); } .bp-toc a { font-family: var(--font-base); font-size: 13.5px; line-height: 1.35; color: var(--text-tertiary); text-decoration: none; transition: color 0.2s ease; } .bp-toc a:hover, .bp-toc a.is-active { color: var(--text-primary); } /* prose */ .bp-prose { order: 1; min-width: 0; font-family: var(--font-base); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--text-secondary); } .bp-prose > :first-child { margin-top: 0; } .bp-prose h2 { margin: clamp(48px, 6vh, 72px) 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); scroll-margin-top: 100px; } .bp-prose h3 { margin: clamp(32px, 4vh, 44px) 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; color: var(--text-primary); scroll-margin-top: 100px; } .bp-prose p { margin: clamp(16px, 2vh, 22px) 0 0; } .bp-prose a { color: #7ADAE6; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, #7ADAE6 35%, transparent); } .bp-prose a:hover { border-bottom-color: #7ADAE6; } .bp-prose strong { color: var(--text-primary); font-weight: 600; } .bp-prose ul, .bp-prose ol { margin: clamp(16px, 2vh, 22px) 0 0; padding-left: 1.3em; } .bp-prose li { margin: 8px 0 0; } .bp-prose li::marker { color: var(--text-quaternary); } .bp-prose blockquote { margin: clamp(28px, 3.4vh, 40px) 0 0; padding: 4px 0 4px clamp(18px, 2vw, 26px); border-left: 2px solid #7C4FE8; font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; color: var(--text-primary); } .bp-prose blockquote p { margin: 0; } .bp-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: clamp(28px, 3.4vh, 40px) 0 0; border: 1px solid var(--border-subtle); } .bp-prose code { font-family: var(--font-code); font-size: 0.88em; color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); padding: 2px 6px; border-radius: 6px; } .bp-prose pre { margin: clamp(24px, 3vh, 34px) 0 0; padding: clamp(18px, 2vw, 26px); overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 14px; } .bp-prose pre code { background: none; padding: 0; font-size: clamp(12.5px, 1vw, 14px); line-height: 1.65; color: var(--text-primary); } .bp-prose hr { margin: clamp(40px, 5vh, 60px) 0 0; border: 0; border-top: 1px solid var(--border-subtle); } /* article foot */ .bp-article-foot { margin: clamp(72px, 10vh, 120px) 0 0; padding: 0 var(--page-gutter, 7vw) clamp(100px, 14vh, 170px); } .bp-cta { max-width: 760px; border: 1px solid var(--border-subtle); border-radius: 20px; padding: clamp(40px, 6vh, 72px) clamp(28px, 3vw, 44px); text-align: center; display: flex; flex-direction: column; align-items: center; } .bp-cta-k { margin: 0; font-family: var(--font-code); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); } .bp-cta-h { margin: 14px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.02; letter-spacing: var(--tracking-dense, -0.024em); color: var(--text-primary); } .bp-cta .cta-stack { margin-top: clamp(26px, 3.4vh, 40px); } .bp-foot-more { margin: clamp(40px, 5vh, 56px) 0 0; } /* ═══ Breakpoints ═══ */ @media (max-width: 920px) { .bp-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, auto); } .bp-card { grid-column: span 1 !important; } .bp-card--w6 { grid-column: span 2 !important; min-height: 0; } .bp-card--w2 .bp-card-excerpt { display: block; } .bp-layout, .bp-article:has(.bp-toc) .bp-layout { grid-template-columns: minmax(0, 1fr); } .bp-toc { order: 0; } .bp-toc nav { position: static; border-left: 0; border-top: 1px solid var(--border-subtle); padding: 16px 0 0; flex-flow: row wrap; gap: 8px 18px; } .bp-toc-label { position: static; padding-left: 0; } } @media (max-width: 600px) { .bp-bento { grid-template-columns: 1fr; } .bp-card, .bp-card--w6 { grid-column: span 1 !important; } } /* Past 1920 the full-width article leaves too much empty space on the right. Center the article block (index stays full-width). */ @media (min-width: 1920px) { .bp-head, .bp-layout, .bp-article-foot { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: clamp(40px, 3vw, 64px); padding-right: clamp(40px, 3vw, 64px); } .bp-layout { grid-template-columns: minmax(0, 800px); } .bp-article:has(.bp-toc) .bp-layout { grid-template-columns: minmax(0, 760px) clamp(200px, 15vw, 260px); } } @media (prefers-reduced-motion: reduce) { .bp-progress { transition: none; } }