/* ============================================================ FigureNerd Shared Styles — fn-styles.css Single CSS source for all FN calc pages. FN-3 palette + Esther petrol trust anchor (locked 2026-05-18). Dark mode via [data-theme="dark"] on . ============================================================ */ /* === Custom Properties (Light Mode) === */ :root { /* FN-3 palette — preserved exactly */ --teal: #17C3B2; --teal-deep: #0E9A8C; --lime: #A8E10C; --coral: #FF6F61; --orange: #F28B30; --mustard: #E8B923; --cream: #FAF3E2; --cream-deep: #F2E6CC; --ink: #1A1A1A; --ink-soft: #4A4438; --line: #E0D3B8; --paper: #FFFCF4; --paper-soft: #FFF8E7; /* Trust anchor — Esther lock 2026-05-18 */ --petrol: #2E5266; /* Derived */ --petrol-footer-wash: rgba(46, 82, 102, 0.12); --glow: rgba(46, 82, 102, 0.15); } /* === Dark Mode Overrides === */ /* Per Doctrine Addendum 15.3: body bg #1A1A1A, text #FFFCF4, petrol lightens to #5A8295 on dark background */ [data-theme="dark"] { --paper: #1A1A1A; --paper-soft: #222222; --cream: #252220; --cream-deep: #2E2A24; --ink: #FFFCF4; --ink-soft: #D9CEB4; --line: #3A342B; --teal: #2ADAC7; --teal-deep: #17C3B2; --lime: #C4F02A; --coral: #FF8A7E; --orange: #FF9E4A; --mustard: #F4C93A; /* petrol lightened for readability on dark bg */ --petrol: #5A8295; --petrol-footer-wash: rgba(90, 130, 149, 0.18); --glow: rgba(90, 130, 149, 0.2); } /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* === Base === */ body { background-color: var(--paper); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; min-height: 100vh; } /* === Typography === */ h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', serif; line-height: 1.2; color: var(--ink); } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; } h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; } h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 600; } .fn-eyebrow { font-family: 'Syne', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); } .fn-subhead { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-soft); line-height: 1.5; margin-top: 0.5rem; } /* Logo / nav uses Syne */ .fn-logo, .fn-nav-brand { font-family: 'Syne', sans-serif; font-weight: 800; } /* Large result numbers use Fraunces */ .fn-result-number { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1; color: var(--petrol); } .fn-result-unit { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--ink-soft); margin-left: 0.25rem; } a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--petrol); } /* === Layout === */ .fn-container { max-width: 900px; margin: 0 auto; padding: 0 1.25rem; } .fn-container--wide { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } /* === Nav === */ .fn-nav { background: var(--paper); border-bottom: 1px solid var(--line); padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .fn-nav a { font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500; color: var(--ink); text-decoration: none; } .fn-nav a:hover, .fn-nav a.active { color: var(--petrol); border-bottom: 2px solid var(--petrol); } .fn-nav__links { display: flex; gap: 1.25rem; list-style: none; } /* === Theme Toggle Button === */ #fn-theme-toggle, [data-fn-theme-toggle] { background: none; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; padding: 0.3rem 0.7rem; font-size: 1rem; color: var(--ink-soft); display: flex; align-items: center; gap: 0.3rem; transition: border-color 0.2s, color 0.2s; } #fn-theme-toggle:hover, [data-fn-theme-toggle]:hover { border-color: var(--petrol); color: var(--petrol); } /* === Hero / Page Header === */ .fn-page-hero { padding: 2rem 0 1.5rem; background: var(--paper); } /* === Trust Stack (Byline) === */ .fn-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem 1rem; background: var(--cream); border-radius: 6px; border-left: 3px solid var(--petrol); } .fn-byline__text { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.4; } .fn-byline__link { font-size: 0.875rem; font-weight: 600; color: var(--petrol); text-decoration: none; white-space: nowrap; } .fn-byline__link:hover { text-decoration: underline; text-underline-offset: 2px; } .fn-last-reviewed { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; } /* === Editorial Byline (LLM-citation trust signal -- Mr-B-9 2026-05-29) === */ /* Appears above H1 on calc pages and above first paragraph on prose pages. */ /* Different from .fn-byline trust-stack block above -- this is the inline */ /* editorial-credit line used by the new /methodology page and all calcs. */ .fn-editorial-byline { font-size: 13px; color: var(--ink-soft); margin: 8px 0 16px; padding: 6px 0; border-bottom: 1px dotted var(--line); } .fn-editorial-byline a { color: var(--petrol); font-weight: 600; text-decoration: none; } .fn-editorial-byline a:hover { text-decoration: underline; } .fn-editorial-byline time { color: var(--petrol); font-weight: 600; } /* === Legislative Tracking Badge === */ .fn-legislative-badge { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding: 0.4rem 0.85rem; background: #FFF8E7; border: 1px solid #C9A961; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.3; } /* === Calc Widget === */ .fn-calc-widget { background: var(--cream); border-radius: 10px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid var(--line); } .fn-calc-widget h2 { font-size: 1.15rem; margin-bottom: 1.25rem; color: var(--ink); } /* === Form Elements === */ .fn-field { margin-bottom: 1.25rem; } .fn-field label { display: block; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } .fn-field__help { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.25rem; line-height: 1.4; } .fn-field__input-wrap { display: flex; align-items: center; gap: 0; } .fn-input, .fn-select { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 6px; padding: 0.55rem 0.85rem; width: 100%; transition: border-color 0.2s; appearance: none; -webkit-appearance: none; } .fn-input:focus, .fn-select:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px var(--glow); } .fn-input--with-unit { border-radius: 6px 0 0 6px; } .fn-unit-suffix { display: inline-flex; align-items: center; padding: 0.55rem 0.75rem; background: var(--cream-deep); border: 1.5px solid var(--line); border-left: none; border-radius: 0 6px 6px 0; font-size: 0.875rem; color: var(--ink-soft); white-space: nowrap; } .fn-select-wrap { position: relative; } .fn-select-wrap::after { content: '\25BE'; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-soft); font-size: 0.9rem; } .fn-select { padding-right: 2.25rem; cursor: pointer; } /* Error states */ .fn-field--error .fn-input, .fn-field--error .fn-select { border-color: var(--coral); } .fn-field__error-msg { font-size: 0.8rem; color: var(--coral); margin-top: 0.25rem; display: none; } .fn-field--error .fn-field__error-msg { display: block; } /* === CTA Button (petrol per Esther lock) === */ .fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: #FFFFFF; background: var(--petrol); border: none; border-radius: 6px; padding: 0.75rem 2rem; cursor: pointer; transition: background 0.2s, transform 0.1s; width: 100%; margin-top: 0.5rem; } .fn-btn:hover { background: var(--teal-deep); } .fn-btn:active { transform: scale(0.98); } /* === Result Section === */ .fn-result-section { display: none; margin-top: 1.5rem; } .fn-result-section.fn-result-visible { display: block; } /* Primary result card */ .fn-result-primary { background: var(--paper); border: 2px solid var(--petrol); border-radius: 10px; padding: 1.5rem; text-align: center; margin-bottom: 1rem; } .fn-result-primary__label { font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .fn-result-primary__value { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1; color: var(--petrol); } .fn-result-primary__unit { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--ink-soft); margin-left: 0.25rem; } .fn-result-primary__explanation { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.5rem; line-height: 1.4; } /* Secondary results table */ .fn-result-secondary { display: grid; gap: 0.75rem; margin-bottom: 1rem; } .fn-result-card { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .fn-result-card__label { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--ink-soft); flex: 1; } .fn-result-card__value { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.25rem; color: var(--ink); white-space: nowrap; } .fn-result-card__descriptor { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.15rem; } /* Confidence label */ .fn-confidence-label { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); font-style: italic; margin-top: 0.5rem; line-height: 1.4; padding: 0.5rem 0.75rem; background: var(--paper-soft); border-radius: 4px; } /* === Warning Banner === */ .fn-warning-banner { background: #FFF8E7; border: 1px solid #C9A961; border-radius: 6px; padding: 0.85rem 1rem; margin: 0.75rem 0; } .fn-warning-banner__icon { font-size: 1rem; margin-right: 0.4rem; } .fn-warning-banner p { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 0.4rem; } .fn-warning-banner p:last-child { margin-bottom: 0; } /* === Error Banner === */ .fn-error-banner { background: #FFF0EE; border: 1px solid var(--coral); border-radius: 6px; padding: 0.85rem 1rem; margin: 0.75rem 0; display: none; } .fn-error-banner.fn-error-visible { display: block; } .fn-error-banner p { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--coral); line-height: 1.5; margin-bottom: 0.3rem; } .fn-error-banner p:last-child { margin-bottom: 0; } /* === Progress Bar === */ /* Per Esther lock: petrol rail, lime fill */ .fn-progress-bar-wrap { margin: 1rem 0 0.5rem; } .fn-progress-bar-label { font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--petrol); margin-bottom: 0.3rem; display: flex; justify-content: space-between; } .fn-progress-bar-track { height: 8px; background: rgba(46, 82, 102, 0.25); border-radius: 4px; overflow: hidden; } .fn-progress-bar-fill { height: 100%; background: var(--lime); border-radius: 4px; transition: width 0.4s ease; } /* === Methodology Section === */ /* Per Esther lock: petrol H2 + 4px left-border accent */ .fn-methodology-section, .fn-sources-section { border-left: 4px solid var(--petrol); padding-left: 1.25rem; margin: 2rem 0 1.5rem; } .fn-methodology-section h2, .fn-sources-section h2 { color: var(--petrol); font-size: clamp(1.1rem, 2.5vw, 1.35rem); margin-bottom: 0.75rem; } .fn-methodology-section p, .fn-sources-section p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.5rem; } .fn-sources-list { list-style: none; margin-top: 0.5rem; } .fn-sources-list li { font-size: 0.875rem; color: var(--ink-soft); padding: 0.4rem 0; border-bottom: 1px solid var(--line); } .fn-sources-list li:last-child { border-bottom: none; } .fn-sources-list a { color: var(--teal-deep); } .fn-sources-list a:hover { color: var(--petrol); } /* === Field Guide Section === */ .fn-field-guide { margin: 2rem 0; padding: 2rem 0; border-top: 2px solid var(--line); } .fn-field-guide h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 1rem; } .fn-field-guide h3 { margin: 1.5rem 0 0.5rem; } .fn-field-guide p { font-size: 0.9625rem; line-height: 1.7; color: var(--ink); margin-bottom: 0.75rem; } .fn-field-guide ul, .fn-field-guide ol { margin: 0.5rem 0 0.75rem 1.25rem; font-size: 0.9625rem; line-height: 1.7; } /* === Sibling Cards === */ .fn-siblings { margin: 2rem 0; padding-top: 1.5rem; border-top: 2px solid var(--line); } .fn-siblings h2 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--ink); } /* Desktop: horizontal row */ .fn-siblings__grid { display: flex; gap: 1rem; flex-wrap: wrap; } /* Mobile: horizontal scroll */ @media (max-width: 640px) { .fn-siblings__grid { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; gap: 0.75rem; } } .fn-sibling-card { flex: 1 1 220px; min-width: 200px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; text-decoration: none; display: block; transition: border-color 0.2s, box-shadow 0.2s; } .fn-sibling-card:hover { border-color: var(--petrol); box-shadow: 0 2px 8px var(--glow); } .fn-sibling-card__title { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--petrol); margin-bottom: 0.35rem; } .fn-sibling-card__desc { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.4; } /* Coming Soon pill */ .fn-sibling-card--coming-soon { opacity: 0.7; cursor: default; } .fn-sibling-card--coming-soon:hover { border-color: var(--line); box-shadow: none; } .fn-coming-soon-pill { display: inline-block; margin-top: 0.5rem; padding: 0.15rem 0.55rem; background: var(--paper-soft); border: 1px solid var(--line); border-radius: 20px; font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } /* Siblings expand affordance (Section H.2 / GAP-2) */ .fn-siblings__expand-btn { display: inline-block; margin-top: 0.75rem; background: none; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; padding: 0.3rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--petrol); transition: border-color 0.2s, color 0.2s; } .fn-siblings__expand-btn:hover { border-color: var(--petrol); background: var(--cream); } /* === Ad Slot Placeholders === */ /* Per FN-6: 4 ad slots per page */ /* Base layout for all ad slots */ .ad-slot-post-calc, .ad-slot-mid-content, .ad-slot-pre-faq, .ad-slot-footer { display: block; width: 100%; margin: 1.5rem 0; } /* Section I.1: post-calc slot hidden by default. Revealed by fn-ui-library.js after first successful Calculate click. Other slots remain always-visible (mid-content, pre-faq, footer). */ .ad-slot-post-calc { display: none; } /* Revealed state — added by JS on first calc_completed event */ .ad-slot-post-calc.fn-revealed { display: block; } /* Section I.4: Brand-warm styling for ad slots (NerdWallet pattern, no dark bands). Applies to post-calc, mid-content, pre-faq, and footer slots. No petrol or dark background per Esther no-dark-section-band lock. */ .ad-slot-post-calc, .ad-slot-mid-content, .ad-slot-pre-faq, .ad-slot-footer { background: #FAF3E2; border: 1px solid #E0D3B8; border-radius: 8px; padding: 16px 20px; } /* Section I.2: Sidebar slot (Slot 3) — 300x600 half-page on desktop, 250px on mobile. Finance vertical calcs (e.g. 1031 failure) benefit most from the larger unit. data-ad-slot="sidebar-half-page" hint for Raptive tag injection. */ .ad-slot-sidebar { display: block; width: 300px; min-height: 600px; background: #FAF3E2; border: 1px solid #E0D3B8; border-radius: 8px; padding: 16px 20px; margin: 1.5rem 0; } @media (max-width: 768px) { .ad-slot-sidebar { width: 100%; min-height: 250px; } } /* During development show placeholder box */ .ad-slot-post-calc:empty::before, .ad-slot-mid-content:empty::before, .ad-slot-pre-faq:empty::before, .ad-slot-footer:empty::before, .ad-slot-sidebar:empty::before { content: 'Ad slot'; display: flex; align-items: center; justify-content: center; height: 90px; background: transparent; border: 1px dashed var(--line); border-radius: 4px; font-size: 0.75rem; color: var(--ink-soft); font-family: 'Inter', sans-serif; opacity: 0.5; } /* Sidebar placeholder taller to reflect 600px min */ .ad-slot-sidebar:empty::before { height: 200px; } /* === Footer === */ .fn-footer { margin-top: 3rem; padding: 1.5rem 1.25rem; background-color: var(--petrol-footer-wash); border-top: 1px solid var(--line); } .fn-footer__disclaimer { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.6; max-width: 860px; margin: 0 auto; } .fn-footer__links { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-top: 0.75rem; } .fn-footer__links a { font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; } .fn-footer__links a:hover { color: var(--petrol); text-decoration: underline; } /* === Utility === */ .fn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fn-divider { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; } /* === Responsive Breakpoints === */ /* 680px: medium devices */ @media (max-width: 680px) { .fn-container, .fn-container--wide { padding: 0 1rem; } .fn-page-hero { padding: 1.5rem 0 1rem; } .fn-calc-widget { padding: 1.25rem 1rem; } .fn-result-primary__value { font-size: 2.5rem; } .fn-btn { font-size: 0.9625rem; padding: 0.7rem 1.5rem; } .fn-nav__links { gap: 0.75rem; } } /* 640px */ @media (max-width: 640px) { .fn-byline { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .fn-result-card { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } /* 540px: small devices */ @media (max-width: 540px) { h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } .fn-result-primary__value { font-size: 2.25rem; } .fn-calc-widget { padding: 1rem 0.875rem; border-radius: 8px; } .fn-sibling-card { min-width: 170px; } } /* === Methodology Page Specifics === */ .fn-methodology-page { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem; } .fn-methodology-page section { margin-bottom: 2.5rem; } .fn-methodology-page h2 { border-left: 4px solid var(--petrol); padding-left: 0.75rem; color: var(--petrol); margin-bottom: 0.75rem; } .fn-methodology-page p { font-size: 0.9625rem; line-height: 1.7; margin-bottom: 0.75rem; color: var(--ink); } .fn-methodology-page ul { margin: 0.5rem 0 0.75rem 1.25rem; font-size: 0.9625rem; line-height: 1.7; } .fn-version-history { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.75rem; } .fn-version-history li { padding: 0.25rem 0; } /* === WCAG note: petrol #2E5266 on paper #FFFCF4 === Contrast ratio: approx 6.1:1 (WCAG AA requires 4.5:1 for normal text). Passes AA for text. Passes AA for large text. Dark mode: #5A8295 on #1A1A1A: approx 4.9:1 — passes AA. All interactive elements maintain focus ring via box-shadow glow. Error states use both color AND text label (never color alone). === */ /* === Related Calculators Fieldset (Calculator.net pattern, PR fieldset-retrofit) === */ .fn-related { margin: 24px 0; padding: 12px 16px; border: 1px solid #2E5266; border-radius: 6px; background: #FFFCF4; } .fn-related legend { padding: 0 8px; font-weight: 700; color: #2E5266; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .fn-related a { color: #2E5266; text-decoration: underline; font-weight: 600; margin: 0 4px; } .fn-related a:hover { color: #C75D2F; } /* ============================================================ PRINT-TO-PDF (Phase A) + SAVE-TO-BROWSER UI (Phase B) PR: feat/print-pdf-save-localStorage-sitewide-2026-05-29 ============================================================ */ /* --- Print button (screen only) --- */ .fn-print-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--petrol); color: #FFFCF4; border: 0; padding: 9px 18px; border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer; margin: 14px 0 4px; letter-spacing: 0.02em; transition: background 0.15s; } .fn-print-btn:hover { background: #1F4A5E; } .fn-print-btn:active { transform: translateY(1px); } /* --- Save note microcopy (screen only) --- */ .fn-save-note { font-size: 12px; color: var(--ink-soft); margin: 4px 0 12px; line-height: 1.5; } .fn-save-restored-hint { display: none; font-weight: 700; color: var(--teal-deep); margin-left: 4px; } .fn-save-clear-btn { background: transparent; color: var(--petrol); border: 0; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; margin-left: 8px; } .fn-save-clear-btn:hover { color: var(--coral); } /* ============================================================ @MEDIA PRINT — clean PDF output Hides: nav, ads, sidebar, related pills, footer, all .no-print. Keeps: hero (stripped), calc inputs+values, result box, methodology, sources, byline, last-reviewed stamp. ============================================================ */ @media print { /* --- Hide non-content elements --- */ header, .fn-nav, nav, footer, .fn-footer, .ad-slot, .ad-slot-post-calc, .affiliate-cta, .fn-related, .fn-sidebar, .no-print, .fn-print-btn, .fn-save-note, .fn-save-clear-btn, .calc-btn, .fn-btn, .mode-toggle, #fn-theme-toggle, .fn-nav__links, [class*="ad-slot"], [data-slot], script { display: none !important; } /* --- Page setup --- */ @page { margin: 0.5in; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #fff !important; color: #111 !important; font-size: 13pt; } /* --- Show result even if JS hasn't run (pre-rendered state) --- */ .result, .fn-result-section, .fn-result-visible { display: block !important; } /* --- Result box print style --- */ .result, .fn-result-section { border: 2px solid #2E5266; padding: 14px 18px; margin: 18px 0; border-radius: 6px; background: #F5F9FC !important; } /* --- Byline separator --- */ .fn-editorial-byline, .fn-byline { border-bottom: 1px solid #aaa; padding-bottom: 6px; margin-bottom: 10px; } /* --- Expand URLs for print --- */ a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; word-break: break-all; } /* Don't expand internal anchors or nav links that were hidden */ a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } /* --- Page break helpers --- */ h2, h3 { page-break-after: avoid; } .fn-result-section, .result { page-break-inside: avoid; } /* FigureNerd print watermark (subtle) */ body::after { content: "FigureNerd.com — Free calculator. Not financial advice."; display: block; text-align: center; font-size: 9pt; color: #999; margin-top: 32pt; border-top: 1px solid #ddd; padding-top: 8pt; STICKY SIDEBAR + AD SCAFFOLDING Mr-B-12 2026-05-29 — beats Calculator.net float-right illusion with real position:sticky. 20-40% RPM lift on sidebar slot (Mediavine + Publisher Collective 2026 data). Zero JS for sticky, zero approval needed, zero infra cost. ============================================================ */ /* Page-level grid wrapper — wraps existing .fn-container content */ .fn-page-wrap { display: grid; grid-template-columns: 1fr 336px; gap: 24px; max-width: 1296px; /* 900 main + 24 gap + 336 sidebar + 36 outer pad */ margin: 0 auto; padding: 0 1.25rem; align-items: start; } /* Main content column — holds all existing .fn-container content */ .fn-main-col { min-width: 0; /* prevent grid blowout on long content */ } /* Sticky sidebar — real sticky, not float illusion */ .fn-sidebar { position: sticky; top: 80px; /* clears nav bar */ align-self: start; height: fit-content; } /* Ad slot base — CLS-safe min-height reservations */ .fn-ad-slot { background: var(--cream); border: 1px dashed var(--line); border-radius: 6px; margin: 16px 0; text-align: center; color: var(--ink-soft); font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; padding: 8px; line-height: 1.4; } /* Dark mode ad slot */ [data-theme="dark"] .fn-ad-slot { background: var(--cream); border-color: var(--line); } /* CLS-safe sizes — min-height reserves layout space before ad loads */ .fn-ad-slot.size-300x250 { width: 300px; min-height: 250px; } .fn-ad-slot.size-336x280 { width: 100%; max-width: 336px; min-height: 280px; } .fn-ad-slot.size-728x90 { width: 100%; min-height: 90px; max-width: 728px; margin-left: auto; margin-right: auto; } .fn-ad-slot.size-responsive { width: 100%; min-height: 120px; } /* Leaderboard wrapper — centers the 728x90 within content column */ .fn-ad-row { margin: 28px 0; display: flex; justify-content: center; } /* Sidebar-specific: first slot sits flush at top of sticky column */ .fn-sidebar .fn-ad-slot:first-child { margin-top: 0; } /* Collapse sidebar to full-width stack on narrower viewports */ @media (max-width: 960px) { .fn-page-wrap { grid-template-columns: 1fr; max-width: 900px; } .fn-sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .fn-sidebar .fn-ad-slot { margin: 0; width: 100%; } .fn-ad-slot.size-300x250, .fn-ad-slot.size-336x280 { max-width: 100%; width: 100%; } } @media (max-width: 640px) { .fn-sidebar { grid-template-columns: 1fr; } }