/* ========================================================================== Funding2Grow — ROI Blueprint Calculator (Wise-style UI) Scoped to .f2g-roi-calc so nothing leaks into the theme. Brand tokens map to the Elementor globals (hex = fallback off-Elementor). Calculation logic lives in JS and is unchanged — this only restyles. Isolation: EVERY rule is scoped with :where(.f2g-roi-calc) so no style can leak out to the theme / Elementor / page builder. :where() adds zero specificity, so the widget's own cascade is unchanged. Do not add unscoped selectors — keep new rules inside the :where(.f2g-roi-calc) scope. ========================================================================== */ .f2g-roi-calc { --primary: var(--e-global-color-accent, #21AC4B); --primary-dark: #0B5C34; --primary-darker: #073F24; --primary-hover: #1c9640; --page-bg: var(--e-global-color-tint, #f8f7f5); --surface: var(--e-global-color-white, #FFFFFF); --surface-tint: #F1FBF3; --text: var(--e-global-color-text, #101312); --muted: var(--e-global-color-text-muted, #06263a); --muted-2: #98A29C; --border: var(--e-global-color-border, #e4e7e6); --border-strong: #D3E4D8; --danger: #DC2626; --danger-bg: #FEF1F1; --danger-border: #F3B7B7; --warn: #B45309; --warn-bg: #FFFBEB; --warn-border: #F3D89C; --good: #17803D; --good-bg: #EAF9EE; --good-border: #BEE9CB; --radius-xl: 32px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 8px; --radius-pill: 999px; --shadow-card: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); --shadow-btn: 0px 1px 10px 0px rgba(0, 0, 0, 0.05); --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .f2g-roi-calc *, .f2g-roi-calc *::before, .f2g-roi-calc *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .f2g-roi-calc, .f2g-roi-calc * { margin: 0; padding: 0; box-sizing: border-box; } /* -------------------------------------------------------------------------- Anti-conflict reset (safe version). Instead of the heavy `all: revert` (which broke inheritance), we re-baseline the inherited typography on the widget ROOT so the theme's styles (line-height, letter-spacing, text-transform, font, alignment) can't cascade in — and neutralize the handful of things themes/Elementor most aggressively push onto form controls, links and lists. Component rules below re-apply the intended look on top of this. -------------------------------------------------------------------------- */ .f2g-roi-calc { font-size: 16px; line-height: 1.5; font-weight: 400; font-style: normal; letter-spacing: normal; word-spacing: normal; text-transform: none; text-align: left; text-decoration: none; text-shadow: none; } .f2g-roi-calc a { text-decoration: none; box-shadow: none; } .f2g-roi-calc ul, .f2g-roi-calc ol { list-style: none; } .f2g-roi-calc img, .f2g-roi-calc svg { max-width: 100%; } .f2g-roi-calc svg { vertical-align: middle; } .f2g-roi-calc { font-family: var(--font-sans); color: var(--text); -webkit-font-smoothing: antialiased; } .f2g-roi-calc button, .f2g-roi-calc input, .f2g-roi-calc select { font-family: inherit; } /* Elementor editor preview can add a selection outline / box-shadow around the widget container. This is purely editor chrome and does not belong in the live front-end rendering, so suppress it only while the widget is being edited. */ body.elementor-editor-active .elementor-element:has(.f2g-roi-calc), body.elementor-editor-active .elementor-element:has(.f2g-roi-calc) > .elementor-widget-container, body.elementor-editor-active .elementor-widget-container:has(.f2g-roi-calc) { outline: none !important; border: none !important; box-shadow: none !important; } /* Neutralize theme / Elementor button chrome our component rules don't set (uppercase, letter-spacing, native appearance, forced min-height). The doubled `.f2g-roi-calc` keeps this above Elementor's kit `button` rules; component rules below still own background / border / color / padding. */ .f2g-roi-calc.f2g-roi-calc button { -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: normal; line-height: 1.2; min-width: 0; min-height: 0; text-shadow: none; } /* Tablet: inputs + results side by side, graph spans full width below */ @media (min-width: 760px) { } /* Desktop: inputs | results on top, full-width graph below */ @media (min-width: 1040px) { } :where(.f2g-roi-calc) .roi-card { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 22px; } @media (min-width: 640px) { :where(.f2g-roi-calc) .roi-card { padding: 28px; } } :where(.f2g-roi-calc) .roi-divider { height: 1px; background: var(--border); margin: 20px 0; } /* ---- Purpose tabs ---- */ :where(.f2g-roi-calc) .purpose-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; background: transparent; border-radius: 0; padding: 0; } @media (max-width: 480px) { :where(.f2g-roi-calc) .purpose-tabs { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-md); } } .f2g-roi-calc .purpose-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px 6px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); white-space: nowrap; box-shadow: none; } :where(.f2g-roi-calc) .purpose-tab:hover { border-color: var(--primary); background: var(--surface-tint); border-color: var(--primary); box-shadow: none; } :where(.f2g-roi-calc) .purpose-tab svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--muted); } :where(.f2g-roi-calc) .purpose-tab span { font-weight: 700; } :where(.f2g-roi-calc) .purpose-tab.active { background: var(--surface-tint); border-color: var(--primary); box-shadow: none; } :where(.f2g-roi-calc) .purpose-tab.active svg, :where(.f2g-roi-calc) .purpose-tab.active span { color: var(--primary-dark); } /* ---- Figure rows ---- */ :where(.f2g-roi-calc) .figure-row { margin-top: 14px; } :where(.f2g-roi-calc) .figure-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; } :where(.f2g-roi-calc) .figure-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } :where(.f2g-roi-calc) .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-tint); border: 1px solid var(--good-border); border-radius: var(--radius-pill); padding: 7px 12px 7px 8px; font-size: 14px; font-weight: 700; color: var(--text); } :where(.f2g-roi-calc) .chip-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :where(.f2g-roi-calc) .chip-icon svg { width: 11px; height: 11px; } :where(.f2g-roi-calc) .figure-value { font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .figure-value.gain { color: var(--good); } /* ---- Circular gauge ---- */ :where(.f2g-roi-calc) .gauge-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; } :where(.f2g-roi-calc) .gauge-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; } :where(.f2g-roi-calc) .gauge-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); } :where(.f2g-roi-calc) .gauge-track { fill: none; stroke: var(--border); stroke-width: 8; } :where(.f2g-roi-calc) .gauge-progress { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease), stroke 0.3s var(--ease); } :where(.f2g-roi-calc) .gauge-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .gauge-meta { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1; } :where(.f2g-roi-calc) .roi-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: #fff; background: var(--primary); } :where(.f2g-roi-calc) .roi-badge svg { width: 11px; height: 11px; } :where(.f2g-roi-calc) .tier-low .roi-badge { background: var(--danger); } :where(.f2g-roi-calc) .tier-fair .roi-badge { background: var(--warn); } :where(.f2g-roi-calc) .tier-good .roi-badge { background: var(--good); } :where(.f2g-roi-calc) .tier-excellent .roi-badge { background: var(--primary); } :where(.f2g-roi-calc) .gauge-message { font-size: 12px; color: var(--muted); line-height: 1.45; } /* ---- Detail rows ---- */ :where(.f2g-roi-calc) .detail-rows { display: flex; flex-direction: column; } :where(.f2g-roi-calc) .detail-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); } :where(.f2g-roi-calc) .detail-row:last-child { border-bottom: none; } :where(.f2g-roi-calc) .detail-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--page-bg); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } :where(.f2g-roi-calc) .detail-icon svg { width: 16px; height: 16px; } :where(.f2g-roi-calc) .detail-body { flex: 1; min-width: 0; } :where(.f2g-roi-calc) .detail-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; } :where(.f2g-roi-calc) .detail-value { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .f2g-roi-calc .detail-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--text); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0; white-space: nowrap; } :where(.f2g-roi-calc) .detail-link svg { width: 11px; height: 11px; } :where(.f2g-roi-calc) .breakdown-panel { display: none; flex-direction: column; gap: 8px; background: var(--page-bg); border-radius: var(--radius-md); padding: 12px 14px; margin: 4px 0 6px; font-size: 12px; } :where(.f2g-roi-calc) .breakdown-panel.open { display: flex; } :where(.f2g-roi-calc) .breakdown-line { display: flex; justify-content: space-between; color: var(--muted); } :where(.f2g-roi-calc) .breakdown-line b { color: var(--text); font-variant-numeric: tabular-nums; } /* ---- Scenario banner ---- */ :where(.f2g-roi-calc) .scenario-banner { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; font-weight: 600; margin: 16px 0 0; } :where(.f2g-roi-calc) .scenario-banner svg { width: 16px; height: 16px; flex-shrink: 0; } :where(.f2g-roi-calc) .scenario-banner.good { background: var(--good-bg); border: 1px solid var(--good-border); color: #0B5B3E; } :where(.f2g-roi-calc) .scenario-banner.fair { background: var(--warn-bg); border: 1px solid var(--warn-border); color: #8A5A0A; } :where(.f2g-roi-calc) .scenario-banner.low { background: var(--danger-bg); border: 1px solid var(--danger-border); color: #9B2C2C; } /* ---- Buttons ---- */ .f2g-roi-calc .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px 24px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease); box-shadow: var(--shadow-btn); margin-top: 18px; } :where(.f2g-roi-calc) .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); } :where(.f2g-roi-calc) .btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; } :where(.f2g-roi-calc) .btn-primary svg { width: 16px; height: 16px; } .f2g-roi-calc .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 18px 24px; background: var(--page-bg); color: var(--text); border: none; border-radius: var(--radius-pill); font-weight: 700; cursor: pointer; transition: background 0.2s var(--ease); } :where(.f2g-roi-calc) .btn-secondary:hover { background: var(--page-bg); color: var(--text); } :where(.f2g-roi-calc) .btn-secondary:focus { background: var(--page-bg); color: var(--text); } :where(.f2g-roi-calc) .btn-secondary svg { width: 13px; height: 13px; } /* ---- Scenario toggle ---- */ :where(.f2g-roi-calc) .scenario-toggle { display: flex; gap: 4px; background: var(--page-bg); border-radius: var(--radius-pill); padding:12px; margin-bottom: 20px; } .f2g-roi-calc .scenario-toggle button { flex: 1; padding: 12px 16px; border: none; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; cursor: pointer; background: transparent; color: var(--muted); transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); box-shadow: none; } :where(.f2g-roi-calc) .scenario-toggle button:hover { color: var(--text); } :where(.f2g-roi-calc) .scenario-toggle button.active { background: var(--primary); color: #fff; box-shadow: 0 3px 10px rgba(33, 172, 75, 0.32); } /* ---- Slider fields ---- */ :where(.f2g-roi-calc) .slider-field { margin-bottom: 20px; } :where(.f2g-roi-calc) .slider-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } :where(.f2g-roi-calc) .slider-field-label { font-size: 14px; font-weight: 700; color: var(--text); display: block; position: relative; flex: 1 1 auto; min-width: 0; padding-right: 30px; } :where(.f2g-roi-calc) .slider-field-label .tooltip { position: absolute !important; top: 50%; right: 0; margin: 0; transform: translateY(-50%); } /* Unified numeric input box — same styling & width everywhere */ .f2g-roi-calc .roi-num { width: 160px; max-width: 160px; text-align: right; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 24px; font-size: 16px; font-weight: 800; color: var(--text); background: var(--page-bg); font-variant-numeric: tabular-nums; font-family: inherit; min-height: 48px; } .f2g-roi-calc .roi-num:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(33, 172, 75, 0.1); } .f2g-roi-calc .roi-num::-webkit-outer-spin-button, .f2g-roi-calc .roi-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .f2g-roi-calc input.roi-num[type="number"] { -moz-appearance: textfield; appearance: textfield; } :where(.f2g-roi-calc) .range-wrapper { position: relative; width: 100%; min-width: 0; height: 28px; display: flex; align-items: center; } :where(.f2g-roi-calc) .range-track { position: absolute; left: 0; right: 0; height: 6px; background: var(--border); border-radius: var(--radius-pill); pointer-events: none; } :where(.f2g-roi-calc) .range-progress { position: absolute; left: 0; height: 6px; background: var(--primary); border-radius: var(--radius-pill); pointer-events: none; z-index: 1; max-width: 100%; } .f2g-roi-calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; outline: none; padding: 0; border: none; position: relative; z-index: 2; cursor: pointer; } .f2g-roi-calc input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; background: transparent; border: none; height: 6px; } .f2g-roi-calc input[type="range"]::-moz-range-track { background: transparent; border: none; height: 6px; } .f2g-roi-calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--primary); border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22); margin-top: -7px; transition: transform 0.15s var(--ease); } .f2g-roi-calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); } .f2g-roi-calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary); border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22); } :where(.f2g-roi-calc) select.freq-select { width: 100%; border: 1.5px solid var(--border); background: var(--page-bg); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; color: var(--text); padding: 10px 30px 10px 12px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7570' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } :where(.f2g-roi-calc) select.freq-select:focus { outline: none; border-color: var(--primary); height: 48px !important; } /* ---- Advanced inputs ---- */ :where(.f2g-roi-calc) .scenario-inputs-block { margin-bottom: 4px; padding-top: 20px; border-top: 2px solid var(--border); } :where(.f2g-roi-calc) .scenario-inputs-heading { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 18px; } /* Accent bar to set the Scenario Inputs section apart */ :where(.f2g-roi-calc) .scenario-inputs-heading::before { content: ""; flex-shrink: 0; width: 4px; height: 1.1em; border-radius: 2px; background: var(--primary); } :where(.f2g-roi-calc) .advanced-body { display: flex; flex-direction: column; gap: 16px; } /* Divider between each scenario input */ :where(.f2g-roi-calc) .advanced-body > div { padding-bottom: 16px; border-bottom: 1px solid var(--border); } :where(.f2g-roi-calc) .advanced-body > div:last-child { padding-bottom: 0; border-bottom: none; } :where(.f2g-roi-calc) .adv-field-label { font-size: 14px; font-weight: 700; color: var(--text); display: block; position: relative; padding-right: 30px; margin-bottom: 8px; } :where(.f2g-roi-calc) .adv-field-label .tooltip { position: absolute !important; top: 50%; right: 0; margin: 0; transform: translateY(-50%); } .f2g-roi-calc .slider-field-label .tooltip:hover, .f2g-roi-calc .slider-field-label .tooltip:focus-visible, .f2g-roi-calc .adv-field-label .tooltip:hover, .f2g-roi-calc .adv-field-label .tooltip:focus-visible { transform: translateY(calc(-50% - 1px)); } :where(.f2g-roi-calc) .adv-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .f2g-roi-calc .adv-input-group { position: relative; width: 160px; } .f2g-roi-calc .adv-input-group .input-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 800; color: var(--muted); pointer-events: none; z-index: 1; } .f2g-roi-calc .adv-input-group .roi-num { width: 160px; max-width: 160px; padding-left: 24px; min-height: 48px; } .f2g-roi-calc .adv-input-group .input-suffix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 800; color: var(--muted); pointer-events: none; z-index: 1; } .f2g-roi-calc .adv-input-group.has-suffix .roi-num { padding-right: 28px; } /* ---- Projected net gain box (optional) ---- */ :where(.f2g-roi-calc) .net-gain-box { background: var(--primary); border-radius: var(--radius-lg); padding: 22px 20px; text-align: center; margin-bottom: 14px; } :where(.f2g-roi-calc) .net-gain-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 6px; } :where(.f2g-roi-calc) .net-gain-value { font-size: clamp(28px, 6vw, 36px); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .net-gain-sub { font-size: 12px; color: rgba(255, 255, 255, 0.85); font-weight: 600; } /* ---- Dark CTA panel (optional) ---- */ :where(.f2g-roi-calc) .roi-cta-panel { background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary-darker) 100%); border-radius: var(--radius-xl); padding: 24px 22px; position: relative; overflow: hidden; } :where(.f2g-roi-calc) .roi-cta-panel::before { content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: rgba(33, 172, 75, 0.16); border-radius: 50%; } :where(.f2g-roi-calc) .secure-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9FE6BC; margin-bottom: 12px; position: relative; z-index: 1; } :where(.f2g-roi-calc) .secure-badge svg { width: 12px; height: 12px; } :where(.f2g-roi-calc) .roi-cta-panel h3 { position: relative; z-index: 1; font-size: clamp(18px, 3vw, 22px); font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 16px; letter-spacing: -0.01em; } :where(.f2g-roi-calc) .cta-perks-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; } :where(.f2g-roi-calc) .cta-perk { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 10px 11px; } :where(.f2g-roi-calc) .cta-perk strong { display: block; font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; } :where(.f2g-roi-calc) .cta-perk span { font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 1.35; } :where(.f2g-roi-calc) .cta-panel-btn { position: relative; z-index: 1; width: 100%; padding: 14px 20px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: background 0.2s var(--ease), transform 0.15s var(--ease); } :where(.f2g-roi-calc) .cta-panel-btn:hover { background: var(--primary-hover); transform: translateY(-1px); } :where(.f2g-roi-calc) .cta-panel-btn svg { width: 16px; height: 16px; } /* ---- Modal ---- */ :where(.f2g-roi-calc) .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6, 20, 12, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 100000; align-items: center; justify-content: center; padding: 16px; animation: f2gFadeInOverlay 0.2s var(--ease); } :where(.f2g-roi-calc) .modal-overlay.open { display: flex; } @keyframes f2gFadeInOverlay { from { opacity: 0; } to { opacity: 1; } } :where(.f2g-roi-calc) .modal-box { background: var(--surface); border-radius: 26px; padding: 32px; width: 100%; max-width: 620px; position: relative; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3); animation: f2gSlideUpModal 0.3s var(--ease); max-height: 90vh; overflow-y: auto; } @media (min-width: 640px) { :where(.f2g-roi-calc) .modal-box { padding: 32px; } } @keyframes f2gSlideUpModal { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .f2g-roi-calc .modal-close { position: absolute; top: 16px; right: 16px; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; padding: 0 !important; flex: 0 0 auto; background: var(--page-bg); border: 1px solid var(--border); border-radius: 50% !important; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .f2g-roi-calc .modal-close:hover { background: var(--border); color: var(--text); } .f2g-roi-calc .modal-close svg { width: 16px; height: 16px; display: block; stroke: currentColor; color: var(--muted); } .f2g-roi-calc .modal-close:hover svg { color: var(--text); } /* Header row: title + description */ :where(.f2g-roi-calc) .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; } :where(.f2g-roi-calc) .modal-head-text { flex: 1 1 auto; min-width: 0; } @media (max-width: 560px) { } :where(.f2g-roi-calc) .modal-box h2 { font-size: clamp(22px, 4.4vw, 30px); font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 10px; letter-spacing: -0.02em; } :where(.f2g-roi-calc) .modal-box h2 .accent { color: var(--primary); } :where(.f2g-roi-calc) .modal-desc { font-size: 15px; color: var(--muted); line-height: 1.55; margin: 0; } /* ---- Portal perks (4-up row) ---- */ @media (max-width: 620px) { } /* ---- Form ---- */ :where(.f2g-roi-calc) .modal-form { display: flex; flex-direction: column; gap: 24px; margin-bottom: 16px; } :where(.f2g-roi-calc) .modal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 560px) { :where(.f2g-roi-calc) .modal-form-row { grid-template-columns: 1fr; } } :where(.f2g-roi-calc) .modal-field { display: flex; flex-direction: column; } :where(.f2g-roi-calc) .modal-input { position: relative; display: flex; align-items: center; } :where(.f2g-roi-calc) .modal-form input, :where(.f2g-roi-calc) .modal-form select { width: 100%; padding: 16px 24px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 16px; min-height: 54px; font-family: inherit; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); background-color: var(--page-bg); } :where(.f2g-roi-calc) .modal-form input::placeholder { color: var(--muted-2); } :where(.f2g-roi-calc) .modal-form input:focus, :where(.f2g-roi-calc) .modal-form select:focus { outline: none; border-color: var(--primary); background-color: var(--surface); box-shadow: 0 0 0 4px rgba(33, 172, 75, 0.12); } :where(.f2g-roi-calc) .modal-form input.f2g-invalid, :where(.f2g-roi-calc) .modal-form select.f2g-invalid { border-color: var(--danger); background-color: var(--danger-bg); } /* Industry select — custom chevron on the right (element chevron was removed) */ :where(.f2g-roi-calc) .modal-input--select select { padding-left: 16px; padding-right: 42px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7570' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; } /* ---- Privacy reassurance ---- */ :where(.f2g-roi-calc) .modal-privacy { display: flex; align-items: center; gap: 12px; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 6px; background: var(--good-bg); border: 1px solid var(--good-border); color: var(--text); } :where(.f2g-roi-calc) .modal-privacy > svg { width: 24px; height: 24px; color: var(--good); flex-shrink: 0; } :where(.f2g-roi-calc) .modal-privacy-text { display: flex; flex-direction: column; line-height: 1.35; } :where(.f2g-roi-calc) .modal-privacy-text b { font-size: 13px; font-weight: 700; color: #0B5B3E; } :where(.f2g-roi-calc) .modal-privacy-text span { font-size: 13px; color: var(--muted); } :where(.f2g-roi-calc) .modal-msg { font-size: 12px; font-weight: 600; text-align: center; padding: 8px 0 2px; min-height: 18px; } :where(.f2g-roi-calc) .modal-msg.error { color: var(--danger); } :where(.f2g-roi-calc) .modal-msg.success { color: var(--good); } /* ---- Submit + footer note ---- */ .f2g-roi-calc .modal-submit { margin-top: 10px; } :where(.f2g-roi-calc) .modal-foot-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--good); margin-top: 14px; } :where(.f2g-roi-calc) .modal-foot-note svg { width: 16px; height: 16px; } /* Honeypot — hidden, still submittable */ :where(.f2g-roi-calc) .f2g-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Spinner */ :where(.f2g-roi-calc) .f2g-spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: f2gSpin 0.7s linear infinite; display: inline-block; } @keyframes f2gSpin { to { transform: rotate(360deg); } } /* Copy toast */ :where(.f2g-roi-calc) .f2g-copy-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--primary-dark); color: #fff; font-size: 14px; font-weight: 700; padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: 0 12px 30px -10px rgba(6, 38, 58, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 100001; } :where(.f2g-roi-calc) .f2g-copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } :where(.f2g-roi-calc) .share-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } :where(.f2g-roi-calc) .share-hint { font-size: 12px; color: var(--muted-2); } :where(.f2g-roi-calc) .footer-disclaimer { text-align: center; font-size: 12px; color: var(--muted-2); padding: 16px 12px 0; grid-column: 1 / -1; } /* ---- ROI-by-scenario bar chart ---- */ :where(.f2g-roi-calc) .graph-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 4px; } /* Big ROI gauge (moved into the graph column) */ @keyframes f2gPop { from { transform: scale(0.82); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes f2gGlow { 0%, 100% { box-shadow: 0 0 16px -8px rgba(33, 172, 75, 0); } 50% { box-shadow: 0 0 26px -4px rgba(33, 172, 75, 0.4); } } /* Animated payback area-line chart */ :where(.f2g-roi-calc) .pay-chart { width: 100%; margin-top: 2px; } :where(.f2g-roi-calc) .pay-chart svg { width: 100%; height: auto; display: block; overflow: visible; } :where(.f2g-roi-calc) .pay-zero { stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 3 4; } :where(.f2g-roi-calc) .pay-area { opacity: 0; animation: f2gAreaIn 0.7s ease 0.35s forwards; } :where(.f2g-roi-calc) .pay-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: f2gDraw 1.1s var(--ease) forwards; } @keyframes f2gDraw { to { stroke-dashoffset: 0; } } @keyframes f2gAreaIn { to { opacity: 1; } } /* ---- Cumulative-profit chart: legend + labeled nodes ---- */ :where(.f2g-roi-calc) .pay-legend2 { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 12px; } :where(.f2g-roi-calc) .pay-leg2 { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); } :where(.f2g-roi-calc) .pay-leg2-sw { flex-shrink: 0; } :where(.f2g-roi-calc) .pay-leg2-sw.line { width: 18px; height: 3px; border-radius: 2px; background: var(--primary); } :where(.f2g-roi-calc) .pay-leg2-sw.be { width: 18px; border-top: 2px dashed var(--muted-2); } :where(.f2g-roi-calc) .pc2-node { fill: #fff; stroke: var(--primary); stroke-width: 2.5; opacity: 0; animation: f2gAreaIn 0.4s ease forwards; } :where(.f2g-roi-calc) .pc2-node.is-end { fill: var(--primary); } :where(.f2g-roi-calc) .pc2-label { font-size: 11px; font-weight: 800; fill: var(--text); opacity: 0; animation: f2gAreaIn 0.5s ease forwards; } :where(.f2g-roi-calc) .pc2-label.is-neg { fill: var(--danger); } :where(.f2g-roi-calc) .pc2-be-dot { fill: var(--muted-2); } :where(.f2g-roi-calc) .pc2-be-label { font-size: 11px; font-weight: 700; fill: var(--muted); } :where(.f2g-roi-calc) .pc2-axis { font-size: 11px; font-weight: 600; fill: var(--muted); } /* ========================================================================== MINI CALCULATOR — matched to the same design language ========================================================================== */ .f2g-roi-calc.roi-mini { background: transparent; } :where(.f2g-roi-calc) .roi-mini-card { margin: 0 auto; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: clamp(22px, 4vw, 30px); } :where(.f2g-roi-calc) .roi-mini-head { text-align: left; margin-bottom: 20px; } :where(.f2g-roi-calc) .roi-mini-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--good); background: var(--good-bg); border: 1px solid var(--good-border); padding: 5px 12px 5px 6px; border-radius: var(--radius-pill); margin-bottom: 14px; } :where(.f2g-roi-calc) .roi-mini-eyebrow svg { width: 12px; height: 12px; } .roi-mini .rmr-badge-ic { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; } :where(.f2g-roi-calc) .roi-mini-head h3 { font-size: clamp(24px, 5vw, 30px); font-weight: 800; color: var(--text); line-height: 1.15; letter-spacing: -0.02em; } :where(.f2g-roi-calc) .roi-mini-head p { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; } :where(.f2g-roi-calc) .roi-mini-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted-2); text-align: center; margin-top: 10px; line-height: 1.5; } /* Mini: card-style tabs (icon on top, label below) */ /* Goal dropdown */ :where(.f2g-roi-calc) .mini-goal-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; } :where(.f2g-roi-calc) .mini-select { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); padding: 0 14px; min-height: 64px; margin-bottom: 22px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } :where(.f2g-roi-calc) .mini-select:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(33, 172, 75, 0.1); } :where(.f2g-roi-calc) .mini-select-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--surface-tint); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; } :where(.f2g-roi-calc) .mini-select-ic svg { width: 22px; height: 22px; } :where(.f2g-roi-calc) .mini-select-el { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 18px; font-weight: 700; color: var(--text); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } :where(.f2g-roi-calc) .mini-select-chevron { flex-shrink: 0; color: var(--muted); display: flex; pointer-events: none; } /* Value boxes (funding amount + %) */ :where(.f2g-roi-calc) .mini-numbox, :where(.f2g-roi-calc) .mini-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-tint); border: 1px solid var(--good-border); border-radius: 10px; padding: 8px 12px; } :where(.f2g-roi-calc) .mini-numbox .pfx, :where(.f2g-roi-calc) .mini-pill .sfx { color: var(--muted); font-weight: 700; font-size: 15px; } :where(.f2g-roi-calc) .mini-num { border: none; background: transparent; outline: none; font-family: inherit; font-weight: 800; font-size: 16px; color: var(--text); text-align: right; } :where(.f2g-roi-calc) .mini-numbox .mini-num { width: auto; } :where(.f2g-roi-calc) .mini-pill .mini-num { width: auto; } :where(.f2g-roi-calc) .mini-num::-webkit-outer-spin-button, :where(.f2g-roi-calc) .mini-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } :where(.f2g-roi-calc) .mini-num[type="number"] { -moz-appearance: textfield; appearance: textfield; } :where(.f2g-roi-calc) .mini-amount-field { margin-bottom: 22px; } /* Two-up input cards (Cost of Capital + Gross Margin) */ :where(.f2g-roi-calc) .mini-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; } :where(.f2g-roi-calc) .mini-input-card { border: 1.5px solid var(--border); border-radius: 18px; padding: 16px 18px; } @media (max-width: 480px) { :where(.f2g-roi-calc) .mini-grid2 { grid-template-columns: 1fr; } } /* Mini: horizontal result panel (gauge · Estimated ROI · Potential Gain) */ :where(.f2g-roi-calc) .mini-result { display: flex; align-items: center; gap: 16px; background: var(--page-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin: 6px 0 18px; } :where(.f2g-roi-calc) .mini-result-gauge .gauge-wrap { width: 84px; height: 84px; animation: f2gPop 0.5s var(--ease) both; } :where(.f2g-roi-calc) .mini-result .gauge-text { flex-direction: column; line-height: 1; } :where(.f2g-roi-calc) .mini-result .gauge-text span { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .mini-result .gauge-text small { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); margin-top: 2px; } :where(.f2g-roi-calc) .mini-result-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } :where(.f2g-roi-calc) .mini-result-col--right { border-left: 1px solid var(--border); padding-left: 16px; text-align: right; align-items: flex-end; } :where(.f2g-roi-calc) .mini-result-label { font-size: 12px; color: var(--muted); font-weight: 600; } :where(.f2g-roi-calc) .mini-result-big { font-size: clamp(22px, 5vw, 28px); font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .mini-result .mini-badge { align-self: flex-start; font-size: 12px; padding: 5px 12px; } :where(.f2g-roi-calc) .mini-result-gain { font-size: clamp(18px, 4.5vw, 24px); font-weight: 800; color: var(--good); letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .mini-result-sub { font-size: 12px; color: var(--muted); } @media (max-width: 480px) { :where(.f2g-roi-calc) .mini-result { flex-wrap: wrap; } :where(.f2g-roi-calc) .mini-result-col--right { border-left: none; padding-left: 0; text-align: left; align-items: flex-start; border-top: 1px solid var(--border); padding-top: 12px; width: 100%; } } /* Mini footer note with shield icon */ :where(.f2g-roi-calc) .roi-mini-note svg { width: 16px !important; height: 16px !important; color: var(--good); flex-shrink: 0; } /* ========================================================================== MAIN — CLASSIC 2-COLUMN LAYOUT ========================================================================== */ :where(.f2g-roi-calc) .classic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } @media (max-width: 1199px) { :where(.f2g-roi-calc) .classic-grid { grid-template-columns: 1fr; } } .f2g-layout-classic .roi-card { padding: clamp(18px, 2.5vw, 32px); } /* Purpose selector: tab cards on tablet+, dropdown on mobile. Scenario selector: segmented buttons on tablet+, dropdown on mobile. */ :where(.f2g-roi-calc) .purpose-select-wrap { display: none; margin-bottom: 4px; } :where(.f2g-roi-calc) .scenario-select { display: none; } @media (max-width: 767px) { :where(.f2g-roi-calc) .purpose-tabs { display: none; } :where(.f2g-roi-calc) .purpose-select-wrap { display: flex; } :where(.f2g-roi-calc) .classic-scenario .scenario-toggle { display: none; } :where(.f2g-roi-calc) .scenario-select { display: block; flex: 1; min-width: 0; } } /* Classic tabs — icon-over-label cards */ .f2g-layout-classic .purpose-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; background: transparent; border-radius: 0; padding: 0; margin-bottom: 20px; } .f2g-layout-classic .purpose-tab { flex-direction: column; gap: 12px; padding: 14px 6px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: none; } .f2g-layout-classic .purpose-tab svg { width: 24px !important; height: 24px !important; color: var(--muted); } .f2g-layout-classic .purpose-tab span { font-weight: 700; } .f2g-layout-classic .purpose-tab:hover { border-color: var(--primary); background: var(--surface-tint); transform: none; } .f2g-layout-classic .purpose-tab.active { background: var(--surface-tint); border-color: var(--primary); box-shadow: none; } .f2g-layout-classic .purpose-tab.active svg, .f2g-layout-classic .purpose-tab.active span { color: var(--primary-dark); } @media (max-width: 520px) { .f2g-layout-classic .purpose-tabs { grid-template-columns: repeat(2, 1fr); } } :where(.f2g-roi-calc) .classic-primary { margin-bottom: 20px; } :where(.f2g-roi-calc) .classic-primary .slider-field { margin-bottom: 0; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); } :where(.f2g-roi-calc) .classic-primary #fundingAmountSlot .slider-field { margin: 0; padding-top: 0; border-top: none; } :where(.f2g-roi-calc) .classic-freq { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); } :where(.f2g-roi-calc) .classic-freq .freq-select { width: auto; min-width: 132px; min-height: 48px; } /* Slider min/max edge labels (classic only) */ :where(.f2g-roi-calc) .field-edges { display: none; } .f2g-layout-classic .field-edges { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-2); font-weight: 600; margin-top: 6px; } /* Term value box */ :where(.f2g-roi-calc) .classic-numbox { display: inline-flex; align-items: center; gap: 3px; background: var(--surface-tint); border: 1px solid var(--good-border); border-radius: 10px; padding: 8px 12px; font-weight: 800; color: var(--primary-dark); font-size: 14px; } :where(.f2g-roi-calc) .classic-numinput { border: none; background: transparent; width: 34px; text-align: right; font-family: inherit; font-weight: 800; color: inherit; padding: 0; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .classic-numinput:focus { outline: none; } :where(.f2g-roi-calc) .classic-numinput::-webkit-outer-spin-button, :where(.f2g-roi-calc) .classic-numinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } :where(.f2g-roi-calc) .classic-numinput[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Scenario inputs 2×2 */ .f2g-layout-classic .scenario-inputs-block { border-top: 2px solid var(--border); padding-top: 24px; margin-top: 4px; } :where(.f2g-roi-calc) .classic-si-head { color: var(--text); font-weight: 700; } .f2g-layout-classic .advanced-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 32px; } @media (max-width: 767px) { .f2g-layout-classic .advanced-body { grid-template-columns: 1fr; } } :where(.f2g-roi-calc) .classic-note { display: flex; align-items: center; gap: 8px; background: #EAF3FB; border: 1px solid #CFE3F5; border-radius: 12px; padding: 11px 14px; font-size: 12px; color: #1D4E73; margin-top: 20px; } :where(.f2g-roi-calc) .classic-note svg { width: 16px !important; height: 16px !important; color: var(--primary); flex-shrink: 0; } /* Results side */ :where(.f2g-roi-calc) .classic-scenario { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } :where(.f2g-roi-calc) .classic-scenario-label { font-size: 14px; font-weight: 700; color: var(--text); flex-shrink: 0; } :where(.f2g-roi-calc) .classic-scenario .scenario-toggle { flex: 1; margin-bottom: 0; min-width: 240px; } :where(.f2g-roi-calc) .classic-roi { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } :where(.f2g-roi-calc) .classic-roi-left { flex: 1; min-width: 0; } :where(.f2g-roi-calc) .classic-roi-left .figure-label { font-size: 14px; color: var(--muted); margin-bottom: 2px; } :where(.f2g-roi-calc) .classic-roi-big { font-family: inherit; font-size: clamp(40px, 8vw, 56px); font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .classic-roi-left .roi-badge { margin: 12px 0 10px; } :where(.f2g-roi-calc) .classic-roi-left .gauge-message { font-size: 14px; color: var(--muted); } :where(.f2g-roi-calc) .classic-gauge .gauge-wrap { width: 150px; height: 150px; flex-shrink: 0; animation: f2gPop 0.5s var(--ease) both; } :where(.f2g-roi-calc) .classic-gauge .gauge-text { flex-direction: column; line-height: 1; } :where(.f2g-roi-calc) .classic-gauge .gauge-text span { font-size: 30px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .classic-gauge .gauge-text small { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; } @media (max-width: 480px) { :where(.f2g-roi-calc) .classic-roi { flex-direction: column; align-items: flex-start; gap: 12px; } :where(.f2g-roi-calc) .classic-gauge .gauge-wrap { width: 128px; height: 128px; } } :where(.f2g-roi-calc) .classic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 767px) { :where(.f2g-roi-calc) .classic-stats { grid-template-columns: 1fr 1fr; } :where(.f2g-roi-calc) .classic-stats .stat-card:first-child { grid-column: 1 / -1; } } @media (max-width: 380px) { :where(.f2g-roi-calc) .classic-stats { grid-template-columns: 1fr; } } /* ---- Small-device hardening (phones) ---- */ @media (max-width: 400px) { /* Scenario toggle: let all three options fit narrow phones */ :where(.f2g-roi-calc) .classic-scenario .scenario-toggle { min-width: 0; } :where(.f2g-roi-calc) .scenario-toggle button { padding: 10px 6px; font-size: 11px; } /* Tighter card padding + gauge on the smallest screens */ .f2g-layout-classic .roi-card { padding: 16px; } :where(.f2g-roi-calc) .classic-gauge .gauge-wrap { width: 116px; height: 116px; } :where(.f2g-roi-calc) .mini-numbox .mini-num { width: 76px; } } /* Never let an entered value overflow its box */ :where(.f2g-roi-calc) .mini-num, :where(.f2g-roi-calc) .classic-numinput, :where(.f2g-roi-calc) .roi-num { max-width: 100%; } :where(.f2g-roi-calc) .stat-card { border-radius: 16px; padding: 16px; border: 1px solid var(--border); } :where(.f2g-roi-calc) .stat-card .stat-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } :where(.f2g-roi-calc) .stat-card .stat-ic svg { width: 20px !important; height: 20px !important; } .f2g-roi-calc .tooltip { position: relative !important; inset: auto !important; float: none !important; transform: none !important; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin-left: 2px; border-radius: 50%; background: #e4e7e6; color: #000000; opacity: 1; visibility: visible; line-height: 1; vertical-align: middle; font-size: 13px; font-weight: 800; cursor: help; flex-shrink: 0; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; } .f2g-roi-calc .tooltip svg { display: none; pointer-events: none; } .f2g-roi-calc .tooltip-mark { display: block; font: inherit; line-height: 1; } .f2g-roi-calc .tooltip:hover, .f2g-roi-calc .tooltip:focus-visible { background: #eaf9ee; color: #000000; transform: translateY(-1px); } .f2g-roi-calc .tooltip-text { font-size: 13px; line-height: 1; } .f2g-roi-calc .tooltip[data-tooltip]::after { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 12px); width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: #101820; box-shadow: 0 14px 30px #00000010; color: #fff; content: attr(data-tooltip); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.3px; opacity: 0; pointer-events: none; text-align: left; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease; visibility: hidden; } .f2g-roi-calc .tooltip[data-tooltip]::before { position: absolute; z-index: 21; left: 50%; bottom: calc(100% + 6px); width: 12px; height: 12px; background: #101820; content: ""; opacity: 0; pointer-events: none; transform: translate(-50%, 4px) rotate(45deg) !important; transition: opacity .15s ease, transform .15s ease; visibility: hidden; top:-24px !important; } .f2g-roi-calc .tooltip[data-tooltip]:hover::after, .f2g-roi-calc .tooltip[data-tooltip]:focus-visible::after, .f2g-roi-calc .tooltip[data-tooltip]:hover::before, .f2g-roi-calc .tooltip[data-tooltip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); visibility: visible; } :where(.f2g-roi-calc) .stat-label { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; } :where(.f2g-roi-calc) .stat-val { font-size: clamp(18px, 3.2vw, 22px); font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-top: 4px; font-variant-numeric: tabular-nums; } :where(.f2g-roi-calc) .stat-sub { font-size: 12px; color: var(--muted-2); margin-top: 3px; } :where(.f2g-roi-calc) .stat-green { background: var(--good-bg); border-color: var(--good-border); } :where(.f2g-roi-calc) .stat-green .stat-ic { background: #fff; color: var(--good); } :where(.f2g-roi-calc) .stat-green .stat-val { color: var(--good); } :where(.f2g-roi-calc) .stat-blue { background: #EFF6FC; border-color: #D5E7F6; } :where(.f2g-roi-calc) .stat-blue .stat-ic { background: #fff; color: #2E6FA6; } :where(.f2g-roi-calc) .stat-amber { background: var(--warn-bg); border-color: var(--warn-border); } :where(.f2g-roi-calc) .stat-amber .stat-ic { background: #fff; color: var(--warn); } .f2g-layout-classic .pay-chart svg { max-height: 220px; } /* ========================================================================== MAIN CALCULATOR — larger type (~1.1x) + 4px-grid spacing..purpose-tab Scoped to :not(.roi-mini) so the mini calculator is unaffected. ========================================================================== */ .f2g-roi-calc:not(.roi-mini) .purpose-tab { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .slider-field-label { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .roi-num { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .adv-input-group .input-prefix { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .adv-field-label { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .scenario-inputs-heading { font-size: 18px; } .f2g-roi-calc:not(.roi-mini) select.freq-select { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .field-edges { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .scenario-toggle button { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .scenario-caption { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .figure-label { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .chip { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .figure-value { font-size: clamp(28px, 6vw, 38px); } .f2g-roi-calc:not(.roi-mini) .detail-label { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .detail-value { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .detail-link { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .breakdown-line { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .scenario-banner { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .roi-badge { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .gauge-message { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .gauge-text { font-size: 18px; } .f2g-roi-calc:not(.roi-mini) .graph-title { font-size: 16px; } .f2g-roi-calc:not(.roi-mini) .graph-sub { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .graph-legend { font-size: 12px; } .f2g-roi-calc:not(.roi-mini) .pay-endlabel { font-size: 14px; } .f2g-roi-calc:not(.roi-mini) .pay-axis { font-size: 12px; } .f2g-roi-calc:not(.roi-mini) .pay-be-label { font-size: 8px; } .f2g-roi-calc:not(.roi-mini) .footer-disclaimer { font-size: 12px; } .f2g-roi-calc:not(.roi-mini) .btn-primary { font-size: 18px; } .f2g-roi-calc:not(.roi-mini) .btn-secondary { font-size: 18px; } /* Classic-specific type bumps */ .f2g-layout-classic .classic-sub { font-size: 16px; } .f2g-layout-classic .roi-mini-eyebrow { font-size: 12px; } .f2g-layout-classic .classic-roi-big { font-size: clamp(44px, 8vw, 60px); } .f2g-layout-classic .classic-scenario-label { font-size: 16px; } .f2g-layout-classic .classic-numbox { font-size: 16px; } .f2g-layout-classic .classic-gauge .gauge-text span { font-size: 34px; } .f2g-layout-classic .classic-gauge .gauge-text small { font-size: 12px; } .f2g-layout-classic .stat-label { font-size: 14px; } .f2g-layout-classic .stat-val { font-size: clamp(20px, 2.6vw, 22px); } .f2g-layout-classic .stat-sub { font-size: 12px; } /* 4px-grid spacing (main only) */ .f2g-roi-calc:not(.roi-mini) .roi-shell { gap: 24px; } .f2g-layout-classic .classic-grid { gap: 32px; } .f2g-layout-classic .classic-scenario { margin-bottom: 24px; } .f2g-layout-classic .advanced-body { gap: 32px 32px; } .f2g-layout-classic .classic-primary {margin-bottom: 24px; } .f2g-layout-classic .classic-note { padding: 12px 16px; margin-top: 24px; font-size: 14px; } .f2g-layout-classic .classic-cta-note { font-size: 14px; } .f2g-layout-classic .classic-roi { gap: 24px; margin-bottom: 24px; } .f2g-layout-classic .classic-stats { gap: 24px; margin-bottom: 24px; } .f2g-layout-classic .purpose-tabs { gap: 24px; margin-bottom: 24px; } .f2g-layout-classic .scenario-inputs-heading { margin-bottom: 20px; } :where(.f2g-roi-calc) .classic-cta-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 12px; } :where(.f2g-roi-calc) .classic-cta-note svg { width: 16px !important; height: 16px !important; color: var(--muted-2); }