/* finalert.com — resources.css. SPEC-G-R3 §A–§E. ========================================================================== The guide single, the guides hub, the FAQs hub and the cost calculator. WHY THIS IS A SEPARATE FILE AND NOT AN APPEND TO pages.css. SPEC-G-R3 §G6 places every rule below in pages.css. Orchestrator ruling §J.4 amends that for build sequencing: pages.css is owned by the interior motion pass while this spec is being built, so two agents appending to one 5,100-line file would conflict on every hunk. This file is enqueued by the four new templates ONLY, after next.css and pages.css, and a follow-up may fold it back in once the motion pass lands. Nothing here duplicates a rule that already exists in either of those two: every selector is either new or a documented delta on one that is. COMPOSITION, NOT COPYING (SPEC-00 §10). The guide single's geometry IS the blog single's: its markup still carries .post-doc, .post-doc__grid and .post-body alongside the .gd-* names, so the grid tracks and the reading measure come from pages.css unchanged. SPEC-GD-R4 §3 TAKES THE RAIL BACK. The guide used to compose the blog rail's sticky block too, and pages.css caps that block's height with overflow-y: auto. With a contents list, a download offer and a byline stacked inside it, three of the five guides overflowed at a 900px viewport and all five at 800, which is the scrollbar the owner named. The guide now owns .g4-rail, only its contents group is sticky, and nothing on this page carries overflow-y outside the one flag in §3.2 tier 3 that no shipped guide sets. pages.css is UNCHANGED: the blog single keeps its rail, which is six to twelve rows and never trips it. BUDGETS. Zero backdrop-filter. Zero box-shadow used as elevation — every box-shadow below is an `inset` edge, which is a rule, not a shadow. No element in this file is a card in SPEC-00's sense (bordered AND radiused AND shadowed): the plates carry a ground fill plus at most one hairline or one 3px edge. No transform on any hover. No looping motion. ========================================================================== */ /* ========================================================================== SPEC-GD-R4 §4 — the cover. .ihero--guide, still a MODIFIER on .ihero--post ========================================================================== SPEC-G-R3 §A1 refused a sixth top-level hero variant and that refusal stands. R4 grows the modifier from three deltas to seven. The record strip, the breadcrumb, the pattern, the 46px all-ink h1 with no accent span, the .hl load choreography and the 880ms finish are all inherited untouched. Delta 2, and it is the one that matters: the plate carries a DRAWN cover, not a photograph. A guide is a document about numbers; a stock photograph of an office on its cover says nothing, and a drawn cover says this is a made thing. The mount is ASSETS-R4 §1's: generated on white, mounted on a --navy-050 plate with mix-blend-mode: multiply, so the white becomes the plate's tint and no prompt ever had to hit an exact background hex. */ .ihero--guide .ihero__plate { background: var(--navy-050); border: 1px solid var(--navy-100); } .ihero--guide .ihero__plate img { mix-blend-mode: multiply; object-fit: contain; } @supports not (mix-blend-mode: multiply) { .ihero--guide .ihero__plate { background: var(--paper); } .ihero--guide .ihero__plate img { mix-blend-mode: normal; } } /* delta 3. The two-digit menu_order at 120px, behind the plate's top-left corner, aria-hidden, decorative, and the only element on the page over 60px. It is clipped by nothing and sits UNDER the plate: the plate is z-index 1 inside an isolated stacking context, so the numeral's right half disappears behind it and its left half reads as a printed folio. */ .ihero--guide .ihero__aside { position: relative; isolation: isolate; } .ihero--guide .ihero__plate { position: relative; z-index: 1; } .g4-cover__no { position: absolute; /* far enough out that roughly half the folio reads beside the plate and the rest sits behind it. Measured against the column gap at each step so it never reaches the copy column: 8px of clearance at 1024 and 40 above. */ left: calc(var(--s-8) * -1); top: calc(var(--s-7) * -1); z-index: 0; font: 600 clamp(96px, 8vw, 120px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: var(--navy-100); pointer-events: none; } @media (min-width: 1440px) { .g4-cover__no { left: calc(var(--s-10) * -1); } } @media (max-width: 1023px) { .g4-cover__no { display: none; } } /* delta 4. The promise, whole, on a 46ch measure directly under the h1. */ .ihero--guide .ihero__lead { max-width: 46ch; } /* delta 5. The badge goes from a pill to a two-track plate with a --navy-050 ground and a 3px navy left edge. It is still NOT a gold instance: no gold fill, and the tick in the eyebrow above it has already spent one. */ .ihero__badge { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border: 0; border-left: 3px solid var(--navy); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--navy-050); font: 600 14px/1.45 var(--font-ui); color: var(--navy); } .ihero__badge svg { display: block; width: 20px; height: 20px; color: var(--navy-300); } /* delta 6. The meta bar: a mark per cell instead of a middle dot. Every string and the