/* * UltronFast — Living Guide design system (M5.A). * * Closes the visual gap between published guides and the FY2026 reference * (snap-fy2026-living-guide.html). Two strictly-namespaced scopes, so this file * can NEVER restyle a host theme outside our own markup: * * .uf-guide — wraps a guide post body (added by UF_Blocks::wrap_guide_content); * styles the prose (headings, paragraphs, lists, links) by STRUCTURE. * The serializer still strips every model-authored class — the design * system attaches to our own container, never to trusted markup. * .uf-widget — the computed/interactive widget cards (anywhere they render). * * Design tokens are defined ONLY on those two scopes (never bare :root) and are * `--uf-`-prefixed, so they cannot collide with a theme's variables. Light + dark * via prefers-color-scheme. * * Fonts: SELF-HOSTED (M6 parity) — Fraunces / Hanken Grotesk / Spline Sans Mono * variable woff2 (latin subset, OFL) live in assets/fonts/ and are declared at the * @font-face seam at the foot of this file. No read-time third-party CDN; the * standalone export base64-inlines these so the exported file is fully offline. * --uf-serif/sans/mono point at those families with a graceful system fallback. */ /* ----------------------------------------------------------------- tokens */ /* The reading-chrome (.uf-progress / .uf-minimap) mounts on , OUTSIDE the * guide/widget subtree, so it must carry the tokens itself — otherwise every * var(--uf-*) collapses and the minimap renders as bare floating label text. */ .uf-guide, .uf-widget, .uf-progress, .uf-minimap { --uf-paper: #FBF7EF; --uf-paper-2: #F4EDE0; --uf-card: #FFFCF6; --uf-ink: #1C1812; --uf-ink-2: #4A4136; --uf-ink-3: #7A6E5E; --uf-line: #E3D8C5; --uf-line-2: #D2C4AC; --uf-green: #1F5C3D; --uf-green-2: #2F7D54; --uf-green-soft: #E4EFE7; --uf-ochre: #B7791F; --uf-ochre-2: #D99A2B; --uf-ochre-soft: #FBEFD6; --uf-clay: #A6442E; --uf-clay-soft: #F6E2DB; --uf-shadow: 0 1px 2px rgba(28,24,18,.04), 0 8px 24px rgba(28,24,18,.06); --uf-shadow-lg: 0 2px 6px rgba(28,24,18,.06), 0 24px 48px rgba(28,24,18,.10); --uf-serif: "Fraunces", Georgia, "Times New Roman", serif; --uf-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --uf-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; --uf-radius: 16px; /* C1 cinema tokens: ambient light + motion. Alphas stay whisper-low so the * warm editorial brand reads first and the light reads second. */ --uf-glow-green: rgba(47, 125, 84, .07); --uf-glow-ochre: rgba(217, 154, 43, .09); --uf-glow-clay: rgba(166, 68, 46, .08); --uf-specular: rgba(255, 255, 255, .65); --uf-ease: cubic-bezier(.22, .9, .26, 1); --uf-grad-ink: linear-gradient(118deg, var(--uf-green) 0%, var(--uf-green-2) 55%, var(--uf-ochre) 130%); /* C2 invitation palette — color psychology with one hard rule: ACT teal is * the ONLY cool hue on the page, and it appears ONLY on things a reader can * touch (sliders, chips, buttons, inputs). Cool-against-warm pop-out makes * every affordance self-announcing. Money = emerald (growth). Reward = gold * (payoff moments). Urgency = coral (urgent without alarm-red panic — * this audience is already stressed). Insight = violet (psych lane). */ --uf-act: #0E8486; --uf-act-2: #12A5A8; --uf-act-soft: #DCF1F1; --uf-gold: #C99212; --uf-gold-2: #E7B93C; --uf-gold-soft: #FBF0D2; --uf-coral: #D2502F; --uf-coral-soft: #FADFD4; --uf-violet: #5F51C4; --uf-violet-soft: #E9E6FA; --uf-ring: rgba(14, 132, 134, .38); --uf-glow-act: rgba(18, 165, 168, .10); --uf-glow-violet: rgba(95, 81, 196, .08); --uf-grad-act: linear-gradient(140deg, var(--uf-act-2), var(--uf-act) 70%); --uf-grad-gold: linear-gradient(118deg, var(--uf-gold) 0%, var(--uf-gold-2) 80%); /* C6 poster-control + verdict tokens. Light values are the C6 poster literals * verbatim (uf-interactive.css used to hardcode them and stayed light inside * dark cards); the dark scope restates the same roles on the dark field. * ctl = the white-field chip language, cta = the one solid amber, * answer/money = the verdict forest + computed-money emerald ramp. */ --uf-ctl-bg: #FDFBF7; --uf-ctl-line: rgba(7, 53, 42, .35); --uf-ctl-ink: #10382B; --uf-cta: #B45309; --uf-cta-2: #D97706; --uf-answer: #07352A; --uf-answer-mut: #33574A; --uf-money: #12925F; --uf-money-2: #0E6B45; /* trust-blue: the provenance/citation role (GN1 glass, cited pills, record links) */ --uf-trust: #1F6FB2; --uf-trust-soft: #E7F0F9; --uf-trust-ring: rgba(31, 111, 178, .55); } /* Dark skin is OPT-IN — bfq and every current theme stay light-always. These vars * apply only when the guide wrapper carries `.uf-dark-ok`, which the connector adds * solely on themes that declare dark support (get_option('uf_guide_dark')). A bare * prefers-color-scheme painted a black article island inside light host themes that * never honor dark; the SAME opt-in drives headmeta's color-scheme meta. */ @media (prefers-color-scheme: dark) { .uf-dark-ok:is(.uf-guide, .uf-widget, .uf-progress, .uf-minimap), .uf-dark-ok :is(.uf-guide, .uf-widget, .uf-progress, .uf-minimap) { --uf-paper: #16130E; --uf-paper-2: #201C15; --uf-card: #221E16; --uf-ink: #F3ECDD; --uf-ink-2: #CDC2AE; --uf-ink-3: #938976; --uf-line: #342F26; --uf-line-2: #48402F; --uf-green: #62B585; --uf-green-2: #7DCB9D; --uf-green-soft: #15281D; --uf-ochre: #E3AE52; --uf-ochre-2: #EFC36F; --uf-ochre-soft: #33280F; --uf-clay: #DD7C62; --uf-clay-soft: #321C16; --uf-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); --uf-shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.6); --uf-glow-green: rgba(125, 203, 157, .08); --uf-glow-ochre: rgba(239, 195, 111, .09); --uf-glow-clay: rgba(221, 124, 98, .09); --uf-specular: rgba(255, 255, 255, .07); --uf-grad-ink: linear-gradient(118deg, var(--uf-green-2) 0%, var(--uf-green) 55%, var(--uf-ochre-2) 130%); --uf-act: #4ECBCD; --uf-act-2: #6FDCDE; --uf-act-soft: #0E2A2B; --uf-gold: #E7B93C; --uf-gold-2: #F2CE6B; --uf-gold-soft: #332A10; --uf-coral: #F08A6C; --uf-coral-soft: #33190F; --uf-violet: #A79BF0; --uf-violet-soft: #221E38; --uf-ring: rgba(78, 203, 205, .42); --uf-glow-act: rgba(78, 203, 205, .10); --uf-glow-violet: rgba(167, 155, 240, .09); --uf-grad-act: linear-gradient(140deg, var(--uf-act-2), var(--uf-act) 70%); --uf-grad-gold: linear-gradient(118deg, var(--uf-gold) 0%, var(--uf-gold-2) 80%); /* C6 poster controls + verdict ramp on the dark field: chips lift a step * above the card, the forest outline goes pastel, the answer numeral is the * BRIGHTEST thing (mirror of light, where it is the darkest), amber CTA * brightens so paper-dark text sits on it. */ --uf-ctl-bg: #2B2519; --uf-ctl-line: rgba(125, 203, 157, .35); --uf-ctl-ink: #CFE3D6; --uf-cta: #D97706; --uf-cta-2: #F59E0B; --uf-answer: #CDEBD9; --uf-answer-mut: #9BBFAA; --uf-money: #4EC08A; --uf-money-2: #66C495; --uf-trust: #7CB5E8; --uf-trust-soft: #14222E; --uf-trust-ring: rgba(124, 181, 232, .55); /* dark counterparts for the C6 poster-scope card chrome + amber accents * (defined on .uf-widget below; this higher-specificity block flips them) */ --uf-card-line: #342F26; --uf-card-line-2: #48402F; --uf-lift: 0 14px 34px rgba(0, 0, 0, .5); --uf-amber: #D97706; --uf-amber-2: #F59E0B; --uf-amber-soft: #33240F; } } /* ------------------------------------------------------- guide: the page */ .uf-guide { background: var(--uf-paper); color: var(--uf-ink); font-family: var(--uf-sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; padding: clamp(20px, 4vw, 56px); border-radius: var(--uf-radius); /* uf-scheme-pinned: start — AMBIENT WASH: whisper-alpha (.05) warm tints, imperceptible over the dark paper; harmless in BOTH schemes. */ background-image: radial-gradient(circle at 12% 8%, rgba(183,121,31,.05), transparent 40%), radial-gradient(circle at 88% 22%, rgba(31,92,61,.05), transparent 42%); /* uf-scheme-pinned: end */ } /* ------------------------------------------------- guide: prose typography */ .uf-guide h1, .uf-guide h2, .uf-guide h3, .uf-guide h4 { font-family: var(--uf-serif); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--uf-ink); } .uf-guide h2 { font-size: clamp(26px, 4vw, 40px); margin: 1.8em 0 .5em; } .uf-guide h3 { font-size: clamp(21px, 3vw, 28px); margin: 1.5em 0 .4em; } .uf-guide h4 { font-size: 19px; margin: 1.3em 0 .35em; } .uf-guide p { margin: 0 0 1.1em; max-width: 68ch; } .uf-guide ul, .uf-guide ol { margin: 0 0 1.2em; padding-left: 1.3em; max-width: 66ch; } .uf-guide li { margin: .35em 0; } .uf-guide li::marker { color: var(--uf-ochre); } .uf-guide strong { color: var(--uf-ink); font-weight: 600; } .uf-guide a { color: var(--uf-green); text-decoration: none; border-bottom: 1px solid var(--uf-line-2); transition: color .15s, border-color .15s; } .uf-guide a:hover { color: var(--uf-green-2); border-color: var(--uf-green-2); } .uf-guide blockquote { border-left: 3px solid var(--uf-ochre); background: var(--uf-ochre-soft); padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 1.6em 0; font-style: normal; } .uf-guide ::selection { background: var(--uf-ochre-soft); } /* ----------------------------------------------------- widget: card shell */ .uf-widget { background: var(--uf-card); border: 1px solid var(--uf-line); border-radius: var(--uf-radius); padding: 24px 26px; margin: 28px 0; box-shadow: var(--uf-shadow); color: var(--uf-ink); font-family: var(--uf-sans); } .uf-widget__title { font-family: var(--uf-serif); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 14px; color: var(--uf-ink); } .uf-widget__caption { font-size: 13px; color: var(--uf-ink-3); margin: 12px 0 0; font-style: italic; font-family: var(--uf-serif); } .uf-widget ul { list-style: none; margin: 0; padding: 0; } /* ---- benefit_breakdown: the waterfall ledger (the most persuasive card) ---- */ .uf-breakdown__bars { display: flex; flex-direction: column; } .uf-breakdown__bar { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--uf-line); font-size: 15px; } .uf-breakdown__bar:last-child { border-bottom: 0; } .uf-bar__program { flex: 1; color: var(--uf-ink-2); font-weight: 600; } .uf-bar__amount { font-family: var(--uf-mono); font-weight: 600; color: var(--uf-green); } .uf-bar__state { font-family: var(--uf-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 100px; } .uf-bar--eligible .uf-bar__state { background: var(--uf-green-soft); color: var(--uf-green); } .uf-bar--ineligible .uf-bar__state { background: var(--uf-clay-soft); color: var(--uf-clay); } .uf-bar--ineligible .uf-bar__amount { color: var(--uf-ink-3); } .uf-breakdown__total { margin: 14px 0 0; padding-top: 12px; border-top: 1.5px solid var(--uf-ink); display: flex; justify-content: space-between; font-weight: 600; } .uf-breakdown__total strong { font-family: var(--uf-mono); color: var(--uf-green); } /* hydrated animated bar chart (uf-widgets.js builds this) */ .uf-bd { display: flex; flex-direction: column; gap: 10px; } .uf-bd__row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; } .uf-bd__name { font-weight: 600; color: var(--uf-ink-2); font-size: 15px; } .uf-bd__track { height: 12px; border-radius: 6px; background: var(--uf-line); overflow: hidden; } .uf-bd__track i { display: block; height: 100%; border-radius: 6px; background: var(--uf-green-2); } .uf-bd__row--inelig .uf-bd__track i { background: var(--uf-line-2); } .uf-bd__amt { font-family: var(--uf-mono); font-weight: 600; color: var(--uf-green); min-width: 64px; text-align: right; } .uf-bd__row--inelig .uf-bd__amt { color: var(--uf-ink-3); } .uf-bd__total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 12px; border-top: 1.5px solid var(--uf-ink); font-weight: 600; } .uf-bd__total strong { font-family: var(--uf-mono); color: var(--uf-green); font-size: 18px; } @media (max-width: 480px) { .uf-bd__row { grid-template-columns: 90px 1fr auto; gap: 8px; } } /* ---- cliff_visualizer: precomputed points as a clean ledger (M5.B adds canvas) ---- */ .uf-cliff__points { display: flex; flex-direction: column; } .uf-cliff__point { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--uf-line); font-family: var(--uf-mono); } .uf-cliff__point:last-child { border-bottom: 0; } .uf-cliff__income { color: var(--uf-ink-3); } .uf-cliff__benefit { color: var(--uf-green); font-weight: 600; } .uf-cliff__markers { margin: 12px 0 0; font-size: 13px; color: var(--uf-clay); font-family: var(--uf-mono); } /* hydrated canvas chart (uf-widgets.js builds this) */ .uf-cliff__canvas { width: 100%; height: auto; display: block; } .uf-cliff__slider { width: 100%; accent-color: var(--uf-green); margin: 14px 0 8px; } .uf-cliff__readout { display: flex; justify-content: space-between; gap: 12px; font-family: var(--uf-mono); font-size: 14px; color: var(--uf-ink-2); } .uf-cliff__readout strong { color: var(--uf-green); } .uf-cliff__legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--uf-ink-2); } .uf-cliff__legend span { display: flex; align-items: center; gap: 8px; } .uf-cliff__legend i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; } /* ---- income_limits_table (§4): interactive thresholds table ---- */ .uf-limits__controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .uf-limits__lbl { font: 13px/1 var(--uf-mono); color: var(--uf-ink-3); letter-spacing: .05em; } .uf-limits__seg { display: flex; border: 1px solid var(--uf-line-2); border-radius: 10px; overflow: hidden; background: var(--uf-card); } .uf-limits__seg button { border: 0; background: transparent; padding: 9px 14px; font: 600 13px var(--uf-sans); color: var(--uf-ink-3); cursor: pointer; border-right: 1px solid var(--uf-line); } .uf-limits__seg button:last-child { border-right: 0; } .uf-limits__seg button.on { background: var(--uf-green); color: var(--uf-paper); } .uf-limits__tbl { width: 100%; border-collapse: collapse; font-family: var(--uf-mono); font-size: 15px; } .uf-limits__tbl th, .uf-limits__tbl td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--uf-line); } .uf-limits__tbl th:first-child, .uf-limits__tbl td:first-child { text-align: left; } .uf-limits__tbl thead th { background: var(--uf-paper-2); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--uf-ink-3); font-weight: 600; } .uf-limits__tbl tbody tr.is-hl { background: var(--uf-green-soft); } .uf-limits__tbl td.max { color: var(--uf-green); font-weight: 600; } /* ---- cascade + eligibility_checker ---- */ .uf-cascade__programs { display: flex; flex-wrap: wrap; gap: 8px; } .uf-cascade__program { border: 1px solid var(--uf-line-2); border-radius: 100px; padding: 6px 14px; background: var(--uf-green-soft); color: var(--uf-green); font-size: 14px; font-weight: 600; } .uf-cascade__total { margin: 14px 0 0; font-size: 15px; } .uf-cascade__total strong { font-family: var(--uf-mono); color: var(--uf-green); font-size: 17px; } /* S5 provenance rows (post-#278 main addition — ported into the poster grammar): name · provenance pill · via-chain, spaced by gap, provenance colored by the evidence palette (computed=green gain-marking, cited=trust-blue semantic dose). */ .uf-cascade__rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .uf-cascade__row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .uf-cascade__rowname { font-weight: 600; } .uf-cascade__prov { font: 600 10px/1 var(--uf-mono); letter-spacing: .18em; text-transform: uppercase; border-radius: 100px; padding: 4px 10px; } .uf-cascade__prov--computed { background: var(--uf-green-soft); color: var(--uf-green); } .uf-cascade__prov--cited { background: var(--uf-trust-soft); color: var(--uf-trust); } .uf-cascade__via { color: var(--uf-ink-2); font-size: 14px; } .uf-eligibility__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 14px; font-size: 14px; color: var(--uf-ink-2); } .uf-eligibility__facts li { font-family: var(--uf-mono); } .uf-eligibility__programs { display: flex; flex-direction: column; gap: 2px; } .uf-eligibility__program { padding: 9px 0; border-bottom: 1px solid var(--uf-line); } .uf-eligibility__program:last-child { border-bottom: 0; } .uf-elig--yes { color: var(--uf-green); } .uf-elig--no { color: var(--uf-ink-3); } /* ---- situation_navigator (M5.B): flag chips → ranked plan ---- */ .uf-nav__programs { display: flex; flex-direction: column; gap: 2px; } /* no-JS fallback */ .uf-nav__program { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--uf-line); } .uf-nav__program:last-child { border-bottom: 0; } .uf-nav__name { font-weight: 600; color: var(--uf-ink); } .uf-nav__why { grid-column: 1 / -1; font-size: 14px; color: var(--uf-ink-2); } .uf-nav__tier { font-family: var(--uf-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; align-self: start; } .uf-nav__tier--auto { color: var(--uf-green); } .uf-nav__tier--likely { color: var(--uf-ochre); } .uf-nav__tier--check { color: var(--uf-ink-3); } .uf-nav__value small { color: var(--uf-ink-3); } /* hydrated */ .uf-nav__flags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .uf-flag { border: 1px solid var(--uf-line-2); background: var(--uf-card); color: var(--uf-ink-2); font: 600 14px/1 var(--uf-sans); padding: 10px 15px; border-radius: 100px; cursor: pointer; transition: .15s; } .uf-flag:hover { border-color: var(--uf-green); color: var(--uf-ink); } .uf-flag.on { background: var(--uf-green); border-color: var(--uf-green); color: var(--uf-paper); } .uf-nav__plan { display: flex; flex-direction: column; gap: 8px; } .uf-nav__empty { color: var(--uf-ink-3); font-style: italic; font-family: var(--uf-serif); padding: 12px 0; } .uf-pcard { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--uf-line); border-radius: 14px; background: var(--uf-card); } .uf-pcard__ico { font-size: 24px; line-height: 1; } .uf-pcard__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .uf-pcard__h strong { font-family: var(--uf-serif); font-size: 18px; } .uf-ptag { font-family: var(--uf-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 100px; } .uf-ptag--auto { background: var(--uf-green-soft); color: var(--uf-green); } .uf-ptag--likely { background: var(--uf-ochre-soft); color: var(--uf-ochre); } .uf-ptag--check { background: var(--uf-paper-2); color: var(--uf-ink-3); border: 1px solid var(--uf-line); } .uf-pcard__why { font-size: 14.5px; color: var(--uf-ink-2); line-height: 1.5; margin: 0; } .uf-pcard__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .uf-pcard__val { font-family: var(--uf-serif); font-weight: 600; color: var(--uf-green); font-size: 16px; line-height: 1.15; } .uf-pcard__val small { display: block; font-family: var(--uf-sans); font-size: 11px; color: var(--uf-ink-3); font-weight: 500; } .uf-pcard__go { font: 600 12.5px var(--uf-sans); color: var(--uf-paper); background: var(--uf-ink); padding: 8px 13px; border-radius: 9px; white-space: nowrap; } .uf-pcard__go:hover { background: var(--uf-green); } @media (max-width: 600px) { .uf-pcard { grid-template-columns: auto 1fr; } .uf-pcard__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px dashed var(--uf-line); padding-top: 10px; } } /* ---- deadline_callout ---- */ .uf-widget--deadline-callout { border-left: 3px solid var(--uf-clay); background: var(--uf-clay-soft); } .uf-deadline__label { font-weight: 600; font-size: 17px; margin: 0 0 4px; } .uf-deadline__date { font-family: var(--uf-mono); color: var(--uf-clay); margin: 0 0 8px; } .uf-deadline__source a { color: var(--uf-green); font-size: 14px; } /* ---- general widgets: comparison_table / pros_cons / faq / how_to_steps / key_stats ---- The research lane's instrument set, held to the computed widgets' visual bar (live WIC walk: structurally correct but visually bare next to the SNAP page). */ .uf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--uf-mono); font-size: 15px; font-variant-numeric: tabular-nums; } .uf-table th, .uf-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--uf-line); } .uf-table td:not(:first-child), .uf-table th:not(:first-child) { text-align: right; } .uf-table td:first-child { font-weight: 600; color: var(--uf-ink); } .uf-table thead th { background: var(--uf-green); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--uf-paper); font-weight: 600; border-bottom: none; } .uf-table thead th:first-child { border-radius: 8px 0 0 0; } .uf-table thead th:last-child { border-radius: 0 8px 0 0; } .uf-table tbody tr:nth-child(even) td { background: var(--uf-paper-2); } .uf-table tbody tr:last-child td { background: var(--uf-ochre-soft); font-weight: 600; border-bottom: 2px solid var(--uf-ochre); } /* Theme-proof readability. A host theme can inject its own `color` on td/th, and the browser's prefers-color-scheme can differ from the host page's theme — either desync renders light-text on a light row (the screener tables on a dark site). Force every screener cell to draw BOTH its text and its background from the SAME widget token scope, and give EVERY row (not just even/last) an explicit widget background so no host row color bleeds through. The `.uf-widget .uf-table tbody|thead` selectors outspecify typical host content rules, so the widget's own palette always wins and bg/fg can never mismatch. */ .uf-widget .uf-table tbody td { color: var(--uf-ink); background: var(--uf-card); } .uf-widget .uf-table tbody tr:nth-child(even) td { background: var(--uf-paper-2); } .uf-widget .uf-table tbody tr:last-child td { background: var(--uf-ochre-soft); } .uf-widget .uf-table thead th { color: var(--uf-paper); background: var(--uf-green); } .uf-pros, .uf-cons { margin-bottom: 12px; border-radius: 12px; padding: 16px 18px; } .uf-pros { background: var(--uf-green-soft); border: 1px solid var(--uf-green-2); } .uf-cons { background: var(--uf-clay-soft); border: 1px solid var(--uf-clay); } .uf-pros__head, .uf-cons__head { font-family: var(--uf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 0 10px; } .uf-pros__head { color: var(--uf-green); } .uf-cons__head { color: var(--uf-clay); } .uf-pros ul, .uf-cons ul { padding-left: 0; list-style: none; } .uf-pros li, .uf-cons li { position: relative; padding-left: 26px; margin: 8px 0; line-height: 1.5; } .uf-pros li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--uf-green); font-weight: 700; } .uf-cons li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--uf-clay); font-weight: 700; } .uf-faq dt { font-family: var(--uf-serif); font-weight: 600; font-size: 17px; margin: 14px 0 4px; } .uf-faq dd { margin: 0; color: var(--uf-ink-2); } .uf-howto { padding-left: 0; list-style: none; counter-reset: uf-step; } .uf-howto__step { counter-increment: uf-step; position: relative; padding: 0 0 18px 56px; margin: 0; line-height: 1.55; } .uf-howto__step::before { content: counter(uf-step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--uf-green); color: var(--uf-paper); font-family: var(--uf-mono); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; } .uf-howto__step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--uf-line-2); } .uf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .uf-stats__item { display: flex; flex-direction: column; background: var(--uf-card); border: 1px solid var(--uf-line); border-left: 3px solid var(--uf-ochre); border-radius: 12px; padding: 16px 18px; box-shadow: var(--uf-shadow); } .uf-stats__value { font-family: var(--uf-serif); font-size: 30px; font-weight: 600; color: var(--uf-green); line-height: 1.05; font-variant-numeric: tabular-nums; } /* A sentence-length value (a cited research finding, not a lone figure) reads as body text, not display type — 30px serif made the psychology panel unreadable. */ .uf-stats__value--prose { font-size: 16px; font-weight: 500; line-height: 1.55; font-variant-numeric: normal; } .uf-stats:has(.uf-stats__value--prose) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .uf-stats__label { font-family: var(--uf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--uf-ink-3); margin-top: 8px; } /* ---- limit_screener: the income-test checker (hydrated; SSR = the table) ---- */ .uf-lscr { margin-bottom: 16px; } .uf-lscr__form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .uf-lscr__field { display: flex; flex-direction: column; gap: 6px; } .uf-lscr__field--grow { flex: 1; min-width: 180px; } .uf-lscr__field span { font-family: var(--uf-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--uf-ink-3); } .uf-lscr__size, .uf-lscr__income { font-family: var(--uf-mono); font-size: 16px; color: var(--uf-ink); background: var(--uf-card); border: 1px solid var(--uf-line-2); border-radius: 10px; padding: 10px 12px; min-height: 44px; } .uf-lscr__income { font-variant-numeric: tabular-nums; } .uf-lscr__size:focus, .uf-lscr__income:focus { outline: 2px solid var(--uf-green-2); outline-offset: 1px; } .uf-lscr__periods { display: flex; border: 1px solid var(--uf-line-2); border-radius: 10px; overflow: hidden; } .uf-lscr__periods button { font-family: var(--uf-mono); font-size: 12px; letter-spacing: .03em; background: var(--uf-card); color: var(--uf-ink-3); border: none; padding: 12px 14px; cursor: pointer; border-right: 1px solid var(--uf-line); } .uf-lscr__periods button:last-child { border-right: none; } .uf-lscr__periods button.on { background: var(--uf-green); color: var(--uf-paper); } .uf-lscr__verdict { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--uf-paper-2); border: 1px dashed var(--uf-line-2); font-size: 16px; line-height: 1.5; min-height: 24px; } .uf-lscr__verdict--under { background: var(--uf-green-soft); border: 1px solid var(--uf-green-2); color: var(--uf-ink); } .uf-lscr__verdict--over { background: var(--uf-ochre-soft); border: 1px solid var(--uf-ochre); color: var(--uf-ink); } .uf-lscr__period { font-family: var(--uf-mono); font-size: 12px; color: var(--uf-ink-3); margin: -6px 0 12px; } .uf-lscr__note { font-size: 13px; color: var(--uf-ink-3); font-style: italic; margin: 10px 0 0; } .uf-widget--limit-screener .uf-table { margin-top: 16px; } /* ---- Social-Security widgets (static cards + the hydrated slider dashboard) ---- * Full component styling for the SS lane, matching the M5.A card vocabulary. * Presentation only — every magnitude arrives precomputed via data-uf / PHP. */ .uf-widget--ss-claim-dashboard .uf-ss-dash, .uf-widget--ss-crossover-chart .uf-ss-cx, .uf-widget--ss-earnings-test .uf-ss-earn, .uf-widget--ss-tax-tier .uf-ss-tax, .uf-widget--ss-eligibility-screen .uf-ss-elig { display: grid; gap: 12px; margin-top: 6px; } .uf-ss-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 600 12px var(--uf-sans); color: var(--uf-ink-3); } .uf-ss-legend span { display: inline-flex; align-items: center; gap: 6px; } .uf-ss-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .uf-ss-legend i.is-62 { background: var(--uf-ochre); } .uf-ss-legend i.is-70 { background: var(--uf-green); } /* claim dashboard — benefit-by-age table (no-JS fallback; the slider is below) */ .uf-widget--ss-claim-dashboard .uf-ss-grid { list-style: none; margin: 0; padding: 0; } .uf-widget--ss-claim-dashboard .uf-ss-grid__row { display: grid; grid-template-columns: 52px repeat(4, 1fr); gap: 10px; align-items: baseline; padding: 9px 10px; border-bottom: 1px solid var(--uf-line); } .uf-widget--ss-claim-dashboard .uf-ss-grid__row:last-child { border-bottom: 0; } .uf-widget--ss-claim-dashboard .uf-ss-grid__row--head { font: 700 10.5px/1.2 var(--uf-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--uf-ink-3); border-bottom: 1.5px solid var(--uf-line-2); padding-bottom: 7px; } .uf-widget--ss-claim-dashboard .uf-ss-grid__row--head span { text-align: right; } .uf-widget--ss-claim-dashboard .uf-ss-grid__row--head .uf-ss-grid__age { text-align: left; color: var(--uf-ink-3); } .uf-widget--ss-claim-dashboard .uf-ss-grid__row--best { background: var(--uf-green-soft); border-radius: 10px; border-bottom-color: transparent; } .uf-widget--ss-claim-dashboard .uf-ss-grid__age { font: 700 15px var(--uf-mono); color: var(--uf-ink); } .uf-widget--ss-claim-dashboard .uf-ss-grid__monthly, .uf-widget--ss-claim-dashboard .uf-ss-grid__house, .uf-widget--ss-claim-dashboard .uf-ss-grid__surv, .uf-widget--ss-claim-dashboard .uf-ss-grid__life { font: 600 13.5px var(--uf-mono); color: var(--uf-ink-2); text-align: right; white-space: nowrap; } .uf-widget--ss-claim-dashboard .uf-ss-grid__monthly { color: var(--uf-green-2); } /* crossover — dual cumulative bar chart with break-even highlight */ .uf-widget--ss-crossover-chart .uf-ss-cum { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .uf-widget--ss-crossover-chart .uf-ss-cum__row { display: grid; grid-template-columns: 30px 1fr 132px; gap: 12px; align-items: center; padding: 2px 0; border-bottom: 0; } .uf-widget--ss-crossover-chart .uf-ss-cum__age { font: 700 13px var(--uf-mono); color: var(--uf-ink-3); text-align: right; } .uf-widget--ss-crossover-chart .uf-ss-cum__track { display: grid; gap: 3px; } .uf-widget--ss-crossover-chart .uf-ss-cum__lane { position: relative; height: 8px; background: var(--uf-paper-2); border-radius: 999px; } .uf-widget--ss-crossover-chart .uf-ss-cum__bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; min-width: 2px; } .uf-widget--ss-crossover-chart .uf-ss-cum__bar--62 { background: var(--uf-ochre); opacity: .9; } .uf-widget--ss-crossover-chart .uf-ss-cum__bar--70 { background: var(--uf-green); } .uf-widget--ss-crossover-chart .uf-ss-cum__vals { font: 600 11.5px var(--uf-mono); text-align: right; white-space: nowrap; } .uf-widget--ss-crossover-chart .uf-ss-cum__vals .v62 { color: var(--uf-ochre); } .uf-widget--ss-crossover-chart .uf-ss-cum__vals .v70 { color: var(--uf-green-2); } .uf-widget--ss-crossover-chart .uf-ss-cum__vals i { color: var(--uf-ink-3); font-style: normal; padding: 0 3px; } .uf-widget--ss-crossover-chart .uf-ss-cum__row.is-crossover { background: var(--uf-ochre-soft); border-radius: 8px; padding: 4px 6px; margin: 2px -6px; } .uf-widget--ss-crossover-chart .uf-ss-cum__row.is-crossover .uf-ss-cum__age { color: var(--uf-clay); } .uf-widget--ss-crossover-chart .uf-ss-crossover { margin: 4px 0 0; padding: 12px 14px; background: var(--uf-green-soft); border-radius: 12px; font: 500 14.5px var(--uf-serif); color: var(--uf-ink); } .uf-widget--ss-crossover-chart .uf-ss-crossover b { font-family: var(--uf-mono); font-weight: 700; color: var(--uf-green-2); } /* earnings test — kept-vs-withheld split bar */ .uf-widget--ss-earnings-test .uf-ss-earn__bar { display: flex; height: 38px; border-radius: 12px; overflow: hidden; border: 1px solid var(--uf-line); background: var(--uf-card); } .uf-widget--ss-earnings-test .uf-ss-earn__seg { display: flex; align-items: center; justify-content: center; min-width: 0; font: 700 13px var(--uf-mono); color: var(--uf-paper); white-space: nowrap; padding: 0 8px; } .uf-widget--ss-earnings-test .uf-ss-earn__seg--kept { background: var(--uf-green); } .uf-widget--ss-earnings-test .uf-ss-earn__seg--withheld { background: var(--uf-clay); } .uf-widget--ss-earnings-test .uf-ss-earn__legend { display: flex; flex-wrap: wrap; gap: 16px; } .uf-widget--ss-earnings-test .uf-ss-earn__item { display: grid; gap: 1px; } .uf-widget--ss-earnings-test .uf-ss-earn__k { font: 600 11px var(--uf-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--uf-ink-3); } .uf-widget--ss-earnings-test .uf-ss-earn__v { font: 700 17px var(--uf-mono); color: var(--uf-ink); } .uf-widget--ss-earnings-test .uf-ss-earn__item--kept .uf-ss-earn__v { color: var(--uf-green-2); } .uf-widget--ss-earnings-test .uf-ss-earn__item--withheld .uf-ss-earn__v { color: var(--uf-clay); } .uf-widget--ss-earnings-test .uf-ss-earn__note { margin: 0; font: 400 13px var(--uf-serif); color: var(--uf-ink-3); } /* tax tier — provisional income → taxable band stat */ .uf-widget--ss-tax-tier .uf-ss-tax { text-align: center; } .uf-widget--ss-tax-tier .uf-ss-tax__big { font: 700 clamp(34px, 7vw, 48px) var(--uf-serif); color: var(--uf-green-2); line-height: 1; letter-spacing: -.01em; } .uf-widget--ss-tax-tier .uf-ss-tax__sub { font: 500 14px var(--uf-serif); color: var(--uf-ink-2); } .uf-widget--ss-tax-tier .uf-ss-tax__prov { justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 4px auto 0; padding: 8px 16px; background: var(--uf-paper-2); border-radius: 999px; font: 600 13.5px var(--uf-sans); color: var(--uf-ink-3); } .uf-widget--ss-tax-tier .uf-ss-tax__prov b { font-family: var(--uf-mono); color: var(--uf-ink); } /* eligibility screen — fact chips + program verdict rows */ .uf-widget--ss-eligibility-screen .uf-ss-elig__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .uf-widget--ss-eligibility-screen .uf-ss-elig__facts li { font: 600 12.5px var(--uf-sans); color: var(--uf-ink-2); background: var(--uf-paper-2); border: 1px solid var(--uf-line); border-radius: 999px; padding: 6px 13px; } .uf-widget--ss-eligibility-screen .uf-ss-elig__programs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .uf-widget--ss-eligibility-screen .uf-ss-elig__program { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 11px 14px; background: var(--uf-card); border: 1px solid var(--uf-line); border-radius: 12px; } .uf-widget--ss-eligibility-screen .uf-ss-elig__name { font: 600 14.5px var(--uf-sans); color: var(--uf-ink); } .uf-widget--ss-eligibility-screen .uf-ss-elig__limit { font: 600 12.5px var(--uf-mono); color: var(--uf-ink-3); white-space: nowrap; } .uf-widget--ss-eligibility-screen .uf-ss-elig__verdict { font: 700 11.5px var(--uf-sans); text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 5px 11px; white-space: nowrap; } .uf-widget--ss-eligibility-screen .uf-ss-elig__verdict.is-yes { background: var(--uf-green-soft); color: var(--uf-green-2); } .uf-widget--ss-eligibility-screen .uf-ss-elig__verdict.is-no { background: var(--uf-ochre-soft); color: var(--uf-ochre); } /* SS what-if sliders (uf-widgets.js mounts these; reuses the lane's card vocabulary). * The earnings bar / tax stat / eligibility rows reuse the static-card classes above; * these rules style only the slider chrome the mounter adds. */ .uf-ss-wi { display: grid; gap: 12px; margin-top: 14px; } .uf-widget--ss-crossover-chart .uf-ss-wi { border-top: 1px solid var(--uf-line); padding-top: 16px; } .uf-ss-wi__head { font: 500 15px var(--uf-serif); color: var(--uf-ink-2); } .uf-ss-wi__head strong { font-family: var(--uf-mono); color: var(--uf-ink); } .uf-ss-wi__fpl { font: 600 13px var(--uf-sans); color: var(--uf-ink-3); } .uf-ss-wi__slider { width: 100%; accent-color: var(--uf-green); margin: 2px 0 6px; } .uf-ss-wi__cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .uf-ss-wi__opt { background: var(--uf-card); border: 1px solid var(--uf-line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; } .uf-ss-wi__opt span { font: 600 11px var(--uf-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--uf-ink-3); } .uf-ss-wi__opt strong { font: 700 20px var(--uf-mono); color: var(--uf-ink); } .uf-ss-wi__opt--62 { border-left: 3px solid var(--uf-ochre); } .uf-ss-wi__opt--70 { border-left: 3px solid var(--uf-green); } .uf-ss-wi__opt.is-win { background: var(--uf-green-soft); border-color: var(--uf-green); } .uf-ss-wi__opt.is-win strong { color: var(--uf-green-2); } .uf-ss-wi__verdict { margin: 0; padding: 11px 14px; background: var(--uf-paper-2); border-radius: 10px; font: 500 14px var(--uf-serif); color: var(--uf-ink); } .uf-ss-wi__legend { display: flex; flex-wrap: wrap; gap: 18px; font: 500 13.5px var(--uf-sans); color: var(--uf-ink-2); } .uf-ss-wi__legend strong { font-family: var(--uf-mono); color: var(--uf-ink); } .uf-ss-wi__sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; } .uf-ss-wi__sw--kept { background: var(--uf-green); } .uf-ss-wi__sw--wh { background: var(--uf-clay); } .uf-ss-wi--tax, .uf-ss-wi--tax .uf-ss-wi__head { text-align: center; } /* hydrated claim dashboard (uf-widgets.js builds this) */ .uf-ss-dash__head { font-family: var(--uf-mono); color: var(--uf-ink-3); margin-bottom: 10px; } .uf-ss-dash__age { color: var(--uf-green); font-size: 20px; } .uf-ss-dash__slider { width: 100%; accent-color: var(--uf-green); margin: 6px 0 18px; } .uf-ss-dash__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .uf-ss-dash__card { border: 1px solid var(--uf-line); border-radius: 12px; padding: 14px 16px; background: var(--uf-paper-2); display: flex; flex-direction: column; gap: 6px; } .uf-ss-dash__card span { font-size: 12px; color: var(--uf-ink-3); } .uf-ss-dash__card strong { font-family: var(--uf-mono); font-size: 22px; color: var(--uf-green); } /* ---- system_mindmap (M5.B): radial SVG with hover-highlight ---- */ .uf-widget--system-mindmap { background: radial-gradient(circle at 50% 45%, var(--uf-paper-2), var(--uf-card)); } .uf-mind__svg { width: 100%; height: auto; display: block; } .uf-mind__hub { fill: var(--uf-ink); } .uf-mind__hubtext { fill: var(--uf-paper); font-family: var(--uf-serif); font-weight: 600; font-size: 19px; } .uf-mind__hubsub { fill: var(--uf-ochre-2); font-family: var(--uf-mono); font-size: 9.5px; } .uf-mind__branchtext { fill: var(--uf-paper); font-family: var(--uf-sans); font-weight: 700; font-size: 12.5px; } .uf-mind__leaftext { fill: var(--uf-ink-2); font-family: var(--uf-sans); font-size: 11.5px; } .uf-mind__branch, .uf-mind__branchtext, .uf-mind__link, .uf-mind__leaf, .uf-mind__leaftext { transition: opacity .2s; } .uf-mind__branch { cursor: pointer; } /* no-JS fallback: a readable nested outline of the system */ .uf-mind__fallback { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .uf-mind__blabel { font-family: var(--uf-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--uf-ochre); margin: 0 0 4px; } .uf-mind__b ul { padding-left: 1.1em; } .uf-mind__b li { font-size: 14px; color: var(--uf-ink-2); } @media (max-width: 560px) { .uf-mind__fallback { grid-template-columns: 1fr; } } /* ---- sources_panel (M5.E): the dark "Built on the record" provenance panel ---- */ /* uf-scheme-pinned: start — NIGHT-INK PANEL: this base layer is dark by construction (night ink + cream text), safe in BOTH schemes; the C6 record re-style further down re-surfaces it on tokens. */ .uf-widget--sources-panel { background: #1C1812; color: #E8E0D2; border: 0; padding: 36px 32px; } .uf-widget--sources-panel .uf-widget__title { color: #fff; font-size: clamp(22px, 3.4vw, 28px); } /* minmax(0,1fr): a bare 1fr track's min is `auto`, so one long unbreakable mono string (a label/URL) blows the tracks past the card and the whole page overflows (S22 live walk). Cap the minimum and wrap long tokens. */ .uf-src__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } @media (max-width: 600px) { .uf-src__grid { grid-template-columns: minmax(0, 1fr); } } .uf-src { display: block; min-width: 0; overflow-wrap: anywhere; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; color: #E8E0D2; transition: background .18s, border-color .18s; } a.uf-src:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); color: #fff; } /* Each card IS an anchor: a host theme's link styles (.entry-content a / .uf-guide a — blue + underline) repaint the whole dark card into unreadable link-blue (operator- reported on a live theme). Pin the panel's own palette above theme-link specificity. */ .uf-guide a.uf-src, .uf-widget--sources-panel a.uf-src, .uf-guide a.uf-src:visited, .uf-widget--sources-panel a.uf-src:visited { color: #E8E0D2; text-decoration: none; } .uf-guide a.uf-src:hover, .uf-widget--sources-panel a.uf-src:hover { color: #fff; text-decoration: none; } .uf-guide a.uf-src .uf-src__t, .uf-widget--sources-panel a.uf-src .uf-src__t { color: #E8E0D2; } .uf-guide a.uf-src .uf-src__d, .uf-widget--sources-panel a.uf-src .uf-src__d { color: #B5AB99; } .uf-guide a.uf-src .uf-src__dt, .uf-widget--sources-panel a.uf-src .uf-src__dt { color: #9A907E; } .uf-guide a.uf-src .uf-src__o, .uf-widget--sources-panel a.uf-src .uf-src__o { color: var(--uf-ochre-2); } .uf-src__o { font-family: var(--uf-mono); font-size: 11px; color: var(--uf-ochre-2); letter-spacing: .05em; text-transform: uppercase; } .uf-src__t { font-weight: 600; margin-top: 5px; font-size: 15px; } .uf-src__d { font-size: 13px; color: #B5AB99; margin-top: 3px; } .uf-src__dt { font-family: var(--uf-mono); font-size: 11px; color: #9A907E; margin-top: 6px; } /* uf-scheme-pinned: end */ /* ---- live_calculator (M5.C): the instrument ---- */ .uf-calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); border: 1px solid var(--uf-line); border-radius: var(--uf-radius); overflow: hidden; box-shadow: var(--uf-shadow-lg); background: var(--uf-card); } @media (max-width: 720px) { .uf-calc { grid-template-columns: 1fr; } } .uf-calc__in { padding: 24px; background: var(--uf-paper-2); border-right: 1px solid var(--uf-line); } .uf-calc__out { padding: 24px; } .uf-calc__in h4, .uf-calc__out h4 { font-family: var(--uf-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--uf-ink-3); margin: 0 0 18px; font-weight: 500; } .uf-calc__field { margin-bottom: 16px; } .uf-calc__field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--uf-ink-2); margin-bottom: 6px; } .uf-calc__hint { font-weight: 400; color: var(--uf-ink-3); font-size: 12px; } .uf-calc__inwrap { position: relative; display: flex; align-items: center; } .uf-calc__pre { position: absolute; left: 12px; color: var(--uf-ink-3); font-family: var(--uf-mono); font-size: 14px; } .uf-calc input[type=number] { width: 100%; padding: 11px 12px 11px 26px; border: 1px solid var(--uf-line-2); border-radius: 10px; font-family: var(--uf-mono); font-size: 15px; background: var(--uf-card); color: var(--uf-ink); } .uf-calc input:focus { outline: none; border-color: var(--uf-green); box-shadow: 0 0 0 3px var(--uf-green-soft); } .uf-calc__stepper { display: flex; align-items: center; border: 1px solid var(--uf-line-2); border-radius: 10px; overflow: hidden; background: var(--uf-card); } .uf-calc__stepper button { width: 42px; height: 42px; border: 0; background: var(--uf-paper-2); font-size: 20px; cursor: pointer; color: var(--uf-ink-2); } .uf-calc__stepper button:hover { background: var(--uf-green-soft); color: var(--uf-green); } .uf-calc__size { flex: 1; text-align: center; font-family: var(--uf-mono); font-weight: 600; font-size: 17px; } .uf-calc__seg { display: flex; border: 1px solid var(--uf-line-2); border-radius: 10px; overflow: hidden; background: var(--uf-card); } .uf-calc__seg button { flex: 1; border: 0; background: transparent; padding: 10px 6px; font-size: 13px; font-weight: 600; color: var(--uf-ink-3); cursor: pointer; border-right: 1px solid var(--uf-line); } .uf-calc__seg button:last-child { border-right: 0; } .uf-calc__seg button.on { background: var(--uf-green); color: var(--uf-paper); } .uf-calc__toggle { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; padding: 11px 13px; border: 1px solid var(--uf-line-2); border-radius: 10px; background: var(--uf-card); font-size: 13.5px; font-weight: 600; color: var(--uf-ink-2); text-align: left; } .uf-calc__sw { width: 40px; height: 23px; border-radius: 100px; background: var(--uf-line-2); position: relative; transition: .2s; flex: none; } .uf-calc__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--uf-paper); transition: .2s; } .uf-calc__toggle.on .uf-calc__sw { background: var(--uf-green); } .uf-calc__toggle.on .uf-calc__sw::after { transform: translateX(17px); } .uf-calc__verdict { border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; border: 1px solid var(--uf-line); } .uf-calc__verdict.is-elig { background: var(--uf-green-soft); border-color: var(--uf-green-2); } .uf-calc__verdict.is-no { background: var(--uf-clay-soft); border-color: var(--uf-clay); } .uf-calc__vtop { display: flex; align-items: center; gap: 10px; } .uf-calc__vicon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--uf-paper); font-size: 17px; flex: none; } .is-elig .uf-calc__vicon { background: var(--uf-green); } .is-no .uf-calc__vicon { background: var(--uf-clay); } .uf-calc__vtext { font-family: var(--uf-serif); font-size: 19px; font-weight: 600; } .is-elig .uf-calc__vtext { color: var(--uf-green); } .is-no .uf-calc__vtext { color: var(--uf-clay); } .uf-calc__big { font-family: var(--uf-serif); font-size: 56px; font-weight: 600; color: var(--uf-green); line-height: 1; margin: 6px 0 2px; } .uf-calc__cur { font-size: 28px; vertical-align: top; color: var(--uf-ink-3); } .uf-calc__per { font-size: 16px; color: var(--uf-ink-3); font-family: var(--uf-sans); font-weight: 500; } .uf-calc__pills { display: flex; gap: 10px; margin-top: 12px; } .uf-calc__pill { flex: 1; border: 1px solid var(--uf-line); border-radius: 10px; padding: 9px 11px; background: var(--uf-card); font-size: 12.5px; } .uf-calc__pl { color: var(--uf-ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .uf-calc__pv { font-family: var(--uf-mono); font-weight: 600; margin-top: 3px; display: block; } .uf-calc__pill.pass .uf-calc__pv { color: var(--uf-green); } .uf-calc__pill.fail .uf-calc__pv { color: var(--uf-clay); } .uf-calc__ledger { border-top: 1px dashed var(--uf-line-2); padding-top: 14px; } .uf-calc__lrow { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--uf-line); } .uf-calc__lrow:last-child { border-bottom: 0; } .uf-calc__lname { flex: 1; color: var(--uf-ink-2); } .uf-calc__lname small { display: block; color: var(--uf-ink-3); font-size: 11.5px; } .uf-calc__lamt { font-family: var(--uf-mono); font-weight: 600; } .uf-calc__lamt.minus { color: var(--uf-clay); } .uf-calc__lrow.is-sub { font-weight: 600; border-top: 1.5px solid var(--uf-ink); border-bottom: 0; margin-top: 3px; padding-top: 10px; } .uf-calc__lrow.is-sub .uf-calc__lname { color: var(--uf-ink); } .uf-calc__lrow.is-ben .uf-calc__lname, .uf-calc__lrow.is-ben .uf-calc__lamt { color: var(--uf-green); } /* SCOPE v2 F-SS3: the minimum-benefit floor line — ochre reads as "a rule lifted this", set apart from the green benefit total. */ .uf-calc__lrow.is-floor .uf-calc__lname, .uf-calc__lrow.is-floor .uf-calc__lamt { color: var(--uf-ochre); } .uf-calc__note { font-size: 12px; color: var(--uf-ink-3); margin-top: 14px; font-style: italic; font-family: var(--uf-serif); line-height: 1.5; } .uf-calc__fallback { color: var(--uf-ink-2); font-size: 14px; } /* --------------------------------------------------------- responsive/a11y */ @media (max-width: 600px) { .uf-ss-dash__cards { grid-template-columns: 1fr; } .uf-widget { padding: 18px 18px; } } @media (prefers-reduced-motion: reduce) { .uf-guide a, .uf-ss-dash__slider { transition: none; } } /* ============================================================ CHROME (M6) * Editorial reading chrome — hero, stat ribbon, numbered sections, reading * progress, minimap nav, callouts, formula, timeline, deduction cards, FAQ * accordion. All scoped under .uf-guide so it can never restyle a host theme. * .uf-guide--standalone turns the embeddable card into a full-page layout for * the single-file export. */ .uf-guide--standalone { background: transparent; border-radius: 0; padding: 0 28px 80px; max-width: 1140px; margin: 0 auto; overflow-x: clip; } .uf-guide--standalone::before { /* film grain, like the reference */ content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .uf-guide--standalone > * { position: relative; z-index: 2; } /* ---- reading progress ---- */ .uf-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999; background: linear-gradient(90deg, var(--uf-ochre), var(--uf-green)); transition: width .1s linear; } /* ---- minimap nav ---- */ .uf-minimap { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 14px; } .uf-minimap a { display: flex; align-items: center; gap: 10px; border: 0; color: var(--uf-ink-3); font: 12px/1 var(--uf-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; } .uf-minimap .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--uf-line-2); background: transparent; transition: .25s; flex: none; } .uf-minimap .label { opacity: 0; transform: translateX(6px); transition: .25s; white-space: nowrap; pointer-events: none; } .uf-minimap a:hover .label { opacity: 1; transform: none; } .uf-minimap a.is-active .dot { background: var(--uf-green); border-color: var(--uf-green); transform: scale(1.3); } .uf-minimap a.is-active { color: var(--uf-ink); } @media (max-width: 1020px) { .uf-minimap { display: none; } } /* ---- hero ---- */ .uf-hero { padding: 80px 0 40px; } .uf-eyebrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; } .uf-badge { font: 12px/1 var(--uf-mono); letter-spacing: .05em; padding: 6px 12px; border: 1px solid var(--uf-line-2); border-radius: 100px; color: var(--uf-ink-2); background: var(--uf-card); } .uf-badge--live { color: var(--uf-green); border-color: var(--uf-green); } .uf-badge--live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--uf-green); margin-right: 7px; vertical-align: middle; animation: uf-pulse 2s infinite; } @keyframes uf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .uf-hero h1 { font-size: clamp(40px, 6.6vw, 82px); letter-spacing: -.025em; max-width: 15ch; margin: 0; } .uf-hero h1 em { font-style: italic; color: var(--uf-green); } .uf-strike { position: relative; color: var(--uf-ink-3); } .uf-strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 3px; background: var(--uf-clay); transform: scaleX(0); transform-origin: left; animation: uf-strike 1s .6s forwards cubic-bezier(.7,0,.3,1); } @keyframes uf-strike { to { transform: scaleX(1); } } .uf-dek { font-size: clamp(19px, 2.1vw, 23px); color: var(--uf-ink-2); max-width: 60ch; margin: 26px 0 0; font-weight: 400; } .uf-dek strong { color: var(--uf-ink); font-weight: 600; } .uf-byline { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 34px; font: 14px/1.4 var(--uf-mono); color: var(--uf-ink-3); } .uf-byline strong { color: var(--uf-ink); font-family: var(--uf-sans); font-weight: 600; } /* hero stat ribbon */ .uf-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--uf-line); border-radius: var(--uf-radius); overflow: hidden; margin-top: 50px; background: var(--uf-card); box-shadow: var(--uf-shadow); } .uf-ribbon__cell { padding: 22px 20px; border-right: 1px solid var(--uf-line); } .uf-ribbon__cell:last-child { border-right: 0; } .uf-ribbon__n { font-family: var(--uf-serif); font-size: 34px; font-weight: 600; color: var(--uf-green); line-height: 1; } .uf-ribbon__l { font-size: 13px; color: var(--uf-ink-3); margin-top: 8px; line-height: 1.3; } @media (max-width: 760px) { .uf-ribbon { grid-template-columns: 1fr 1fr; } .uf-ribbon__cell:nth-child(2) { border-right: 0; } .uf-ribbon__cell:nth-child(1), .uf-ribbon__cell:nth-child(2) { border-bottom: 1px solid var(--uf-line); } } /* ---- numbered sections ---- */ .uf-sec { padding: 64px 0; position: relative; } .uf-sechead { max-width: 62ch; margin-bottom: 34px; } .uf-sechead .num { font: 13px/1 var(--uf-mono); color: var(--uf-ochre); letter-spacing: .1em; } .uf-sechead h2 { font-size: clamp(30px, 4vw, 46px); margin: 10px 0 0; } .uf-sechead p { color: var(--uf-ink-2); font-size: 19px; margin: 16px 0 0; } .uf-rule { height: 1px; background: linear-gradient(90deg, var(--uf-line-2), transparent); margin: 0 0 34px; } /* ---- entrance reveal (load-time, self-completing so static exports never hide content) ---- */ .uf-reveal { animation: uf-rise .6s both cubic-bezier(.2,.7,.2,1); } @keyframes uf-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---- callout ---- */ .uf-callout { border-left: 3px solid var(--uf-ochre); background: var(--uf-ochre-soft); padding: 22px 26px; border-radius: 0 14px 14px 0; margin: 32px 0; font-size: 18px; color: var(--uf-ink-2); } .uf-callout strong { color: var(--uf-ochre); } .uf-callout--green { border-color: var(--uf-green); background: var(--uf-green-soft); } .uf-callout--green strong { color: var(--uf-green); } /* ---- formula (§3) ---- */ .uf-formula { display: grid; gap: 4px; font-family: var(--uf-mono); font-size: clamp(15px, 2.4vw, 21px); line-height: 2.1; } .uf-formula .c-ink-3 { color: var(--uf-ink-3); } .uf-formula .c-ink { color: var(--uf-ink); font-weight: 600; } .uf-formula .c-clay { color: var(--uf-clay); } .uf-formula .c-ochre { color: var(--uf-ochre); } .uf-formula .c-green { color: var(--uf-green); } /* ---- timeline (§7) ---- */ .uf-timeline { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; } .uf-tstep { position: relative; padding: 0 14px; } .uf-tstep .tline { position: absolute; top: 18px; left: 50%; right: -50%; height: 2px; background: var(--uf-line-2); z-index: 0; } .uf-tstep:last-child .tline { display: none; } .uf-tstep .tcirc { width: 38px; height: 38px; border-radius: 50%; background: var(--uf-green); color: var(--uf-paper); display: flex; align-items: center; justify-content: center; font: 600 18px var(--uf-serif); position: relative; z-index: 1; margin-bottom: 14px; } .uf-tstep:nth-child(4) .tcirc, .uf-tstep:nth-child(5) .tcirc { background: var(--uf-ochre); } .uf-tstep h4 { font-size: 18px; margin: 0 0 6px; } .uf-tstep p { font-size: 14px; color: var(--uf-ink-2); line-height: 1.5; margin: 0; max-width: none; } .uf-tstep .tt { font: 12px/1 var(--uf-mono); color: var(--uf-ochre); margin-top: 8px; display: block; } @media (max-width: 820px) { .uf-timeline { grid-template-columns: 1fr; gap: 18px; } .uf-tstep .tline { display: none; } } /* ---- deduction cards (§5) ---- */ .uf-dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1000px; } @media (max-width: 860px) { .uf-dgrid { grid-template-columns: 1fr; } } .uf-dcard { background: var(--uf-card); border: 1px solid var(--uf-line); border-radius: 18px; padding: 26px; box-shadow: var(--uf-shadow); transition: transform .2s ease, box-shadow .2s ease; transform-style: preserve-3d; position: relative; overflow: hidden; } .uf-dcard::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; pointer-events: none; background: radial-gradient(circle at var(--mx,50%) var(--my,0%), var(--uf-specular), transparent 55%); } .uf-dcard:hover::after { opacity: 1; } .uf-dcard:hover { box-shadow: var(--uf-shadow-lg); } .uf-dcard .dn { font: 12px/1 var(--uf-mono); color: var(--uf-ochre); letter-spacing: .05em; } .uf-dcard .amt { font-family: var(--uf-serif); font-size: 38px; font-weight: 600; color: var(--uf-green); margin: 8px 0 4px; line-height: 1; } .uf-dcard h4 { font-size: 20px; margin: 0 0 8px; } .uf-dcard p { font-size: 14.5px; color: var(--uf-ink-2); line-height: 1.55; margin: 0; max-width: none; } .uf-dcard .who { display: inline-block; margin-top: 12px; font: 12px/1 var(--uf-mono); padding: 4px 9px; border-radius: 100px; background: var(--uf-paper-2); color: var(--uf-ink-3); } /* ---- FAQ accordion (§9) ---- */ .uf-faqx details { border: 1px solid var(--uf-line); border-radius: 14px; background: var(--uf-card); margin-bottom: 12px; overflow: hidden; transition: .2s; } .uf-faqx details[open] { box-shadow: var(--uf-shadow); border-color: var(--uf-line-2); } .uf-faqx summary { padding: 20px 24px; cursor: pointer; font: 600 19px var(--uf-serif); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--uf-ink); } .uf-faqx summary::-webkit-details-marker { display: none; } .uf-faqx summary .pm { font: 400 26px var(--uf-sans); color: var(--uf-ochre); transition: .25s; flex: none; } .uf-faqx details[open] summary .pm { transform: rotate(45deg); } .uf-faqx .ans { padding: 0 24px 22px; color: var(--uf-ink-2); font-size: 16px; } /* ---- footer ---- */ .uf-foot { padding: 48px 0 30px; text-align: center; color: var(--uf-ink-3); font-size: 14px; } .uf-foot .lockup { font: 600 22px var(--uf-serif); color: var(--uf-ink); } .uf-foot .updated { font: 12px/1 var(--uf-mono); color: var(--uf-ink-3); margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .uf-reveal { animation: none; } .uf-strike::after { animation: none; transform: scaleX(1); } .uf-badge--live::before { animation: none; } } /* ============================================================ CINEMA (C1) * The cinematic layer over the Living Guide. Rules of the layer: * - CSS + tokens only; zero new HTTP requests, zero frameworks. * - Ambient light rides the card BACKGROUND stack (no pseudo-elements, no * stacking-context games — nothing a component can collide with). * - Scroll-choreography is opt-in: uf-chrome.js stamps `uf-io` on * ONLY when IntersectionObserver exists and the reader has not asked for * reduced motion. Without JS (or under reduce) every rule below is inert * and the page is fully visible — same fail-open contract as .uf-reveal. * - Motion is presentation ONLY. Numbers stay server-computed/corpus-cited; * the count-up in uf-chrome.js animates TOWARD the rendered figure and * restores the exact server string at rest (covenant / ADR-026). */ /* ---- ambient card light: specular hairline + twin aurora washes ---- */ /* (C6: flat poster surfaces — aurora removed) */ .uf-widget { transition: opacity .75s var(--uf-ease), transform .55s var(--uf-ease), box-shadow .45s var(--uf-ease), border-color .45s var(--uf-ease); } /* Long guides: skip rendering off-screen cards entirely (render-perf win on * the widget-dense pages; the estimate keeps scrollbar drift small). */ .uf-guide .uf-widget { content-visibility: auto; contain-intrinsic-size: auto 340px; } /* ---- number theater ---- */ /* Stable digit widths so live/counting figures never jitter the layout. */ .uf-stats__value, .uf-ribbon__n, .uf-dcard .amt, .uf-bd__amt, .uf-bar__amount, .uf-breakdown__total strong, .uf-bd__total strong, .uf-calc__big, .uf-cascade__total strong, .uf-num-live { font-variant-numeric: tabular-nums lining-nums; } /* The money moment: headline totals get gradient ink. Row amounts keep their * solid semantic colors (eligible green / ineligible grey stays legible). */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .uf-ribbon__n, .uf-dcard .amt, .uf-calc__big, .uf-bd__total strong, .uf-breakdown__total strong, .uf-cascade__total strong { background-image: var(--uf-grad-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* ---- scroll choreography (armed by uf-chrome.js via html.uf-io) ---- */ /* The waiting state is a READABLE dim (.35), never a blank: a throttled webview * that misses every reveal signal still hands the reader a legible page (the old * .001 stranded whole articles as ghost cards — live sighting 2026-07-13). And a * pure-CSS backstop animation force-completes any card still waiting after 6s, * so no JS failure mode past arming can keep content hidden. */ @media (prefers-reduced-motion: no-preference) { html.uf-io .uf-guide :is(.uf-widget, .uf-callout, .uf-dcard, .uf-tstep, .uf-ribbon):not(.uf-in) { opacity: .35; transform: translateY(18px) scale(.988); animation: uf-reveal-backstop .8s var(--uf-ease) 6s forwards; } html.uf-io .uf-guide :is(.uf-callout, .uf-dcard, .uf-tstep, .uf-ribbon) { transition: opacity .75s var(--uf-ease), transform .75s var(--uf-ease); } @keyframes uf-reveal-backstop { to { opacity: 1; transform: none; } } } /* ---- focus: a visible, branded ring everywhere interactive ---- */ .uf-guide :is(a, button, input, select, summary, [tabindex]):focus-visible, .uf-widget :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--uf-ring); outline-offset: 2px; } /* ---- the provenance monolith: elevate "Built on the record" ---- */ /* The sources panel is the invariant's public face — it gets the deepest * treatment: night-ink base, warm aurora, an eyebrow kicker, cards that lift. */ /* uf-scheme-pinned: start — NIGHT-INK MONOLITH: night base + whisper-alpha auras + black lift shadow; dark by construction, safe in BOTH schemes. */ .uf-widget--sources-panel { background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 10%), radial-gradient(720px 340px at 88% -14%, rgba(227,174,82,.13), transparent 60%), radial-gradient(560px 300px at 4% 116%, rgba(98,181,133,.11), transparent 62%), #16130E; box-shadow: var(--uf-shadow-lg); } .uf-widget--sources-panel .uf-widget__title::before { content: "Provenance ledger"; display: block; font: 500 11px/1 var(--uf-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--uf-ochre-2); margin-bottom: 10px; } .uf-widget--sources-panel .uf-src { transition: background .18s, border-color .18s, transform .3s var(--uf-ease), box-shadow .3s var(--uf-ease); } .uf-widget--sources-panel a.uf-src:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.35); } /* uf-scheme-pinned: end */ @media (prefers-reduced-motion: reduce) { .uf-widget, .uf-widget--sources-panel .uf-src { transition: none; } .uf-widget:hover { transform: none; } } /* ==================================================== INVITATION ACCENTS (C2) * The affordance rule, applied: if a reader can TOUCH it, it speaks ACT teal — * the page's only cool hue, so controls advance off the warm field on contrast * alone. Values stay emerald (money), rewards flash gold, urgency speaks coral * (never alarm-red — this audience arrives stressed), psych instruments run * violet via a scoped token override. Semantics, not decoration. */ /* Touchables → ACT */ .uf-guide input[type="range"], .uf-widget input[type="range"] { accent-color: var(--uf-act); } .uf-limits__seg button.on { background: var(--uf-act); } .uf-limits__seg button:not(.on):hover { color: var(--uf-act); } .uf-limits__tbl tbody tr.is-hl { background: var(--uf-act-soft); } .uf-calc input[type=number]:focus { border-color: var(--uf-act); box-shadow: 0 0 0 3px var(--uf-act-soft); } .uf-calc__stepper button:hover { background: var(--uf-act-soft); color: var(--uf-act); } .uf-calc__seg button.on { background: var(--uf-act); color: var(--uf-paper); } .uf-calc__toggle.on .uf-calc__sw { background: var(--uf-act); } /* Urgency → CORAL (deadline family + the cliff's warning voice) */ .uf-widget--deadline-callout { border-left: 3px solid var(--uf-coral); } .uf-deadline__date { color: var(--uf-coral); font-weight: 600; } .uf-cliff__markers { color: var(--uf-coral); } /* Reward → GOLD (the payoff line under a story/prize moment) */ .uf-dcard .dn { color: var(--uf-gold); } /* Insight → VIOLET: the psychology instruments re-tune the affordance tokens, * so every control inside them speaks violet with zero per-component rules. */ .uf-widget--sleep-debt, .uf-widget--worry-decoder, .uf-widget--habit-loop, .uf-widget--bias-spotter, .uf-widget--focus-cost, .uf-widget--reframe-lab, .uf-widget--the-room, .uf-widget--mind-story, .uf-widget--mind-solver, .uf-widget--cinematic-personality { --uf-act: var(--uf-violet); --uf-act-2: var(--uf-violet); --uf-act-soft: var(--uf-violet-soft); --uf-ring: rgba(95, 81, 196, .38); --uf-glow-act: var(--uf-glow-violet); --uf-glow-ochre: var(--uf-glow-violet); /* their aurora leans introspective */ --uf-grad-act: linear-gradient(140deg, var(--uf-violet), var(--uf-violet) 70%); } /* ========================================================= POSTERS (C6) * The poster IS the widget. Radical reduction after ten rounds: every widget * is two flat bands — a deep-forest title band and a white field where one * giant figure lives. No letterbox, no eyebrows, no subtitles, no gradients, * no glows, no lines on text. Forest #07352A · action #12925F · white #FDFBF7 * · one small signal #E2543A. Three elements per widget, maximum drama from * scale and the hard split alone. */ .uf-widget { --uf-paper: #FDFBF7; --uf-paper-2: #EDF5EF; --uf-card: #FDFBF7; --uf-ink: #10382B; --uf-ink-2: #33574A; --uf-ink-3: #6E8B7D; --uf-line: rgba(7, 53, 42, .14); --uf-line-2: rgba(7, 53, 42, .28); --uf-green: #0E6B45; --uf-green-2: #12925F; --uf-green-soft: #E3F2E9; --uf-ochre: #12925F; --uf-ochre-2: #0E6B45; --uf-ochre-soft: #E3F2E9; --uf-clay: #D64533; --uf-clay-soft: #FAE6DF; --uf-act: #12925F; --uf-act-2: #0E6B45; --uf-act-soft: #E3F2E9; --uf-gold: #0E6B45; --uf-gold-2: #12925F; --uf-gold-soft: #E3F2E9; --uf-coral: #D64533; --uf-coral-soft: #FAE6DF; --uf-trust: #1F6FB2; --uf-trust-soft: #E7F0F9; --uf-amber: #B45309; --uf-amber-2: #D97706; --uf-amber-soft: #FCEFDB; --uf-violet: #0F8B7E; --uf-violet-soft: #E1F2F0; --uf-ring: rgba(18, 146, 95, .5); --uf-grad-ink: linear-gradient(180deg, #0E6B45, #0E6B45); --uf-grad-act: linear-gradient(180deg, #12925F, #0E6B45); /* card chrome tokens (the .uf-dark-ok block up top flips these in dark) */ --uf-card-line: rgba(7, 53, 42, .18); --uf-card-line-2: rgba(7, 53, 42, .3); --uf-lift: 0 14px 34px rgba(7, 53, 42, .12); background: var(--uf-card); border: 1px solid var(--uf-card-line); border-radius: 14px; overflow: hidden; padding: 0 24px 20px; box-shadow: none; color: var(--uf-ink); } @media (hover: hover) { .uf-widget:hover { transform: none; box-shadow: var(--uf-lift); border-color: var(--uf-card-line-2); } } /* Interactive widgets render their own content directly on the card — there is no dark .uf-widget__title band and no self-boxed .uf-stage to supply the top inset, so the base card's `padding: 0 24px 20px` (top zeroed so the band can bleed to the edge) left content flush against the top edge (the "gap too narrow" report). Restore a real top inset; title-band and stage widgets already carry their own top spacing. */ .uf-interactive.uf-widget:not(:has(.uf-widget__title, .uf-stage)) { padding-top: 22px; } /* The dark band: the title runs edge to edge, flush. */ /* uf-scheme-pinned: start — DEEP BANDS: the forest title band (and its cream text) is the poster identity anchor and is dark by construction — it holds verbatim in BOTH schemes. */ .uf-widget__title { margin: 0 -24px 18px; padding: 18px 24px; background: #07352A; color: #FDFBF7; font-size: clamp(19px, 2.4vw, 25px); border-bottom: 0; } /* uf-scheme-pinned: end */ .uf-widget__caption { position: static; margin: 14px 0 0; text-align: left; font: 400 12.5px/1.5 var(--uf-sans); font-style: normal; color: var(--uf-ink-3); text-shadow: none; } /* Figures: flat forest ink, poster scale, nothing painted on them. */ .uf-widget :is(.uf-calc__big, .uf-bd__total strong, .uf-breakdown__total strong, .uf-cascade__total strong, .uf-stats__value, .uf-dcard .amt) { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: var(--uf-green); filter: none; } /* THE STACK: flag bands run flush; the total is a dark crown band. */ .uf-widget--benefit-breakdown :is(.uf-bd__row, .uf-breakdown__bar) { margin: 0 -24px; padding: 13px 24px; } /* uf-scheme-pinned: start — DEEP BANDS: the crown total band is dark by construction (forest + mint/cream text); holds verbatim in BOTH schemes. */ .uf-widget--benefit-breakdown :is(.uf-bd__total, .uf-breakdown__total) { margin: 0 -24px; padding: 16px 24px; background: #07352A; border: 0; } /* Anchoring (Tversky-Kahneman 1974): the total leads — first number seen * anchors every judgment after it. Hydrated stack reorders; the builder * change mirrors it for static markup. */ .uf-widget--benefit-breakdown .uf-bd { display: flex; flex-direction: column; } .uf-widget--benefit-breakdown .uf-bd__total { order: -1; } .uf-widget--benefit-breakdown :is(.uf-bd__total, .uf-breakdown__total) span { color: #8FD7B8; } .uf-widget--benefit-breakdown :is(.uf-bd__total strong, .uf-breakdown__total strong) { color: #FFFFFF; font-family: var(--uf-serif); font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.02em; } /* uf-scheme-pinned: end */ .uf-widget--benefit-breakdown .uf-bd__track { display: none; } /* THE PREMIERE: white field, small signal line, the date is the poster. */ .uf-widget--deadline-callout { padding-left: 24px; } .uf-widget--deadline-callout::before { content: none; } .uf-deadline__label { font: 600 11px/1 var(--uf-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--uf-coral); } .uf-deadline__label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uf-coral); margin-right: 8px; vertical-align: middle; animation: uf-pulse 2s infinite; } .uf-deadline__date { font: 700 clamp(40px, 7vw, 72px)/1 var(--uf-serif); letter-spacing: -.03em; color: var(--uf-ink); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; filter: none; transform: none; border: 0; padding: 0; margin: 10px 0 4px; } @media (prefers-reduced-motion: reduce) { .uf-deadline__label::before { animation: none; } } /* THE RECORD: white field, centered credit column, no dividers. */ .uf-widget--sources-panel { background: var(--uf-card); color: var(--uf-ink); margin-top: 28px; padding: 0 24px 22px; box-shadow: none; } /* uf-scheme-pinned: start — DEEP BANDS: cream title text on the pinned forest title band above; the pair travels together in BOTH schemes. */ .uf-widget--sources-panel .uf-widget__title { text-align: left; color: #FDFBF7; } /* uf-scheme-pinned: end */ .uf-widget--sources-panel .uf-widget__title::before { content: none; } .uf-widget--sources-panel .uf-src__grid { display: block; max-width: 560px; margin: 6px auto 0; } .uf-widget--sources-panel .uf-src { display: block; background: transparent; border: 0; box-shadow: none; text-align: center; padding: 13px 8px; color: var(--uf-ink); transition: background .2s; } .uf-widget--sources-panel a.uf-src:hover { background: var(--uf-paper-2); transform: none; box-shadow: none; color: var(--uf-ink); } .uf-widget--sources-panel .uf-src__o { font: 500 10px/1 var(--uf-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--uf-trust); } .uf-widget--sources-panel .uf-src__t { font: 600 17px/1.3 var(--uf-serif); color: var(--uf-ink); margin-top: 5px; } .uf-widget--sources-panel .uf-src__d { color: var(--uf-ink-2); font-size: 13px; margin-top: 3px; } .uf-widget--sources-panel .uf-src__dt { color: var(--uf-ink-3); font-family: var(--uf-mono); font-size: 11px; margin-top: 5px; } /* Re-pin the record's credit text ABOVE the night-panel link pins (those carry `.uf-guide a.uf-src …` specificity so host-theme link colors can't bleed — but they also beat the record re-style above, leaving cream night-panel text on the light record field). Same anti-theme armor, token colors. */ .uf-guide .uf-widget--sources-panel a.uf-src, .uf-guide .uf-widget--sources-panel a.uf-src:visited, .uf-guide .uf-widget--sources-panel a.uf-src:hover { color: var(--uf-ink); } .uf-guide .uf-widget--sources-panel a.uf-src .uf-src__t { color: var(--uf-ink); } .uf-guide .uf-widget--sources-panel a.uf-src .uf-src__d { color: var(--uf-ink-2); } .uf-guide .uf-widget--sources-panel a.uf-src .uf-src__dt { color: var(--uf-ink-3); } .uf-guide .uf-widget--sources-panel a.uf-src .uf-src__o { color: var(--uf-trust); } /* Lean panel (0.8.6): the top credits show; the rest live in a native

. The reserve height matches ~8 credits so content-visibility no longer jumps the scroll when the panel paints (the generic .uf-widget reserve of 340px was set for a short widget, not a long credit list). */ .uf-guide .uf-widget--sources-panel { contain-intrinsic-size: auto 720px; } .uf-widget--sources-panel .uf-src__more { max-width: 560px; margin: 4px auto 0; text-align: center; } .uf-widget--sources-panel .uf-src__moretoggle { cursor: pointer; list-style: none; display: inline-block; font: 500 11px/1 var(--uf-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--uf-trust); padding: 10px 18px; border: 1px solid var(--uf-card-line); border-radius: 100px; transition: background .2s; } .uf-widget--sources-panel .uf-src__moretoggle::-webkit-details-marker { display: none; } .uf-widget--sources-panel .uf-src__moretoggle::marker { content: ""; } .uf-widget--sources-panel .uf-src__moretoggle:hover { background: var(--uf-paper-2); } .uf-widget--sources-panel .uf-src__more[open] > .uf-src__moretoggle { margin-bottom: 4px; } /* Psych pages: CALM NAVY. The instruments re-tune the WHOLE palette to a deep navy-on-white family — the operator's chosen navy (#12263F) as ink and header band, a navy-blue accent one step lighter for interactive parts, and WHITE as the surface so blue is never the "skin". Full-token override, all 17 instruments; benefits / SS / civic widgets are untouched. */ .uf-widget:is(.uf-widget--sleep-debt, .uf-widget--worry-decoder, .uf-widget--habit-loop, .uf-widget--bias-spotter, .uf-widget--focus-cost, .uf-widget--reframe-lab, .uf-widget--the-room, .uf-widget--mind-story, .uf-widget--mind-solver, .uf-widget--the-fork, .uf-widget--rep-curve, .uf-widget--the-stranger-seed, .uf-widget--the-stranger, .uf-widget--echo, .uf-widget--unfinished-sentence, .uf-widget--atlas, .uf-widget--cinematic-personality) { --uf-paper: #FBFCFE; --uf-paper-2: #E9F0F8; --uf-card: #FFFFFF; --uf-ink: #12263F; --uf-ink-2: #3B4D67; --uf-ink-3: #64748B; --uf-line: rgba(18, 38, 63, .14); --uf-line-2: rgba(18, 38, 63, .26); --uf-green: #234A7D; --uf-green-2: #2E5C99; --uf-green-soft: #E7EEF7; --uf-ochre: #B0824F; --uf-ochre-2: #976C3E; --uf-ochre-soft: #F5EBDD; --uf-act: #234A7D; --uf-act-2: #17335A; --uf-act-soft: #E7EEF7; --uf-ring: rgba(35, 74, 125, .42); --uf-grad-act: linear-gradient(140deg, #2E5C99, #234A7D 70%); --uf-card-line: rgba(18, 38, 63, .18); --uf-card-line-2: rgba(18, 38, 63, .30); } /* uf-scheme-pinned: start — DEEP BANDS: the psych title band is the operator's navy, dark by construction; holds verbatim in BOTH schemes. */ .uf-widget:is(.uf-widget--sleep-debt, .uf-widget--worry-decoder, .uf-widget--habit-loop, .uf-widget--bias-spotter, .uf-widget--focus-cost, .uf-widget--reframe-lab, .uf-widget--the-room, .uf-widget--mind-story, .uf-widget--mind-solver, .uf-widget--the-fork, .uf-widget--rep-curve, .uf-widget--the-stranger-seed, .uf-widget--the-stranger, .uf-widget--echo, .uf-widget--unfinished-sentence, .uf-widget--atlas, .uf-widget--cinematic-personality) .uf-widget__title { background: #12263F; } /* uf-scheme-pinned: end */ /* Dark restatement of the navy re-tune: the scoped LIGHT override above ties the top * .uf-dark-ok token block on specificity and comes later, so without this its dark-navy accent * would sit invisibly on a dark psych card. In dark, lift the accent (and instrument fills) to a * readable sky-blue; same roles, dark values, under the same opt-in. */ @media (prefers-color-scheme: dark) { .uf-dark-ok .uf-widget:is(.uf-widget--sleep-debt, .uf-widget--worry-decoder, .uf-widget--habit-loop, .uf-widget--bias-spotter, .uf-widget--focus-cost, .uf-widget--reframe-lab, .uf-widget--the-room, .uf-widget--mind-story, .uf-widget--mind-solver, .uf-widget--the-fork, .uf-widget--rep-curve, .uf-widget--the-stranger-seed, .uf-widget--the-stranger, .uf-widget--echo, .uf-widget--unfinished-sentence, .uf-widget--atlas, .uf-widget--cinematic-personality), .uf-widget.uf-dark-ok:is(.uf-widget--sleep-debt, .uf-widget--worry-decoder, .uf-widget--habit-loop, .uf-widget--bias-spotter, .uf-widget--focus-cost, .uf-widget--reframe-lab, .uf-widget--the-room, .uf-widget--mind-story, .uf-widget--mind-solver, .uf-widget--the-fork, .uf-widget--rep-curve, .uf-widget--the-stranger-seed, .uf-widget--the-stranger, .uf-widget--echo, .uf-widget--unfinished-sentence, .uf-widget--atlas, .uf-widget--cinematic-personality) { --uf-green: #6FA0DA; --uf-green-2: #8FB8E6; --uf-green-soft: #17263B; --uf-act: #6FA0DA; --uf-act-2: #8FB8E6; --uf-act-soft: #17263B; --uf-ring: rgba(111, 160, 218, .5); --uf-grad-act: linear-gradient(180deg, #6FA0DA, #3E6DA3); } } /* ------------------------------------ psychology "stage" runtime: NAVY NIGHT recolour * The LIVE psych widgets are hydrated by uf-psych-runtime.js into a dark cinematic * "stage / glass" design whose colours are HARDCODED in that runtime (purple-black bg + * cream/lavender text + amber-gold accent), NOT --uf-* tokens — so the palette block above * (which only styles the flat SSR fallback) can't reach what real JS visitors see. This * recolours the mounted stage design to a soothing navy night. Scoped to the runtime's own * .uf-stage / .ufc roots — these are PSYCH-ONLY (benefits dark widgets use .uf-syl/.uf-case; * snapstory .ms__* lives outside .uf-stage), so it auto-covers EVERY psych stage widget * (constellation, calibrator, the-cabinet, myth-autopsy, one-sentence, … present & future) * without a slug list, and never touches benefits. !important beats the runtime's injected *