/* MyRoomiz — Airbnb-inspired landing page Font: Funnel Display, loaded via Google Fonts in index.html */ :root { --brand: #FF6A2C; --brand-soft: #FFF1E8; --brand-deep: #E54E0F; --ink: #0F1216; --ink-2: #1A1F26; --muted: #5B6571; --muted-2: #8A929C; --line: #E7E9ED; --bg: #FFFFFF; --bg-soft: #F6F7F9; --bg-warm: #FBF6F2; --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.04), 0 1px 1px rgba(15, 18, 22, 0.03); --shadow-md: 0 8px 24px -8px rgba(15, 18, 22, 0.10), 0 2px 6px rgba(15, 18, 22, 0.04); --shadow-lg: 0 24px 48px -16px rgba(15, 18, 22, 0.18); --shadow-pill: 0 3px 12px rgba(15,18,22,0.08), 0 1px 2px rgba(15,18,22,0.06); --radius: 14px; --radius-lg: 22px; } * { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; width: 0; height: 0; } [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Funnel Display', system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5 { font-family: 'Funnel Display', system-ui, sans-serif; margin: 0; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); text-wrap: balance; } p { margin: 0; color: var(--muted); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; display: block; } .container { width: 100%; margin: 0 auto; padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); } @media (max-width: 1024px) { .container { padding-left: 20px; padding-right: 20px; } } @media (max-width: 600px) { .container { padding-left: 16px; padding-right: 16px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; font-family: 'Funnel Display', sans-serif; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: white; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--brand) 70%, transparent); } .btn-primary:hover { background: var(--brand-deep); } .btn-outline { background: white; color: var(--ink); border-color: var(--line); } .btn-outline:hover { border-color: var(--ink); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost.dark { color: white; border-color: rgba(255,255,255,0.35); } .btn-ghost.dark:hover { background: rgba(255,255,255,0.12); border-color: #fff; } .btn-lg { height: 52px; padding: 0 28px; font-size: 15.5px; } /* ============ Top bar (Airbnb-style condensed search pill in the nav) ============ */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; } .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .logo img { height: 28px; width: auto; } .search-widget { display: flex; align-items: center; flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; position: relative; } .sw-fields { display: flex; align-items: center; gap: 10px; width: 100%; } .sw-trigger { display: none; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); text-align: left; } .sw-trigger svg { width: 17px; height: 17px; color: var(--muted-2); flex-shrink: 0; } .sw-trigger span { font-size: 14px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-field-wrap { position: relative; flex: 1; min-width: 0; } .sw-field-wrap.sw-filters-wrap { flex: none; } .sw-field { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: white; transition: border-color .15s ease; } .sw-field:focus-within { border-color: var(--ink); } .sw-field svg { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; } .sw-field input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; } .sw-field input::placeholder { color: var(--muted-2); } .sw-filters { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); font-weight: 600; font-size: 14px; flex-shrink: 0; transition: border-color .15s ease; } .sw-filters:hover { border-color: var(--ink); } .sw-filters svg { width: 16px; height: 16px; } .sw-filters.has-active { border-color: var(--ink); background: var(--brand-soft); } .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: white; font-size: 11px; font-weight: 700; } .sw-dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: white; border: 1px solid var(--line); border-radius: 16px; padding: 10px; z-index: 80; max-height: 340px; overflow-y: auto; } .sw-dd-section { padding: 6px 4px; } .sw-dd-section + .sw-dd-section { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; } .sw-dd-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 4px 10px 6px; } .sw-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; border: 0; background: none; font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer; } .sw-dd-item:hover { background: var(--bg-soft); } .sw-dd-item svg { width: 15px; height: 15px; color: var(--muted-2); flex-shrink: 0; } .filters-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg, 0 20px 40px -12px rgba(15,18,22,0.18)); padding: 20px; z-index: 80; } .filters-panel h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 10px; } .filters-panel h4:not(:first-child) { margin-top: 18px; } .filter-check-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 14px; color: var(--ink-2); cursor: pointer; } .filter-check-row input { accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; } .filter-price-row { display: flex; align-items: center; gap: 10px; } .filter-price-row input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 13px; outline: none; } .filter-price-row input:focus { border-color: var(--ink); } .filter-actions { display: flex; gap: 10px; margin-top: 18px; } .filter-actions .btn { flex: 1; height: 40px; padding: 0; font-size: 13px; } .sw-submit { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--brand); color: white; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--brand) 70%, transparent); transition: background .15s ease; } .sw-submit:hover { background: var(--brand-deep); } .sw-submit svg { width: 16px; height: 16px; } .topbar-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Minimal wizard header (list-property / list-roommate) */ .wz-minimal-nav .search-widget, .wz-minimal-nav .list-link, .wz-minimal-nav .globe-btn, .wz-minimal-nav .user-pill, .wz-minimal-nav .account-cluster { display: none !important; } .wz-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; } .wz-header-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: white; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); cursor: pointer; transition: border-color .15s ease; } .wz-header-btn:hover { border-color: var(--ink); } .wz-help-mark { display: none; font-weight: 800; } @media (max-width: 600px) { .wz-help-btn { width: 38px; height: 38px; padding: 0; flex-shrink: 0; } .wz-help-label { display: none; } .wz-help-mark { display: inline-flex; align-items: center; justify-content: center; } #wzSaveExitBtn { padding: 0 14px; font-size: 13px; } } .list-link { font-size: 14.5px; font-weight: 600; padding: 0 14px; height: 44px; display: inline-flex; align-items: center; border-radius: 999px; } .list-link:hover { background: var(--bg-soft); } .globe-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .globe-btn:hover { background: var(--bg-soft); } .globe-btn svg { width: 20px; height: 20px; } .user-pill { display: flex; align-items: center; gap: 10px; height: 46px; padding: 4px 6px 4px 16px; border: 1px solid var(--line); border-radius: 999px; background: white; cursor: pointer; font-family: inherit; } .user-pill span { font-size: 14px; font-weight: 600; } .user-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: white; display: grid; place-items: center; font-family: 'Funnel Display'; font-weight: 700; font-size: 13px; } .user-avatar svg { width: 16px; height: 16px; } /* ============ Account cluster (logged-in header state) ============ */ .account-cluster { position: relative; display: flex; align-items: center; gap: 10px; } .account-avatar { width: 44px; height: 44px; border-radius: 999px; background: var(--brand); color: white; border: 0; cursor: pointer; display: grid; place-items: center; font-family: 'Funnel Display'; font-weight: 700; font-size: 15px; overflow: hidden; } .account-avatar-img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; } .account-menu-btn { width: 44px; height: 44px; border-radius: 999px; background: white; color: var(--ink); border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; } .account-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 260px; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; } .ad-header { display: flex; align-items: center; gap: 12px; padding: 12px 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; } .ad-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--brand); color: white; display: grid; place-items: center; flex-shrink: 0; font-family: 'Funnel Display'; font-weight: 700; font-size: 14px; overflow: hidden; } .ad-name { font-family: 'Funnel Display'; font-weight: 700; font-size: 14px; color: var(--ink); } .ad-email { font-size: 12.5px; color: var(--muted); margin-top: 1px; } .ad-item { display: block; width: 100%; text-align: left; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); border: 0; background: none; font-family: inherit; cursor: pointer; } .ad-item:hover { background: var(--bg-soft); } .ad-logout { color: var(--brand-deep); font-weight: 600; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 12px; } .ad-mobile-close { display: none; } .ad-list-btn { display: none; } /* Phones: the account menu becomes a full-screen sheet instead of a small anchored dropdown, replacing the old bottom quick-nav bar entirely. */ @media (max-width: 767px) { .account-dropdown { /* .topbar's backdrop-filter creates a new containing block for fixed-position descendants, so percentage/inset sizing collapses to the header's own height instead of the viewport — use vw/vh instead. */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; border: 0; border-radius: 0; box-shadow: none; padding: 20px 20px 28px; display: flex; flex-direction: column; overflow-y: auto; z-index: 200; } .ad-mobile-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; align-self: flex-end; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--ink); cursor: pointer; flex-shrink: 0; } .ad-header { padding: 8px 10px 18px; } .ad-avatar { width: 52px; height: 52px; font-size: 17px; } .ad-name { font-size: 17px; } .ad-email { font-size: 13.5px; } .ad-item { padding: 15px 10px; font-size: 16px; } .ad-logout { margin-top: 8px; } .ad-list-btn { display: flex; align-items: center; justify-content: center; margin-top: 20px; height: 50px; font-size: 15px; } } /* ============ Auth modal ============ */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(15,18,22,0.55); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; } .auth-modal { position: relative; width: min(420px, 100%); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px 32px 32px; } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--bg-soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .modal-close:hover { background: var(--line); } .auth-brand { display: flex; justify-content: center; margin-bottom: 18px; } .auth-mark { height: 30px; width: auto; } .auth-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 22px; } .auth-sub { text-align: center; font-size: 14px; color: var(--muted); margin: -10px 0 20px; } .auth-field { margin-bottom: 16px; } .auth-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; } .auth-field input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 15px; color: var(--ink); outline: none; box-sizing: border-box; } .auth-field input:focus { border-color: var(--ink); } .auth-field textarea { width: 100%; padding: 12px 14px; resize: vertical; min-height: 100px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); outline: none; box-sizing: border-box; } .auth-field textarea:focus { border-color: var(--ink); } .auth-continue { width: 100%; height: 48px; font-size: 15px; } /* ============ Message host modal ============ */ .msg-host-modal { position: relative; width: min(420px, 100%); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px 32px 32px; } .msg-host-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .msg-host-avatar { width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0; background: var(--brand); color: white; display: grid; place-items: center; font-weight: 700; font-size: 15px; } .msg-host-title { font-size: 17px; font-weight: 800; color: var(--ink); } .msg-host-sub { font-size: 13px; color: var(--muted); margin-top: 2px; } .msg-host-success-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; } #msgHostSuccess { text-align: center; } #msgHostSuccess .auth-title { margin-bottom: 6px; } #msgHostSuccess .auth-sub { margin: 0 0 24px; } /* ============ Delete conversation confirm modal ============ */ .msg-delete-modal { text-align: center; } .msg-delete-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 999px; background: #FEF2F2; color: #EF4444; display: grid; place-items: center; } .msg-delete-actions { display: flex; gap: 10px; } .msg-delete-actions .btn { flex: 1; } .msg-delete-btn { background: #EF4444; color: white; border: 0; } .msg-delete-btn:hover { background: #DC2626; } .msg-delete-icon.logout-icon { background: var(--bg-soft); color: var(--ink-2); } /* ============ Share property modal ============ */ .share-modal { width: min(440px, 100%); } .share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; } .share-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 600; } .share-option:hover { border-color: var(--ink); } .share-option-icon { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: white; flex-shrink: 0; } .share-wa { background: #25D366; } .share-fb { background: #1877F2; } .share-x { background: #000; } .share-tg { background: #26A5E4; } .share-li { background: #0A66C2; } .share-email { background: var(--ink-2); } .share-copy-row { display: flex; gap: 8px; } .share-copy-row input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-family: inherit; font-size: 13.5px; color: var(--ink-2); } .share-copy-row .btn { display: flex; align-items: center; gap: 6px; padding: 0 18px; border-radius: 10px; white-space: nowrap; height: 46px; } /* ============ Verified host modal ============ */ .verify-modal { width: min(460px, 100%); } .verify-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #34D058, #1A8F3C); border-radius: 20px; padding: 26px 22px; color: white; margin-bottom: 22px; } .verify-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .verify-card-name { font-family: 'Funnel Display'; font-size: 21px; font-weight: 800; } .verify-card-since { font-size: 13.5px; color: rgba(255,255,255,0.78); margin-top: 4px; } .verify-card-avatar { width: 60px; height: 60px; border-radius: 14px; flex-shrink: 0; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); color: white; display: grid; place-items: center; font-weight: 700; font-size: 18px; } .verify-card-quote { margin-top: 26px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.94); max-width: 72%; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .auth-social { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; margin-bottom: 10px; } .auth-social:hover { background: var(--bg-soft); } .auth-fine { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.5; } .auth-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: 14px; } .auth-back:hover { color: var(--ink); } .auth-hint { font-size: 12.5px; color: var(--brand-deep); background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; margin: -6px 0 16px; } .auth-resend { display: block; width: 100%; text-align: center; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand); cursor: pointer; margin-top: 14px; } .auth-resend:hover { text-decoration: underline; } /* ============ Language / region / currency modal ============ */ .region-modal { position: relative; width: min(680px, 100%); height: min(600px, 82vh); display: flex; flex-direction: column; background: white; border-radius: 28px; box-shadow: var(--shadow-lg); overflow: hidden; } .region-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); padding: 40px 32px 0; flex-shrink: 0; } .region-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px 32px; } .region-tab { padding-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--muted); border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; } .region-tab:hover { color: var(--ink); } .region-tab.active { color: var(--ink); border-color: var(--ink); } .translate-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); border-radius: 16px; padding: 18px 20px; margin-bottom: 32px; gap: 20px; } .translate-row h4 { font-size: 16px; font-weight: 700; } .translate-row p { font-size: 13.5px; margin-top: 4px; max-width: 46ch; } .toggle-switch { width: 48px; height: 28px; border-radius: 999px; background: var(--ink); position: relative; border: 0; cursor: pointer; flex-shrink: 0; } .toggle-switch .knob { width: 22px; height: 22px; border-radius: 999px; background: white; position: absolute; top: 3px; left: 23px; display: grid; place-items: center; transition: left .15s ease; } .toggle-switch .knob svg { width: 12px; height: 12px; color: var(--ink); } .toggle-switch.off { background: var(--line); } .toggle-switch.off .knob { left: 3px; } .toggle-switch.off .knob svg { display: none; } .region-section-title { font-size: 18px; font-weight: 800; margin-bottom: 16px; } .region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; margin-bottom: 36px; } .region-item { text-align: left; background: none; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; font-family: inherit; } .region-item:hover { background: var(--bg-soft); } .region-item.selected { border-color: var(--ink); } .region-item b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); } .region-item span { font-size: 12.5px; color: var(--muted); } .currency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; } .currency-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; font-family: inherit; background: none; text-align: left; } .currency-item:hover { background: var(--bg-soft); } .currency-item.selected { border-color: var(--ink); background: var(--bg-soft); } .currency-item .cur-name { font-size: 14px; font-weight: 600; color: var(--ink); } .currency-item .cur-code { font-size: 12.5px; color: var(--muted); } @media (max-width: 540px) { .region-modal { width: 100%; height: min(560px, 88vh); border-radius: 22px; } .region-tabs { padding: 32px 20px 0; } .region-scroll { padding: 20px 20px 24px; } .region-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .currency-grid { grid-template-columns: 1fr; } .translate-row { flex-direction: column; align-items: flex-start; } } @media (max-width: 1100px) { .list-link { display: none; } .search-widget { max-width: none; } .sw-trigger { display: flex; } .sw-fields { display: none; } .search-widget.expanded .sw-fields { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 16px; z-index: 85; } .search-widget.expanded .sw-submit { width: 100%; justify-content: center; } .search-widget.expanded .filters-panel { position: static; width: 100%; box-shadow: none; margin-top: 6px; } } /* Tablet: keep "List your property" in the header by shrinking the search bar down to its compact trigger width, instead of hiding the link and expanding the search to fill the row (that only happens on phones, see below). */ @media (min-width: 768px) and (max-width: 1100px) { .topbar-inner { gap: 12px; } .list-link { display: inline-flex; padding: 0 10px; font-size: 13.5px; } .search-widget { max-width: 240px; } } @media (max-width: 540px) { .topbar-inner { flex-wrap: wrap; height: auto; padding-top: 16px; padding-bottom: 16px; row-gap: 12px; } .search-widget { order: 3; flex-basis: 100%; } } /* ============ Category rail ============ */ .category-rail { border-bottom: 1px solid var(--line); background: white; } .category-rail .container { padding-top: 18px; padding-bottom: 14px; } .cat-scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 40px); row-gap: 16px; } .cat-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid transparent; color: var(--muted); flex-shrink: 0; opacity: 0.75; transition: opacity .15s, border-color .15s, color .15s; } .cat-item:hover { opacity: 1; color: var(--ink); } .cat-item.active { opacity: 1; color: var(--ink); border-color: var(--ink); } .cat-item svg { width: 24px; height: 24px; stroke-width: 1.6; } .cat-item span { font-size: 12px; font-weight: 600; white-space: normal; text-align: center; max-width: 104px; line-height: 1.25; } /* The six categories total roughly 690px including gaps, so they still fit centred on any tablet. This used to switch to a left-aligned scrolling rail below 1100px, which is why the icons sat hard against the left edge on tablet instead of centred like the desktop. Only phones actually need the scroller now. */ @media (max-width: 767px) { .cat-scroll { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; } .cat-scroll::-webkit-scrollbar { display: none; } .cat-item { scroll-snap-align: start; } .cat-item span { white-space: nowrap; max-width: none; } } /* Tablet: keep the centred layout, just tighten it so the row doesn't crowd the edges of a narrower screen. */ @media (min-width: 768px) and (max-width: 1100px) { .cat-scroll { gap: clamp(16px, 2.6vw, 30px); } .cat-item svg { width: 22px; height: 22px; } .cat-item span { font-size: 11.5px; max-width: 92px; } } /* ============ Hero ============ */ .hero { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); background: var(--bg-warm); overflow: hidden; } .hero-blob { position: absolute; inset: 0; background: radial-gradient(60% 60% at 85% 10%, rgba(255,106,44,0.14) 0%, rgba(255,106,44,0) 70%); pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; } .hero-copy h1 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; max-width: 14ch; } .hero-copy h1 em { font-style: normal; background: linear-gradient(135deg, var(--brand) 0%, #FF9457 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy p { font-size: 16.5px; margin-top: 18px; max-width: 46ch; line-height: 1.6; } .hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .hero-trustline { display: flex; align-items: center; gap: 12px; margin-top: 34px; } .avatar-stack { display: flex; } .avatar-stack .mini-avatar { width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--bg-warm); margin-left: -10px; display: grid; place-items: center; color: white; font-family: 'Funnel Display'; font-weight: 700; font-size: 12px; } .avatar-stack .mini-avatar:first-child { margin-left: 0; } .hero-trustline .tt { font-size: 13.5px; color: var(--ink-2); } .hero-trustline .tt b { color: var(--ink); } .hero-collage { position: relative; height: clamp(360px, 46vw, 480px); } .collage-img { position: absolute; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bg-soft); } .collage-img img { width: 100%; height: 100%; object-fit: cover; } .collage-1 { top: 0; left: 8%; width: 56%; height: 62%; z-index: 2; } .collage-2 { bottom: 0; right: 0; width: 48%; height: 54%; z-index: 1; } .collage-3 { top: 12%; right: 4%; width: 30%; height: 34%; z-index: 3; display: none; } .floating-card { position: absolute; bottom: 6%; left: 0; z-index: 4; background: white; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; max-width: 230px; } .floating-card .fc-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .floating-card .fc-icon svg { width: 18px; height: 18px; } .floating-card .fc-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 13.5px; color: var(--ink); } .floating-card .fc-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-collage { margin-top: 12px; height: 360px; } .collage-3 { display: none !important; } } /* ============ Section base ============ */ .section { padding: clamp(20px, 2vw, 28px) 0; } .section-soft { background: var(--bg-soft); } .section-dark { background: var(--ink); color: white; } .section-dark p { color: rgba(255,255,255,0.68); } .section-dark h2 { color: white; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 800; white-space: nowrap; text-wrap: nowrap; } @media (max-width: 380px) { .section-head h2 { white-space: normal; text-wrap: wrap; } } .section-head p { margin-top: 8px; max-width: 48ch; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.1em; background: var(--brand-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; } .section-dark .eyebrow { background: rgba(255,106,44,0.16); color: #FFB68A; } .see-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); flex-shrink: 0; } .see-all svg { width: 16px; height: 16px; transition: transform .15s; } .see-all:hover svg { transform: translateX(3px); } /* ============ Listing cards (Airbnb card DNA) ============ */ .carousel-wrap { position: relative; } .listing-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; } .listing-scroll::-webkit-scrollbar { display: none; } .car-nav { position: absolute; top: 38%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow-md); display: grid; place-items: center; cursor: pointer; color: var(--ink); z-index: 5; transition: transform .15s ease; } .car-nav:hover { transform: translateY(-50%) scale(1.06); } .car-nav svg { width: 18px; height: 18px; } .car-prev { left: -14px; } .car-next { right: -14px; } .card { display: flex; flex-direction: column; gap: 6px; cursor: pointer; scroll-snap-align: start; flex: 0 0 calc((100% - 5 * 20px) / 6); min-width: 170px; } .card-media { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; background: var(--bg-soft); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card-media img { transform: scale(1.06); } .card-badge { position: absolute; top: 12px; left: 12px; background: white; padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-sm); } .card-fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; border: none; background: rgba(15,18,22,0.28); display: grid; place-items: center; transition: background .15s; } .card-fav:hover { background: rgba(15,18,22,0.45); } .card-fav svg { width: 16px; height: 16px; stroke: white; fill: rgba(0,0,0,0.15); stroke-width: 2; } .card-fav.active svg { fill: var(--brand); stroke: var(--brand); } .card-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; } .card-dots span { width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.55); } .card-dots span.on { background: white; } .card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .card-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 15px; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--ink); flex-shrink: 0; } .card-rating svg { width: 13px; height: 13px; fill: var(--ink); } .card-loc { font-size: 13.5px; color: var(--muted); margin-top: -5px; } .card-price { font-size: 14px; color: var(--ink); margin-top: -5px; } .card-price b { font-weight: 700; } @media (max-width: 1400px) { .card { flex-basis: calc((100% - 3 * 20px) / 4); } } @media (max-width: 1000px) { .card { flex-basis: calc((100% - 2 * 20px) / 3); } } /* Tablet landscape — five cards rather than four. Placed after the two rules above deliberately: they share this selector's specificity, so this only wins by coming later in the file. A tighter gap plus a smaller card lets a fifth fit without the row feeling cramped, and the type steps down with it so the card keeps its proportions instead of looking like desktop text squeezed into a smaller box. */ @media (min-width: 1001px) and (max-width: 1400px) { .listing-scroll { gap: 14px; } .card { flex-basis: calc((100% - 4 * 14px) / 5); min-width: 150px; } .card-media { border-radius: 14px; } .card-title { font-size: 13.5px; } .card-loc { font-size: 12.5px; } .card-price { font-size: 13px; } .card-rating { font-size: 12.5px; } .card-rating svg { width: 12px; height: 12px; } .card-badge { font-size: 10.5px; padding: 4px 9px; } .card-fav { width: 30px; height: 30px; } .card-fav svg { width: 15px; height: 15px; } .car-nav { width: 36px; height: 36px; } .car-nav svg { width: 16px; height: 16px; } .car-prev { left: -10px; } .car-next { right: -10px; } .section-head h2 { font-size: clamp(17px, 1.8vw, 21px); } } @media (max-width: 720px) { .listing-scroll { gap: 14px; } .card { flex-basis: calc((100% - 14px) / 2); min-width: 140px; } .car-nav { display: none; } } @media (max-width: 480px) { .card { flex-basis: 78%; } } /* ============ Cities strip ============ */ .city-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; background: var(--bg-soft); } .city-card img { width: 100%; height: 100%; object-fit: cover; } .city-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,22,0) 40%, rgba(15,18,22,0.72) 100%); } .city-card .city-info { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: white; } .city-card .city-info b { font-family: 'Funnel Display'; font-weight: 700; font-size: 15.5px; display: block; } .city-card .city-info span { font-size: 12px; color: rgba(255,255,255,0.85); } /* ============ How it works ============ */ .steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; } .step-card { display: flex; flex-direction: column; gap: 14px; } .step-num-badge { width: 48px; height: 48px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-family: 'Funnel Display'; font-weight: 800; font-size: 16px; } .step-card h3 { font-size: 17px; font-weight: 700; } .step-card p { font-size: 14px; line-height: 1.6; } @media (max-width: 880px) { .steps-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps-row { grid-template-columns: 1fr; } } /* ============ Trust strip ============ */ .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .trust-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 26px 22px; } .trust-card .trust-icon { width: 42px; height: 42px; border-radius: 999px; background: rgba(255,106,44,0.18); color: #FFB68A; display: grid; place-items: center; margin-bottom: 16px; } .trust-card .trust-icon svg { width: 20px; height: 20px; } .trust-card h4 { color: white; font-size: 16px; font-weight: 700; margin-bottom: 6px; } .trust-card p { font-size: 13.5px; } @media (max-width: 880px) { .trust-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .trust-grid { grid-template-columns: 1fr; } } /* ============ Testimonials ============ */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .testi { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 16px; } .testi-stars { color: var(--brand); font-size: 14px; letter-spacing: 2px; } .testi p.testi-quote { color: var(--ink-2); font-size: 15px; line-height: 1.6; flex: 1; } .testi-author { display: flex; align-items: center; gap: 12px; } .mini-avatar, .testi-author .avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: white; font-family: 'Funnel Display'; font-weight: 700; font-size: 14px; } .t-name { font-family: 'Funnel Display'; font-weight: 700; font-size: 14px; color: var(--ink); } .t-role { font-size: 12.5px; color: var(--muted); } @media (max-width: 880px) { .testi-grid { grid-template-columns: 1fr; } } /* ============ CTA banner ============ */ .cta-banner { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: var(--radius-lg); } .cta-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,18,22,0.75) 0%, rgba(15,18,22,0.4) 55%, rgba(15,18,22,0.2) 100%); z-index: -1; } .cta-inner { padding: clamp(48px, 7vw, 80px) clamp(28px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .cta-copy { flex: 1 1 480px; min-width: 0; } .cta-copy h2 { color: white; font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; max-width: 18ch; } .cta-copy p { color: rgba(255,255,255,0.82); margin-top: 14px; max-width: 48ch; font-size: 15px; line-height: 1.6; } .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ============ Footer — carried over from the core MyRoomiz site ============ */ .footer { background: white; padding: 64px 0 0; border-top: 1px solid var(--line); } .footer-mini-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .footer-mini-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; background: var(--brand); color: white; font-size: 14.5px; font-weight: 600; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--brand) 70%, transparent); transition: background .15s ease; } .footer-mini-cta:hover { background: var(--brand-deep); } .footer-mini-cta svg { flex-shrink: 0; width: 16px; height: 16px; color: white; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; } .footer-brand p { font-size: 14px; margin-top: 16px; max-width: 28ch; } .footer h5 { font-family: 'Funnel Display'; font-weight: 700; font-size: 14px; margin-bottom: 18px; letter-spacing: 0.02em; } .footer ul { display: flex; flex-direction: column; gap: 12px; } .footer ul a { font-size: 14px; color: var(--muted); transition: color .15s; } .footer ul a:hover { color: var(--brand); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .footer-bottom .links { display: flex; gap: 22px; } .footer-bottom .links a { color: var(--muted); } .footer-bottom .links a:hover { color: var(--ink); } .footer-legal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .footer-legal a { color: var(--muted); } .footer-legal a:hover { color: var(--ink); text-decoration: underline; } .footer-legal .dot { color: var(--muted-2); } .privacy-choices { display: inline-flex; align-items: center; gap: 6px; } .privacy-choices svg { color: var(--ink); flex-shrink: 0; } .footer-meta { display: flex; align-items: center; gap: 20px; } .meta-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); } .meta-btn:hover { text-decoration: underline; } .meta-btn svg { width: 16px; height: 16px; } .footer-social { display: flex; align-items: center; gap: 16px; } .footer-social a { color: var(--ink); display: inline-flex; } .footer-social svg { width: 18px; height: 18px; } .footer-social a:hover { opacity: 0.7; } @media (max-width: 720px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } } .watermark { display: block; width: 100%; margin-top: 12px; margin-bottom: 0; line-height: 0; font-size: 0; user-select: none; pointer-events: none; overflow: hidden; } .watermark img { display: block; width: 100%; height: auto; } @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-grid > div:nth-child(n+4) { grid-column: span 1; } } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* Utility avatar colors */ .av-1 { background: #FF6A2C; } .av-2 { background: #2E6FED; } .av-3 { background: #17A672; } .av-4 { background: #A855F7; } .av-5 { background: #E54E0F; } .av-6 { background: #0EA5B7; } /* ============ Page hero (sub-pages) ============ */ .page-hero { background: var(--bg-warm); padding: 64px 0 44px; border-bottom: 1px solid var(--line); } .page-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .page-hero h1 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; } .page-hero-right { color: var(--muted); max-width: 380px; font-size: 14.5px; text-align: right; line-height: 1.6; } @media (max-width: 720px) { .page-hero-inner { flex-direction: column; align-items: flex-start; } .page-hero-right { text-align: left; } } /* ============ About page ============ */ .about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .about-collage-big img { width: 100%; border-radius: 20px; aspect-ratio: 4/3.2; object-fit: cover; } .about-collage-side { display: flex; gap: 16px; margin-top: 16px; } .about-collage-small { flex: 1; border-radius: 16px; overflow: hidden; aspect-ratio: 1/1; } .about-collage-small img { width: 100%; height: 100%; object-fit: cover; } .about-rating-card { background: var(--ink); color: white; border-radius: 16px; padding: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .about-rating-n { font-family: 'Funnel Display'; font-weight: 800; font-size: 28px; } .about-rating-stars { color: var(--brand); margin: 4px 0; font-size: 13px; } .about-rating-l { font-size: 11.5px; color: rgba(255,255,255,0.7); } .about-hero-copy h2 { margin-bottom: 4px; } .about-hero-copy p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--muted); } .about-divider { border: 0; border-top: 1px solid var(--line); margin: 0; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .about-stat-n { font-family: 'Funnel Display'; font-weight: 800; font-size: 32px; color: var(--brand); } .about-stat-l { font-size: 13px; color: var(--muted); margin-top: 4px; } .about-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .about-checks { display: flex; flex-direction: column; gap: 28px; } .about-check { position: relative; padding-left: 44px; } .about-check-icon { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; } .about-check-icon svg { width: 15px; height: 15px; } .about-check h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .about-check p { font-size: 13.5px; line-height: 1.65; } .about-why-card { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; background: var(--bg-soft); } .about-why-card img { width: 100%; height: 100%; object-fit: cover; } .about-why-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,22,0) 40%, rgba(15,18,22,0.88) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; gap: 14px; } .about-why-overlay h3 { color: white; font-size: 20px; } .about-why-overlay p { color: rgba(255,255,255,0.75); font-size: 13px; } .about-cta { background: var(--ink); border-radius: 28px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .about-cta h2 { color: white; } .about-cta p { color: rgba(255,255,255,0.75); } .about-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; } @media (max-width: 540px) { .about-cta { padding: 32px 24px; } } @media (max-width: 880px) { .about-hero-grid, .about-why-grid { grid-template-columns: 1fr; } .about-stats { grid-template-columns: 1fr 1fr; } } /* ============ Career page ============ */ .career-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; } .career-value .cv-num { font-family: 'Funnel Display'; font-weight: 800; color: var(--brand); font-size: 14px; margin-bottom: 10px; } .career-value h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .career-value p { font-size: 13.5px; line-height: 1.6; } .jobs-list { display: flex; flex-direction: column; gap: 12px; } .job-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; flex-wrap: wrap; } .job-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 15.5px; } .job-tags { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; flex-wrap: wrap; } .job-tag { background: var(--brand-soft); color: var(--brand); font-weight: 600; padding: 3px 10px; border-radius: 999px; font-size: 12px; } .job-dot { color: var(--muted-2); } .job-apply { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .job-apply svg { width: 15px; height: 15px; } .perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .perk { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; font-weight: 600; } .perk-check { width: 24px; height: 24px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .perk-check svg { width: 13px; height: 13px; } @media (max-width: 880px) { .career-values, .perks-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .job-row { flex-direction: column; align-items: flex-start; } .career-values, .perks-grid { grid-template-columns: 1fr; } } /* ============ Contact page ============ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; } .contact-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; } .ch-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; gap: 12px; align-items: center; } .ch-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .ch-icon svg { width: 17px; height: 17px; } .ch-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .ch-value { font-family: 'Funnel Display'; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-top: 2px; display: block; } .contact-form-card { background: white; border: 1px solid var(--line); border-radius: 22px; padding: 32px; } .contact-form-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; } .contact-form-card > p { font-size: 13.5px; margin-bottom: 20px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 12px; font-weight: 700; color: var(--ink-2); } .field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; background: white; color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ct-select { position: relative; } .ct-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: white; text-align: left; font-family: inherit; font-size: 14px; color: var(--ink); transition: border-color .15s ease; } .ct-select-btn span { color: var(--ink); } .ct-select-btn:hover { border-color: var(--ink); } .ct-select.expanded .ct-select-btn { border-color: var(--ink); } .ct-select-btn.invalid { border-color: var(--brand-deep); } .ct-select-btn svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted-2); transition: transform .15s ease; } .ct-select.expanded .ct-select-btn svg { transform: rotate(180deg); } .ct-select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 260px; overflow-y: auto; } .ct-select-option { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer; } .ct-select-option:hover { background: var(--bg-soft); } .check-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 12px 0 6px; } .check-row input { accent-color: var(--brand); } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } .contact-channels, .field-row { grid-template-columns: 1fr; } } /* ============ Legal pages (Privacy / Terms / Cookies) ============ */ .legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .legal-toc { position: sticky; top: 100px; } .legal-toc-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 14px; } .legal-toc ul { display: flex; flex-direction: column; gap: 10px; } .legal-toc a { font-size: 13.5px; color: var(--muted); } .legal-toc a.active, .legal-toc a:hover { color: var(--ink); font-weight: 600; } .legal-intro { font-size: 15px; color: var(--ink-2); line-height: 1.75; margin-bottom: 32px; } .legal-section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); } .legal-section:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .legal-section h2 { font-size: 19px; font-weight: 800; margin-bottom: 12px; } .legal-section p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 12px; } .legal-list { margin-top: 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; } .legal-list li { font-size: 14px; color: var(--muted); line-height: 1.6; } .legal-contact { background: var(--bg-soft); border-radius: 16px; padding: 24px; margin-top: 32px; } .legal-contact h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .legal-contact p { font-size: 13.5px; color: var(--muted); } .legal-contact a { color: var(--brand); font-weight: 600; } @media (max-width: 880px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } } /* ============ Products page ============ */ .pb-headline { font-family: 'Funnel Display'; font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; margin-bottom: 48px; max-width: 24ch; } .pb-stack { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 80px); } .pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } .pb-row.pb-reverse .pb-image { order: 2; } .pb-image { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3.3; background: var(--bg-soft); } .pb-image img { width: 100%; height: 100%; object-fit: cover; } .pb-title { font-family: 'Funnel Display'; font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; } .pb-para { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 12px; } .pb-benefits { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .pb-b-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 13.5px; color: var(--ink); } .pb-b-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; } @media (max-width: 880px) { .pb-row { grid-template-columns: 1fr; } .pb-row.pb-reverse .pb-image { order: 0; } .pb-benefits { grid-template-columns: 1fr; } } /* ============ Blog ============ */ .blog-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; } .blog-cat-pill { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; } .blog-cat-pill.active { background: var(--ink); color: white; border-color: var(--ink); } .blog-featured-wrap { margin-bottom: 36px; } .blog-card { display: block; border-radius: 20px; overflow: hidden; background: white; border: 1px solid var(--line); } .blog-card.featured { display: grid; grid-template-columns: 1.2fr 1fr; } .blog-card-img { position: relative; aspect-ratio: 16/10; background: var(--bg-soft); } .blog-card.featured .blog-card-img { aspect-ratio: auto; height: 100%; } .blog-card-img img { width: 100%; height: 100%; object-fit: cover; } .blog-cat { position: absolute; top: 14px; left: 14px; background: white; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); } .blog-card-body { padding: 22px; } .blog-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .blog-card-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 17px; margin-bottom: 8px; line-height: 1.3; color: var(--ink); } .blog-card.featured .blog-card-title { font-size: 24px; } .blog-card-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; } .blog-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); } .blog-author-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--brand); color: white; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 880px) { .blog-card.featured { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .blog-grid { grid-template-columns: 1fr; } } /* ============ Help-article style About page ============ */ .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 28px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--ink); text-decoration: underline; } .breadcrumb span { color: var(--ink); } .breadcrumb .bc-sep { color: var(--muted-2); } .help-layout { display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; } .help-eyebrow { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .help-title { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; margin-top: 10px; } .help-intro { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-top: 14px; max-width: none; } .help-toc { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .help-toc-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; } .help-toc ul { display: flex; flex-direction: column; gap: 12px; } .help-toc li { display: flex; align-items: flex-start; gap: 8px; } .help-toc svg { width: 14px; height: 14px; color: var(--ink); margin-top: 3px; flex-shrink: 0; } .help-toc a { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .help-toc a:hover { color: var(--brand); } .help-section { margin-top: 40px; scroll-margin-top: 100px; } .help-section h2 { font-size: 19px; font-weight: 800; margin-bottom: 12px; } .help-section p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin-bottom: 12px; max-width: none; } .help-section p a, .help-section li a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .help-section p a:hover, .help-section li a:hover { color: var(--brand); } .help-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding-left: 4px; } .help-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); } .help-list li::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: var(--muted-2); margin-top: 8px; flex-shrink: 0; } .help-vote { display: flex; align-items: center; gap: 14px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); } .help-vote span { font-size: 14.5px; font-weight: 700; color: var(--ink); } .help-vote-btn { height: 36px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 13.5px; font-weight: 600; color: var(--ink); font-family: inherit; cursor: pointer; } .help-vote-btn:hover { border-color: var(--ink); } .help-vote-btn.voted { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); } .help-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); } .help-related h2 { font-size: 19px; font-weight: 800; margin-bottom: 18px; } .help-related-item { display: block; padding: 18px 0; border-top: 1px solid var(--line); } .help-related-item:first-of-type { border-top: 0; } .hr-tags { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .hr-title { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; margin-bottom: 4px; } .help-related-item:hover .hr-title { color: var(--brand); } .hr-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: none; } .help-sidebar { position: sticky; top: 100px; } .help-contact-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; } .help-contact-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; } .help-feedback { font-size: 12.5px; color: var(--muted); margin-top: 14px; } .help-feedback a { color: var(--ink); text-decoration: underline; font-weight: 600; } .help-feedback a:hover { color: var(--brand); } @media (max-width: 880px) { .help-layout { grid-template-columns: 1fr; } .help-sidebar { position: static; } } /* ============ Reader-style blog layout ============ */ .reader-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; } .reader-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } .reader-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; height: 44px; padding: 0 16px; flex: 1; min-width: 200px; max-width: 280px; } .reader-search svg { width: 16px; height: 16px; color: var(--muted-2); flex-shrink: 0; } .reader-search input { border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14px; width: 100%; color: var(--ink); } .reader-topics { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reader-topics-label { font-size: 13px; font-weight: 600; color: var(--muted); } .reader-topic-pill { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; } .reader-topic-pill.active { background: var(--ink); color: white; border-color: var(--ink); } .reader-articles-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .reader-articles-head h2 { font-size: 20px; font-weight: 800; } .reader-sort { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit; } .reader-sort svg { width: 14px; height: 14px; } .reader-list { display: flex; flex-direction: column; } .reader-article { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: flex-start; } .reader-article:first-child { padding-top: 0; } .reader-article:last-child { border-bottom: 0; } .ra-body { flex: 1; min-width: 0; } .ra-byline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ra-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--brand); color: white; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: 'Funnel Display'; flex-shrink: 0; } .ra-name { font-size: 13px; font-weight: 700; color: var(--ink); } .ra-role { font-size: 12px; color: var(--muted); } .ra-date { font-size: 12px; color: var(--muted-2); margin-left: auto; flex-shrink: 0; } .ra-title { font-size: 19px; font-weight: 800; margin-bottom: 10px; line-height: 1.3; } .ra-title a { color: var(--ink); } .ra-title a:hover { color: var(--brand); } .ra-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; } .ra-tags { display: flex; align-items: center; gap: 10px; } .ra-tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); } .ra-read { font-size: 12px; color: var(--muted-2); } .ra-media { width: 180px; height: 130px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: var(--bg-soft); } .ra-media img { width: 100%; height: 100%; object-fit: cover; } .reader-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; } .reader-promo { background: var(--ink); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; color: white; } .reader-promo h3 { color: white; font-size: 16px; font-weight: 800; margin-bottom: 8px; } .reader-promo p { color: rgba(255,255,255,0.7); font-size: 12.5px; line-height: 1.5; margin-bottom: 18px; } .reader-promo-art { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; margin-bottom: 16px; } .reader-promo-art svg { width: 22px; height: 22px; } .reader-promo-form { display: flex; flex-direction: column; gap: 10px; width: 100%; } .reader-promo-form input { height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: white; font-family: inherit; font-size: 13.5px; outline: none; width: 100%; box-sizing: border-box; } .reader-promo-form input::placeholder { color: rgba(255,255,255,0.5); } .reader-promo-form input:focus { border-color: var(--brand); } .reader-promo-form button { height: 42px; font-size: 13.5px; width: 100%; } .reader-people h3, .reader-list-widget h3 { font-size: 15px; font-weight: 800; margin-bottom: 16px; } .rp-person { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .rp-person:last-child { margin-bottom: 0; } .rp-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: white; display: grid; place-items: center; font-size: 13px; font-weight: 700; font-family: 'Funnel Display'; flex-shrink: 0; } .rp-info { flex: 1; min-width: 0; } .rp-name { font-size: 13.5px; font-weight: 700; color: var(--ink); } .rp-role { font-size: 11.5px; color: var(--muted); } .rp-follow { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: white; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; font-family: inherit; flex-shrink: 0; } .rp-follow:hover { border-color: var(--ink); } .rp-follow.following { background: var(--ink); color: white; border-color: var(--ink); } .rl-item { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .rl-item:last-child { margin-bottom: 0; } .rl-item img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg-soft); } .rl-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 4px; } .rl-meta { font-size: 11.5px; color: var(--muted); } /* ============ Blog single-post article ============ */ .article-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 24px; } .article-back svg { width: 16px; height: 16px; } .article-back:hover { color: var(--ink); } .article-tag { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); margin-bottom: 16px; } .article-title { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 22px; } .article-byline { margin-bottom: 28px; } .article-hero { border-radius: 20px; overflow: hidden; margin-bottom: 32px; aspect-ratio: 16 / 9; background: var(--bg-soft); } .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-body { font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 70ch; } .article-body p { margin-bottom: 22px; } .article-body p:last-child { margin-bottom: 0; } .related-section { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); } .related-section h2 { font-size: 22px; font-weight: 800; margin-bottom: 24px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .related-card { display: block; } .related-card-media { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 14px; background: var(--bg-soft); } .related-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; } .related-card:hover .related-card-media img { transform: scale(1.04); } .related-card-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand); margin-bottom: 6px; display: block; } .related-card-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 6px; } .related-card-meta { font-size: 12px; color: var(--muted); } @media (max-width: 820px) { .article-title { font-size: 25px; } .related-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .reader-layout { grid-template-columns: 1fr; } .reader-sidebar { position: static; flex-direction: row; flex-wrap: wrap; } .reader-sidebar > * { flex: 1; min-width: 260px; } } @media (max-width: 680px) { .reader-article { flex-direction: column; } .ra-media { width: 100%; height: 180px; order: -1; } .reader-sidebar { flex-direction: column; } .reader-toolbar { flex-direction: column; align-items: stretch; } .reader-search { max-width: none; } } /* ============ Products overview cards ============ */ .product-card { display: block; } .product-card-img { border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; background: var(--bg-soft); margin-bottom: 14px; } .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .product-card:hover .product-card-img img { transform: scale(1.05); } .product-card-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; } .product-card-desc { font-size: 13px; line-height: 1.55; color: var(--muted); } .pb-row { scroll-margin-top: 100px; } @media (max-width: 880px) { .region-grid[style] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 540px) { .region-grid[style] { grid-template-columns: 1fr !important; } } /* ============ Products page (icon/text style, matches other subpages) ============ */ .product-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; } .product-overview-card { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; } .product-overview-card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); } .product-overview-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 14px; } .product-overview-icon svg { width: 18px; height: 18px; } .product-overview-title { font-family: 'Funnel Display'; font-weight: 700; font-size: 15px; margin-bottom: 6px; color: var(--ink); } .product-overview-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; } .product-detail { border: 1px solid var(--line); border-radius: 18px; padding: 28px; margin-bottom: 20px; scroll-margin-top: 100px; } .product-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .product-detail-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .product-detail-icon svg { width: 20px; height: 20px; } .product-detail h3 { font-size: 18px; font-weight: 800; } .product-detail-para { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; } .product-detail-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } @media (max-width: 880px) { .product-overview-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .product-overview-grid { grid-template-columns: 1fr; } .product-detail-benefits { grid-template-columns: 1fr; } } /* ============ FAQs page ============ */ .faqs-layout { display: grid; gap: 40px; align-items: start; grid-template-columns: 240px 240px 1fr; } .faqs-side { position: sticky; top: 100px; } .faqs-side > p { margin-top: 10px; font-size: 14px; max-width: 28ch; color: var(--muted); } .faq-search { position: relative; margin-top: 0; } .faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); width: 16px; height: 16px; } .faq-search input { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px; outline: none; box-sizing: border-box; background: white; color: var(--ink); } .faq-search input:focus { border-color: var(--ink); } .faq-cat-list { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--line); } .faq-cat-link { padding: 13px 4px 13px 16px; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: none; color: var(--muted); font-family: 'Funnel Display'; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .faq-cat-link:hover { color: var(--ink); } .faq-cat-link.active { border-left-color: var(--brand); color: var(--ink); background: var(--bg-soft); } .faq-still { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .faq-still h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; } .faq-still p { font-size: 13px; margin-bottom: 14px; line-height: 1.5; } .faq-channels { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .faq-channel { display: flex; align-items: center; gap: 12px; } .faq-channel-icon { width: 36px; height: 36px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .faq-channel-icon svg { width: 16px; height: 16px; } .faq-ch-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .faq-ch-value { font-family: 'Funnel Display'; font-weight: 600; font-size: 13.5px; color: var(--ink); } .faq-sections { display: flex; flex-direction: column; gap: 36px; } .faq-section-pill { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-family: 'Funnel Display'; font-weight: 700; font-size: 13px; margin-bottom: 16px; } .faq-section-items { display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; transition: border-color .2s ease; } .faq-item.open { border-color: var(--ink); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; font-family: 'Funnel Display'; font-weight: 600; font-size: 15.5px; color: var(--ink); text-align: left; cursor: pointer; } .faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s ease; color: var(--muted); } .faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--ink); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .2s ease, opacity .2s ease; font-size: 14px; line-height: 1.65; color: var(--muted); opacity: 0; } .faq-item.open .faq-a { max-height: 260px; padding: 0 20px 20px; opacity: 1; } .faq-empty { padding: 48px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; } @media (max-width: 880px) { .faqs-layout { grid-template-columns: 1fr; } .faqs-side { position: static; } } /* ============ Guest preview banner (property-preview.html) ============ */ .preview-banner { background: var(--ink); color: white; padding: 14px 0; position: sticky; top: 0; z-index: 40; } .preview-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .preview-banner-text { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; } .preview-banner-text svg { flex-shrink: 0; color: var(--brand); } .preview-banner-btn { flex-shrink: 0; height: 38px; padding: 0 18px; background: white; color: var(--ink); border-color: white; } .preview-owner-note { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; } /* ============ Property detail page ============ */ .pd-container { padding-top: 24px; } .pd-back-dash { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; margin-bottom: 16px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: white; } .pd-back-dash:hover { border-color: var(--ink); color: var(--ink); } .pd-back-dash svg { width: 15px; height: 15px; } .pd-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; } .pd-title { font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; } .pd-topline-actions { display: flex; gap: 4px; flex-shrink: 0; } .pd-icon-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 8px; border: 0; background: none; font-weight: 600; font-size: 14px; text-decoration: underline; color: var(--ink); } .pd-icon-btn:hover { background: var(--bg-soft); } .pd-icon-btn.active svg { fill: var(--brand); stroke: var(--brand); } .pg-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 8px; height: 420px; border-radius: 16px; overflow: hidden; margin-bottom: 32px; position: relative; } .pg-main { grid-row: 1 / 3; grid-column: 1; position: relative; border: 0; padding: 0; cursor: pointer; min-height: 0; min-width: 0; } .pg-thumbs { display: contents; } .pg-thumb { border: 0; padding: 0; cursor: pointer; min-height: 0; min-width: 0; position: relative; } .pg-main img, .pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s ease; } .pg-main:hover img, .pg-thumb:hover img { filter: brightness(0.92); } .pg-more-badge { position: absolute; inset: 0; background: rgba(15,18,22,0.55); color: white; display: flex; align-items: center; justify-content: center; font-family: 'Funnel Display'; font-weight: 700; font-size: 15px; pointer-events: none; } .pg-thumb-extra { display: none; } .pg-mobile-counter { display: none; } /* Tablet and desktop keep the mosaic grid untouched (per breakpoint below, only true mobile widths switch to the swipeable single-image carousel). */ @media (max-width: 640px) { .pg-grid { display: flex; overflow-x: auto; height: 300px; gap: 0; scroll-snap-type: x mandatory; scrollbar-width: none; } .pg-grid::-webkit-scrollbar { display: none; } .pg-main, .pg-thumb { flex: 0 0 100%; scroll-snap-align: start; } .pg-thumb-extra { display: block; } .pg-more-badge { display: none; } .pg-mobile-counter { display: block; position: absolute; bottom: 14px; right: 14px; z-index: 5; background: rgba(15,18,22,0.65); color: white; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; pointer-events: none; } } .pd-grid { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; padding: 8px 0 48px; } .pd-aside { position: sticky; top: 100px; } @media (max-width: 980px) { .pd-grid { grid-template-columns: 1fr; gap: 32px; } .pd-aside { position: static; } } .pd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 20px; } .pd-subtitle { font-size: 19px; font-weight: 700; margin-bottom: 4px; } .pd-loc { color: var(--muted); font-size: 14.5px; } .pd-host-row { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pd-host-badge { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex-shrink: 0; } .pd-host-badge-title { font-weight: 700; font-size: 14.5px; } .pd-host-badge-sub { color: var(--muted); font-size: 13px; max-width: 340px; } .pd-host-rating { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; flex-shrink: 0; } .pd-host-rating svg { width: 14px; height: 14px; fill: var(--ink); } .pd-host-rating a { text-decoration: underline; font-weight: 600; color: var(--ink); } .pd-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0; } .pd-tag { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); } .pd-section { padding: 28px 0; border-bottom: 1px solid var(--line); } .pd-h3 { font-size: 18px; font-weight: 800; margin-bottom: 16px; } .pd-basics { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; } .pd-basic-item { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); } .pd-basic-icon { width: 22px; height: 22px; color: var(--ink); flex-shrink: 0; } .pd-basic-icon svg { width: 100%; height: 100%; } .pd-para { font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; } .pd-showmore { margin-top: 10px; background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; font-size: 14.5px; cursor: pointer; color: var(--ink); } .pd-amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; } .pd-amenity { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-2); } .pd-a-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); } .pd-a-icon svg { width: 100%; height: 100%; } .pd-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 24px; } .pd-info-label { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; } .pd-info-val { font-size: 14.5px; font-weight: 600; color: var(--ink); } /* Roommate Preference — deliberately loud so it can't be scrolled past unnoticed */ .pd-pref-card { border: 2px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius-lg); padding: 26px 28px; } .pd-pref-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-deep); margin-bottom: 8px; } .pd-pref-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); } .pd-pref-heading { font-size: 21px; color: var(--ink); margin-bottom: 18px; } .pd-pref-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .pd-pref-grid .pd-info-pair { background: white; border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent); border-radius: 12px; padding: 12px 14px; } .pd-pref-grid .pd-info-label { color: var(--brand-deep); font-weight: 700; } @media (max-width: 560px) { .pd-pref-card { padding: 20px; } } .pd-rates { display: flex; flex-direction: column; gap: 10px; } .pd-rate { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--bg-soft); border-radius: 10px; font-size: 14.5px; color: var(--ink-2); } .pd-rate b { color: var(--ink); } .pd-extra-divider { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .pd-rooms-list { display: flex; flex-direction: column; gap: 16px; } .pd-room-card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: stretch; } .pd-room-card-media { position: relative; padding: 0; border: 0; border-right: 1px solid var(--line); cursor: pointer; width: 220px; flex-shrink: 0; background: var(--bg-soft); } .pd-room-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-room-photo-more { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(15,18,22,0.7); color: white; font-size: 11.5px; font-weight: 700; } .pd-room-card-body { flex: 1; min-width: 0; padding: 20px 22px; } .pd-room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .pd-room-head h4 { font-size: 16px; font-weight: 800; color: var(--ink); } .pd-room-price { font-size: 14.5px; font-weight: 700; color: var(--brand); flex-shrink: 0; white-space: nowrap; } .pd-room-meta { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; } .pd-room-section-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; } .pd-room-section-label + .pd-room-tags { margin-bottom: 14px; } .pd-room-tags { display: flex; flex-wrap: wrap; gap: 8px; } .pd-room-tag { padding: 6px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 600; } .pd-room-tag.rule { background: var(--brand-soft); color: var(--brand-deep); } @media (max-width: 560px) { .pd-room-card { flex-direction: column; } .pd-room-card-media { width: 100%; height: 180px; border-right: 0; border-bottom: 1px solid var(--line); } } .pd-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-bottom: 24px; } .pd-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pd-review-avatar { width: 40px; height: 40px; border-radius: 999px; color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .pd-review-name { font-weight: 700; font-size: 14.5px; } .pd-review-meta { font-size: 12.5px; color: var(--muted); } .pd-review-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); } @media (max-width: 720px) { .pd-review-grid { grid-template-columns: 1fr; } } .pd-map { position: relative; height: 320px; border-radius: 16px; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); } .pd-map iframe { width: 100%; height: 100%; border: 0; display: block; } .pd-map-link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; text-decoration: underline; color: var(--ink); } .pd-loc-line { color: var(--muted); font-size: 14.5px; margin-bottom: 4px; } .pd-things-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .pd-things-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; } .pd-things-card ul { display: flex; flex-direction: column; gap: 8px; } .pd-things-card li { font-size: 13.5px; color: var(--ink-2); } @media (max-width: 820px) { .pd-things-grid { grid-template-columns: 1fr; } } .pd-price-card { border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-md); } .pd-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .pd-price-value { font-size: 34px; font-weight: 800; color: var(--brand); letter-spacing: -0.01em; } .pd-price-unit { color: var(--muted); font-size: 15px; font-weight: 600; } .pd-price-sub { color: var(--muted); font-size: 13px; } .pd-price-total { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; } .pd-owner-card { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; text-align: center; } .pd-owner-avatar { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 999px; background: var(--brand); color: white; display: grid; place-items: center; font-size: 24px; font-weight: 700; } .pd-owner-name { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 17px; color: var(--ink); } .pd-owner-check { width: 18px; height: 18px; flex-shrink: 0; display: block; } .pd-owner-check-btn { padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; line-height: 0; } .pd-owner-loc { color: var(--muted); font-size: 14px; margin-top: 2px; margin-bottom: 18px; } .pd-owner-call, .pd-owner-wa { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 999px; font-weight: 700; font-size: 14.5px; margin-bottom: 12px; font-family: inherit; cursor: pointer; } .pd-owner-call { background: var(--brand); color: white; } .pd-owner-call:hover { background: var(--brand-deep); } .pd-owner-wa { border: 1px solid var(--line); color: var(--ink); background: white; } .pd-owner-wa:hover { border-color: var(--ink); } .pd-owner-wa svg { color: var(--ink-2); flex-shrink: 0; } .pd-owner-info { text-align: left; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; gap: 16px 20px; } .pd-owner-bio { text-align: left; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); } .pd-owner-bio p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: 6px; } .pd-owner-report { width: 100%; height: 46px; margin-top: 20px; border-radius: 999px; border: 1px solid var(--brand); background: none; color: var(--brand); font-weight: 700; font-size: 14.5px; cursor: pointer; } .pd-owner-report:hover { background: var(--brand-soft); } .lb-backdrop { position: fixed; inset: 0; background: rgba(15,18,22,0.95); z-index: 200; display: flex; align-items: center; justify-content: center; } .lb-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.1); color: white; border: 0; font-size: 22px; cursor: pointer; line-height: 1; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.1); color: white; border: 0; font-size: 24px; cursor: pointer; } .lb-nav.prev { left: 20px; } .lb-nav.next { right: 20px; } .lb-stage { max-width: 90vw; max-height: 85vh; text-align: center; } .lb-stage img { max-width: 90vw; max-height: 80vh; border-radius: 8px; } .lb-counter { color: white; margin-top: 10px; font-size: 13px; } /* ============ Search results page (city.html) ============ */ .search-page { min-height: calc(100vh - 84px); } .search-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 20px clamp(20px, 5vw, 64px) 0; scrollbar-width: none; } .search-tabs::-webkit-scrollbar { display: none; } .search-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--ink-2); font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .search-tab svg { width: 15px; height: 15px; flex-shrink: 0; } .search-tab:hover { border-color: var(--ink); } .search-tab.active { background: var(--brand); border-color: var(--brand); color: white; } .search-title-row { padding: 22px clamp(20px, 5vw, 64px) 0; } .search-title-row h1 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; } .search-title-row p { color: var(--muted); font-size: 13.5px; margin-top: 4px; } /* ---- Mega filter (category-aware advanced search) ---- */ .mega-filter { margin: 18px clamp(20px, 5vw, 64px) 0; background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px clamp(20px, 3vw, 34px); box-shadow: var(--shadow-sm); } .mega-filter-title-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0; margin: 0 0 22px; cursor: pointer; font-family: inherit; text-align: left; } .mega-filter-title { font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; margin: 0; } .mega-filter-chevron { width: 22px; height: 22px; color: var(--ink-2); flex-shrink: 0; transition: transform 0.2s ease; } .mega-filter.collapsed .mega-filter-title-row { margin-bottom: 0; } .mega-filter.collapsed .mega-filter-chevron { transform: rotate(-90deg); } .mega-filter.collapsed #megaFilterBody { display: none; } .mega-filter-fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; width: 100%; } .mega-filter-field { flex: 1 1 150px; min-width: 130px; } .mega-filter-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mega-filter-input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--bg-soft); outline: none; box-sizing: border-box; } .mega-filter-input:focus { border-color: var(--ink); background: white; } .mega-filter-fields .wz-dd-trigger { width: 100%; height: 46px; background: var(--bg-soft); border-radius: 10px; padding: 0 14px; } .mega-filter-fields .wz-dd.open .wz-dd-trigger, .mega-filter-input:focus + * { background: white; } .mega-filter-field-btn { flex: 1 1 150px; min-width: 140px; } .mega-filter-field-btn label { visibility: hidden; } .mega-filter-search-btn { width: 100%; height: 46px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: white; border: 0; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; } .mega-filter-search-btn:hover { background: var(--brand-deep); } @media (max-width: 700px) { .mega-filter { padding: 22px 18px; } .mega-filter-fields { flex-direction: column; align-items: stretch; } .mega-filter-field, .mega-filter-field-btn { flex: 1 1 auto; width: 100%; } .mega-filter-field-btn label { display: none; } } .search-filters-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px clamp(20px, 5vw, 64px); } .search-filters-left { display: flex; gap: 10px; flex-wrap: wrap; } .search-filters-left .wz-dd { width: 176px; } .search-filters-left .wz-dd-trigger { padding: 10px 12px; font-size: 13.5px; } .search-view-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; } .search-view-btn { display: flex; align-items: center; gap: 6px; padding: 9px 16px; background: white; border: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; } .search-view-btn.active { background: var(--bg-soft); color: var(--ink); } .search-view-btn svg { width: 15px; height: 15px; } /* 6 equal columns, same math as the home page's .card flex-basis (100% - 5*20px)/6 — cards render at the identical pixel size to the home carousels. The map is a single grid item pinned to columns 5-6 across every row, so cards fill columns 1-4 around it. */ .search-results-layout { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; padding: 4px clamp(20px, 5vw, 64px) 60px; } #searchCards { display: contents; } .search-map-col { grid-column: 5 / 7; grid-row: 1 / 30; align-self: start; position: sticky; top: 96px; height: calc(100vh - 130px); min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); } #searchMap { width: 100%; height: 100%; } .search-results-layout.view-grid .search-map-col { display: none; } .leaflet-price-marker { background: white; border: 1.5px solid var(--ink); border-radius: 999px; padding: 5px 11px; font-family: 'Funnel Display', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; } .leaflet-price-marker.active { background: var(--ink); color: white; border-color: var(--ink); } .city-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; max-width: 480px; margin: 0 auto; } .city-empty-icon { width: 92px; height: 92px; margin: 0 auto 20px; display: block; } .city-empty h2 { font-size: 22px; font-weight: 800; margin-bottom: 10px; } .city-empty p { color: var(--muted); margin-bottom: 22px; } /* Below each breakpoint the map steps aside and cards take the full row, matching the home page's own .card breakpoints exactly so sizing never diverges from the home screen. */ @media (max-width: 1400px) { .search-results-layout { grid-template-columns: repeat(4, 1fr); } .search-map-col { display: none; } } @media (max-width: 1000px) { .search-results-layout { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .search-results-layout { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 480px) { .search-results-layout { grid-template-columns: 1fr; } } /* ============ List-a-property wizard ============ */ .wizard-page { min-height: calc(100vh - 84px); display: flex; flex-direction: column; background: var(--bg-soft); } .wizard-page.has-bar { padding-bottom: 130px; } .wz-wrap { max-width: 900px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 56px; padding-bottom: 40px; } .wz-wrap > div { width: 100%; } .wz-head { text-align: center; max-width: 560px; margin: 0 auto 40px; } .wz-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; margin-bottom: 18px; } .wz-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; margin-bottom: 12px; } .wz-subtitle { color: var(--muted); font-size: 15.5px; line-height: 1.6; } .wz-upload-rules { font-size: 12.5px; margin-top: 4px; } .wz-step-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .wz-title-line { display: block; white-space: nowrap; } .wz-head-wide { max-width: 820px; } @media (max-width: 820px) { .wz-head-wide .wz-title-line { white-space: normal; } } .wz-details-narrow { max-width: 640px; margin: 0 auto; } .wz-upload-row { display: flex; align-items: center; gap: 10px; } .wz-upload-row .wz-input { flex: 1; color: var(--muted); cursor: default; } .wz-attach-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 46px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--brand); color: white; font-weight: 700; font-size: 14px; white-space: nowrap; } .wz-attach-btn:hover { background: var(--brand-deep); } .wz-agree { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 28px; } .wz-agree a { color: var(--ink); text-decoration: underline; } textarea.wz-input { min-height: 130px; } .wz-basics-list { display: flex; flex-direction: column; } .wz-counter-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); } .wz-counter-row:last-child { border-bottom: 0; } .wz-counter-row-label { font-size: 16px; font-weight: 600; color: var(--ink); } .wz-counter-row .wz-dd { width: 220px; } .wz-stepper { display: flex; align-items: center; gap: 18px; } .wz-stepper-btn { width: 32px; height: 32px; border-radius: 999px; border: 0; background: var(--bg-soft); color: var(--ink-2); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .wz-stepper-btn:hover:not(:disabled) { background: var(--line); color: var(--ink); } .wz-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; } .wz-stepper-val { min-width: 22px; text-align: center; font-weight: 600; font-size: 15px; } /* ---- Custom dropdown (replaces native