/* ============================================================================ * ARGUS LANDING — SHARED CHROME * Sprint: landing-unify, 2026-08-28. Requires css/fonts.css + css/tokens.css. * * SCOPE CHANGED THIS SPRINT. Previously Group A only (the five legal/info * pages). Now linked by ALL NINE non-index pages: * Group A pricing · how-it-works · terms · privacy · disclaimer * Group B faq/ · about/ · blog/fact-checking-argus · blog/pentagon-pizza-indicator * * Group B was excluded in landing-consolidate because adopting this chrome grew * faq/ by 357px and "restyles every element, which is a redesign of pages whose * visual target is itself provisional". The target is no longer provisional — * it is the hero's system — so the reason for the exclusion has expired. * * What that measurement missed: Group B was not merely on a different chrome, * it was on a different FONT. Those four pages declared -apple-system directly * on body and loaded no webfont at all, so they had been rendering in the OS * UI font since 2026-08-03 while tokens.css said Inter. They are the reason the * landing read as two sites even on pages that shared a palette. * * index.html does NOT link this sheet — it carries its own layout (1180px * .wrap, the diagram, the section grid) and takes fonts.css + tokens.css only. * The type ramp, surfaces, nav and footer below are kept identical to index's * by using the same tokens, not by duplicating values. * * samples.html is OUT OF SCOPE (separate operator decision) and is unchanged. * ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ── THE FRAME ───────────────────────────────────────────────────────────── * The hero's .page frame, applied site-wide: a max-width panel on --panel with * hairline sides, floating on --off-white. Before this sprint the frame stopped * dead at the first section below the hero, which is what made the landing look * like two documents glued together. It now runs the full height of every page. * * --off-white survives as the margin OUTSIDE the frame, not as a page surface. * On a viewport narrower than the frame there is no margin and the whole * screen is --panel, which is correct: the frame is a desktop affordance. */ html { background: var(--off-white); scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--fs-body); font-weight: var(--fw-regular); background: var(--panel); color: var(--charcoal); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* iOS inflates text in narrow columns unless this is pinned. */ -webkit-text-size-adjust: 100%; max-width: 1600px; margin: 0 auto; border-left: var(--hairline); border-right: var(--hairline); min-height: 100vh; } /* ── NAV — one nav, ten pages ────────────────────────────────────────────── * Adopted from index.html's hero nav. It replaces TWO different navs: * Group A had a FIXED nav with an eye-icon SVG and a Playfair "Argus" * Group B had bare green text links and no chrome at all * The fixed positioning goes with it — .container's 140px top padding existed * only to clear it, and is now 64px. A fixed bar on a 760px reading column * spends vertical space a legal page does not have. */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); border-bottom: var(--hairline); } .nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; } .nav-mark { width: 8px; height: 8px; background: var(--green-dark); display: inline-block; flex: 0 0 auto; } .nav-word { font-size: 13px; font-weight: var(--fw-semibold); /* 0.28em, not the 0.2em of --ls-label. See index.html's note at .nav-word: this is an identity decision. The wordmark was Playfair 900 24px on these five pages; the tracking is what replaces the serif's presence. Restoring a serif here reopens a decision rather than fixing an oversight. */ letter-spacing: 0.28em; color: var(--charcoal); } .nav-links { display: flex; align-items: center; gap: 32px; } /* :not(.btn-signin) is LOAD-BEARING — sprint landing-ctagreen, 2026-08-28. * `.nav-links a` is specificity (0,1,1); `.btn-signin` is (0,1,0). The broader * selector therefore won the `color` declaration regardless of file order, and * the Telegram control rendered --slate (#4A4A46) on its own dark fill: * 1.96:1, against a 4.5:1 AA floor, on every page. It was invisible and had * been since the nav was unified. * * Narrowed rather than out-shouted with a louder override, which is the same * repair `.alert-line span:last-child:not(.badge)` got for the identical * mistake: the rule is scoped to what it is FOR — the plain text links — so a * future control dropped into this nav inherits the fix instead of re-breaking. * * This is not cosmetic ordering. Repainting the button green WITHOUT this * change would have left slate text on #2D5A3D = 1.12:1, worse than the bug * it was meant to fix. */ .nav-links a:not(.btn-signin) { font-size: 14px; color: var(--slate); text-decoration: none; } .nav-links a:not(.btn-signin):hover { color: var(--charcoal); } /* ── THE FILLED BUTTON — one treatment, one declaration ─────────────────── * Sprint landing-ctagreen, 2026-08-28. Was TWO declarations that disagreed: * `.btn-signin` filled --charcoal (hover #2a2e37) and `.cta` filled * --green-dark (hover a hardcoded #234a30). Same shape, same padding scale, * same radius, two different colours — so the nav control did not read as a * CTA and the two could drift further apart on any edit. * * Now one block. Both class names are kept because both are already in the * markup of eleven pages; consolidating the STYLE does not require renaming * anything, and a rename would have touched every page for no visual gain. * * Both are , never