/* ========================================================================== MAKAN FINDER — Mortgage Calculator Palette lifted from the Makan Finder tokens (ink greens + Rolex gold), but redeclared locally under --mfmc-* so this file stands alone: the plugin does not inherit from, or depend on, the header or homepage stylesheets. Everything is scoped under .mfmc so it can never collide with .mf- or .mfhs-. ========================================================================== */ .mfmc { /* ink */ --mfmc-ink-900: #101d17; --mfmc-ink-800: #16261e; --mfmc-ink-700: #1e3327; /* gold */ --mfmc-gold-700: #9c7a34; --mfmc-gold-600: #b6913f; --mfmc-gold-500: #ceac64; --mfmc-gold-300: #e3d09e; --mfmc-gold-100: #f7f0dd; /* surfaces */ --mfmc-paper: #ffffff; --mfmc-surface: #f6f8fa; --mfmc-surface-2: #eef2f6; --mfmc-line: #e3e9ef; --mfmc-line-strong: #cfd8e2; /* text */ --mfmc-text: #0f1e2e; --mfmc-text-muted: #5b6b7d; --mfmc-text-faint: #8697a8; --mfmc-on-dark: #eef3f8; /* data colours — three distinct hues drawn from the same palette */ --mfmc-seg-pi: #ceac64; --mfmc-seg-life: #1f9d6b; --mfmc-seg-property: #8697a8; --mfmc-radius-sm: 8px; --mfmc-radius: 12px; --mfmc-radius-lg: 18px; --mfmc-shadow-sm: 0 1px 2px rgba(10, 26, 47, .06), 0 2px 8px rgba(10, 26, 47, .04); --mfmc-shadow-md: 0 8px 24px rgba(10, 26, 47, .10); --mfmc-ease: cubic-bezier(.22, .61, .36, 1); --mfmc-fast: 160ms; box-sizing: border-box; font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--mfmc-text); -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { .mfmc { --mfmc-paper: #0d1722; --mfmc-surface: #111e2c; --mfmc-surface-2: #16273a; --mfmc-line: #22374d; --mfmc-line-strong: #2e485f; --mfmc-text: #e8eff6; --mfmc-text-muted: #9db0c4; --mfmc-text-faint: #7d92a8; --mfmc-shadow-md: 0 8px 24px rgba(0, 0, 0, .45); } } /* Explicit theme switch wins over the media query in both directions. */ [data-theme="dark"] .mfmc { --mfmc-paper: #0d1722; --mfmc-surface: #111e2c; --mfmc-surface-2: #16273a; --mfmc-line: #22374d; --mfmc-line-strong: #2e485f; --mfmc-text: #e8eff6; --mfmc-text-muted: #9db0c4; --mfmc-text-faint: #7d92a8; } [data-theme="light"] .mfmc { --mfmc-paper: #ffffff; --mfmc-surface: #f6f8fa; --mfmc-surface-2: #eef2f6; --mfmc-line: #e3e9ef; --mfmc-line-strong: #cfd8e2; --mfmc-text: #0f1e2e; --mfmc-text-muted: #5b6b7d; --mfmc-text-faint: #8697a8; } .mfmc, .mfmc *, .mfmc *::before, .mfmc *::after { box-sizing: border-box; } .mfmc button, .mfmc input, .mfmc select { font-family: inherit; font-size: inherit; color: inherit; } /* Host themes style bare `button` — Homeid, for one, gives every button 30px of side padding and a 52px line-height. Inside a page builder its own reset usually absorbs that, but the enquiry popup is moved to where nothing shields it, and 30px of padding turns a 32px round close button into a wide ellipse with no room left for its icon. :where() keeps this at the specificity of .mfmc alone, so it outranks the theme's bare `button` yet still loses to every .mfmc__* rule below. */ .mfmc :where(button) { width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; padding: 0; margin: 0; font-size: inherit; font-weight: inherit; line-height: normal; letter-spacing: normal; text-align: center; text-transform: none; text-shadow: none; white-space: normal; background: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; } /* Same reasoning for the icons inside them: a theme that sets `fill` on svg would otherwise paint over these outline glyphs. */ .mfmc :where(svg) { display: block; max-width: none; fill: none; vertical-align: middle; } .mfmc :focus-visible { outline: 2px solid var(--mfmc-gold-600); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------- intro ---- */ .mfmc__intro { max-width: 640px; margin: 0 auto 28px; text-align: center; } .mfmc__eyebrow { display: inline-block; margin-bottom: 12px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mfmc-gold-700); background: var(--mfmc-gold-100); border-radius: 999px; } .mfmc__title { margin: 0 0 10px; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.14; color: var(--mfmc-text); } .mfmc__subtitle { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mfmc-text-muted); } /* ---------------------------------------------------------------- grid ---- */ .mfmc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 20px; align-items: start; } .mfmc__panel { padding: 24px; background: var(--mfmc-paper); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius-lg); box-shadow: var(--mfmc-shadow-sm); } .mfmc__results { background: linear-gradient(168deg, var(--mfmc-surface) 0%, var(--mfmc-paper) 60%); } /* ------------------------------------------------------------- controls ---- */ .mfmc__field { padding: 0; margin: 0 0 22px; border: 0; } .mfmc__field:last-child { margin-bottom: 0; } .mfmc__label { display: block; padding: 0; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mfmc-text-muted); } .mfmc__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .mfmc__label-row .mfmc__label { margin: 0; } .mfmc__label-value { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--mfmc-text-muted); white-space: nowrap; } .mfmc__label-value b { font-size: 16px; font-weight: 800; color: var(--mfmc-text); } /* buyer type ------------------------------------------------------------- */ .mfmc__products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mfmc__product { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; text-align: start; background: var(--mfmc-surface); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); cursor: pointer; transition: border-color var(--mfmc-fast) var(--mfmc-ease), background var(--mfmc-fast) var(--mfmc-ease); } .mfmc__product:hover { border-color: var(--mfmc-gold-500); } .mfmc__product[aria-pressed="true"] { background: var(--mfmc-gold-100); border-color: var(--mfmc-gold-500); box-shadow: inset 0 0 0 1px var(--mfmc-gold-500); } .mfmc__product-label { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--mfmc-text); } .mfmc__product[aria-pressed="true"] .mfmc__product-label { color: var(--mfmc-ink-900); } .mfmc__product-note { font-size: 11px; line-height: 1.35; color: var(--mfmc-text-faint); } .mfmc__product[aria-pressed="true"] .mfmc__product-note { color: var(--mfmc-gold-700); } /* steppers --------------------------------------------------------------- */ .mfmc__stepper { display: flex; align-items: stretch; gap: 8px; } .mfmc__step { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--mfmc-surface); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); color: var(--mfmc-text-muted); cursor: pointer; transition: border-color var(--mfmc-fast) var(--mfmc-ease), color var(--mfmc-fast) var(--mfmc-ease); } .mfmc__step:hover { color: var(--mfmc-gold-700); border-color: var(--mfmc-gold-500); } .mfmc__step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .mfmc__amount { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding-inline: 14px; background: var(--mfmc-surface); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); transition: border-color var(--mfmc-fast) var(--mfmc-ease); } .mfmc__amount:focus-within { border-color: var(--mfmc-gold-500); box-shadow: 0 0 0 3px rgba(206, 172, 100, .18); } .mfmc__amount-cur { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--mfmc-text-faint); } .mfmc__amount-input { width: 100%; min-width: 0; height: 48px; padding: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; background: transparent; border: 0; outline: none; } .mfmc__amount-input--rate { text-align: start; } /* ranges ----------------------------------------------------------------- */ /* The filled portion is a background gradient sized by --mfmc-fill, which the JS updates on every render: a range input has no cross-browser way to colour the track behind the thumb, and an unfilled track reads as a disabled control. Firefox draws its own track on top, so that one is made transparent to let this background through. */ .mfmc__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 6px 0 0; background-color: var(--mfmc-surface-2); background-image: linear-gradient(90deg, var(--mfmc-gold-500) 0%, var(--mfmc-gold-700) 100%); background-size: var(--mfmc-fill, 0%) 100%; background-repeat: no-repeat; border-radius: 999px; outline: none; cursor: pointer; transition: background-size var(--mfmc-fast) var(--mfmc-ease); } .mfmc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: linear-gradient(160deg, var(--mfmc-gold-300) 0%, var(--mfmc-gold-500) 50%, var(--mfmc-gold-700) 100%); border: 2px solid var(--mfmc-paper); border-radius: 50%; box-shadow: var(--mfmc-shadow-sm), 0 0 0 0 rgba(206, 172, 100, .25); cursor: grab; transition: box-shadow var(--mfmc-fast) var(--mfmc-ease), transform var(--mfmc-fast) var(--mfmc-ease); } .mfmc__range:hover::-webkit-slider-thumb { transform: scale(1.06); box-shadow: var(--mfmc-shadow-sm), 0 0 0 6px rgba(206, 172, 100, .18); } .mfmc__range:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: var(--mfmc-shadow-sm), 0 0 0 9px rgba(206, 172, 100, .22); } .mfmc__range::-moz-range-thumb { width: 22px; height: 22px; background: linear-gradient(160deg, var(--mfmc-gold-300) 0%, var(--mfmc-gold-500) 50%, var(--mfmc-gold-700) 100%); border: 2px solid var(--mfmc-paper); border-radius: 50%; box-shadow: var(--mfmc-shadow-sm); cursor: grab; transition: box-shadow var(--mfmc-fast) var(--mfmc-ease); } .mfmc__range:hover::-moz-range-thumb { box-shadow: var(--mfmc-shadow-sm), 0 0 0 6px rgba(206, 172, 100, .18); } .mfmc__range::-moz-range-track { height: 6px; background: transparent; border-radius: 999px; } .mfmc__range-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--mfmc-text-faint); } .mfmc__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mfmc-gold-700); } .mfmc__note--financed { color: var(--mfmc-text-muted); } /* switch ----------------------------------------------------------------- */ .mfmc__field--switch { padding-top: 20px; border-top: 1px solid var(--mfmc-line); } .mfmc__switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .mfmc__switch-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .mfmc__switch-track { flex: 0 0 auto; position: relative; width: 44px; height: 25px; margin-top: 1px; background: var(--mfmc-surface-2); border: 1px solid var(--mfmc-line-strong); border-radius: 999px; transition: background var(--mfmc-fast) var(--mfmc-ease), border-color var(--mfmc-fast) var(--mfmc-ease); } .mfmc__switch-knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 19px; height: 19px; background: var(--mfmc-paper); border-radius: 50%; box-shadow: var(--mfmc-shadow-sm); transition: transform var(--mfmc-fast) var(--mfmc-ease); } .mfmc__switch-input:checked + .mfmc__switch-track { background: linear-gradient(160deg, var(--mfmc-gold-500) 0%, var(--mfmc-gold-700) 100%); border-color: var(--mfmc-gold-700); } .mfmc__switch-input:checked + .mfmc__switch-track .mfmc__switch-knob { transform: translateX(19px); } .mfmc__switch-input:focus-visible + .mfmc__switch-track { outline: 2px solid var(--mfmc-gold-600); outline-offset: 2px; } .mfmc__switch-text b { display: block; font-size: 14px; font-weight: 700; color: var(--mfmc-text); } .mfmc__switch-text small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--mfmc-text-faint); } /* -------------------------------------------------------------- results ---- */ .mfmc__headline { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .mfmc__donut { position: relative; flex: 0 0 148px; width: 148px; height: 148px; margin: 0; } .mfmc__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); } .mfmc__donut circle { fill: none; stroke-width: 13; } .mfmc__donut-track { stroke: var(--mfmc-surface-2); } .mfmc__donut-seg { stroke-linecap: butt; transition: stroke-dasharray var(--mfmc-fast) var(--mfmc-ease), stroke-dashoffset var(--mfmc-fast) var(--mfmc-ease); } .mfmc__donut-seg--pi { stroke: var(--mfmc-seg-pi); } .mfmc__donut-seg--life { stroke: var(--mfmc-seg-life); } .mfmc__donut-seg--property { stroke: var(--mfmc-seg-property); } .mfmc__donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 18px; text-align: center; } .mfmc__donut-centre b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--mfmc-text); } .mfmc__donut-centre span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mfmc-text-faint); } .mfmc__legend { flex: 1; min-width: 180px; padding: 0; margin: 0; list-style: none; } .mfmc__legend li { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; color: var(--mfmc-text-muted); border-bottom: 1px solid var(--mfmc-line); } .mfmc__legend li:last-child { border-bottom: 0; } .mfmc__legend li span { flex: 1; min-width: 0; } .mfmc__legend li b { font-size: 13.5px; font-weight: 800; color: var(--mfmc-text); white-space: nowrap; } .mfmc__swatch { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; } .mfmc__swatch--pi { background: var(--mfmc-seg-pi); } .mfmc__swatch--life { background: var(--mfmc-seg-life); } .mfmc__swatch--property { background: var(--mfmc-seg-property); } /* stats ------------------------------------------------------------------ */ .mfmc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; overflow: hidden; background: var(--mfmc-line); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); } .mfmc__stats > div { padding: 13px 14px; background: var(--mfmc-paper); } .mfmc__stats dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mfmc-text-faint); } .mfmc__stats dd { margin: 4px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--mfmc-text); } /* disclosure panels ------------------------------------------------------- */ .mfmc__details { margin-top: 12px; background: var(--mfmc-paper); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); } .mfmc__details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; font-size: 13px; font-weight: 700; color: var(--mfmc-text); cursor: pointer; list-style: none; } .mfmc__details summary::-webkit-details-marker { display: none; } .mfmc__details summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-inline-start: 2px; border-right: 2px solid var(--mfmc-text-faint); border-bottom: 2px solid var(--mfmc-text-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--mfmc-fast) var(--mfmc-ease); } .mfmc__details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .mfmc__details summary b { margin-inline-start: auto; font-size: 14px; font-weight: 800; color: var(--mfmc-gold-700); } .mfmc__details-body { padding: 0 15px 15px; } .mfmc__breakdown { padding: 0; margin: 0; list-style: none; } .mfmc__breakdown li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--mfmc-text-muted); border-bottom: 1px dashed var(--mfmc-line); } .mfmc__breakdown li b { font-weight: 700; color: var(--mfmc-text); white-space: nowrap; } .mfmc__breakdown-total { border-bottom: 0 !important; border-top: 1px solid var(--mfmc-line-strong); margin-top: 4px; padding-top: 10px !important; font-weight: 700; color: var(--mfmc-text) !important; } .mfmc__fee-notes { padding: 0; margin: 6px 0 0; list-style: none; } .mfmc__fee-notes li { padding: 6px 0; font-size: 12px; line-height: 1.5; color: var(--mfmc-text-faint); } .mfmc__fee-notes li b { display: block; font-size: 12.5px; color: var(--mfmc-text-muted); } .mfmc__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mfmc__table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } .mfmc__table th, .mfmc__table td { padding: 7px 10px; text-align: end; white-space: nowrap; border-bottom: 1px solid var(--mfmc-line); } .mfmc__table thead th { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mfmc-text-faint); } .mfmc__table th:first-child, .mfmc__table td:first-child { text-align: start; padding-inline-start: 0; } .mfmc__table tbody th { font-weight: 700; color: var(--mfmc-text-muted); } .mfmc__table tbody td { color: var(--mfmc-text); } /* actions ---------------------------------------------------------------- */ .mfmc__actions { display: flex; gap: 10px; margin-top: 18px; } .mfmc__cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding-inline: 22px; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--mfmc-ink-900); background: linear-gradient(160deg, var(--mfmc-gold-300) 0%, var(--mfmc-gold-500) 45%, var(--mfmc-gold-700) 100%); border: 0; border-radius: var(--mfmc-radius); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px -10px rgba(156, 122, 52, .6); transition: filter var(--mfmc-fast) var(--mfmc-ease); } .mfmc__cta:hover { filter: brightness(1.05); color: var(--mfmc-ink-900); } .mfmc__cta svg, .mfmc__ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mfmc__ghost { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding-inline: 16px; font-size: 12.5px; font-weight: 700; color: var(--mfmc-text-muted); background: transparent; border: 1px solid var(--mfmc-line-strong); border-radius: var(--mfmc-radius); cursor: pointer; transition: border-color var(--mfmc-fast) var(--mfmc-ease), color var(--mfmc-fast) var(--mfmc-ease); } .mfmc__ghost:hover { color: var(--mfmc-gold-700); border-color: var(--mfmc-gold-500); } .mfmc__disclaimer { margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mfmc-text-faint); } /* -------------------------------------------------- enquiry popup ---- */ /* The popup is moved to on boot, so it carries .mfmc itself and these rules are the only ones that see it. */ .mfmc-modal-open { overflow: hidden; } .mfmc__modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mfmc__modal[hidden] { display: none; } .mfmc__modal-veil { position: fixed; inset: 0; background: rgba(16, 29, 23, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .mfmc__modal-card { position: relative; width: 100%; max-width: 620px; margin: auto; overflow: hidden; background: var(--mfmc-paper); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius-lg); box-shadow: 0 34px 80px -28px rgba(10, 26, 47, .55), 0 2px 10px rgba(10, 26, 47, .12); animation: mfmc-rise 260ms var(--mfmc-ease) both; } @keyframes mfmc-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } /* header ----------------------------------------------------------------- */ /* Ink, not paper: the popup opens over a gold button, and a dark head with the monthly figure on it reads as the same card carrying on rather than a form pasted over the top. The gold hairline is the seam. */ .mfmc__modal-head { position: relative; padding: 30px 32px 24px; color: var(--mfmc-on-dark); background: radial-gradient(120% 130% at 88% -20%, rgba(206, 172, 100, .30) 0%, transparent 58%), linear-gradient(158deg, var(--mfmc-ink-700) 0%, var(--mfmc-ink-900) 100%); border-bottom: 1px solid var(--mfmc-gold-700); } .mfmc__modal-eyebrow:not(:empty) { display: inline-block; margin-bottom: 12px; padding: 4px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mfmc-gold-300); background: rgba(206, 172, 100, .14); border: 1px solid rgba(206, 172, 100, .34); border-radius: 999px; } .mfmc__modal-title { margin: 0; padding-inline-end: 40px; font-size: 23px; font-weight: 800; letter-spacing: -.022em; line-height: 1.18; color: #fff; } /* Sits where the monthly figure used to: the header states what the visitor gets back for submitting, rather than handing them the answer up front. */ .mfmc__modal-promise { margin: 14px 0 0; padding-top: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--mfmc-gold-300); border-top: 1px solid rgba(227, 208, 158, .18); } .mfmc__modal-x { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; /* Restated rather than left to the reset above: this is the one control a visitor must always be able to find, so its box is pinned outright. */ width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff; cursor: pointer; transition: color var(--mfmc-fast) var(--mfmc-ease), background var(--mfmc-fast) var(--mfmc-ease), border-color var(--mfmc-fast) var(--mfmc-ease); } .mfmc__modal-x:hover { color: var(--mfmc-ink-900); background: var(--mfmc-gold-300); border-color: var(--mfmc-gold-300); } .mfmc__modal-x svg { display: block; width: 15px; min-width: 15px; height: 15px; min-height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } /* body ------------------------------------------------------------------- */ .mfmc__modal-body { padding: 24px 32px 30px; } /* Four cells on a hairline grid — the same treatment as .mfmc__stats, so the popup quotes the results panel instead of inventing a second style for it. */ .mfmc__modal-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 20px; overflow: hidden; background: var(--mfmc-line); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); } .mfmc__modal-summary > div { padding: 11px 13px; background: var(--mfmc-surface); } .mfmc__modal-summary dt { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mfmc-text-faint); } .mfmc__modal-summary dd { margin: 4px 0 0; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--mfmc-text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Now a caption introducing the summary below it, not a paragraph of its own. */ .mfmc__modal-lede { margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mfmc-text-faint); } /* form ------------------------------------------------------------------- */ .mfmc__form[hidden] { display: none; } .mfmc__form-row { margin-bottom: 15px; } .mfmc__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; } .mfmc__form-label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 7px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mfmc-text-muted); } .mfmc__form-label i { font-style: normal; color: var(--mfmc-gold-600); } .mfmc__form-label em { margin-inline-start: auto; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--mfmc-text-faint); text-transform: none; } .mfmc__input-wrap { position: relative; } .mfmc__input-icon { position: absolute; top: 50%; inset-inline-start: 13px; width: 17px; height: 17px; margin-top: -8.5px; fill: none; stroke: var(--mfmc-text-faint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke var(--mfmc-fast) var(--mfmc-ease); } .mfmc__input-wrap:focus-within .mfmc__input-icon { stroke: var(--mfmc-gold-600); } .mfmc__input { display: block; width: 100%; height: 48px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--mfmc-text); background: var(--mfmc-surface); border: 1px solid var(--mfmc-line); border-radius: var(--mfmc-radius); outline: none; transition: border-color var(--mfmc-fast) var(--mfmc-ease), background var(--mfmc-fast) var(--mfmc-ease), box-shadow var(--mfmc-fast) var(--mfmc-ease); } .mfmc__input-wrap .mfmc__input { padding-inline-start: 40px; } .mfmc__input::placeholder { font-weight: 500; color: var(--mfmc-text-faint); opacity: 1; } .mfmc__input--area { height: auto; padding: 12px 14px; font-size: 14px; font-weight: 500; line-height: 1.55; resize: vertical; } .mfmc__input:hover { border-color: var(--mfmc-line-strong); } .mfmc__input:focus { background: var(--mfmc-paper); border-color: var(--mfmc-gold-500); box-shadow: 0 0 0 3px rgba(206, 172, 100, .18); } .mfmc__input[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .14); } .mfmc__form-error { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #c0392b; } .mfmc__form-error[hidden] { display: none; } /* Off-screen rather than display:none — bots that skip hidden inputs still fill this one, which is the whole point of it. */ .mfmc__form-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .mfmc__cta--submit { width: 100%; height: 54px; margin-top: 6px; cursor: pointer; } .mfmc__cta--submit[disabled] { cursor: progress; filter: saturate(.55) brightness(.98); } .mfmc__form-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mfmc-text-faint); } .mfmc__form-note svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--mfmc-gold-600); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mfmc__form-status { margin: 0 0 14px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.5; border-radius: var(--mfmc-radius); } .mfmc__form-status[hidden] { display: none; } .mfmc__form-status.is-ok { color: #12674a; background: rgba(31, 157, 107, .12); border: 1px solid rgba(31, 157, 107, .32); } .mfmc__form-status.is-error { color: #a5301f; background: rgba(192, 57, 43, .10); border: 1px solid rgba(192, 57, 43, .28); } @media (prefers-color-scheme: dark) { .mfmc__form-status.is-ok { color: #7ce0b6; } .mfmc__form-status.is-error { color: #ff9c8e; } } [data-theme="dark"] .mfmc__form-status.is-ok { color: #7ce0b6; } [data-theme="dark"] .mfmc__form-status.is-error { color: #ff9c8e; } /* sent ------------------------------------------------------------------- */ .mfmc__done { padding: 10px 0 4px; text-align: center; animation: mfmc-rise 260ms var(--mfmc-ease) both; } .mfmc__done[hidden] { display: none; } .mfmc__done-mark { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 16px; color: var(--mfmc-ink-900); background: linear-gradient(160deg, var(--mfmc-gold-300) 0%, var(--mfmc-gold-500) 45%, var(--mfmc-gold-700) 100%); border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(156, 122, 52, .75); } .mfmc__done-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .mfmc__done-text { margin: 0 auto 20px; max-width: 340px; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--mfmc-text); } .mfmc__done-close { justify-content: center; width: 100%; } /* ---------------------------------------------------------- responsive ---- */ @media (max-width: 980px) { .mfmc__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .mfmc__panel { padding: 18px; } .mfmc__products { grid-template-columns: minmax(0, 1fr); } .mfmc__stats { grid-template-columns: minmax(0, 1fr); } .mfmc__headline { justify-content: center; } .mfmc__actions { flex-wrap: wrap; } .mfmc__cta, .mfmc__ghost { flex: 1 1 100%; justify-content: center; } .mfmc__modal { padding: 12px; } .mfmc__modal-head { padding: 20px 20px 18px; } .mfmc__modal-body { padding: 18px 20px 20px; } .mfmc__modal-title { font-size: 20px; } .mfmc__modal-promise { font-size: 12.5px; } .mfmc__modal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mfmc__modal-summary dd { font-size: 13.5px; } .mfmc__form-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .mfmc * { transition-duration: .01ms !important; } .mfmc__modal-card, .mfmc__done { animation: none; } }