/* ============================================================================ 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-olp-vard 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-olp-vard`, 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-olp-vard) { margin: 0; background: #f3eddd; } #ufo-olp-vard { --paper: #f3eddd; --paper-light: #fbf7ec; --ink: #163927; --ink-deep: #0d281b; /* 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: #3a4b3d; --brass: #a8822f; --brass-light: #d8c28a; --terracotta: #a54d37; --rule: rgba(22, 57, 39, .23); --shadow: rgba(54, 42, 20, .18); --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-olp-vard *, #ufo-olp-vard *::before, #ufo-olp-vard *::after { box-sizing: border-box; } #ufo-olp-vard p { margin: 0 0 1.05em; } #ufo-olp-vard strong { font-weight: 600; color: var(--ink-deep); } /* Display type — Playfair, and nothing overrides it. */ #ufo-olp-vard .display, #ufo-olp-vard h1, #ufo-olp-vard h2 { font-family: var(--display); font-weight: 700; color: var(--ink-deep); letter-spacing: -0.015em; margin: 0; } /* ---------- shared column ---------- */ #ufo-olp-vard .spine { width: min(720px, calc(100% - 44px)); margin-inline: auto; } /* ---------- P0 · hero ---------- */ #ufo-olp-vard .hero { position: relative; overflow: hidden; padding: 0 0 46px; background: linear-gradient(180deg, var(--paper-light), var(--paper) 62%); } #ufo-olp-vard .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-olp-vard .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-olp-vard .entry { position: relative; z-index: 2; width: min(880px, calc(100% - 44px)); margin: 0 auto; padding: 52px 0 0; text-align: center; } #ufo-olp-vard .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-olp-vard .entry h1 { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; max-width: 19ch; margin: 0 auto; text-wrap: balance; } #ufo-olp-vard .entry h1 em { font-style: italic; color: var(--terracotta); } #ufo-olp-vard .urgency { font-family: var(--display); font-style: italic; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; color: var(--terracotta); max-width: 46ch; margin: 22px auto 0; } /* ---------- P1 · the letter ---------- */ #ufo-olp-vard .letter { padding: 50px 0 10px; } #ufo-olp-vard .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-olp-vard .masthead .role-line { display: block; font-style: italic; font-weight: 500; letter-spacing: .09em; text-transform: none; font-size: 13px; margin-top: 3px; } #ufo-olp-vard .headrule { position: relative; height: 1px; margin: 12px 0 30px; background: linear-gradient(90deg, var(--brass), var(--ink) 20%, var(--rule)); } #ufo-olp-vard .salutation { font-weight: 600; } #ufo-olp-vard .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-olp-vard .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-olp-vard .proofs { padding: 44px 0 8px; } #ufo-olp-vard .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-olp-vard .deal { padding: 0 0 0 20px; border-left: 2px solid var(--brass); margin: 0 0 24px; } #ufo-olp-vard .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-olp-vard .deal p:last-child { margin: 0; } #ufo-olp-vard .deal .when { font-style: italic; color: var(--ink-soft); } #ufo-olp-vard .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-olp-vard .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-olp-vard .band .cell { flex: 1 1 165px; } #ufo-olp-vard .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-olp-vard .band .val { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink-deep); } #ufo-olp-vard .band .cap { font-family: var(--sans); font-size: 13.5px; line-height: 1.42; color: var(--ink-soft); margin: 7px 0 0; } #ufo-olp-vard .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-olp-vard { font-size: 17.5px; } #ufo-olp-vard .pano, #ufo-olp-vard .pano-right { display: none; } #ufo-olp-vard .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-olp-vard .entry { padding-top: 26px; } #ufo-olp-vard .band { gap: 20px; } #ufo-olp-vard .band .cell { flex: 1 1 100%; } } @media (min-width: 701px) { #ufo-olp-vard .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-olp-vard .sec { padding: 54px 0; } #ufo-olp-vard .sec-alt { background: var(--paper-light); } #ufo-olp-vard .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-olp-vard .sec-h2 { font-size: clamp(27px, 3.1vw, 39px); line-height: 1.1; max-width: 24ch; margin: 0 0 18px; } #ufo-olp-vard .sec-lede { font-size: 19px; line-height: 1.58; color: var(--ink-soft); max-width: 62ch; margin: 0 0 30px; } /* ---------- author strip ---------- */ #ufo-olp-vard .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-olp-vard .author .nm { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink-deep); } /* ---------- three forces ---------- */ #ufo-olp-vard .forces { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } #ufo-olp-vard .force { padding-top: 16px; border-top: 2px solid var(--brass); } #ufo-olp-vard .force .n { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--brass); margin: 0 0 8px; } #ufo-olp-vard .force h3 { font-family: var(--display); font-size: 23px; line-height: 1.15; margin: 0 0 10px; } #ufo-olp-vard .force p { font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; } #ufo-olp-vard .force .stat { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--terracotta); } /* ---------- comparison table ---------- */ #ufo-olp-vard .tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; } #ufo-olp-vard .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-olp-vard .tbl th.us { color: var(--ink-deep); } #ufo-olp-vard .tbl td { padding: 15px 10px; text-align: center; border-bottom: 1px solid var(--rule); } #ufo-olp-vard .tbl td.lab { text-align: left; font-weight: 600; color: var(--ink-deep); } #ufo-olp-vard .tbl td.us { background: rgba(168,130,47,.08); font-weight: 600; color: var(--ink-deep); } #ufo-olp-vard .tbl .gl { display: block; font-size: 15px; margin-bottom: 3px; } #ufo-olp-vard .tbl .yes { color: #2f6b45; } #ufo-olp-vard .tbl .no { color: var(--terracotta); } #ufo-olp-vard .tbl .mid { color: var(--brass); } /* ---------- dark data panel (performance chart) ---------- */ #ufo-olp-vard .panel { margin: 34px 0 0; padding: 26px 24px 22px; background: var(--ink); border-radius: 3px; color: var(--paper); } #ufo-olp-vard .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-olp-vard .panel .ph { font-family: var(--display); font-size: 20px; line-height: 1.35; color: var(--paper); margin: 0 0 18px; max-width: 58ch; } #ufo-olp-vard .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-olp-vard .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-olp-vard .prow .pn { font-family: var(--display); font-size: 20px; color: var(--brass); } #ufo-olp-vard .prow .pc { font-family: var(--display); font-size: 20px; color: var(--ink-deep); margin: 0 0 5px; } #ufo-olp-vard .prow .pt { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; } #ufo-olp-vard .prow .pm { text-align: right; font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; } #ufo-olp-vard .prow .pm b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink-deep); } /* ---------- demand / supply split ---------- */ #ufo-olp-vard .split { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); } #ufo-olp-vard .side { padding: 22px; border: 1px solid var(--rule); border-radius: 3px; } #ufo-olp-vard .side.good { border-color: var(--brass); background: rgba(168,130,47,.06); } #ufo-olp-vard .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-olp-vard .side h3 { font-family: var(--display); font-size: 24px; margin: 0 0 10px; } #ufo-olp-vard .side p { font-size: 16.5px; line-height: 1.52; margin: 0; color: var(--ink-soft); } /* ---------- yield-on-cost ladder ---------- */ #ufo-olp-vard .ladder { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } #ufo-olp-vard .rung { padding: 18px 20px; background: var(--paper-light); border-top: 3px solid var(--brass); } #ufo-olp-vard .rung .yr { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-soft); } #ufo-olp-vard .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-olp-vard .rung .sm { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); } /* ---------- traits / deliverables (numbered list) ---------- */ #ufo-olp-vard .items { counter-reset: it; } #ufo-olp-vard .item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); } #ufo-olp-vard .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-olp-vard .item h3 { font-family: var(--display); font-size: 21px; margin: 0 0 6px; } #ufo-olp-vard .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-olp-vard .reports { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 560px) { #ufo-olp-vard .reports { grid-template-columns: 1fr; } } #ufo-olp-vard .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-olp-vard .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 rgba(168,130,47,.30); } #ufo-olp-vard .rep .no { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-light); } #ufo-olp-vard .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-olp-vard .rep p { font-size: 14.5px; line-height: 1.45; color: rgba(243,237,221,.82); margin: 0; } /* ---------- testimonials ---------- */ #ufo-olp-vard .quotes { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); margin: 30px 0 0; } #ufo-olp-vard .q .stars { color: var(--brass); letter-spacing: .13em; font-size: 15px; margin-bottom: 8px; } #ufo-olp-vard .q blockquote { font-family: var(--display); font-size: 17.5px; line-height: 1.45; font-style: italic; color: var(--ink-deep); margin: 0 0 10px; } #ufo-olp-vard .q figcaption { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); } #ufo-olp-vard .q figcaption b { color: var(--ink-deep); } #ufo-olp-vard .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-olp-vard .cta { background: var(--ink); color: var(--paper); padding: 34px 0; } #ufo-olp-vard .cta .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } #ufo-olp-vard .cta p { font-family: var(--display); font-size: 21px; line-height: 1.35; margin: 0; max-width: 46ch; } #ufo-olp-vard .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); color: var(--ink-deep); white-space: nowrap; } #ufo-olp-vard .btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(243,237,221,.45); } /* ---------- pricing ---------- */ #ufo-olp-vard .plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); margin: 28px 0 0; } #ufo-olp-vard .plan { padding: 26px 24px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-light); } #ufo-olp-vard .plan.best { border: 2px solid var(--brass); position: relative; } #ufo-olp-vard .plan .flag { position: absolute; top: -12px; left: 22px; background: var(--brass); color: var(--ink-deep); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; } #ufo-olp-vard .plan .term { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } #ufo-olp-vard .plan .price { font-family: var(--display); font-size: 52px; font-weight: 700; line-height: 1; color: var(--ink-deep); margin: 8px 0 4px; } #ufo-olp-vard .plan .per { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); margin: 0 0 16px; } #ufo-olp-vard .plan ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; } #ufo-olp-vard .plan li { padding: 5px 0 5px 22px; position: relative; color: var(--ink-soft); } #ufo-olp-vard .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--brass); font-weight: 700; } #ufo-olp-vard .orderbox { margin: 30px 0 0; padding: 26px 24px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper-light); } #ufo-olp-vard .orderbox h3 { font-family: var(--display); font-size: 23px; margin: 0 0 4px; } #ufo-olp-vard .orderbox .sub { font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); margin: 0 0 16px; } #ufo-olp-vard .guarantee { margin: 26px 0 0; padding: 22px; border: 1px dashed var(--brass); border-radius: 3px; background: rgba(168,130,47,.05); } #ufo-olp-vard .guarantee h3 { font-family: var(--display); font-size: 21px; margin: 0 0 8px; } #ufo-olp-vard .guarantee p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; } /* ---------- signoff ---------- */ #ufo-olp-vard .sign { font-size: 18px; line-height: 1.6; } #ufo-olp-vard .sign .sig { font-family: var(--display); font-size: 25px; color: var(--ink-deep); margin: 20px 0 2px; } #ufo-olp-vard .sign .role { font-family: var(--sans); font-size: 13.5px; font-style: italic; color: var(--ink-soft); } #ufo-olp-vard .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-olp-vard .sign .ps b { color: var(--ink-deep); } @media (max-width: 700px) { #ufo-olp-vard .sec { padding: 40px 0; } #ufo-olp-vard .prow { grid-template-columns: 34px 1fr; } #ufo-olp-vard .prow .pm { text-align: left; grid-column: 2; margin-top: 6px; } #ufo-olp-vard .cta .inner { flex-direction: column; align-items: flex-start; } #ufo-olp-vard .tbl { font-size: 15px; } #ufo-olp-vard .tbl th, #ufo-olp-vard .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-olp-vard .plan li.off { color: var(--ink-soft); } #ufo-olp-vard .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 #0d281b: #f3eddd = 13.4:1, #c3bda9 = 8.4:1, #d8c28a = 9.0:1. Centered per Jared's 2026-05-30 correction (links stacked when left-aligned in WP). ========================================================================== */ #ufo-olp-vard .olp-foot { background: var(--ink-deep); padding: 44px 0 40px; } #ufo-olp-vard .foot-inner { text-align: center; } #ufo-olp-vard .foot-brand { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid rgba(243, 237, 221, .14); } #ufo-olp-vard .foot-brand .brand-small { font-family: var(--display); font-size: 19px; font-weight: 700; font-style: italic; color: var(--paper); margin-bottom: 6px; } #ufo-olp-vard .foot-brand .tagline { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: .03em; color: #c3bda9; margin: 0; } #ufo-olp-vard .foot-legal { font-family: var(--sans); font-size: 14px; line-height: 1.65; color: #c3bda9; text-align: left; margin: 0 0 16px; } #ufo-olp-vard .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-olp-vard .foot-legal em { font-size: 15px; } #ufo-olp-vard .foot-bottom { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(243, 237, 221, .14); } #ufo-olp-vard .foot-links { font-family: var(--sans); font-size: 14px; line-height: 2; color: #c3bda9; margin: 0 0 10px; } #ufo-olp-vard .foot-copy { font-family: var(--sans); font-size: 14px; line-height: 1.6; letter-spacing: .02em; color: #c3bda9; margin: 0; } #ufo-olp-vard .olp-foot a { color: var(--brass-light); text-decoration: underline; text-underline-offset: 2px; } #ufo-olp-vard .olp-foot a:hover { color: var(--paper); } @media (max-width: 700px) { #ufo-olp-vard .olp-foot { padding: 34px 0 32px; } }