/* ========================================================================== v2-guide.css — guide-article layout corrections (Track C). Loaded LAST on templates/guides/*.html only, after design-system.css, seo-pages.css and v2-content.css. Nothing here renames a class, adds markup, or touches the header/footer (Track A owns those). The defect: "there's too much spacing and the design looks like too empty". Measured on /how-to-compare-instagram-posts-by-engagement at 1280 the article ran 5128px for ~1,500 words, because every gap in the page was set from the same generous bucket: 60px above an H2, 26-32px around every panel, 18px between paragraphs, 18px of padding inside eight step cards, 13px inside every table cell. Nothing was WRONG, and that was the problem — with no contrast between the gaps, the reader gets no hierarchy from the whitespace, only distance. The page read as scaffolding. The fix is a scale with real steps in it, not a uniform shrink. ------------------------------------------------------------------------- THE SCALE — five steps, each ~1.45x the last, anchored to the 27px prose line so every value lands on something the text already does: --g-tight 8px siblings in one set (step cards, rail cards) --g-para 18px paragraph -> paragraph (0.67 of a line) --g-block 26px prose -> panel/table/list (~1 line) --g-sec 42px section break above an H2 (~1.5 lines, 2.3x --g-para) --g-region 64px region break (hero -> body, body -> FAQ) The two ratios that carry the hierarchy: · above an H2 (42) is 2.3x the paragraph gap (18) and 5x the gap between two related step cards (8). A section break now READS as one. · below an H2 is 10px — deliberately smaller than the paragraph gap, so a heading binds to the text it introduces instead of floating between two equal voids. This was 14px against an 18px paragraph gap, i.e. almost balanced, which is why headings looked unattached. Everything else is component padding brought into proportion with its own content: a step card holding one sentence does not need 18px of air above it, and a table cell holding the word "Format" does not need 13px. Note: `--g-*` are set on `.v2-content`, so they resolve on the guide pages that load this sheet and nowhere else. ========================================================================== */ .v2-content { --g-tight: 8px; --g-para: 18px; --g-block: 26px; --g-sec: clamp(30px, 3.3vw, 42px); --g-region: clamp(40px, 5vw, 64px); } /* ========================================================================== 1 · PAGE FRAME -------------------------------------------------------------------------- Measured at 1280: the hero exit (66px after v2-content.css) plus the body entry (88px, still seo-pages.css's) put 154px of nothing between the last line of the hero and the first word of the article. It is the largest void on the page and the first one the eye crosses. Roughly one region step is the whole budget it needs: 54 + 48 = 102px. The rail gap drops from 64px to ~44px. Two things follow: the canyon down the middle of the page closes, and the article column grows from 608px to ~628px, which is measure the text wanted anyway. The hero's TOP padding is deliberately not touched: it is nav clearance, and v2-content.css already brought it from clamp(104px, 15vh, 168px) down to clamp(84px, 11vh, 124px). Re-stating it here only raised the short-window floor from 84px to 96px, which is worse, so the rule was withdrawn. The 1120px band is NOT widened. The hero's inner block is capped at 1120 too, so the article's leading edge and the H1's leading edge currently land on the same 144px line at 1280. Widening the grid alone would break that alignment by 30px, and a straight left edge from headline to body is worth more than 30px of measure. ========================================================================== */ .v2-content .seo-hero { padding-block-end: clamp(36px, 4.2vw, 56px); } .v2-content .seo-grid { margin-block: clamp(32px, 3.8vw, 48px) var(--g-region); gap: clamp(26px, 3.4vw, 44px); } /* ========================================================================== 2 · PROSE RHYTHM -------------------------------------------------------------------------- Adjacent-sibling margins collapse, so the gap above an H2 is max(previous bottom, 42) = 42 in every case; the values below are the ones that survive. ========================================================================== */ .v2-content .seo-article { line-height: 1.58; } .v2-content .seo-article p { margin-block: 0 var(--g-para); } /* 42 above / 10 below: the heading is attached to its own paragraph. */ .v2-content .seo-article h2 { margin-block: var(--g-sec) 10px; } .v2-content .seo-article > h2:first-child { margin-block-start: 0; } /* An H3 is a subdivision of the section it sits in, not a new section: its break is 0.6 of an H2's, which is what makes the two levels legible. */ .v2-content .seo-article h3 { margin-block: 26px 6px; } .v2-content .seo-article ul, .v2-content .seo-article ol { margin-block: 0 var(--g-block); } .v2-content .seo-article li { margin-block-end: var(--g-tight); } /* ========================================================================== 3 · COMPONENTS — padding proportional to content ========================================================================== */ /* Step cards. Eight cards x 12px of gap + 32px of vertical padding each was 352px of packaging around eight single sentences. The set now reads as one list (8px between siblings) rather than eight separate alerts. The counter top offset is re-derived so the circle still centres on the first line: 13px padding + (26.9px line - 28px circle) / 2. */ .v2-content .seo-step-list { margin-block: 22px var(--g-block); gap: var(--g-tight); } .v2-content .seo-step-list li { padding-block: 13px; padding-inline: 56px 16px; margin-block-end: 0; } .v2-content .seo-step-list li::before { top: 12px; } /* Callouts */ .v2-content .seo-pullout, .v2-content .seo-proof, .v2-content .seo-template-box { margin-block: var(--g-block); } .v2-content .seo-pullout, .v2-content .seo-proof { padding-block: 15px 16px; } .v2-content .seo-pullout strong, .v2-content .seo-proof strong { margin-block-end: 7px; } /* Tables. A five-row table of one- and two-word cells was 66px per row. Cell leading drops from 1.62 (inherited body prose leading, which a data cell has no use for) to 1.42, and the block padding from 13px to 10px. */ .v2-content .seo-table-wrap { margin-block: 20px var(--g-block); } .v2-content .seo-table th { padding-block: 10px; padding-inline: 14px; } .v2-content .seo-table td { padding-block: 10px; padding-inline: 14px; line-height: 1.42; } /* Definition list, media grid — same block step as every other panel. */ .v2-content .seo-definition-list, .v2-content .seo-media-grid { margin-block: var(--g-block); } /* ========================================================================== 4 · THE CLOSING BLOCK — C2 -------------------------------------------------------------------------- The article-foot CTA is a real region break, so it takes the region step above it. seo-pages.css zeroes `.seo-cta-row + .seo-faq`'s top margin at (0,3,0), which beats the FAQ rule below — that is intended: when the CTA is present it supplies the gap, and when it is not the FAQ supplies its own. The button itself: the label sat inside 19px of padding on both sides, but the trailing edge also carries the arrow, so the control was optically left-heavy — the text block's centre sat ~7px inside the geometric centre. Trailing padding drops to 16px and the arrow's 6px margin replaces the 14px it had (8px flex gap + 6px margin), which pulls the arrow into the label's word-space instead of leaving it stranded. Width falls ~10px and the pair now reads as one unit. The 44px tap floor is restated as a floor, never a ceiling: 12px + 12px + a 21px line is 45px, and the max() guarantees the rule cannot lower it. ========================================================================== */ .v2-content .seo-article .seo-cta-row { margin-block: var(--g-region) var(--g-region); gap: 14px 20px; } .v2-content .seo-button { min-height: max(var(--ds-tap), 0px); padding-block: 12px; padding-inline: 18px 16px; gap: 6px; } .v2-content .seo-button::after { margin-inline-start: 0; } /* ========================================================================== 5 · FAQ — a region, not a section ========================================================================== */ .v2-content .seo-faq { margin-block-start: var(--g-region); } .v2-content .seo-faq summary { padding-block: 15px; } .v2-content .seo-faq p { padding-block: 0 20px; } /* ========================================================================== 6 · THE RAIL -------------------------------------------------------------------------- Already `position: sticky; top: 84px` in seo-pages.css — the apparently dead 320px column in a full-page screenshot is a screenshot artifact, not what a reader sees. Left alone apart from the sibling gap, which comes down to the tight step so the two cards read as one rail. Deliberately NOT given `overflow-y: auto` for a short viewport: the cards carry `--ds-lift-1` and their focus rings are drawn outside their box, and a scroll port would clip both. ========================================================================== */ .v2-content .seo-sidebar { gap: 12px; align-self: start; } /* ========================================================================== 7 · NARROW SCREENS -------------------------------------------------------------------------- One column, no rail, so the section break does the whole job of telling the reader where they are. It stays proportionally larger than the paragraph gap (30 vs 18) but gives back the absolute pixels a phone cannot spare. ========================================================================== */ @media (max-width: 680px) { .v2-content .seo-grid { margin-block: 26px 40px; } .v2-content .seo-sidebar { margin-block-start: 6px; } } /* ========================================================================== 8 · REDUCED MOTION -------------------------------------------------------------------------- This sheet introduces no transition, transform or animation, and sets no `scroll-behavior` — design-system.css already neutralises `html { scroll-behavior }` globally under the query. Nothing to add; recorded so the next reader does not have to diff the file to find out. ========================================================================== */ /* ========================================================================== 9 · THE EMBEDDED HANDLE FIELD — an illegal focus ring, found by the ops pass -------------------------------------------------------------------------- Seven guides embed a `.follower-tool` inside the article. Seven, not one: /instagram-competitor-analysis-tool, /instagram-engagement-rate-benchmark, /instagram-follower-count-checker, /instagram-analysis-in-claude-chatgpt, and the three TikTok siblings. v2-content.css already caught that `.follower-field:focus-within` signals focus with nothing but `border-color: var(--ds-green)` — emerald on white, measured here at 2.26:1 against a 3:1 floor for a non-text indicator, and a colour-only indicator at that. But it fixed it behind `.instagram-competitor-tool-page .competitor-checker`, so the other six guides still ship the illegal ring. Tabbing to the field on /instagram-engagement-rate-benchmark paints outline-style: none and moves the keyline from #0e1110 to #17b877 — 2.26:1, and invisible to anyone who does not see that hue shift. Same fix, same values as the one already proven on the tool page: --ds-focus (#0c4531) at 11.0:1 on the white field. Scoped to the article so it cannot reach a header or footer field, and pitched at (0,4,0) so it beats `.follower-field:focus-within` in seo-pages.css without that sheet being touched — it belongs to another agent this round. ========================================================================== */ .v2-content .seo-article .follower-field:focus-within { border-color: var(--ds-focus); outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; /* Lift the focused field above the welded submit so the ring is not clipped. */ position: relative; z-index: 1; } /* ========================================================================== 10 · STACKED TABLES — yielding to the shared vocabulary -------------------------------------------------------------------------- Section 3 tightens every `.seo-table` cell to 10px/14px with 1.42 leading, because a ledger cell holding the word "Format" has no use for prose leading. That is right for a table and wrong for a stacked card: below 720px `.v2-stack-table` turns each row into a card and each cell into a block, and section 6 of v2-content.css sets `td { padding: 0 }` so the card's own 14px/16px is the only padding in play. Both rules are (0,2,1) and this sheet loads later, so section 3 was winning and every stacked cell was being inset 14px inside a card that had already paid 16px — 30px of indent — and given 10px of block padding on top of the 8px sibling margin the stack sets. Measured on /instagram-competitor- analysis-tool at 390px: `padding: 10px 14px` where the vocabulary asks for `0`. So section 3 yields here. The cell also goes back to prose leading: once it is a card row it is a sentence, not a figure in a column, and 1.42 is too tight for the three-line answers these tables carry. Scoped to the same 720px breakpoint as the vocabulary it is yielding to, so the fitted table above that width keeps its tightened cells. ========================================================================== */ @media (max-width: 720px) { .v2-content .v2-stack-table td { padding: 0; line-height: 1.58; } } /* ========================================================================== 11 · THE 981-1023px BAND — the rail arrives before there is room for it -------------------------------------------------------------------------- Found by sweeping 34 widths instead of 4, after Track E hit the same class of bug in a 121px band its own four-width sweep stepped over. seo-pages.css turns the body grid two-column at 981px. At that exact pixel the article does not widen — it COLLAPSES, because 320px of rail plus the gap come out of it: 980px viewport -> article 708px (single column) 981px viewport -> article 530px (rail appears) A 178px cliff. Two guide tables have a natural width the narrowed column can no longer hold, so they start scrolling sideways ON A DESKTOP: /social-media-competitor-analysis-template 561px table in a 528px port /tiktok-competitor-analysis-checklist 553px table in a 528px port Both are tables I deliberately left unstacked (bare specimen values and bare ratios), so a sideways scroll is their accepted phone behaviour — but accepting it at 1000px on a laptop is a different claim, and not one the unstack decision made. Measured threshold: the widest unstacked guide table is 561px, so the rail can only be afforded once the article clears it. 1024px gives a 565px port; 1000px gives 544px. So the two-column grid waits until 1024px. This is pre-existing — the 980px breakpoint is not mine, and the gap reduction in section 1 actually shrank the cliff by 20px. It is fixed here rather than in seo-pages.css because that sheet belongs to Track A this round, and scoped to `.v2-content` so it reaches only the guide family. ========================================================================== */ @media (max-width: 1023px) { .v2-content .seo-grid { grid-template-columns: minmax(0, 1fr); } }