/* Landing hero still + three-step argument + walkthrough map placement. * Owns only the surfaces rewritten by task 130. Does not touch pricing. */ /* --- hero: abstract still that dissolves into the page ------------------- */ .mfo-open-art { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: center; } .mfo-hero-still { display: block; width: 100%; max-width: 100%; height: auto; /* The capture is 1800x900. A declared 4/3 box cropped a third of it. */ aspect-ratio: 2 / 1; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; /* Dissolve every edge into the page in both themes. Mask, not a painted * overlay, so light and dark backgrounds both read clean. */ -webkit-mask-image: radial-gradient( ellipse 72% 68% at 50% 48%, #000 42%, transparent 78% ); mask-image: radial-gradient( ellipse 72% 68% at 50% 48%, #000 42%, transparent 78% ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Soften the two-column hero when the still is an image, not a live map */ .mfo-open-copy .mfo-claim { margin-bottom: 0; } /* --- argument: one section, three short steps ---------------------------- */ .mfo-easy { padding: clamp(2.25rem, 6vh, 4rem) 0; border-top: 1px solid var(--line); } .mfo-easy-title { font-family: var(--font-display); font-weight: 560; font-size: clamp(1.85rem, 4.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 0.45rem; max-width: 22ch; overflow-wrap: anywhere; } .mfo-easy-lede { margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); color: var(--muted); font-size: 1.05rem; line-height: 1.55; max-width: var(--measure); } .mfo-easy-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--rule-heavy); max-width: 52rem; } .mfo-easy-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem 1.1rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--line); } .mfo-easy-mark { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--signal); line-height: 1.4; } .mfo-easy-text { font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.45; color: var(--ink); font-weight: 550; overflow-wrap: anywhere; } .mfo-easy-actions { margin-top: clamp(1.35rem, 3vw, 1.85rem); } .mfo-easy-actions .mfo-cta-sell { display: inline-flex; } .mfo-open-actions .mfo-cta-sell { display: inline-flex; } /* Align the new section with the hero column edge (layout checker) */ .mfo-easy-title, .mfo-easy-lede, .mfo-easy-steps { margin-inline: 0; } /* --- walkthrough map: live MapLibre, one scroll past the hero ------------ */ .mfo-tour-map { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; } /* Keep the interactive map sized for MapLibre (needs a real height). * Reuse the feathered-edge rules from portal.css on .landing-map-wrap. */ .mfo-tour-map .landing-map-wrap { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; } .mfo-tour-map .landing-picker-status { max-width: 100%; } @media (max-width: 900px) { .mfo-open-art { order: 2; } .mfo-hero-still { aspect-ratio: 3 / 2; -webkit-mask-image: radial-gradient( ellipse 78% 72% at 50% 45%, #000 38%, transparent 80% ); mask-image: radial-gradient( ellipse 78% 72% at 50% 45%, #000 38%, transparent 80% ); } .mfo-tour-map .landing-map-wrap { aspect-ratio: 4 / 3; } } @media (max-width: 460px) { .mfo-easy-actions .mfo-cta-sell, .mfo-open-actions .mfo-cta-sell { width: 100%; justify-content: center; } .mfo-easy-step { gap: 0.7rem; padding: 0.85rem 0; } } /* One still per theme. The toggle writes data-theme on ; when the visitor has made no choice, prefers-color-scheme decides. Both paths, or the hero shows a light map on a dark page. */ .mfo-hero-still.is-dark { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .mfo-hero-still.is-light { display: none; } html:not([data-theme="light"]) .mfo-hero-still.is-dark { display: block; } } html[data-theme="dark"] .mfo-hero-still.is-light { display: none; } html[data-theme="dark"] .mfo-hero-still.is-dark { display: block; } html[data-theme="light"] .mfo-hero-still.is-light { display: block; } html[data-theme="light"] .mfo-hero-still.is-dark { display: none; }