/* ======================================================================== DEPLOY PATH: /css/simulators.bb693273.css Tepuy Solutions — shared calculator sidebar shell Version: 2026-08-18 Single source of truth for the sidebar chrome shared by Mortgage, Offset vs Shares and LMI: sidebar surface, eyebrow/subtitle block, accordion header, and the Calculate-button footer. Extracted from mortgage-polish.css / offset-polish.css / lmi-polish.css §1/§2/§3/§5 per the 2026-08 sidebar chrome audit. Step 1.5 (2026-08-18) adds Retirement's Advanced-mode sidebar surface and eyebrow/subtitle (#advModePanel .sidebar-title/.sidebar-sub) — see §2 below. Retirement's accordion header/card and Calculate-button footer are NOT included here: they use a structurally different treatment (bordered white card with box-shadow vs the other three's borderless card, a 14px/10px radius scale vs 8px, a translucent-circle chevron badge the others don't have, and — critically — a non-important `display` on .sidebar-footer that js/sidebar-mode.js relies on to toggle the footer between Simple and Advanced mode; this file's shared footer rule is `!important` and would break that toggle if it applied to Retirement). Left fully local to css/sidebar-polish.css. Simple mode (Retirement's default view, no accordion at all) uses none of these selectors and is unaffected either way. Step 3 (2026-08-19, PvS sidebar rebuild) adds PvS's accordion/eyebrow/ footer/slider via a PARALLEL `.sidebar ...` selector branch alongside every `body.calc .calc-aside ...` one, rather than putting PvS's and

on the body.calc/.calc-aside pattern itself. PvS_style.css has its own ~2000-line CANONICAL PATTERN comment (on its old .sidebar rule) explaining why a prior session deliberately kept PvS's outer shell on its own class names instead of adopting .calc-aside directly: PvS's sticky/height/disclaimer-bar-clearance math is tuned against values (60px navbar, a measured 54px disclaimer height) that don't match tepuy.css's own body.calc .calc-aside rule (var(--stick-top): 80px) — adopting .calc-aside on the outer shell would hand that higher-specificity tepuy.css rule the sticky/top/height properties and silently reintroduce the exact disclaimer-bar-overlap bug PR #83 fixed. The parallel-branch approach gets PvS the SAME shared declarations for the pieces this step actually targets (card/card-header/chevron/ card-content/footer button/slider) without touching that layout math at all — `.sidebar` is confirmed collision-safe (grepped: no bare `.sidebar` rule anywhere in tepuy.css) and PvS is the only page that both loads this file and has a `.sidebar` element, so these branches are effectively PvS-exclusive. Load AFTER tepuy.css and BEFORE the page's own -polish.css file, same relative order tepuy.css already used for the pre-existing (unused, non-!important) "SHARED CALCULATOR SIDEBAR SURFACE" block at tepuy.css:4122 — that block never actually applied because these three polish files' !important rules always won; this file supersedes it. All selectors are scoped under body.calc .calc-aside (or body.calc .calc-aside .card* for the bare `aside .card*` rules the three source files used) so nothing here can land on a non-calculator page — see the audit's "tepuy.css collision risks" section (.section-title, .sidebar-scroll, .sidebar-title/.sidebar-sub already bit once in PR #83; this file avoids repeating that class of bug). Scope of this file, deliberately: ONLY declarations verified byte-identical (or provably no-op-different, e.g. padding shorthand variants of the same value) across all three source files. Every place the three files actually diverge in rendered output is called out below and left as a small, commented override in the page's own -polish.css file instead of being forced into agreement here. Retirement is partially in scope as of Step 1.5 (see above); PvS is still fully untouched — out of scope for this pass. ======================================================================== */ /* ── Design tokens — same values mortgage/offset/lmi already render today ── */ body.calc .calc-aside { --sb-bg: #f4f8f6; --sb-border: #dce8e1; --sb-muted: #9aada6; --cardH-bg: #1a5236; --cardH-open: #21673f; --cardH-text: #ffffff; --inp-border: #c8ddd3; --inp-focus: #1a6b4a; --transition: all .18s cubic-bezier(.4,0,.2,1); } /* NOTE: deliberately NOT reusing tepuy.css's --brand/--cardH-bg tokens — --brand resolves to #1f4c3b there (tepuy.css:39), a different green than the #1a5236 these three calculators actually render. Reusing it would be a silent visual change. --transition is the same value PvS_style.css:109 and retirement.css:67 already use — a deliberate port from the UI polish audit. Applying it below to the accordion header/chevron/Calculate-button transitions IS an intentional visible change for Mortgage/Offset/LMI (smoother easing, not a neutral refactor) — see the audit's finding #5. */ /* ══════════════════════════════════════════════════════════════════════════ 1. SIDEBAR SURFACE ══════════════════════════════════════════════════════════════════════════ */ body.calc .calc-aside, body.calc .calc-aside .sidebar-panel { background: var(--sb-bg) !important; } body.calc .calc-aside .sidebar-scroll { background: transparent !important; scrollbar-width: thin; scrollbar-color: #c8ddd3 transparent; } body.calc .calc-aside .sidebar-scroll::-webkit-scrollbar { width: 5px; } body.calc .calc-aside .sidebar-scroll::-webkit-scrollbar-thumb { background: #c8ddd3; border-radius: 4px; } /* Wide-tier flush-right-edge border treatment (border-radius:0, border-right only) is INTENTIONALLY NOT included here — mortgage/offset gate it behind @container calc-layout (min-width:800px), lmi gates the identical declarations behind @media (min-width:1025px). Those are different thresholds (container width vs viewport width); merging them would change which width LMI's sidebar gets the flush treatment at. Left duplicated in each page's own -polish.css file — see the audit's "genuine divergence" note. Do not merge without visual verification across 800–1025px. */ /* ══════════════════════════════════════════════════════════════════════════ 2. SIDEBAR EYEBROW / SUBTITLE Page-prefixed class names preserved as-is (markup on each page already uses .mort-/.ovs-/.lmi- — renaming would be a markup change). Retirement's Advanced-mode panel uses generic .sidebar-title/.sidebar-sub instead of a page prefix — already scoped safely via the #advModePanel ancestor (a unique ID, not a bare global class), so it's added here rather than renamed in markup. ══════════════════════════════════════════════════════════════════════════ */ .mort-sidebar-title, .ovs-sidebar-title, .lmi-sidebar-title, .pvs-sidebar-title, #advModePanel .sidebar-title { font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--cardH-bg, #1a5236) !important; padding: 0.35rem 0.9rem 0 !important; margin: 0 0 0.1rem !important; border-bottom: none !important; } .mort-sidebar-sub, .ovs-sidebar-sub, .lmi-sidebar-sub, .pvs-sidebar-sub, #advModePanel .sidebar-sub { font-size: 0.72rem !important; color: var(--sb-muted, #9aada6) !important; padding: 0 0.9rem !important; margin: 0 0 0.5rem !important; line-height: 1.4 !important; } /* ══════════════════════════════════════════════════════════════════════════ 3. ACCORDION HEADER — card, header, chevron, content open/close Form-row/input styling (mortgage/lmi's own "§4 FORM ROWS") is out of scope for this pass — not part of the audit's Step 1 ask. ══════════════════════════════════════════════════════════════════════════ */ body.calc .calc-aside .card, body.calc .calc-aside .tp-card, .sidebar .card, .sidebar .tp-card { border: none !important; border-radius: 8px !important; margin-bottom: 0.35rem !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transition: none !important; } body.calc .calc-aside .card:hover, .sidebar .card:hover { box-shadow: none !important; border-color: transparent !important; } /* LMI's .card uses overflow:hidden, not visible — real difference, kept as a targeted override in lmi-polish.css rather than forced here. */ body.calc .calc-aside .card-header, .sidebar .card-header { height: 40px !important; padding: 0 2.4rem 0 0.9rem !important; font-size: 0.775rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--cardH-text, #ffffff) !important; background: var(--cardH-bg, #1a5236) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; cursor: pointer !important; user-select: none !important; position: relative !important; transition: var(--transition, all .18s cubic-bezier(.4,0,.2,1)) !important; } body.calc .calc-aside .card-header:hover, .sidebar .card-header:hover { background: var(--cardH-open, #21673f) !important; } body.calc .calc-aside .card-header[aria-expanded="true"], .sidebar .card-header[aria-expanded="true"] { border-radius: 8px 8px 0 0 !important; } body.calc .calc-aside .card-header h4, .sidebar .card-header h4 { font: inherit !important; color: inherit !important; margin: 0 !important; line-height: 1 !important; } /* SVG chevron */ body.calc .calc-aside .card-header::after, .sidebar .card-header::after { content: '' !important; position: absolute !important; right: 11px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: 12px 12px !important; background-repeat: no-repeat !important; background-position: center !important; background-color: transparent !important; border: none !important; box-shadow: none !important; font-size: 0 !important; transition: var(--transition, all .18s cubic-bezier(.4,0,.2,1)) !important; } body.calc .calc-aside .card-header[aria-expanded="true"]::after, .sidebar .card-header[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg) !important; } /* Card content: CSS-driven open/close. padding is deliberately declared via the bare `aside .card-content` selector, NOT body.calc .calc-aside — tepuy.css:3721 has its own narrow- width rule (body.calc .calc-aside .card-content { padding: 0.45rem 0.9rem !important }, inside @container calc-layout max-width:799.98px) that already out-specifies bare selectors at mobile widths in the original site (all three source files used bare `aside .card-content` for padding). Matching that here, rather than out-specifying it, keeps mobile spacing exactly as it was — see the sidebar audit's tepuy.css collision notes. Every other .card-content property is safely scoped. */ body.calc .calc-aside .card-content { display: block !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; background: #ffffff !important; transition: max-height 0.3s ease, opacity 0.22s ease, padding 0.3s ease !important; } aside .card-content { padding: 0 !important; } body.calc .calc-aside .card-content.open, body.calc .calc-aside .card-content:not([hidden]).open { max-height: 3600px !important; overflow: visible !important; opacity: 1 !important; } aside .card-content.open { padding: 0.65rem 0.9rem 0.85rem !important; } /* NOT including the aside .card-content:not([hidden]).open variant here: :not([hidden]) contributes attribute-selector specificity, so that form ties with (and, by source order, wins against) tepuy.css's narrow-tier rule above — mortgage-polish.css originally had that extra selector and so already won this tie; offset/lmi didn't and lost it, ending up with tepuy's 0.45rem/0.9rem at mobile widths instead. Keeping the shared rule at offset/lmi's original (losing) specificity and restoring mortgage's extra selector locally in mortgage-polish.css preserves both outcomes. */ body.calc .calc-aside .card-content[hidden] { display: block !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } /* PvS's .sidebar .card-content — a plain, self-contained block rather than folded into the bare `aside .card-content` lines above: those exist only to lose a specificity tie against tepuy.css's body.calc .calc-aside narrow-width rule (see the comment above), which doesn't exist for PvS at all (PvS isn't under body.calc .calc-aside). PvS's padding can just be declared directly, !important, no tie to worry about. */ .sidebar .card-content { display: block !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; background: #ffffff !important; padding: 0 !important; transition: max-height 0.3s ease, opacity 0.22s ease, padding 0.3s ease !important; } .sidebar .card-content.open { max-height: 3600px !important; overflow: visible !important; opacity: 1 !important; padding: 0.65rem 0.9rem 0.85rem !important; } .sidebar .card-content[hidden] { display: block !important; max-height: 0 !important; opacity: 0 !important; overflow: hidden !important; } /* Suppress transitions during init (identical in all three source files) */ body.calc .calc-aside.no-transitions .card-content, body.calc .calc-aside.no-transitions .card-header { transition: none !important; } /* ══════════════════════════════════════════════════════════════════════════ 5. SIDEBAR FOOTER — Calculate button + hint text only. The Save/Load/Share scenario row (.ret-scenario-row/.ret-scen-btn) is NOT included: offset's version has real differences from mortgage/lmi (different button background color #f4f8f6 vs #f0f5f2, missing :active/:disabled states, missing letter-spacing) — merging it safely needs its own visual-diff pass, left duplicated for now. Every selector here is guarded with :not(:has(#advModePanel)) — found during Step 1.5's verification, not assumed. Retirement's .sidebar-footer has the same class name and DOM shape as mortgage/offset/lmi's, so simply linking this file on retirement.html (to pick up §1/§2 below) also exposed retirement's footer to this section's !important rules — permanently showing the Advanced-mode footer in Simple mode too (an !important stylesheet rule always beats an inline style, so js/sidebar-mode.js's style.display = 'none' toggle stopped working), and silently flipping retirement's Calculate button from its 10px (--tp-radius-control) radius to this file's hardcoded 8px. The guard keeps this section exactly as Step 1 shipped it for mortgage/offset/lmi (none of them have #advModePanel) while leaving retirement's footer fully local to sidebar-polish.css, as intended. ══════════════════════════════════════════════════════════════════════════ */ body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer, .sidebar .sidebar-footer { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; padding: 0.6rem !important; flex-shrink: 0 !important; border-top: 1px solid var(--sb-border, #dce8e1) !important; background: var(--sb-bg, #f4f8f6) !important; } /* PvS's .sidebar never contains #advModePanel, so the guard above is unnecessary for it (kept only on the body.calc branch, for the reason documented in the comment above this section). */ body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer #runBtn, body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer .btn.btn-primary, .sidebar .sidebar-footer #runBtn, .sidebar .sidebar-footer .btn.btn-primary { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 42px !important; font-size: 0.88rem !important; font-weight: 700 !important; color: #ffffff !important; background: linear-gradient(135deg, #1a5236 0%, #247857 100%) !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(26,82,54,0.22) !important; transition: var(--transition, all .18s cubic-bezier(.4,0,.2,1)) !important; box-sizing: border-box !important; } body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer #runBtn:hover, body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer .btn.btn-primary:hover, .sidebar .sidebar-footer #runBtn:hover, .sidebar .sidebar-footer .btn.btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(26,82,54,0.3) !important; } body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer #runBtn:active, body.calc .calc-aside:not(:has(#advModePanel)) .sidebar-footer .btn.btn-primary:active, .sidebar .sidebar-footer #runBtn:active, .sidebar .sidebar-footer .btn.btn-primary:active { transform: translateY(0) !important; } /* letter-spacing on #runBtn is NOT shared: mortgage/lmi explicitly set 0.03em, offset sets nothing (inherits 0.2px from elsewhere in tepuy.css — an inherited value, not a knowable "default" to restore by keyword). Each page's own -polish.css re-declares what it needs; see mortgage- polish.css / lmi-polish.css. */ .mort-calc-hint, .ovs-calc-hint, .lmi-calc-hint, .pvs-calc-hint { font-size: 0.68rem !important; color: var(--sb-muted, #9aada6) !important; text-align: center !important; margin: 0 !important; } /* line-height is NOT shared for the same reason: mortgage/lmi explicitly set 1.35, offset sets nothing (inherits 1.45 from body in tepuy.css). Restored per-page below rather than guessed here. */ /* ══════════════════════════════════════════════════════════════════════════ 6. RANGE SLIDERS — ported from css/PvS_style.css:666-676 (UI polish audit finding #3). Pure element-selector CSS, no PvS markup dependency (PvS's own .range-wrap/.range-val wrapper classes are NOT included — those are layout/label classes tied to PvS's markup, out of scope here). Colors swapped from PvS's --gold accent to this file's --cardH-bg green token and --inp-border, so a slider styled from here matches the existing accordion/input palette instead of PvS's gold. No calculator currently has outside PvS — confirmed via grep across calculators/*.html before and after this change — so this is a pure addition with zero rendered effect today. Scoped under body.calc .calc-aside (PvS's own version is an unscoped bare selector) to match this file's collision-avoidance convention. ══════════════════════════════════════════════════════════════════════════ */ body.calc .calc-aside input[type="range"], .sidebar input[type="range"] { flex: 1 !important; -webkit-appearance: none !important; appearance: none !important; height: 3px !important; background: var(--inp-border, #c8ddd3) !important; border-radius: 99px !important; outline: none !important; } body.calc .calc-aside input[type="range"]::-webkit-slider-thumb, .sidebar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 14px !important; height: 14px !important; background: var(--cardH-bg, #1a5236) !important; border-radius: 50% !important; cursor: pointer !important; box-shadow: 0 0 6px rgba(26,82,54,.35) !important; } /* PvS is now the consumer this section's header comment mentioned as "zero rendered effect today" — Step 3 (2026-08-19) points PvS's own sliders at this shared rule and removes its local gold-accent copy from PvS_style.css. --inp-border/--cardH-bg are defined only on body.calc .calc-aside (see the token block near the top of this file) — PvS's .sidebar is a different subtree and doesn't inherit them, so both var() calls above needed an explicit fallback added (#c8ddd3 / #1a5236, the same literal values the token block itself uses) or PvS's slider background/thumb would resolve to nothing. Confirmed this fallback path is what actually renders for PvS — see the verification screenshots/report for this step. /* ─── Load-scenario dropdown: keep it from collapsing ────────────────────── .ret-load-dropdown is inserted as a flex item of the sidebar's flex column (.sidebar-panel > .sidebar-scroll / dropdown / .sidebar-footer) by js/calc-scenario.js, js/ovs-scenario.js, js/mortgage-scenario.js and js/lmi-scenario.js. It sets overflow:hidden, and per the flexbox spec a flex item whose overflow is not `visible` gets an automatic minimum main size of 0 rather than its content size. So under space pressure from .sidebar-scroll (long sidebar, several accordions open, or a short viewport) it shrinks below its content and clips its own list — the dropdown opens showing a header and one or two rows, which reads as "I have fewer saved scenarios than I do". Measured before this rule, 1440x900, 8 saved scenarios, accordions open: property_vs_shares box 236px / content 234px 7 of 8 rows (correct) retirement box 146px / content 254px 4 of 8 rows mortgage box 162px / content 254px 4 of 8 rows lmi box 130px / content 254px 3 of 8 rows offset_vs_shares box 127px / content 254px 3 of 8 rows property_vs_shares was already correct because css/calculators.css gives its .scenario-load-dropdown the identical protection (added 2026-08-30 for this same collapse). This is that fix applied to the other four, in the one stylesheet all five calculators load, rather than four more copies. Declared here and not in the four *-polish.css files on purpose: those load AFTER this file but none of them declares flex-shrink, so this value stands and there is a single place to change it. */ .ret-load-dropdown { flex-shrink: 0; } /* ─── Sidebar repeating groups: wrap the fields instead of squeezing them ── A repeating row with more than about four fields cannot fit a sidebar column. The investment-property repeater added in #182 put SEVEN columns (value, growth, loan, repayment, net rent, sell age, remove) into a single `grid-template-columns` track list. Measured at 1440x900 with two properties entered, every input was narrower than its own content: ip-value $750,000 box 51px / content 82px -> "$750," ip-loan $420,000 box 46px / content 82px -> "$420(" ip-rent $26,000 box 42px / content 73px -> "$26" ip-growth 4.5 box 32px / content 39px -> "4.!" ip-sellage 68 box 30px / content 48px 10 of 12 inputs truncated at 1440x900, and 10 of 12 again at 390x844. The fix is to stop treating one property as one ROW and treat it as a small CARD whose fields wrap. `repeat(auto-fit, minmax(...))` is the deliberate choice: the column count follows whatever width the component is given, with no media query and no reference to the sidebar's own structure. That matters because Retirement and Property vs Shares have had the deep CSS styling pass and offset_vs_shares / lmi / mortgage have not — this rule does not care which kind of sidebar it lands in, so the pattern can be reused on the un-upgraded three unchanged. Each field carries its own label, which also removes the separate uppercase header row. That header duplicated the row builder's `grid-template-columns` in js/calc-init.js and had to be kept in sync with it by hand — the exact consolidation seam this repo keeps reopening. */ .repeater-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr)); gap: 0.45rem 0.5rem; align-items: end; padding: 0.55rem 0.6rem 0.5rem; margin-bottom: 0.5rem; border: 1px solid #dce8e2; border-radius: 8px; background: #fbfdfc; } .repeater-field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; /* lets the field shrink inside its grid track */ } /* #4a655a, not the #7a948a the old uppercase header row used: at 0.62rem on the card's #fbfdfc ground that colour measures 3.19:1, below the 4.5:1 WCAG AA minimum for small text. axe reported 14 new contrast nodes on the first cut of this layout for exactly that reason. #4a655a measures 6.23:1 on the same ground and stays in the same green-grey family. */ .repeater-field > span { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #4a655a; line-height: 1.2; } .repeater-card input { width: 100%; min-width: 0; box-sizing: border-box; padding: 4px 6px; font-size: 0.8rem; } .repeater-card .repeater-remove { grid-column: 1 / -1; justify-self: end; background: none; border: 1px solid #c8ddd3; border-radius: 4px; padding: 2px 9px; cursor: pointer; color: #4a655a; /* 6.23:1 on #fbfdfc */ font-size: 0.75rem; line-height: 1.5; } .repeater-card .repeater-remove:hover { background: #f0f6f3; color: #3d5248; } /* ─── Per-property summary (Retirement Planner, Wealth results area) ─────── Renders projectScenario().ipPerProperty. Deliberately a compact block inside the EXISTING results area rather than a tab of its own: a separate property surface was considered and decided against, because every new surface is one that can drift from the engine. Colours are taken from the same family the repeater's labels use, at contrast measured against this panel's ground rather than assumed — #4a655a is 6.23:1 on #fbfdfc and 6.36:1 on #ffffff, both above the 4.5:1 WCAG AA minimum for small text. */ .ip-sum-head { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.6rem; color: #24382f; } .ip-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.7rem; } .ip-sum-card { border: 1px solid #dce8e2; border-radius: 8px; background: #fbfdfc; padding: 0.7rem 0.8rem; } .ip-sum-title { font-size: 0.82rem; font-weight: 700; margin: 0 0 0.5rem; color: #24382f; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; } .ip-sum-sub { font-size: 0.68rem; font-weight: 500; color: #4a655a; } .ip-sum-line { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; line-height: 1.7; color: #24382f; } .ip-sum-line b { font-variant-numeric: tabular-nums; white-space: nowrap; } .ip-sum-line--muted { color: #4a655a; font-size: 0.72rem; line-height: 1.5; } .ip-sum-line--total { border-top: 1px solid #dce8e2; margin-top: 0.35rem; padding-top: 0.35rem; font-weight: 700; } .ip-sum-note, .ip-sum-foot { font-size: 0.7rem; line-height: 1.5; color: #4a655a; margin: 0.4rem 0 0; }