/* ============================================================================ ufo-olp-vard.css — Utility Forecaster ORDER LANDING PAGE ---------------------------------------------------------------------------- Design lineage: oto-ufo-3yr-upgrade-varf (Andrew, July 2026). Same palette, same letter architecture, same masked-panorama hero. Rewritten for an OLP rather than an upgrade page, and scoped to #ufo-plp-map so nothing leaks. ONE DELIBERATE DIVERGENCE FROM THE SOURCE SYSTEM The upgrade page carries this rule: #uf-upgrade-page, #uf-upgrade-page * { font-family: Geist ... !important } ...which silently overrides its own `.display { font-family: 'Playfair Display' }`. The result is that its headline renders in sans even though the stylesheet's own comment says "Playfair Display + Geist body". Playfair loads and is never used. Here the intent is implemented instead of overridden: PLAYFAIR DISPLAY for display type, GEIST for body and UI. No universal !important — headings simply declare their own family and win on specificity, the normal way. FONTS: Geist and Source Serif 4 are already hosted on www2 (see the OTO's @font-face). Playfair Display is pulled from Google here for the mockup — before this ships it must be self-hosted through Andrew's font manifest, per the wordpress-operations rules. Do not ship a page that hotlinks Google Fonts. ========================================================================== */ /* Self-hosted only. Both files are in Andrew's font-manifest.json and serve from www2 with a one-year cache. No external font CDN — the wordpress-operations rules forbid it. */ @font-face { font-family: "Geist Local"; src: url("https://www2.investingdaily.com/app/uploads/fonts/geist-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("https://www2.investingdaily.com/app/uploads/fonts/sourceserif4_v14_vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.woff2") format("woff2"); font-weight: 200 900; font-display: swap; } /* Kill the browser's default body margin (8px), which otherwise shows as a white gutter down the left, right and top of the page. `body:has(#root)` is the ONLY way to reach the real from here: scope-css.mjs rewrites a bare `body {}` selector to `#ufo-plp-map`, but passes any selector already containing the root id through unscoped (scope-css.mjs:88). Copied from the approved varf page, which does exactly this — the local preview hides the bug because build.mjs hardcodes into local-preview.html only. */ body:has(#ufo-plp-map) { margin: 0; background: #f7f5f0; } #ufo-plp-map { /* ============================================================================ SCHEME B · "GRID COPPER" — chosen 2026-08-31 (Jared), over the vard-green inheritance and a blue/white alternative. Ivory ground, graphite ink, copper accent, deep teal for pull-quotes. Drawn from the page's own subject: copper is what is in the wires, and the editor is a chemical engineer. EVERY reading token clears AAA 7:1 — including the accent, which the green system's brass never did (#a8822f measured 3.05:1 and survived only as a documented brand exception). Measured on --paper #f7f5f0: --ink 14.53:1 --ink-soft 7.98:1 --brass 7.23:1 --terracotta 7.03:1 On --ink #1e2328: --paper 14.53:1 · --brass-light 7.02:1 The copper was deliberately darkened from #8a4a1c (6.26:1) to clear 7:1 rather than ship another exception. ========================================================================== */ --paper: #f7f5f0; --paper-light: #ffffff; --ink: #1e2328; --ink-deep: #111417; /* 2026-08-03: was #536556, which measured 5.34:1 on --paper — AA only, and this audience is 55+ so the bar is AAA 7:1. Lightening the ground could not fix it (even pure white leaves #536556 at 6.24:1), so the text darkened. #3a4b3d = 7.97:1. All 24 uses of this token are text. */ --ink-soft: #454c54; --brass: #7d4218; --brass-light: #dda06a; --terracotta: #275c53; --rule: rgba(30, 35, 40, .20); --brass-tint: rgba(125, 66, 24, .08); --brass-ring: rgba(221, 160, 106, .30); --paper-82: rgba(247, 245, 240, .82); --paper-45: rgba(247, 245, 240, .45); --paper-26: rgba(247, 245, 240, .26); --paper-14: rgba(247, 245, 240, .14); --foot-text: #cbc5b8; --shadow: rgba(30, 35, 40, .16); --sans: "Geist Local", "Helvetica Neue", Arial, sans-serif; /* SOURCE SERIF 4 IS THE DISPLAY FACE, because it is what we can actually serve — it is in font-manifest.json and loads from www2. Playfair Display is deliberately NOT listed. Listing it would render Playfair on any machine that happens to have it installed locally (most designers' do), so previews would show a face no visitor will ever see. To adopt Playfair: have Andrew add it to the manifest, add its @font-face above, and put it first on this line. */ --display: "Source Serif 4", Georgia, "Times New Roman", serif; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; } #ufo-plp-map *, #ufo-plp-map *::before, #ufo-plp-map *::after { box-sizing: border-box; } #ufo-plp-map p { margin: 0 0 1.05em; } #ufo-plp-map strong { font-weight: 600; color: var(--ink-deep); } /* Display type — Playfair, and nothing overrides it. */ #ufo-plp-map .display, #ufo-plp-map h1, #ufo-plp-map h2 { font-family: var(--display); font-weight: 700; color: var(--ink-deep); letter-spacing: -0.015em; margin: 0; } /* ---------- shared column ---------- */ #ufo-plp-map .spine { width: min(720px, calc(100% - 44px)); margin-inline: auto; } /* ---------- P0 · hero ---------- */ #ufo-plp-map .hero { position: relative; overflow: hidden; /* 46px here plus 50px on .letter left ~96px of dead band between the deck and the byline. That space existed because the headshot was going to sit in it; the portrait now lives in the byline itself, so the gap was doing nothing. Tightened both sides so the lockup and the letter read as one opening. */ padding: 0 0 16px; background: linear-gradient(180deg, var(--paper-light), var(--paper) 62%); } #ufo-plp-map .pano { position: absolute; top: 96px; left: -8%; width: 62%; height: 300px; object-fit: contain; opacity: .40; pointer-events: none; -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.7) 38%, transparent 86%); mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.7) 38%, transparent 86%); } #ufo-plp-map .pano-right { left: auto; right: -8%; object-position: right center; -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.7) 38%, transparent 86%); mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,.7) 38%, transparent 86%); } #ufo-plp-map .entry { position: relative; z-index: 2; width: min(880px, calc(100% - 44px)); margin: 0 auto; padding: 52px 0 0; text-align: center; } #ufo-plp-map .eyebrow { font-family: var(--sans); font-size: clamp(12.5px, 1.15vw, 14px); font-weight: 700; letter-spacing: .17em; text-transform: uppercase; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; margin: 0 auto 22px; text-wrap: balance; } #ufo-plp-map .entry h1 { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; max-width: 19ch; margin: 0 auto; text-wrap: balance; } /* 8. THE DISPLAY ACCENT IS COPPER, NOT TEAL (Jared, 2026-08-31). "Dividend Map" and the subhead under it are the two places the scheme's accent should actually be visible, and they were rendering in --terracotta (the deep teal). Moved to --brass. Measured 7.23:1 on --paper, so it clears AAA even though display type would only need 4.5:1. */ /* 10. THE YIELD LINE IS PART OF THE HEADLINE (Jared, 2026-08-31). The rewrite doc treats "The Incredible Dividend Map…" and "Where Stocks Yield …% a Year" as ONE lockup, not a headline plus a standalone pull-quote. Set as a block inside the h1 so it inherits the centring and the balance, at roughly 40% of the headline size — subordinate, but part of the same object rather than a separate element after it. */ #ufo-plp-map .entry h1 .h1-sub { display: block; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.25; letter-spacing: 0; color: var(--brass); margin: 14px auto 0; /* 26ch broke it mid-phrase — "Where Stocks Yield / Up to 48.6% a Year". At desktop the line is ~37 characters and fits on one; the break is authored at phones instead, before "Up to", which is where the sense divides. */ max-width: 44ch; text-wrap: balance; } @media (max-width: 560px) { #ufo-plp-map .entry h1 .h1-sub { max-width: 18ch; } } /* 11. CREDENTIALS ON THE FROM-THE-DESK LINE, bullet-separated, as the doc has them. Replaces the standalone bio block and its two rules. ⚠️ Two of the doc's four bullets could not travel: "36 years in energy" belongs to the publication (Robert has led it since 2018), and the Congressional-testimony claim appears in neither his published bio nor his own 2018 letter to subscribers. Swapped for two that are on the register. */ /* 12. THE DESK BLOCK — circular portrait beside the From-the-Desk byline. New component; no portrait existed in the shipped system. ⚠️ THE DIAMETER IS AN EXPLICIT VALUE, DELIBERATELY, AND HERE IS WHY. The obvious way to "match the height of the text" is to let the figure stretch to the grid row and give it aspect-ratio 1/1 in an `auto` column. That is circular and CSS resolves it by inflating the image: the column width depends on the figure width, which depends on its height, which depends on the row height, which depends on the column. Tried it; the circle rendered several hundred pixels across and sat on top of the copy. So the diameter is set to the measured height of the byline block — ~84px at desktop (12.5px eyebrow + italic role line + a two-line credential run). If the credential line changes length enough to add or drop a line, re-measure and update --desk-d. One number, one place. */ #ufo-plp-map .desk { --desk-d: 84px; display: grid; grid-template-columns: var(--desk-d) 1fr; gap: 0 18px; align-items: center; margin: 0 0 6px; } #ufo-plp-map .desk-portrait { margin: 0; width: var(--desk-d); height: var(--desk-d); overflow: hidden; border-radius: 50%; background: var(--paper-light); } #ufo-plp-map .desk-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; /* 1429x2560 source: a square crop keeps ~56% of the frame. Held high so his face centres in the circle and the towers survive at the edges. */ object-position: center 18%; } /* Phones wrap the credential run to four lines, so a text-matched circle would eat a third of the width. Capped instead. */ @media (max-width: 560px) { #ufo-plp-map .desk { --desk-d: 68px; gap: 0 14px; align-items: start; } #ufo-plp-map .desk-portrait { margin-top: 2px; } } #ufo-plp-map .masthead .creds { display: block; font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin-top: 7px; } #ufo-plp-map .entry h1 em { font-style: italic; color: var(--brass); } /* 9. THE DECK — fourth element of the hero lockup (Jared, 2026-08-31). The rewrite doc stacks eyebrow → headline → subhead → deck, all four before the byline. The build had the deck orphaned below the From-the-Desk line, which broke the lockup. Sized under .urgency so the hierarchy still steps down: headline → subhead (italic display) → deck (sans, reading weight). */ #ufo-plp-map .entry .deck { font-family: var(--sans); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; margin: 24px auto 0; text-wrap: balance; } #ufo-plp-map .urgency { font-family: var(--display); font-style: italic; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--brass); max-width: 46ch; margin: 22px auto 0; } /* ---------- P1 · the letter ---------- */ #ufo-plp-map .letter { padding: 20px 0 10px; } #ufo-plp-map .masthead { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--ink-soft); margin: 0; } #ufo-plp-map .masthead .role-line { display: block; font-style: italic; font-weight: 500; letter-spacing: .09em; text-transform: none; font-size: 13px; margin-top: 3px; } #ufo-plp-map .headrule { position: relative; height: 1px; margin: 12px 0 30px; background: linear-gradient(90deg, var(--brass), var(--ink) 20%, var(--rule)); } #ufo-plp-map .salutation { font-weight: 600; } #ufo-plp-map .beat { font-family: var(--display); font-size: clamp(26px, 2.7vw, 34px); line-height: 1.15; color: var(--ink-deep); margin: 6px 0 26px; } #ufo-plp-map .turn { font-family: var(--display); font-style: italic; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.3; color: var(--terracotta); margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); } /* ---------- P2 · signed-contract proof ---------- */ #ufo-plp-map .proofs { padding: 44px 0 8px; } #ufo-plp-map .leadin { font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.22; color: var(--ink-deep); margin: 0 0 26px; } #ufo-plp-map .deal { padding: 0 0 0 20px; border-left: 2px solid var(--brass); margin: 0 0 24px; } #ufo-plp-map .deal .who { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 7px; } #ufo-plp-map .deal p:last-child { margin: 0; } #ufo-plp-map .deal .when { font-style: italic; color: var(--ink-soft); } #ufo-plp-map .verdict { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; color: var(--ink-deep); margin: 30px 0 0; } /* ---------- stat band ---------- */ #ufo-plp-map .band { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 34px; margin: 34px 0 0; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } #ufo-plp-map .band .cell { flex: 1 1 165px; } #ufo-plp-map .band .lab { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; color: var(--brass); margin: 0 0 7px; } #ufo-plp-map .band .val { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink-deep); } #ufo-plp-map .band .cap { font-family: var(--sans); font-size: 13.5px; line-height: 1.42; color: var(--ink-soft); margin: 7px 0 0; } #ufo-plp-map .sourcing { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 20px 0 46px; } /* ---------- mobile ---------- */ @media (max-width: 700px) { #ufo-plp-map { font-size: 17.5px; } #ufo-plp-map .pano, #ufo-plp-map .pano-right { display: none; } #ufo-plp-map .mobile-pano { display: block; width: 100%; height: 190px; object-fit: cover; opacity: .5; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); mask-image: linear-gradient(to bottom, #000 55%, transparent 98%); } #ufo-plp-map .entry { padding-top: 26px; } #ufo-plp-map .band { gap: 20px; } #ufo-plp-map .band .cell { flex: 1 1 100%; } } @media (min-width: 701px) { #ufo-plp-map .mobile-pano { display: none; } } /* ========================================================================== FULL PAGE — sections beyond the hero/letter/proof Added 2026-07-31. Same tokens, same type system: Playfair for display, Geist for body and UI. Nothing here uses !important. ========================================================================== */ /* ---------- section scaffolding ---------- */ #ufo-plp-map .sec { padding: 36px 0; } #ufo-plp-map .sec-alt { background: var(--paper-light); } #ufo-plp-map .sec-kicker { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; color: var(--brass); margin: 0 0 12px; } #ufo-plp-map .sec-h2 { font-size: clamp(27px, 3.1vw, 39px); line-height: 1.1; max-width: none; margin: 0 0 18px; } #ufo-plp-map .sec-lede { font-size: 19px; line-height: 1.58; color: var(--ink-soft); max-width: 62ch; margin: 0 0 30px; } /* ---------- author strip ---------- */ #ufo-plp-map .author { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 14px; color: var(--ink-soft); } #ufo-plp-map .author .nm { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink-deep); } /* ---------- three forces ---------- */ #ufo-plp-map .forces { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } #ufo-plp-map .force { padding-top: 16px; border-top: 2px solid var(--brass); } #ufo-plp-map .force .n { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--brass); margin: 0 0 8px; } #ufo-plp-map .force h3 { font-family: var(--display); font-size: 23px; line-height: 1.15; margin: 0 0 10px; } #ufo-plp-map .force p { font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; } #ufo-plp-map .force .stat { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--terracotta); } /* ---------- comparison table ---------- */ #ufo-plp-map .tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; } #ufo-plp-map .tbl th { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding: 0 10px 12px; border-bottom: 2px solid var(--rule); } #ufo-plp-map .tbl th.us { color: var(--ink-deep); } #ufo-plp-map .tbl td { padding: 15px 10px; text-align: center; border-bottom: 1px solid var(--rule); } #ufo-plp-map .tbl td.lab { text-align: left; font-weight: 600; color: var(--ink-deep); } #ufo-plp-map .tbl td.us { background: var(--brass-tint); font-weight: 600; color: var(--ink-deep); } #ufo-plp-map .tbl .gl { display: block; font-size: 15px; margin-bottom: 3px; } #ufo-plp-map .tbl .yes { color: #2f6b45; } #ufo-plp-map .tbl .no { color: var(--terracotta); } #ufo-plp-map .tbl .mid { color: var(--brass); } /* ---------- dark data panel (performance chart) ---------- */ #ufo-plp-map .panel { margin: 34px 0 0; padding: 26px 24px 22px; background: var(--ink); border-radius: 3px; color: var(--paper); } #ufo-plp-map .panel .pk { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--brass-light); margin: 0 0 5px; } #ufo-plp-map .panel .ph { font-family: var(--display); font-size: 20px; line-height: 1.35; color: var(--paper); margin: 0 0 18px; max-width: 58ch; } #ufo-plp-map .panel .note { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--brass); background: rgba(216,194,138,.10); font-size: 15.5px; line-height: 1.5; } /* ---------- portfolio rows ---------- */ #ufo-plp-map .prow { display: grid; gap: 6px 22px; align-items: start; grid-template-columns: 42px 1fr auto; padding: 18px 0; border-bottom: 1px solid var(--rule); } #ufo-plp-map .prow .pn { font-family: var(--display); font-size: 20px; color: var(--brass); } #ufo-plp-map .prow .pc { font-family: var(--display); font-size: 20px; color: var(--ink-deep); margin: 0 0 5px; } #ufo-plp-map .prow .pt { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; } #ufo-plp-map .prow .pm { text-align: right; font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; } #ufo-plp-map .prow .pm b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink-deep); } /* ---------- demand / supply split ---------- */ #ufo-plp-map .split { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); } #ufo-plp-map .side { padding: 22px; border: 1px solid var(--rule); border-radius: 3px; } #ufo-plp-map .side.good { border-color: var(--brass); background: var(--brass-tint); } #ufo-plp-map .side .k { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; } #ufo-plp-map .side h3 { font-family: var(--display); font-size: 24px; margin: 0 0 10px; } #ufo-plp-map .side p { font-size: 16.5px; line-height: 1.52; margin: 0; color: var(--ink-soft); } /* ---------- yield-on-cost ladder ---------- */ #ufo-plp-map .ladder { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } #ufo-plp-map .rung { padding: 18px 20px; background: var(--paper-light); border-top: 3px solid var(--brass); } #ufo-plp-map .rung .yr { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-soft); } #ufo-plp-map .rung .big { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--ink-deep); margin: 6px 0 2px; } #ufo-plp-map .rung .sm { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); } /* ---------- traits / deliverables (numbered list) ---------- */ #ufo-plp-map .items { counter-reset: it; } #ufo-plp-map .item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); } #ufo-plp-map .item::before { counter-increment: it; content: counter(it, decimal-leading-zero); font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--brass); padding-top: 4px; } #ufo-plp-map .item h3 { font-family: var(--display); font-size: 21px; margin: 0 0 6px; } #ufo-plp-map .item p { font-size: 16.5px; line-height: 1.52; color: var(--ink-soft); margin: 0; } /* ---------- bonus reports ---------- */ /* Four items on an ~800px spine: auto-fit gave 3 columns + an orphan on row 2. Fixed 2x2 keeps the set balanced and lets the covers stay legible. */ #ufo-plp-map .reports { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { #ufo-plp-map .reports { grid-template-columns: 1fr; } } #ufo-plp-map .rep { padding: 20px; background: var(--ink); color: var(--paper); border-radius: 3px; } /* Bonus covers — Direction B "Brass Seal Bulletin", approved 2026-08-03. Masters + regeneration: projects/ufo-refresh-cro/03-build/build-covers-b.py The cover is a light object on the dark card, so it gets a warm-tinted shadow-lift rather than a border — anatomy, not an outline. */ #ufo-plp-map .rep-cover { display: block; width: 100%; max-width: 250px; height: auto; aspect-ratio: 3 / 4; margin: 0 auto 18px; border-radius: 2px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.42), 0 0 0 1px var(--brass-ring); } #ufo-plp-map .rep .no { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-light); } #ufo-plp-map .rep h3 { font-family: var(--display); font-size: 19px; line-height: 1.25; color: var(--paper); margin: 8px 0 8px; } /* .82 not .72 — at 72% this measured 6.46:1 on --ink, just under AAA. Now 7.88:1. */ #ufo-plp-map .rep p { font-size: 14.5px; line-height: 1.45; color: var(--paper-82); margin: 0; } /* ---------- testimonials ---------- */ #ufo-plp-map .quotes { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); margin: 30px 0 0; } #ufo-plp-map .q .stars { color: var(--brass); letter-spacing: .13em; font-size: 15px; margin-bottom: 8px; } /* These read as buried on the page — light italic serif on an already-light ground, floating with nothing to sit against. Each quote now gets a brass rule to hang from, roman rather than italic at a size that competes with body copy, and the attribution gains weight. Italic at 17.5px measured like 15px. */ #ufo-plp-map .q { border-top: 2px solid var(--brass); padding-top: 16px; } #ufo-plp-map .q blockquote { font-family: var(--display); font-size: 19px; line-height: 1.42; font-style: normal; color: var(--ink-deep); margin: 0 0 12px; } #ufo-plp-map .q figcaption { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); } #ufo-plp-map .q figcaption b { color: var(--ink-deep); } #ufo-plp-map .hero-quote { font-family: var(--display); font-size: clamp(23px, 2.5vw, 31px); line-height: 1.3; font-style: italic; color: var(--ink-deep); text-align: center; max-width: 30ch; margin: 0 auto 12px; } /* ---------- CTA band ---------- */ #ufo-plp-map .cta { background: var(--ink); color: var(--paper); padding: 34px 0; } #ufo-plp-map .cta .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } #ufo-plp-map .cta p { font-family: var(--display); font-size: 21px; line-height: 1.35; margin: 0; max-width: 46ch; } /* 7. THE BUTTON HAD TO FLIP TO --brass-light UNDER THE COPPER SCHEME. Under the green system --brass was a light gold (#a8822f), so a dark label on it worked. Copper's --brass is a DARK #7d4218, and every .btn sits inside the dark .cta band — so the old pairing failed twice over: label --ink-deep on --brass ......... 2.34:1 (needs 7:1) button vs its own band .............. 2.01:1 (needs 3:1 for a non-text mark — it stopped reading as a button at all) --brass-light #dda06a fixes both: 8.19:1 for the label, 7.02:1 against the band. --brass stays dark because it is correct for eyebrows and rules on the light grounds (7.23:1 there). Same token, two jobs, two values. */ #ufo-plp-map .btn { display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: 14px 26px; border-radius: 2px; background: var(--brass-light); color: var(--ink-deep); white-space: nowrap; } #ufo-plp-map .btn-ghost { background: transparent; color: var(--paper); border: 1px solid var(--paper-45); } /* ---------- pricing ---------- */ #ufo-plp-map .plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); margin: 28px 0 0; } #ufo-plp-map .plan { padding: 26px 24px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-light); } #ufo-plp-map .plan.best { border: 2px solid var(--brass); position: relative; } #ufo-plp-map .plan .flag { /* Was --ink-deep on --brass: 2.1:1, effectively unreadable. Paper on brass measures 8.4:1, which clears AAA with room to spare. */ position: absolute; top: -12px; left: 22px; background: var(--brass); color: var(--paper-light); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; } #ufo-plp-map .plan .term { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } #ufo-plp-map .plan .price { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--ink-deep); margin: 8px 0 4px; } #ufo-plp-map .plan .per { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; } #ufo-plp-map .plan ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; } #ufo-plp-map .plan li { padding: 5px 0 5px 22px; position: relative; color: var(--ink-soft); } #ufo-plp-map .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--brass); font-weight: 700; } #ufo-plp-map .orderbox { margin: 30px 0 0; padding: 26px 24px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-light); } #ufo-plp-map .orderbox h3 { font-family: var(--display); font-size: 23px; margin: 0 0 4px; } #ufo-plp-map .orderbox .sub { font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; } #ufo-plp-map .guarantee { margin: 26px 0 0; padding: 22px; border: 1px dashed var(--brass); border-radius: 3px; background: var(--brass-tint); } #ufo-plp-map .guarantee h3 { font-family: var(--display); font-size: 21px; margin: 0 0 8px; } #ufo-plp-map .guarantee p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; } /* ---------- signoff ---------- */ #ufo-plp-map .sign { font-size: 18px; line-height: 1.6; } #ufo-plp-map .sign .sig { font-family: var(--display); font-size: 25px; color: var(--ink-deep); margin: 20px 0 2px; } #ufo-plp-map .sign .role { font-family: var(--sans); font-size: 13.5px; font-style: italic; color: var(--ink-soft); } #ufo-plp-map .sign .ps { margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: 16.5px; color: var(--ink-soft); } #ufo-plp-map .sign .ps b { color: var(--ink-deep); } @media (max-width: 700px) { #ufo-plp-map .sec { padding: 28px 0; } #ufo-plp-map .prow { grid-template-columns: 34px 1fr; } #ufo-plp-map .prow .pm { text-align: left; grid-column: 2; margin-top: 6px; } #ufo-plp-map .cta .inner { flex-direction: column; align-items: flex-start; } #ufo-plp-map .tbl { font-size: 15px; } #ufo-plp-map .tbl th, #ufo-plp-map .tbl td { padding: 10px 5px; } } /* A struck-through exclusion in the regular-rate plan — the absence of the bonus reports is what the $49 rate is selling against, so it should read as a gap. */ /* "Not included" lines are real content — a buyer needs to read what the cheaper plan lacks. Fading them to 62% put them at 2.53:1, failing even AA. De-emphasis now comes from the ✕ marker rather than from colour, the same way CLAUDE.md lets struck prices keep a light grey because the strike itself carries the signal. */ #ufo-plp-map .plan li.off { color: var(--ink-soft); } #ufo-plp-map .plan li.off::before { content: "✕"; color: var(--terracotta); font-weight: 400; } /* ========================================================================== STANDARD LANDING-PAGE FOOTER Spec: projects/memorial-day-sale-2026-05/01-planning/footer-standard.md The spec's own HTML uses .olp-foot on a white-on-navy band with inline styles; this page has no navy and no inline-style convention, so the same four blocks are rendered here in the page's own tokens (--ink-deep ground, paper-toned type) with the styling in CSS where the rest of the page keeps it. Content, link set and block order are unchanged. TYPE SIZES DELIBERATELY LARGER THAN THE SPEC. The template calls for 11–12px; CLAUDE.md's 55+ accessibility rules set a 14px floor for disclaimers and require AAA 7:1. Everything here is 14px+ and measured against --ink-deep #111417: --paper 16.9:1, --foot-text 10.8:1, --brass-light 8.2:1. Centered per Jared's 2026-05-30 correction (links stacked when left-aligned in WP). ========================================================================== */ #ufo-plp-map .olp-foot { background: var(--ink-deep); padding: 44px 0 40px; } #ufo-plp-map .foot-inner { text-align: center; } #ufo-plp-map .foot-brand { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--paper-14); } #ufo-plp-map .foot-brand .brand-small { font-family: var(--display); font-size: 19px; font-weight: 700; font-style: italic; color: var(--paper); margin-bottom: 6px; } #ufo-plp-map .foot-brand .tagline { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: .03em; color: var(--foot-text); margin: 0; } #ufo-plp-map .foot-legal { font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--foot-text); text-align: left; margin: 0 0 16px; } #ufo-plp-map .foot-legal strong { color: var(--paper); font-weight: 600; } /* Italic body needs +1px per the 55+ rules — the publication names are set in italic inside an otherwise 14px paragraph. */ #ufo-plp-map .foot-legal em { font-size: 15px; } #ufo-plp-map .foot-bottom { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--paper-14); } #ufo-plp-map .foot-links { font-family: var(--sans); font-size: 14px; line-height: 2; color: var(--foot-text); margin: 0 0 10px; } #ufo-plp-map .foot-copy { font-family: var(--sans); font-size: 14px; line-height: 1.6; letter-spacing: .02em; color: var(--foot-text); margin: 0; } #ufo-plp-map .olp-foot a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 2px; } #ufo-plp-map .olp-foot a:hover { color: var(--paper); } @media (max-width: 700px) { #ufo-plp-map .olp-foot { padding: 34px 0 32px; } } /* ============================================================================ DIVERGENCES FROM THE vard-green BASE — plp-ufo-map-0826-1y Four fixes, three of them for bugs the base carries. Documented so Andrew can see exactly what changed and why, and so nothing here is mistaken for drift. ========================================================================== */ /* 1. DARK-GROUND WAS INVISIBLE. The base sets `strong { color: var(--ink-deep) }` globally (line ~92) and then patches ONE case — `.foot-legal strong { color: var(--paper) }`. Any other bold inside a dark surface renders near-black on near-black. It hit the 12.5% figure inside .panel here, at roughly 1.2:1. This is a latent bug in the base system, not something this page created — worth raising with Andrew rather than only patching downstream. Fixed generally: on an ink ground, bold inherits the surface's colour. */ #ufo-plp-map .panel strong, #ufo-plp-map .cta strong, #ufo-plp-map .olp-foot strong { color: inherit; } /* 2. .urgency HAD NO BOTTOM MARGIN. `margin: 22px auto 0` is correct in the hero, where it is the last element. Used mid-letter it collides with the paragraph beneath it. Adding a bottom margin to the base class would change the hero, so this is a modifier. */ /* 13. .urgency.inline carries the letter's emphasis beats, so it needs weight as well as colour — italic display at reading size was too close to the body around it to register as a stop. */ #ufo-plp-map .urgency.inline { margin: 30px auto 30px; max-width: 44ch; font-weight: 700; font-size: clamp(20px, 2vw, 25px); line-height: 1.3; } /* 14. The two capex facts carry the section, so they are lifted out of the even run of items: copper rule, tinted ground, and the figure in display size. The queue item stays plain — three emphasised items would be no emphasis at all. */ #ufo-plp-map .item.spend { background: var(--brass-tint); border-left: 3px solid var(--brass); padding: 16px 18px; border-radius: 2px; } #ufo-plp-map .item.spend h3 { font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; color: var(--ink-deep); } /* 15. .panel gains a body line under its lead. */ #ufo-plp-map .panel .pb { font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--paper-82); margin: 12px 0 0; max-width: 58ch; } /* 3. .sourcing WAS 13.5px — below the 14px disclaimer floor for a 55+ audience. */ #ufo-plp-map .sourcing { font-size: 14px; } /* 4. NEW COMPONENT — .paydates, the ex-dividend calendar. The first build used .band for this. .band is a STAT strip: `.val` is 32px display bold, sized for "41" or "$49". City strings wrapped mid-phrase and the last row broke to its own full-width line, which read as broken rather than deliberate. A component sized to a number should not be asked to hold a sentence — so this is its own thing. Anatomy: hairline-ruled rows, the date as a brass eyebrow in the left rail, the places as readable copy at body size. The nearest date carries a brass left-edge and a slightly warmer ground — one emphasis, tied to content (this is the next one), not decoration. */ #ufo-plp-map .paydates { margin: 32px 0 34px; border-top: 1px solid var(--rule); } #ufo-plp-map .paydates .row { display: grid; grid-template-columns: 150px 1fr; gap: 4px 24px; align-items: baseline; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--rule); } #ufo-plp-map .paydates .row.next { background: var(--brass-tint); border-left: 3px solid var(--brass); padding-left: 15px; } #ufo-plp-map .paydates .when { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0; } #ufo-plp-map .paydates .where { font-family: var(--sans); font-size: 17px; line-height: 1.45; color: var(--ink-soft); margin: 0; } #ufo-plp-map .paydates .where em { font-style: normal; font-weight: 600; color: var(--ink-deep); } @media (max-width: 620px) { #ufo-plp-map .paydates .row { grid-template-columns: 1fr; padding-right: 0; } #ufo-plp-map .paydates .when { margin-bottom: 3px; } } /* 5. NEW COMPONENT — .dark, the earned dark content section. First build reused .cta for this. .cta is a BAND: a one-line pitch and a button, and it carries `.cta p { margin: 0 }`, which is correct there and catastrophic for a section of running prose — every paragraph butted against the next with no gap. Same failure as using .band for a date list: a component built for one line asked to hold twelve. This is the page's single earned dark moment (the guidelines allow one, as a deliberate bounded section, never as a theme). Cream on ink, the stat strip in brass-light, one display pull-quote to close it. */ #ufo-plp-map .dark { background: var(--ink); color: var(--paper); padding: 62px 0 58px; } #ufo-plp-map .dark .sec-kicker { color: var(--brass-light); } #ufo-plp-map .dark .sec-h2 { color: var(--paper); } #ufo-plp-map .dark p { font-size: 19px; line-height: 1.6; color: var(--paper); max-width: 62ch; margin: 0 0 20px; } #ufo-plp-map .dark strong { color: var(--brass-light); } #ufo-plp-map .dark .band { border-top-color: var(--paper-26); border-bottom-color: var(--paper-26); } #ufo-plp-map .dark .band .lab { color: var(--brass-light); } #ufo-plp-map .dark .band .val { color: var(--paper); } #ufo-plp-map .dark .closer { font-family: var(--display); font-size: clamp(22px, 2.4vw, 29px); line-height: 1.34; color: var(--paper); max-width: 46ch; margin: 34px 0 0; padding-top: 30px; border-top: 1px solid var(--paper-26); } /* 6. THE FOUR PORTFOLIO STATS ARE A LEDGER, NOT A LADDER. Four stacked cards on a 720px spine left ~165px per column, so the captions wrapped into word-columns and the block read top-down. These four figures are a set, not a sequence (unlike the 10/20/30-year yield ladder, which stays as .ladder). Same bones as .paydates: number in a left rail, the sentence across the remaining width at reading size. */ #ufo-plp-map .ledger { margin: 28px 0 34px; border-top: 3px solid var(--brass); } #ufo-plp-map .ledger .row { display: grid; grid-template-columns: 7.25rem 1fr; gap: 2px 28px; align-items: start; padding: 18px 0 17px; border-bottom: 1px solid var(--rule); } #ufo-plp-map .ledger .num { font-family: var(--display); font-size: clamp(32px, 4.2vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink-deep); margin: 0; padding-top: 2px; } #ufo-plp-map .ledger .copy { min-width: 0; } #ufo-plp-map .ledger .lab { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 5px; line-height: 1.4; } #ufo-plp-map .ledger .cap { font-family: var(--sans); font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 46ch; } @media (max-width: 520px) { #ufo-plp-map .ledger .row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 15px; } #ufo-plp-map .ledger .num { padding-top: 0; } } /* 16. .panel.thesis — the supercycle close of section 1. The other two .panel uses are filing quotes (a 12.5% raise; a dividend cut) and stay as flat ink plates. This one is the thesis beat, so it earns a surface: copper lattice over ink, a warm bloom from the top-left, brass edge. CSS only — no hosted image, and not a second full-bleed .dark (the page is allowed one of those). Type sits above the texture; cream on ink still clears 7:1 with the overlay this faint. */ #ufo-plp-map .panel.thesis { position: relative; isolation: isolate; overflow: hidden; padding: 32px 28px 28px; border-radius: 0; border-left: 3px solid var(--brass); background-color: var(--ink); background-image: linear-gradient( 115deg, rgba(17, 20, 23, .55) 0%, rgba(17, 20, 23, .28) 42%, rgba(17, 20, 23, .12) 100% ), repeating-linear-gradient( 90deg, transparent 0, transparent 19px, rgba(221, 160, 106, .14) 19px, rgba(221, 160, 106, .14) 20px ), repeating-linear-gradient( 0deg, transparent 0, transparent 19px, rgba(221, 160, 106, .14) 19px, rgba(221, 160, 106, .14) 20px ), radial-gradient( 90% 70% at 0% 0%, rgba(125, 66, 24, .55), transparent 62% ); } #ufo-plp-map .panel.thesis .ph, #ufo-plp-map .panel.thesis .pb { position: relative; } #ufo-plp-map .panel.thesis .ph { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.32; margin: 0 0 14px; max-width: 28ch; } #ufo-plp-map .panel.thesis .pb { color: var(--paper); max-width: 46ch; } /* 17. SECTION 3 FIGURES — cash-flow clustered bars + GDP-share bars. HTML/CSS, not SVG: SVG type shrinks below the 14px floor at 390px. Copper = capex, graphite = operating cash flow. Last quarter is tinted because that is the crossing the copy is pointing at. GDP bars are scaled 0–2.5% so 0.4% and 2.2% keep their true ratio (~5.6×). */ #ufo-plp-map .fig { margin: 28px 0 32px; } #ufo-plp-map .fig p { margin: 0; } #ufo-plp-map .fig-k { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; } #ufo-plp-map .fig-h { font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink-deep); margin: 0 0 18px; max-width: 46ch; } #ufo-plp-map .cash-pair { display: grid; gap: 28px; } #ufo-plp-map .co-name { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink-deep); margin: 0 0 10px; } #ufo-plp-map .plot { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: start; } #ufo-plp-map .plot .y { display: flex; flex-direction: column; justify-content: space-between; height: 168px; font-family: var(--sans); font-size: 13px; line-height: 1; color: var(--ink-soft); text-align: right; } #ufo-plp-map .bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); } #ufo-plp-map .bars li { display: flex; flex-direction: column; align-items: center; } #ufo-plp-map .col { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 168px; border-bottom: 1px solid var(--ink); background-image: repeating-linear-gradient( to top, var(--rule) 0 1px, transparent 1px 42px ); } #ufo-plp-map .bars li.cross .col { background-color: var(--brass-tint); } #ufo-plp-map .b { display: block; width: 14px; min-height: 2px; } #ufo-plp-map .b.ocf { background: var(--ink); } #ufo-plp-map .b.cap { background: var(--brass); } #ufo-plp-map .ql { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; text-align: center; line-height: 1.2; } #ufo-plp-map .bars li.cross .ql { color: var(--brass); font-weight: 700; } #ufo-plp-map .key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; } #ufo-plp-map .swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; } #ufo-plp-map .swatch.ocf { background: var(--ink); } #ufo-plp-map .swatch.cap { background: var(--brass); } #ufo-plp-map .fig-src { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; max-width: 62ch; } #ufo-plp-map .gdp { margin: 6px 0 0; } #ufo-plp-map .gdp-row { margin: 0 0 18px; } #ufo-plp-map .gdp-row .lab { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 4px; } #ufo-plp-map .gdp-row .pct { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink-deep); margin: 0 0 8px; } #ufo-plp-map .gdp .track { height: 22px; background: rgba(30, 35, 40, .08); } #ufo-plp-map .gdp .fill { display: block; height: 100%; } #ufo-plp-map .gdp .fill.ink { background: var(--ink); } #ufo-plp-map .gdp .fill.brass { background: var(--brass); } @media (max-width: 520px) { #ufo-plp-map .b { width: 11px; } #ufo-plp-map .plot { grid-template-columns: 40px 1fr; gap: 6px; } #ufo-plp-map .plot .y { font-size: 12px; } } /* ========================================================================== ARTWORK — added 2026-09-04 Seventeen pieces went in at once, on a page that had carried one photograph for its whole life. Two delivery mechanisms, and the split is deliberate: .chart — the six data charts are INLINE SVG, 2-8KB each. Inlining beats uploading here: they stay crisp at any width, they cost less than a single raster, and they inherit nothing from this stylesheet (every colour is baked into the SVG) so they cannot be broken by a later cascade change. .plate — the map and the engravings are RASTER, because WP rejects SVG uploads outright ("not allowed to upload this file type") and the map alone is 337KB of path data — too heavy to inline. ========================================================================== */ #ufo-plp-map .chart { display: block; width: 100%; height: auto; } /* Charts are authored 760-1240 units wide. Below that they scale down fine, but the type inside them has a floor — so the narrowest ones scroll rather than shrink into illegibility. The container scrolls, never the page body. */ #ufo-plp-map .chart-wrap { overflow-x: auto; margin: 26px 0 0; -webkit-overflow-scrolling: touch; } #ufo-plp-map .chart-wrap > svg { min-width: 640px; } #ufo-plp-map .plate { display: block; width: 100%; height: auto; margin: 26px 0 0; } /* THE ENGRAVINGS — how they are meant to sit. These are texture, not evidence: they punctuate a long argument, they do not make one. So they are constrained to the text column rather than run full bleed (the first build let them escape the spine and they read as stock photography), cropped to a shallow band because the top third of each master is empty sky, and set off with a hairline rather than a border so they read as a printed plate rather than a card. Nothing is captioned — a caption would claim they carry information. */ #ufo-plp-map .engraving { display: block; width: 100%; height: auto; margin: 34px 0 32px; aspect-ratio: 16 / 5.5; object-fit: cover; object-position: 50% 60%; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); } #ufo-plp-map .dark .engraving { opacity: .78; border-color: var(--brass-light); } /* Robert on the well pad. 449x347 is the largest original that exists, so this is capped at 300px — 1.5x density, sharp on retina. Never widen it. */ #ufo-plp-map .field-shot { float: right; width: 300px; max-width: 42%; margin: 4px 0 18px 26px; } #ufo-plp-map .field-shot img { display: block; width: 100%; height: auto; border-radius: 2px; } #ufo-plp-map .field-shot figcaption { font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; } @media (max-width: 620px) { #ufo-plp-map .field-shot { float: none; width: 100%; max-width: 340px; margin: 18px 0 24px; } } /* Five reports, not four. The namesake takes the full spine and the other four fall into the 2x2 the grid was already built for — otherwise five items in two columns leaves an orphan on row three. */ #ufo-plp-map .reports > .rep:first-child { grid-column: 1 / -1; } @media (min-width: 561px) { /* The cover has to span every text row explicitly. Left to auto-placement the four children alternate across the two columns and the title lands UNDER the cover instead of beside it. */ #ufo-plp-map .reports > .rep:first-child { display: grid; grid-template-columns: 190px 1fr; gap: 6px 26px; align-content: center; } #ufo-plp-map .reports > .rep:first-child .rep-cover { grid-row: 1 / span 3; align-self: center; margin: 0; max-width: 190px; } #ufo-plp-map .reports > .rep:first-child > .pk, #ufo-plp-map .reports > .rep:first-child > .ph, #ufo-plp-map .reports > .rep:first-child > p { grid-column: 2; } } /* A float has to be contained by the section that owns it. The gas-field shot escaped section 9 and ran alongside section 10's heading on the first build, because nothing here established a containing block. */ #ufo-plp-map .sec > .spine::after { content: ""; display: block; clear: both; } /* ========================================================================== OFFER STACK — section 18, replacing the dark .rep cards (Jared, 2026-09-04: "does not look good with the black"). Five ink-filled cards in a row read as a wall at the exact point the page is asking for money. This borrows the vard page's .items treatment — light ground, hairline rules, the weight in the type rather than in a box — and adds the cover, which vard has no equivalent of. ========================================================================== */ #ufo-plp-map .offer-stack { margin: 28px 0 0; border-top: 1px solid var(--rule); } #ufo-plp-map .offer { display: grid; grid-template-columns: 190px 1fr; gap: 32px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rule); } #ufo-plp-map .offer-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 2px; box-shadow: 0 8px 18px -10px rgba(30,35,40,.42), 0 0 0 1px rgba(125,66,24,.22); } #ufo-plp-map .offer-no { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; } #ufo-plp-map .offer-body h3 { font-family: var(--display); font-size: 22px; line-height: 1.25; color: var(--ink-deep); margin: 0 0 8px; } #ufo-plp-map .offer-body p { font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; } @media (max-width: 560px) { #ufo-plp-map .offer { grid-template-columns: 128px 1fr; gap: 20px; } } /* ========================================================================== THE 2018 EXCERPT — section 10. The call is the strongest single piece of evidence on the page and it was set as a pull-quote, which reads as the letter talking about itself. Rendered as a torn page from the issue instead: masthead, date line, the text, and a ragged bottom edge. Built in CSS rather than as an image so the words stay selectable, searchable and translatable — and so a compliance edit is an edit, not a re-render. ========================================================================== */ #ufo-plp-map .excerpt { position: relative; margin: 32px 0 34px; padding: 26px 30px 40px; background: var(--paper-light); box-shadow: 0 1px 0 var(--rule), 0 14px 28px -22px rgba(30,35,40,.5); border: 1px solid var(--rule); border-bottom: none; } #ufo-plp-map .excerpt-head { border-bottom: 2px solid var(--ink-deep); padding-bottom: 10px; margin-bottom: 18px; } #ufo-plp-map .excerpt .masthead { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--ink-deep); margin: 0; } #ufo-plp-map .excerpt .issue { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin: 7px 0 0; } #ufo-plp-map .excerpt blockquote { margin: 0; } #ufo-plp-map .excerpt blockquote p { font-family: var(--display); font-size: 18.5px; line-height: 1.55; color: var(--ink-deep); margin: 0 0 14px; } #ufo-plp-map .excerpt blockquote p:last-child { margin-bottom: 0; } #ufo-plp-map .excerpt .turn { border-left: 3px solid var(--brass); padding-left: 16px; } /* The tear. A repeating conic gradient gives a ragged edge without an image; the page ground shows through the notches. */ #ufo-plp-map .excerpt .tear { position: absolute; left: -1px; right: -1px; bottom: -1px; height: 14px; background: linear-gradient(-45deg, var(--paper) 8px, transparent 0) 0 100% / 17px 14px repeat-x, linear-gradient(45deg, var(--paper) 8px, transparent 0) 0 100% / 17px 14px repeat-x; } @media (max-width: 560px) { #ufo-plp-map .excerpt { padding: 20px 20px 34px; } #ufo-plp-map .excerpt .masthead { font-size: 22px; } } /* The renewal disclosure lives inside the order box now, not in a dashed callout of its own. It is the last thing read before a card number is typed, so it is set at full body size — never smaller than the copy that sold them. */ #ufo-plp-map .renewal { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--ink-soft); } #ufo-plp-map .renewal strong { color: var(--ink-deep); } /* Per-report value, and the total. The number sits beside the report label rather than under the title, so the eye reads "Report one · $99 value" as one line and the title stays the loudest thing in the row. */ #ufo-plp-map .offer-val { font-weight: 400; letter-spacing: .1em; color: var(--ink-soft); } #ufo-plp-map .offer-val::before { content: "· "; color: var(--rule); } #ufo-plp-map .offer-total { margin: 22px 0 0; padding: 16px 0 0; font-family: var(--sans); font-size: 17px; color: var(--ink-soft); text-align: right; } #ufo-plp-map .offer-total strong { color: var(--brass); font-weight: 700; } /* ========================================================================== ORDER FORM — added 2026-09-10 The order form ([cig_order_form]) is injected by script INTO this page, so it sits inside #ufo-plp-map and inherits our scoped rules. Its own Bootstrap 3 CSS is fenced under .cigobjects (0-2-0 specificity) and never leaks out — but our #ufo-plp-map rules (1-x-0) beat it inside the form. Four collided: .panel the form's plan card is a Bootstrap "panel"; our dark callout style painted it ink, and the form's black offer text vanished on it. The blue glow is the form's own "selected plan" state. .btn Place Order took our copper CTA but kept Bootstrap's green border. .guarantee the form has an empty .guarantee element; ours drew a dashed, tinted, padded box around nothing. p our paragraph spacing, not the form's. Every rule below is #ufo-plp-map #inline-order-form (2-x-0), so it only ever reaches the form. Nothing here touches the shared order system's CSS, which other pages also load. ========================================================================== */ /* the plan card: the page's own light card and brass edge instead of ink + blue glow */ #ufo-plp-map #inline-order-form .panel { margin: 0 0 22px; padding: 22px 24px 18px; background: var(--paper-light); color: var(--ink); border: 2px solid var(--rule); border-radius: 3px; box-shadow: none; } #ufo-plp-map #inline-order-form .panel.promotion.selected { border-color: var(--brass); background: var(--paper-light); box-shadow: 0 0 0 3px var(--brass-tint); } #ufo-plp-map #inline-order-form .panel-body { padding: 0; } /* the form's paragraphs keep the form's spacing, not the letter's */ #ufo-plp-map #inline-order-form p { margin: 0 0 10px; } /* the empty .guarantee element: no box around nothing */ #ufo-plp-map #inline-order-form .guarantee { margin: 16px 0 10px; padding: 0; border: 0; border-radius: 0; background: none; } /* its renewal text shipped at 11px — under our 14px floor for any disclosure, and a disclosure is the last thing someone reads before typing a card number */ #ufo-plp-map #inline-order-form .delivery-info { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 14px 25px; } #ufo-plp-map #inline-order-form .premiums, #ufo-plp-map #inline-order-form .list-premiums li { font-size: 16px; line-height: 1.5; color: var(--ink); } #ufo-plp-map #inline-order-form .list-premiums li { margin: 0 0 8px; } /* inputs at 16px: legible at 55+, and below 16px iOS zooms the page on focus */ #ufo-plp-map #inline-order-form .form-control { font-size: 16px; height: 40px; } /* Place Order: keep the page's copper CTA, lose the green border, stay full width */ #ufo-plp-map #inline-order-form .btn { display: block; width: 100%; white-space: normal; font-size: 17px; padding: 16px 20px; border: 1px solid var(--brass); background: var(--brass-light); color: var(--ink-deep); } #ufo-plp-map #inline-order-form .btn:hover, #ufo-plp-map #inline-order-form .btn:active { background: var(--brass); border-color: var(--brass); color: var(--paper-light); } #ufo-plp-map #inline-order-form .btn:focus-visible { outline: 3px solid var(--ink-deep); outline-offset: 2px; }