/* ========================================================================== JuiceMount blog — v2 reading treatment. Layers on tokens/site/scenes. The cache-viz shader stays in the header; the article body is flat and plain for reading. One centred reading column, everything left-aligned within it (no centre/left mix). Scoped to so it only governs the blog, and overrides the site-wide centred layer here. Link this from every post and from the blog index. ========================================================================== */ /* ---- one reading column, centred in the viewport ---- */ .blog-post .post-hero > .container, .blog-post .post-body, .blog-post .blog-hero > .container, .blog-post .post-list { max-width: 46rem; margin-inline: auto; } /* ---- HEADER: keep the shader; left-align the title block; bring back the category tag (useful on a blog, unlike the marketing eyebrows) ---- */ .blog-post .post-hero, .blog-post .blog-hero { padding-block: var(--space-9) var(--space-7); } .blog-post .post-hero .label, .blog-post .post-hero h1, .blog-post .post-hero .lead, .blog-post .post-hero .post-meta, .blog-post .post-hero .post-facts, .blog-post .blog-hero .label, .blog-post .blog-hero h1, .blog-post .blog-hero p { text-align: left; margin-inline: 0; } .blog-post .post-hero .label, .blog-post .blog-hero .label { display: inline-block; color: var(--juice-green); letter-spacing: 0.1em; margin-bottom: var(--space-4); } .blog-post .post-hero h1 { max-width: 24ch; } .blog-post .post-hero .lead { max-width: none; color: rgba(250, 253, 232, 0.84); font-size: var(--fs-lead); margin-top: var(--space-3); } .blog-post .post-meta { justify-content: flex-start; } /* ---- BODY: flat, plain, comfortable long-form rhythm ---- */ .blog-post .post-article { background: var(--bg); padding-block: clamp(var(--space-7), 5vw, var(--space-9)); } .blog-post .post-body { font-size: 1.1875rem; line-height: 1.72; color: var(--text); text-align: left; } .blog-post .post-body p { margin: 0 0 var(--space-5); } .blog-post .post-body > *:first-child { margin-top: 0; } .blog-post .post-body h2 { font-size: var(--fs-h3); line-height: 1.18; margin: var(--space-8) 0 var(--space-4); scroll-margin-top: var(--space-7); } .blog-post .post-body h3 { font-size: var(--fs-lead); margin: var(--space-6) 0 var(--space-3); } .blog-post .post-body a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .blog-post .post-body a:not(.btn):hover { text-decoration-thickness: 2px; } .blog-post .post-body ul, .blog-post .post-body ol { margin: 0 0 var(--space-5); padding-left: 1.4em; } .blog-post .post-body li { margin-bottom: var(--space-2); line-height: 1.6; } .blog-post .post-body figure { margin-block: var(--space-7); } .blog-post .post-body figcaption { text-align: left; } /* ---- INDEX: same flat, left, readable column for the post list ---- */ .blog-post .blog-hero h1 { max-width: 20ch; } .blog-post .post-list { text-align: left; } .blog-post .post-list h2, .blog-post .post-list .dek, .blog-post .post-list li { text-align: left; } /* ========================================================================== SHARED BLOG COMPONENTS — layout + the standard parts every post uses (meta line, comparison table, sources, the next-step CTA card, section anchors, pull-stat aside, figure wrapper). Token-driven so light/dark stay linked. Article-specific diagrams stay inline in each post. The .blog-post v2 layer above overrides these by specificity, so order is not load-bearing. ========================================================================== */ .post-hero h1 { font-size: var(--fs-h2); max-width: 28ch; } .post-hero .lead { max-width: 58ch; } .post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-small); color: var(--text-muted); margin: var(--space-4) 0 0; } .post-facts { font-size: var(--fs-small); color: var(--text-muted); margin: var(--space-2) 0 0; } .post-body { max-width: 46rem; } .post-body > h2:first-child { margin-top: 0; } /* comparison / spec tables */ .post-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: var(--space-5) 0; } .post-table caption { text-align: left; font-weight: var(--fw-head); padding-bottom: var(--space-2); } .post-table th, .post-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem 0.6rem 0; border-top: 1px solid var(--hairline-soft); } .post-table thead th { border-top: 0; border-bottom: 1.5px solid var(--hairline); color: var(--text-muted); } .post-table tbody th { font-weight: var(--fw-head); } .post-table .note { display: block; color: var(--text-muted); font-size: 0.875em; margin-top: 0.2em; } .post-table-wrap { overflow-x: auto; margin: var(--space-5) 0; } .post-table-wrap .post-table { margin: 0; min-width: 34rem; } /* the next-step CTA card (links to calculator / compare / docs) */ .next-step { border: 1.5px solid var(--tint-green-border); background: var(--tint-green); border-radius: var(--radius); padding: var(--space-5); margin-top: var(--space-7); } .next-step .label { display: block; margin-bottom: var(--space-2); } .next-step .hero-ctas { margin: var(--space-4) 0 0; } .next-step p:last-child { margin-bottom: 0; } /* collapsed source list */ details.src { max-width: 46rem; margin: var(--space-6) 0 0; border: 1.5px solid var(--hairline-soft); border-radius: var(--radius-sm); background: var(--surface); } details.src summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-size: var(--fs-small); font-weight: var(--fw-head); } details.src summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } details.src ul { margin: 0; padding: 0 var(--space-5) var(--space-4) 2.2em; font-size: var(--fs-small); color: var(--text-muted); } details.src li { margin-top: var(--space-2); } details.src a { color: var(--link); } /* section heading anchors */ .fg-anchor { font-family: var(--font-mono); font-weight: var(--fw-text); font-size: 0.65em; margin-left: 0.4ch; color: var(--text-muted); text-decoration: none; opacity: 0; transition: opacity var(--dur) var(--ease); } .post-body h2:hover .fg-anchor, .fg-anchor:focus { opacity: 1; } .fg-anchor:hover, .fg-anchor:focus { text-decoration: underline; } .fg-anchor:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* figure wrapper + pull-stat aside */ .fg-fig { margin-block: var(--space-5); } .fg-fig > .label { display: block; margin: 0 0 var(--space-4); } .fg-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); border: 1.5px solid var(--tint-blue-border); background: var(--tint-blue); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; } .fg-stat-num { font-family: var(--font-mono); font-weight: var(--fw-head); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; white-space: nowrap; } .fg-stat-line { margin: 0; flex: 1 1 16rem; font-size: var(--fs-small); color: var(--text-muted); } /* ========================================================================== The blog is a reading destination, not a marketing scroll. Its content must be visible immediately, never gated behind the scene scroll-reveal (which was leaving the post list at opacity:0 on /blog/ until a scroll fired). This mirrors scenes.css's reveal-hide selector, prefixed with .js .blog-post so it carries higher specificity and wins, and pins blog scene content visible. ========================================================================== */ .js .blog-post .scene:not(.scene--hero) > .container > :not(.bp):not(.sw-vs):not(.pillars) { opacity: 1; transform: none; } /* ========================================================================== The next-step CTA card sits on a green tint, so its secondary action is "our white button" (cream fill, ink text) rather than a transparent outline whose text + the green behind it read muddy. The green block-fill still wipes in on hover from site.css. Scoped to the blog card so site-wide outline buttons are untouched. ========================================================================== */ .blog-post .next-step .btn-outline { background: var(--rind-cream); color: var(--pulp-ink); border-color: var(--tint-green-border); } .blog-post .next-step .btn-outline:hover, .blog-post .next-step .btn-outline:focus-visible { color: var(--pulp-ink); border-color: var(--juice-green); }