/* post-extras.css — GLS blog illustration & effect layer Scoped to /post/ templates ONLY. Linked AFTER site.css in the post . Does NOT touch shared site.css/base.css or the inline-styled homepage (honors tech-gls-site-homepage-no-sitecss). All values come from the existing token system (tokens.css); nothing hardcoded that a token already owns. Pairs with /js/post.js. Spec: DESIGN-SPEC-blog-illustrations.md. */ /* --------------------------------------------------------------------------- 1. Monoline SVG spot illustrations (§1) A 56px single-stroke accent-green concept glyph dropped above a section

. Inherits the share-icon DNA: currentColor, stroke-width 2, round caps. --------------------------------------------------------------------------- */ .prose .spot { display: block; width: 56px; height: 56px; color: var(--green); margin: var(--s-8) 0 var(--s-3); /* same top rhythm as h2 */ opacity: 0.9; } .prose .spot + h2 { margin-top: var(--s-2); } /* tighten when a spot leads the section */ @media (prefers-reduced-motion: no-preference) { .prose .spot path, .prose .spot line, .prose .spot circle { transition: none; } /* draw-on handled by reveal class, §3 */ } /* --------------------------------------------------------------------------- 2. Reading-progress hairline (§2) 2px accent-green bar pinned top of viewport; fills L->R with article scroll. Width is driven by /js/post.js; CSS only provides the track + bar + easing. --------------------------------------------------------------------------- */ .read-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .read-progress__bar { height: 100%; width: 0; background: var(--green); transform-origin: left; transition: width 80ms linear; } @media (prefers-reduced-motion: reduce) { .read-progress__bar { transition: none; } } /* --------------------------------------------------------------------------- 3. Reveal-on-scroll for figures/diagrams (§3) Ported verbatim from base.css L229-244 (posts don't load base.css). Scoped to opted-in [data-reveal] nodes only -- prose body text NEVER reveals. Observer lives in /js/post.js (threshold 0.12, fires once, then unobserves). --------------------------------------------------------------------------- */ .prose [data-reveal], .post-figure[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); will-change: opacity, transform; } .prose [data-reveal].is-visible, .post-figure[data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------------------------- 4. Editorial diagrams -- boxes + arrows in brand tokens (§4) Brand-token box-and-arrow flow inside
. Built so one Playwright crop drops straight into a LinkedIn/Substack carousel slide. Never wider than the prose (42rem). --------------------------------------------------------------------------- */ .post-figure { max-width: 42rem; margin: var(--s-8) auto; /* matches .prose measure */ } .post-figure__flow { display: grid; gap: var(--s-3); grid-auto-flow: row; padding: var(--s-6); background: var(--cream-dim); border: var(--rule-hair); border-radius: 4px; --social-frame: 1; /* set 0/1 if you build a screenshot variant */ } @media (min-width: 640px) { .post-figure__flow { grid-auto-flow: column; align-items: stretch; } } .post-figure__box { background: var(--cream); border: 1px solid var(--bone); border-left: 3px solid var(--green); border-radius: 3px; padding: var(--s-4); box-shadow: var(--depth-1); } .post-figure__box .k { /* tiny Montserrat eyebrow */ font-family: "Montserrat", sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); } .post-figure__box .h { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); margin: var(--s-1) 0 0; line-height: 1.2; text-wrap: balance; /* HARD RULE -- headings balance their lines */ } .post-figure__box p { font-size: 0.9rem; color: var(--ink-soft); margin: var(--s-2) 0 0; line-height: 1.55; } .post-figure__arrow { /* monoline connector between boxes */ align-self: center; color: var(--green); display: grid; place-items: center; } .post-figure figcaption { font-family: "Montserrat", sans-serif; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: var(--s-3); text-align: center; } /* --------------------------------------------------------------------------- 5. Gutter usage that preserves calm (§5) At >=1200px ONLY: a 3-track grid that leaves the centered 42rem prose exactly where it is and carries two quiet, GLS-owned elements in the freed side-space. Below 1200px the grid collapses -- byte-for-byte the current centered layout. --------------------------------------------------------------------------- */ /* 5a -- Sticky "On this page" TOC, LEFT gutter. */ .post-toc { display: none; } /* default: invisible below 1200px */ .post-toc__h { font-family:"Montserrat",sans-serif; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s-3); } .post-toc a { display:block; padding:var(--s-1) 0 var(--s-1) var(--s-3); font-size:0.8rem; line-height:1.4; color:var(--ink-mute); text-decoration:none; border-left:1px solid transparent; } .post-toc a:hover { color:var(--green); } .post-toc a[aria-current="true"] { color:var(--navy); border-left-color:var(--green); } /* 5b -- RIGHT rail: Scorecard card + subscribe + share, stacked. Unlike the TOC, the rail is visible on mobile too -- it flows full-width at the END of the article (after the FAQ/byline), so phone readers still get the subscribe + scorecard. At >=1200px it becomes the sticky right gutter. */ .post-aside { display: flex; flex-direction: column; gap: var(--s-5); } .post-aside__card { background:var(--cream); border:var(--rule-hair); border-radius:4px; padding:var(--s-5); } .post-aside__card .k { font-family:"Montserrat",sans-serif; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--green); } .post-aside__card p { font-size:0.9rem; color:var(--ink-soft); line-height:1.5; margin:var(--s-2) 0 var(--s-3); } .post-aside__card a { color:var(--green); font-weight:500; text-decoration:underline; text-underline-offset:2px; font-size:0.9rem; } /* subscribe form, moved into the rail below the card (stacks vertically) */ .post-aside__sub { display:flex; flex-direction:column; gap:var(--s-3); background:var(--cream); border:var(--rule-hair); border-radius:4px; padding:var(--s-5); } .post-aside__label { font-family:var(--font-display); font-size:1rem; line-height:1.3; color:var(--ink); } .post-aside__sub input[type=email] { width:100%; padding:.7rem .9rem; border:1px solid var(--bone); border-radius:3px; font:inherit; font-size:.9375rem; background:#fff; } .post-aside__sub .btn { width:100%; } .post-aside .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } /* honeypot stays hidden in the rail */ .post-aside__share { display:inline-flex; align-items:center; gap:6px; align-self:center; background:none; border:1px solid var(--bone); border-radius:3px; padding:.55rem .9rem; font:inherit; font-size:.85rem; color:var(--ink-soft); cursor:pointer; transition:border-color .2s,color .2s; } .post-aside__share:hover { border-color:var(--green); color:var(--green); } /* >=1200px: build the 3-track grid and make the TOC + rail sticky gutters. */ @media (min-width: 1200px) { .post-shell { display: grid; gap: var(--s-7); grid-template-columns: 14rem minmax(0, 42rem) 14rem; justify-content: center; align-items: start; } .post-toc { display: block; position: sticky; top: 6rem; align-self: start; } .post-aside { position: sticky; top: 6rem; align-self: start; } }