/* * MarketForge — front-end component styles. * * Every visual value comes from a design token (custom property). Tokens are * set by Marketplace → Design and printed after this file; the values below * are only fallbacks. All selectors are scoped to .mf-root so the theme is * never affected. */ :root { --mf-primary: #4f46e5; --mf-on-primary: #fff; --mf-secondary: #0f172a; --mf-accent: #f59e0b; --mf-success: #16a34a; --mf-warning: #d97706; --mf-danger: #dc2626; --mf-info: #0284c7; --mf-text: #0f172a; --mf-text-muted: #64748b; --mf-bg: #fff; --mf-surface: #fff; --mf-surface-alt: #f8fafc; --mf-border: #e2e8f0; --mf-font-heading: inherit; --mf-font-body: inherit; --mf-font-size: 16px; --mf-line-height: 1.6; --mf-heading-weight: 700; --mf-radius: 12px; --mf-radius-button: var(--mf-radius); --mf-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 2px 8px -2px rgb(15 23 42 / .08); --mf-space: 1; --mf-container: 1240px; } /* ---------- Base ---------- */ /* Anything marked hidden stays hidden, whatever display a component style sets. */ .mf-root [hidden] { display: none !important; } .mf-root { --mf-gap: calc(20px * var(--mf-space)); --mf-pad: calc(20px * var(--mf-space)); --mf-primary-hover: color-mix(in srgb, var(--mf-primary) 86%, #000); --mf-primary-soft: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface)); --mf-accent-soft: color-mix(in srgb, var(--mf-accent) 14%, var(--mf-surface)); --mf-focus: 0 0 0 3px color-mix(in srgb, var(--mf-primary) 35%, transparent); box-sizing: border-box; max-width: var(--mf-container); margin-inline: auto; padding: var(--mf-root-pad, 0); border-radius: var(--mf-root-radius, 0); background: var(--mf-root-bg, transparent); color: var(--mf-text); font-family: var(--mf-font-body); font-size: var(--mf-font-size); font-weight: 400; line-height: var(--mf-line-height); -webkit-font-smoothing: antialiased; container-type: inline-size; } /* Holder for fixed elements moved to (price bar, toasts): styles only, no box. */ .mf-root.mf-root--float { container-type: normal; max-width: none; margin: 0; padding: 0; background: none; border-radius: 0; } .alignwide > .mf-root, .alignfull > .mf-root { max-width: none; } /* A component inside another (dashboard tabs, Deal Room…) fills its space. Without this, grid parents shrink it to nothing: it is centred with auto margins and, as a size container, has no width of its own. */ .mf-root .mf-root { width: 100%; max-width: none; margin-inline: 0; } .mf-root *, .mf-root *::before, .mf-root *::after { box-sizing: inherit; } /* Some themes fill every SVG and decorate every heading; our icons are outlines and our headings plain. */ .mf-root svg.mf-icon, .mf-root .mf-lp-bar svg.mf-icon { fill: none; } .mf-root :is(h1, h2, h3, h4, h5, h6)::before, .mf-root :is(h1, h2, h3, h4, h5, h6)::after { content: none !important; display: none !important; } /* Themes often style buttons and fields with content-box sizing; keep ours predictable. */ .mf-root :is(button, input, select, textarea, .mf-btn) { box-sizing: border-box; } .mf-root :where(h1, h2, h3, h4) { margin: 0; color: var(--mf-text); font-family: var(--mf-font-heading); font-weight: var(--mf-heading-weight); line-height: 1.2; letter-spacing: -0.015em; } .mf-root :where(p) { margin: 0; } .mf-root :where(ul[role="list"], ol[role="list"]) { margin: 0; padding: 0; list-style: none; } /* ------------------------------------------------------------------ * Theme shield. Themes style bare elements: Hello Elementor paints every * button hover/focus #C36 and links #C36/#336, WordPress underlines links, * others add borders, padding and stripes. These resets sit at the same * strength as those theme rules (up to 0,2,0) and load after the theme; * every plugin rule is scoped as `.mf-root .x` (0,2,0+) and comes later, * so it always wins. See scripts/css/scope.js. * ---------------------------------------------------------------- */ .mf-root a { color: var(--mf-primary); text-decoration: none; text-underline-offset: 3px; background-color: transparent; box-shadow: none; } :where(.mf-root) a:is(:hover, :focus, :active) { color: var(--mf-primary-hover); } .mf-root a:is(:hover, :focus, :active) { text-decoration: none; } /* Links inside running text stay underlined so they read as links. */ .mf-root :is(.mf-legal__body, .mf-rich, .mf-lp-desc) a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; } .mf-root button, .mf-root [type="button"], .mf-root [type="submit"], .mf-root [type="reset"] { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: none; text-decoration: none; text-shadow: none; white-space: normal; min-height: 0; width: auto; cursor: pointer; } :where(.mf-root) :is(button, [type="button"], [type="submit"], [type="reset"]):is(:hover, :focus, :active) { background-color: transparent; color: inherit; text-decoration: none; } .mf-root label { line-height: inherit; vertical-align: baseline; font-weight: inherit; } .mf-root :where(h5, h6) { margin: 0; font-family: var(--mf-font-heading); font-weight: var(--mf-heading-weight); line-height: 1.3; } .mf-root table { margin: 0; border-collapse: collapse; font-size: inherit; } .mf-root tr:nth-child(n) > :is(td, th) { background-color: transparent; border: 0; line-height: inherit; vertical-align: middle; } .mf-root img { max-width: 100%; height: auto; border: 0; box-shadow: none; } .mf-root :where(a, button, summary, input, select, textarea):focus-visible { outline: none; box-shadow: var(--mf-focus); border-radius: max(4px, calc(var(--mf-radius) / 2)); } .mf-root .mf-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } .mf-root .mf-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .mf-root > .mf-section { padding-block: calc(28px * var(--mf-space)); } .mf-root .mf-section + .mf-section { margin-top: calc(56px * var(--mf-space)); } .mf-root .mf-section__header { display: grid; gap: 8px; margin-bottom: calc(28px * var(--mf-space)); max-width: 720px; } .mf-root .mf-section__header.is-centered { margin-inline: auto; text-align: center; } .mf-root .mf-section__title { font-size: clamp(1.5em, 1.1em + 1.6cqi, 2.25em); } .mf-root .mf-section__subtitle { color: var(--mf-text-muted); font-size: 1.075em; } /* Responsive grid: never more than --mf-cols columns, fewer when space runs out. */ .mf-root .mf-grid { --mf-cols: 3; --mf-min-col: 240px; display: grid; gap: var(--mf-gap); grid-template-columns: repeat( auto-fill, minmax(min(100%, max(var(--mf-min-col), calc((100% - (var(--mf-cols) - 1) * var(--mf-gap)) / var(--mf-cols)))), 1fr) ); } /* ---------- Card ---------- */ .mf-root .mf-card { position: relative; display: flex; flex-direction: column; gap: calc(12px * var(--mf-space)); padding: var(--mf-pad); background: var(--mf-surface); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); box-shadow: var(--mf-shadow); } .mf-root .mf-stretched-link { color: inherit !important; text-decoration: none; } .mf-root .mf-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--mf-radius); } .mf-root .mf-stretched-link:focus-visible { box-shadow: none; } .mf-root .mf-stretched-link:focus-visible::after { box-shadow: var(--mf-focus); } /* ---------- Buttons ---------- */ .mf-root .mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px calc(18px * var(--mf-space)); border: 1px solid transparent; border-radius: var(--mf-radius-button); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .mf-root .mf-btn:active { transform: translateY(1px); } .mf-root .mf-btn--primary { background: var(--mf-primary); color: var(--mf-on-primary) !important; } .mf-root .mf-btn--primary:hover { background: var(--mf-primary-hover); } .mf-root .mf-btn--secondary { background: var(--mf-surface); border-color: var(--mf-border); color: var(--mf-text) !important; } .mf-root .mf-btn--secondary:hover { border-color: var(--mf-primary); color: var(--mf-primary) !important; } .mf-root .mf-btn--ghost { background: transparent; color: var(--mf-primary) !important; } .mf-root .mf-btn--ghost:hover { background: var(--mf-primary-soft); } .mf-root .mf-btn[disabled], .mf-root .mf-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } /* ---------- Badges, chips, banners ---------- */ .mf-root .mf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .8em; font-weight: 600; line-height: 1.6; white-space: nowrap; } .mf-root .mf-badge--primary { background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-badge--success { background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); } .mf-root .mf-badge--warning { background: color-mix(in srgb, var(--mf-warning) 14%, var(--mf-surface)); color: var(--mf-warning); } .mf-root .mf-badge--danger { background: color-mix(in srgb, var(--mf-danger) 12%, var(--mf-surface)); color: var(--mf-danger); } .mf-root .mf-badge--accent { background: var(--mf-accent-soft); color: color-mix(in srgb, var(--mf-accent) 70%, var(--mf-text)); } .mf-root .mf-chips { position: relative; z-index: 2; /* Above a card's stretched link. */ display: flex; flex-wrap: wrap; gap: 6px; } .mf-root .mf-chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text) !important; font-size: .82em; line-height: 1.4; text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .mf-root a.mf-chip:hover { border-color: var(--mf-primary); background: var(--mf-primary-soft); color: var(--mf-primary) !important; } .mf-root .mf-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--mf-gap); padding: 12px 16px; border-radius: var(--mf-radius); background: var(--mf-primary-soft); color: var(--mf-text); font-weight: 600; } .mf-root .mf-banner--accent { justify-content: center; background: var(--mf-accent-soft); } .mf-root .mf-banner--accent .mf-icon { color: var(--mf-accent); } .mf-root .mf-icon-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-empty { padding: var(--mf-pad); border: 1px dashed var(--mf-border); border-radius: var(--mf-radius); color: var(--mf-text-muted); text-align: center; } /* ---------- Forms ---------- */ .mf-root .mf-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface); color: var(--mf-text); font: inherit; } .mf-root .mf-input:focus { border-color: var(--mf-primary); outline: none; box-shadow: var(--mf-focus); } /* ---------- Component: asset categories ---------- */ .mf-root .mf-cat-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .mf-root .mf-cat-card.is-linked:hover { border-color: color-mix(in srgb, var(--mf-primary) 45%, var(--mf-border)); transform: translateY(-2px); } .mf-root .mf-cat-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: calc(var(--mf-radius) * .8); background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-cat-card__title { font-size: 1.125em; } .mf-root .mf-cat-card__desc { color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-cat-card .mf-chips { padding-top: 4px; } .mf-root .mf-cat-card__arrow { position: absolute; top: var(--mf-pad); inset-inline-end: var(--mf-pad); color: var(--mf-text-muted); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; } .mf-root .mf-cat-card.is-linked:hover .mf-cat-card__arrow { opacity: 1; transform: none; color: var(--mf-primary); } /* ---------- Component: pricing ---------- */ /* Fee groups differ in length: balanced columns instead of rows with gaps. */ .mf-root .mf-grid.mf-pricing__grid { display: block; columns: 3 280px; column-gap: var(--mf-gap); } .mf-root .mf-pricing__grid > .mf-pricing__group { display: block; width: 100%; margin: 0 0 var(--mf-gap); break-inside: avoid; } .mf-root .mf-pricing__group-title { display: flex; align-items: center; gap: 12px; font-size: 1.1em; } .mf-root .mf-pricing__rows > li + li { border-top: 1px solid var(--mf-border); } .mf-root .mf-pricing__row > :is(.mf-pricing__name, .mf-pricing__price), .mf-root .mf-pricing__details > summary { padding-block: 10px; } .mf-root .mf-pricing__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mf-root .mf-pricing__row:has(details) { display: block; } .mf-root .mf-pricing__details > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; } .mf-root .mf-pricing__details > summary::-webkit-details-marker { display: none; } .mf-root .mf-pricing__name { color: var(--mf-text); } .mf-root .mf-pricing__price { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; white-space: nowrap; } .mf-root .mf-pricing__price small { color: var(--mf-text-muted); font-size: .75em; font-weight: 500; } .mf-root .mf-pricing__chevron { align-self: center; color: var(--mf-text-muted); transition: transform .2s ease; } .mf-root .mf-pricing__details[open] .mf-pricing__chevron { transform: rotate(180deg); } .mf-root .mf-pricing__tiers { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: .88em; } .mf-root .mf-pricing__tiers th, .mf-root .mf-pricing__tiers td { padding: 6px 10px; border: 0; text-align: start; } .mf-root .mf-pricing__tiers th { color: var(--mf-text-muted); font-weight: 600; } .mf-root .mf-pricing__tiers td:last-child, .mf-root .mf-pricing__tiers th:last-child { text-align: end; } .mf-root .mf-pricing__tiers tbody tr:nth-child(odd) { background: var(--mf-surface-alt); } /* ---------- Typography helpers ---------- */ .mf-root .mf-h3, .mf-root .mf-h4 { color: var(--mf-text); font-family: var(--mf-font-heading); font-weight: var(--mf-heading-weight); line-height: 1.25; } .mf-root .mf-h3 { font-size: 1.25em; } .mf-root .mf-h4 { font-size: 1.05em; } .mf-root .mf-muted { color: var(--mf-text-muted); } .mf-root .mf-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px !important; color: var(--mf-primary); font-size: .85em; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; } .mf-root .mf-link { font-weight: 600; text-decoration: none; } .mf-root .mf-link:hover { text-decoration: underline; } .mf-root .mf-card__title { font-size: 1.05em; } /* ---------- Button sizes & variants ---------- */ .mf-root .mf-btn--sm { min-height: 36px; padding: 6px 12px; font-size: .9em; } .mf-root .mf-btn--block { width: 100%; } .mf-root .mf-btn--danger { color: var(--mf-danger) !important; } .mf-root .mf-btn--danger:hover { background: color-mix(in srgb, var(--mf-danger) 10%, var(--mf-surface)); } /* ---------- Alerts ---------- */ .mf-root .mf-alert { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--mf-gap); padding: 14px 16px; border: 1px solid var(--mf-alert-border, var(--mf-border)); border-radius: var(--mf-radius); background: var(--mf-alert-bg, var(--mf-surface-alt)); color: var(--mf-text); } .mf-root p.mf-alert { flex-direction: row; align-items: flex-start; gap: 10px; } .mf-root .mf-alert > .mf-icon, .mf-root .mf-alert__title > .mf-icon { flex-shrink: 0; margin-top: .15em; color: var(--mf-alert-accent, var(--mf-text-muted)); } .mf-root .mf-alert__title { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; } .mf-root .mf-alert ul { margin: 0; padding-inline-start: 36px; } .mf-root .mf-alert--success { --mf-alert-accent: var(--mf-success); --mf-alert-bg: color-mix(in srgb, var(--mf-success) 8%, var(--mf-surface)); --mf-alert-border: color-mix(in srgb, var(--mf-success) 30%, var(--mf-surface)); } .mf-root .mf-alert--danger { --mf-alert-accent: var(--mf-danger); --mf-alert-bg: color-mix(in srgb, var(--mf-danger) 7%, var(--mf-surface)); --mf-alert-border: color-mix(in srgb, var(--mf-danger) 30%, var(--mf-surface)); } .mf-root .mf-alert--warning { --mf-alert-accent: var(--mf-warning); --mf-alert-bg: color-mix(in srgb, var(--mf-warning) 9%, var(--mf-surface)); --mf-alert-border: color-mix(in srgb, var(--mf-warning) 32%, var(--mf-surface)); } .mf-root .mf-alert--info { --mf-alert-accent: var(--mf-info); --mf-alert-bg: color-mix(in srgb, var(--mf-info) 8%, var(--mf-surface)); --mf-alert-border: color-mix(in srgb, var(--mf-info) 28%, var(--mf-surface)); } .mf-root .mf-alert:focus { outline: none; box-shadow: var(--mf-focus); } /* ---------- Form fields ---------- */ .mf-root .mf-field { display: grid; gap: 6px; align-content: start; margin: 0 0 calc(18px * var(--mf-space)); } .mf-root .mf-label { display: block; color: var(--mf-text); font-weight: 600; font-size: .95em; } .mf-root .mf-required { color: var(--mf-danger); } .mf-root .mf-help { margin: 0; color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--mf-danger); font-size: .88em; font-weight: 600; } .mf-root .mf-error .mf-icon { margin-top: .15em; } .mf-root .mf-field.has-error .mf-input { border-color: var(--mf-danger); } .mf-root textarea.mf-input { min-height: 120px; resize: vertical; line-height: 1.5; } .mf-root select.mf-input { appearance: auto; } .mf-root .mf-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .mf-root .mf-fieldset > legend { padding: 0; margin-bottom: 10px; } .mf-root .mf-fieldset:focus { outline: none; } .mf-root .mf-counter { justify-self: end; margin-top: -2px; color: var(--mf-text-muted); font-size: .78em; font-variant-numeric: tabular-nums; } .mf-root .mf-counter.is-over { color: var(--mf-danger); font-weight: 600; } .mf-root .mf-choices { display: flex; flex-direction: column; gap: 8px; } .mf-root .mf-choices--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; } .mf-root .mf-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; } .mf-root .mf-check input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mf-primary); } .mf-root .mf-check--sm { font-size: .85em; } .mf-root .mf-check--sm input { width: 16px; height: 16px; } .mf-root .mf-check--danger { color: var(--mf-danger); } .mf-root .mf-affix { display: flex; align-items: stretch; } .mf-root .mf-affix > .mf-input { min-width: 0; flex: 1; } .mf-root .mf-affix__part { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--mf-border); background: var(--mf-surface-alt); color: var(--mf-text-muted); font-weight: 600; white-space: nowrap; } .mf-root .mf-affix__part:first-child { border-inline-end: 0; border-radius: calc(var(--mf-radius) * .75) 0 0 calc(var(--mf-radius) * .75); } .mf-root .mf-affix__part:last-child { border-inline-start: 0; border-radius: 0 calc(var(--mf-radius) * .75) calc(var(--mf-radius) * .75) 0; } .mf-root .mf-affix > .mf-input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .mf-root .mf-affix > .mf-input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .mf-root .mf-form-grid { display: grid; gap: 0 var(--mf-gap); grid-template-columns: 1fr; } @container (min-width: 640px) { .mf-root .mf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-root .mf-form-grid__cell.is-wide { grid-column: 1 / -1; } } /* Selectable cards (radio / checkbox inside a label). */ .mf-root .mf-choice-grid { --mf-gap: 12px; margin-bottom: calc(18px * var(--mf-space)); } .mf-root .mf-choice-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .mf-root .mf-choice-card > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .mf-root .mf-choice-card:hover { border-color: color-mix(in srgb, var(--mf-primary) 50%, var(--mf-border)); } .mf-root .mf-choice-card:has(input:checked) { border-color: var(--mf-primary); background: var(--mf-primary-soft); } .mf-root .mf-choice-card:has(input:focus-visible) { box-shadow: var(--mf-focus); } .mf-root .mf-choice-card.is-disabled { cursor: not-allowed; opacity: .65; } .mf-root .mf-choice-card.is-disabled:hover { border-color: var(--mf-border); } .mf-root .mf-choice-card__icon { display: inline-grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-choice-card:has(input:checked) .mf-choice-card__icon { background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-choice-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; } .mf-root .mf-choice-card__title { font-weight: 700; overflow-wrap: anywhere; } .mf-root .mf-choice-card__desc, .mf-root .mf-choice-card__meta { overflow-wrap: anywhere; } .mf-root .mf-choice-card__desc { color: var(--mf-text-muted); font-size: .86em; line-height: 1.45; } .mf-root .mf-choice-card__meta { color: var(--mf-text); font-size: .82em; font-weight: 600; } .mf-root .mf-choice-card .mf-badge { justify-self: start; max-width: 100%; margin-top: 4px; white-space: normal; line-height: 1.35; padding-block: 3px; } .mf-root .mf-dash__find-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mf-root .mf-dash__switch { margin: 14px 0 0; color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-dash__switch a { color: var(--mf-primary); font-weight: 600; } /* Invite & earn. */ .mf-root .mf-invite { display: grid; gap: 16px; } .mf-root .mf-invite__hero { display: flex; gap: 14px; align-items: flex-start; background: var(--mf-primary-soft); } .mf-root .mf-invite__hero .mf-muted { margin: 4px 0 0; } .mf-root .mf-invite__icon { display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: var(--mf-radius); background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-invite__copyrow { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-invite__copyrow .mf-input { flex: 1 1 240px; min-width: 0; } .mf-root .mf-invite__share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mf-root .mf-invite__kpis { margin: 0; } .mf-root .mf-invite__credits { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; } .mf-root .mf-invite__credits li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .mf-root .mf-invite__steps { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; } .mf-root .mf-promote__gift { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--mf-accent) 45%, var(--mf-border)); border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-accent) 8%, var(--mf-surface)); text-align: left; } .mf-root .mf-promote__gift-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mf-accent); color: var(--mf-text); } .mf-root .mf-promote__gift-text { display: grid; flex: 1 1 200px; gap: 2px; } /* Valuation: email me my valuation. */ .mf-root .mf-vtool__email { display: grid; gap: 10px; margin-top: 16px; padding: 18px; } .mf-root .mf-vtool__email-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05em; } .mf-root .mf-vtool__email-title svg { color: var(--mf-primary); } .mf-root .mf-vtool__email .mf-muted { margin: 0; } .mf-root .mf-vtool__email-form { display: grid; gap: 10px; } .mf-root .mf-vtool__email-row { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-vtool__email-row .mf-input { flex: 1 1 220px; min-width: 0; } .mf-root .mf-vtool__news { font-size: .88em; } /* Business seller badge. */ .mf-root .mf-biz-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface-alt); color: var(--mf-text); font-size: .78rem; font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; } .mf-root .mf-biz-badge svg { flex: none; color: var(--mf-text-muted); } .mf-root .mf-biz-badge.is-verified { border-color: color-mix(in srgb, var(--mf-primary) 35%, var(--mf-border)); background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-biz-badge.is-verified svg { color: var(--mf-primary); } .mf-root .mf-biz-badge.is-compact { padding: 3px; border-radius: 50%; } .mf-root .mf-lp-seller__biz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0; font-size: .88em; } .mf-root .mf-lp-seller__biz .mf-muted { display: inline-flex; align-items: center; gap: 3px; } .mf-root .mf-lp-seller__biz a { color: var(--mf-primary); } .mf-root .mf-deal-party__biz { margin: 2px 0 0; font-size: .82em; } /* Dashboard: selling as an individual or a business. */ .mf-root .mf-biz__kind { justify-self: stretch; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; } .mf-root .mf-biz__fields { justify-self: stretch; } .mf-root .mf-biz__kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; width: 100%; } .mf-root .mf-biz__fields fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .mf-root .mf-biz__fields { margin-bottom: 14px; } .mf-root .mf-biz__form:has(input[name="business_kind"][value="individual"]:checked) .mf-biz__fields { display: none; } .mf-root .mf-biz .mf-alert { margin-bottom: 14px; } /* Buy / sell / both (sign-up form and dashboard settings). */ .mf-root .mf-focus-choice { justify-self: stretch; max-width: 600px; margin: 0 0 calc(14px * var(--mf-space)); padding: 0; border: 0; min-width: 0; } .mf-root .mf-focus-choice__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; } .mf-root .mf-focus-choice__card { flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; text-align: center; } .mf-root .mf-focus-choice__card .mf-choice-card__icon { width: 36px; height: 36px; } .mf-root .mf-focus-choice__card .mf-choice-card__title { font-size: .92em; line-height: 1.25; } .mf-root .mf-focus-choice__card .mf-choice-card__desc { font-size: .78em; } @media (max-width: 380px) { .mf-root .mf-focus-choice__card .mf-choice-card__desc { display: none; } } /* ---------- Simple lists ---------- */ .mf-root .mf-list__item { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 0; } .mf-root .mf-list__item + .mf-list__item { border-top: 1px solid var(--mf-border); } .mf-root .mf-list__main { display: grid; gap: 2px; min-width: 0; } .mf-root .mf-list__title { font-weight: 600; overflow-wrap: anywhere; } .mf-root .mf-list__meta { color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-list__actions { display: flex; gap: 6px; align-items: center; } .mf-root .mf-list__actions form { margin: 0; } /* ---------- Sell wizard ---------- */ .mf-root .mf-sell__header { display: grid; gap: 6px; margin-bottom: calc(20px * var(--mf-space)); } .mf-root .mf-sell__intro { display: grid; gap: 4px; margin-bottom: calc(20px * var(--mf-space)); } .mf-root .mf-sell__form { gap: 0; } .mf-root .mf-sell__section { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--mf-border); } .mf-root .mf-sell__section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .mf-root .mf-sell__drafts { margin-bottom: var(--mf-gap); } .mf-root .mf-sell__group { margin-bottom: calc(24px * var(--mf-space)); } .mf-root .mf-sell__group-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px !important; font-size: 1em; } .mf-root .mf-sell__group-title .mf-icon-badge { width: 32px; height: 32px; } .mf-root .mf-sell__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--mf-border); } /* Phones: Continue on top, full width; then "Save & finish later", then Back. (Continue stays first in the markup so Enter continues.) */ .mf-root .mf-sell__actions > .mf-btn--primary { order: 1; flex: 1 1 100%; justify-content: center; } .mf-root .mf-sell__actions > .mf-btn--secondary { order: 2; flex: 1 1 auto; justify-content: center; } .mf-root .mf-sell__back { order: 3; flex: 0 0 auto; gap: 6px; } .mf-root .mf-sell__saved { order: 4; flex-basis: 100%; color: var(--mf-text-muted); font-size: .85em; text-align: center; } .mf-root .mf-sell__saved:empty { display: none; } .mf-root .mf-sell__actions--sticky { position: sticky; bottom: 0; z-index: 3; margin-inline: 0; padding: 12px clamp(12px, 3vw, var(--mf-pad)); border-top: 1px solid var(--mf-border); border-radius: var(--mf-radius) var(--mf-radius) 0 0; background: color-mix(in srgb, var(--mf-surface) 92%, transparent); backdrop-filter: blur(6px); } @container (min-width: 640px) { /* Wider: Back and the save status on the left, the two save buttons on the right. */ .mf-root .mf-sell__back { order: 1; } .mf-root .mf-sell__saved { order: 2; flex: 0 1 auto; margin-inline-end: auto; text-align: start; } .mf-root .mf-sell__saved:empty { display: block; visibility: hidden; } .mf-root .mf-sell__actions > .mf-btn--secondary { order: 3; flex: 0 0 auto; } .mf-root .mf-sell__actions > .mf-btn--primary { order: 4; flex: 0 0 auto; } .mf-root .mf-sell__actions--sticky { margin-inline: 0; border-radius: var(--mf-radius); } } /* Description editor (textarea[data-mf-rich]): toolbar + editable area. */ .mf-root .mf-rich { display: grid; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .mf-root .mf-rich:focus-within { border-color: var(--mf-primary); box-shadow: var(--mf-focus); } .mf-root .mf-field.has-error .mf-rich { border-color: var(--mf-danger); } .mf-root .mf-rich__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--mf-border); background: var(--mf-surface-alt); } .mf-root .mf-rich__btn { display: inline-grid; place-items: center; width: 36px; height: 34px; border-radius: 8px; color: var(--mf-text-muted); } .mf-root .mf-rich__btn:hover { background: var(--mf-surface); color: var(--mf-text); } .mf-root .mf-rich__btn[aria-pressed="true"] { background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-rich__btn:focus-visible { box-shadow: var(--mf-focus); } .mf-root .mf-rich__area.mf-input { min-height: 240px; max-height: 560px; overflow-y: auto; margin: 0; padding: 14px 16px; border: 0; border-radius: 0; box-shadow: none; line-height: 1.65; outline: none; } .mf-root .mf-rich__area.mf-input:focus { box-shadow: none; } .mf-root .mf-rich__area :is(p, ul, ol) { margin: 0 0 .8em; } .mf-root .mf-rich__area :is(ul, ol) { padding-inline-start: 1.4em; } .mf-root .mf-rich__area h3 { margin: 1em 0 .4em; font-size: 1.15em; } .mf-root .mf-rich__area a { text-decoration: underline; } /* Steps load in place (no page reload): dim while saving, fade the new step in. */ .mf-root.mf-c-sell .mf-sell { transition: opacity .15s ease; } .mf-root.mf-c-sell.is-busy .mf-sell { opacity: .6; pointer-events: none; } .mf-root.mf-c-sell.is-entering .mf-sell { animation: mf-step-in .28s ease both; } @keyframes mf-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .mf-root .mf-btn.is-busy { position: relative; color: transparent !important; } .mf-root .mf-btn.is-busy > * { visibility: hidden; } .mf-root .mf-btn.is-busy::after { content: ""; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; border: 2px solid var(--mf-primary); border-right-color: transparent; border-radius: 50%; animation: mf-spin .7s linear infinite; } .mf-root .mf-btn--primary.is-busy::after { border-color: var(--mf-on-primary, #fff); border-right-color: transparent; } @keyframes mf-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mf-root.mf-c-sell.is-entering .mf-sell { animation: none; } } /* Progress */ .mf-root .mf-steps { display: grid; gap: 8px; margin-bottom: calc(20px * var(--mf-space)); } .mf-root .mf-steps__summary { color: var(--mf-text-muted); font-size: .9em; font-weight: 600; } .mf-root .mf-steps__bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--mf-surface-alt); box-shadow: inset 0 0 0 1px var(--mf-border); } .mf-root .mf-steps__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mf-primary); transition: width .3s ease; } .mf-root .mf-steps__list { display: none !important; } @container (min-width: 760px) { .mf-root .mf-steps__summary, .mf-root .mf-steps__bar { display: none; } .mf-root .mf-steps__list { display: flex !important; gap: 4px; counter-reset: none; } .mf-root .mf-steps__item { flex: 1; min-width: 0; } .mf-root .mf-steps__item > a, .mf-root .mf-steps__item > span { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-top: 3px solid var(--mf-border); color: var(--mf-text-muted); font-size: .85em; font-weight: 600; text-decoration: none; } .mf-root .mf-steps__item.is-done > a, .mf-root .mf-steps__item.is-done > span { border-color: var(--mf-primary); color: var(--mf-text); } .mf-root .mf-steps__item.is-current > span { border-color: var(--mf-primary); color: var(--mf-primary); } .mf-root .mf-steps__item > a:hover .mf-steps__label { text-decoration: underline; } .mf-root .mf-steps__dot { display: inline-grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mf-surface-alt); box-shadow: inset 0 0 0 1px var(--mf-border); font-size: .85em; } .mf-root .mf-steps__item.is-done .mf-steps__dot, .mf-root .mf-steps__item.is-current .mf-steps__dot { background: var(--mf-primary); box-shadow: none; color: var(--mf-on-primary); } .mf-root .mf-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Format-dependent options (price step). Shown with :has(); without :has() support every option stays visible. */ @supports selector(:has(*)) { .mf-root .mf-sell__form .mf-if { display: none; } .mf-root .mf-sell__form:has(input[name="mf[sale_format]"][value="fixed"]:checked) .mf-if--fixed, .mf-root .mf-sell__form:has(input[name="mf[sale_format]"][value="offer"]:checked) .mf-if--offers, .mf-root .mf-sell__form:has(input[name="mf[sale_format]"][value="fixed"]:checked):has(input[name="mf[accept_offers]"]:checked) .mf-if--offers, .mf-root .mf-sell__form:has(input[name="mf[sale_format]"][value="auction"]:checked) .mf-if--auction, .mf-root .mf-sell__form:has(input[name="mf[sale_format]"][value="confidential"]:checked) .mf-if--confidential { display: block; } } /* Fee preview */ .mf-root .mf-fee { display: grid; gap: 2px; margin-bottom: calc(18px * var(--mf-space)); padding: 14px 16px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); box-shadow: inset 0 0 0 1px var(--mf-border); } .mf-root .mf-fee__label { color: var(--mf-text-muted); font-size: .85em; font-weight: 600; } .mf-root .mf-fee__amount { font-size: 1.5em; line-height: 1.2; } .mf-root .mf-fee__note { color: var(--mf-text-muted); font-size: .82em; } .mf-root .mf-fee__note:empty { display: none; } .mf-root .mf-fee__was { color: var(--mf-text-muted); font-size: .85em; text-decoration: line-through; } .mf-root .mf-fee--large .mf-fee__amount { font-size: 2em; } /* Images */ .mf-root .mf-media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 18px !important; } .mf-root .mf-media-grid__item { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-media-grid__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--mf-radius) * .6); } .mf-root .mf-media-grid__item:has(input[type="checkbox"]:checked) .mf-media-grid__img { opacity: .35; } .mf-root .mf-dropzone { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); color: var(--mf-text-muted); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .mf-root .mf-dropzone:hover, .mf-root .mf-dropzone.is-dragover { border-color: var(--mf-primary); background: var(--mf-primary-soft); } .mf-root .mf-dropzone:has(input:focus-visible) { box-shadow: var(--mf-focus); } .mf-root .mf-dropzone__title { color: var(--mf-text); font-weight: 600; } .mf-root .mf-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .mf-root .mf-dropzone__input:disabled { cursor: not-allowed; } /* Review */ .mf-root .mf-review { display: grid; gap: var(--mf-gap); align-items: start; } .mf-root .mf-review__main { display: grid; gap: var(--mf-gap); min-width: 0; } .mf-root .mf-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mf-root .mf-review__title { font-size: 1.1em; font-weight: 700; overflow-wrap: anywhere; } .mf-root .mf-review__text { color: var(--mf-text); overflow-wrap: anywhere; } .mf-root .mf-review__text p + p { margin-top: .6em; } .mf-root .mf-review__submit { gap: 14px; } @container (min-width: 900px) { .mf-root .mf-review { grid-template-columns: minmax(0, 1fr) 340px; } .mf-root .mf-review__side { position: sticky; top: 24px; } } .mf-root .mf-facts { display: grid; margin: 0; } .mf-root .mf-facts__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; } .mf-root .mf-facts__row + .mf-facts__row { border-top: 1px solid var(--mf-border); } .mf-root .mf-facts dt { display: inline-flex; gap: 6px; align-items: center; color: var(--mf-text-muted); } .mf-root .mf-facts dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; } .mf-root .mf-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-thumbs img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: calc(var(--mf-radius) * .6); } .mf-root .mf-checklist { display: grid; gap: 10px; margin: 0; padding-inline-start: 1.4em; } .mf-root .mf-checklist li > span { display: block; font-size: .9em; } /* Confirmation */ /* Sell wizard: ownership verification panel */ .mf-root .mf-verify { display: grid; gap: calc(16px * var(--mf-space)); margin-bottom: calc(20px * var(--mf-space)); scroll-margin-top: 80px; } .mf-root .mf-verify:focus { outline: none; } .mf-root .mf-verify__head { display: flex; gap: 12px; align-items: flex-start; } .mf-root .mf-verify__head .mf-h3 { margin: 0 0 2px; } .mf-root .mf-verify__head p { margin: 0; } .mf-root .mf-verify__icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface)); color: var(--mf-primary); } .mf-root .mf-verify.is-verified .mf-verify__icon { background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); } .mf-root .mf-verify__form { display: grid; gap: calc(14px * var(--mf-space)); margin: 0; } .mf-root .mf-verify__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .mf-root .mf-verify__how { color: var(--mf-primary); font-size: .8em; font-weight: 600; } .mf-root .mf-verify__method { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .mf-root .mf-verify__steps { display: grid; gap: 8px; margin: 0; padding-inline-start: 1.4em; line-height: 1.5; } .mf-root .mf-verify__steps li { overflow-wrap: anywhere; } .mf-root .mf-verify__copy { display: grid; gap: 12px; } .mf-root .mf-verify__copyrow { display: flex; gap: 8px; align-items: stretch; } .mf-root .mf-verify__copyrow .mf-input { flex: 1; min-width: 0; } .mf-root .mf-verify__value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--mf-surface-alt); } .mf-root .mf-verify__last { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--mf-warning); background: var(--mf-surface-alt); border-radius: var(--mf-radius-sm, 6px); font-size: .92em; } .mf-root .mf-verify__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: .88em; } .mf-root .mf-verify__done { display: grid; gap: 6px; justify-items: start; } .mf-root .mf-verify__done p { margin: 0; } .mf-root .mf-verify__more summary { cursor: pointer; color: var(--mf-primary); font-weight: 600; } .mf-root .mf-verify__more[open] summary { margin-bottom: 12px; } .mf-root .mf-verify__next { margin: 0 0 calc(12px * var(--mf-space)); } .mf-root .mf-done + .mf-verify { margin-top: calc(20px * var(--mf-space)); } /* Sell wizard: verified numbers */ .mf-root .mf-metrics__optional { font-size: .6em; font-weight: 500; } .mf-root .mf-metrics__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 10px); } .mf-root .mf-metrics__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 12px; align-items: center; padding: 10px 14px; } .mf-root .mf-metrics__row + .mf-metrics__row { border-top: 1px solid var(--mf-border); } .mf-root .mf-metrics__name { font-weight: 600; } .mf-root .mf-metrics__value { font-variant-numeric: tabular-nums; } .mf-root .mf-metrics__state { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: flex-end; } .mf-root .mf-metrics__state small { font-size: .82em; } .mf-root .mf-metrics__ways { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .mf-root .mf-metrics__way { display: grid; gap: 10px; align-content: start; margin: 0; padding: 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 10px); background: var(--mf-surface); } .mf-root .mf-metrics__way p { margin: 0; } .mf-root .mf-metrics__way .mf-btn { justify-self: start; } .mf-root .mf-metrics__way--proof { grid-column: 1 / -1; } .mf-root .mf-metrics__way-title { font-weight: 700; } .mf-root .mf-metrics__way .mf-fieldset { display: grid; gap: 6px; justify-items: start; margin: 0; } .mf-root .mf-metrics__match { padding: 16px; border: 1px solid color-mix(in srgb, var(--mf-primary) 35%, var(--mf-border)); border-radius: var(--mf-radius, 10px); background: color-mix(in srgb, var(--mf-primary) 4%, var(--mf-surface)); } .mf-root .mf-metrics__match .mf-h4 { margin: 0; } .mf-root .mf-metrics__account { display: grid; gap: 4px; } .mf-root .mf-metrics__account-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .mf-root .mf-metrics__account ul { display: grid; gap: 2px; margin: 0; padding-inline-start: 1.2em; } .mf-root .mf-metrics__use { margin-top: 4px; font-size: .9em; } @media (max-width: 600px) { .mf-root .mf-metrics__row { grid-template-columns: 1fr auto; } .mf-root .mf-metrics__state { grid-column: 1 / -1; justify-content: flex-start; } } /* Account: phone and identity verification */ .mf-root .mf-acct-verify { display: grid; gap: calc(16px * var(--mf-space)); scroll-margin-top: 80px; } .mf-root .mf-acct-verify:focus { outline: none; } .mf-root .mf-acct-verify__head .mf-h3 { margin: 0 0 4px; } .mf-root .mf-acct-verify__head p { margin: 0; } .mf-root .mf-acct-verify__levels { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .mf-root .mf-acct-verify__levels li { display: flex; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 10px); } .mf-root .mf-acct-verify__level { display: flex; flex: 1; gap: 10px; align-items: flex-start; padding: 12px; color: inherit; border-radius: inherit; } .mf-root .mf-acct-verify__level > span:nth-child(2) { display: grid; gap: 2px; flex: 1; } .mf-root a.mf-acct-verify__level { transition: background-color .15s ease; } .mf-root a.mf-acct-verify__level:hover { background: color-mix(in srgb, var(--mf-primary) 5%, var(--mf-surface)); color: inherit; } .mf-root .mf-acct-verify__go { display: inline-flex; gap: 4px; align-items: center; align-self: center; color: var(--mf-primary); font-weight: 600; font-size: .88em; white-space: nowrap; } .mf-root .mf-acct-verify__levels small { font-size: .82em; line-height: 1.4; } .mf-root .mf-acct-verify__levels li.is-done { border-color: color-mix(in srgb, var(--mf-success) 35%, var(--mf-border)); background: color-mix(in srgb, var(--mf-success) 5%, var(--mf-surface)); } .mf-root .mf-acct-verify__dot { display: inline-grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mf-surface-alt); color: var(--mf-text-muted); } .mf-root .is-done .mf-acct-verify__dot { background: color-mix(in srgb, var(--mf-success) 14%, var(--mf-surface)); color: var(--mf-success); } .mf-root .mf-acct-verify__cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .mf-root .mf-acct-verify__card { display: grid; gap: 10px; align-content: start; } .mf-root .mf-acct-verify__card p { margin: 0; } .mf-root .mf-acct-verify__card-title { display: flex; gap: 8px; align-items: center; font-weight: 700; } .mf-root .mf-acct-verify__form { display: grid; gap: 10px; margin: 0; } .mf-root .mf-acct-verify__form .mf-btn { justify-self: start; } .mf-root .mf-acct-verify__code { max-width: 12ch; font-size: 1.3em; letter-spacing: .2em; font-variant-numeric: tabular-nums; } .mf-root .mf-acct-verify__number { font-variant-numeric: tabular-nums; font-weight: 600; } .mf-root .mf-acct-verify__row { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-acct-verify__row form { margin: 0; } /* Trust badges (earned) */ .mf-root .mf-tbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-tbadge { --mf-tb: var(--mf-primary); display: inline-flex; gap: 5px; align-items: center; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--mf-tb) 11%, var(--mf-surface)); color: color-mix(in srgb, var(--mf-tb) 85%, var(--mf-text)); font-size: .82rem; font-weight: 700; line-height: 1.4; cursor: help; } .mf-root .mf-tbadge.is-success { --mf-tb: var(--mf-success); } .mf-root .mf-tbadge.is-accent { --mf-tb: var(--mf-accent); } .mf-root .mf-tbadge.is-warning { --mf-tb: var(--mf-warning); } .mf-root .mf-tbadge.is-neutral { --mf-tb: var(--mf-text-muted); } .mf-root .mf-tbadges--sm .mf-tbadge { padding: 1px 8px 1px 6px; font-size: .72rem; } .mf-root .mf-lcard__tbadges { position: relative; z-index: 1; margin-top: 8px; } .mf-root .mf-lp-seller .mf-tbadges { margin-top: 12px; } .mf-root .mf-lp-seller__reply { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-reviews__who .mf-tbadges { margin-top: 8px; } .mf-root .mf-acct-badges { display: grid; gap: 10px; } .mf-root .mf-acct-badges .mf-h4, .mf-root .mf-acct-badges > p { margin: 0; } .mf-root .mf-acct-badges__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 10px); } .mf-root .mf-acct-badges__list > li { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 14px; } .mf-root .mf-acct-badges__list > li + li { border-top: 1px solid var(--mf-border); } .mf-root .mf-acct-badges__how { color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-acct-badges__state { display: inline-flex; gap: 4px; align-items: center; color: var(--mf-text-muted); font-size: .85em; font-weight: 600; white-space: nowrap; } .mf-root .is-earned > .mf-acct-badges__state { color: var(--mf-success); } @media (max-width: 600px) { .mf-root .mf-acct-badges__list > li { grid-template-columns: 1fr auto; } .mf-root .mf-acct-badges__how { grid-column: 1 / -1; grid-row: 2; } } .mf-root .mf-done { align-items: center; gap: 12px; padding-block: calc(36px * var(--mf-space)); text-align: center; } .mf-root .mf-done__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-done__icon--success { background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); } .mf-root .mf-done__icon--warning { background: color-mix(in srgb, var(--mf-warning) 14%, var(--mf-surface)); color: var(--mf-warning); } .mf-root .mf-done__icon--accent { background: var(--mf-accent-soft); color: color-mix(in srgb, var(--mf-accent) 70%, var(--mf-text)); } .mf-root .mf-done > p { max-width: 520px; } .mf-root .mf-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { .mf-root *, .mf-root *::before, .mf-root *::after { transition: none !important; animation: none !important; } } /* ---------- Payments ---------- */ .mf-root .mf-pay { display: grid; gap: 14px; margin-top: 16px; } .mf-root .mf-pay > .mf-badge { justify-self: start; } /* A choice between payment methods. */ .mf-root .mf-paychoice { display: grid; gap: 12px; margin-top: 16px; } .mf-root .mf-paychoice__pick { border: 0; margin: 0; padding: 0; min-width: 0; } .mf-root .mf-paychoice__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; } .mf-root .mf-paychoice__option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); cursor: pointer; font-weight: 600; min-width: 0; } .mf-root .mf-paychoice__option:has(input:checked) { border-color: var(--mf-primary); background: var(--mf-primary-soft); } .mf-root .mf-paychoice__option:focus-within { outline: 2px solid var(--mf-focus); outline-offset: 2px; } .mf-root .mf-paychoice__option input { accent-color: var(--mf-primary); margin: 0; } .mf-root .mf-paychoice__panel .mf-pay { margin-top: 0; } .mf-root .mf-pay__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mf-text-muted); } .mf-root .mf-pay__methods li { display: inline-flex; align-items: center; gap: 6px; } .mf-root .mf-pay__methods svg { color: var(--mf-success); } .mf-root .mf-pay__element { min-height: 60px; } .mf-root .mf-pay__secure { text-align: center; } /* ---------- Newsletter sign-up ---------- */ .mf-root .mf-newsletter { display: grid; gap: 10px; max-width: 640px; margin-inline: auto; } .mf-root .mf-newsletter:focus { outline: none; } .mf-root .mf-newsletter--card { padding: calc(28px * var(--mf-space)); text-align: start; } .mf-root .mf-newsletter__title { margin-top: 4px !important; } .mf-root .mf-newsletter .mf-alert { margin: 0; } .mf-root .mf-newsletter__form { display: grid; gap: 10px; } .mf-root .mf-newsletter__form .mf-field { margin: 0; } .mf-root .mf-newsletter__row { display: grid; gap: 10px; align-items: end; } @container (min-width: 480px) { .mf-root .mf-newsletter__row { grid-template-columns: 1fr auto; } } .mf-root .mf-newsletter--inline .mf-newsletter__row .mf-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Honeypot: invisible to people, tempting to bots. */ .mf-root .mf-newsletter__trap, .mf-root .mf-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Bot checks & two-step log-in ---------- */ .mf-root .mf-captcha { min-height: 65px; display: flex; justify-content: center; max-width: 100%; overflow: hidden; } .mf-root .mf-captcha--wp { display: block; min-height: 0; } .mf-root .mf-captcha__note { text-align: center; } .mf-root .mf-input--code { font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; } .mf-root .mf-link-button { background: none; border: 0; padding: 0; color: var(--mf-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .mf-root .mf-link-button:focus-visible { outline: 2px solid var(--mf-focus); outline-offset: 2px; border-radius: 2px; } /* ====================================================================== Listing cards ====================================================================== */ .mf-root .mf-lgrid { --mf-min-col: 260px; align-items: stretch; } .mf-root .mf-lcard { --mf-type-color: var(--mf-type-accent, var(--mf-primary)); position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .mf-root .mf-lcard:hover, .mf-root .mf-lcard:focus-within { transform: translateY(var(--mf-card-lift, -3px)); border-color: color-mix(in srgb, var(--mf-type-color) 35%, var(--mf-border)); box-shadow: var(--mf-card-glow, var(--mf-shadow)), 0 12px 28px -12px rgb(15 23 42 / .22); } /* Media */ .mf-root .mf-lcard__media { position: relative; aspect-ratio: var(--mf-card-ratio, 16 / 10); overflow: hidden; background: var(--mf-surface-alt); } .mf-root .mf-lcard__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .mf-root .mf-lcard:hover .mf-lcard__img { transform: scale(1.03); } .mf-root .mf-lcard__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 60%), linear-gradient(135deg, var(--mf-type-accent, var(--mf-ph-a)), var(--mf-ph-b)); color: var(--mf-ph-text, #fff); text-align: center; } .mf-root .mf-lcard__ph::after { /* Subtle dot texture so tiles never look flat. */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, currentColor 16%, transparent) 1px, transparent 1px); background-size: 14px 14px; mask-image: linear-gradient(160deg, #000, transparent 70%); pointer-events: none; } .mf-root .mf-lcard__ph-icon { opacity: .9; } .mf-root .mf-lcard__handle { position: relative; z-index: 1; max-width: 100%; overflow: hidden; font-family: var(--mf-font-heading); font-weight: 700; font-size: 1.05em; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lcard__avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 50%; background: color-mix(in srgb, #000 16%, transparent); } /* Domain tile: the name is the product. */ .mf-root .mf-lcard__ph--domain { container-type: inline-size; } .mf-root .mf-lcard__domain { position: relative; z-index: 1; max-width: 100%; font-family: var(--mf-font-heading); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; } .mf-root .mf-size-xl .mf-lcard__domain { font-size: clamp(1.6rem, 12cqi, 2.6rem); } .mf-root .mf-size-lg .mf-lcard__domain { font-size: clamp(1.35rem, 9cqi, 2.1rem); } .mf-root .mf-size-md .mf-lcard__domain { font-size: clamp(1.1rem, 7cqi, 1.6rem); } .mf-root .mf-size-sm .mf-lcard__domain { font-size: clamp(.95rem, 5.5cqi, 1.25rem); } .mf-root .mf-lcard__tld { opacity: .72; font-weight: 600; } /* Badges & format */ .mf-root .mf-lcard__badges { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-lbadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--mf-surface); color: var(--mf-text); box-shadow: 0 1px 3px rgb(15 23 42 / .18); font-size: .74em; font-weight: 700; line-height: 1.5; } .mf-root .mf-lbadge--featured { background: var(--mf-accent); color: color-mix(in srgb, var(--mf-accent) 12%, #111); } .mf-root .mf-lbadge--verified { color: var(--mf-success); } .mf-root .mf-lbadge--new { background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-lcard__format { position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgb(15 23 42 / .72); color: #fff; backdrop-filter: blur(4px); font-size: .74em; font-weight: 600; line-height: 1.6; } .mf-root .mf-lcard__format--auction { background: color-mix(in srgb, var(--mf-danger) 88%, #000); } .mf-root .mf-lcard__format--auction.is-urgent { animation: mf-pulse 1.6s ease-in-out infinite; } @keyframes mf-pulse { 50% { opacity: .75; } } /* Body */ .mf-root .mf-lcard__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: calc(16px * var(--mf-space)) calc(16px * var(--mf-space)) 12px; } .mf-root .mf-lcard__type { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--mf-type-color) 80%, var(--mf-text)); font-size: .78em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .mf-root .mf-lcard__title { display: -webkit-box; overflow: hidden; font-size: 1.05em; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mf-root .mf-lcard__title a { color: var(--mf-text) !important; text-decoration: none; } .mf-root .mf-lcard__title a:hover { color: var(--mf-primary) !important; } .mf-root .mf-lcard__ident { overflow: hidden; color: var(--mf-text-muted); font-size: .86em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lcard__summary { display: -webkit-box; overflow: hidden; color: var(--mf-text-muted); font-size: .9em; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mf-root .mf-lcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-lcard__chips li { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mf-type-color) 9%, var(--mf-surface)); color: color-mix(in srgb, var(--mf-type-color) 75%, var(--mf-text)); font-size: .76em; font-weight: 600; } .mf-root .mf-lcard__stats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--mf-border); } .mf-root .mf-lcard__stats > div { min-width: 0; } .mf-root .mf-lcard__stats dt { display: -webkit-box; overflow: hidden; color: var(--mf-text-muted); font-size: .72em; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mf-root .mf-lcard__stats > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; } .mf-root .mf-lcard__stats dd { margin: 0; color: var(--mf-text); font-weight: 700; font-size: .95em; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Footer */ .mf-root .mf-lcard__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 10px; padding: 12px calc(16px * var(--mf-space)) calc(14px * var(--mf-space)); border-top: 1px solid var(--mf-border); background: color-mix(in srgb, var(--mf-surface-alt) 60%, var(--mf-surface)); } .mf-root .mf-lcard__price { display: grid; flex: 1 0 auto; min-width: 0; max-width: 100%; } .mf-root .mf-lcard__price-label { color: var(--mf-text-muted); font-size: .72em; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; } .mf-root .mf-lcard__price-value { overflow: hidden; color: var(--mf-price, var(--mf-text)); font-family: var(--mf-font-heading); font-size: 1.3em; line-height: 1.2; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lcard__price-value.is-hidden-price { font-size: 1em; } .mf-root .mf-lcard__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; align-items: center; gap: 8px; color: var(--mf-text-muted); font-size: .8em; } .mf-root .mf-lcard__offers { color: var(--mf-success); font-weight: 600; } .mf-root .mf-lcard__seller { display: inline-flex; color: var(--mf-success); } /* ====================================================================== Listings grid section ====================================================================== */ .mf-root .mf-listings__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; max-width: none; } /* ====================================================================== Marketplace ====================================================================== */ .mf-root .mf-market { display: grid; gap: calc(20px * var(--mf-space)); } .mf-root .mf-market__head { display: grid; gap: 16px; } .mf-root .mf-market__intro { display: grid; gap: 6px; } .mf-root .mf-market__about { max-width: 72ch; padding-top: calc(16px * var(--mf-space)); border-top: 1px solid var(--mf-border); color: var(--mf-text-muted); } .mf-root .mf-market__about p { margin: 0 0 .8em; } .mf-root .mf-market__about p:last-child { margin-bottom: 0; } .mf-root .mf-market__title { font-size: clamp(1.6em, 1.2em + 1.8cqi, 2.4em); } .mf-root .mf-market__search { position: relative; display: flex; gap: 8px; padding: 6px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) + 4px); background: var(--mf-surface); box-shadow: var(--mf-shadow); } .mf-root .mf-market__search:focus-within { border-color: var(--mf-primary); box-shadow: var(--mf-focus); } .mf-root .mf-market__search-icon { position: absolute; top: 50%; inset-inline-start: 20px; color: var(--mf-text-muted); transform: translateY(-50%); pointer-events: none; } .mf-root .mf-market__q { flex: 1; min-width: 0; padding-inline-start: 44px; border: 0; background: transparent; font-size: 1.05em; } .mf-root .mf-market__q:focus { box-shadow: none; } /* Category pills */ .mf-root .mf-cats { display: grid; gap: 10px; } .mf-root .mf-cats__row { display: flex; gap: 8px; margin: 0; padding: 2px 2px 6px; overflow-x: auto; list-style: none; scrollbar-width: thin; } .mf-root .mf-pill { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text) !important; font-size: .9em; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .mf-root .mf-pill:hover { border-color: var(--mf-primary); color: var(--mf-primary) !important; } .mf-root .mf-pill.is-active { border-color: var(--mf-primary); background: var(--mf-primary); color: var(--mf-on-primary) !important; } .mf-root .mf-pill--sub { padding: 5px 12px; font-size: .84em; } .mf-root .mf-pill__count { display: inline-grid; min-width: 22px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .8em; font-variant-numeric: tabular-nums; text-align: center; } /* Layout */ .mf-root .mf-market__body { display: grid; gap: calc(20px * var(--mf-space)); align-items: start; } @container (min-width: 900px) { .mf-root .mf-market__body:not(.no-filters) { grid-template-columns: 270px minmax(0, 1fr); } .mf-root .mf-market__aside { position: sticky; top: 24px; } .mf-root .mf-filterbox__summary { pointer-events: none; } .mf-root .mf-filterbox__chevron { display: none; } } /* Filters */ .mf-root .mf-filterbox { border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-filterbox__summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; } .mf-root .mf-filterbox__summary::-webkit-details-marker { display: none; } .mf-root .mf-filterbox__chevron { margin-inline-start: auto; transition: transform .2s ease; } .mf-root .mf-filterbox[open] .mf-filterbox__chevron { transform: rotate(180deg); } .mf-root .mf-filterbox__body { display: grid; gap: 18px; padding: 4px 16px 16px; } .mf-root .mf-filter { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } .mf-root .mf-filter__title { margin-bottom: 4px; padding: 0; font-size: .82em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mf-text-muted); } .mf-root .mf-filter .mf-check { font-size: .92em; } .mf-root .mf-filter__options { display: grid; gap: 8px; } .mf-root .mf-filter__options.is-long { max-height: 220px; padding-inline-end: 4px; overflow-y: auto; } .mf-root .mf-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; color: var(--mf-text-muted); } .mf-root .mf-range .mf-input { min-height: 40px; padding: 8px 10px; } .mf-root .mf-range .mf-affix__part { padding: 0 8px; } .mf-root .mf-filterbox__actions { display: grid; gap: 6px; } /* Toolbar */ .mf-root .mf-market__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .mf-root .mf-market__count { font-weight: 700; } .mf-root .mf-market__sort { display: flex; align-items: center; gap: 8px; color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-market__sort .mf-input { width: auto; min-height: 40px; padding-block: 8px; } .mf-root .mf-activechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; } .mf-root .mf-activechip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--mf-primary-soft); color: var(--mf-primary) !important; font-size: .85em; font-weight: 600; text-decoration: none; } .mf-root .mf-activechip:hover { background: color-mix(in srgb, var(--mf-primary) 18%, var(--mf-surface)); } .mf-root .mf-market__main[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; pointer-events: none; } .mf-root .mf-noresults { display: grid; justify-items: center; gap: 10px; padding: calc(48px * var(--mf-space)) 16px; border: 1px dashed var(--mf-border); border-radius: var(--mf-radius); text-align: center; } /* Pagination */ .mf-root .mf-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: calc(28px * var(--mf-space)); } .mf-root .mf-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-pagination__link { display: inline-grid; min-width: 42px; min-height: 42px; place-items: center; padding: 0 12px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface); color: var(--mf-text) !important; font-weight: 600; text-decoration: none; } .mf-root a.mf-pagination__link:hover { border-color: var(--mf-primary); color: var(--mf-primary) !important; } .mf-root .mf-pagination__link.is-current { border-color: var(--mf-primary); background: var(--mf-primary); color: var(--mf-on-primary) !important; } .mf-root .mf-pagination__gap { display: grid; place-items: center; min-width: 20px; color: var(--mf-text-muted); } /* ========================================================================== Listing page ========================================================================== */ .mf-root .mf-lp { --mf-type-color: var(--mf-type-accent, var(--mf-primary)); --mf-type-soft: color-mix(in srgb, var(--mf-type-color) 9%, var(--mf-surface)); } /* Breadcrumbs */ .mf-root .mf-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 calc(18px * var(--mf-space)); padding: 0; color: var(--mf-text-muted); font-size: .85em; list-style: none; } .mf-root .mf-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .mf-root .mf-crumbs li + li::before { content: "/"; color: color-mix(in srgb, var(--mf-text-muted) 50%, transparent); } .mf-root .mf-crumbs a { color: inherit; text-decoration: none; } .mf-root .mf-crumbs a:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-crumbs [aria-current] { max-width: 34ch; overflow: hidden; color: var(--mf-text); text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lp__notice { margin-bottom: var(--mf-gap); } .mf-root .mf-lp__notice p { margin: 0; } /* Layout: one column on phones (price right after the media), two columns from 900px. */ .mf-root .mf-lp__layout { display: flex; flex-direction: column; gap: calc(var(--mf-gap) * 1.2); } .mf-root .mf-lp__side { display: contents; } .mf-root .mf-lp__head { order: 1; } .mf-root .mf-lp__media { order: 2; } .mf-root .mf-lp-buy { order: 3; } .mf-root .mf-lp__stats { order: 4; } .mf-root .mf-lp__body { order: 5; } .mf-root .mf-lp-seller { order: 6; } @container (min-width: 900px) { .mf-root .mf-lp__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-rows: auto auto auto 1fr; grid-template-areas: "head side" "media side" "stats side" "body side"; gap: calc(var(--mf-gap) * 1.4) calc(var(--mf-gap) * 2); align-items: start; } .mf-root .mf-lp__head { grid-area: head; } .mf-root .mf-lp__media { grid-area: media; } .mf-root .mf-lp__stats { grid-area: stats; } .mf-root .mf-lp__body { grid-area: body; } .mf-root .mf-lp__side { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); display: flex; flex-direction: column; gap: var(--mf-gap); grid-area: side; } } /* Title block */ .mf-root .mf-lp__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mf-root .mf-lp__type { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--mf-type-soft); color: color-mix(in srgb, var(--mf-type-color) 80%, var(--mf-text)); font-size: .78em; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; } .mf-root a.mf-lp__type:hover { background: color-mix(in srgb, var(--mf-type-color) 16%, var(--mf-surface)); } .mf-root .mf-lp__eyebrow .mf-lbadge { box-shadow: none; border: 1px solid var(--mf-border); } .mf-root .mf-lp__eyebrow .mf-lbadge--featured, .mf-root .mf-lp__eyebrow .mf-lbadge--new { border-color: transparent; } .mf-root .mf-lp__title { margin: 14px 0 8px; font-size: clamp(1.6rem, 1.05rem + 2.3cqi, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; } .mf-root .mf-lp__summary { max-width: 62ch; margin: 0 0 12px; color: var(--mf-text-muted); font-size: 1.12em; line-height: 1.5; } .mf-root .mf-lp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; } .mf-root .mf-lp__chips li { padding: 4px 11px; border-radius: 999px; background: var(--mf-type-soft); color: color-mix(in srgb, var(--mf-type-color) 75%, var(--mf-text)); font-size: .82em; font-weight: 600; } .mf-root .mf-lp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--mf-text-muted); font-size: .87em; } .mf-root .mf-lp__meta { column-gap: 18px; } .mf-root .mf-lp__share { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 6px 12px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text); font: inherit; font-weight: 600; cursor: pointer; } .mf-root .mf-lp__share[hidden] { display: none; } .mf-root .mf-lp__share:hover { border-color: var(--mf-primary); color: var(--mf-primary); } .mf-root .mf-lp__share:focus-visible { outline: none; box-shadow: var(--mf-focus); } /* Hero media */ .mf-root .mf-lp__media { display: grid; gap: 12px; min-width: 0; } .mf-root .mf-lp-hero { position: relative; display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 240px; padding: clamp(24px, 5cqi, 48px); overflow: hidden; border-radius: calc(var(--mf-radius) * 1.4); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 60%), linear-gradient(135deg, var(--mf-type-accent, var(--mf-ph-a)), var(--mf-ph-b)); color: var(--mf-ph-text, #fff); text-align: center; container-type: inline-size; } .mf-root .mf-lp-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, currentColor 15%, transparent) 1px, transparent 1px); background-size: 16px 16px; mask-image: linear-gradient(160deg, #000, transparent 70%); pointer-events: none; } .mf-root .mf-lp-hero > * { position: relative; z-index: 1; } /* Domain: the name is the product. */ .mf-root .mf-lp-hero--domain { aspect-ratio: 2 / 1; } .mf-root .mf-lp-hero__domain { max-width: 100%; margin: 0; font-family: var(--mf-font-heading); font-weight: 800; line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; text-shadow: 0 2px 24px rgb(0 0 0 / .18); } .mf-root .mf-size-xl .mf-lp-hero__domain { font-size: clamp(2.4rem, 12cqi, 5.6rem); } .mf-root .mf-size-lg .mf-lp-hero__domain { font-size: clamp(2rem, 8.5cqi, 4.2rem); } .mf-root .mf-size-md .mf-lp-hero__domain { font-size: clamp(1.6rem, 6cqi, 3rem); } .mf-root .mf-size-sm .mf-lp-hero__domain { font-size: clamp(1.25rem, 4.4cqi, 2.1rem); } .mf-root .mf-lp-hero__tld { opacity: .7; font-weight: 600; } .mf-root .mf-lp-hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; } .mf-root .mf-lp-hero__facts > div { display: flex; gap: 6px; padding: 5px 12px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; background: color-mix(in srgb, #000 14%, transparent); font-size: .85em; backdrop-filter: blur(4px); } .mf-root .mf-lp-hero__facts dt { opacity: .78; } .mf-root .mf-lp-hero__facts dd { margin: 0; font-weight: 700; } /* Social / channel / community: a profile header. */ .mf-root .mf-lp-hero--profile { display: block; place-content: normal; justify-items: normal; min-height: 0; padding: 0; border: 1px solid var(--mf-border); background: var(--mf-surface); color: var(--mf-text); text-align: start; } .mf-root .mf-lp-hero--profile::after { display: none; } .mf-root .mf-lp-hero__cover { height: clamp(110px, 22cqi, 180px); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, #fff 20%, transparent), transparent 60%), linear-gradient(120deg, var(--mf-type-accent, var(--mf-ph-a)), var(--mf-ph-b)); } .mf-root .mf-lp-hero__profile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 0 clamp(16px, 4cqi, 28px) clamp(16px, 4cqi, 24px); } .mf-root .mf-lp-hero__avatar { display: grid; flex: 0 0 auto; place-items: center; width: clamp(84px, 16cqi, 112px); height: clamp(84px, 16cqi, 112px); margin-top: calc(clamp(84px, 16cqi, 112px) / -2); border: 4px solid var(--mf-surface); border-radius: 50%; background: linear-gradient(135deg, var(--mf-type-accent, var(--mf-ph-a)), var(--mf-ph-b)); box-shadow: 0 6px 18px -6px rgb(15 23 42 / .35); color: var(--mf-ph-text, #fff); } .mf-root .mf-lp-hero__who { flex: 1 1 200px; min-width: 0; } .mf-root .mf-lp-hero__handle { margin: 0; overflow: hidden; font-family: var(--mf-font-heading); font-size: clamp(1.35rem, 1rem + 2.2cqi, 2.1rem); font-weight: 800; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lp-hero__platform { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 0; color: var(--mf-text-muted); font-weight: 600; } .mf-root .mf-lp-hero__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--mf-success); font-size: .9em; } /* External links (profile, website). */ .mf-root .mf-lp__ext { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; text-decoration: none; min-width: 0; } .mf-root .mf-lp-hero--profile .mf-lp__ext, .mf-root .mf-lp-hero--plain .mf-lp__ext { padding: 8px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius-button); background: var(--mf-surface); color: var(--mf-text); } .mf-root .mf-lp-hero--plain .mf-lp__ext { border-color: transparent; } .mf-root .mf-lp__ext:hover { color: var(--mf-primary); } .mf-root .mf-lp__ext:focus-visible { outline: none; box-shadow: var(--mf-focus); border-radius: 6px; } /* Websites, SaaS, apps: screenshots in a browser frame. */ .mf-root .mf-lp-frame { overflow: hidden; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.4); background: var(--mf-surface); box-shadow: 0 18px 40px -24px rgb(15 23 42 / .35); } .mf-root .mf-lp-frame__bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--mf-border); background: var(--mf-surface-alt); } .mf-root .mf-lp-frame__dots { display: inline-flex; gap: 6px; } .mf-root .mf-lp-frame__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .mf-root .mf-lp-frame__dots i:nth-child(2) { background: #febc2e; } .mf-root .mf-lp-frame__dots i:nth-child(3) { background: #28c840; } .mf-root .mf-lp-frame__url { flex: 1; min-width: 0; overflow: hidden; padding: 5px 14px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text-muted); font-size: .87em; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lp-frame .mf-gallery { padding: 0; } .mf-root .mf-lp-frame .mf-gallery__main { border: 0; border-radius: 0; } .mf-root .mf-lp-frame .mf-gallery__thumbs { padding: 0 12px 12px; } .mf-root .mf-lp-frame .mf-lp-hero { border-radius: 0; } .mf-root .mf-lp-hero--plain { aspect-ratio: 16 / 7; } .mf-root .mf-lp-hero__icon { opacity: .92; } .mf-root .mf-lp-hero__name { margin: 0; font-family: var(--mf-font-heading); font-size: clamp(1.3rem, 1rem + 2cqi, 2rem); font-weight: 800; overflow-wrap: anywhere; } .mf-root .mf-lp-hero--game_account, .mf-root .mf-lp-hero--game_items { aspect-ratio: 21 / 8; } /* Shaped heroes: no minimum height (with a fixed shape it would force a minimum width wider than a phone), and a taller shape on small screens. */ .mf-root .mf-lp-hero--domain, .mf-root .mf-lp-hero--plain { min-height: 0; } @container (max-width: 599px) { .mf-root .mf-lp-hero--domain, .mf-root .mf-lp-hero--plain { aspect-ratio: 4 / 3; } } /* Gallery */ .mf-root .mf-gallery { display: grid; gap: 10px; min-width: 0; } .mf-root .mf-gallery__main { display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.4); background: var(--mf-surface-alt); } .mf-root .mf-gallery__img { display: block; width: 100%; height: 100%; object-fit: contain; } .mf-root .mf-gallery__main:focus-visible { outline: none; box-shadow: var(--mf-focus); } .mf-root .mf-gallery__thumbs { display: flex; gap: 8px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: thin; } .mf-root .mf-gallery__thumb { display: block; width: 76px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--mf-surface-alt); cursor: pointer; opacity: .72; transition: opacity .15s ease, border-color .15s ease; } .mf-root .mf-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-gallery__thumb:hover, .mf-root .mf-gallery__thumb.is-active { border-color: var(--mf-primary); opacity: 1; } .mf-root .mf-gallery__thumb:focus-visible { outline: none; box-shadow: var(--mf-focus); opacity: 1; } /* Key numbers */ .mf-root .mf-lp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0; } .mf-root .mf-lp-stat { position: relative; min-width: 0; padding: 16px 18px 14px; overflow: hidden; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-lp-stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--mf-type-color), color-mix(in srgb, var(--mf-type-color) 30%, transparent)); } .mf-root .mf-lp-stat dt { display: -webkit-box; min-height: 2.5em; overflow: hidden; color: var(--mf-text-muted); font-size: .82em; font-weight: 600; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mf-root .mf-lp-stat__value small { color: var(--mf-text-muted); font-family: var(--mf-font-body); font-size: .5em; font-weight: 600; letter-spacing: 0; } .mf-root .mf-lp-stat dd { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 0; } .mf-root .mf-lp-stat__value { overflow: hidden; color: var(--mf-text); font-family: var(--mf-font-heading); font-size: 1.65em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lp-verified { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 7px 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); font-family: var(--mf-font-body); font-size: .75rem; font-weight: 700; line-height: 1.5; vertical-align: middle; white-space: nowrap; cursor: help; } .mf-root .mf-lp-stat dd .mf-lp-verified { margin-inline-start: 0; align-self: center; } /* Price box */ .mf-root .mf-lp-buy { padding: clamp(18px, 3cqi, 24px); border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.25); background: var(--mf-surface); box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 18px 40px -24px rgb(15 23 42 / .3); } .mf-root .mf-lp-buy__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .mf-root .mf-lp-buy__format { padding: 3px 10px; border-radius: 999px; background: var(--mf-primary-soft); color: var(--mf-primary); font-size: .76em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .mf-root .mf-lp-buy__format--auction { background: var(--mf-accent-soft); color: color-mix(in srgb, var(--mf-accent) 70%, var(--mf-text)); } .mf-root .mf-lp-buy__format--confidential { background: var(--mf-surface-alt); color: var(--mf-text-muted); } .mf-root .mf-lp-buy__ends { display: inline-flex; align-items: center; gap: 6px; color: var(--mf-danger); font-size: .88em; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-lp-buy__label { margin: 16px 0 2px; color: var(--mf-text-muted); font-family: inherit; font-size: .88em; font-weight: 600; } .mf-root .mf-lp-buy__price { margin: 0; color: var(--mf-price, var(--mf-text)); font-family: var(--mf-font-heading); font-size: clamp(1.9rem, 1.5rem + 1.6cqi, 2.4rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; } .mf-root .mf-lp-buy__price.is-hidden-price { font-size: 1.45rem; } .mf-root .mf-lp-buy__price.is-sold { color: var(--mf-text-muted); } .mf-root .mf-lp-buy__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; color: var(--mf-text-muted); font-size: .88em; list-style: none; } .mf-root .mf-lp-buy__facts li { display: inline-flex; align-items: center; gap: 4px; } .mf-root .mf-lp-buy__facts .is-good { color: var(--mf-success); font-weight: 600; } .mf-root .mf-lp-buy__actions { display: grid; gap: 10px; margin-top: 18px; } .mf-root .mf-lp-trust { display: grid; gap: 12px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--mf-border); list-style: none; } .mf-root .mf-lp-trust li { display: flex; align-items: flex-start; gap: 10px; } .mf-root .mf-lp-trust li > .mf-icon { flex: 0 0 auto; margin-top: 2px; color: var(--mf-text-muted); } .mf-root .mf-lp-trust li.is-good > .mf-icon { color: var(--mf-success); } .mf-root .mf-lp-trust strong { display: block; font-size: .92em; } .mf-root .mf-lp-trust small { display: block; color: var(--mf-text-muted); font-size: .8em; } .mf-root .mf-lp-buy__note { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .8em; line-height: 1.45; } .mf-root .mf-lp-buy__note > .mf-icon { flex: 0 0 auto; margin-top: 1px; } /* Seller */ .mf-root .mf-lp-seller { padding: 20px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.25); background: var(--mf-surface); } .mf-root .mf-lp-card-title { margin: 0 0 14px; color: var(--mf-text-muted); font-family: inherit; font-size: .76em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mf-root .mf-lp-seller__who { display: flex; align-items: center; gap: 12px; } .mf-root .mf-lp-seller__avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); font-weight: 800; font-size: 1.15em; } .mf-root .mf-lp-seller__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-lp-seller__name { margin: 0; font-size: 1.05em; font-weight: 700; } .mf-root .mf-lp-seller__level { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--mf-text-muted); font-size: .86em; } .mf-root .mf-lp-seller__level.is-verified { color: var(--mf-success); font-weight: 600; } .mf-root .mf-lp-seller__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 12px 0; border-block: 1px solid var(--mf-border); } .mf-root .mf-lp-seller__stats dt { color: var(--mf-text-muted); font-size: .74em; } .mf-root .mf-lp-seller__stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-lp-seller__levels { display: grid; gap: 6px; margin: 0; padding: 0; color: var(--mf-text-muted); font-size: .86em; list-style: none; } .mf-root .mf-lp-seller__levels li { display: flex; align-items: center; gap: 8px; } .mf-root .mf-lp-seller__levels li.is-done { color: var(--mf-text); } .mf-root .mf-lp-seller__levels li.is-done > .mf-icon { color: var(--mf-success); } /* Body sections */ .mf-root .mf-lp__body { min-width: 0; } .mf-root .mf-lp-section { margin: 0 0 calc(var(--mf-gap) * 1.8); } .mf-root .mf-lp-section__title { margin: 0 0 14px; font-size: 1.3em; letter-spacing: -0.01em; } .mf-root .mf-lp-prose { max-width: 72ch; font-size: 1.02em; } .mf-root .mf-lp-prose :is(h3, h4) { margin: 1.4em 0 .5em; font-size: 1.15em; line-height: 1.3; } .mf-root .mf-lp-prose h4 { font-size: 1.02em; } .mf-root .mf-lp-prose :is(h3, h4):first-child { margin-top: 0; } .mf-root .mf-lp-prose :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.4em; } .mf-root .mf-lp-prose li { margin: .25em 0; } .mf-root .mf-lp-prose blockquote { margin: 0 0 1em; padding: .2em 0 .2em 1em; border-inline-start: 3px solid var(--mf-accent); color: var(--mf-text-muted); } .mf-root .mf-lp-prose a { text-decoration: underline; text-underline-offset: 3px; } .mf-root .mf-lp-prose p { margin: 0 0 1em; } .mf-root .mf-lp-prose p:last-child { margin-bottom: 0; } .mf-root .mf-lp-specs { margin: 0; overflow: hidden; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-lp-spec { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; padding: 12px 16px; } .mf-root .mf-lp-spec + .mf-lp-spec { border-top: 1px solid var(--mf-border); } .mf-root .mf-lp-spec:nth-child(even) { background: color-mix(in srgb, var(--mf-surface-alt) 60%, var(--mf-surface)); } .mf-root .mf-lp-spec dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--mf-text-muted); } .mf-root .mf-lp-spec dd { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .mf-root .mf-lp-spec dd a { display: inline-flex; align-items: center; gap: 4px; color: var(--mf-primary); } .mf-root .mf-lp-spec.is-long { grid-template-columns: 1fr; } .mf-root .mf-lp-spec.is-long dd { font-weight: 400; } .mf-root .mf-lp-spec.is-long dd p { margin: 0 0 .6em; } .mf-root .mf-lp-spec__tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--mf-warning) 12%, var(--mf-surface)); color: color-mix(in srgb, var(--mf-warning) 80%, var(--mf-text)); font-size: .72em; font-weight: 600; } .mf-root .mf-lp-spec__locked { display: inline-flex; align-items: center; gap: 6px; color: var(--mf-text-muted); font-weight: 500; } .mf-root .mf-lp-spec__bool { display: inline-flex; align-items: center; gap: 5px; color: var(--mf-text-muted); } .mf-root .mf-lp-spec__bool.is-yes { color: var(--mf-success); } .mf-root .mf-lp-spec__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-lp-spec__list li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); font-weight: 500; font-size: .9em; } .mf-root .mf-lp-spec__list svg { color: var(--mf-success); flex: none; } @container (max-width: 520px) { .mf-root .mf-lp-spec { grid-template-columns: 1fr; } } /* Transfer steps */ .mf-root .mf-lp-steps { display: grid; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: mf-step; } .mf-root .mf-lp-steps li { position: relative; display: grid; gap: 2px; padding: 0 0 16px 44px; counter-increment: mf-step; } .mf-root .mf-lp-steps li::before { content: counter(mf-step); position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mf-type-soft); color: color-mix(in srgb, var(--mf-type-color) 80%, var(--mf-text)); font-size: .85em; font-weight: 800; } .mf-root .mf-lp-steps li:not(:last-child)::after { content: ""; position: absolute; top: 32px; bottom: 4px; inset-inline-start: 13px; width: 2px; background: var(--mf-border); } .mf-root .mf-lp-steps span { color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-lp-assure { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 16px; padding: 0; list-style: none; } .mf-root .mf-lp-assure li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .mf-root .mf-lp-assure li > .mf-icon { color: var(--mf-type-color); } /* Report */ .mf-root .mf-lp-report { scroll-margin-top: 80px; } .mf-root .mf-lp-report__box > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--mf-text-muted); font-size: .88em; cursor: pointer; list-style: none; } .mf-root .mf-lp-report__box > summary::-webkit-details-marker { display: none; } .mf-root .mf-lp-report__box > summary:hover { color: var(--mf-danger); } .mf-root .mf-lp-report__box > summary:focus-visible { outline: none; box-shadow: var(--mf-focus); border-radius: 6px; } .mf-root .mf-lp-report__form, .mf-root .mf-lp-report__login { max-width: 560px; margin-top: 12px; padding: 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } /* Similar listings */ .mf-root .mf-lp-similar { margin-top: calc(var(--mf-gap) * 2.5); } .mf-root .mf-lp-similar .mf-section__title { margin-bottom: var(--mf-gap); font-size: clamp(1.3em, 1em + 1.2cqi, 1.75em); } /* Phones: price bar pinned to the bottom (moved to by JS). */ .mf-root .mf-lp-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mf-border); background: var(--mf-surface); box-shadow: 0 -8px 24px -12px rgb(15 23 42 / .25); color: var(--mf-text); font-family: var(--mf-font-body); font-size: var(--mf-font-size); line-height: 1.3; } .mf-root .mf-lp-bar[hidden] { display: none; } .mf-root .mf-lp-bar__price { display: grid; min-width: 0; } .mf-root .mf-lp-bar__price span { color: var(--mf-text-muted); font-size: .75em; } .mf-root .mf-lp-bar__price strong { overflow: hidden; font-weight: 800; color: var(--mf-price, var(--mf-text)); font-size: 1.15em; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-lp-bar .mf-btn { flex: 0 0 auto; } body.mf-has-bar { padding-bottom: 72px; } @media (prefers-reduced-motion: reduce) { .mf-root .mf-gallery__thumb { transition: none; } } /* Classic themes: our page wrapper (templates/single-listing.php). */ .mf-root .mf-single-main { padding: 24px clamp(16px, 4vw, 32px) 56px; } /* ========================================================================== Watchlist & saved searches ========================================================================== */ /* Heart on cards (above the card's stretched link). */ .mf-root .mf-watch--card { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; } .mf-root .mf-watch--card form { margin: 0; } .mf-root .mf-watch--card .mf-watch__btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--mf-surface) 92%, transparent); box-shadow: 0 2px 8px rgb(15 23 42 / .22); color: var(--mf-text); cursor: pointer; transition: transform .15s ease, color .15s ease; backdrop-filter: blur(6px); } .mf-root .mf-watch--card .mf-watch__btn:hover { transform: scale(1.08); color: var(--mf-danger); } .mf-root .mf-watch--card .mf-watch__btn:focus-visible { outline: none; box-shadow: var(--mf-focus), 0 2px 8px rgb(15 23 42 / .22); } .mf-root .mf-lcard__badges { inset-inline-end: 56px; } /* Leave room for the heart. */ /* Full-width button in the price box. */ .mf-root .mf-watch--page { margin-top: 12px; } .mf-root .mf-watch--page form { margin: 0; } .mf-root .mf-watch__count { margin: 8px 0 0; color: var(--mf-text-muted); font-size: .82em; text-align: center; } .mf-root .mf-watch__count[hidden] { display: none; } /* Watching: filled red heart. */ .mf-root .mf-watch__btn[aria-pressed="true"] { color: var(--mf-danger); } .mf-root .mf-watch__btn[aria-pressed="true"] svg.mf-icon { fill: currentColor; animation: mf-pop .3s ease; } .mf-root .mf-watch--page .mf-watch__btn[aria-pressed="true"] { color: var(--mf-danger) !important; border-color: color-mix(in srgb, var(--mf-danger) 40%, var(--mf-border)); background: color-mix(in srgb, var(--mf-danger) 6%, var(--mf-surface)); } .mf-root .mf-watch__btn[aria-busy="true"] { opacity: .6; pointer-events: none; } @keyframes mf-pop { 50% { transform: scale(1.3); } } .mf-root .mf-lcard.is-unwatched { opacity: .5; } /* Save search (marketplace toolbar). */ .mf-root .mf-savesearch { margin-inline-start: auto; } .mf-root .mf-savesearch form { margin: 0; } .mf-root .mf-savesearch__done { display: inline-flex; align-items: center; gap: 6px; color: var(--mf-success); font-size: .9em; font-weight: 600; } .mf-root .mf-savesearch__done a { margin-inline-start: 4px; color: var(--mf-primary); font-weight: 600; } .mf-root .mf-savesearch + .mf-market__sort { margin-inline-start: 0; } @container (max-width: 560px) { .mf-root .mf-savesearch { order: 3; width: 100%; margin-inline-start: 0; } .mf-root .mf-savesearch .mf-btn { width: 100%; } } /* Member lists (watchlist, saved searches). */ .mf-root .mf-account-list__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: var(--mf-gap); } .mf-root .mf-account-list__head p { margin: 4px 0 0; } .mf-root .mf-account-list .mf-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: var(--mf-gap); } .mf-root .mf-saved { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-saved__item { display: grid; gap: 16px; padding: 18px 20px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); } .mf-root .mf-saved__name { margin: 0; font-size: 1.1em; } .mf-root .mf-saved__name a { color: var(--mf-text); text-decoration: none; } .mf-root .mf-saved__name a:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-saved__summary { margin: 4px 0 0; color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-saved__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-saved__matches { color: var(--mf-success); font-weight: 600; } .mf-root .mf-saved__form { display: grid; gap: 12px; align-items: end; margin: 0; } .mf-root .mf-saved__field { display: grid; gap: 4px; min-width: 0; } .mf-root .mf-saved__actions { display: flex; flex-wrap: wrap; gap: 8px; } @container (min-width: 760px) { .mf-root .mf-saved__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } .mf-root .mf-saved__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } } /* On-screen notice (JavaScript only). */ .mf-root .mf-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; z-index: 99999; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 999px; background: #0f172a; box-shadow: 0 10px 30px rgb(15 23 42 / .35); color: #fff; font-family: var(--mf-font-body); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; opacity: 0; transform: translate(-50%, 16px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .mf-root .mf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } body.mf-has-bar .mf-toast { bottom: calc(90px + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { .mf-root .mf-watch__btn[aria-pressed="true"] svg.mf-icon { animation: none; } .mf-root .mf-toast { transition: none; } } /* ========================================================================== Offers & Buy now ========================================================================== */ .mf-root .mf-lbadge--pending { background: #0f172a; color: #fff; } .mf-root .mf-offer-panel { display: grid; gap: 10px; margin-top: 18px; } .mf-root .mf-offer-panel .mf-alert { margin: 0; } .mf-root .mf-offer-panel__link { margin: 0; color: var(--mf-text-muted); font-size: .85em; text-align: center; } .mf-root .mf-offer-panel__link a { color: var(--mf-primary); font-weight: 600; } /* Expanding boxes: the summary looks like a button. */ .mf-root .mf-offer-more > summary { list-style: none; cursor: pointer; } .mf-root .mf-offer-more > summary::-webkit-details-marker { display: none; } .mf-root .mf-offer-more[open] > summary { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .mf-root .mf-offer-form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--mf-border); border-top: 0; border-radius: 0 0 var(--mf-radius-button) var(--mf-radius-button); background: var(--mf-surface-alt); } .mf-root .mf-offer-form .mf-field { margin: 0; } .mf-root .mf-offer-form .mf-help { line-height: 1.45; } .mf-root .mf-offer-state { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); font-size: .92em; } .mf-root .mf-offer-state strong { font-size: 1.05em; } .mf-root .mf-offer-state span { color: var(--mf-text-muted); } .mf-root .mf-offer-state a { color: var(--mf-primary); font-weight: 600; } .mf-root .mf-offer-state blockquote { margin: 4px 0 0; padding: 6px 10px; border-inline-start: 3px solid var(--mf-border); color: var(--mf-text); font-style: italic; } .mf-root .mf-offer-state.is-action { border-color: color-mix(in srgb, var(--mf-primary) 40%, var(--mf-border)); background: var(--mf-primary-soft); } .mf-root .mf-offer-state.is-success { border-color: color-mix(in srgb, var(--mf-success) 35%, var(--mf-border)); background: color-mix(in srgb, var(--mf-success) 8%, var(--mf-surface)); } .mf-root .mf-offer-state__time { font-size: .9em; font-variant-numeric: tabular-nums; } .mf-root .mf-offer-actions { display: grid; gap: 8px; } .mf-root .mf-offer-actions form { margin: 0; } /* Offers page */ .mf-root .mf-tabs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--mf-gap); } .mf-root .mf-pill__count.is-alert { background: var(--mf-danger); color: #fff; } .mf-root .mf-offer-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-offer-card { display: grid; gap: 16px; padding: 18px 20px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); scroll-margin-top: 80px; } .mf-root .mf-offer-card.is-your-turn { border-color: color-mix(in srgb, var(--mf-primary) 45%, var(--mf-border)); box-shadow: 0 0 0 3px var(--mf-primary-soft), var(--mf-shadow); } .mf-root .mf-offer-card p { margin: 0; } .mf-root .mf-offer-card__listing a { color: var(--mf-text); font-weight: 700; text-decoration: none; } .mf-root .mf-offer-card__listing a:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-offer-card__who, .mf-root .mf-offer-card__time { color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-offer-card__amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 !important; } .mf-root .mf-offer-card__amount strong { font-family: var(--mf-font-heading); font-size: 1.6em; font-weight: 800; font-variant-numeric: tabular-nums; } .mf-root .mf-offer-history { margin-top: 10px; font-size: .9em; } .mf-root .mf-offer-history > summary { color: var(--mf-primary); font-weight: 600; cursor: pointer; } .mf-root .mf-offer-history__list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0 0 0 14px; border-inline-start: 2px solid var(--mf-border); list-style: none; } .mf-root .mf-offer-history__list li { display: grid; gap: 2px; } .mf-root .mf-offer-history__list li.is-mine .mf-offer-history__head strong { color: var(--mf-primary); } .mf-root .mf-offer-history__msg { color: var(--mf-text-muted); font-style: italic; } @container (min-width: 760px) { .mf-root .mf-offer-card { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } } /* ========================================================================== Auctions ========================================================================== */ .mf-root .mf-offer-state.is-warning { border-color: color-mix(in srgb, var(--mf-warning) 40%, var(--mf-border)); background: color-mix(in srgb, var(--mf-warning) 9%, var(--mf-surface)); } .mf-root .mf-bid-form { display: grid; gap: 10px; } .mf-root .mf-bid-form .mf-field { margin: 0; } .mf-root .mf-bid-form .mf-input { font-size: 1.1em; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-table-scroll { max-width: 100%; overflow-x: auto; } .mf-root .mf-bids { width: 100%; border-collapse: collapse; font-size: .92em; font-variant-numeric: tabular-nums; } .mf-root .mf-bids th { padding: 8px 12px; border-bottom: 1px solid var(--mf-border); color: var(--mf-text-muted); font-size: .85em; font-weight: 600; text-align: start; } .mf-root .mf-bids td { padding: 9px 12px; border-bottom: 1px solid var(--mf-border); } .mf-root .mf-bids .is-num { text-align: end; } .mf-root .mf-bids tr.is-top td { font-weight: 700; } .mf-root .mf-bids tr.is-top td:first-child::before { content: "★ "; color: var(--mf-accent); } .mf-root .mf-bids tr.is-mine td:first-child { color: var(--mf-primary); } .mf-root .mf-bids__auto { margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .75em; font-weight: 600; } /* ========================================================================== Account pages & member dashboard ========================================================================== */ .mf-root .mf-auth { display: grid; place-items: center; padding: calc(var(--mf-gap) * 1.5) 0; } .mf-root .mf-auth__card { display: grid; gap: 16px; width: 100%; max-width: 440px; padding: clamp(22px, 5cqi, 36px); border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.4); background: var(--mf-surface); box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 24px 48px -28px rgb(15 23 42 / .35); } .mf-root .mf-auth--register .mf-auth__card { max-width: 520px; } .mf-root .mf-auth__main { display: grid; place-items: center; width: 100%; } /* Split layout: brand panel + form, full width. */ .mf-root.mf-c-login:has(> .mf-auth--split), .mf-root.mf-c-register:has(> .mf-auth--split) { max-width: none; padding-top: 0 !important; padding-bottom: 0 !important; } .mf-root .mf-auth--split { grid-template-columns: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 0; min-height: min(860px, calc(100vh - 140px)); padding: 0; overflow: hidden; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * 1.6); background: var(--mf-surface); } .mf-root .mf-auth--split .mf-auth__main { padding: clamp(24px, 5cqi, 56px) clamp(16px, 4cqi, 48px); background: var(--mf-surface-alt); } .mf-root .mf-auth--split .mf-auth__card { max-width: 460px; box-shadow: 0 30px 60px -36px rgb(15 23 42 / .35); } .mf-root .mf-auth--split.mf-auth--register .mf-auth__card { max-width: 560px; } .mf-root .mf-auth__side { position: relative; display: flex; overflow: hidden; padding: clamp(24px, 5cqi, 56px); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--mf-primary) 55%, #0b1120) 0%, #0b1120 70%); color: #fff; } .mf-root .mf-auth__side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mf-accent) 45%, transparent), transparent 70%); opacity: .55; pointer-events: none; } .mf-root .mf-auth__side-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; max-width: 520px; margin: auto 0; } .mf-root .mf-auth__side p { margin: 0; } .mf-root .mf-auth__side-brand { display: inline-flex; gap: 10px; align-items: center; font-family: var(--mf-font-heading); font-size: 1.1em; font-weight: 800; } .mf-root .mf-auth__side-brand img { width: 36px; height: 36px; } .mf-root .mf-auth__side-title { font-family: var(--mf-font-heading); font-size: clamp(1.6em, 1.1em + 2cqi, 2.4em); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .mf-root .mf-auth__side-text { color: rgb(255 255 255 / .78); font-size: 1.05em; line-height: 1.6; } .mf-root .mf-auth__side-points { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; } .mf-root .mf-auth__side-points li { display: flex; gap: 10px; align-items: center; font-weight: 600; } .mf-root .mf-auth__side-points li > span { display: grid; flex-shrink: 0; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--mf-accent) 85%, transparent); color: #0b1120; } .mf-root .mf-auth__art { display: none; gap: 12px; margin-top: 10px; } .mf-root .mf-auth__art-card { display: flex; gap: 12px; align-items: center; max-width: 360px; padding: 14px 16px; border: 1px solid rgb(255 255 255 / .12); border-radius: 14px; background: rgb(255 255 255 / .06); backdrop-filter: blur(6px); } .mf-root .mf-auth__art-card.is-offset { margin-left: 44px; } .mf-root .mf-auth__art-icon { display: grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--mf-primary); box-shadow: inset 3px 0 0 var(--mf-accent); } .mf-root .mf-auth__art-icon.is-accent { background: color-mix(in srgb, var(--mf-accent) 90%, transparent); color: #0b1120; box-shadow: none; } .mf-root .mf-auth__art-lines { display: grid; flex: 1; gap: 6px; } .mf-root .mf-auth__art-lines i { display: block; height: 7px; border-radius: 99px; background: rgb(255 255 255 / .25); } .mf-root .mf-auth__art-lines i + i { width: 60%; background: rgb(255 255 255 / .14); } .mf-root .mf-auth__art-badge { display: inline-flex; gap: 4px; align-items: center; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--mf-success) 22%, transparent); color: #fff; font-size: .78em; font-weight: 700; } .mf-root .mf-auth__art-steps { display: flex; gap: 4px; } .mf-root .mf-auth__art-steps i { width: 16px; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .2); } .mf-root .mf-auth__art-steps i.is-done { background: var(--mf-accent); } @container (min-width: 880px) { .mf-root .mf-auth--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .mf-root .mf-auth--split.mf-auth--register { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); } .mf-root .mf-auth__art { display: grid; } } @container (max-width: 879px) { .mf-root .mf-auth--split { min-height: 0; } .mf-root .mf-auth__side { padding: 24px 20px; } .mf-root .mf-auth__side-text, .mf-root .mf-auth__side-points li:nth-child(n+3) { display: none; } } .mf-root .mf-auth__card > .mf-icon-badge { justify-self: start; } .mf-root .mf-auth__card > .mf-auth__brand { justify-self: start; display: block; line-height: 0; } .mf-root .mf-auth__brand img { display: block; width: 44px; height: 44px; } .mf-root .mf-auth__title { margin: 0; font-size: 1.55em; letter-spacing: -0.01em; } .mf-root .mf-auth__lead { margin: -6px 0 0; } .mf-root .mf-auth__form { display: grid; gap: 14px; } .mf-root .mf-auth__form .mf-field { margin: 0; } .mf-root .mf-auth__form .mf-alert { margin: 0; } .mf-root .mf-auth__card > .mf-alert { margin: 0; } .mf-root .mf-auth__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mf-root .mf-auth__labelrow a, .mf-root .mf-auth__switch a { color: var(--mf-primary); font-size: .9em; font-weight: 600; } .mf-root .mf-auth__switch { margin: 0; color: var(--mf-text-muted); text-align: center; } .mf-root .mf-auth__actions { display: grid; gap: 10px; } .mf-root .mf-reveal { border: 1px solid var(--mf-border); cursor: pointer; font: inherit; font-size: .85em; font-weight: 600; } .mf-root .mf-reveal[hidden] { display: none; } .mf-root .mf-affix > .mf-reveal:last-child { border-inline-start: 0; } /* Dashboard */ .mf-root .mf-dash { display: grid; gap: var(--mf-gap); scroll-margin-top: 80px; } .mf-root .mf-dash__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .mf-root .mf-dash__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--mf-primary), color-mix(in srgb, var(--mf-primary) 55%, var(--mf-accent))); color: var(--mf-on-primary); font-size: 1.4em; font-weight: 800; } .mf-root a.mf-dash__avatar { overflow: hidden; color: var(--mf-on-primary); text-decoration: none; } .mf-root a.mf-dash__avatar:hover, .mf-root a.mf-dash__avatar:focus { color: var(--mf-on-primary); } .mf-root a.mf-dash__avatar:focus-visible { box-shadow: var(--mf-focus); outline: none; } .mf-root .mf-dash__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-dash__who { flex: 1 1 200px; min-width: 0; } .mf-root .mf-dash__hello { margin: 0; font-size: clamp(1.4em, 1.1em + 1.4cqi, 1.9em); letter-spacing: -0.01em; } .mf-root .mf-dash__level { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--mf-text-muted); font-size: .9em; font-weight: 600; } .mf-root .mf-dash__level.is-ok { color: var(--mf-success); } .mf-root .mf-dash__quick { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-dash__verify { margin: 0; } .mf-root .mf-dash__verify p { margin: 0; } .mf-root .mf-dash__verify form { margin: 4px 0 0; } .mf-root .mf-dash > .mf-alert { margin: 0; } .mf-root .mf-dash__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); } .mf-root .mf-dash__nav { min-width: 0; } .mf-root .mf-dash__nav ul { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; overflow-x: auto; list-style: none; scrollbar-width: thin; } .mf-root .mf-dash__tab { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text); font-weight: 600; text-decoration: none; white-space: nowrap; } .mf-root .mf-dash__tab .mf-icon { color: var(--mf-text-muted); } .mf-root .mf-dash__tab:hover { border-color: var(--mf-primary); } .mf-root .mf-dash__tab.is-active { border-color: var(--mf-primary); background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-dash__tab.is-active .mf-icon { color: currentColor; } .mf-root .mf-dash__tab:focus-visible { outline: none; box-shadow: var(--mf-focus); } .mf-root .mf-dash__badge { margin-inline-start: auto; padding: 0 7px; border-radius: 999px; background: var(--mf-danger); color: #fff; font-size: .75em; line-height: 1.6; } .mf-root .mf-dash__main { display: grid; gap: var(--mf-gap); min-width: 0; align-content: start; } .mf-dash__main > .mf-root { max-width: none; } @container (min-width: 900px) { .mf-root .mf-dash__layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: clamp(20px, 3cqi, 36px); } .mf-root .mf-dash__nav { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); } .mf-root .mf-dash__nav ul { flex-direction: column; gap: 2px; overflow: visible; } .mf-root .mf-dash__tab { padding: 7px 12px; border-color: transparent; border-radius: var(--mf-radius); background: transparent; font-size: .95em; line-height: 1.4; } .mf-root .mf-dash__tab:hover { background: var(--mf-surface-alt); border-color: transparent; } .mf-root .mf-dash__tab.is-active { background: var(--mf-primary-soft); color: var(--mf-primary); border-color: transparent; } } .mf-root .mf-dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 0; } .mf-root .mf-dash__kpi { padding: 16px 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-dash__kpi dt a { color: var(--mf-text-muted); font-size: .85em; font-weight: 600; text-decoration: none; } .mf-root .mf-dash__kpi dt a:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-dash__kpi dd { margin: 4px 0 0; font-family: var(--mf-font-heading); font-size: 1.7em; font-weight: 800; font-variant-numeric: tabular-nums; } .mf-root .mf-dash__panel { padding: clamp(16px, 3cqi, 22px); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-dash__panelhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .mf-root .mf-dash__panelhead a { color: var(--mf-primary); font-weight: 600; } .mf-root .mf-dash__title { margin: 0 0 12px; font-size: 1.2em; } .mf-root .mf-dash__panelhead .mf-dash__title { margin: 0; } .mf-root .mf-dash__subtitle { margin: 0 0 12px; font-size: 1.05em; } .mf-root .mf-dash__allclear { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--mf-success); font-weight: 600; } .mf-root .mf-dash__todo { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-dash__todo li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border-inline-start: 3px solid var(--mf-primary); border-radius: 6px; background: var(--mf-surface-alt); } .mf-root .mf-dash__todo li.is-warning { border-inline-start-color: var(--mf-warning); } .mf-root .mf-dash__todo li.is-danger { border-inline-start-color: var(--mf-danger); } .mf-root .mf-dash__rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-dash__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-dash__rowicon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-dash__rowmain { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; } .mf-root .mf-dash__rowtitle { overflow: hidden; color: var(--mf-text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .mf-root a.mf-dash__rowtitle:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-dash__rowmeta, .mf-root .mf-dash__note, .mf-root .mf-dash__contact { color: var(--mf-text-muted); font-size: .86em; } .mf-root .mf-dash__note { color: var(--mf-danger); } .mf-root .mf-dash__contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; } .mf-root .mf-dash__contact a { color: var(--mf-primary); } .mf-root .mf-dash__stats { display: flex; flex: 0 0 auto; gap: 18px; margin: 0; font-size: .85em; text-align: center; } .mf-root .mf-dash__stats dt { color: var(--mf-text-muted); } .mf-root .mf-dash__stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-dash__row > .mf-badge { flex: 0 0 auto; } .mf-root .mf-dash__actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--mf-border); } .mf-root .mf-dash__actions:empty { display: none; } .mf-root .mf-dash__actions form { margin: 0; } .mf-root .mf-dash__panel form.mf-form:not(.mf-form-grid) { display: grid; gap: 14px; justify-items: start; } .mf-root .mf-dash__panel .mf-form-grid .mf-field { margin: 0; } .mf-root .mf-dash__panel .mf-form-grid { gap: 14px var(--mf-gap); align-items: start; } /* ------------------------------------------------------------------ */ /* Deal Room */ /* ------------------------------------------------------------------ */ .mf-root .mf-deal { display: grid; gap: var(--mf-gap); min-width: 0; } .mf-root .mf-deal__head { display: grid; gap: 6px; min-width: 0; } .mf-root .mf-deal__back { justify-self: start; color: var(--mf-text-muted); font-size: .9em; font-weight: 600; text-decoration: none; } .mf-root .mf-deal__back:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-deal__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 0; color: var(--mf-text-muted); font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .mf-root .mf-deal__ref { padding: 3px 8px; border-radius: 6px; background: var(--mf-primary-soft); color: var(--mf-primary); font-variant-numeric: tabular-nums; letter-spacing: .06em; } .mf-root .mf-deal__title { margin: 0; font-family: var(--mf-font-heading); font-size: clamp(1.35em, 4vw, 1.9em); line-height: 1.2; overflow-wrap: anywhere; } .mf-root .mf-deal__title::before, .mf-root .mf-deal__title::after { content: none; } .mf-root .mf-deal__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .mf-root .mf-deal__amount { font-family: var(--mf-font-heading); font-size: 1.45em; font-weight: 800; color: var(--mf-price, var(--mf-text)); font-variant-numeric: tabular-nums; } .mf-root .mf-deal-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0 0; padding: 0; list-style: none; counter-reset: none; } .mf-root .mf-deal-progress__step { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; } .mf-root .mf-deal-progress__step::before { content: ""; position: absolute; top: 17px; inset-inline-end: 50%; inset-inline-start: -50%; height: 3px; background: var(--mf-border); z-index: 0; } .mf-root .mf-deal-progress__step:first-child::before { content: none; } .mf-root .mf-deal-progress__step.is-done::before, .mf-root .mf-deal-progress__step.is-current::before { background: var(--mf-primary); } .mf-root .mf-deal-progress__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--mf-border); border-radius: 50%; background: var(--mf-surface); color: var(--mf-text-muted); } .mf-root .mf-deal-progress__step.is-done .mf-deal-progress__dot { border-color: var(--mf-primary); background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-deal-progress__step.is-current .mf-deal-progress__dot { border-color: var(--mf-primary); color: var(--mf-primary); box-shadow: 0 0 0 5px var(--mf-primary-soft); } .mf-root .mf-deal-progress__label { max-width: 100%; overflow: hidden; color: var(--mf-text-muted); font-size: .72em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-deal-progress__step.is-current .mf-deal-progress__label { color: var(--mf-text); font-weight: 800; } .mf-root .mf-deal-progress__now { margin: -4px 0 0; color: var(--mf-text); font-size: .9em; font-weight: 700; text-align: center; } @media (max-width: 599px) { .mf-root .mf-deal-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (min-width: 600px) { .mf-root .mf-deal-progress__label { font-size: .85em; } .mf-root .mf-deal-progress__now { display: none; } } .mf-root .mf-deal__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); align-items: start; } .mf-root .mf-deal__main, .mf-root .mf-deal__aside { display: grid; gap: var(--mf-gap); min-width: 0; } @media (min-width: 960px) { .mf-root .mf-deal__layout { grid-template-columns: minmax(0, 1fr) 320px; } .mf-root .mf-deal__aside { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); } } .mf-root .mf-deal-card { display: grid; gap: 12px; padding: clamp(16px, 3vw, 22px); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); min-width: 0; } .mf-root .mf-deal-card > * { margin: 0; } .mf-root .mf-deal-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mf-font-heading); font-size: 1.08em; } .mf-root .mf-deal-card__title::before, .mf-root .mf-deal-card__title::after, .mf-root .mf-deal-card__sub::before, .mf-root .mf-deal-card__sub::after, .mf-root .mf-deal-next__title::before, .mf-root .mf-deal-next__title::after { content: none; } .mf-root .mf-deal-card__title svg { color: var(--mf-primary); } .mf-root .mf-deal-card__sub { margin: 6px 0 0; font-size: .95em; } .mf-root .mf-deal-next { display: flex; gap: 14px; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--mf-border); border-inline-start: 4px solid var(--mf-text-muted); border-radius: var(--mf-radius); background: var(--mf-surface); scroll-margin-top: 90px; } .mf-root .mf-deal-next.is-primary { border-color: color-mix(in srgb, var(--mf-primary) 35%, var(--mf-border)); border-inline-start-color: var(--mf-primary); background: color-mix(in srgb, var(--mf-primary) 5%, var(--mf-surface)); } .mf-root .mf-deal-next.is-success { border-inline-start-color: var(--mf-success); background: color-mix(in srgb, var(--mf-success) 6%, var(--mf-surface)); } .mf-root .mf-deal-next.is-warning { border-inline-start-color: var(--mf-warning); background: color-mix(in srgb, var(--mf-warning) 7%, var(--mf-surface)); } .mf-root .mf-deal-next.is-danger { border-inline-start-color: var(--mf-danger); background: color-mix(in srgb, var(--mf-danger) 6%, var(--mf-surface)); } .mf-root .mf-deal-next__icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mf-surface-alt); color: var(--mf-text-muted); } .mf-root .mf-deal-next.is-primary .mf-deal-next__icon { background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-deal-next.is-success .mf-deal-next__icon { background: var(--mf-success); color: #fff; } .mf-root .mf-deal-next.is-warning .mf-deal-next__icon { background: var(--mf-warning); color: #fff; } .mf-root .mf-deal-next.is-danger .mf-deal-next__icon { background: var(--mf-danger); color: #fff; } .mf-root .mf-deal-next__body { display: grid; flex: 1 1 auto; gap: 8px; min-width: 0; } .mf-root .mf-deal-next__body > * { margin: 0; } .mf-root .mf-deal-next__kicker { color: var(--mf-text-muted); font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .mf-root .mf-deal-next__title { margin: 0; font-family: var(--mf-font-heading); font-size: 1.25em; line-height: 1.25; } .mf-root .mf-deal-next__text { color: var(--mf-text); line-height: 1.55; } .mf-root .mf-deal-next__due { display: flex; align-items: flex-start; gap: 6px; color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-deal-next__due svg { flex: 0 0 auto; margin-top: 2px; } .mf-root .mf-deal-accept { display: grid; gap: 14px; justify-items: start; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--mf-border); } @media (max-width: 480px) { .mf-root .mf-deal-next { flex-direction: column; } .mf-root .mf-deal-accept .mf-btn { width: 100%; justify-content: center; } } .mf-root .mf-deal-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 20px; margin: 0; } .mf-root .mf-deal-facts dt { color: var(--mf-text-muted); font-size: .82em; font-weight: 600; } .mf-root .mf-deal-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; } .mf-root .mf-deal-facts a { color: var(--mf-primary); } .mf-root .mf-deal-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-deal-steps__item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); } .mf-root .mf-deal-steps__item > div { min-width: 0; } .mf-root .mf-deal-steps__mark { display: grid; flex: 0 0 auto; place-items: center; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--mf-border); border-radius: 50%; background: var(--mf-surface); color: var(--mf-on-primary); } .mf-root .mf-deal-steps__item.is-done .mf-deal-steps__mark { border-color: var(--mf-primary); background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-deal-steps__item.is-confirmed .mf-deal-steps__mark { border-color: var(--mf-success); background: var(--mf-success); color: #fff; } .mf-root .mf-deal-steps__item.has-problem { border-color: var(--mf-danger); } .mf-root .mf-deal-steps__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-weight: 700; } .mf-root .mf-deal-steps__desc, .mf-root .mf-deal-steps__state { margin: 3px 0 0; color: var(--mf-text-muted); font-size: .9em; line-height: 1.5; } .mf-root .mf-deal-steps__state { color: var(--mf-success); font-weight: 600; } .mf-root .mf-deal-terms__text { padding: 12px 14px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); color: var(--mf-text); font-size: .93em; line-height: 1.6; } .mf-root .mf-deal-terms__text p { margin: 0 0 .6em; } .mf-root .mf-deal-terms__text p:last-child { margin: 0; } .mf-root .mf-deal-accepts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-deal-accepts li { display: flex; align-items: flex-start; gap: 8px; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-deal-accepts li svg { flex: 0 0 auto; margin-top: 3px; } .mf-root .mf-deal-accepts li strong { color: var(--mf-text); } .mf-root .mf-deal-accepts li.is-accepted svg { color: var(--mf-success); } .mf-root .mf-deal-terms__hash { font-size: .82em; font-variant-numeric: tabular-nums; } .mf-root .mf-deal-contact p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mf-root .mf-deal-contact a { color: var(--mf-primary); overflow-wrap: anywhere; } .mf-root .mf-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .mf-root .mf-timeline__item { position: relative; display: flex; gap: 12px; padding: 0 0 16px; } .mf-root .mf-timeline__item:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: 0; inset-inline-start: 13px; width: 2px; background: var(--mf-border); } .mf-root .mf-timeline__icon { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-timeline__item > div { min-width: 0; } .mf-root .mf-timeline__text { margin: 3px 0 0; font-weight: 600; line-height: 1.45; } .mf-root .mf-timeline__meta { margin: 2px 0 0; color: var(--mf-text-muted); font-size: .82em; } .mf-root .mf-deal-asset { gap: 6px; } .mf-root .mf-deal-asset__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); } .mf-root .mf-deal-asset__type { color: var(--mf-text-muted); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .mf-root .mf-deal-asset__type:empty { display: none; } .mf-root .mf-deal-asset__title { font-weight: 700; overflow-wrap: anywhere; } .mf-root .mf-deal-asset__title a { color: var(--mf-text); text-decoration: none; } .mf-root .mf-deal-asset__title a:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-deal-party { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--mf-border); } .mf-root .mf-deal-card__title + .mf-deal-party { padding-top: 0; border-top: 0; } .mf-root .mf-deal-party__avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); font-weight: 800; } .mf-root .mf-deal-party__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-deal-party__body { display: grid; gap: 2px; min-width: 0; } .mf-root .mf-deal-party__body > p { margin: 0; } .mf-root .mf-deal-party__name { font-weight: 700; overflow-wrap: anywhere; } .mf-root .mf-deal-party__role { color: var(--mf-text-muted); font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .mf-root .mf-deal-party__trust { display: inline-flex; align-items: center; gap: 5px; color: var(--mf-text-muted); font-size: .86em; } .mf-root .mf-deal-party__trust.is-verified { color: var(--mf-success); font-weight: 600; } .mf-root .mf-deal-party__stats { color: var(--mf-text-muted); font-size: .82em; } .mf-root .mf-deal-safety ul { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; list-style: disc; color: var(--mf-text); font-size: .9em; line-height: 1.5; } .mf-root .mf-deal-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-deal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-deal-row.is-your-turn { border-color: color-mix(in srgb, var(--mf-primary) 40%, var(--mf-border)); box-shadow: inset 4px 0 0 var(--mf-primary); } .mf-root .mf-deal-row__icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-deal-row__main { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; } .mf-root .mf-deal-row__title { overflow: hidden; color: var(--mf-text); font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-deal-row__title:hover { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-deal-row__meta { color: var(--mf-text-muted); font-size: .86em; overflow-wrap: anywhere; } .mf-root .mf-deal-row__side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } @media print { .mf-root .mf-deal__back, .mf-root .mf-deal-accept, .mf-root .mf-deal-safety { display: none; } .mf-root .mf-deal__layout { grid-template-columns: 1fr; } } .mf-root .mf-dash__row.is-your-turn { border-color: color-mix(in srgb, var(--mf-primary) 40%, var(--mf-border)); box-shadow: inset 4px 0 0 var(--mf-primary); } .mf-root .mf-offer-state .mf-btn { margin-top: 6px; } /* Deal Room: payment stage */ .mf-root .mf-deal-form { display: grid; gap: 14px; justify-items: start; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--mf-border); } .mf-root .mf-deal-form > .mf-field, .mf-root .mf-deal-form__grid { width: 100%; margin: 0; } .mf-root .mf-deal-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; } .mf-root .mf-deal-form__grid .mf-field { margin: 0; } .mf-root .mf-deal-form textarea.mf-input, .mf-root .mf-deal-form select.mf-input, .mf-root .mf-deal-form input.mf-input { width: 100%; } .mf-root .mf-deal-methods { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; border: 0; } .mf-root .mf-deal-method { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface); cursor: pointer; } .mf-root .mf-deal-method:hover { border-color: color-mix(in srgb, var(--mf-primary) 45%, var(--mf-border)); } .mf-root .mf-deal-method:has(input:checked) { border-color: var(--mf-primary); box-shadow: 0 0 0 1px var(--mf-primary); background: color-mix(in srgb, var(--mf-primary) 4%, var(--mf-surface)); } .mf-root .mf-deal-method input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mf-primary); } .mf-root .mf-deal-method__body { display: grid; gap: 4px; min-width: 0; } .mf-root .mf-deal-method__body > span { color: var(--mf-text-muted); font-size: .9em; line-height: 1.5; } .mf-root .mf-deal-method__warn, .mf-root .mf-deal-warning { display: flex; align-items: flex-start; gap: 6px; color: color-mix(in srgb, var(--mf-warning) 75%, var(--mf-text)) !important; font-size: .88em; line-height: 1.5; } .mf-root .mf-deal-method__warn svg, .mf-root .mf-deal-warning svg { flex: 0 0 auto; margin-top: 3px; } .mf-root .mf-deal-warning { margin: 0; padding: 10px 12px; border-radius: calc(var(--mf-radius) * .75); background: color-mix(in srgb, var(--mf-warning) 10%, var(--mf-surface)); } .mf-root .mf-deal-more { width: 100%; margin-top: 4px; } .mf-root .mf-deal-more > summary { color: var(--mf-primary); font-weight: 600; cursor: pointer; } .mf-root .mf-deal-more[open] > summary { margin-bottom: 4px; } .mf-root .mf-deal-paydetails { padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--mf-primary) 45%, var(--mf-border)); border-radius: calc(var(--mf-radius) * .75); background: color-mix(in srgb, var(--mf-primary) 4%, var(--mf-surface)); } .mf-root .mf-deal-paydetails > p { margin: 0; } .mf-root .mf-deal-paydetails__label { color: var(--mf-text-muted); font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .mf-root .mf-deal-paydetails__text { margin: 4px 0 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; white-space: pre-wrap; overflow-wrap: anywhere; } .mf-root .mf-deal-paydetails__meta { color: var(--mf-text-muted); font-size: .8em; } .mf-root .mf-deal-sent { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mf-border); } .mf-root .mf-deal-sent > p { margin: 0; } .mf-root .mf-deal-sent__title { display: flex; align-items: center; gap: 6px; font-weight: 700; } .mf-root .mf-deal-sent__note { padding: 10px 12px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); font-size: .92em; white-space: pre-wrap; } .mf-root .mf-deal-facts dd a { display: inline-flex; align-items: center; gap: 4px; } .mf-root .mf-deal-files { display: grid; gap: 4px; } .mf-root .mf-deal-next:focus:not(:focus-visible) { outline: none; } .mf-root .mf-deal-staff { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mf-primary); font-size: .88em; font-weight: 700; } /* Deal Room: transfer & inspection */ .mf-root .mf-deal-transfer__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .mf-root .mf-deal-transfer__count { color: var(--mf-text-muted); font-size: .88em; font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-deal-meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--mf-surface-alt); } .mf-root .mf-deal-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--mf-success); transition: width .3s ease; } .mf-root .mf-deal-steps--live .mf-deal-steps__item { align-items: flex-start; } .mf-root .mf-deal-steps--live .mf-deal-steps__mark { color: var(--mf-text-muted); font-size: .75em; font-weight: 800; } .mf-root .mf-deal-steps__body { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; } .mf-root .mf-deal-steps__body > p { margin: 0; } .mf-root .mf-deal-steps__note { padding: 8px 10px; border-radius: 8px; background: var(--mf-surface); font-size: .9em; line-height: 1.5; overflow-wrap: anywhere; } .mf-root .mf-deal-steps__text { white-space: pre-line; } .mf-root .mf-deal-steps__note.is-problem { background: color-mix(in srgb, var(--mf-danger) 8%, var(--mf-surface)); } .mf-root .mf-deal-steps__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 6px; } .mf-root .mf-deal-steps__actions .mf-deal-more { flex: 1 1 100%; } .mf-root .mf-deal-files--inline { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .88em; } .mf-root .mf-deal-files--inline a { display: inline-flex; align-items: center; gap: 4px; color: var(--mf-primary); } .mf-root .mf-inline-form { display: inline; margin: 0; } .mf-root .mf-deal-recovery { border-color: color-mix(in srgb, var(--mf-success) 35%, var(--mf-border)); background: color-mix(in srgb, var(--mf-success) 4%, var(--mf-surface)); } .mf-root .mf-deal-recovery__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .92em; } .mf-root .mf-deal-recovery__list li { display: flex; align-items: flex-start; gap: 8px; } .mf-root .mf-deal-recovery__list svg { flex: 0 0 auto; margin-top: 3px; color: var(--mf-success); } @media (prefers-reduced-motion: reduce) { .mf-root .mf-deal-meter > span { transition: none; } } /* Deal Room: jump links */ .mf-root .mf-deal-jump { display: flex; gap: 6px; margin: 0; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: thin; } .mf-root .mf-deal-jump a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface); color: var(--mf-text); font-size: .86em; font-weight: 600; text-decoration: none; } .mf-root .mf-deal-jump a:hover { border-color: var(--mf-primary); color: var(--mf-primary); } /* Deal Room: messages */ .mf-root .mf-deal-chat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .mf-root .mf-deal-chat__shield { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); font-size: .8em; font-weight: 700; } .mf-root .mf-deal-chat__intro { margin: 0; font-size: .9em; } .mf-root .mf-deal-chat__list { display: grid; gap: 12px; max-height: min(60vh, 520px); margin: 0; padding: 12px; overflow-y: auto; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); list-style: none; overscroll-behavior: contain; } .mf-root .mf-deal-chat__list:focus-visible { outline: 2px solid var(--mf-focus, var(--mf-primary)); outline-offset: 2px; } .mf-root .mf-deal-chat__empty { padding: 20px 8px; color: var(--mf-text-muted); text-align: center; } .mf-root .mf-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; } .mf-root .mf-msg.is-mine { flex-direction: row-reverse; margin-inline-start: auto; } .mf-root .mf-msg__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); font-size: .8em; font-weight: 800; } .mf-root .mf-msg.is-team .mf-msg__avatar { background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-msg__body { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--mf-border); border-radius: 14px 14px 14px 4px; background: var(--mf-surface); } .mf-root .mf-msg.is-mine .mf-msg__body { border-color: color-mix(in srgb, var(--mf-primary) 30%, var(--mf-border)); border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--mf-primary) 8%, var(--mf-surface)); } .mf-root .mf-msg.is-team .mf-msg__body { border-color: color-mix(in srgb, var(--mf-primary) 45%, var(--mf-border)); } .mf-root .mf-msg.is-flagged .mf-msg__body { border-color: color-mix(in srgb, var(--mf-warning) 60%, var(--mf-border)); } .mf-root .mf-msg__body > * { margin: 0; } .mf-root .mf-msg__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .8em; } .mf-root .mf-msg__who time { color: var(--mf-text-muted); } .mf-root .mf-msg__role { display: inline-flex; align-items: center; gap: 3px; color: var(--mf-text-muted); font-weight: 600; } .mf-root .mf-msg__role.is-team { color: var(--mf-primary); } .mf-root .mf-msg__text { font-size: .95em; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } .mf-root .mf-msg__files { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .86em; } .mf-root .mf-msg__files a { display: inline-flex; align-items: center; gap: 4px; color: var(--mf-primary); } .mf-root .mf-msg__warn { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--mf-warning) 12%, var(--mf-surface)); color: color-mix(in srgb, var(--mf-warning) 70%, var(--mf-text)); font-size: .82em; line-height: 1.45; } .mf-root .mf-msg__warn svg { flex: 0 0 auto; margin-top: 2px; } .mf-root .mf-msg__seen { color: var(--mf-text-muted); font-size: .75em; text-align: end; } .mf-root .mf-deal-chat__form { display: grid; gap: 8px; margin: 0; } .mf-root .mf-deal-chat__form textarea { width: 100%; resize: vertical; } .mf-root .mf-deal-chat__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .mf-root .mf-deal-chat__bar .mf-btn { margin-inline-start: auto; } .mf-root .mf-deal-chat__attach { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px dashed var(--mf-border); border-radius: 999px; color: var(--mf-text); font-size: .88em; font-weight: 600; cursor: pointer; } .mf-root .mf-deal-chat__attach:hover, .mf-root .mf-deal-chat__attach:focus-within { border-color: var(--mf-primary); color: var(--mf-primary); } .mf-root .mf-deal-chat__attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .mf-root .mf-deal-chat__hint { flex: 1 1 180px; font-size: .8em; } .mf-root .mf-deal-chat__filename:empty { display: none; } @media (max-width: 480px) { .mf-root .mf-msg { max-width: 100%; } .mf-root .mf-deal-chat__bar .mf-btn { width: 100%; justify-content: center; } } /* Deal Room: requests (more time / cancel) */ .mf-root .mf-deal-request { display: grid; gap: 10px; padding: clamp(14px, 3vw, 20px); border: 1px solid var(--mf-border); border-inline-start: 4px solid var(--mf-text-muted); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-deal-request.is-action { border-inline-start-color: var(--mf-warning); background: color-mix(in srgb, var(--mf-warning) 7%, var(--mf-surface)); } .mf-root .mf-deal-request > * { margin: 0; } .mf-root .mf-deal-request__title { display: flex; align-items: center; gap: 8px; font-family: var(--mf-font-heading); font-size: 1.08em; } .mf-root .mf-deal-request__title::before, .mf-root .mf-deal-request__title::after { content: none; } .mf-root .mf-deal-request__reason { font-style: italic; overflow-wrap: anywhere; } .mf-root .mf-deal-request__actions { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-deal-options .mf-deal-more + .mf-deal-more { padding-top: 10px; border-top: 1px solid var(--mf-border); } .mf-root .mf-deal-dispute { display: grid; gap: 12px; padding: clamp(14px, 3vw, 20px); border: 1px solid var(--mf-border); border-inline-start: 4px solid var(--mf-danger); border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-danger) 5%, var(--mf-surface)); } .mf-root .mf-deal-dispute.is-resolved { border-inline-start-color: var(--mf-success); background: color-mix(in srgb, var(--mf-success) 5%, var(--mf-surface)); } .mf-root .mf-deal-dispute > * { margin: 0; } .mf-root .mf-deal-dispute__title { display: flex; align-items: center; gap: 8px; font-family: var(--mf-font-heading); font-size: 1.08em; } .mf-root .mf-deal-dispute__title::before, .mf-root .mf-deal-dispute__title::after { content: none; } .mf-root .mf-deal-dispute__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; } .mf-root .mf-deal-dispute__facts > div { min-width: 0; } .mf-root .mf-deal-dispute__facts dt { color: var(--mf-text-muted); font-size: .82em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .mf-root .mf-deal-dispute__facts dd { margin: 2px 0 0; overflow-wrap: anywhere; } .mf-root .mf-deal-dispute__details { white-space: pre-line; overflow-wrap: anywhere; padding: 10px 12px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface); border: 1px solid var(--mf-border); } .mf-root .mf-deal-dispute__staff { display: grid; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--mf-border); } .mf-root .mf-deal-dispute__staff > * { margin: 0; } .mf-root .mf-deal-dispute__staff h4 { display: flex; align-items: center; gap: 6px; font-size: 1em; } .mf-root .mf-deal-dispute-open > .mf-muted { margin: 0; } /* Reviews & star ratings ------------------------------------------------- */ .mf-root .mf-stars { display: inline-flex; gap: 1px; color: var(--mf-warning); line-height: 0; vertical-align: middle; } .mf-root .mf-stars__star .mf-icon { color: color-mix(in srgb, var(--mf-text-muted) 45%, transparent); } .mf-root .mf-stars__star.is-on .mf-icon { color: var(--mf-warning); fill: var(--mf-warning); } .mf-root .mf-stars__star.is-half .mf-icon { color: var(--mf-warning); fill: color-mix(in srgb, var(--mf-warning) 45%, transparent); } .mf-root .mf-stars-input { margin: 0; padding: 0; border: 0; } .mf-root .mf-stars-input__row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .mf-root .mf-stars-input label { display: inline-flex; padding: 4px; border-radius: 8px; color: color-mix(in srgb, var(--mf-text-muted) 55%, transparent); cursor: pointer; transition: color .12s, transform .12s; } .mf-root .mf-stars-input label .mf-icon { fill: transparent; } .mf-root .mf-stars-input label:hover, .mf-root .mf-stars-input label:hover ~ label, .mf-root .mf-stars-input input:checked + label, .mf-root .mf-stars-input input:checked + label ~ label { color: var(--mf-warning); } .mf-root .mf-stars-input label:hover .mf-icon, .mf-root .mf-stars-input label:hover ~ label .mf-icon, .mf-root .mf-stars-input input:checked + label .mf-icon, .mf-root .mf-stars-input input:checked + label ~ label .mf-icon { fill: var(--mf-warning); } .mf-root .mf-stars-input input:focus-visible + label { outline: 2px solid var(--mf-primary); outline-offset: 1px; } .mf-root .mf-stars-input label:hover { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .mf-root .mf-stars-input label { transition: none; } .mf-root .mf-stars-input label:hover { transform: none; } } .mf-root .mf-deal-review > .mf-muted, .mf-root .mf-deal-review > .mf-alert { margin: 0; } .mf-root .mf-rev { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface); } .mf-root .mf-rev > * { margin: 0; } .mf-root .mf-rev.is-hidden { opacity: .7; border-style: dashed; } .mf-root .mf-rev__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .mf-root .mf-rev__title { margin: 0; font-weight: 700; } .mf-root .mf-rev__meta { margin: 0; color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-rev__body { white-space: pre-line; overflow-wrap: anywhere; } .mf-root .mf-rev__reply { padding: 10px 12px; border-inline-start: 3px solid var(--mf-primary); border-radius: 0 8px 8px 0; background: var(--mf-primary-soft); } .mf-root .mf-rev__reply p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; } .mf-root .mf-rev__reply .mf-rev__reply-title { font-weight: 700; font-size: .88em; white-space: normal; } .mf-root .mf-deal__print { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; color: var(--mf-primary); font-size: .9em; font-weight: 600; text-decoration: none; } .mf-root .mf-deal__print:hover { text-decoration: underline; } .mf-root .mf-reviews { display: grid; gap: calc(var(--mf-gap) * .9); } .mf-root .mf-reviews > * { margin: 0; } .mf-root .mf-reviews__head { display: flex; align-items: center; gap: 14px; min-width: 0; } .mf-root .mf-reviews__head .mf-section__title { margin: 0; } .mf-root .mf-reviews__who { min-width: 0; } .mf-root .mf-reviews__who p { margin: 2px 0 0; } .mf-root .mf-reviews__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); font-size: 1.4em; font-weight: 700; } .mf-root .mf-reviews__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 32px; align-items: center; padding: clamp(16px, 3vw, 22px); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-reviews__score { display: grid; gap: 4px; justify-items: start; } .mf-root .mf-reviews__score p { margin: 0; } .mf-root .mf-reviews__avg { font-family: var(--mf-font-heading); font-size: 2.6em; font-weight: 800; line-height: 1; } .mf-root .mf-reviews__bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-reviews__bars li { display: grid; grid-template-columns: 4.5em 1fr 2.5em; align-items: center; gap: 10px; font-size: .9em; } .mf-root .mf-reviews__bar { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--mf-text-muted) 18%, transparent); } .mf-root .mf-reviews__bar span { display: block; height: 100%; border-radius: inherit; background: var(--mf-warning); } .mf-root .mf-reviews__bar-count { color: var(--mf-text-muted); text-align: end; font-variant-numeric: tabular-nums; } .mf-root .mf-reviews .mf-tabs-nav { margin: 0; } .mf-root .mf-reviews__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-reviews .mf-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .mf-root .mf-rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .9em; } .mf-root .mf-rating strong { font-variant-numeric: tabular-nums; } .mf-root .mf-rating a { color: inherit; } .mf-root .mf-lp-seller .mf-rating { margin: 2px 0; } .mf-root .mf-lp-seller__reviews { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--mf-border); } .mf-root .mf-lp-seller__reviews-title { margin: 0; font-weight: 700; font-size: .92em; } .mf-root .mf-lp-seller__review { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; font-size: .9em; } .mf-root .mf-lp-seller__review p { margin: 0; overflow-wrap: anywhere; } .mf-root .mf-lp-seller__review footer { font-size: .92em; } .mf-root .mf-lp-seller__all { color: var(--mf-primary); font-size: .9em; font-weight: 600; } .mf-root .mf-lcard__rating { display: inline-flex; align-items: center; gap: 3px; color: var(--mf-text-muted); font-size: .82em; font-variant-numeric: tabular-nums; } .mf-root .mf-lcard__rating .mf-icon { color: var(--mf-warning); fill: var(--mf-warning); } /* ---------- Paid upgrades (Phase 5 A) ---------- */ .mf-root .mf-lbadge--promo { --mf-promo: var(--mf-primary); background: var(--mf-promo); color: #fff; } .mf-root .mf-lbadge--promo.mf-lbadge--primary { --mf-promo: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-lbadge--promo.mf-lbadge--accent { --mf-promo: var(--mf-accent); color: color-mix(in srgb, var(--mf-accent) 12%, #111); } .mf-root .mf-lbadge--promo.mf-lbadge--success { --mf-promo: var(--mf-success); } .mf-root .mf-lbadge--promo.mf-lbadge--warning { --mf-promo: var(--mf-warning); color: color-mix(in srgb, var(--mf-warning) 10%, #111); } .mf-root .mf-lbadge--promo.mf-lbadge--danger { --mf-promo: var(--mf-danger); } .mf-root .mf-lbadge--promo.mf-lbadge--neutral { --mf-promo: var(--mf-text); color: var(--mf-surface); } .mf-root .mf-lcard.is-highlighted { --mf-hl: var(--mf-primary); border-color: var(--mf-hl); box-shadow: 0 0 0 2px var(--mf-hl), var(--mf-shadow); } .mf-root .mf-lcard--hl-accent { --mf-hl: var(--mf-accent); } .mf-root .mf-lcard--hl-success { --mf-hl: var(--mf-success); } .mf-root .mf-lcard--hl-warning { --mf-hl: var(--mf-warning); } .mf-root .mf-lcard--hl-danger { --mf-hl: var(--mf-danger); } .mf-root .mf-lcard--hl-neutral { --mf-hl: var(--mf-text-muted); } .mf-root .mf-lcard__promoted { margin-inline-start: auto; color: var(--mf-text-muted); font-size: .92em; font-weight: 600; letter-spacing: 0; text-transform: none; } .mf-root .mf-promote { display: grid; gap: 20px; } .mf-root .mf-promote__head { display: flex; align-items: flex-start; gap: 14px; } .mf-root .mf-promote__head .mf-section__title { margin: 0 0 4px; } .mf-root .mf-promote__head .mf-muted { margin: 0; } .mf-root .mf-promote__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; } .mf-root .mf-promote__form { display: grid; gap: 16px; } .mf-root .mf-promote__form > .mf-btn { justify-self: start; } .mf-root .mf-promote__options { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; } .mf-root .mf-promote__options > legend { margin-bottom: 12px; padding: 0; } .mf-root .mf-promote__option { align-items: flex-start; } .mf-root .mf-promote__option .mf-choice-card__body { flex: 1; } .mf-root .mf-promote__price { flex-shrink: 0; font-size: 1.15em; font-weight: 800; white-space: nowrap; } .mf-root .mf-promote__preview { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; color: var(--mf-text-muted); font-size: .82em; } .mf-root .mf-promote__preview .mf-lbadge { box-shadow: none; } .mf-root .mf-promote__pay { display: grid; gap: 20px; align-items: start; } .mf-root .mf-promote__summary { display: grid; gap: 8px; padding: calc(18px * var(--mf-space)); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-promote__summary > * { margin: 0; } .mf-root .mf-promote__total { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--mf-border); font-size: 1.1em; } .mf-root .mf-promote__checkout { display: grid; gap: 10px; } .mf-root .mf-promote__history { display: grid; gap: 10px; } .mf-root .mf-promote__history > .mf-h3 { margin: 0; } .mf-root .mf-promote__hist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-promote__hist > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius) * .75); } .mf-root .mf-promote__hist-name { font-weight: 700; } .mf-root .mf-promote__hist .mf-badge { margin-inline-start: auto; } .mf-root .mf-spotlight__invite { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 220px; padding: 24px; border: 2px dashed var(--mf-border); border-radius: var(--mf-radius); color: var(--mf-text-muted); font-weight: 600; text-align: center; text-decoration: none; } .mf-root .mf-spotlight__invite:hover, .mf-root .mf-spotlight__invite:focus-visible { border-color: var(--mf-primary); color: var(--mf-primary); } @media (min-width: 720px) { .mf-root .mf-promote__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mf-root .mf-promote__options > legend { grid-column: 1 / -1; } } @media (min-width: 900px) { .mf-root .mf-promote__pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } } .mf-root .mf-dash__promo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mf-root .mf-dash__promo .mf-lbadge { box-shadow: none; } /* ---------- Seller plans (Phase 5 B) ---------- */ .mf-root .mf-plans__head { justify-items: center; text-align: center; } .mf-root .mf-plans__switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; width: 100%; margin: 12px auto 0; } .mf-root .mf-plans__switch .mf-pill { min-width: 96px; justify-content: center; } .mf-root .mf-plans__note { flex-basis: 100%; text-align: center; } .mf-root .mf-plans__note { color: var(--mf-success); font-size: .88em; font-weight: 700; } .mf-root .mf-plans__grid { max-width: calc(var(--mf-cols, 3) * 360px + (var(--mf-cols, 3) - 1) * var(--mf-gap)); margin-inline: auto; } .mf-root .mf-plans__grid { display: grid; gap: var(--mf-gap); grid-template-columns: minmax(0, 1fr); margin-top: calc(24px * var(--mf-space)); } .mf-root .mf-plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: calc(24px * var(--mf-space)); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); box-shadow: var(--mf-shadow); } .mf-root .mf-plan.is-highlight { border-color: var(--mf-primary); box-shadow: 0 0 0 2px var(--mf-primary), var(--mf-shadow); } .mf-root .mf-plan.is-current { background: var(--mf-primary-soft); } .mf-root .mf-plan__flag { position: absolute; top: -12px; left: 50%; padding: 3px 12px; border-radius: 999px; background: var(--mf-primary); color: var(--mf-on-primary); font-size: .76em; font-weight: 700; white-space: nowrap; transform: translateX(-50%); } .mf-root .mf-plan__name { font-size: 1.25em; } .mf-root .mf-plan__desc, .mf-root .mf-plan__other { margin: 0; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-plan__price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; } .mf-root .mf-plan__price strong { font-size: 2em; line-height: 1.1; } .mf-root .mf-plan__price span { color: var(--mf-text-muted); } .mf-root .mf-plan__save { justify-self: start; align-self: flex-start; margin: 0; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mf-success) 12%, var(--mf-surface)); color: var(--mf-success); font-size: .82em; font-weight: 700; } .mf-root .mf-plan__list { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; } .mf-root .mf-plan__list li { display: flex; gap: 8px; align-items: flex-start; font-size: .94em; line-height: 1.45; } .mf-root .mf-plan__list .mf-icon { margin-top: .2em; color: var(--mf-success); } .mf-root .mf-plan__cta { margin-top: auto; padding-top: 10px; } .mf-root .mf-plan__cta .is-disabled { pointer-events: none; opacity: .8; } .mf-root .mf-myplan { display: grid; gap: calc(28px * var(--mf-space)); } .mf-root .mf-myplan__card { display: grid; gap: 14px; padding: calc(22px * var(--mf-space)); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-myplan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .mf-root .mf-myplan__head > div { flex: 1; min-width: 0; } .mf-root .mf-myplan__head .mf-section__title { margin: 0; } .mf-root .mf-myplan__eyebrow { margin: 0; font-size: .82em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .mf-root .mf-myplan__billing { margin: 0; } .mf-root .mf-myplan__meters { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-myplan__meters li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; } .mf-root .mf-myplan__meter-num { color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-myplan__meters meter { grid-column: 1 / -1; width: 100%; height: 10px; } .mf-root .mf-myplan__benefits > summary { cursor: pointer; font-weight: 600; } .mf-root .mf-myplan__actions { display: flex; flex-wrap: wrap; gap: 10px; } .mf-root .mf-myplan__history { display: grid; gap: 10px; } @container (min-width: 640px) { .mf-root .mf-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 960px) { .mf-root .mf-plans__grid { grid-template-columns: repeat(var(--mf-cols, 3), minmax(0, 1fr)); } } /* AI for sellers: "Let AI help" (Basics) and "Check my listing" (Review). */ .mf-root .mf-ai-box { display: grid; gap: 12px; margin: 0 0 var(--mf-gap); padding: var(--mf-pad); border: 1px solid color-mix(in srgb, var(--mf-primary) 22%, var(--mf-border)); border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-primary) 4%, var(--mf-surface)); } .mf-root .mf-ai-box[hidden] { display: none; } .mf-root .mf-ai-box__head { display: flex; gap: 12px; align-items: flex-start; } .mf-root .mf-ai-box__icon { display: inline-grid; flex-shrink: 0; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-ai-box__title { margin: 0; font-family: var(--mf-font-heading); font-size: 1.05em; color: var(--mf-text); } .mf-root .mf-ai-box__lead, .mf-root .mf-ai-box__note, .mf-root .mf-ai-box__locked { margin: 2px 0 0; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-ai-box__note { margin: 0; font-size: .85em; } .mf-root .mf-ai-box__locked { margin: 0; color: var(--mf-text); } .mf-root .mf-ai-box__notes > summary { cursor: pointer; color: var(--mf-primary); font-weight: 600; font-size: .92em; } .mf-root .mf-ai-box__notes textarea { width: 100%; margin-top: 8px; } .mf-root .mf-ai-box__actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .mf-root .mf-ai-box__actions[hidden] { display: none; } .mf-root .mf-ai-box__left { color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-ai-box__status { margin: 0; font-size: .92em; color: var(--mf-text); } .mf-root .mf-ai-box__status:empty { display: none; } .mf-root .mf-ai-box.is-working .mf-ai-box__icon { animation: mf-ai-pulse 1.2s ease-in-out infinite; } @keyframes mf-ai-pulse { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .mf-root .mf-ai-box.is-working .mf-ai-box__icon { animation: none; } } .mf-root .mf-ai-draft { display: grid; gap: 12px; padding: var(--mf-pad); border: 1px dashed var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-ai-draft[hidden] { display: none; } .mf-root .mf-ai-draft:focus { outline: none; } .mf-root .mf-ai-draft__intro { margin: 0; color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-ai-draft__part { display: grid; gap: 6px; } .mf-root .mf-ai-draft__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .mf-root .mf-ai-draft__label { margin: 0; font-weight: 600; font-size: .9em; color: var(--mf-text); } .mf-root .mf-ai-draft__use { display: inline-flex; gap: 6px; align-items: center; font-size: .9em; cursor: pointer; } .mf-root .mf-ai-draft__use input { width: 18px; height: 18px; accent-color: var(--mf-primary); } .mf-root .mf-ai-draft__text { padding: 10px 12px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); color: var(--mf-text); white-space: pre-wrap; overflow-wrap: anywhere; } .mf-root .mf-ai-draft__text.is-long { max-height: 320px; overflow: auto; } .mf-root .mf-ai-draft__list ul { margin: 4px 0 0; padding-inline-start: 1.2em; color: var(--mf-text); font-size: .92em; } .mf-root .mf-ai-draft__list.is-warning .mf-ai-draft__label { color: var(--mf-danger); } .mf-root .mf-ai-draft__actions { display: flex; flex-wrap: wrap; gap: 8px; } .mf-root .mf-ai-results { display: grid; gap: 10px; } .mf-root .mf-ai-results:focus { outline: none; } .mf-root [data-mf-ai-result]:focus { outline: none; } .mf-root .mf-ai-results__meta { margin: 0; color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-ai-results__summary { margin: 0; color: var(--mf-text); } .mf-root .mf-ai-results__ok { margin: 0; color: var(--mf-success); font-weight: 600; } .mf-root .mf-ai-results__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-ai-finding { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-ai-finding.is-rules { border-color: color-mix(in srgb, var(--mf-danger) 35%, var(--mf-border)); } .mf-root .mf-ai-finding .mf-badge { flex-shrink: 0; margin-top: 2px; } .mf-root .mf-ai-finding__body { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; } .mf-root .mf-ai-finding__msg { margin: 0; color: var(--mf-text); font-weight: 600; } .mf-root .mf-ai-finding__tip { margin: 0; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-ai-finding__foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: .88em; } .mf-root .mf-ai-finding__foot:empty { display: none; } .mf-root .mf-ai-finding__src { color: var(--mf-danger); font-weight: 600; } @media (max-width: 480px) { .mf-root .mf-ai-box { padding: 12px; } .mf-root .mf-ai-box__icon { display: none; } .mf-root .mf-ai-draft { padding: 10px; } } /* AI due-diligence summary on the listing page. */ .mf-root .mf-ai-sum { display: grid; gap: 14px; padding: var(--mf-pad); border: 1px solid color-mix(in srgb, var(--mf-primary) 22%, var(--mf-border)); border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-primary) 3%, var(--mf-surface)); } .mf-root .mf-ai-sum__head { display: grid; gap: 6px; } .mf-root .mf-ai-sum .mf-lp-section__title { display: flex; gap: 10px; align-items: center; margin: 0; } .mf-root .mf-ai-sum__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); flex-shrink: 0; } .mf-root .mf-ai-sum__label { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-ai-sum__label svg { flex-shrink: 0; margin-top: 2px; } .mf-root .mf-ai-sum__body { display: grid; gap: 14px; } .mf-root .mf-ai-sum__body:focus { outline: none; } .mf-root .mf-ai-sum__meta { margin: 0; color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-ai-sum__meta strong { color: var(--mf-warning); } .mf-root .mf-ai-sum__overview, .mf-root .mf-ai-sum__intro, .mf-root .mf-ai-sum__locked { margin: 0; color: var(--mf-text); line-height: 1.6; } .mf-root .mf-ai-sum__locked { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .mf-root .mf-ai-sum__cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .mf-root .mf-ai-sum__col { padding: 12px 14px; border-radius: var(--mf-radius); background: var(--mf-surface); border: 1px solid var(--mf-border); } .mf-root .mf-ai-sum__col.is-good .mf-ai-sum__list svg { color: var(--mf-success); } .mf-root .mf-ai-sum__col.is-risk .mf-ai-sum__list svg { color: var(--mf-warning); } .mf-root .mf-ai-sum__h { margin: 0 0 8px; font-family: var(--mf-font-heading); font-size: 1em; color: var(--mf-text); } .mf-root .mf-ai-sum__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-ai-sum__list li { display: flex; gap: 8px; align-items: flex-start; color: var(--mf-text); font-size: .95em; } .mf-root .mf-ai-sum__list svg { flex-shrink: 0; margin-top: 3px; } .mf-root .mf-ai-sum__facts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; } .mf-root .mf-ai-fact { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 10px 14px; } .mf-root .mf-ai-fact + .mf-ai-fact { border-top: 1px solid var(--mf-border); } .mf-root .mf-ai-fact__text { display: grid; gap: 2px; flex: 1 1 240px; min-width: 0; color: var(--mf-text); } .mf-root .mf-ai-fact__text small { color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-ai-fact .mf-badge svg { width: 14px; height: 14px; } .mf-root .mf-ai-sum__qhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; } .mf-root .mf-ai-sum__qhead .mf-ai-sum__h { margin: 0; } .mf-root .mf-ai-sum__qhead [hidden] { display: none; } .mf-root .mf-ai-sum__qs { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.3em; color: var(--mf-text); } .mf-root .mf-ai-sum.is-working .mf-ai-sum__icon { animation: mf-ai-pulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .mf-root .mf-ai-sum.is-working .mf-ai-sum__icon { animation: none; } } @media (max-width: 480px) { .mf-root .mf-ai-sum { padding: 12px; } } /* Valuation: estimate card (sell wizard, listing page, free valuation). */ .mf-root .mf-val { display: grid; gap: 12px; margin: 0 0 var(--mf-gap); padding: var(--mf-pad); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-val__head { display: flex; gap: 10px; align-items: center; } .mf-root .mf-val__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mf-accent-soft); color: color-mix(in srgb, var(--mf-accent) 70%, var(--mf-text)); flex-shrink: 0; } .mf-root .mf-val__title { margin: 0; font-family: var(--mf-font-heading); font-size: 1.05em; color: var(--mf-text); } .mf-root .mf-val__main { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .mf-root .mf-val__range { margin: 0; font-family: var(--mf-font-heading); font-size: 1.6em; font-weight: 700; letter-spacing: -0.01em; color: var(--mf-text); font-variant-numeric: tabular-nums; } .mf-root .mf-val__chips { display: flex; flex-wrap: wrap; gap: 6px; } .mf-root .mf-val__basis, .mf-root .mf-val__empty { margin: 0; color: var(--mf-text); line-height: 1.55; } .mf-root .mf-val__live { margin: 0; padding: 8px 12px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); color: var(--mf-text); font-weight: 600; font-size: .95em; } .mf-root .mf-val__live:empty { display: none; } .mf-root .mf-val__live.is-below { background: color-mix(in srgb, var(--mf-success) 10%, var(--mf-surface)); } .mf-root .mf-val__live.is-above { background: color-mix(in srgb, var(--mf-warning) 12%, var(--mf-surface)); } .mf-root .mf-val__h { margin: 0 0 6px; font-weight: 600; font-size: .9em; color: var(--mf-text); } .mf-root .mf-val__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); overflow: hidden; } .mf-root .mf-val__comp { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; padding: 9px 12px; } .mf-root .mf-val__comp + .mf-val__comp { border-top: 1px solid var(--mf-border); } .mf-root .mf-val__comp-main { display: grid; gap: 1px; flex: 1 1 220px; min-width: 0; } .mf-root .mf-val__comp-main small, .mf-root .mf-val__comp-num small { color: var(--mf-text-muted); font-size: .82em; } .mf-root .mf-val__comp-num { display: grid; justify-items: end; gap: 1px; font-variant-numeric: tabular-nums; } .mf-root .mf-val__note { margin: 0; color: var(--mf-text-muted); font-size: .85em; } .mf-root .mf-val__ai { display: grid; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--mf-border); } .mf-root .mf-val__ai-out[hidden] { display: none; } .mf-root .mf-val__ai-out:focus { outline: none; } .mf-root .mf-val__ai-out p { margin: 0 0 6px; color: var(--mf-text); } .mf-root .mf-val__ai-out ul { margin: 0; padding-inline-start: 1.2em; color: var(--mf-text); } @media (max-width: 480px) { .mf-root .mf-val { padding: 12px; } .mf-root .mf-val__range { font-size: 1.35em; } } /* Sold archive. */ .mf-root .mf-sold__filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 14px; } .mf-root .mf-sold__filter .mf-label { margin: 0; } .mf-root .mf-sold__filter .mf-input { width: auto; min-width: 200px; } .mf-root .mf-sold__stats { margin: 0 0 14px; color: var(--mf-text); font-weight: 600; } .mf-root .mf-sold__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; } .mf-root .mf-sold__item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 16px; } .mf-root .mf-sold__item + .mf-sold__item { border-top: 1px solid var(--mf-border); } .mf-root .mf-sold__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); color: var(--mf-text-muted); flex-shrink: 0; } .mf-root .mf-sold__main { flex: 1 1 240px; min-width: 0; } .mf-root .mf-sold__title { color: var(--mf-text); font-weight: 600; text-decoration: none; } .mf-root .mf-sold__title:hover { color: var(--mf-primary); } .mf-root .mf-sold__meta { margin: 2px 0 0; color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-sold__nums { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; } .mf-root .mf-sold__price { color: var(--mf-text); } .mf-root .mf-sold__multi { color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-sold__proof { display: inline-flex; gap: 4px; align-items: center; color: var(--mf-success); font-size: .8em; font-weight: 600; } .mf-root .mf-sold__proof.is-asking { color: var(--mf-text-muted); } @media (max-width: 480px) { .mf-root .mf-sold__nums { justify-items: start; } .mf-root .mf-sold__icon { display: none; } } /* Free valuation tool. */ .mf-root .mf-vtool__form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; margin: 0 0 var(--mf-gap); } .mf-root .mf-vtool__form .mf-field { margin: 0; } .mf-root .mf-vtool__form .mf-btn { justify-self: start; } .mf-root .mf-vtool__result:focus { outline: none; } .mf-root .mf-vtool__cta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; } /* Buyer requests ("Wanted"): board and my requests. */ .mf-root .mf-reqs__header { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; } .mf-root .mf-reqs__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; } .mf-root .mf-req { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; padding: 14px 16px; } .mf-root .mf-req + .mf-req { border-top: 1px solid var(--mf-border); } .mf-root .mf-req__main { flex: 1 1 260px; min-width: 0; } .mf-root .mf-req__title { margin: 0 0 4px; font-family: var(--mf-font-heading); font-size: 1.02em; color: var(--mf-text); } .mf-root .mf-req__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 0; color: var(--mf-text); font-size: .92em; } .mf-root .mf-req__note { margin: 6px 0 0; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-req__act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mf-root .mf-req__act form { margin: 0; } .mf-root .mf-myreqs__form { display: grid; gap: 10px; margin: 0 0 var(--mf-gap); } .mf-root .mf-myreqs__form .mf-h3 { margin: 0; } .mf-root .mf-myreqs__grid { display: grid; gap: 14px 16px; grid-template-columns: minmax(0, 1fr); align-items: start; } @container (min-width: 520px) { .mf-root .mf-myreqs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 1000px) { .mf-root .mf-myreqs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .mf-root .mf-myreqs__grid .mf-field { margin: 0; } .mf-root .mf-myreqs__grid [hidden] { display: none; } .mf-root .mf-myreqs__wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .mf-root .mf-myreqs__wide .mf-field { flex: 1 1 100%; } .mf-root .mf-myreqs__h { margin: 0 0 10px; } .mf-root .mf-buyers-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--mf-gap); padding: 12px 14px; border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-success) 9%, var(--mf-surface)); border: 1px solid color-mix(in srgb, var(--mf-success) 28%, var(--mf-surface)); color: var(--mf-text); } .mf-root .mf-buyers-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--mf-success); } .mf-root .mf-buyers-hint p { margin: 0; } /* ---------- Charts (Frontend\Chart: plain HTML columns and bars) ---------- */ .mf-root .mf-chart { margin: 0; } .mf-root .mf-chart__frame { padding-left: 44px; direction: ltr; } /* Time runs left to right, also in right-to-left languages. */ .mf-root .mf-chart__plot { position: relative; height: 200px; } .mf-root .mf-chart__grid { position: absolute; inset: 0; pointer-events: none; } .mf-root .mf-chart__tick { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid color-mix(in srgb, var(--mf-border) 70%, transparent); } .mf-root .mf-chart__tick > span { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); color: var(--mf-text-muted); font-size: .75em; font-variant-numeric: tabular-nums; white-space: nowrap; } .mf-root .mf-chart__tick:last-child { border-top-color: var(--mf-border); } .mf-root .mf-chart__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; } .mf-root .mf-chart__col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; padding: 0 1px; } .mf-root .mf-chart__bar { width: 100%; max-width: 24px; height: var(--h); min-height: 0; border-radius: 4px 4px 0 0; background: var(--mf-primary); } .mf-root .mf-chart__col.is-zero .mf-chart__bar { height: 0; } .mf-root .mf-chart__col:hover .mf-chart__bar { background: color-mix(in srgb, var(--mf-primary) 80%, var(--mf-text)); } .mf-root .mf-chart__col:hover::before { content: ""; position: absolute; inset: 0 0 0 0; background: color-mix(in srgb, var(--mf-primary) 7%, transparent); border-radius: 4px; pointer-events: none; } .mf-root .mf-chart__col:hover::after { content: attr(data-tip); position: absolute; bottom: calc(var(--h, 0%) + 8px); left: 50%; z-index: 2; transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background: var(--mf-text); color: var(--mf-surface); font-size: .8em; font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgb(15 23 42 / .18); } .mf-root .mf-chart__col:first-child:hover::after, .mf-root .mf-chart__col:nth-child(2):hover::after { left: 0; transform: none; } .mf-root .mf-chart__col:last-child:hover::after, .mf-root .mf-chart__col:nth-last-child(2):hover::after { left: auto; right: 0; transform: none; } .mf-root .mf-chart__x { position: relative; height: 22px; margin-top: 6px; color: var(--mf-text-muted); font-size: .75em; } .mf-root .mf-chart__x span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; } .mf-root .mf-chart__x span:first-child { transform: none; left: 0; } .mf-root .mf-chart__x span:last-child:not(:first-child) { transform: none; left: auto; right: 0; } .mf-root .mf-chart__table { margin-top: 8px; } .mf-root .mf-chart__table summary { cursor: pointer; width: fit-content; border-radius: 4px; color: var(--mf-primary); font-size: .85em; font-weight: 600; } .mf-root .mf-chart__table summary:focus { outline: none; } .mf-root .mf-chart__table summary:focus-visible { box-shadow: var(--mf-focus); } .mf-root .mf-chart__table .mf-table-wrap { max-height: 280px; margin-top: 8px; overflow: auto; } .mf-root .mf-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; gap: 4px 12px; align-items: baseline; font-size: .9em; } .mf-root .mf-bars__label { grid-area: label; } .mf-root .mf-bars__track { grid-area: track; } .mf-root .mf-bars__value { grid-area: value; } .mf-root .mf-bars__label { overflow-wrap: anywhere; } .mf-root .mf-bars__track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface)); overflow: hidden; } .mf-root .mf-bars__fill { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--mf-primary); } .mf-root .mf-bars__value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } .mf-root .mf-bars__share { color: var(--mf-text-muted); font-weight: 400; } .mf-root .mf-table-wrap { max-width: 100%; overflow-x: auto; } .mf-root .mf-table { width: 100%; border-collapse: collapse; font-size: .9em; } .mf-root .mf-table th, .mf-root .mf-table td { padding: 9px 12px; border-bottom: 1px solid var(--mf-border); text-align: start; vertical-align: top; } .mf-root .mf-table thead th { color: var(--mf-text-muted); font-size: .9em; font-weight: 600; white-space: nowrap; } .mf-root .mf-table tbody th { font-weight: 600; } .mf-root .mf-table .is-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (forced-colors: active) { .mf-root .mf-chart__bar, .mf-root .mf-bars__fill { background: CanvasText; } } /* ---------- Seller performance ---------- */ .mf-root .mf-perf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); min-width: 0; } .mf-root .mf-perf > * { min-width: 0; } .mf-root .mf-perf__head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; } .mf-root .mf-perf__head > div { flex: 1 1 220px; } .mf-root .mf-perf__title { margin: 0; } .mf-root .mf-perf__range { margin: 2px 0 0; } .mf-root .mf-perf__filter { display: flex; flex-wrap: wrap; gap: 10px; } .mf-root .mf-perf__filter .mf-field { flex: 1 1 150px; margin: 0; min-width: 0; } .mf-root .mf-perf__filter select { width: 100%; max-width: 260px; } .mf-root .mf-perf__note { margin: -6px 0 0; font-size: .85em; } .mf-root .mf-perf__delta { margin: 6px 0 0 !important; font-family: inherit !important; font-size: .8em !important; font-weight: 600 !important; color: var(--mf-text-muted); display: flex; gap: 4px; align-items: center; } .mf-root .mf-perf__delta.is-up { color: var(--mf-success); } .mf-root .mf-perf__delta.is-down { color: var(--mf-danger); } .mf-root .mf-perf__delta .is-flipped { transform: rotate(180deg); } .mf-root .mf-perf__grid { display: grid; gap: var(--mf-gap); grid-template-columns: minmax(0, 1fr); } @media (min-width: 960px) { .mf-root .mf-perf__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } .mf-root .mf-perf__panel { min-width: 0; } .mf-root .mf-perf__lead { margin: 0 0 12px; font-size: .9em; } .mf-root .mf-perf__table th a { font-weight: 600; } .mf-root .mf-perf__table .mf-badge { margin-inline-start: 6px; } .mf-root .mf-perf__ups { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-perf__up { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-perf__upnums { display: flex; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; } .mf-root .mf-perf__csv { margin: 0; } /* Partner program page */ .mf-root .mf-pprog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); min-width: 0; } .mf-root .mf-pprog > * { min-width: 0; } .mf-root .mf-pprog__hero { display: grid; gap: 8px; justify-items: start; } .mf-root .mf-pprog__hero .mf-section__title { margin: 0; } .mf-root .mf-pprog__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-pprog__intro { margin: 0; max-width: 62ch; font-size: 1.08em; color: var(--mf-text-muted); } .mf-root .mf-pprog__benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .mf-root .mf-pprog__benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mf-root .mf-pprog__benefits li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-pprog__benefits svg { flex-shrink: 0; margin-top: 2px; color: var(--mf-success); } .mf-root .mf-pprog__steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: mf-pstep; grid-template-columns: minmax(0, 1fr); } @media (min-width: 700px) { .mf-root .mf-pprog__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mf-root .mf-pprog__steps li { counter-increment: mf-pstep; display: grid; align-content: start; gap: 4px; padding: 14px 16px 14px 56px; position: relative; border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-pprog__steps li::before { content: counter(mf-pstep); position: absolute; inset-inline-start: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mf-primary); color: #fff; font-weight: 700; } .mf-root .mf-pprog__steps span { color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-pprog__apply { display: grid; gap: 12px; max-width: 720px; } .mf-root .mf-pprog__apply > * { margin: 0; } .mf-root .mf-pprog__actions { display: flex; flex-wrap: wrap; gap: 10px; } .mf-root .mf-pprog__form { display: grid; gap: 4px; } .mf-root .mf-pprog__form .mf-btn[type="submit"] { justify-self: start; margin-top: 8px; } .mf-root .mf-pprog__terms { padding: 10px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); font-size: .92em; margin-bottom: 12px; } .mf-root .mf-pprog__terms summary { cursor: pointer; color: var(--mf-primary); font-weight: 600; } .mf-root .mf-pprog__terms p { margin: 8px 0 0; } /* Partner dashboard */ .mf-root .mf-pdash { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); min-width: 0; } .mf-root .mf-pdash > * { min-width: 0; margin: 0; } .mf-root .mf-pdash__head h2 { margin: 0 0 4px; } .mf-root .mf-pdash__head p { margin: 0; } .mf-root .mf-pdash__copyrow { display: flex; gap: 8px; align-items: stretch; } .mf-root .mf-pdash__copyrow .mf-input { flex: 1; min-width: 0; } .mf-root .mf-pdash__value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--mf-surface-alt); } .mf-root .mf-pdash__code { margin: 10px 0 0; font-size: .92em; } .mf-root .mf-pdash__sub { margin: 20px 0 8px; font-size: 1em; } .mf-root .mf-pdash__quick { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); } @media (min-width: 800px) { .mf-root .mf-pdash__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mf-root .mf-pdash__quick .mf-label { font-size: .88em; } .mf-root .mf-pdash__build .mf-field { margin-bottom: 10px; } .mf-root .mf-pdash__build .mf-help { margin: 0 0 6px; } .mf-root .mf-pdash__note { margin: -6px 0 0; font-size: .85em; } .mf-root .mf-pdash__codeform .mf-field { margin: 0; max-width: 520px; } .mf-root .mf-pdash__codeform .mf-help { margin: 0 0 6px; } .mf-root .mf-pdash__foot { font-size: .92em; } .mf-root .mf-pdash__money { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); } .mf-root .mf-pdash__tile { padding: 14px 16px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); border: 1px solid var(--mf-border); } .mf-root .mf-pdash__tile.is-approved { background: color-mix(in srgb, var(--mf-success) 8%, var(--mf-surface)); border-color: color-mix(in srgb, var(--mf-success) 30%, var(--mf-border)); } .mf-root .mf-pdash__tile dt { font-size: .88em; color: var(--mf-text-muted); font-weight: 600; } .mf-root .mf-pdash__tile dd { margin: 0; } .mf-root .mf-pdash__amount { font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px !important; overflow-wrap: anywhere; } .mf-root .mf-pdash__hint { font-size: .8em; color: var(--mf-text-muted); margin-top: 4px !important; } .mf-root .mf-pdash__level { margin-top: 16px; display: grid; gap: 8px; } .mf-root .mf-pdash__levelname { display: flex; gap: 8px; align-items: flex-start; margin: 0; } .mf-root .mf-pdash__levelname svg { flex-shrink: 0; margin-top: 2px; color: var(--mf-warning); } .mf-root .mf-pdash__bar { height: 10px; border-radius: 999px; background: var(--mf-surface-alt); border: 1px solid var(--mf-border); overflow: hidden; max-width: 520px; } .mf-root .mf-pdash__bar span { display: block; height: 100%; background: var(--mf-primary); border-radius: inherit; } .mf-root .mf-pdash__next, .mf-root .mf-pdash__rates { margin: 0; font-size: .88em; } .mf-root .mf-pdash__rates { margin-top: 12px; } .mf-root .mf-pdash__st.is-pending { background: color-mix(in srgb, var(--mf-warning) 14%, var(--mf-surface)); color: var(--mf-text); } .mf-root .mf-pdash__st.is-approved { background: color-mix(in srgb, var(--mf-success) 14%, var(--mf-surface)); color: var(--mf-text); } .mf-root .mf-pdash__st.is-paid { background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-pdash__st.is-reversed { background: var(--mf-surface-alt); color: var(--mf-text-muted); text-decoration: line-through; } @media (max-width: 600px) { .mf-root .mf-pdash__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .mf-root .mf-pdash__table, .mf-root .mf-pdash__table tbody, .mf-root .mf-pdash__table tr, .mf-root .mf-pdash__table td { display: block; width: 100%; } .mf-root .mf-pdash__table tr { padding: 10px 0; border-bottom: 1px solid var(--mf-border); } .mf-root .mf-pdash__table td { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 3px 0; border: 0; text-align: end; } .mf-root .mf-pdash__table td::before { content: attr(data-label); flex-shrink: 0; font-size: .82em; font-weight: 600; color: var(--mf-text-muted); text-align: start; } .mf-root .mf-pdash__table td.is-num { font-weight: 700; } } .mf-root .mf-pdash__poinfo { margin: 0 0 12px; font-size: .9em; } .mf-root .mf-pdash__asks { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; } .mf-root .mf-pdash__asks li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-success) 8%, var(--mf-surface)); border: 1px solid color-mix(in srgb, var(--mf-success) 30%, var(--mf-border)); } .mf-root .mf-pdash__asks form { margin: 0; } .mf-root .mf-pdash__poform { display: grid; gap: 8px; max-width: 560px; } .mf-root .mf-pdash__poform .mf-field { margin: 0; border: 0; padding: 0; min-width: 0; } .mf-root .mf-pdash__poform .mf-help { margin: 0 0 6px; } .mf-root .mf-pdash__poform .mf-btn { justify-self: start; } .mf-root .mf-pdash__saved { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; overflow-wrap: anywhere; } .mf-root .mf-pdash__saved svg { flex-shrink: 0; color: var(--mf-success); } .mf-root .mf-pdash__methods { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; } .mf-root .mf-pdash__st.is-po-requested { background: color-mix(in srgb, var(--mf-warning) 14%, var(--mf-surface)); color: var(--mf-text); } .mf-root .mf-pdash__st.is-po-paid { background: color-mix(in srgb, var(--mf-success) 14%, var(--mf-surface)); color: var(--mf-text); } .mf-root .mf-pdash__st.is-po-cancelled { background: var(--mf-surface-alt); color: var(--mf-text-muted); } .mf-root .mf-pdash__change > summary { cursor: pointer; color: var(--mf-primary); font-weight: 600; font-size: .92em; } .mf-root .mf-pdash__changebody { display: grid; gap: 8px; margin-top: 10px; } .mf-root .mf-pdash__changebody .mf-btn { justify-self: start; } /* Partner leaderboard */ .mf-root .mf-board { display: grid; gap: 12px; max-width: 720px; } .mf-root .mf-board__head h2 { display: flex; gap: 8px; align-items: center; margin: 0; } .mf-root .mf-board__head h2 svg { color: var(--mf-warning); flex-shrink: 0; } .mf-root .mf-board__head p { margin: 4px 0 0; } .mf-root .mf-board__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-board__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-board__row.is-me { border-color: var(--mf-primary); box-shadow: 0 0 0 1px var(--mf-primary); } .mf-root .mf-board__rank { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mf-surface-alt); font-weight: 700; font-variant-numeric: tabular-nums; } .mf-root .mf-board__row.is-top-1 .mf-board__rank { background: color-mix(in srgb, #eab308 30%, var(--mf-surface)); } .mf-root .mf-board__row.is-top-2 .mf-board__rank { background: color-mix(in srgb, #94a3b8 35%, var(--mf-surface)); } .mf-root .mf-board__row.is-top-3 .mf-board__rank { background: color-mix(in srgb, #c2410c 25%, var(--mf-surface)); } .mf-root .mf-board__name { font-weight: 600; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .mf-root .mf-board__level { font-weight: 400; font-size: .85em; } .mf-root .mf-board__count { font-size: .9em; color: var(--mf-text-muted); white-space: nowrap; } .mf-root .mf-pdash__lead { margin: 0 0 10px; font-size: .88em; } .mf-root .mf-pdash__creatives { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); } @media (min-width: 800px) { .mf-root .mf-pdash__creatives { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mf-root .mf-pdash__creative { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); min-width: 0; } .mf-root .mf-pdash__creative .mf-btn { justify-self: start; } .mf-root .mf-pdash__ctitle { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0; } .mf-root .mf-pdash__ctitle .mf-muted { font-size: .82em; } .mf-root .mf-pdash__banner { display: block; max-width: 100%; height: auto; border-radius: var(--mf-radius-sm, 6px); border: 1px solid var(--mf-border); background: var(--mf-surface); } .mf-root .mf-pdash__creative textarea, .mf-root .mf-pdash__embed textarea { width: 100%; resize: vertical; font-size: .82em; } .mf-root .mf-pdash__embed { display: grid; gap: 10px; } .mf-root .mf-pdash__embed > div { display: grid; gap: 8px; justify-items: start; } .mf-root .mf-pdash__preview summary { cursor: pointer; color: var(--mf-primary); font-weight: 600; font-size: .92em; } .mf-root .mf-pdash__preview iframe { display: block; margin-top: 8px; max-width: 640px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: #fff; } .mf-root .mf-pdash__rank { margin: 0 0 8px; } .mf-root .mf-pdash__boardform { margin: 0; } /* Help Center */ .mf-root .mf-help-center { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--mf-gap) * 1.2); min-width: 0; } .mf-root .mf-help-center > * { min-width: 0; margin: 0; } .mf-root .mf-help__hero { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(20px, 5vw, 44px) clamp(14px, 4vw, 32px); border-radius: var(--mf-radius); background: var(--mf-primary-soft); } .mf-root .mf-help__hero .mf-section__title { margin: 0; } .mf-root .mf-help__intro { margin: 0; max-width: 60ch; color: var(--mf-text-muted); } .mf-root .mf-help__search { display: flex; gap: 8px; align-items: center; width: min(100%, 620px); margin-top: 6px; padding: 6px 6px 6px 14px; border: 1px solid var(--mf-border); border-radius: calc(var(--mf-radius-button) + 6px); background: var(--mf-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .mf-root .mf-help__search > svg { flex-shrink: 0; color: var(--mf-text-muted); } .mf-root .mf-help__search .mf-input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding-inline: 4px; } .mf-root .mf-help__search .mf-input:focus-visible { outline: none; } .mf-root .mf-help__search:focus-within { outline: 2px solid var(--mf-primary); outline-offset: 2px; } .mf-root .mf-help__search .mf-btn { border-radius: var(--mf-radius-button); flex-shrink: 0; } .mf-root .mf-help__block { display: grid; gap: 10px; } .mf-root .mf-help__block > h3, .mf-root .mf-help__block > h2 { margin: 0; } .mf-root .mf-help__crumbs { margin: 0; font-size: .9em; color: var(--mf-text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mf-root .mf-help__topics { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .mf-root .mf-help__topic { display: grid; gap: 4px; height: 100%; padding: 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .mf-root .mf-help__topic:hover, .mf-root .mf-help__topic:focus-visible { border-color: var(--mf-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); } .mf-root .mf-help__topic .mf-muted { font-size: .9em; } .mf-root .mf-help__count { font-size: .8em; color: var(--mf-primary); font-weight: 600; margin-top: 4px; } .mf-root .mf-help__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; } .mf-root .mf-help__list li + li { border-top: 1px solid var(--mf-border); } .mf-root .mf-help__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; color: inherit; text-decoration: none; } .mf-root .mf-help__item:hover, .mf-root .mf-help__item:focus-visible { background: var(--mf-surface-alt); } .mf-root .mf-help__item > svg { flex-shrink: 0; margin-top: 2px; color: var(--mf-primary); } .mf-root .mf-help__item > span { display: grid; gap: 2px; min-width: 0; } .mf-root .mf-help__item .mf-muted { font-size: .88em; } .mf-root .mf-help__contact { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 18px; border-radius: var(--mf-radius); background: var(--mf-surface-alt); border: 1px solid var(--mf-border); } .mf-root .mf-help__contact > svg { flex-shrink: 0; color: var(--mf-primary); } .mf-root .mf-help__contact > div { flex: 1 1 240px; } .mf-root .mf-help__contact h2, .mf-root .mf-help__contact h3, .mf-root .mf-help__contact p { margin: 0; } .mf-root .mf-help__contact p { color: var(--mf-text-muted); font-size: .95em; } .mf-root.mf-help-extras { display: grid; gap: calc(var(--mf-gap) * 1.2); margin-top: 2em; } .mf-root .mf-help-vote { padding: 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-help-vote__form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0; } .mf-root .mf-help-vote__q { margin: 0; font-weight: 600; } .mf-root .mf-help-vote__buttons { display: flex; gap: 8px; } .mf-root .mf-help-vote__note { display: grid; gap: 8px; margin: 0; } .mf-root .mf-help-vote__note .mf-btn { justify-self: start; } .mf-root .mf-help-vote .mf-alert { margin: 0; } /* Support: contact form, requests, conversation */ .mf-root .mf-support { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mf-gap); min-width: 0; } .mf-root .mf-support > * { min-width: 0; margin: 0; } .mf-root .mf-support__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; } .mf-root .mf-support__head h2, .mf-root .mf-support__head p { margin: 0; } .mf-root .mf-support__head p { margin-top: 4px; } .mf-root .mf-support__layout { display: grid; gap: var(--mf-gap); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .mf-root .mf-support__layout { grid-template-columns: minmax(0, 1fr) 260px; } } .mf-root .mf-support__form { display: grid; gap: 14px; } .mf-root .mf-support__form .mf-field { margin: 0; } .mf-root .mf-support__pair { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .mf-root .mf-support__aside { display: grid; gap: 12px; } .mf-root .mf-support__note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-support__note > svg { flex-shrink: 0; margin-top: 2px; color: var(--mf-primary); } .mf-root .mf-support__suggest { display: grid; gap: 8px; padding: 12px; border-radius: var(--mf-radius); background: var(--mf-primary-soft); } .mf-root .mf-support__suggest[hidden] { display: none; } .mf-root .mf-support__suggest-title { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; font-size: .92em; } .mf-root .mf-support__h { margin: 8px 0 0; } .mf-root .mf-support__list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); overflow: hidden; } .mf-root .mf-support__list li + li { border-top: 1px solid var(--mf-border); } .mf-root .mf-support__item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 16px; color: inherit; text-decoration: none; } .mf-root .mf-support__item:hover, .mf-root .mf-support__item:focus-visible { background: var(--mf-surface-alt); } .mf-root .mf-support__subject { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; } .mf-root .mf-support__subject strong { overflow-wrap: anywhere; } .mf-root .mf-support__subject .mf-muted { font-size: .88em; } .mf-root .mf-support__item.is-unread strong { color: var(--mf-primary); } .mf-root .mf-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--mf-primary); vertical-align: middle; } .mf-root .mf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .mf-root .mf-ticket { display: grid; gap: var(--mf-gap); min-width: 0; } .mf-root .mf-ticket > * { margin: 0; min-width: 0; } .mf-root .mf-ticket__back a { display: inline-flex; gap: 4px; align-items: center; } .mf-root .mf-ticket__head h2 { margin: 0 0 6px; overflow-wrap: anywhere; } .mf-root .mf-ticket__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; color: var(--mf-text-muted); font-size: .9em; } .mf-root .mf-thread { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-thread__msg { max-width: min(100%, 720px); padding: 12px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-thread__msg.is-mine { justify-self: end; background: var(--mf-surface-alt); } .mf-root .mf-thread__msg.is-staff { justify-self: start; border-color: var(--mf-primary); background: var(--mf-primary-soft); } .mf-root .mf-thread__who { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 6px; font-size: .92em; } .mf-root .mf-thread__body { overflow-wrap: anywhere; } .mf-root .mf-thread__body p { margin: 0 0 .6em; } .mf-root .mf-thread__body p:last-child { margin-bottom: 0; } .mf-root .mf-thread__files { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .9em; } .mf-root .mf-thread__files a { display: inline-flex; gap: 4px; align-items: center; overflow-wrap: anywhere; } .mf-root .mf-ticket__reply { display: grid; gap: 12px; } .mf-root .mf-ticket__reply .mf-field, .mf-root .mf-ticket__reply > p { margin: 0; } .mf-root .mf-ticket__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .mf-root .mf-ticket__close { margin: 0; } /* Digi AI chat */ .mf-root .mf-digi { --mf-digi-w: 380px; font-size: .95rem; } .mf-root .mf-digi--bubble { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99990; display: grid; justify-items: end; gap: 10px; } .mf-root .mf-digi__toggle { display: inline-flex; gap: 8px; align-items: center; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: var(--mf-primary); color: var(--mf-on-primary); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); order: 2; } .mf-root .mf-digi__toggle:hover { background: var(--mf-primary-hover); } .mf-root .mf-digi__toggle:focus-visible { outline: 3px solid var(--mf-focus); outline-offset: 2px; } .mf-root .mf-digi.is-open .mf-digi__toggle { display: none; } .mf-root .mf-digi__avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .mf-root .mf-digi__avatar.is-icon { display: inline-grid; place-items: center; background: var(--mf-surface); color: var(--mf-primary); } .mf-root .mf-digi__panel { display: flex; flex-direction: column; width: 100%; max-height: min(640px, 80vh); border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); color: var(--mf-text); overflow: hidden; } .mf-root .mf-digi__panel[hidden] { display: none; } .mf-root .mf-digi--bubble .mf-digi__panel { width: min(var(--mf-digi-w), calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); box-shadow: 0 12px 48px rgba(0, 0, 0, .22); } .mf-root .mf-digi--inline .mf-digi__panel { min-height: 420px; } .mf-root .mf-digi__head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-digi__who { display: grid; flex: 1; min-width: 0; line-height: 1.2; } .mf-root .mf-digi__tag { font-size: .78em; opacity: .85; } .mf-root .mf-digi__close { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .mf-root .mf-digi__close:hover, .mf-root .mf-digi__close:focus-visible { background: rgba(255, 255, 255, .18); } .mf-root .mf-digi__log { flex: 1; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; list-style: none; overflow-y: auto; background: var(--mf-surface-alt); } .mf-root .mf-digi__msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; overflow-wrap: anywhere; line-height: 1.45; } .mf-root .mf-digi__msg p { margin: 0 0 .5em; } .mf-root .mf-digi__msg p:last-child { margin-bottom: 0; } .mf-root .mf-digi__msg ul { margin: 0 0 .5em; padding-left: 1.2em; } .mf-root .mf-digi__msg.is-bot { align-self: flex-start; border: 1px solid var(--mf-border); border-bottom-left-radius: 4px; background: var(--mf-surface); } .mf-root .mf-digi__msg.is-user { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-digi__msg.is-typing { color: var(--mf-text-muted); font-style: italic; } .mf-root .mf-digi__msg.is-error { border-color: var(--mf-warning); } .mf-root .mf-digi__msg.is-note { border-color: var(--mf-success); } .mf-root .mf-digi__msg a { color: var(--mf-primary); font-weight: 600; } .mf-root .mf-digi__sources { margin-top: 6px !important; font-size: .85em; color: var(--mf-text-muted); } .mf-root .mf-digi__rate { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: .85em; color: var(--mf-text-muted); } .mf-root .mf-digi__rate-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--mf-border); border-radius: 50%; background: var(--mf-surface); color: var(--mf-text-muted); cursor: pointer; } .mf-root .mf-digi__rate-btn:hover, .mf-root .mf-digi__rate-btn:focus-visible { border-color: var(--mf-primary); color: var(--mf-primary); } .mf-root .mf-digi__handover-btn { margin-top: 8px; } .mf-root .mf-digi__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; } .mf-root .mf-digi__chips[hidden] { display: none; } .mf-root .mf-digi__chip { padding: 6px 10px; border: 1px solid var(--mf-primary); border-radius: 999px; background: var(--mf-primary-soft); color: var(--mf-primary); font: inherit; font-size: .85em; text-align: left; cursor: pointer; } .mf-root .mf-digi__chip:hover, .mf-root .mf-digi__chip:focus-visible { background: var(--mf-primary); color: var(--mf-on-primary); } .mf-root .mf-digi__form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px; border-top: 1px solid var(--mf-border); } .mf-root textarea.mf-input.mf-digi__input { flex: 1; min-height: 42px; height: 42px; max-height: 120px; resize: none; overflow-y: auto; } .mf-root .mf-digi__send { flex-shrink: 0; width: 42px; height: 42px; padding: 0; justify-content: center; } .mf-root .mf-digi__form.is-busy .mf-digi__send { opacity: .6; pointer-events: none; } .mf-root .mf-digi__foot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 0 14px 10px; font-size: .78em; color: var(--mf-text-muted); } .mf-root .mf-digi__person { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; border: 0; background: none; color: var(--mf-primary); font: inherit; font-weight: 600; cursor: pointer; } .mf-root .mf-digi__person.is-suggested { text-decoration: underline; } .mf-root .mf-digi__handover { display: grid; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--mf-border); background: var(--mf-surface); } .mf-root .mf-digi__handover-title { margin: 0; font-weight: 600; } .mf-root .mf-digi__handover .mf-error { margin: 0; } .mf-root .mf-digi__handover-actions { display: flex; gap: 8px; margin-top: 4px; } @media (max-width: 480px) { .mf-root .mf-digi--bubble.is-open { right: 12px; bottom: 12px; left: 12px; } .mf-root .mf-digi--bubble .mf-digi__panel { width: 100%; height: calc(100vh - 24px); } } @media (prefers-reduced-motion: no-preference) { .mf-root .mf-digi--bubble .mf-digi__panel { animation: mf-digi-in .18s ease-out; } @keyframes mf-digi-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } } .mf-root .mf-thread__note { display: flex; gap: 6px; align-items: flex-start; justify-self: center; max-width: min(100%, 560px); padding: 6px 12px; border-radius: 999px; background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .88em; } .mf-root .mf-thread__note > svg { flex-shrink: 0; margin-top: 2px; } .mf-root .mf-ticket__rate { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-support__rated { display: grid; gap: 12px; } .mf-root .mf-support__rated h2 { margin: 0; } /* Legal pages */ .mf-root .mf-legal { display: grid; gap: calc(var(--mf-gap) * 1.2); min-width: 0; } .mf-root .mf-legal > * { min-width: 0; margin: 0; } .mf-root .mf-legal__head { display: grid; gap: 12px; } .mf-root .mf-legal__title { margin: 0; font-family: var(--mf-font-heading); font-weight: var(--mf-heading-weight); font-size: clamp(1.7em, 1.2em + 2vw, 2.4em); line-height: 1.2; } .mf-root .mf-legal__head .mf-alert { margin: 0; } .mf-root .mf-legal__bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--mf-border); } .mf-root .mf-legal__meta { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--mf-text-muted); font-size: .92em; } .mf-root .mf-legal__meta > svg { flex-shrink: 0; color: var(--mf-primary); } .mf-root .mf-legal__meta time { color: var(--mf-text); font-weight: 600; } .mf-root .mf-legal__ver { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--mf-primary-soft); color: var(--mf-primary); font-size: .85em; font-weight: 600; } .mf-root .mf-legal__tools { display: flex; flex-wrap: wrap; gap: 6px; } .mf-root .mf-legal__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--mf-gap) * 1.4); align-items: start; } @media (min-width: 960px) { .mf-root .mf-legal__layout.has-toc { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); } .mf-root .mf-legal__toc { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); max-height: calc(100vh - 48px); overflow: auto; } } .mf-root .mf-legal__toc { padding: 14px 16px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); font-size: .9em; } .mf-root .mf-legal__toc-title { cursor: pointer; color: var(--mf-text); font-weight: 700; } .mf-root .mf-legal__toc ol { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; } .mf-root .mf-legal__toc a { display: block; padding: 5px 8px; border-radius: 8px; color: var(--mf-text-muted); line-height: 1.35; text-decoration: none; } .mf-root .mf-legal__toc a:hover, .mf-root .mf-legal__toc a:focus-visible { background: var(--mf-surface); color: var(--mf-primary); } .mf-root .mf-legal__body { max-width: 76ch; line-height: 1.7; overflow-wrap: break-word; } .mf-root .mf-legal__body > :first-child { margin-top: 0; } .mf-root .mf-legal__body h2 { margin: 2em 0 .6em; scroll-margin-top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); font-family: var(--mf-font-heading); font-weight: var(--mf-heading-weight); font-size: 1.35em; line-height: 1.3; } .mf-root .mf-legal__body h3 { margin: 1.6em 0 .5em; font-size: 1.1em; } .mf-root .mf-legal__body p { margin: 0 0 1em; } .mf-root .mf-legal__body ul, .mf-root .mf-legal__body ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; } .mf-root .mf-legal__body li + li { margin-top: .45em; } .mf-root .mf-legal__body li::marker { color: var(--mf-primary); } .mf-root .mf-legal__body a { color: var(--mf-primary); text-decoration: underline; text-underline-offset: 2px; } .mf-root .mf-legal__history { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-legal__history h2 { margin: 0; } .mf-root .mf-legal__history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-legal__history li { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .92em; } .mf-root .mf-legal__hdate { color: var(--mf-text-muted); font-weight: 600; } /* Legal links */ .mf-root .mf-legal-links--inline ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .9em; } .mf-root .mf-legal-links--inline a { color: var(--mf-text-muted); text-decoration: none; } .mf-root .mf-legal-links--inline a:hover, .mf-root .mf-legal-links--inline a:focus-visible, .mf-root .mf-legal-links a[aria-current="page"] { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-legal-links__copy { margin: 10px 0 0; color: var(--mf-text-muted); font-size: .85em; text-align: center; } .mf-root.mf-legal-footer { max-width: none; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mf-border); background: var(--mf-surface-alt); } /* Contact page */ .mf-root .mf-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--mf-gap) * 1.2); min-width: 0; } .mf-root .mf-contact > * { min-width: 0; margin: 0; } .mf-root .mf-contact__email { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: var(--mf-surface); color: var(--mf-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; box-shadow: var(--mf-shadow); } .mf-root .mf-contact__email:hover, .mf-root .mf-contact__email:focus-visible { text-decoration: underline; } .mf-root .mf-contact__cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .mf-root .mf-contact__card { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-contact__card[hidden] { display: none; } .mf-root .mf-contact__card .mf-h4, .mf-root .mf-contact__card p { margin: 0; } .mf-root .mf-contact__card p { font-size: .92em; } .mf-root .mf-contact__card .mf-link { display: inline-flex; gap: 4px; align-items: center; margin-top: 4px; overflow-wrap: anywhere; } .mf-root .mf-contact__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mf-primary-soft); color: var(--mf-primary); } .mf-root .mf-contact__form > .mf-root { padding: 0; } .mf-root .mf-contact__more { display: grid; gap: calc(var(--mf-gap) * 1.2); grid-template-columns: minmax(0, 1fr); align-items: start; } @container (min-width: 820px) { .mf-root .mf-contact__more { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); } .mf-root .mf-contact__company { position: sticky; top: calc(24px + var(--wp-admin--admin-bar--height, 0px)); } .mf-root .mf-contact__legal .mf-help__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; background: none; } .mf-root .mf-contact__legal .mf-help__list > li { border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } } .mf-root .mf-contact__company, .mf-root .mf-contact__legal { display: grid; gap: 10px; } .mf-root .mf-contact__company { padding: 18px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-contact__company .mf-h4, .mf-root .mf-contact__legal .mf-h4, .mf-root .mf-contact__company p { margin: 0; } .mf-root .mf-contact__company address { font-style: normal; line-height: 1.6; } .mf-root .mf-contact__company a { color: var(--mf-primary); overflow-wrap: anywhere; } /* "We updated our terms" */ .mf-root.mf-legal-notice { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99980; width: min(640px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 0; } .mf-root.mf-legal-notice[hidden] { display: none; } .mf-root .mf-legal-notice__inner { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--mf-border); border-left: 4px solid var(--mf-primary); border-radius: var(--mf-radius); background: var(--mf-surface); color: var(--mf-text); box-shadow: 0 12px 40px rgba(0, 0, 0, .16); } .mf-root .mf-legal-notice__inner > svg { flex-shrink: 0; color: var(--mf-primary); } .mf-root .mf-legal-notice__inner p { flex: 1 1 260px; margin: 0; font-size: .93em; line-height: 1.5; } .mf-root .mf-legal-notice__inner a { color: var(--mf-primary); font-weight: 600; } .mf-root .mf-legal-notice__inner form { display: flex; gap: 6px; margin: 0; } @media (max-width: 600px) { .mf-root.mf-legal-notice { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); } } @media print { .mf-root .mf-legal__tools, .mf-root .mf-legal__toc, .mf-root.mf-legal-notice, .mf-root.mf-legal-footer, .mf-root .mf-digi { display: none !important; } .mf-root .mf-legal__layout.has-toc { grid-template-columns: 1fr; } .mf-root .mf-legal__body { max-width: none; } .mf-root .mf-legal__body a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; } } /* Sell wizard: first step for a chosen type (visitors sign up here) */ .mf-root .mf-sell-start { display: grid; gap: 18px; } .mf-root .mf-sell-start__type { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-sell-start__type > span:nth-child(2) { display: grid; flex: 1 1 200px; } .mf-root .mf-sell-start__type .mf-muted { font-size: .88em; } .mf-root .mf-sell-start__account { display: grid; gap: 14px; margin: 6px 0 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--mf-primary) 30%, var(--mf-border)); border-radius: var(--mf-radius); background: color-mix(in srgb, var(--mf-primary) 4%, var(--mf-surface)); } .mf-root .mf-sell-start__account > legend { float: left; width: 100%; margin: 0; padding: 0; } .mf-root .mf-sell-start__account > legend + * { clear: both; } .mf-root .mf-sell-start__account > p { margin: 0; } .mf-root .mf-sell-start__account .mf-field { margin: 0; } .mf-root .mf-sell-start__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .mf-root .mf-sell-start__account .mf-input { width: 100%; } .mf-root .mf-check.has-error { color: var(--mf-danger); } /* Invoices (success fee) */ .mf-root .mf-invoice { display: grid; gap: calc(16px * var(--mf-space)); } .mf-root .mf-invoice__back { margin: 0; } .mf-root .mf-invoice__back .mf-link { display: inline-flex; gap: 6px; align-items: center; } .mf-root .mf-invoice__paper { display: grid; gap: 22px; padding: clamp(20px, 4vw, 36px); } .mf-root .mf-invoice__head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--mf-border); } .mf-root .mf-invoice__from { margin: 0 0 4px; font-family: var(--mf-font-heading); font-size: 1.15em; font-weight: 800; } .mf-root .mf-invoice__line { margin: 0; font-size: .9em; line-height: 1.5; } .mf-root .mf-invoice__meta { display: grid; gap: 8px; justify-items: end; text-align: end; } .mf-root .mf-invoice__title { margin: 0; font-size: clamp(1.2em, 1em + .8cqi, 1.5em); } .mf-root .mf-invoice__facts { display: grid; gap: 14px 24px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); } .mf-root .mf-invoice__facts dt { color: var(--mf-text-muted); font-size: .8em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .mf-root .mf-invoice__facts dd { margin: 4px 0 0; font-weight: 600; } .mf-root .mf-invoice__table { width: 100%; border-collapse: collapse; } .mf-root .mf-invoice__table th, .mf-root .mf-invoice__table td { padding: 12px 0; border-bottom: 1px solid var(--mf-border); text-align: start; vertical-align: top; } .mf-root .mf-invoice__table thead th { color: var(--mf-text-muted); font-size: .8em; letter-spacing: .04em; text-transform: uppercase; } .mf-root .mf-invoice__table tfoot th, .mf-root .mf-invoice__table tfoot td { border-bottom: 0; font-size: 1.1em; } .mf-root .mf-invoice__table .mf-invoice__num { padding-inline-start: 16px; text-align: end; white-space: nowrap; } .mf-root .mf-invoice__footer { margin: 0; font-size: .88em; } .mf-root .mf-invoice__pay { display: grid; gap: 12px; padding: clamp(18px, 3vw, 28px); border-color: color-mix(in srgb, var(--mf-primary) 35%, var(--mf-border)); } .mf-root .mf-invoice__pay .mf-h3 { margin: 0; } @media print { .mf-root .mf-no-print, .mf-root .mf-dash__nav, .mf-root .mf-dash__head { display: none !important; } .mf-root .mf-invoice__paper { border: 0; box-shadow: none; } } /* wp-login.php: our code form inside WordPress's log-in page (no second box). */ body.login .mf-root .mf-auth__form { border: 0; padding: 0; margin-top: 0; box-shadow: none; background: none; } /* Notifications (dashboard tab / [marketforge_notifications]) */ .mf-root .mf-notes .mf-filters { margin-bottom: var(--mf-gap); } .mf-root .mf-notes__list { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 12px); background: var(--mf-surface); list-style: none; overflow: hidden; } .mf-root .mf-note { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 18px; border-top: 1px solid var(--mf-border); } .mf-root .mf-note:first-child { border-top: 0; } .mf-root .mf-note:focus-within { background: var(--mf-surface-alt); } .mf-root .mf-note.is-unread { background: color-mix(in srgb, var(--mf-primary) 5%, var(--mf-surface)); } .mf-root .mf-note__icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--mf-surface-alt); color: var(--mf-text-muted); } .mf-root .mf-note.is-unread .mf-note__icon { background: color-mix(in srgb, var(--mf-primary) 12%, var(--mf-surface)); color: var(--mf-primary); } .mf-root .mf-note__body { display: grid; flex: 1; min-width: 0; gap: 3px; } .mf-root .mf-note__title { color: var(--mf-text); font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; } .mf-root .mf-note.is-unread .mf-note__title { font-weight: 800; } .mf-root .mf-note__title::after { content: ""; position: absolute; inset: 0; } .mf-root .mf-note__title:is(:hover, :focus-visible) { color: var(--mf-primary); text-decoration: underline; text-underline-offset: 3px; } .mf-root .mf-note__text { margin: 0; color: var(--mf-text-muted); font-size: .9375em; line-height: 1.5; overflow-wrap: anywhere; } .mf-root .mf-note__time { color: var(--mf-text-muted); font-size: .8125em; } .mf-root .mf-note__dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--mf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mf-accent) 45%, transparent); } /* Dashboard: "Get started" checklist */ .mf-root .mf-onboard__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; } .mf-root .mf-onboard__head p { margin: 4px 0 0; } .mf-root .mf-onboard__head form { margin: 0; } .mf-root .mf-onboard__progress { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; } .mf-root .mf-onboard__bar { position: relative; flex: 1; height: 8px; border-radius: 99px; background: var(--mf-surface-alt); overflow: hidden; } .mf-root .mf-onboard__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--mf-primary); box-shadow: inset -4px 0 0 var(--mf-accent); } .mf-root .mf-onboard__count { color: var(--mf-text-muted); font-size: .875em; font-weight: 600; white-space: nowrap; } .mf-root .mf-onboard__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .mf-root .mf-onboard__step { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 0; border-top: 1px solid var(--mf-border); } .mf-root .mf-onboard__step:first-child { border-top: 0; } .mf-root .mf-onboard__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface)); color: var(--mf-primary); } .mf-root .mf-onboard__step.is-done .mf-onboard__icon { background: var(--mf-success); color: #fff; } .mf-root .mf-onboard__body { flex: 1 1 220px; min-width: 0; } .mf-root .mf-onboard__label { margin: 0; color: var(--mf-text); font-weight: 700; } .mf-root .mf-onboard__step.is-done .mf-onboard__label { color: var(--mf-text-muted); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--mf-border); } .mf-root .mf-onboard__text { margin: 2px 0 0; color: var(--mf-text-muted); font-size: .9375em; } .mf-root .mf-onboard__step form { margin: 0; } /* Dashboard: two-step log-in with an authenticator app */ .mf-root .mf-twofa__state { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; } .mf-root .mf-twofa__state.is-on { color: var(--mf-success); } .mf-root .mf-twofa__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; } .mf-root .mf-twofa__more summary { color: var(--mf-primary); font-weight: 600; cursor: pointer; } .mf-root .mf-twofa__more[open] summary { margin-bottom: 10px; } .mf-root .mf-twofa__form { display: grid; gap: 10px; max-width: 320px; margin: 0; } .mf-root .mf-twofa__steps { margin: 0 0 16px; padding-left: 1.25em; color: var(--mf-text-muted); } .mf-root .mf-twofa__steps li { margin: 4px 0; } .mf-root .mf-twofa__setup { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 12px; } .mf-root .mf-twofa__qr { flex: none; padding: 8px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: #fff; line-height: 0; } .mf-root .mf-twofa__qr svg { display: block; width: 180px; height: 180px; } .mf-root .mf-twofa__key { flex: 1 1 240px; min-width: 0; } .mf-root .mf-twofa__key p { margin: 0 0 8px; } .mf-root .mf-twofa__secret { font-size: 1.05em; letter-spacing: .06em; overflow-wrap: anywhere; } .mf-root .mf-twofa__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; margin: 10px 0 12px; padding: 0; list-style: none; } .mf-root .mf-twofa__list code { font-size: 1em; letter-spacing: .04em; } /* Compare listings */ .mf-root .mf-compare-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--mf-text-muted); font-size: .8125em; font-weight: 600; text-decoration: none; } .mf-root .mf-compare-btn--card { margin-inline-start: auto; padding: 4px 8px; border: 1px solid var(--mf-border); border-radius: 99px; background: var(--mf-surface); } .mf-root .mf-compare-btn:is(:hover, :focus-visible) { color: var(--mf-primary); border-color: var(--mf-primary); } .mf-root .mf-compare-btn.is-on { border-color: var(--mf-primary); background: color-mix(in srgb, var(--mf-primary) 10%, var(--mf-surface)); color: var(--mf-primary); } .mf-root .mf-compare-btn--page { margin-top: 8px; font-size: 1em; } .mf-root .mf-compare-btn--page.is-on { box-shadow: inset 0 0 0 1px var(--mf-primary); } .mf-root.mf-compare-root { position: fixed; z-index: 9990; right: 0; bottom: 16px; left: 0; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; } .mf-root .mf-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 640px; padding: 10px 12px 10px 16px; border: 1px solid var(--mf-border); border-radius: 16px; background: var(--mf-surface); box-shadow: 0 18px 40px -12px rgb(15 23 42 / .35); pointer-events: auto; } .mf-root .mf-compare-bar[hidden] { display: none; } .mf-root .mf-compare-bar__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--mf-primary); color: var(--mf-on-primary, #fff); box-shadow: inset 3px 0 0 var(--mf-accent); } .mf-root .mf-compare-bar__text { flex: 1 1 180px; margin: 0; color: var(--mf-text); font-size: .9375em; font-weight: 600; } @media (min-width: 560px) { .mf-root .mf-compare-bar { flex-wrap: nowrap; } .mf-root .mf-compare-bar__text { white-space: nowrap; } } .mf-root .mf-compare__scroll { position: relative; overflow-x: auto; border: 1px solid var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface); } .mf-root .mf-compare__scroll:focus-visible { box-shadow: var(--mf-focus); outline: none; } .mf-root .mf-compare__table { width: 100%; min-width: calc(160px + var(--mf-compare-cols, 2) * 190px); border-collapse: collapse; font-size: .9375em; } .mf-root .mf-compare__table th, .mf-root .mf-compare__table td { padding: 12px 14px; border-top: 1px solid var(--mf-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; } .mf-root .mf-compare__table thead th, .mf-root .mf-compare__table thead td { border-top: 0; } .mf-root .mf-compare__table tbody th { position: sticky; left: 0; z-index: 1; width: 160px; background: var(--mf-surface-alt); color: var(--mf-text-muted); font-weight: 600; } .mf-root .mf-compare__table tbody tr:hover td { background: color-mix(in srgb, var(--mf-primary) 3%, var(--mf-surface)); } .mf-root .mf-compare__corner { position: sticky; left: 0; z-index: 1; background: var(--mf-surface); } .mf-root .mf-compare__head { width: calc((100% - 160px) / var(--mf-compare-cols, 2)); } .mf-root .mf-compare__media { display: block; aspect-ratio: 16 / 9; max-height: 150px; margin-bottom: 10px; border-radius: calc(var(--mf-radius) * .75); background: var(--mf-surface-alt); overflow: hidden; } .mf-root .mf-compare__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-compare__ph { display: grid; width: 100%; height: 100%; place-items: center; color: var(--mf-text-muted); } .mf-root .mf-compare__title { display: block; color: var(--mf-text); font-weight: 700; line-height: 1.35; text-decoration: none; } .mf-root .mf-compare__title:is(:hover, :focus-visible) { color: var(--mf-primary); text-decoration: underline; } .mf-root .mf-compare__remove { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--mf-text-muted); font-size: .8125em; font-weight: 600; text-decoration: none; } .mf-root .mf-compare__remove:is(:hover, :focus-visible) { color: var(--mf-danger, #dc2626); } /* ====================================================================== Listing artwork per page design (no screenshot yet): templates/listing/art.php Decorative; sizes in em so cards and listing pages share one design. ====================================================================== */ .mf-root .mf-lcard__media { container-type: inline-size; } .mf-root .mf-art { --art-c: var(--mf-type-color, var(--mf-type-accent, var(--mf-primary))); --art-ink: var(--mf-secondary); --art-on: var(--mf-on-primary, #fff); position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .55em; padding: 1.1em; overflow: hidden; color: var(--art-on); font-size: clamp(11px, 4.2cqi, 15px); line-height: 1.2; text-align: center; isolation: isolate; } .mf-root .mf-art--hero { font-size: clamp(14px, 3.2cqi, 26px); } .mf-root .mf-art svg { display: block; } .mf-root .mf-art__title { display: inline-flex; align-items: center; gap: .4em; max-width: 100%; overflow: hidden; font-family: var(--mf-font-heading); font-size: 1.15em; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-art__chip { display: inline-flex; align-items: baseline; gap: .4em; padding: .35em .75em; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; background: color-mix(in srgb, #000 22%, transparent); backdrop-filter: blur(4px); font-size: .85em; white-space: nowrap; } .mf-root .mf-art__chip strong { font-size: 1.1em; font-variant-numeric: tabular-nums; } .mf-root .mf-art__chip small { opacity: .8; font-size: .85em; } /* Website: a browser window with a traffic chart. */ .mf-root .mf-art--website { background: linear-gradient(160deg, color-mix(in srgb, var(--art-c) 14%, var(--mf-surface)), color-mix(in srgb, var(--art-c) 4%, var(--mf-surface))); color: var(--mf-text); } .mf-root .mf-art--website .mf-art__win { width: min(19em, 92%); border: 1px solid color-mix(in srgb, var(--art-c) 18%, var(--mf-border)); border-radius: .7em; background: var(--mf-surface); box-shadow: 0 1.2em 2.4em -1.2em color-mix(in srgb, var(--art-ink) 45%, transparent); overflow: hidden; } .mf-root .mf-art__bar { display: flex; align-items: center; gap: .3em; padding: .45em .6em; border-bottom: 1px solid var(--mf-border); background: var(--mf-surface-alt); } .mf-root .mf-art__bar > i { width: .45em; height: .45em; border-radius: 50%; background: color-mix(in srgb, var(--art-ink) 22%, transparent); } .mf-root .mf-art__bar > i:first-child { background: var(--mf-accent); } .mf-root .mf-art__url { flex: 1; margin-left: .4em; padding: .15em .6em; overflow: hidden; border-radius: 999px; background: var(--mf-surface); color: var(--mf-text-muted); font-size: .72em; text-align: start; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-art__page { display: grid; grid-template-columns: 1.1fr 1fr; gap: .8em; align-items: end; padding: .8em; } .mf-root .mf-art__lines { display: grid; gap: .35em; } .mf-root .mf-art__lines b { width: 80%; height: .7em; border-radius: .3em; background: var(--art-ink); } .mf-root .mf-art__lines s, .mf-root .mf-art__bubble s, .mf-root .mf-art__file s { display: block; height: .38em; border-radius: .2em; background: color-mix(in srgb, currentColor 16%, transparent); } .mf-root .mf-art__lines .is-short, .mf-root .mf-art__bubble .is-short, .mf-root .mf-art__file .is-short { width: 60%; } .mf-root .mf-art__bars { display: flex; align-items: flex-end; gap: .25em; height: 3.4em; } .mf-root .mf-art__bars i { flex: 1; height: var(--h); border-radius: .2em .2em 0 0; background: color-mix(in srgb, var(--art-c) 70%, var(--mf-surface)); } .mf-root .mf-art__bars i:last-child { background: var(--mf-accent); } .mf-root .mf-art--website .mf-art__chip { background: var(--art-ink); color: var(--art-on); border-color: transparent; } /* SaaS: a revenue dashboard with a growth line. */ .mf-root .mf-art--saas { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--art-c) 45%, transparent), transparent 60%), var(--art-ink); } .mf-root .mf-art__panel { display: grid; gap: .4em; width: min(17em, 90%); padding: .9em 1em; border: 1px solid color-mix(in srgb, var(--art-on) 14%, transparent); border-radius: .8em; background: color-mix(in srgb, var(--art-on) 6%, transparent); text-align: start; } .mf-root .mf-art__panel-head { display: flex; align-items: center; gap: .45em; margin: 0; font-size: .8em; opacity: .85; } .mf-root .mf-art__panel-head span { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: .45em; background: var(--art-c); } .mf-root .mf-art__panel-head em { overflow: hidden; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .mf-root .mf-art__big { display: grid; margin: 0; } .mf-root .mf-art__big strong { font-family: var(--mf-font-heading); font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .mf-root .mf-art__big small { opacity: .7; font-size: .75em; } .mf-root .mf-art__spark { width: 100%; height: 2.6em; } .mf-root .mf-art__spark-area { fill: color-mix(in srgb, var(--mf-accent) 22%, transparent); } .mf-root .mf-art__spark-line { fill: none; stroke: var(--mf-accent); stroke-width: 2; vector-effect: non-scaling-stroke; } .mf-root .mf-art__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; } .mf-root .mf-art__kpis i { height: .9em; border-radius: .3em; background: color-mix(in srgb, var(--art-on) 12%, transparent); } /* App: an app icon with a star rating. */ .mf-root .mf-art--app { background: radial-gradient(60% 70% at 50% 35%, color-mix(in srgb, var(--art-on) 22%, transparent), transparent 70%), linear-gradient(150deg, var(--art-c), color-mix(in srgb, var(--art-c) 55%, var(--art-ink))); } .mf-root .mf-art__appicon { display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 1.15em; background: var(--mf-surface); color: var(--art-c); box-shadow: 0 1em 2em -.8em color-mix(in srgb, var(--art-ink) 70%, transparent), inset .3em 0 0 var(--mf-accent); } .mf-root .mf-art__stars { display: flex; gap: .15em; color: var(--mf-accent); } .mf-root .mf-art__stars svg { width: 1.05em; height: 1.05em; } /* Social: a profile avatar with the handle. */ .mf-root .mf-art--social { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--art-on) 18%, transparent), transparent 55%), linear-gradient(135deg, var(--art-c), color-mix(in srgb, var(--art-c) 45%, var(--art-ink))); } .mf-root .mf-art__avatar { display: grid; place-items: center; width: 4.4em; height: 4.4em; border: .25em solid var(--mf-accent); border-radius: 50%; background: color-mix(in srgb, var(--art-ink) 30%, transparent); box-shadow: 0 0 0 .35em color-mix(in srgb, var(--art-on) 18%, transparent); } /* Channel: a video player. */ .mf-root .mf-art--video_channel { background: var(--art-ink); } .mf-root .mf-art__player { position: relative; display: grid; place-items: center; width: min(16em, 88%); aspect-ratio: 16 / 8; border-radius: .7em; background: radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--art-c) 85%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--art-c) 60%, var(--art-ink)), var(--art-ink)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--art-on) 12%, transparent); } .mf-root .mf-art__play { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--mf-accent); color: var(--art-ink); box-shadow: 0 .6em 1.4em -.4em color-mix(in srgb, var(--mf-accent) 70%, transparent); } .mf-root .mf-art__play svg { width: 1.3em; height: 1.3em; margin-left: .15em; } .mf-root .mf-art__progress { position: absolute; right: .7em; bottom: .6em; left: .7em; height: .25em; border-radius: 99px; background: color-mix(in srgb, var(--art-on) 25%, transparent); } .mf-root .mf-art__progress i { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--mf-accent); } /* Community: chat bubbles and a crowd. */ .mf-root .mf-art--community { background: linear-gradient(160deg, color-mix(in srgb, var(--art-c) 18%, var(--mf-surface)), color-mix(in srgb, var(--mf-accent) 12%, var(--mf-surface))); color: var(--mf-text); } .mf-root .mf-art__chat { display: grid; gap: .4em; width: min(14em, 80%); } .mf-root .mf-art__bubble { display: grid; gap: .3em; width: 72%; padding: .55em .7em; border-radius: .8em .8em .8em .2em; background: var(--mf-surface); box-shadow: 0 .4em 1em -.6em color-mix(in srgb, var(--art-ink) 40%, transparent); } .mf-root .mf-art__bubble.is-me { justify-self: end; width: 55%; border-radius: .8em .8em .2em .8em; background: var(--art-c); color: var(--art-on); } .mf-root .mf-art__crowd { display: flex; align-items: center; } .mf-root .mf-art__crowd i { width: 1.8em; height: 1.8em; margin-left: -.45em; border: .15em solid var(--mf-surface); border-radius: 50%; background: var(--art-c); } .mf-root .mf-art__crowd i:first-child { margin-left: 0; } .mf-root .mf-art__crowd i:nth-child(2) { background: var(--mf-accent); } .mf-root .mf-art__crowd i:nth-child(3) { background: var(--art-ink); } .mf-root .mf-art__crowd i:nth-child(4) { background: color-mix(in srgb, var(--art-c) 55%, var(--mf-surface)); } .mf-root .mf-art__crowd span { display: inline-flex; align-items: center; gap: .35em; margin-left: .6em; font-weight: 800; } /* Game account: an emblem with a level badge. */ .mf-root .mf-art--game_account { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--art-c) 14%, transparent) 0 .6em, transparent .6em 1.6em), radial-gradient(70% 80% at 50% 40%, color-mix(in srgb, var(--art-c) 55%, transparent), transparent 70%), var(--art-ink); } .mf-root .mf-art__emblem { display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 1em; background: linear-gradient(145deg, var(--art-c), color-mix(in srgb, var(--art-c) 50%, var(--art-ink))); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--mf-accent) 60%, transparent), 0 0 2.2em color-mix(in srgb, var(--art-c) 60%, transparent); } .mf-root .mf-art--game_account .mf-art__title { letter-spacing: .06em; text-transform: uppercase; } .mf-root .mf-art__level { display: inline-flex; align-items: center; gap: .5em; padding: .3em .7em; border-radius: .4em; background: var(--mf-accent); color: var(--art-ink); font-weight: 800; } .mf-root .mf-art__level small { opacity: .75; font-size: .75em; text-transform: uppercase; } /* In-game items: inventory slots with one rare item. */ .mf-root .mf-art--game_items { background: radial-gradient(60% 70% at 50% 35%, color-mix(in srgb, var(--mf-accent) 25%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--art-c) 40%, var(--art-ink)), var(--art-ink)); } .mf-root .mf-art__slots { display: grid; grid-template-columns: repeat(4, 2.3em); gap: .35em; } .mf-root .mf-art__slots i { display: grid; place-items: center; height: 2.3em; border: 1px solid color-mix(in srgb, var(--art-on) 20%, transparent); border-radius: .45em; background: color-mix(in srgb, var(--art-on) 7%, transparent); } .mf-root .mf-art__slots .is-rare { border-color: var(--mf-accent); background: color-mix(in srgb, var(--mf-accent) 25%, transparent); color: var(--mf-accent); box-shadow: 0 0 1em color-mix(in srgb, var(--mf-accent) 55%, transparent); } /* Digital product: a stack of files. */ .mf-root .mf-art--digital_product { background: linear-gradient(160deg, color-mix(in srgb, var(--mf-accent) 16%, var(--mf-surface)), color-mix(in srgb, var(--art-c) 12%, var(--mf-surface))); color: var(--mf-text); } .mf-root .mf-art__stack { position: relative; width: 7.5em; height: 5.2em; } .mf-root .mf-art__stack > i, .mf-root .mf-art__file { position: absolute; inset: 0; border-radius: .6em; background: var(--mf-surface); box-shadow: 0 .6em 1.4em -.8em color-mix(in srgb, var(--art-ink) 50%, transparent); } .mf-root .mf-art__stack > i:first-child { transform: rotate(-9deg) translate(-.6em, .2em); background: color-mix(in srgb, var(--art-c) 30%, var(--mf-surface)); } .mf-root .mf-art__stack > i:nth-child(2) { transform: rotate(6deg) translate(.5em, 0); background: color-mix(in srgb, var(--mf-accent) 35%, var(--mf-surface)); } .mf-root .mf-art__file { display: grid; align-content: center; gap: .35em; padding: .7em .9em; border-left: .3em solid var(--mf-accent); color: var(--art-c); text-align: start; } .mf-root .mf-art__file svg { margin-bottom: .15em; } .mf-root .mf-art--digital_product .mf-art__chip, .mf-root .mf-art--community .mf-art__chip { background: var(--art-ink); color: var(--art-on); border-color: transparent; } /* General: the type's icon. */ .mf-root .mf-art--generic { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--art-on) 18%, transparent), transparent 60%), linear-gradient(135deg, var(--art-c), color-mix(in srgb, var(--art-c) 55%, var(--art-ink))); } .mf-root .mf-art--generic .mf-art__emblem { background: color-mix(in srgb, var(--art-on) 16%, transparent); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--art-on) 22%, transparent); } /* On the listing page. */ .mf-root .mf-lp-hero--art { width: 100%; aspect-ratio: 16 / 8; min-height: 0; padding: 0; background: none; } @media (max-width: 640px) { .mf-root .mf-lp-hero--art { aspect-ratio: 5 / 4; } } .mf-root .mf-lp-hero--art::after { display: none; } .mf-root .mf-lp-hero--art > .mf-art { position: absolute; z-index: 0; } .mf-root .mf-lp-hero--art > .mf-lp__ext { position: absolute; z-index: 1; bottom: 1em; left: 50%; padding: 6px 14px; border-radius: var(--mf-radius-button); background: var(--mf-surface); color: var(--mf-text); transform: translateX(-50%); box-shadow: var(--mf-shadow); } .mf-root .mf-lp-hero--video_channel .mf-lp-hero__cover { display: grid; place-items: center; background: radial-gradient(70% 120% at 30% 10%, color-mix(in srgb, var(--mf-type-color, var(--mf-primary)) 80%, transparent), transparent 70%), var(--mf-secondary); } .mf-root .mf-lp-hero__play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mf-accent); color: var(--mf-secondary); } .mf-root .mf-lp-hero--community .mf-lp-hero__cover { display: flex; align-items: center; justify-content: flex-end; padding-right: 6%; background: linear-gradient(120deg, color-mix(in srgb, var(--mf-type-color, var(--mf-primary)) 85%, var(--mf-secondary)), color-mix(in srgb, var(--mf-accent) 55%, var(--mf-type-color, var(--mf-primary)))); } .mf-root .mf-lp-hero__crowd { display: flex; } .mf-root .mf-lp-hero__crowd i { width: 40px; height: 40px; margin-left: -12px; border: 3px solid color-mix(in srgb, #fff 80%, transparent); border-radius: 50%; background: var(--mf-secondary); } .mf-root .mf-lp-hero__crowd i:nth-child(2n) { background: var(--mf-accent); } .mf-root .mf-lp-hero__crowd i:nth-child(3n) { background: var(--mf-surface); } @media (prefers-reduced-motion: no-preference) { .mf-root .mf-lcard:hover .mf-art__appicon, .mf-root .mf-lcard:hover .mf-art__emblem, .mf-root .mf-lcard:hover .mf-art__play { transform: translateY(-2px); transition: transform .25s ease; } } /* Cards: keep the artwork clear of the badges and the sale-format pill. */ .mf-root .mf-art--card { padding: 2.4em 1em 2.6em; } .mf-root .mf-verify__note { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--mf-accent); border-radius: 0 8px 8px 0; background: var(--mf-accent-soft); color: var(--mf-text); font-size: .9375em; } .mf-root .mf-verify__note strong { margin-right: 4px; } /* App store badges (Site pages → Mobile app). */ .mf-root .mf-stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .mf-root .mf-stores li { margin: 0; } .mf-root .mf-store { position: relative; display: inline-flex; gap: 10px; align-items: center; min-width: 158px; padding: 8px 16px 8px 12px; border: 1px solid color-mix(in srgb, #fff 18%, var(--mf-secondary)); border-radius: 12px; background: var(--mf-secondary); color: #fff; line-height: 1.1; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } .mf-root a.mf-store:is(:hover, :focus-visible) { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgb(15 23 42 / .6); } .mf-root a.mf-store:focus-visible { outline: none; box-shadow: var(--mf-focus); } .mf-root .mf-store__mark { flex: 0 0 auto; } .mf-root .mf-store__text { display: grid; gap: 2px; text-align: start; } .mf-root .mf-store__text small { color: rgb(255 255 255 / .78); font-size: .68rem; font-weight: 600; letter-spacing: .02em; } .mf-root .mf-store__text strong { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; } .mf-root .mf-store.is-soon::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border: 2px solid var(--mf-surface); border-radius: 50%; background: var(--mf-accent); } .mf-root .mf-stores--sm .mf-store { min-width: 0; padding: 6px 12px 6px 10px; border-radius: 10px; } .mf-root .mf-stores--sm .mf-store__mark { width: 18px; height: 18px; } .mf-root .mf-stores--sm .mf-store__text strong { font-size: .9rem; } .mf-root .mf-stores--sm .mf-store__text small { font-size: .62rem; } /* Example content (Marketplace → Example content): always labelled. */ .mf-root .mf-lbadge--example { background: color-mix(in srgb, var(--mf-secondary) 88%, transparent); color: #fff; } .mf-root .mf-example-tag { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 2px 8px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-surface-alt); color: var(--mf-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: middle; white-space: nowrap; } .mf-root .mf-req__example { font-size: .85rem; } /* Sign in with Google: Google's button style (white, "G" mark, dark text). */ .mf-root .mf-gsi { margin: 4px 0 18px; } .mf-root .mf-gsi__btn { display: flex; gap: 12px; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid #dadce0; border-radius: var(--mf-radius-button); background: #fff; color: #1f1f1f; font-weight: 600; text-decoration: none; transition: background .15s, box-shadow .15s; } .mf-root .mf-gsi__btn:hover { background: #f8faff; box-shadow: 0 1px 3px rgb(60 64 67 / .2); color: #1f1f1f; } .mf-root .mf-gsi__btn:focus-visible { outline: none; box-shadow: var(--mf-focus); } .mf-root .mf-gsi__btn--inline { display: inline-flex; width: auto; } .mf-root .mf-gsi__g { flex: 0 0 auto; } .mf-root .mf-gsi__note { margin: 8px 0 0; color: var(--mf-text-muted); font-size: .8rem; text-align: center; } .mf-root .mf-gsi__or { display: flex; gap: 12px; align-items: center; margin: 16px 0 0; color: var(--mf-text-muted); font-size: .82rem; } .mf-root .mf-gsi__or::before, .mf-root .mf-gsi__or::after { content: ""; flex: 1; height: 1px; background: var(--mf-border); } .mf-root .mf-gsi-status { display: flex; gap: 10px; align-items: center; } /* Profile photo (Dashboard → Settings) */ .mf-root .mf-photo { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px; margin-bottom: 20px; border: 1px solid var(--mf-border); border-radius: var(--mf-radius, 10px); background: var(--mf-surface-alt); } .mf-root .mf-photo:focus { outline: none; } .mf-root .mf-photo__img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--mf-surface); box-shadow: 0 0 0 3px var(--mf-surface), 0 0 0 4px var(--mf-border); } .mf-root .mf-photo__img { display: grid; place-items: center; } .mf-root .mf-photo__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .mf-root .mf-photo__img img[hidden], .mf-root .mf-photo__initial[hidden] { display: none; } .mf-root .mf-photo__initial { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--mf-primary), color-mix(in srgb, var(--mf-primary) 55%, var(--mf-accent))); color: var(--mf-on-primary); font: 800 2em/1 var(--mf-font-heading); } .mf-root .mf-photo__body { display: grid; flex: 1 1 240px; gap: 6px; min-width: 0; } .mf-root .mf-photo__title { margin: 0; font-weight: 700; } .mf-root .mf-photo__body .mf-help { margin: 0; } .mf-root .mf-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mf-root .mf-photo__actions form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .mf-root .mf-photo__pick { cursor: pointer; } .mf-root .mf-photo__pick:focus-within { box-shadow: var(--mf-focus); } /* Sell wizard — where the ownership code is checked. */ .mf-root .mf-verify__target { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--mf-border); border-radius: var(--mf-radius); background: var(--mf-surface-alt); } .mf-root .mf-verify__target-line { display: flex; gap: 8px; align-items: center; margin: 0; overflow-wrap: anywhere; } .mf-root .mf-verify__target-line .mf-icon { flex-shrink: 0; color: var(--mf-primary); } .mf-root .mf-verify__target-edit summary { color: var(--mf-primary); font-size: .9em; font-weight: 600; cursor: pointer; } .mf-root .mf-verify__target-edit[open] summary { margin-bottom: 8px; } .mf-root .mf-verify__target-edit .mf-field { margin: 0; }