/** * MortgageFig calculator shell — aligns Bootstrap-based calculators with * rentvsbuy2: DM Sans body, DM Serif headings, brand green #14352a, warm cream surfaces. * Scope: add class "mf-calculator-page" on and include this file last in . */ /* ── Typography (matches rentvsbuy2 / header) ── */ body.mf-calculator-page { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; color: #1c1917; background-color: #f0ead6 !important; background-image: none !important; } body.mf-calculator-page h1, body.mf-calculator-page h2, body.mf-calculator-page h3, body.mf-calculator-page h4, body.mf-calculator-page .display-4, body.mf-calculator-page .card-header h4, body.mf-calculator-page .card-header h5 { font-family: "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: -0.02em; } /* Hero / .hero-section::after: defined in _mf_calc_tw_head_core.html (supports --mf-hero-bg). Do not duplicate here. */ /* ── Primary actions: brand green (not Bootstrap blue) ── */ body.mf-calculator-page .btn-primary, body.mf-calculator-page .bg-primary { background-color: #14352a !important; border-color: #14352a !important; color: #fff !important; } body.mf-calculator-page .btn-primary:hover, body.mf-calculator-page .btn-primary:focus { background-color: #1b4a38 !important; border-color: #1b4a38 !important; color: #fff !important; } body.mf-calculator-page .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(20, 53, 42, 0.35) !important; } body.mf-calculator-page .btn-primary[href="#calculator-form"]:hover, body.mf-calculator-page .btn-primary[href="#calculator-form"]:focus { box-shadow: 0 0 0 0.2rem rgba(20, 53, 42, 0.25), 0 4px 16px rgba(20, 53, 42, 0.2) !important; } body.mf-calculator-page .text-primary { color: #14352a !important; } body.mf-calculator-page .border-primary { border-color: #14352a !important; } /* Bootstrap semantic text (cross-links, icons) — harmonize with brand */ body.mf-calculator-page .text-success { color: #2a5440 !important; } body.mf-calculator-page .text-danger { color: #9f2d1f !important; } body.mf-calculator-page .text-info { color: #3d6b55 !important; } body.mf-calculator-page .text-warning { color: #b45309 !important; } /* * Main form sheet — same flat bordered panel as rentvsbuy2 .rvb-shell (not a floating rounded slab). * Targets calculator wrappers that use the shared inline shadow + max-width rail. */ body.mf-calculator-page [class*="min-w-0"][class*="90rem"][style*="box-shadow:0 1px 3px rgba(0,0,0,.04)"] { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e4dfd0 !important; background-color: #faf8f1 !important; max-width: 80rem !important; margin-left: auto !important; margin-right: auto !important; overflow-x: clip !important; box-sizing: border-box !important; } body.mf-calculator-page [class*="max-w-7xl"][class*="faf8f1"][style*="box-shadow:0 1px 3px rgba(0,0,0,.04)"] { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #e4dfd0 !important; } /* * Cards — match rentvsbuy2 field panels: 0.5rem radius, no drop shadow / hover lift. * Skip inline-gradient cards (e.g. premium paywall) so their styling stays intact. */ body.mf-calculator-page .card:not([style*="linear-gradient"]) { background-color: #faf8f1 !important; border: 1px solid #e4dfd0 !important; border-radius: 0.5rem !important; box-shadow: none !important; } body.mf-calculator-page .card:not([style*="linear-gradient"]):hover { transform: none !important; box-shadow: none !important; } /* Vertical rhythm between stacked form cards — match .rvb-section mb-6 (1.5rem) */ body.mf-calculator-page :is(#calculator-form, #compare-form, #construction-form) .card.calculator-card.mb-4 { margin-bottom: 1.5rem !important; } body.mf-calculator-page :is(#calculator-form, #compare-form, #construction-form) .card.calculator-card .card-body { padding: 1rem 1.15rem !important; } @media (min-width: 640px) { body.mf-calculator-page :is(#calculator-form, #compare-form, #construction-form) .card.calculator-card .card-body { padding: 1.05rem 1.35rem !important; } } /* Solid bar — modals / non-calculator cards only; form panels use flat style below */ body.mf-calculator-page .card-header.bg-primary { background-color: #14352a !important; border-bottom-color: #0f2920 !important; color: #fff !important; } /* * Form section titles — match rentvsbuy2 .rvb-section-heading (cream band + rule, not inverted bar). * Scoped to .calculator-card so paywalls / other cards keep solid primary where used. */ body.mf-calculator-page .card.calculator-card > .card-header.bg-primary { background: #faf8f1 !important; background-color: #faf8f1 !important; border-bottom: 1px solid #e4dfd0 !important; border-top: none !important; color: #14352a !important; padding-top: 1rem !important; padding-bottom: 0.85rem !important; } body.mf-calculator-page .card.calculator-card > .card-header.bg-primary h4, body.mf-calculator-page .card.calculator-card > .card-header.bg-primary h5, body.mf-calculator-page .card.calculator-card > .card-header.bg-primary h6 { color: #14352a !important; font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important; font-size: 1.35rem !important; font-weight: 400 !important; letter-spacing: -0.015em !important; line-height: 1.25 !important; margin-bottom: 0 !important; } /* How It Works: flatten legacy bg-light header strip (rentvsbuy2 uses padded block + fade rule) */ body.mf-calculator-page #how-it-works.calculator-card > .card-header.bg-light { background: transparent !important; border-bottom: none !important; color: inherit !important; padding-bottom: 0 !important; } /* Result / comparison headers — brand-adjacent greens & warm reds (not neon Bootstrap) */ body.mf-calculator-page .card-header.bg-success, body.mf-calculator-page .modal-header.bg-success { background: linear-gradient(135deg, #2a5440 0%, #14352a 100%) !important; border-bottom-color: #0f2920 !important; color: #fff !important; } body.mf-calculator-page .card-header.bg-danger, body.mf-calculator-page .modal-header.bg-danger { background: linear-gradient(135deg, #7c2d12 0%, #5c1f14 100%) !important; border-bottom-color: #451a12 !important; color: #fff !important; } body.mf-calculator-page .card-header.bg-info, body.mf-calculator-page .modal-header.bg-info { background: linear-gradient(135deg, #3d6b55 0%, #2a5440 100%) !important; border-bottom-color: #1b4a38 !important; color: #fff !important; } body.mf-calculator-page .card-header.bg-warning { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; border-bottom-color: #d6c4a8 !important; color: #422006 !important; } body.mf-calculator-page .card-header.bg-light { background: #eef3f0 !important; border-bottom: 1px solid #d5e2da !important; color: #14352a !important; } body.mf-calculator-page .list-group-item.bg-light { background-color: #f5f2e8 !important; color: #1c1917; } body.mf-calculator-page .card-body { background-color: #faf8f1 !important; color: #1c1917; } body.mf-calculator-page .calculator-icon { color: #2a5440 !important; } /* ── Form controls ── */ body.mf-calculator-page .form-control:focus, body.mf-calculator-page .form-select:focus { border-color: #2a5440; box-shadow: 0 0 0 0.2rem rgba(20, 53, 42, 0.15); } body.mf-calculator-page .form-label { color: #44403c; font-weight: 600; /* Match .tw-label in _mf_calc_tw_head_core.html (rentvsbuy2 / Tailwind fields) */ font-size: 0.8125rem; } /* ── Outline / secondary buttons ── */ body.mf-calculator-page .btn-outline-primary { color: #14352a !important; border-color: #b0c7b8 !important; } body.mf-calculator-page .btn-outline-primary:hover { background-color: #eef3f0 !important; border-color: #14352a !important; color: #14352a !important; } body.mf-calculator-page .btn-outline-dark { border-color: #78716c !important; color: #44403c !important; } body.mf-calculator-page .btn-outline-dark:hover { background-color: #f5f5f4 !important; color: #1c1917 !important; } /* ── Alerts / info blocks (softer than default bootstrap blue) ── */ body.mf-calculator-page .alert-info { background-color: rgba(238, 243, 240, 0.95) !important; border-color: #d5e2da !important; color: #14352a !important; } body.mf-calculator-page .alert-success { background-color: rgba(238, 247, 240, 0.95) !important; border-color: #b0c7b8 !important; color: #14352a !important; } body.mf-calculator-page .alert-warning { background-color: rgba(254, 243, 199, 0.65) !important; border-color: #e4d4b8 !important; color: #422006 !important; } body.mf-calculator-page .alert-danger { background-color: rgba(254, 242, 242, 0.9) !important; border-color: #e8c4c0 !important; color: #5c1f14 !important; } /* ── Tables ── */ body.mf-calculator-page .table { --bs-table-bg: transparent; } body.mf-calculator-page .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(245, 242, 232, 0.6) !important; } /* ── Dark mode (warm brown palette, same family as rentvsbuy2) ── */ body.mf-calculator-page.dark-mode, body.dark-mode.mf-calculator-page { background-color: #2c2420 !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .hero-section { background: #1c1917 !important; border-bottom-color: #44403c !important; } body.dark-mode.mf-calculator-page .hero-section::after { opacity: 0.15; } body.dark-mode.mf-calculator-page .hero-section .lead, body.dark-mode.mf-calculator-page .hero-section p { color: #b5a99a !important; } body.dark-mode.mf-calculator-page .hero-section h1, body.dark-mode.mf-calculator-page .display-4 { color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .card, body.dark-mode.mf-calculator-page .card.calculator-card { background-color: #362f2a !important; border-color: #4d443c !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page [class*="max-w-[90rem]"][style*="box-shadow:0 1px 3px rgba(0,0,0,.04)"] { background-color: #362f2a !important; border-color: #4d443c !important; } body.dark-mode.mf-calculator-page [class*="max-w-7xl"][class*="faf8f1"][style*="box-shadow:0 1px 3px rgba(0,0,0,.04)"] { background-color: #362f2a !important; border-color: #4d443c !important; } body.dark-mode.mf-calculator-page .card-body { background-color: #362f2a !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .card-header.bg-primary { background-color: #14352a !important; border-bottom-color: #0f2920 !important; } body.dark-mode.mf-calculator-page .card.calculator-card > .card-header.bg-primary { background: rgba(54, 47, 42, 0.92) !important; background-color: rgba(54, 47, 42, 0.92) !important; border-bottom-color: #4d443c !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .card.calculator-card > .card-header.bg-primary h4, body.dark-mode.mf-calculator-page .card.calculator-card > .card-header.bg-primary h5, body.dark-mode.mf-calculator-page .card.calculator-card > .card-header.bg-primary h6 { color: #f0ece8 !important; } body.dark-mode.mf-calculator-page #how-it-works.calculator-card > .card-header.bg-light { background: transparent !important; border-bottom: none !important; color: inherit !important; } body.dark-mode.mf-calculator-page .card-header.bg-success, body.dark-mode.mf-calculator-page .modal-header.bg-success { background: linear-gradient(135deg, #1b4a38 0%, #14352a 100%) !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .card-header.bg-danger, body.dark-mode.mf-calculator-page .modal-header.bg-danger { background: linear-gradient(135deg, #6b2210 0%, #4a180c 100%) !important; color: #fef2f2 !important; } body.dark-mode.mf-calculator-page .card-header.bg-info, body.dark-mode.mf-calculator-page .modal-header.bg-info { background: linear-gradient(135deg, #2a5440 0%, #1b4a38 100%) !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .card-header.bg-light { background: #403831 !important; border-bottom-color: #5c514a !important; color: #d4cbc2 !important; } body.dark-mode.mf-calculator-page .form-label { color: #d4cbc2 !important; } body.dark-mode.mf-calculator-page .form-control, body.dark-mode.mf-calculator-page .form-select { background-color: #403831 !important; border-color: #5c514a !important; color: #f0ece8 !important; } body.dark-mode.mf-calculator-page .form-control:focus, body.dark-mode.mf-calculator-page .form-select:focus { border-color: #85a894; box-shadow: 0 0 0 0.2rem rgba(133, 168, 148, 0.2); } body.dark-mode.mf-calculator-page .text-muted { color: #8c7e70 !important; } body.dark-mode.mf-calculator-page .text-success { color: #85a894 !important; } body.dark-mode.mf-calculator-page .text-danger { color: #fca5a5 !important; } body.dark-mode.mf-calculator-page .text-info { color: #a7c4b5 !important; } body.dark-mode.mf-calculator-page .text-warning { color: #fcd34d !important; } body.dark-mode.mf-calculator-page .modal-content { background-color: #403831 !important; color: #f0ece8 !important; border-color: #5c514a !important; } body.dark-mode.mf-calculator-page .table { color: #d4cbc2 !important; border-color: #4d443c !important; } body.dark-mode.mf-calculator-page .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(64, 56, 49, 0.5) !important; } body.dark-mode.mf-calculator-page .alert-info { background-color: rgba(30, 58, 48, 0.55) !important; border-color: rgba(148, 163, 184, 0.35) !important; color: #e5e7eb !important; } body.dark-mode.mf-calculator-page .alert-success { background-color: rgba(30, 58, 48, 0.5) !important; border-color: rgba(74, 222, 128, 0.35) !important; color: #e5e7eb !important; } body.dark-mode.mf-calculator-page .alert-warning { background-color: rgba(66, 32, 6, 0.45) !important; border-color: rgba(251, 191, 36, 0.35) !important; color: #fde68a !important; } body.dark-mode.mf-calculator-page .alert-danger { background-color: rgba(92, 31, 20, 0.45) !important; border-color: rgba(248, 113, 113, 0.35) !important; color: #fecaca !important; } /* Success / secondary actions — stay distinct from primary CTA */ body.mf-calculator-page .btn-success { background-color: #166534 !important; border-color: #166534 !important; } body.mf-calculator-page .btn-success:hover { background-color: #14532d !important; border-color: #14532d !important; } body.mf-calculator-page .btn-secondary { background-color: #e7e5e4 !important; border-color: #d6d3d1 !important; color: #44403c !important; } body.mf-calculator-page .btn-secondary:hover { background-color: #d6d3d1 !important; color: #1c1917 !important; } body.dark-mode.mf-calculator-page .btn-secondary { background-color: #5c514a !important; border-color: #6b5f56 !important; color: #f0ece8 !important; }