/* ============================================================ Blog layout — design-agnostic. Blog pages reuse a design's links, header, footer and scripts verbatim (tools/lib/render-post.js); this file only lays out the article/cards and maps each design's own variables onto --blog-* tokens. The designs themselves are never restyled. ============================================================ */ body.blog { /* safe defaults for any design that lacks usable variables */ --blog-accent: var(--chat-accent, #4348c8); --blog-ink: #1c2333; --blog-muted: #6b7280; --blog-bg: #ffffff; --blog-surface: #f6f6f8; --blog-line: rgba(0, 0, 0, 0.12); --blog-head: inherit; --blog-body: inherit; --blog-btn-font: inherit; --blog-btn-transform: none; --blog-btn-spacing: 0.02em; --blog-radius: 12px; --blog-hero-bg: var(--blog-surface); --blog-hero-ink: var(--blog-ink); --blog-hero-muted: var(--blog-muted); background: var(--blog-bg); color: var(--blog-ink); } /* ---- per-design token mapping (design CSS untouched) ---- */ body[data-design="b"].blog { --blog-accent: var(--accent-deep); --blog-ink: var(--ink); --blog-muted: var(--mute-l); --blog-bg: var(--paper); --blog-surface: #ffffff; --blog-line: var(--line-l); --blog-head: var(--disp); --blog-body: var(--body); --blog-btn-font: var(--disp); --blog-btn-transform: uppercase; --blog-btn-spacing: 0.06em; --blog-radius: 0; --blog-hero-bg: var(--coal); --blog-hero-ink: #ffffff; --blog-hero-muted: var(--mute-d); } /* B's header is fixed + transparent over its dark hero; the blog head is a dark band too, and we keep the bar solid so the article never sits under a see-through header. */ body[data-design="b"].blog .hdr { background: rgba(14, 17, 22, 0.92); backdrop-filter: blur(10px); } body[data-design="b"].blog .post-head, body[data-design="b"].blog .blog-head { padding-top: 130px; } body[data-design="b"].blog .post-kicker a { color: var(--accent); } body[data-design="b"].blog .post-kicker { color: var(--accent); } body[data-design="d"].blog { --blog-accent: var(--bronze-deep); --blog-ink: var(--ink); --blog-muted: var(--muted); --blog-bg: var(--bone); --blog-surface: var(--paper); --blog-line: var(--line); --blog-head: var(--serif); --blog-body: var(--sans); --blog-btn-font: var(--sans); --blog-btn-transform: uppercase; --blog-btn-spacing: 0.14em; --blog-radius: 0; } body[data-design="d"].blog .post h1, body[data-design="d"].blog .blog-head h1 { font-weight: 500; } body[data-design="h"].blog { --blog-accent: var(--red); --blog-ink: var(--ink); --blog-muted: var(--mute); --blog-bg: var(--paper); --blog-surface: var(--tint); --blog-line: var(--rule); --blog-head: var(--serif); --blog-body: var(--sans); --blog-btn-font: var(--sans); --blog-btn-transform: none; --blog-btn-spacing: 0.02em; --blog-radius: 0; } body[data-design="h"].blog .post-head, body[data-design="h"].blog .blog-head { border-bottom: 3px solid var(--ink); --blog-hero-bg: transparent; } /* ---- page frame ---- */ .blog-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px 80px; } /* article head — full-bleed band via a pseudo element */ .post-head, .blog-head { position: relative; max-width: 72ch; margin: 0 auto; padding: 64px 0 34px; color: var(--blog-hero-ink); } .post-head::before, .blog-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--blog-hero-bg); z-index: -1; } .post-kicker { font-family: var(--blog-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blog-accent); margin: 0 0 16px; } .post-kicker a { color: inherit; text-decoration: none; } .post-kicker a:hover { text-decoration: underline; } .post h1, .blog-head h1 { font-family: var(--blog-head); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; margin: 0 0 18px; color: inherit; } .post-excerpt { font-size: 1.15rem; line-height: 1.55; color: var(--blog-hero-muted); max-width: 60ch; margin: 0; } .post-byline { margin: 20px 0 0; font-size: 0.9rem; color: var(--blog-hero-muted); } .post-byline b { color: inherit; font-weight: 700; } .post-cover { max-width: 960px; margin: 40px auto 44px; } .post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--blog-radius); } /* ---- article body ---- */ .post-body { max-width: 72ch; margin: 0 auto; font-family: var(--blog-body); font-size: 1.08rem; line-height: 1.75; color: var(--blog-ink); } .post-body > * + * { margin-top: 1.1em; } .post-body h2, .post-body h3, .post-body h4 { font-family: var(--blog-head); color: var(--blog-ink); line-height: 1.2; letter-spacing: 0; } .post-body h2 { font-size: 1.7rem; margin-top: 2.1em; } .post-body h3 { font-size: 1.3rem; margin-top: 1.8em; } .post-body p { margin-bottom: 0; } .post-body a { color: var(--blog-accent); } .post-body ul, .post-body ol { padding-left: 1.4em; } .post-body li + li { margin-top: 0.4em; } .post-body blockquote { margin: 1.4em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 3px solid var(--blog-accent); color: var(--blog-muted); font-style: italic; } .post-body code { font-size: 0.92em; background: var(--blog-surface); padding: 0.1em 0.35em; border-radius: 4px; } .post-body hr { border: 0; border-top: 1px solid var(--blog-line); margin: 2.4em 0; } .post-body img { max-width: 100%; height: auto; } /* ---- CTA block ---- */ .post-cta { max-width: 72ch; margin: 56px auto 0; padding: 30px 30px 32px; background: var(--blog-surface); border: 1px solid var(--blog-line); border-radius: var(--blog-radius); text-align: center; } .post-cta h2 { font-family: var(--blog-head); font-size: 1.7rem; line-height: 1.15; margin: 0 0 8px; color: var(--blog-ink); } .post-cta p { color: var(--blog-muted); margin: 0 0 20px; } .post-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .post-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--blog-btn-font); font-weight: 700; font-size: 1rem; text-transform: var(--blog-btn-transform); letter-spacing: var(--blog-btn-spacing); padding: 13px 24px; border-radius: var(--blog-radius); transition: transform 0.15s ease, filter 0.15s ease; } .post-btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .post-btn-fill { background: var(--blog-accent); color: #fff; } .post-btn-line { border: 2px solid var(--blog-accent); color: var(--blog-accent); } /* ---- author box ---- */ .post-author { max-width: 72ch; margin: 28px auto 0; display: flex; gap: 20px; align-items: flex-start; padding: 24px 0 0; border-top: 1px solid var(--blog-line); } .post-author-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; } .post-author-name { margin: 0 0 6px; font-family: var(--blog-head); font-size: 1.25rem; line-height: 1.2; color: var(--blog-ink); } .post-author-name span { display: block; font-family: var(--blog-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blog-accent); margin-top: 4px; } .post-author-bio { margin: 0; color: var(--blog-muted); font-size: 0.95rem; line-height: 1.6; } /* ---- more posts / index cards ---- */ .post-more { max-width: 1140px; margin: 72px auto 0; padding-top: 44px; border-top: 1px solid var(--blog-line); } .post-more h2 { font-family: var(--blog-head); font-size: 1.6rem; line-height: 1.2; margin: 0 0 22px; color: var(--blog-ink); } .blog-index .blog-grid { margin-top: 44px; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .blog-card { display: flex; flex-direction: column; background: var(--blog-surface); border: 1px solid var(--blog-line); border-radius: var(--blog-radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1); } .blog-card-media { display: block; background: var(--blog-line); } .blog-card-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .blog-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .blog-card-meta { margin: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blog-muted); } .blog-card-title { font-family: var(--blog-head); font-size: 1.35rem; line-height: 1.2; margin: 8px 0 8px; color: var(--blog-ink); letter-spacing: 0; } .blog-card-title a { color: inherit; text-decoration: none; } .blog-card-title a:hover { color: var(--blog-accent); } .blog-card-excerpt { margin: 0; color: var(--blog-muted); font-size: 0.95rem; line-height: 1.55; } .blog-card-more { margin-top: auto; padding-top: 14px; color: var(--blog-accent); font-weight: 700; text-decoration: none; font-size: 0.95rem; } .blog-card-more:hover { text-decoration: underline; } .blog-index .post-cta { margin-top: 56px; } /* the design switcher + chat launcher sit bottom-left/right; give the footer room */ @media (max-width: 720px) { .blog-wrap { padding: 0 20px 60px; } .post-head, .blog-head { padding-top: 44px; padding-bottom: 28px; } body[data-design="b"].blog .post-head, body[data-design="b"].blog .blog-head { padding-top: 96px; } .post-cover { margin: 26px auto 30px; } .post-body { font-size: 1.03rem; } .post-cta { padding: 24px 18px 26px; } .post-author { flex-direction: column; align-items: flex-start; } }