/* IDX test pages (6 Oct 2026). Testing only. One colour per page so a tester always knows where they are: overview green, search blue, agent amber, city listings purple, homepage terracotta. */ html[lang=es] [data-l=en], html:not([lang=es]) [data-l=es]{ display:none !important; } /* No cross-page fade and no sticky header on these pages: iHomeFinder draws its own sticky panels (photo bar, tour form) and ours sat on top of them, which made scrolling up jumpy. */ @view-transition{ navigation:none; } .idx-hdr{ position:relative; } html{ scroll-behavior:auto; } body{ --ac:#1E5631; --ac-soft:#E7F3EA; } body.p-search{ --ac:#2457A6; --ac-soft:#E6EEF9; } body.p-agent{ --ac:#A86A0B; --ac-soft:#FFF1D6; } body.p-list{ --ac:#6B3FA0; --ac-soft:#EFE8F8; } body.p-home{ --ac:#B4532A; --ac-soft:#FBE9DF; } .idx-sec{ border-top:6px solid var(--ac); } .idx-sec h1{ font-size:clamp(26px,3vw,36px); margin:10px 0 6px; } .idx-sec h2{ font-size:clamp(21px,2.4vw,28px); margin:26px 0 10px; } .idx-sec .eyebrow{ color:var(--ac); } .idx-intro{ margin:0 0 6px; font-size:16px; line-height:1.55; max-width:70ch; } .idx-sec h2.idx-h2{ padding-left:12px; border-left:6px solid var(--ac); } .idx-short{ display:none; } @media (max-width:430px){ .idx-hdr .brand__txt{ display:block; } .idx-long{ display:none; } .idx-short{ display:inline; } } /* language switch, a row above the tabs (not in the header: the broker name there must stay as prominent as the agent name) */ .idx-toprow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .idx-toprow .eyebrow{ margin:0; } .idx-lang{ display:inline-flex; border:1px solid #b9c2bd; border-radius:999px; overflow:hidden; background:#fff; } .idx-lang a{ padding:8px 14px; font-weight:700; font-size:14px; text-decoration:none; color:#1B2A4A; line-height:1; min-height:36px; display:inline-flex; align-items:center; } html[lang=es] .idx-lang [data-set=es], html:not([lang=es]) .idx-lang [data-set=en]{ background:#1B2A4A; color:#fff; } /* tab bar, each tab with its own colour */ .idx-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px; } .idx-tabs a{ --tc:#1E5631; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:2px solid var(--tc); text-decoration:none; font-weight:700; font-size:15px; color:#1B2A4A; background:#fff; min-height:44px; } .idx-tabs a::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--tc); flex:none; } .idx-tabs a small{ font-weight:400; opacity:.75; } .idx-tabs a[aria-current="page"]{ background:var(--tc); color:#fff; } .idx-tabs a[aria-current="page"]::before{ background:#fff; } .idx-tabs a.t-search{ --tc:#2457A6; } .idx-tabs a.t-agent{ --tc:#A86A0B; } .idx-tabs a.t-list{ --tc:#6B3FA0; } .idx-tabs a.t-home{ --tc:#B4532A; } .idx-status{ padding:12px 14px; border-radius:12px; background:#FFF4D6; color:#5B4300; font-size:15px; line-height:1.5; } .idx-status.is-ok{ background:#E7F3EA; color:#1E5631; } .idx-widget{ margin-top:16px; max-width:100%; overflow-x:clip; } .idx-note{ padding:12px 14px; border-radius:12px; background:var(--ac-soft); color:#1B2A4A; font-size:15px; line-height:1.5; border-left:6px solid var(--ac); } .idx-chip{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; } .chip-ok{ background:#E7F3EA; color:#1E5631; } .chip-warn{ background:#FFF1D6; color:#7A4B00; } .chip-demo{ background:#E6EEF9; color:#1B3F7A; } /* overview cards */ .idx-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:18px; margin:22px 0 8px; } .idx-card{ --cc:#1E5631; background:#fff; border:1px solid #cfd6d2; border-top:8px solid var(--cc); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; } .idx-card.c-search{ --cc:#2457A6; } .idx-card.c-agent{ --cc:#A86A0B; } .idx-card.c-list{ --cc:#6B3FA0; } .idx-card.c-home{ --cc:#B4532A; } .idx-card img{ display:block; width:100%; height:auto; aspect-ratio:1177/520; object-fit:cover; background:#e9e4da; } .idx-card__ph{ aspect-ratio:1177/520; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; background:#F4EEE2; color:#5B4300; font-size:15px; line-height:1.4; } .idx-card__b{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .idx-card h2{ margin:0; font-size:21px; } .idx-card h2 span.n{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--cc); color:#fff; font-size:15px; margin-right:8px; font-family:inherit; } .idx-card p{ margin:0; font-size:15px; line-height:1.5; } .idx-card .btn{ margin-top:auto; align-self:flex-start; background:var(--cc); color:#fff; } .idx-fine{ font-size:14px; opacity:.75; } /* homepage-search demo (page 5) */ .idxh-hero{ background:linear-gradient(160deg,#1B2A4A,#26396a); color:#fff; padding:36px 0 40px; border-top:6px solid #B4532A; } .idxh-hero .eyebrow{ color:#EBD9B4; } .idxh-hero h1{ color:#fff; font-size:clamp(28px,4vw,44px); margin:10px 0 10px; } .idxh-hero h1 em{ color:#EBD9B4; } .idxh-hero p.sub{ max-width:60ch; opacity:.92; margin:0 0 18px; font-size:17px; line-height:1.5; } .idxh-form{ background:#fff; color:#1B2A4A; border-radius:18px; padding:14px; max-width:720px; } .idxh-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .idxh-tabs button{ border:1px solid #cfd6d2; background:#f6f2ea; color:#1B2A4A; border-radius:999px; padding:9px 14px; font-weight:700; font-size:14px; cursor:pointer; min-height:40px; } .idxh-tabs button[aria-pressed=true]{ background:#1B2A4A; color:#fff; border-color:#1B2A4A; } .idxh-row{ display:flex; gap:8px; flex-wrap:wrap; } .idxh-row input{ flex:1 1 220px; min-width:0; padding:14px; font-size:16px; border:1px solid #b9c2bd; border-radius:12px; } .idxh-row button{ flex:0 0 auto; padding:14px 20px; font-size:16px; font-weight:700; border:0; border-radius:12px; background:#C9A24B; color:#1B2A4A; cursor:pointer; min-height:48px; } .idxh-hint{ margin:10px 2px 0; font-size:14px; line-height:1.5; color:#3b4a66; min-height:2.8em; } .idxh-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; } .idxh-quick button{ border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.1); color:#fff; border-radius:999px; padding:9px 14px; font-weight:600; font-size:14px; cursor:pointer; min-height:40px; } .idxh-quick button:hover{ background:rgba(255,255,255,.22); } .idxh-results{ padding-top:26px; scroll-margin-top:12px; } .idxh-hoods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:14px 0 0; padding:0; list-style:none; } .idxh-hoods button{ width:100%; text-align:left; background:#fff; border:1px solid #cfd6d2; border-left:6px solid #B4532A; border-radius:12px; padding:12px 14px; font-size:16px; font-weight:700; color:#1B2A4A; cursor:pointer; min-height:48px; } .idxh-hoods button[aria-pressed=true]{ background:#FBE9DF; } .idxh-resbar{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .idx-open{ font-weight:700; color:var(--ac); } .idx-open[hidden]{ display:none !important; } /* loading screen for the homepage-search demo */ .idxh-loading{ display:flex; gap:18px; align-items:center; background:#fff; border:1px solid #e3d3c8; border-left:6px solid #B4532A; border-radius:14px; padding:22px 20px; margin:14px 0; min-height:150px; } .idxh-loading[hidden]{ display:none !important; } .idxh-loading b{ font-size:18px; color:#1B2A4A; } .idxh-spin{ flex:none; width:38px; height:38px; border:4px solid #f0ddd2; border-top-color:#B4532A; border-radius:50%; animation:idxspin .9s linear infinite; } @keyframes idxspin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .idxh-spin{ animation-duration:3s; } } .idxh-steps{ list-style:none; margin:10px 0 0; padding:0; font-size:15px; line-height:1.9; } .idxh-steps li{ padding-left:26px; position:relative; color:#6b7280; } .idxh-steps li[hidden]{ display:none; } .idxh-steps li::before{ content:"○"; position:absolute; left:2px; } .idxh-steps li.now{ color:#1B2A4A; font-weight:700; } .idxh-steps li.now::before{ content:"●"; color:#B4532A; } .idxh-steps li.done{ color:#1E5631; } .idxh-steps li.done::before{ content:"✓"; color:#1E5631; font-weight:700; } body.idxh-resolving .ihf-overlay-container{ opacity:0 !important; pointer-events:none !important; } /* contact forms page (page 5) */ body.p-forms{ --ac:#0F766E; --ac-soft:#E1F3F1; } .idx-tabs a.t-forms{ --tc:#0F766E; } .idx-card.c-forms{ --cc:#0F766E; } .idxf-banner{ padding:14px 16px; border-radius:12px; background:var(--ac-soft); border:2px solid var(--ac); color:#1B2A4A; font-size:16px; line-height:1.5; margin:8px 0 6px; } .idxf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:18px; margin:16px 0 8px; align-items:start; } .idxf-card{ background:#fff; border:1px solid #cfd6d2; border-top:8px solid var(--ac); border-radius:16px; padding:16px 18px 20px; } .idxf-card h3{ margin:0 0 6px; font-size:21px; } .idxf-form .field{ margin:0 0 10px; } .idxf-form label{ display:block; font-weight:700; font-size:14px; margin-bottom:4px; } .idxf-form input[type=text], .idxf-form input[type=email], .idxf-form select, .idxf-form textarea{ width:100%; padding:11px 12px; font-size:16px; border:1px solid #b9c2bd; border-radius:10px; background:#fff; font-family:inherit; box-sizing:border-box; } .idxf-form .btn{ background:var(--ac); color:#fff; margin-top:6px; min-height:46px; } .idxf-seg{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; } .idxf-seg label{ display:inline-flex; align-items:center; gap:6px; font-weight:600; margin:0; } .idxf-prefs{ border:0; padding:0; margin:0 0 10px; display:flex; gap:14px; flex-wrap:wrap; } .idxf-prefs legend{ font-weight:700; font-size:14px; padding:0; margin-bottom:4px; } .idxf-prefs label, .idxf-form .consent{ display:inline-flex; gap:6px; font-weight:400; align-items:flex-start; } .idxf-form .consent{ margin:0 0 8px; font-size:14px; } .idxf-result{ margin-top:12px; padding:12px 14px; border-radius:12px; font-size:15px; line-height:1.5; } .idxf-result[hidden]{ display:none !important; } .idxf-ok{ background:#E7F3EA; color:#1E5631; } .idxf-bad{ background:#FDE8E8; color:#8A1C1C; } .idxf-result details{ margin-top:8px; } .idxf-result summary{ cursor:pointer; font-weight:700; } .idxf-result pre{ overflow:auto; max-height:260px; background:#fff; color:#1B2A4A; padding:10px; border-radius:8px; font-size:12.5px; } .idxf-result code{ background:#fff; color:#1B2A4A; padding:1px 6px; border-radius:6px; font-size:13px; display:inline-block; margin:1px 0; } .idxf-warn{ border-left-color:#B42318; background:#FFF1D6; } .idxf-confirm{ display:flex; gap:10px; align-items:flex-start; margin:14px 0; font-weight:700; line-height:1.4; } #idxfReal[hidden]{ display:none !important; } .idxf-tablewrap{ overflow-x:auto; margin:12px 0; } .idxf-table{ border-collapse:collapse; min-width:640px; width:100%; font-size:15px; background:#fff; } .idxf-table th, .idxf-table td{ border:1px solid #cfd6d2; padding:10px 12px; text-align:left; vertical-align:top; line-height:1.45; } .idxf-table th{ background:var(--ac-soft); } /* IDX readiness page (page 6) */ body.p-ready{ --ac:#4338CA; --ac-soft:#E8E7FA; } .idx-tabs a.t-ready{ --tc:#4338CA; } .idx-card.c-ready{ --cc:#4338CA; } .chip-bad{ background:#FDE8E8; color:#8A1C1C; } .idxr-btn{ background:var(--ac); color:#fff; min-height:48px; padding:12px 20px; } .idxr-btn[hidden]{ display:none !important; } .idxr-btn:disabled{ opacity:.6; cursor:wait; } #idxrOut h3{ margin:26px 0 8px; font-size:20px; } .idxr-fact{ font-size:16px; } .idxr-town{ background:#fff; border:1px solid #cfd6d2; border-top:8px solid var(--ac); border-radius:16px; padding:16px 18px 20px; margin:12px 0; } .idxr-town > h3{ margin:0 0 6px; font-size:22px; } .idxr-ask{ margin-top:16px; border-top-color:#0F766E; max-width:520px; } /* hero-layout demo (page 7), redesigned 8 Oct 2026 (Efren: "fix the image so you can see everybody, not just covering the faces"). In the photo the family stands on the right (faces about 45 to 82 percent across, 29 to 59 percent down) and the left is yard and tree. So on a computer the words and the search sit on the left over the yard, the shading darkens only that side, and the family stays clear and in full colour. A phone is too narrow for both side by side: the photo goes first, uncovered, and the search follows on navy. tests/idx-hero.mjs measures that nothing covers a face. */ body.p-hero{ --ac:#B4532A; --ac-soft:#FBE9DF; } .idx-tabs a.t-hero{ --tc:#9A3412; } .idx-card.c-hero{ --cc:#9A3412; } .idxk-top{ background:#fff; padding:10px 0 6px; } .idxk-top .idx-tabs{ margin:10px 0 8px; } .idxk-top .eyebrow a{ color:inherit; text-decoration:underline; } .idxk-hero{ position:relative; min-height:clamp(620px,calc(100vh - 120px),800px); display:flex; flex-direction:column; justify-content:center; color:#fff; overflow:hidden; background:#1B2A4A; } .idxk-bg, .idxk-bg img{ position:absolute; inset:0; width:100%; height:100%; display:block; } .idxk-bg img{ object-fit:cover; object-position:72% 36%; } /* dark only behind the words (left), clear over the family (right); a soft fade at the bottom for the area strip */ .idxk-shade{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(17,26,46,.94) 0%, rgba(17,26,46,.86) 28%, rgba(17,26,46,.5) 40%, rgba(17,26,46,0) 50%), linear-gradient(180deg, rgba(17,26,46,0) 70%, rgba(17,26,46,.55) 100%); } .idxk-in{ position:relative; z-index:1; width:min(var(--wrap,1180px),92vw); margin:0 auto; padding:40px 0 120px; text-align:left; } .idxk-copy{ max-width:500px; } .idxk-eyebrow{ margin:0 0 12px; color:#EBD9B4; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } .idxk-in h1{ color:#fff; font-size:clamp(32px,3.6vw,50px); line-height:1.06; margin:0 0 14px; text-shadow:0 2px 16px rgba(0,0,0,.3); } .idxk-in h1 em{ color:#EBD9B4; } .idxk-sub{ margin:0 0 22px; font-size:17px; line-height:1.55; color:#e7ecf5; max-width:44ch; } .idxk-sub strong{ color:#EBD9B4; } .idxk-panel{ max-width:500px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:12px; text-align:left; box-shadow:0 18px 40px rgba(0,0,0,.25); } .idxk-tabs{ display:flex; gap:6px; margin:0 0 10px; } .idxk-tabs button{ flex:1 1 0; border:0; border-radius:10px; padding:11px 14px; font-weight:700; font-size:15px; color:#fff; background:rgba(255,255,255,.12); cursor:pointer; min-height:44px; } .idxk-tabs button[aria-pressed=true]{ background:#fff; color:#1B2A4A; } .idxk-row{ display:flex; flex-wrap:wrap; gap:8px; background:#fff; border-radius:12px; padding:6px; } .idxk-by{ flex:0 0 auto; display:flex; align-items:center; border-right:1px solid #d6dbe0; padding-right:4px; } .idxk-by select{ border:0; background:transparent; font-weight:700; font-size:15px; color:#1B2A4A; padding:10px 6px; min-height:46px; cursor:pointer; } .idxk-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .idxk-row input{ flex:1 1 180px; min-width:0; border:0; font-size:16px; padding:12px 10px; border-radius:8px; background:#fff; color:#1B2A4A; } .idxk-row input:focus{ outline:2px solid #B4532A; outline-offset:0; } .idxk-row .idxk-go{ flex:1 1 100%; border:0; border-radius:10px; padding:0 22px; background:#B4532A; color:#fff; font-weight:700; font-size:17px; cursor:pointer; min-height:50px; } .idxk-row .idxk-go:hover{ background:#9A3412; } .idxk-hint{ color:#dfe6f2; margin:10px 4px 2px; font-size:13.5px; line-height:1.5; min-height:2.6em; } .idxk-areas{ position:absolute; left:0; right:0; bottom:0; z-index:2; background:rgba(12,19,34,.62); backdrop-filter:blur(2px); } .idxk-areas__in{ display:flex; align-items:center; gap:6px; padding:6px 0; } .idxk-strip{ flex:1 1 auto; display:flex; gap:4px; margin:0; padding:0; list-style:none; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; } .idxk-strip::-webkit-scrollbar{ display:none; } .idxk-strip li{ flex:0 0 auto; } .idxk-strip button{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; color:#fff; font-size:15.5px; padding:12px 12px; cursor:pointer; white-space:nowrap; min-height:48px; border-radius:8px; } .idxk-strip button::before{ content:""; width:13px; height:17px; background:#EBD9B4; -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat; } .idxk-strip button:hover, .idxk-strip button:focus-visible{ background:rgba(255,255,255,.12); } .idxk-arrow{ flex:0 0 auto; width:44px; height:48px; border:0; border-radius:8px; background:transparent; color:#fff; font-size:32px; line-height:1; cursor:pointer; } .idxk-arrow:hover:not(:disabled){ background:rgba(255,255,255,.12); } .idxk-arrow:disabled{ opacity:.3; cursor:default; } /* tablets, small laptops and phones (under 1100px, where the words would reach the faces): the photo first, uncovered, then the search on navy, then the area strip */ @media (max-width:1100px){ .idxk-hero{ min-height:0; display:block; } .idxk-bg{ position:relative; inset:auto; height:clamp(240px,62vw,440px); } .idxk-bg img{ object-position:66% 40%; } .idxk-shade{ inset:auto 0 auto 0; top:0; height:clamp(240px,62vw,440px); background:linear-gradient(180deg, rgba(17,26,46,0) 70%, rgba(27,42,74,.9) 100%); } .idxk-in{ padding:20px 0 24px; background:#1B2A4A; width:auto; margin:0; } .idxk-in > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxk-copy, .idxk-panel{ max-width:none; } .idxk-in h1{ font-size:clamp(28px,7.4vw,40px); } .idxk-panel{ background:rgba(255,255,255,.06); } .idxk-areas{ position:relative; background:#14203a; } .idxk-arrow{ width:44px; } /* (9 Oct 2026, button audit) a full 44px tap on phones; was 36px */ } @media (max-width:420px){ .idxk-by{ flex:1 1 100%; border-right:0; border-bottom:1px solid #d6dbe0; padding:0 0 4px; } .idxk-by select{ width:100%; } } /* "New listings" and "Homes under $400,000" rows (idx-test-rows.js) */ .idxl{ background:#f7f7f7; } .idxl-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:6px 0 14px; } .idxl-head--2{ margin-top:34px; } .idxl-whose{ margin:0 0 18px; font-size:16px; line-height:1.5; color:var(--muted, #5b6170); max-width:60ch; } /* (9 Oct 2026, button audit) a pill like every other button on the site (it was the one 6px-corner box) */ .idxl-more{ display:inline-flex; align-items:center; min-height:44px; padding:8px 20px; border:1px solid #1B2A4A; border-radius:999px; background:#fff; color:#1B2A4A; font-weight:700; text-decoration:none; } .idxl-more:hover{ background:#1B2A4A; color:#fff; } .idxl-box{ min-height:420px; margin-top:0; } /* preview note (idx-test-preview.js): a small toast saying forms are switched off on the homepage preview */ .idxp-note{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,12px); z-index:2147483000; max-width:min(92vw,520px); padding:12px 18px; border-radius:8px; background:#1B2A4A; color:#fff; font-size:15px; line-height:1.4; box-shadow:0 6px 24px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; } .idxp-note.is-on{ opacity:1; transform:translate(-50%,0); } @media (prefers-reduced-motion:reduce){ .idxp-note{ transition:none; } } /* homepage preview: the "homes for sale" block opens our own search (/listings) instead of MetroList */ .idxp-towns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px auto 0; max-width:780px; } .idxp-towns a{ display:inline-flex; align-items:center; min-height:44px; padding:8px 18px; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:#fff; font-weight:600; text-decoration:none; } .idxp-towns a:hover, .idxp-towns a:focus-visible{ background:rgba(255,255,255,.12); border-color:#fff; } .idxp-cta{ text-align:center; margin:22px 0 0; } .idxp-cta .btn{ background:#B4532A; border-color:#B4532A; color:#fff; min-height:50px; padding-left:28px; padding-right:28px; } .idxp-cta .btn:hover, .idxp-cta .btn:focus-visible{ background:#9A3412; border-color:#9A3412; } .idxp-fine{ text-align:center; margin:14px 0 0; font-size:15px; color:rgba(255,255,255,.75); } .idxp-fine a{ color:#fff; } @media (max-width:430px){ .idxp-towns a{ padding:8px 14px; } .idxp-cta .btn{ width:100%; justify-content:center; } } /* homepage preview redesign (8 Oct 2026): the re-ordered blocks get a deliberate rhythm, so no two cream or two white sections run together. Navy blocks (homes for sale, closings, range) keep their own colour. */ body.idxp [data-idxp="about"], body.idxp [data-idxp="reviews"], body.idxp [data-idxp="area"], body.idxp [data-idxp="guides"]{ background:var(--paper-2); } body.idxp [data-idxp="start"], body.idxp [data-idxp="creds"], body.idxp [data-idxp="faq"], body.idxp [data-idxp="contact"]{ background:var(--card, #fff); } /* trust numbers right under the photo */ body.idxp .idxp-proof .proof{ border-top:0; } /* ===== test page 8: search options (8 Oct 2026). Site colours only: navy #1B2A4A, terracotta #B4532A, cream #EBD9B4 / paper-2. ===== */ .idx-tabs a.t-opts{ --tc:#1B2A4A; } .idxo-bar{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line,#e2ddd3); box-shadow:0 4px 14px rgba(27,42,74,.06); } .idxo-bar__in{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; padding:10px 0; } .idxo-grp{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .idxo-lbl{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#6b7280; } .idxo-seg{ display:flex; flex-wrap:wrap; gap:4px; background:#F3EEE6; border-radius:999px; padding:4px; } .idxo-seg button{ border:0; background:transparent; border-radius:999px; padding:8px 14px; min-height:40px; font-weight:700; font-size:14px; color:#1B2A4A; cursor:pointer; white-space:nowrap; } .idxo-seg button[aria-checked=true]{ background:#1B2A4A; color:#fff; box-shadow:0 2px 8px rgba(27,42,74,.25); } .idxo-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* the hero: no area strip on this page, so less room at the bottom */ .idxo-hero .idxk-in{ padding:48px 0 56px; } .idxo-copy .idxk-sub{ margin-bottom:24px; } /* layout B: centered words and search over a darker photo */ .idxo-hero[data-layout=b] .idxk-shade{ background:linear-gradient(180deg, rgba(17,26,46,.55), rgba(17,26,46,.78)); } .idxo-hero[data-layout=b] .idxk-in{ text-align:center; } .idxo-hero[data-layout=b] .idxo-copy{ max-width:720px; margin:0 auto; } .idxo-hero[data-layout=b] .idxk-sub{ margin-left:auto; margin-right:auto; } .idxo-hero[data-layout=b] .idxo-panel{ margin:0 auto; max-width:720px; } .idxo-hero[data-layout=b] .idxo-tabs, .idxo-hero[data-layout=b] .idxo-quick, .idxo-hero[data-layout=b] .idxo-s4head{ justify-content:center; } /* layout C: cream panel with the words and search, the photo beside it (on top on phones) */ .idxo-hero[data-layout=c]{ background:var(--paper-2,#EDE4D6); color:#1B2A4A; min-height:0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch; } .idxo-hero[data-layout=c] .idxk-shade{ display:none; } .idxo-hero[data-layout=c] .idxk-bg{ position:relative; grid-column:2; grid-row:1; min-height:560px; } .idxo-hero[data-layout=c] .idxk-bg img{ border-radius:0 0 0 28px; object-position:70% 40%; } .idxo-hero[data-layout=c] .idxk-in{ grid-column:1; grid-row:1; width:auto; margin:0; padding:56px clamp(20px,5vw,72px); } .idxo-hero[data-layout=c] h1{ color:#1B2A4A; text-shadow:none; } .idxo-hero[data-layout=c] h1 em{ color:#B4532A; } .idxo-hero[data-layout=c] .idxk-eyebrow{ color:#B4532A; } .idxo-hero[data-layout=c] .idxk-sub{ color:#3b4556; } .idxo-hero[data-layout=c] .idxo-panel{ background:#fff; border-color:#e2ddd3; box-shadow:0 18px 40px rgba(27,42,74,.12); } .idxo-hero[data-layout=c] .idxo-tabs button{ background:#F3EEE6; color:#1B2A4A; } .idxo-hero[data-layout=c] .idxo-tabs button[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxo-hero[data-layout=c] .idxo-tablink, .idxo-hero[data-layout=c] .idxo-hint, .idxo-hero[data-layout=c] .idxo-steps li, .idxo-hero[data-layout=c] .idxo-s4head{ color:#1B2A4A; } .idxo-hero[data-layout=c] .idxo-row, .idxo-hero[data-layout=c] .idxo-one{ box-shadow:inset 0 0 0 1px #d6dbe0; } .idxo-hero[data-layout=c] .idxo-chips button, .idxo-hero[data-layout=c] .idxo-quick button{ background:#F3EEE6; color:#1B2A4A; border-color:#e2ddd3; } .idxo-hero[data-layout=c] .idxo-chips button[aria-checked=true]{ background:#1B2A4A; color:#fff; border-color:#1B2A4A; } .idxo-hero[data-layout=c] .idxo-tile{ background:#F8F4EE; color:#1B2A4A; border-color:#e2ddd3; } .idxo-hero[data-layout=c] .idxo-tile:hover, .idxo-hero[data-layout=c] .idxo-tile:focus-visible{ background:#B4532A; color:#fff; } .idxo-hero[data-layout=c] .idxo-all{ color:#B4532A; } @media (max-width:860px){ .idxo-hero[data-layout=c]{ grid-template-columns:1fr; } .idxo-hero[data-layout=c] .idxk-bg{ grid-column:1; grid-row:1; min-height:240px; height:240px; } .idxo-hero[data-layout=c] .idxk-bg img{ border-radius:0; } .idxo-hero[data-layout=c] .idxk-in{ grid-column:1; grid-row:2; padding:28px 16px 36px; } } /* the search panel (shared by all four styles) */ .idxo-panel{ max-width:520px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:18px; padding:12px; text-align:left; box-shadow:0 18px 40px rgba(0,0,0,.25); position:relative; } .idxo-panel[hidden]{ display:none !important; } .idxo-go{ border:0; border-radius:12px; background:#B4532A; color:#fff; font-weight:700; font-size:17px; padding:0 22px; min-height:52px; cursor:pointer; } .idxo-go:hover, .idxo-go:focus-visible{ background:#9A3412; } .idxo-q{ border:0; font-size:16px; color:#1B2A4A; background:#fff; min-width:0; } .idxo-q:focus{ outline:none; } .idxo-hint{ margin:10px 4px 0; font-size:14px; line-height:1.5; color:#e7ecf5; min-height:1.5em; } .idxo-hint:empty{ display:none; } /* 1 classic */ .idxo-tabs{ display:flex; gap:6px; align-items:center; margin:0 0 10px; flex-wrap:wrap; } .idxo-tabs button{ border:0; border-radius:10px; padding:10px 18px; min-height:44px; font-weight:700; font-size:15px; background:#fff; color:#1B2A4A; cursor:pointer; } .idxo-tablink{ color:#fff; font-weight:600; font-size:14.5px; padding:10px 8px; min-height:44px; display:inline-flex; align-items:center; text-decoration:underline; text-underline-offset:3px; } .idxo-row{ display:flex; flex-wrap:wrap; gap:8px; background:#fff; border-radius:14px; padding:6px; } .idxo-row .idxo-q{ flex:1 1 200px; padding:12px; border-radius:10px; min-height:50px; } .idxo-row:focus-within{ box-shadow:0 0 0 3px rgba(235,217,180,.9); } .idxo-row .idxo-go{ flex:0 0 auto; } @media (max-width:520px){ .idxo-row .idxo-go{ flex:1 1 100%; } } /* 2 one box */ .idxo-one{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:6px 6px 6px 18px; color:#6b7280; } .idxo-one:focus-within{ box-shadow:0 0 0 3px rgba(235,217,180,.9); } .idxo-one .idxo-q{ flex:1 1 auto; font-size:17px; padding:12px 0; min-height:48px; } .idxo-go--round{ border-radius:999px; width:52px; padding:0; font-size:22px; flex:0 0 52px; } .idxo-sug{ list-style:none; margin:0; padding:6px; background:#fff; border-radius:14px; box-shadow:0 14px 30px rgba(17,26,46,.25); position:absolute; left:12px; right:12px; top:76px; z-index:5; } .idxo-sug[hidden]{ display:none; } .idxo-sug li{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; color:#1B2A4A; font-weight:600; cursor:pointer; min-height:44px; } .idxo-sug li[aria-selected=true], .idxo-sug li:hover{ background:#F3EEE6; } .idxo-tag{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#B4532A; } .idxo-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 2px 0; } .idxo-quick button{ border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; border-radius:999px; padding:8px 16px; min-height:44px; font-weight:600; cursor:pointer; } .idxo-quick button:hover{ background:rgba(255,255,255,.14); } /* 3 guided */ .idxo-steps{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:12px; } .idxo-steps li{ color:#fff; font-weight:700; font-size:15px; } .idxo-n{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#EBD9B4; color:#1B2A4A; font-size:13px; margin-right:8px; } .idxo-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .idxo-hero[data-layout=b] .idxo-chips{ justify-content:center; } .idxo-chips button{ border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; border-radius:999px; padding:8px 14px; min-height:42px; font-weight:600; font-size:14.5px; cursor:pointer; } .idxo-chips button[aria-checked=true]{ background:#fff; color:#1B2A4A; border-color:#fff; } .idxo-go--wide{ width:100%; } /* 4 pick a town */ .idxo-s4head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; color:#fff; margin:2px 2px 10px; } .idxo-s4head b{ font-size:17px; } .idxo-switch{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14.5px; cursor:pointer; min-height:44px; } .idxo-switch input{ width:20px; height:20px; accent-color:#B4532A; } .idxo-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .idxo-tile{ display:flex; flex-direction:column; gap:4px; padding:14px 12px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; text-decoration:none; min-height:72px; } .idxo-tile b{ font-size:16px; } .idxo-tile span{ font-size:13px; opacity:.85; } .idxo-tile:hover, .idxo-tile:focus-visible{ background:#B4532A; border-color:#B4532A; color:#fff; } .idxo-all{ display:inline-block; margin:12px 2px 0; color:#EBD9B4; font-weight:700; } @media (max-width:640px){ .idxo-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* notes under the hero */ .idxo-cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:16px 0; } .idxo-cards article{ background:#fff; border:1px solid var(--line,#e2ddd3); border-radius:14px; padding:16px; } .idxo-cards b{ color:#1B2A4A; } .idxo-cards p{ margin:6px 0 0; font-size:15px; line-height:1.5; color:#3b4556; } @media (max-width:900px){ .idxo-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:520px){ .idxo-cards{ grid-template-columns:1fr; } .idxo-bar__in{ gap:8px; } .idxo-seg button{ padding:8px 11px; font-size:13.5px; } } /* page 8 under 1100px, where the hero stacks the photo over a navy block: layout C keeps its cream panel (dark words on navy were unreadable), layout B keeps the family's faces clear, and the option bar stops covering the page */ @media (max-width:1100px){ .idxo-hero .idxk-in{ padding:22px 0 30px; } .idxo-hero[data-layout=b] .idxk-shade{ background:linear-gradient(180deg, rgba(17,26,46,0) 70%, rgba(27,42,74,.9) 100%); } .idxo-hero[data-layout=c] .idxk-in{ background:transparent; } .idxo-hero[data-layout=c] .idxk-in > *{ width:auto; } } @media (max-width:640px){ .idxo-bar{ position:static; } .idxo-grp{ flex-wrap:nowrap; width:100%; } .idxo-seg{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .idxo-seg::-webkit-scrollbar{ display:none; } .idxo-tile b{ font-size:15px; } } .idxo-tile b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (min-width:1101px){ .idxo-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } .idxo-s4{ max-width:600px; } } /* ===== page 7 / homepage preview hero in layout C "Split" (8 Oct 2026, Efren: "use the layout C" on the hero layout): a cream panel with the words and the search on the left, the family photo beside it, the town strip under both. Phones and tablets: the photo on top, the cream panel under it. Same search, same results, same strip. ===== */ .idxk-hero[data-layout=c]:not(.idxo-hero){ background:var(--paper-2,#EDE4D6); color:#1B2A4A; min-height:0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:auto auto; align-items:stretch; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-shade{ display:none; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-bg{ position:relative; inset:auto; grid-column:2; grid-row:1; min-height:600px; height:auto; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-bg img{ object-position:70% 40%; border-radius:0 0 0 28px; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-in{ grid-column:1; grid-row:1; width:auto; margin:0; padding:56px clamp(20px,5vw,72px) 48px; background:transparent; align-self:center; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-in > *{ width:auto; margin-left:0; margin-right:0; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-copy, .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-panel{ max-width:540px; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-eyebrow{ color:#B4532A; } .idxk-hero[data-layout=c]:not(.idxo-hero) h1{ color:#1B2A4A; text-shadow:none; } .idxk-hero[data-layout=c]:not(.idxo-hero) h1 em{ color:#B4532A; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-sub{ color:#3b4556; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-sub strong{ color:#9A3412; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-panel{ background:#fff; border-color:#e2ddd3; box-shadow:0 18px 40px rgba(27,42,74,.12); } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-tabs button{ background:#F3EEE6; color:#1B2A4A; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-tabs button[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-row{ box-shadow:inset 0 0 0 1px #d6dbe0; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-hint{ color:#3b4556; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-areas{ position:relative; grid-column:1 / -1; grid-row:2; background:#1B2A4A; backdrop-filter:none; } @media (max-width:1100px){ .idxk-hero[data-layout=c]:not(.idxo-hero){ display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-bg{ grid-column:1; grid-row:1; min-height:0; height:clamp(240px,62vw,440px); } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-bg img{ border-radius:0; object-position:66% 40%; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-in{ grid-column:1; grid-row:2; padding:24px 0 28px; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-in > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-copy, .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-panel{ max-width:none; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-areas{ grid-row:3; background:#14203a; } } /* page 8 style 5 (page 7's search): the town strip sits under the hero; room for it in layouts A and B, a row of its own in C */ .idxo-strip5[hidden]{ display:none !important; } .idxo-hero.has-strip:not([data-layout=c]) .idxk-in{ padding-bottom:110px; } .idxo-hero[data-layout=c] .idxk-areas{ position:relative; grid-column:1 / -1; grid-row:2; background:#1B2A4A; backdrop-filter:none; } .idxo-s5.idxk-panel{ max-width:520px; } @media (max-width:1100px){ .idxo-hero.has-strip:not([data-layout=c]) .idxk-in{ padding-bottom:30px; } .idxo-hero[data-layout=c] .idxk-areas{ grid-row:3; background:#14203a; } } .idxo-hero[data-layout=c] .idxk-panel{ background:#fff; border-color:#e2ddd3; box-shadow:0 18px 40px rgba(27,42,74,.12); } .idxo-hero[data-layout=c] .idxk-tabs button{ background:#F3EEE6; color:#1B2A4A; } .idxo-hero[data-layout=c] .idxk-tabs button[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxo-hero[data-layout=c] .idxk-row{ box-shadow:inset 0 0 0 1px #d6dbe0; } .idxo-hero[data-layout=c] .idxk-hint{ color:#3b4556; } .idxo-hero[data-layout=b] .idxk-tabs{ justify-content:center; } /* ===== /listings and /idx search header (8 Oct 2026): the Split hero's colours above iHomeFinder's search ===== */ .ihfx-head{ background:var(--paper-2,#EDE4D6); border-bottom:1px solid #e2ddd3; } .ihfx-in{ max-width:1240px; margin:0 auto; padding:22px clamp(16px,3vw,32px) 18px; display:grid; gap:14px; } .ihfx-eyebrow{ margin:0 0 6px; color:#B4532A; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; } .ihfx-copy .ihfx-h{ margin:0; color:#1B2A4A; font-family:var(--serif,"Libre Baskerville",Georgia,serif); font-weight:400; font-size:clamp(24px,3vw,34px); line-height:1.12; text-wrap:balance; } .ihfx-copy .ihfx-h em{ color:#B4532A; } .ihfx-towns{ display:flex; flex-wrap:wrap; gap:8px; } .ihfx-towns a{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:999px; background:#fff; border:1px solid #d9d1c3; color:#1B2A4A; font-weight:700; font-size:15px; text-decoration:none; } .ihfx-towns a:hover, .ihfx-towns a:focus-visible{ border-color:#1B2A4A; } .ihfx-towns a[aria-current="true"]{ background:#1B2A4A; border-color:#1B2A4A; color:#fff; } .ihfx-towns a[data-city="all"]{ background:transparent; border-style:dashed; } .ihfx-row{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; } .ihfx-switch{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; color:#1B2A4A; cursor:pointer; } .ihfx-switch input{ width:20px; height:20px; accent-color:#B4532A; } .ihfx-es{ margin:0; color:#3b4556; font-size:15px; } .ihfx-es a{ color:#9A3412; font-weight:700; } @media (max-width:640px){ .ihfx-in{ padding:16px 16px 14px; gap:10px; } .ihfx-towns{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 2px; } .ihfx-towns::-webkit-scrollbar{ display:none; } .ihfx-towns a{ flex:0 0 auto; } } /* iHomeFinder rewrites the page's

to its own "Property Search", so the header uses an h2 (8 Oct 2026) */ @media (max-width:640px){ .ihfx-eyebrow{ display:none; } .ihfx-row{ gap:2px 16px; } .ihfx-es{ font-size:14px; } } /* ===== phone polish (8 Oct 2026): in the Split hero the search comes right after the headline on phones (the subline moves under it), and short screens get a shorter photo, so "Find your home" is on or near the first screen ===== */ @media (max-width:640px){ .idxk-hero[data-layout=c] .idxk-in{ display:flex; flex-direction:column; } .idxk-hero[data-layout=c] .idxk-copy{ display:contents; } .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-copy > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxk-hero[data-layout=c] .idxk-eyebrow{ order:1; } .idxk-hero[data-layout=c] h1{ order:2; margin-bottom:14px; } .idxk-hero[data-layout=c] .idxk-panel, .idxk-hero[data-layout=c] .idxo-panel{ order:3; } .idxk-hero[data-layout=c] .idxk-sub{ order:4; margin-top:16px; margin-bottom:0; } } @media (max-width:640px) and (max-height:760px){ .idxk-hero[data-layout=c] .idxk-bg{ height:190px !important; min-height:0 !important; } .idxk-hero[data-layout=c] h1{ font-size:27px; } .idxk-hero[data-layout=c] .idxk-in{ padding-top:16px; } } /* test-page EN/ES switch: a full 44px tap target */ .idx-lang a{ min-height:44px; display:inline-flex; align-items:center; } @media (min-width:641px) and (max-width:1100px){ .idxk-hero[data-layout=c]:not(.idxo-hero) .idxk-bg{ height:clamp(240px,46vw,380px); } } /* page 8 share buttons + clean client view (8 Oct 2026): clients see the options and the comparison, not the test wording or tabs */ .idxo-btn{ border:1px solid #d9d1c3; background:#fff; color:#1B2A4A; border-radius:999px; padding:8px 14px; min-height:40px; font-weight:700; font-size:14px; cursor:pointer; } .idxo-btn[aria-pressed=true]{ background:#1B2A4A; color:#fff; border-color:#1B2A4A; } .idxo-btn--copy{ background:#B4532A; border-color:#B4532A; color:#fff; } .idxo-btn--copy:hover, .idxo-btn--copy:focus-visible{ background:#9A3412; } .idxo-copied{ font-size:13.5px; font-weight:700; color:#2F6B47; word-break:break-all; } .idxo-copied:empty{ display:none; } body.idxo-client .idxk-top .eyebrow, body.idxo-client nav.idx-tabs, body.idxo-client .idxo-notes .idx-fine, body.idxo-client .idxo-share{ display:none !important; } body.idxo-client .idxk-top .idx-toprow{ justify-content:flex-end; } /* page 8, style 2 (8 Oct 2026): six core towns + "More areas" under the box. Compact: on phones the six sit in a 3 x 2 grid with "More areas" as a full-width row; every button is a 44px tap target. */ .idxo-quick .idxo-more{ border-style:dashed; font-weight:700; } .idxo-quick .idxo-more[aria-expanded=true]{ border-style:solid; background:rgba(255,255,255,.14); } .idxo-quick--more{ margin-top:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.2); } .idxo-quick--more[hidden]{ display:none !important; } .idxo-hero[data-layout=c] .idxo-quick .idxo-more{ background:#fff; color:#1B2A4A; border-color:#1B2A4A; } .idxo-hero[data-layout=c] .idxo-quick .idxo-more[aria-expanded=true]{ background:#1B2A4A; color:#fff; } .idxo-hero[data-layout=c] .idxo-quick--more{ border-top-color:#e2ddd3; } @media (max-width:640px){ .idxo-s2 .idxo-quick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .idxo-s2 .idxo-quick button{ padding:8px 6px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .idxo-s2 .idxo-quick .idxo-more{ grid-column:1 / -1; } .idxo-s2 .idxo-quick--more{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Featured homes row (8 Oct 2026): collapsed and inert until iHomeFinder has featured homes */ .idxl-feat{ margin-bottom:34px; } .idxl-feat.is-empty{ height:0; margin:0; overflow:hidden; visibility:hidden; } /* ---------- R · Responsive blend (9 Oct 2026, Efren) ---------- Computers (901px and wider): layout A photo hero, a cream search card over the darkened left side, and a cream strip (trust line + Call/Text) under the photo. Phones and tablets (900px and narrower): layout C cream page, headline and search first, then the Call/Text strip, then a smaller photo. Always the style 2 "One box" search. Everything is scoped to [data-layout=r] or to classes only layout R uses, so layouts A, B and C are untouched. */ .idxo-golbl{ display:none; } .idxo-rstrip[hidden], .idxo-drawer[hidden]{ display:none !important; } .idxo-rlinks{ display:none; } body.idxo-is-r .idxo-grp--style{ display:none; } .idxo-hero[data-layout=r] .idxo-panel{ background:#FBF7F0; border:1px solid #e6dccb; border-radius:20px; padding:20px; max-width:580px; box-shadow:0 24px 60px rgba(8,14,28,.35); color:#1B2A4A; } .idxo-hero[data-layout=r] .idxo-one{ border-radius:14px; padding:6px 6px 6px 16px; box-shadow:inset 0 0 0 1px #d6cdbd; } .idxo-hero[data-layout=r] .idxo-one:focus-within{ box-shadow:inset 0 0 0 1px #d6cdbd, 0 0 0 3px #B4532A; } .idxo-hero[data-layout=r] .idxo-go--round{ width:auto; flex:0 0 auto; border-radius:12px; padding:0 24px; font-size:17px; min-height:52px; } .idxo-hero[data-layout=r] .idxo-arr{ display:none; } .idxo-hero[data-layout=r] .idxo-golbl{ display:inline; } .idxo-hero[data-layout=r] .idxo-sug{ left:20px; right:20px; top:88px; } .idxo-hero[data-layout=r] .idxo-quick{ margin:16px 0 0; } .idxo-hero[data-layout=r] .idxo-quick button{ background:#F3EEE6; color:#1B2A4A; border:1px solid #ddd2bf; } .idxo-hero[data-layout=r] .idxo-quick button:hover{ background:#EBD9B4; } .idxo-hero[data-layout=r] .idxo-quick button:focus-visible, .idxo-drawer button:focus-visible, .idxo-rbtn:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } .idxo-hero[data-layout=r] .idxo-quick button.is-selected, .idxo-drawer__list button.is-selected{ background:#1B2A4A; color:#fff; border-color:#1B2A4A; box-shadow:0 0 0 2px #EBD9B4 inset; } .idxo-hero[data-layout=r] .idxo-more{ border-style:dashed; font-weight:700; } .idxo-hero[data-layout=r] .idxo-hint{ color:#3b4556; } .idxo-hero[data-layout=r] .idxo-rlinks{ display:flex; flex-wrap:wrap; gap:0 20px; margin:12px 0 0; } .idxo-hero[data-layout=r] .idxo-rlinks a{ color:#1B2A4A; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; } .idxo-rstrip{ position:relative; z-index:2; background:#F6EFE3; color:#1B2A4A; border-top:1px solid #e6dccb; } .idxo-rstrip__in{ width:min(var(--wrap,1180px),92vw); margin:0 auto; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; } .idxo-rtrust{ margin:0; font-weight:600; font-size:15.5px; line-height:1.45; } .idxo-ract{ display:flex; gap:10px; } .idxo-rnum{ margin-left:.4em; } .idxo-rbtn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:12px; font-weight:700; font-size:16px; text-decoration:none; background:#1B2A4A; color:#fff; border:2px solid #1B2A4A; } .idxo-rbtn--text{ background:transparent; color:#1B2A4A; } .idxo-rbtn:hover{ background:#B4532A; border-color:#B4532A; color:#fff; } @media (min-width:1280px){ .idxo-hero[data-layout=r]{ display:flex; flex-direction:column; min-height:clamp(620px,calc(100vh - 120px),800px); background:#1B2A4A; color:#fff; } /* the photo is a right-anchored panel (8 Oct 2026, late: the card covered the daughter at 1024 and from 1440 up). The family stands in the right half of the photo, so a panel about as wide as the photo at hero height keeps all four of them clear of the card at every width; its left edge fades into the navy. */ .idxo-hero[data-layout=r] .idxk-bg{ position:absolute; top:0; bottom:0; right:0; left:auto; width:min(100%,1170px); height:100%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%); mask-image:linear-gradient(90deg, transparent 0, #000 24%); } .idxo-hero[data-layout=r] .idxk-bg img{ object-position:100% 36%; } .idxo-hero[data-layout=r] .idxo-panel{ max-width:540px; } .idxo-hero[data-layout=r] .idxk-shade{ position:absolute; top:0; bottom:0; left:0; right:0; height:auto; background:linear-gradient(90deg, rgba(14,22,40,.9) 0%, rgba(14,22,40,.78) 40%, rgba(14,22,40,.2) 72%, rgba(14,22,40,0) 100%); } .idxo-hero[data-layout=r] .idxk-in{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; width:min(var(--wrap,1180px),92vw); margin:0 auto; padding:56px 0 52px; background:transparent; } .idxo-hero[data-layout=r] .idxk-in > *{ width:auto; margin-left:0; margin-right:0; } .idxo-hero[data-layout=r] .idxk-copy{ max-width:580px; } .idxo-hero[data-layout=r] .idxk-in h1{ font-size:clamp(34px,3.8vw,52px); } .idxo-drawer{ display:none !important; } } @media (max-width:1279px){ .idxo-hero[data-layout=r]{ display:flex; flex-direction:column; min-height:0; background:#F6EFE3; color:#1B2A4A; } .idxo-hero[data-layout=r] .idxk-shade{ display:none; } .idxo-hero[data-layout=r] .idxk-in{ order:1; width:100%; max-width:760px; margin:0 auto; padding:28px 16px 22px; background:transparent; } .idxo-hero[data-layout=r] .idxk-in > *{ width:auto; margin-left:0; margin-right:0; } .idxo-hero[data-layout=r] .idxk-eyebrow{ color:#B4532A; } .idxo-hero[data-layout=r] h1{ color:#1B2A4A; text-shadow:none; } .idxo-hero[data-layout=r] h1 em{ color:#B4532A; } .idxo-hero[data-layout=r] .idxk-sub{ color:#3b4556; } .idxo-hero[data-layout=r] .idxo-panel{ max-width:none; padding:16px; box-shadow:0 10px 28px rgba(27,42,74,.12); } .idxo-hero[data-layout=r] .idxo-one{ flex-wrap:wrap; padding:6px; } .idxo-hero[data-layout=r] .idxo-one svg{ margin-left:8px; } .idxo-hero[data-layout=r] .idxo-one .idxo-q{ flex:1 1 calc(100% - 50px); } .idxo-hero[data-layout=r] .idxo-go--round{ flex:1 1 100%; width:100%; } .idxo-hero[data-layout=r] .idxo-sug{ left:16px; right:16px; top:142px; } .idxo-hero[data-layout=r] .idxo-s2 .idxo-quick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .idxo-hero[data-layout=r] .idxo-s2 .idxo-quick button{ font-size:15px; padding:8px 10px; } .idxo-hero[data-layout=r] .idxo-s2 .idxo-quick .idxo-more{ grid-column:1 / -1; } .idxo-hero[data-layout=r] .idxo-quick--more{ display:none !important; } .idxo-hero[data-layout=r] .idxo-rstrip{ order:2; background:#EFE5D3; border-top:1px solid #e0d3bb; } .idxo-rstrip__in{ width:100%; max-width:760px; padding:14px 16px; flex-direction:column; align-items:stretch; } .idxo-ract{ gap:10px; } .idxo-rbtn{ flex:1 1 0; } .idxo-rnum{ display:none; } .idxo-hero[data-layout=r] .idxk-bg{ order:3; position:relative; inset:auto; width:calc(100% - 32px); max-width:728px; height:clamp(170px,34vw,300px); margin:22px auto 26px; border-radius:18px; overflow:hidden; } .idxo-hero[data-layout=r] .idxk-bg img{ object-position:68% 40%; } } /* the phone drawer for "More areas" */ body.idxo-drawer-open{ overflow:hidden; } .idxo-drawer{ position:fixed; inset:0; z-index:60; } .idxo-drawer__scrim{ position:absolute; inset:0; background:rgba(14,22,40,.55); } .idxo-drawer__sheet{ position:absolute; left:0; right:0; bottom:0; max-height:min(78vh,620px); display:flex; flex-direction:column; background:#FBF7F0; color:#1B2A4A; border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(8,14,28,.35); padding-bottom:env(safe-area-inset-bottom); outline:none; } .idxo-drawer__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 8px; } .idxo-drawer__head h2{ margin:0; font-size:21px; color:#1B2A4A; } .idxo-drawer__x{ min-height:44px; padding:0 18px; border-radius:12px; border:2px solid #1B2A4A; background:transparent; color:#1B2A4A; font-weight:700; font-size:16px; cursor:pointer; } .idxo-drawer__list{ overflow:auto; overscroll-behavior:contain; padding:6px 18px 22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .idxo-drawer__list button{ min-height:48px; border-radius:12px; border:1px solid #ddd2bf; background:#F3EEE6; color:#1B2A4A; font-weight:600; font-size:15.5px; padding:8px 10px; cursor:pointer; } @media (prefers-reduced-motion:no-preference){ .idxo-drawer__sheet{ animation:idxoUp .22s ease-out; } @keyframes idxoUp{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } } } /* ---------- Preview menu, plain-words version (9 Oct 2026) ---------- */ .idxm h1{ font-size:clamp(32px,5vw,46px); margin:6px 0 10px; } .idxm-lead{ font-size:19px; line-height:1.5; margin:0 0 18px; max-width:62ch; } .idxm-steps{ list-style:none; margin:0 0 12px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .idxm-steps li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #cfd6d2; border-radius:14px; padding:14px 16px; font-size:17px; line-height:1.45; } .idxm-steps li .idxm-n{ flex:0 0 auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#1B2A4A; color:#fff; font-weight:700; } .idxm-lang{ margin:0 0 6px; font-size:16px; color:#3b4556; } .idxm-group{ margin-top:34px; } .idxm-h{ font-size:clamp(26px,3.4vw,34px); margin:0 0 4px; padding-top:6px; border-top:3px solid #1B2A4A; } .idxm-sub{ margin:0 0 6px; font-size:17px; color:#3b4556; } .idxm-cards .idx-card h2{ font-size:23px; } .idxm-cards .idx-card p{ font-size:17px; line-height:1.5; } .idxm-cards .idx-card .btn{ min-height:54px; font-size:18px; padding:0 24px; display:inline-flex; align-items:center; align-self:stretch; justify-content:center; } .idxm-alt{ display:inline-block; margin-top:2px; text-align:center; font-size:16px; font-weight:600; color:#1B2A4A; text-decoration:underline; text-underline-offset:3px; padding:10px 0; min-height:44px; } .idxm-cards .idx-card:focus-within, .idxm-cards .idx-card:hover{ box-shadow:0 8px 24px rgba(27,42,74,.14); } @media (max-width:760px){ .idxm-steps{ grid-template-columns:1fr; } .idxm-lead{ font-size:18px; } } /* Antonio & Ana on the homepage preview (9 Oct 2026): the unfolded intro sat centred in a narrow column while "How we work" right under it started at the left edge, with almost no gap. Same left edge for both, and a real gap between them. */ body.idxp [data-idxp=about] .split--solo{ justify-content:start; } body.idxp [data-idxp=about] > .wrap + .wrap{ margin-top:clamp(48px,7vw,84px) !important; } /* page 8 option bar on phones (9 Oct 2026): the choices scrolled sideways out of sight ("R · Responsive blend" and "3 · Guided" were cut off at the edge). They wrap onto a second line instead, so every choice is visible. */ @media (max-width:640px){ .idxo-grp{ flex-wrap:wrap; } .idxo-seg{ flex-wrap:wrap; overflow:visible; border-radius:20px; } .idxo-seg button{ flex:1 1 auto; } } .idxo-layouts{ margin:4px 0 12px; font-size:16px; line-height:1.55; color:#1B2A4A; max-width:80ch; } /* ---------- page 8, 8 Oct 2026 (evening): new search styles 3 (Buy / Sell / Land) and 4 (Near me), and View as ---------- */ .idxo-mtabs{ display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; } .idxo-mtabs button{ border:0; border-radius:10px; padding:10px 18px; min-height:44px; font-weight:700; font-size:15px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; } .idxo-mtabs button[aria-pressed=true]{ background:#fff; color:#1B2A4A; } .idxo-land{ margin:0 2px 10px; color:#e7ecf5; font-size:15px; line-height:1.5; } .idxo-s3.is-land .idxo-row .idxo-go{ flex:1 1 100%; } .idxo-near{ display:inline-flex; align-items:center; gap:8px; margin:12px 2px 0; padding:8px 16px; min-height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; font-weight:700; font-size:15px; cursor:pointer; } .idxo-near:hover, .idxo-near:focus-visible{ background:rgba(255,255,255,.14); } .idxo-lbl4{ margin:14px 2px 0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#e7ecf5; } .idxo-recent{ margin-top:8px; } .idxo-hero[data-layout=b] .idxo-mtabs{ justify-content:center; } .idxo-hero[data-layout=c] .idxo-mtabs button{ background:#F3EEE6; color:#1B2A4A; } .idxo-hero[data-layout=c] .idxo-mtabs button[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxo-hero[data-layout=c] .idxo-land, .idxo-hero[data-layout=c] .idxo-lbl4{ color:#3b4556; } .idxo-hero[data-layout=c] .idxo-near{ color:#1B2A4A; border-color:#d6cdbd; background:#fff; } .idxo-hero[data-layout=c] .idxo-near:hover, .idxo-hero[data-layout=c] .idxo-near:focus-visible{ background:#F3EEE6; } /* View as: the page itself, client view, inside a tablet or phone frame, scaled to fit */ .idxo-dev{ background:#E9E4DA; padding:22px 16px 32px; } .idxo-dev__lbl{ text-align:center; margin:0 0 14px; font-weight:700; font-size:14px; color:#1B2A4A; font-variant-numeric:tabular-nums; } .idxo-dev__box{ position:relative; overflow:hidden; max-width:1180px; margin:0 auto; } .idxo-dev__frame{ position:absolute; top:0; left:50%; transform-origin:top center; background:#1B2A4A; border-radius:30px; padding:12px; box-shadow:0 24px 60px rgba(17,26,46,.3); } .idxo-dev__frame.is-phone{ border-radius:46px; } .idxo-dev__frame iframe{ display:block; border:0; border-radius:20px; background:#fff; } .idxo-dev__frame.is-phone iframe{ border-radius:34px; } body.idxo-devmode .idxo-hero, body.idxo-devmode #idxhResults{ display:none !important; } body.idxo-embed .idxk-top, body.idxo-embed .idxo-bar, body.idxo-embed .idxo-notes{ display:none !important; } /* layout C between phone and computer widths: the search card sat centred under a left-aligned headline (seen in the Tablet view); it now starts at the same left edge */ @media (max-width:1100px){ .idxo-hero[data-layout=c] .idxk-in > *{ margin-left:0; margin-right:0; } } /* "Homes near me" in every search (8 Oct 2026, late) */ .idxo-near[hidden]{ display:none !important; } .idxo-s3.is-land .idxo-near, .idxo-s3.is-land .idxo-lbl4, .idxo-s3.is-land .idxo-recent, .idxo-s3.is-sell .idxo-near, .idxo-s3.is-sell .idxo-lbl4, .idxo-s3.is-sell .idxo-recent{ display:none; } .idxk-panel .idxo-near{ margin:8px 4px 2px; } .idxo-hero[data-layout=r] .idxo-near{ color:#1B2A4A; border-color:#d6cdbd; background:#fff; } .idxo-hero[data-layout=r] .idxo-near:hover, .idxo-hero[data-layout=r] .idxo-near:focus-visible{ background:#F3EEE6; } .idxo-hero[data-layout=r] .idxo-lbl4{ color:#3b4556; } /* Demo pages: floating ‹ Previews › bar on every test page (8 Oct 2026, late; assets/js/idx-test-nav.js) */ .idx-qnav{ position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:55; display:flex; align-items:stretch; gap:2px; background:#1B2A4A; border-radius:999px; padding:4px; box-shadow:0 10px 28px rgba(17,26,46,.3); font-family:inherit; } .idx-qnav__arrow, .idx-qnav__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:0; background:transparent; color:#fff; text-decoration:none; cursor:pointer; border-radius:999px; font:inherit; } .idx-qnav__arrow{ min-width:44px; font-size:24px; line-height:1; } .idx-qnav__btn{ gap:8px; padding:0 14px; font-weight:700; font-size:15px; } .idx-qnav__btn small{ font-weight:500; font-size:12.5px; opacity:.75; font-variant-numeric:tabular-nums; } .idx-qnav__icon{ font-size:16px; } .idx-qnav__arrow:hover, .idx-qnav__btn:hover, .idx-qnav.is-open .idx-qnav__btn{ background:rgba(255,255,255,.14); } .idx-qnav a:focus-visible, .idx-qnav button:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } .idx-qnav__panel{ position:absolute; left:0; bottom:calc(100% + 10px); width:min(340px, calc(100vw - 24px)); max-height:min(70vh, 560px); overflow:auto; background:#fff; color:#1B2A4A; border-radius:16px; box-shadow:0 18px 44px rgba(17,26,46,.3); padding:10px; } .idx-qnav__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 8px; } .idx-qnav__head b{ font-size:16px; } .idx-qnav__x{ min-height:40px; padding:0 14px; border-radius:10px; border:1.5px solid #1B2A4A; background:transparent; color:#1B2A4A; font-weight:700; cursor:pointer; } .idx-qnav__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; } .idx-qnav__a{ display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border-radius:10px; color:#1B2A4A; text-decoration:none; font-weight:600; font-size:15px; } .idx-qnav__a:hover, .idx-qnav__a:focus-visible{ background:#F3EEE6; } .idx-qnav__a[aria-current=page]{ background:#1B2A4A; color:#fff; } .idx-qnav__a[aria-current=page]::after{ content:"●"; margin-left:auto; font-size:10px; color:#EBD9B4; } body.idxo-client .idx-qnav, body.idxo-embed .idx-qnav{ display:none !important; } /* page 7 (the homepage preview) has the site's own call/text bar at the bottom of phones: sit above it */ @media (max-width:900px){ body.p-hero .idx-qnav{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } } @media print{ .idx-qnav{ display:none; } } .idx-qnav__home{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; background:#EBD9B4; color:#1B2A4A; font-weight:700; font-size:15px; text-decoration:none; margin-right:2px; } .idx-qnav__home:hover{ background:#fff; } .idx-qnav__home[aria-current=page]{ box-shadow:inset 0 0 0 2px #fff; } @media (max-width:380px){ .idx-qnav__btn small{ display:none; } .idx-qnav__btn{ padding:0 10px; } } .idxo-dev__frame.is-computer{ border-radius:14px; padding:10px 10px 22px; } .idxo-dev__frame.is-computer iframe{ border-radius:6px; } /* "New" marks on the menu cards and the tab bar (8 Oct 2026, late) */ .idx-new{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; background:#B4532A; color:#fff; font:700 11px/1.5 inherit; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; } .idx-tabs a .idx-new{ margin-left:4px; padding:1px 6px; font-size:10px; } .idx-qnav__a .idx-new{ margin-left:6px; } /* ================= Exec-team pages 9, 10, 11 (8 Oct 2026, late; audit/design-brief-2026-10-08.md) ================= */ .idxl-note{ margin:4px 0 8px; font-size:14px; color:#5B6372; max-width:80ch; } .idxl-source{ margin:8px 0 0; font-size:12.5px; color:#5B6372; } .idxl-lic{ margin:14px 0 0; font-size:12.5px; color:#5B6372; line-height:1.45; } .idxl-practice{ display:inline-block; margin:6px 0 14px; padding:6px 12px; border-radius:999px; background:#F3EEE6; color:#1B2A4A; font-size:13.5px; font-weight:600; } /* page 8: the "R moved" note, only when R is picked and not for clients */ .idxo-rnote{ display:none; margin:10px auto; font-size:14.5px; color:#1B2A4A; } body.idxo-is-r:not(.idxo-client):not(.idxo-embed) .idxo-rnote{ display:block; } .idxo-rnote a{ color:#9A3412; font-weight:700; } /* 11 tabs: on phones the bar scrolls sideways instead of wrapping into three rows */ @media (max-width:640px){ .idx-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; scroll-snap-type:x proximity; } .idx-tabs::-webkit-scrollbar{ display:none; } .idx-tabs a{ flex:0 0 auto; scroll-snap-align:start; } } .idx-tabs a.t-classic{ --tc:#7C2D12; } .idx-tabs a.t-alerts{ --tc:#0E7490; } .idx-tabs a.t-buy{ --tc:#15803D; } .idx-card.c-classic{ --cc:#7C2D12; } .idx-card.c-alerts{ --cc:#0E7490; } .idx-card.c-buy{ --cc:#15803D; } .idx-card.c-opts{ --cc:#1B2A4A; } /* ---- 9 · Classic photo hero: navy panel, cream active tab, terracotta button, dark town strip ---- */ .idxk-hero[data-layout=k] .idxk-shade{ background:linear-gradient(90deg, rgba(18,29,51,.82) 0%, rgba(18,29,51,.6) 38%, rgba(18,29,51,0) 62%), linear-gradient(0deg, rgba(18,29,51,.35), rgba(18,29,51,0) 30%); } .idxk-hero[data-layout=k] .idxk-copy{ max-width:560px; } .idxk-hero[data-layout=k] .idxk-panel{ max-width:560px; background:rgba(27,42,74,.86); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:20px; } .idxk-hero[data-layout=k] .idxk-tabs button{ background:rgba(255,255,255,.1); color:#fff; } .idxk-hero[data-layout=k] .idxk-tabs button[aria-pressed=true]{ background:#F5EFE6; color:#1B2A4A; } .idxk-hero[data-layout=k] .idxk-hint{ color:#dfe6f2; } .idxk-hero[data-layout=k] .idxk-areas{ background:rgba(18,29,51,.92); backdrop-filter:none; } @media (min-width:1101px){ .idxk-hero[data-layout=k] .idxk-bg img{ object-position:80% 34%; } } @media (max-width:1100px){ .idxk-hero[data-layout=k] .idxk-in{ background:#1B2A4A; } .idxk-hero[data-layout=k] .idxk-panel{ max-width:none; background:rgba(255,255,255,.06); } .idxk-hero[data-layout=k] .idxk-areas{ background:#121D33; } } /* ---- 10 · "Homes picked for you" card (inline, in the dialog, and on page 11) ---- */ .idxl-h1{ font-size:clamp(30px,4.6vw,44px); margin:6px 0 8px; } .idxl-lead{ font-size:18px; line-height:1.55; max-width:62ch; margin:0 0 14px; } .idxl-look{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; background:#F3EEE6; border-radius:999px; padding:4px; margin:0 0 6px; } .idxl-look__lbl{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:#6b7280; padding:0 8px 0 10px; } .idxl-look button{ border:0; background:transparent; border-radius:999px; padding:8px 14px; min-height:44px; font-weight:700; font-size:14.5px; color:#1B2A4A; cursor:pointer; } .idxl-look button[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxl-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:960px; min-height:480px; margin:0 auto; background:#F5EFE6; border-radius:18px; overflow:hidden; box-shadow:0 18px 44px rgba(27,42,74,.14); color:#1B2A4A; } .idxl-card__photo{ position:relative; min-height:260px; } .idxl-card__photo picture, .idxl-card__photo img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; } .idxl-card__body{ padding:44px 48px; display:flex; flex-direction:column; justify-content:center; min-width:0; } .idxl-eyebrow{ margin:0 0 10px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#9A3412; } .idxl-h2{ margin:0 0 10px; font-family:"Libre Baskerville", Georgia, serif; font-size:clamp(28px,3.2vw,38px); line-height:1.15; color:#1B2A4A; } .idxl-h2 em{ color:#B4552F; } .idxl-sub{ margin:0 0 18px; font-size:15.5px; line-height:1.55; color:#3b4556; } .idxl-card[data-look=faithful]{ background:#FBF9F5; } .idxl-card[data-look=faithful] .idxl-h2{ text-transform:uppercase; letter-spacing:.12em; font-weight:400; } .idxl-card[data-look=faithful] .idxl-h2 em{ color:#1B2A4A; } .idxl-card[data-look=faithful] .idxl-sub{ text-transform:uppercase; letter-spacing:.18em; font-size:12.5px; line-height:1.7; color:#3b4556; } .idxl-card[data-look=faithful] .idxl-eyebrow{ color:#5B6372; } .idxl-form{ display:grid; gap:14px; } .idxl-field{ display:grid; gap:4px; min-width:0; } .idxl-field label{ font-size:14px; font-weight:600; color:#1B2A4A; } .idxl-card .idxl-field input, .idxl-card .idxl-field select{ border:0; border-bottom:2px solid #1B2A4A; border-radius:0; background:transparent; min-height:44px; font-size:16px; color:#1B2A4A; padding:6px 2px; width:100%; } .idxl-card .idxl-field input:focus, .idxl-card .idxl-field select:focus{ outline:none; border-bottom-color:#B4552F; box-shadow:0 2px 0 #B4552F; } .idxl-err{ margin:2px 0 0; font-size:14px; font-weight:600; color:#9A1F1F; } .idxl-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; color:#3b4556; } .idxl-consent input{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; accent-color:#1B2A4A; } .idxl-outline{ justify-self:start; min-width:200px; min-height:48px; padding:0 22px; border:2px solid #1B2A4A; border-radius:4px; background:transparent; color:#1B2A4A; font-weight:700; font-size:15px; letter-spacing:.06em; cursor:pointer; } .idxl-outline:hover, .idxl-outline:focus-visible{ background:#1B2A4A; color:#F5EFE6; } .idxl-card[data-look=home] .idxl-outline{ border-radius:999px; letter-spacing:0; } .idxl-fine{ margin:0; font-size:13px; line-height:1.5; color:#5B6372; } .idxl-fine a{ color:#1B2A4A; } .idxl-done{ margin:0; padding:12px 14px; border-radius:10px; background:#E8F2EC; color:#1E5631; font-weight:700; } .idxl-popdemo{ margin:34px 0 10px; display:grid; gap:10px; justify-items:start; } .idxl-popdemo p{ margin:0; color:#3b4556; max-width:62ch; } .idxl-dialog{ border:0; padding:0; background:transparent; max-width:min(960px, calc(100vw - 32px)); width:100%; max-height:92vh; overflow:visible; } .idxl-dialog::backdrop{ background:rgba(18,29,51,.6); } .idxl-dialog .idxl-card{ max-height:92vh; overflow:auto; } .idxl-x{ position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; border:0; border-radius:50%; background:#fff; color:#1B2A4A; font-size:26px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.15); } @media (max-width:760px){ .idxl-card{ grid-template-columns:1fr; min-height:0; } .idxl-card__photo{ min-height:160px; height:160px; } .idxl-card__body{ padding:22px 20px 24px; } .idxl-dialog{ margin:auto 0 0; max-width:100vw; width:100vw; } .idxl-dialog .idxl-card{ border-radius:20px 20px 0 0; max-height:92vh; } } @media (max-width:359px){ .idxl-card__photo{ display:none; } } /* ---- 11 · Buyer landing page ---- */ .idxb-flow{ display:flex; flex-direction:column; } .idxb-sec{ padding-top:36px; padding-bottom:36px; } .idxb-o3{ order:1; } .idxb-o4{ order:2; } .idxb-o2{ order:3; } .idxb-o5{ order:4; } .idxb-o6{ order:5; } @media (max-width:760px){ .idxb-o2{ order:0; } } /* phones: the email card moves up, the lowest-effort ask (brief §6) */ .idxb-steps{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .idxb-step{ background:#fff; border:1px solid #e2ddd3; border-radius:16px; padding:20px; display:grid; gap:8px; align-content:start; color:#1B2A4A; } .idxb-ico{ color:#B4552F; } .idxb-n{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#1B2A4A; color:#fff; font-weight:700; font-size:14px; } .idxb-step b{ font-size:17px; } .idxb-step p{ margin:0; color:#3b4556; line-height:1.5; } @media (max-width:760px){ .idxb-steps{ grid-template-columns:1fr; } } .idxb-guide{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; background:#F3EEE6; border-radius:16px; padding:22px 24px; color:#1B2A4A; } .idxb-guide b{ font-size:18px; } .idxb-guide p{ margin:4px 0 0; color:#3b4556; } .idxb-guide__btn{ min-height:48px; display:inline-flex; align-items:center; } .idxb-ask{ max-width:640px; margin:0 auto; background:#fff; border:1px solid #e2ddd3; border-radius:18px; padding:26px; color:#1B2A4A; } .idxb-ask .idxl-field input, .idxb-ask .idxl-field textarea{ border:1px solid #cfd6dd; border-radius:10px; min-height:48px; font-size:16px; padding:10px 12px; width:100%; color:#1B2A4A; background:#fff; } .idxb-ask .idxl-field textarea{ min-height:96px; } .idxb-ask .idxl-field input:focus, .idxb-ask .idxl-field textarea:focus{ outline:3px solid #B4552F; outline-offset:1px; } .idxb-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:480px){ .idxb-two{ grid-template-columns:1fr; } } .idxb-askbtn{ min-height:52px; justify-content:center; } .idxb-reassure{ margin:0; font-weight:600; color:#1B2A4A; } .idxb-ana{ display:flex; gap:20px; align-items:center; max-width:720px; margin:0 auto; background:#fff; border:1px solid #e2ddd3; border-radius:18px; padding:20px; color:#1B2A4A; } .idxb-ana img{ width:120px; height:120px; border-radius:50%; object-fit:cover; flex:0 0 auto; } .idxb-ana b{ font-size:18px; display:block; margin-bottom:4px; } .idxb-ana p{ margin:4px 0 0; color:#3b4556; line-height:1.5; } @media (max-width:480px){ .idxb-ana{ flex-direction:column; text-align:center; } } /* page 9: the panel covered the daughter (same as R): from 1280 the photo is a right-anchored panel fading into the navy; between 1101 and 1279 it uses the photo-band layout that phones and tablets get */ @media (min-width:1280px){ .idxk-hero[data-layout=k] .idxk-bg{ left:auto; right:0; width:min(100%,1170px); -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%); mask-image:linear-gradient(90deg, transparent 0, #000 24%); } .idxk-hero[data-layout=k] .idxk-bg img{ object-position:100% 34%; } .idxk-hero[data-layout=k] .idxk-panel, .idxk-hero[data-layout=k] .idxk-copy{ max-width:520px; } } @media (min-width:1101px) and (max-width:1279px){ .idxk-hero[data-layout=k]{ min-height:0; display:block; } .idxk-hero[data-layout=k] .idxk-bg{ position:relative; inset:auto; height:clamp(240px,40vw,440px); } .idxk-hero[data-layout=k] .idxk-bg img{ object-position:66% 40%; } .idxk-hero[data-layout=k] .idxk-shade{ inset:auto 0 auto 0; top:0; height:clamp(240px,40vw,440px); background:linear-gradient(180deg, rgba(17,26,46,0) 70%, rgba(27,42,74,.9) 100%); } .idxk-hero[data-layout=k] .idxk-in{ padding:24px 0 28px; background:#1B2A4A; width:auto; margin:0; } .idxk-hero[data-layout=k] .idxk-in > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxk-hero[data-layout=k] .idxk-panel{ max-width:none; } .idxk-hero[data-layout=k] .idxk-areas{ position:relative; background:#121D33; } } /* the Previews bar on phones: Menu + list only, out of the way while typing, and room at the end of the page */ @media (max-width:640px){ .idx-qnav__arrow{ display:none; } .idx-qnav__btn small{ display:none; } body:has(.idx-qnav){ padding-bottom:72px; } } body.idx-typing .idx-qnav{ opacity:0; pointer-events:none; transform:translateY(12px); } .idx-qnav{ transition:opacity .2s, transform .2s; } @media (prefers-reduced-motion:reduce){ .idx-qnav{ transition:none; } } /* ---- 12 · Home value, address first (8 Oct 2026, late) ---- */ .idxv{ background:#F5EFE6; padding:40px 0 48px; color:#1B2A4A; } .idxv__in{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; align-items:start; } .idxv__main{ min-width:0; max-width:640px; } .idxv-h1{ font-family:"Libre Baskerville", Georgia, serif; font-size:clamp(30px,4.4vw,46px); line-height:1.12; margin:0 0 12px; color:#1B2A4A; text-wrap:balance; } .idxv-town{ color:#B4552F; font-style:italic; } .idxv-sub{ font-size:18px; line-height:1.55; margin:0 0 22px; color:#3b4556; max-width:56ch; } .idxv-form{ background:#fff; border:1px solid #e2ddd3; border-radius:18px; padding:24px; display:grid; gap:16px; box-shadow:0 12px 32px rgba(27,42,74,.08); } .idxv-progress p{ margin:0 0 6px; font-size:13.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B6372; } .idxv-bar{ height:6px; border-radius:999px; background:#EDE4D6; overflow:hidden; } .idxv-bar i{ display:block; height:100%; width:33%; background:#B4552F; border-radius:999px; transition:width .3s; } .idxv-step{ border:0; margin:0; padding:0; display:grid; gap:14px; min-width:0; } .idxv-step[hidden]{ display:none; } .idxv-q{ font-family:"Libre Baskerville", Georgia, serif; font-size:22px; line-height:1.3; padding:0; margin:0 0 4px; color:#1B2A4A; } .idxv .idxl-field input{ border:1px solid #cfd6dd; border-radius:10px; min-height:52px; font-size:17px; padding:10px 14px; width:100%; color:#1B2A4A; background:#fff; } .idxv .idxl-field input:focus{ outline:3px solid #B4552F; outline-offset:1px; } .idxv-next, .idxv-go{ min-height:54px; justify-content:center; font-size:17px; } .idxv-opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .idxv-opt{ min-height:56px; border:2px solid #d6cdbd; border-radius:12px; background:#FBF7F0; color:#1B2A4A; font-weight:700; font-size:16px; cursor:pointer; padding:8px 12px; } .idxv-opt:hover, .idxv-opt:focus-visible{ border-color:#1B2A4A; outline:none; } .idxv-opt[aria-pressed=true]{ background:#1B2A4A; color:#fff; border-color:#1B2A4A; } .idxv-back{ justify-self:start; min-height:44px; border:0; background:transparent; color:#1B2A4A; font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:0 4px; } .idxv-done h2{ margin:0 0 10px; } .idxv-next-steps{ margin:0; padding-left:20px; display:grid; gap:6px; color:#3b4556; line-height:1.5; } .idxv-done:focus{ outline:none; } .idxv__trust{ background:#fff; border:1px solid #e2ddd3; border-radius:18px; padding:22px; display:grid; gap:8px; justify-items:start; position:sticky; top:20px; } .idxv__trust img{ width:96px; height:96px; border-radius:50%; object-fit:cover; } .idxv__trust b{ font-size:19px; } .idxv__trust p{ margin:0; color:#3b4556; line-height:1.5; } .idxv-call{ font-weight:600; } .idxv-call a{ color:#9A3412; font-weight:700; white-space:nowrap; } @media (max-width:860px){ .idxv{ padding:24px 0 32px; } .idxv__in{ grid-template-columns:1fr; gap:18px; } .idxv__trust{ position:static; order:1; grid-template-columns:64px 1fr; align-items:center; column-gap:12px; padding:14px 16px; } .idxv__trust img{ width:64px; height:64px; grid-row:span 2; } .idxv__trust .idxl-source, .idxv-call{ grid-column:1 / -1; } .idxv-form{ padding:18px; } } @media (max-width:380px){ .idxv-opts{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .idxv-bar i{ transition:none; } } .idx-tabs a.t-value{ --tc:#B45309; } .idx-card.c-value{ --cc:#B45309; } /* Preview menu: two big parts, "Website demos" and "Search feature designs" (8 Oct 2026, late night) */ .idxm-jump{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:10px 0 0; font-size:16px; } .idxm-jump a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; background:#1B2A4A; color:#fff; font-weight:700; text-decoration:none; } .idxm-jump a:hover, .idxm-jump a:focus-visible{ background:#B4552F; } .idxm-part{ margin-top:44px; scroll-margin-top:16px; } .idxm-part__head{ background:#1B2A4A; color:#fff; border-radius:18px; padding:22px 24px; } .idxm-part__n{ margin:0 0 4px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#EBD9B4; } .idxm-part__h{ margin:0; color:#fff; font-size:clamp(28px,4vw,40px); } .idxm-part__sub{ margin:6px 0 0; color:#dfe6f2; font-size:17px; max-width:70ch; } .idxm-part .idxm-group:first-of-type{ margin-top:26px; } /* ===== page 8, style 6 "Best of both" (8 Oct 2026, Efren: "blend both", "add the sell tab", "make it friendly text"): style 5's form without the "Search by" menu, style 2's suggestion list under the box, and on phones a shorter photo with the search right under the headline, so the tabs, box and button are on the first screen ===== */ .idxo-hero.is-s6 .idxk-by{ display:none; } .idxo-hero.is-s6 #idxhForm{ position:relative; } .idxo-hero.is-s6 .idxo-sug6{ z-index:6; } @media (max-width:640px){ .idxo-hero.is-s6[data-layout=a] .idxk-bg, .idxo-hero.is-s6[data-layout=a] .idxk-shade{ height:200px; } .idxo-hero.is-s6[data-layout=a] .idxk-in{ display:flex; flex-direction:column; padding-top:16px; } .idxo-hero.is-s6[data-layout=a] .idxk-copy{ display:contents; } .idxo-hero.is-s6[data-layout=a] .idxk-copy > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxo-hero.is-s6[data-layout=a] .idxk-eyebrow{ order:1; } .idxo-hero.is-s6[data-layout=a] h1{ order:2; font-size:28px; margin-bottom:12px; } .idxo-hero.is-s6[data-layout=a] #idxhForm{ order:3; } .idxo-hero.is-s6[data-layout=a] .idxk-sub{ order:4; margin-top:16px; margin-bottom:0; } } @media (max-width:640px) and (max-height:760px){ .idxo-hero.is-s6[data-layout=a] .idxk-bg, .idxo-hero.is-s6[data-layout=a] .idxk-shade{ height:150px; } .idxo-hero.is-s6[data-layout=a] h1{ font-size:25px; } } /* ================= Tidy-up (8 Oct 2026, Efren: "it looks too scattered... make it super easy") ================= */ /* 1. the big colored tab bar is gone from every page: the floating Menu · Previews bar does that job (it still reads the links from this hidden list) */ nav.idx-tabs{ display:none !important; } /* 2. one slim, identical test strip at the top of every test page */ .idx-toprow{ padding:4px 0 10px; margin-bottom:6px; border-bottom:1px solid #e2ddd3; } .idx-toprow .eyebrow{ font-size:12px; letter-spacing:.12em; } .idxk-top{ padding:8px 0 4px; } .idxk-top .idxl-note, .idxk-top .idx-note{ font-size:13.5px; margin:2px 0 6px; } /* 3. page 8's options fold behind "Change" on phones */ .idxo-bartoggle{ display:none; } .idxo-bar__body{ display:contents; } @media (max-width:640px){ .idxo-bar__in{ display:block; padding:8px 0; } .idxo-bartoggle{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; min-height:48px; border:1px solid #e2ddd3; border-radius:12px; background:#F3EEE6; color:#1B2A4A; font:700 14.5px/1.3 inherit; padding:6px 14px; cursor:pointer; text-align:left; } .idxo-barsum{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .idxo-barchg{ flex:0 0 auto; color:#9A3412; } .idxo-bar__body{ display:none; } .idxo-bar.is-open .idxo-bar__body{ display:flex; flex-direction:column; gap:10px; margin-top:10px; } } /* 4. the menu (/idx-test-main): filters + simple cards */ .idxq-h1{ font-size:clamp(32px,5vw,48px); margin:10px 0 6px; } .idxq-lead{ font-size:18px; line-height:1.5; margin:0 0 16px; max-width:60ch; color:#3b4556; } .idxq-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; } .idxq-f{ display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 16px; border-radius:999px; border:2px solid #1B2A4A; background:#fff; color:#1B2A4A; font-weight:700; font-size:15.5px; cursor:pointer; } .idxq-f[aria-pressed=true]{ background:#1B2A4A; color:#fff; } .idxq-f:focus-visible{ outline:3px solid #B4552F; outline-offset:2px; } .idxq-c{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:#F3EEE6; color:#1B2A4A; font-size:13px; font-variant-numeric:tabular-nums; } .idxq-f[aria-pressed=true] .idxq-c{ background:#B4552F; color:#fff; } .idxq-showing{ margin:6px 0 14px; font-size:14.5px; color:#5B6372; min-height:1.4em; } .idxq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:16px; margin:0 0 18px; } .idxq-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #e2ddd3; border-radius:16px; overflow:hidden; color:#1B2A4A; text-decoration:none; transition:box-shadow .2s, transform .2s; } .idxq-card[hidden]{ display:none; } .idxq-card:hover, .idxq-card:focus-visible{ box-shadow:0 12px 28px rgba(27,42,74,.16); transform:translateY(-2px); outline:none; } .idxq-card:focus-visible{ box-shadow:0 0 0 3px #B4552F; } .idxq-pic{ display:block; aspect-ratio:1177/520; background:#EDE4D6; } .idxq-pic img{ display:block; width:100%; height:100%; object-fit:cover; } .idxq-ph{ display:grid; place-items:center; height:100%; color:#5B6372; font-size:14px; } .idxq-body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; flex:1; } .idxq-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .idxq-tags .idx-new{ margin-left:0; } .idxq-kind{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:2px 8px; border-radius:999px; } .idxq-card.is-web .idxq-kind{ background:#E8F0EA; color:#1E5631; } .idxq-card.is-search .idxq-kind{ background:#E6ECF6; color:#1B3A6B; } .idxq-card.is-tools .idxq-kind{ background:#F1ECE4; color:#5B4300; } .idxq-pick{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:#EBD9B4; color:#1B2A4A; } .idxq-title{ font-family:"Libre Baskerville", Georgia, serif; font-size:20px; line-height:1.25; display:flex; gap:8px; align-items:baseline; } .idxq-n{ font-family:inherit; font-size:13px; font-weight:700; color:#5B6372; } .idxq-line{ font-size:15.5px; line-height:1.45; color:#3b4556; } .idxq-go{ margin-top:auto; padding-top:6px; font-weight:700; color:#9A3412; } @media (prefers-reduced-motion:reduce){ .idxq-card{ transition:none; } .idxq-card:hover{ transform:none; } } /* ---- Page 13 only (Efren's three designs, 8 Oct 2026): every rule below is scoped to .idxd-hero ---- */ /* Design 2 · Centered (8 Oct 2026, Efren: "add a Sell your home option on tablet"): the One box gets the seller and land links under it on computers and tablets (phones use style 3's Buy / Sell / Land tabs instead). White on the dark photo. */ .idxo-k2 .idxd-hero[data-layout=b] .idxo-rlinks{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 22px; margin:10px 0 0; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-rlinks a{ color:#fff; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px; padding:10px 0; min-height:44px; display:inline-flex; align-items:center; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-rlinks a:focus-visible{ outline:2px solid #fff; outline-offset:2px; } /* ---- Exec review fixes for Efren's three designs (8 Oct 2026, audit/design-review-trio-2026-10-08.md). Every rule is scoped to .idxd-hero (test page 13 only): this file also loads on the live iHomeFinder pages. ---- */ /* brand font on every control (they rendered in Arial); town chips 15px, hints 14px */ .idxd-hero button, .idxd-hero input, .idxd-hero select{ font-family:inherit; } :where(.idxd-hero) .idxo-quick button{ font-size:15px; } .idxd-hero .idxk-hint{ font-size:14px; } /* the unselected Sell tab read as switched off on the photo: give it an outline (Sell is the money path) */ .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-tabs button[aria-pressed=false]{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); background:rgba(255,255,255,.08); } /* design 2: "Homes near me" centered like everything else */ .idxd-hero[data-layout=b] .idxo-near{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; } /* stacked screens (tablets, small laptops, phones): a shorter photo so the search reaches the first screen */ @media (max-width:1100px){ .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-bg, .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-shade{ height:clamp(190px,36vw,300px); } } /* phones, designs 1 and 2 (layout B): the search card comes right after the headline (design 3's order), the sub-line goes under it, and the "Search by" menu steps aside (the box already takes a town, ZIP or address) */ @media (max-width:640px){ .idxd-hero[data-layout=b] .idxk-in{ display:flex; flex-direction:column; padding-top:18px; } .idxd-hero[data-layout=b] .idxk-copy{ display:contents; } .idxd-hero[data-layout=b] .idxk-copy > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxd-hero[data-layout=b] .idxk-eyebrow{ order:1; } .idxd-hero[data-layout=b] h1{ order:2; margin-bottom:14px; } .idxd-hero[data-layout=b] .idxo-panel{ order:3; } .idxd-hero[data-layout=b] .idxk-sub{ order:4; margin-top:16px; margin-bottom:0; } .idxd-hero .idxk-by{ display:none; } } /* short phones (SE, older Androids): a little less photo */ @media (max-width:640px) and (max-height:700px){ .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-bg, .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-shade{ height:150px; } } /* landscape tablets and small laptops with a short screen (1024x768): a little less photo still */ @media (min-width:641px) and (max-width:1100px) and (max-height:820px){ .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-bg, .idxd-hero:is([data-layout=a],[data-layout=b]) .idxk-shade{ height:220px; } } /* ---- Page 13 motion, demo and devices (8 Oct 2026, Efren: "a nice transition, a GUI animation type of feel", "build the interactive mobile version and web version", "English and Spanish ... separation", "compare with the iPhones"). Page 13 only: .idxd-hero, body.idxd, .idxd-*. Motion is under a quarter second; Reduce Motion turns it off. ---- */ @keyframes idxdIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } @keyframes idxdShimmer{ from{ background-position:-400px 0; } to{ background-position:400px 0; } } /* 1. Buy / Sell / Land: one full-width control, a pill slides to the tapped tab */ .idxd-hero .idxd-seg{ position:relative; display:grid !important; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; padding:4px; border-radius:14px; background:rgba(255,255,255,.12); width:100%; margin:0 0 12px; } .idxd-hero .idxd-seg button{ position:relative; z-index:1; background:transparent !important; box-shadow:none !important; border:0; border-radius:11px; min-height:44px; padding:10px 8px; font-weight:700; font-size:15px; color:#fff; cursor:pointer; transition:color .2s ease, transform .12s ease; } .idxd-hero .idxd-seg button[aria-pressed=true]{ color:#1B2A4A; } .idxd-hero .idxd-pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:0; border-radius:11px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18); opacity:0; transition:transform .24s cubic-bezier(.2,.8,.2,1), width .24s cubic-bezier(.2,.8,.2,1); } .idxd-hero .idxd-pill.is-on{ opacity:1; } .idxd-hero[data-layout=c] .idxd-seg{ background:#F3EEE6; } .idxd-hero[data-layout=c] .idxd-seg button{ color:#1B2A4A; } .idxd-hero[data-layout=c] .idxd-seg button[aria-pressed=true]{ color:#fff; } .idxd-hero[data-layout=c] .idxd-pill{ background:#1B2A4A; } .idxd-hero .idxd-bs{ max-width:400px; margin:0 auto 12px; } /* the box's words and the button rise into the new mode */ .idxd-swap .idxo-q, .idxd-swap #idxhQ, .idxd-swap .idxo-go, .idxd-swap .idxk-go, .idxd-swap .idxo-land, .idxd-swap .idxk-hint, .idxd-swap .idxo-hint{ animation:idxdIn .2s ease-out; } /* Design 2 Sell: the box takes an address; town buttons, suggestions and near me step aside; the Sell text link goes */ .idxd-hero .idxo-s2.is-sell .idxo-quick, .idxd-hero .idxo-s2.is-sell .idxo-near, .idxd-hero .idxo-s2.is-sell .idxo-sug{ display:none !important; } .idxo-k2 .idxd-hero .idxo-rlinks a:first-child{ display:none; } /* small touches: buttons press in, the search card lifts while you type, homes fade in */ .idxd-hero .idxo-go, .idxd-hero .idxk-go, .idxd-hero .idxo-quick button, .idxd-hero .idxo-near{ transition:transform .12s ease, background-color .2s ease; } .idxd-hero button:active{ transform:scale(.97); } .idxd-hero .idxo-panel{ transition:box-shadow .2s ease, transform .2s ease; } .idxd-hero .idxo-panel:focus-within{ box-shadow:0 12px 30px rgba(10,18,36,.28); transform:translateY(-2px); } body.idxd #idxhWidget > *{ animation:idxdIn .35s ease-out; } /* 3. phones: the slim search bar that follows */ .idxd-sticky{ position:fixed; z-index:60; top:10px; left:50%; transform:translate(-50%,-160%); display:inline-flex; align-items:center; gap:8px; padding:11px 22px; min-height:44px; border:0; border-radius:999px; background:#1B2A4A; color:#fff; font-family:inherit; font-weight:700; font-size:15px; box-shadow:0 8px 24px rgba(10,18,36,.3); transition:transform .24s cubic-bezier(.2,.8,.2,1); cursor:pointer; } .idxd-sticky[hidden]{ display:none; } .idxd-sticky.is-in{ transform:translate(-50%,0); } .idxd-sticky:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } /* 4. grey placeholder cards while homes load */ .idxd-skel{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0 6px; } .idxd-skel[hidden]{ display:none; } .idxd-skel i{ display:block; border-radius:14px; background:#fff; border:1px solid #e6dfd2; overflow:hidden; padding-bottom:14px; } .idxd-skel b, .idxd-skel s{ display:block; background:linear-gradient(90deg,#eee9e0 0,#f8f4ee 45%,#eee9e0 90%); background-size:800px 100%; animation:idxdShimmer 1.3s linear infinite; } .idxd-skel b{ height:150px; } .idxd-skel s{ height:12px; margin:12px 14px 0; border-radius:6px; text-decoration:none; } .idxd-skel s + s{ width:55%; } @media (max-width:640px){ .idxd-skel{ grid-template-columns:1fr; } .idxd-skel i:nth-child(n+2){ display:none; } } /* the homepage rows (9 Oct 2026, Efren: "it looks like it's resizing"): grey cards the size of iHomeFinder's cards (a 3:2 photo and about 200px of words, measured live), every card shown on phones too, and the homes drawn invisibly over them until they are ready (idx-test-rows.js), then shown in one step with a soft fade */ .idxl-skel{ margin:8px 0 0; gap:15px; } .idxl-skel i{ padding-bottom:0; } .idxl-skel b{ height:auto; aspect-ratio:3/2; } .idxl-skel i::after{ content:""; display:block; height:151px; } @media (max-width:640px){ .idxl-skel i:nth-child(n+2){ display:block; } } .idxl-pending{ position:absolute !important; left:0; right:0; opacity:0; pointer-events:none; } /* (10 Oct 2026) the grey cards take the drawn row's columns (data-cols, set in idx-test-rows.js), so the row does not change height when the homes arrive */ .idxl-skel[data-cols="1"]{ grid-template-columns:1fr; } .idxl-skel[data-cols="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } .idxl-skel[data-cols="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); } .idxl-skel[data-cols] i:nth-child(n+2){ display:block; } /* (13 Oct 2026) once idx-test-rows.js stops iHomeFinder's row box from keeping a stale height and gives the MLS attribution two lines, every row draws the same: a 3:2 photo and 191px of words at every width and column count (tests/_rows-need.mjs). The older numbers here (151/167px of words, a fixed 239px photo on phones) matched the stale heights, not the cards. */ .idxl-skel[data-cols] i::after{ height:191px; } .idxl-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .idxl-in{ animation:idxlIn .45s cubic-bezier(.22,.61,.36,1) both; } @keyframes idxlIn{ from{ opacity:0; } to{ opacity:1; } } @media (prefers-reduced-motion:reduce){ .idxl-in{ animation:none; } } /* 5. the demo banner and its step caption */ .idxd-demo{ background:#1B2A4A; color:#fff; } .idxd-demo__in{ display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; padding:18px 0; } .idxd-demo__txt{ flex:1 1 420px; } .idxd-demo__k{ margin:0 0 4px; color:#EBD9B4; font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; } .idxd-demo h2{ margin:0 0 4px; font-size:clamp(20px,2.4vw,26px); color:#fff; } .idxd-demo p{ margin:0; color:#dfe6f2; font-size:15px; max-width:640px; } .idxd-demo__btns{ display:flex; flex-wrap:wrap; gap:8px; } .idxd-btn{ min-height:44px; padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff; font-family:inherit; font-weight:700; font-size:14.5px; cursor:pointer; transition:background-color .2s ease, transform .12s ease; } .idxd-btn:hover{ background:rgba(255,255,255,.12); } .idxd-btn:active{ transform:scale(.97); } .idxd-btn--play{ background:#B4532A; border-color:#B4532A; } .idxd-btn--play:hover{ background:#9e4723; } .idxd-btn[hidden]{ display:none; } .idxd-btn:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } .idxo-embed .idxd-demo{ display:none; } @media (max-width:640px){ .idxd-demo__btns{ display:grid; grid-template-columns:1fr 1fr; width:100%; } .idxd-btn--play{ grid-column:1 / -1; } .idxd-btn{ font-size:14px; padding:10px 10px; } } .idxd-cap{ position:fixed; z-index:70; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,16px); opacity:0; width:min(560px,calc(100vw - 32px)); display:flex; align-items:center; gap:12px; background:#1B2A4A; color:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 12px 30px rgba(10,18,36,.35); transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s; } .idxd-cap[hidden]{ display:none; } .idxd-cap.is-in{ transform:translate(-50%,0); opacity:1; } .idxd-cap__n{ flex:none; background:#B4532A; border-radius:999px; padding:4px 10px; font-weight:700; font-size:13px; white-space:nowrap; } .idxd-cap__t{ flex:1; font-size:15px; line-height:1.35; } .idxd-cap__x{ flex:none; background:transparent; color:#EBD9B4; border:1px solid rgba(235,217,180,.5); border-radius:999px; padding:6px 12px; min-height:36px; font-family:inherit; font-weight:700; cursor:pointer; } /* View as: the device list */ .idxd-dev{ min-height:40px; border-radius:999px; border:1px solid #d6cdbd; background:#fff; color:#1B2A4A; font-family:inherit; font-weight:600; font-size:14px; padding:6px 14px; max-width:100%; } /* English and Español side by side */ .idxd-both{ padding:18px 0 28px; } .idxd-both[hidden]{ display:none; } .idxd-both__in{ width:min(1400px,96vw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; } .idxd-lang{ border-radius:18px; padding:14px 12px 16px; min-width:0; } .idxd-lang--en{ background:#eef2f8; border:2px solid #c9d3e6; } .idxd-lang--es{ background:#f8efe6; border:2px solid #e8cdb3; } .idxd-lang__h{ display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#1B2A4A; } .idxd-tag{ background:#1B2A4A; color:#fff; border-radius:8px; padding:3px 9px; letter-spacing:.06em; font-size:13px; } .idxd-lang--es .idxd-tag{ background:#B4532A; } @media (max-width:760px){ .idxd-both__in{ grid-template-columns:1fr; } } /* Design 2 on a computer: the bright photo on top and the search below (the tablet look), so the family stays visible */ @media (min-width:1101px){ /* (8 Oct 2026, night, Efren: "fix this image and make the menu longer like this", with a picture of a full team photo behind a long search bar and a town strip along the bottom) the whole photo behind everything, the headline above the family's heads, a compact long search bar low on the photo (below the faces), the towns in a strip along the bottom edge. Heights keep every face clear from 1101 to 1920 wide. */ .idxo-k2 .idxd-hero[data-layout=b]{ position:relative; display:block; isolation:isolate; height:clamp(700px, calc(100vh - 140px), 900px); overflow:hidden; } .idxo-k2 .idxd-hero[data-layout=b] .idxk-bg{ position:absolute; inset:0; height:100%; z-index:-2; } .idxo-k2 .idxd-hero[data-layout=b] .idxk-bg img{ object-position:58% 38%; } .idxo-k2 .idxd-hero[data-layout=b] .idxk-shade{ position:absolute; inset:0; height:100%; z-index:-1; background:linear-gradient(180deg, rgba(17,26,46,.78) 0%, rgba(17,26,46,.42) 19%, rgba(17,26,46,0) 34%, rgba(17,26,46,0) 62%, rgba(17,26,46,.5) 100%); } .idxo-k2 .idxd-hero[data-layout=b] .idxk-in{ position:static; background:transparent; width:auto; margin:0; padding:24px 0 0; height:100%; display:flex; flex-direction:column; } .idxo-k2 .idxd-hero[data-layout=b] .idxk-in > *{ width:min(var(--wrap,1180px),92vw); margin-left:auto; margin-right:auto; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-copy{ max-width:900px; } .idxo-k2 .idxd-hero[data-layout=b] h1{ font-size:clamp(34px,3.2vw,48px); margin-bottom:8px; text-shadow:0 2px 14px rgba(10,18,36,.55); } .idxo-k2 .idxd-hero[data-layout=b] .idxk-eyebrow, .idxo-k2 .idxd-hero[data-layout=b] .idxk-sub{ text-shadow:0 1px 8px rgba(10,18,36,.6); } .idxo-k2 .idxd-hero[data-layout=b] .idxk-sub{ margin-bottom:0; } /* the compact search: Buy | Sell and Homes near me on one row, the long bar under them */ .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2{ position:relative; max-width:1040px; margin-top:auto; margin-bottom:84px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; background:rgba(20,32,58,.80); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:12px 14px 14px; box-shadow:0 18px 40px rgba(10,18,36,.35); } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxd-bs{ order:1; margin:0; width:380px; max-width:60%; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-near{ order:2; margin:0 0 0 auto !important; display:inline-flex; width:auto; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-one{ order:3; flex:1 1 100%; min-height:60px; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-one .idxo-q{ font-size:17px; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-hint{ order:4; flex:1 1 100%; margin:0; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-sug{ top:124px; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-rlinks{ display:none; } /* the towns: a strip along the bottom edge of the photo, the full width of the screen */ .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick:not(.idxo-quick--more){ position:absolute; top:calc(100% + 22px); left:50%; transform:translateX(-50%); width:100vw; margin:0; padding:10px 4vw; display:flex; flex-wrap:nowrap; justify-content:center; gap:8px; background:rgba(14,22,40,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick:not(.idxo-quick--more) button{ border:0; background:transparent; color:#fff; padding:8px 14px; min-height:40px; white-space:nowrap; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick:not(.idxo-quick--more) button[data-city]::before{ content:""; display:inline-block; width:10px; height:13px; margin-right:7px; vertical-align:-1px; background:#EBD9B4; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.8 5 8 5 8s5-4.2 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 0-5 5c0 3.8 5 8 5 8s5-4.2 5-8a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center/contain no-repeat; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick:not(.idxo-quick--more) button:hover{ background:rgba(255,255,255,.12); } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-more{ border:1px dashed rgba(255,255,255,.5) !important; } /* More areas opens above the search, so it never runs off the bottom of the photo */ .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick--more{ position:absolute; bottom:calc(100% + 10px); left:0; right:0; margin:0; padding:12px; justify-content:center; background:rgba(20,32,58,.94); border-radius:16px; border:1px solid rgba(255,255,255,.18); } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-quick--more[hidden]{ display:none; } } /* iPhone Duo open (about 626 x 890, wider than any phone and nearly square): the photo beside the search */ @media (min-width:560px) and (max-width:760px) and (min-aspect-ratio:2/3){ .idxd-hero[data-layout]{ display:grid !important; grid-template-columns:42% 1fr; align-items:stretch; min-height:0; } .idxd-hero[data-layout] .idxk-bg{ grid-column:1; grid-row:1; position:relative; height:auto !important; min-height:100% !important; } .idxd-hero[data-layout] .idxk-bg img{ object-position:58% 40%; border-radius:0 !important; } .idxd-hero[data-layout] .idxk-shade{ display:none; } .idxd-hero[data-layout] .idxk-in{ grid-column:2; grid-row:1; padding:22px 0 26px !important; } .idxd-hero[data-layout] .idxk-in > *, .idxd-hero[data-layout] .idxk-copy > *{ width:auto !important; margin-left:18px !important; margin-right:18px !important; } .idxd-hero[data-layout] .idxk-areas, .idxd-hero[data-layout] .idxo-rstrip{ grid-column:1 / -1; grid-row:2; } .idxd-hero[data-layout] h1{ font-size:28px; } } @media (prefers-reduced-motion:reduce){ .idxd-hero .idxd-pill, .idxd-sticky, .idxd-cap, .idxd-hero button, .idxd-hero .idxo-panel, .idxd-btn, .idxd-hero .idxo-go, .idxd-hero .idxk-go{ transition:none !important; } .idxd-swap *, body.idxd #idxhWidget > *, .idxd-skel b, .idxd-skel s{ animation:none !important; } .idxd-hero .idxo-panel:focus-within, .idxd-hero button:active{ transform:none; } } /* ---- page 13 full preview (8 Oct 2026, night): Land & acreage / A home I saw tabs, the town finder card, and the design bar scrolling away with the page (the real site header is the sticky one here) ---- */ .p-designs .idxo-bar{ position:static; } .idxd-hero .idxd-seg button[data-x]{ white-space:normal; line-height:1.2; } .idxd-hero .is-x .idxo-quick, .idxd-hero .is-x .idxo-near, .idxd-hero .is-x .idxo-recent, .idxd-hero .is-x .idxo-lbl4, .idxd-hero .is-x .idxk-by, .idxd-hero .is-x .idxo-sug{ display:none !important; } .idxd-hero .idxo-s2.is-x .idxo-go .idxo-arr{ display:inline; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxd-bs{ width:auto; max-width:640px; } @media (max-width:640px){ .idxd-hero .idxd-seg button{ font-size:13.5px; padding:9px 4px; } } /* the "Find your town" card under each design: the real homepage's card (.townf, site.css), centred */ .idxd-townf-wrap{ width:min(var(--wrap,1180px),92vw); margin:16px auto 6px; display:flex; justify-content:center; } .idxd-townf-wrap .townf{ width:100%; max-width:660px; } .idxo-embed .idxd-townf-wrap{ margin-top:12px; } /* ---- "Find your town" inside every search box (9 Oct 2026, Efren: "this area makes no sense") ---- */ .idxd-townf-wrap{ display:none; } .idxd-hero .idxd-tf{ display:inline-flex; align-items:center; gap:8px; margin:10px 2px 0; padding:8px 14px; min-height:44px; border-radius:999px; border:1px dashed rgba(255,255,255,.55); background:transparent; color:#fff; font-family:inherit; font-weight:600; font-size:14.5px; text-align:left; cursor:pointer; transition:background-color .2s ease; } .idxd-hero .idxd-tf:hover{ background:rgba(255,255,255,.12); } .idxd-hero .idxd-tf:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } .idxd-hero[data-layout=c] .idxd-tf{ color:#1B2A4A; border-color:#c9bca6; } .idxd-hero[data-layout=c] .idxd-tf:hover{ background:#F3EEE6; } .idxd-hero[data-layout=b] .idxd-tf{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; } .idxd-hero .is-x .idxd-tf{ display:none; } /* design 2 on computers: on the same row as Buy | Sell and Homes near me */ @media (min-width:1101px){ .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxd-tf{ order:2; margin:0 !important; display:inline-flex; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxo-near{ margin-left:10px !important; } .idxo-k2 .idxd-hero[data-layout=b] .idxo-s2 .idxd-bs{ margin-right:auto !important; } } /* "Efren's pick" on Design 1 in the design bar (9 Oct 2026) */ .idxd-pick{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#B4532A; color:#fff; font-size:11px; font-weight:700; letter-spacing:.02em; vertical-align:1px; } /* Design 1 on computers (9 Oct 2026, Efren: "show the boy a little bit more and align it better"): the photo is 12% wider than the screen, held at its left edge, so the family sits further right, clear of the search panel; and it is lifted so the boy shows down to his knees. Page 13 only. */ /* (11 Oct 2026, Efren: new photo, three generations on the front steps, 16:9) the photo fills the box and is cut at 62% across, so the father's face clears the search panel and the grandparents stay on screen (1101-1599); wider screens show the whole width, lifted to the faces. The old 4:3 photo was 112% wide and held at its left edge. */ @media (min-width:1101px){ .idxd-hero[data-layout=a] .idxk-bg{ overflow:hidden; } .idxd-hero[data-layout=a] .idxk-bg img{ object-position:62% 30%; } } @media (min-width:1101px) and (max-width:1279px){ .idxd-hero[data-layout=a] .idxk-bg img{ object-position:88% 30%; } } @media (min-width:1600px){ .idxd-hero[data-layout=a] .idxk-bg img{ object-position:62% 28%; } } /* ---- page 13: one search for all designs (idx-test-search.js, 9 Oct 2026) ---- */ .idxs-drop{ position:absolute; z-index:2147483000; background:#fff; border:1px solid #d9d2c6; border-radius:14px; box-shadow:0 18px 40px rgba(17,26,46,.22); padding:6px; max-height:min(380px,60vh); overflow-y:auto; font-family:"DM Sans",system-ui,sans-serif; color:#1B2A4A; } .idxs-drop[hidden]{ display:none; } .idxs-head{ margin:4px 10px 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b5a4a; } .idxs-opt{ display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:16px; font-weight:600; } .idxs-opt[aria-selected=true], .idxs-opt:hover{ background:#F3EEE6; } .idxs-opt.is-group{ border-bottom:1px solid #eee5d8; border-radius:10px 10px 0 0; margin-bottom:2px; } .idxs-pin{ width:20px; text-align:center; flex:none; color:#B4532A; } .idxs-l{ flex:1; min-width:0; } .idxs-tag{ flex:none; font-size:12px; font-weight:700; color:#1E5631; background:#E7F1EA; border-radius:999px; padding:3px 9px; } .idxs-tag--k{ color:#6b5a4a; background:#F3EEE6; } .idxh-results .idxx{ margin:12px 0 16px; padding:16px; background:#fff; border:1px solid #e6dccf; border-radius:16px; } .idxh-results .idxx[hidden]{ display:none; } .idxx-h{ margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; font-size:18px; color:#1B2A4A; } .idxx-h span{ font-size:15px; color:#5b6478; } .idxx-row{ display:flex; flex-wrap:wrap; gap:8px; } .idxx-row button, .idxx-beds button{ font:inherit; font-family:"DM Sans",system-ui,sans-serif; cursor:pointer; color:#1B2A4A; background:#F6F2EA; border:1px solid #e1d7c9; border-radius:12px; min-height:44px; } .idxx-row button{ flex:1 1 140px; padding:10px 14px; font-size:15px; font-weight:700; } .idxx-row button small{ font-weight:600; font-size:13px; color:#6b5a4a; margin-left:4px; } .idxx-row button small::before{ content:"("; } .idxx-row button small::after{ content:")"; } .idxx-row button[aria-pressed=true], .idxx-beds button[aria-pressed=true]{ background:#1B2A4A; border-color:#1B2A4A; color:#fff; } .idxx-row button[aria-pressed=true] small{ color:#EBD9B4; } .idxx-beds{ display:grid; gap:8px; margin-top:10px; } .idxx-beds button{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; font-size:15px; text-align:left; } .idxx-beds button[aria-pressed=true] .idxx-r{ color:#EBD9B4; } .idxx-r{ color:#6b5a4a; white-space:nowrap; } .idxx-row button:focus-visible, .idxx-beds button:focus-visible, .idxh-mapbtn:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } #idxlRows .idxx-shop{ margin:0 0 28px; } #idxlRows .idxx-shop .idx-h2{ margin:0 0 4px; } .idxx-sub{ margin:0 0 12px; color:#5b6478; font-size:15px; } .idxh-gal{ animation:idxhIn .3s ease-out; } @keyframes idxhIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .idxh-gal{ animation:none; } } .idxh-more{ display:flex; justify-content:center; padding:18px 0 6px; min-height:20px; } .idxh-mapbtn{ font:inherit; font-family:"DM Sans",system-ui,sans-serif; font-weight:700; font-size:16px; color:#fff; background:#B4532A; border:0; border-radius:12px; padding:14px 22px; min-height:48px; cursor:pointer; } .idxh-mapbtn[hidden]{ display:none; } @media (max-width:640px){ .idxx-row button{ flex:1 1 100%; } .idxh-results .idxx{ padding:14px 12px; } } /* (9 Oct 2026, tidy-up) Shop by price under the listings: two per row on phones (it was five stacked buttons, 266px) */ @media (max-width:640px){ #idxlRows .idxx-shop .idxx-row button{ flex:1 1 calc(50% - 4px); padding:10px 8px; font-size:14px; } } .idxh-more{ gap:10px; flex-wrap:wrap; } .idxh-morebtn{ background:#1B2A4A; } .idxx-foot{ margin:12px 2px 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:14px; color:#5b6478; } .idxx-foot a{ color:#9E4A29; font-weight:700; } /* page 13's design bar: the original homepage (page 14) as a link beside the three designs */ .idxo-grp--design .idxd-orig{ display:inline-flex; align-items:center; min-height:40px; padding:6px 14px; margin-left:6px; border:1px dashed currentColor; border-radius:999px; font-weight:700; font-size:14px; color:inherit; text-decoration:none; white-space:nowrap; } .idxo-grp--design .idxd-orig:hover{ background:rgba(255,255,255,.12); } /* /listings and /idx results: ONE search section (ihf-polish.js, 9 Oct 2026): towns, price, beds, baths, one Search */ html.ihfx-one .ihfx-switch{ display:none !important; } /* the price buttons replace the old Under $400k box */ html.ihfx-one .ihfx-towns a[aria-current="true"]:not([data-sel="true"]){ background:#fff; border-color:#d9d1c3; color:#1B2A4A; } html.ihfx-one .ihfx-towns a[data-sel="true"]{ background:#1B2A4A; border-color:#1B2A4A; color:#fff; } .ihfx-filters{ display:grid; grid-template-columns:auto auto auto; justify-content:start; align-items:start; gap:14px 26px; padding-top:14px; border-top:1px solid #ddd3c3; } .ihfx-f{ display:grid; gap:5px; min-width:0; } .ihfx-fl{ font-weight:700; color:#1B2A4A; font-size:15px; } .ihfx-chips{ display:inline-flex; flex-wrap:wrap; border:1px solid #cfc5b4; border-radius:12px; overflow:hidden; background:#fff; width:fit-content; max-width:100%; } .ihfx-chips button{ font:inherit; font-weight:700; font-size:15px; min-width:46px; min-height:44px; padding:0 12px; border:0; border-left:1px solid #e3dccf; background:#fff; color:#1B2A4A; cursor:pointer; white-space:nowrap; } .ihfx-chips button:first-child{ border-left:0; } .ihfx-chips button[aria-pressed="true"]{ background:#1B2A4A; color:#fff; } .ihfx-chips button:focus-visible, .ihfx-go:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } .ihfx-fsum{ font-size:14px; color:#1B2A4A; font-weight:600; } .ihfx-fhint{ font-size:13px; color:#4b5563; } .ihfx-gobar{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; } .ihfx-go{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 28px; border:0; border-radius:12px; background:#B4532A; color:#fff; font:inherit; font-weight:700; font-size:16.5px; cursor:pointer; } .ihfx-go:hover{ background:#9A3412; } .ihfx-go:disabled{ opacity:.8; cursor:progress; } .ihfx-filters.is-dirty .ihfx-go{ box-shadow:0 0 0 4px rgba(180,83,42,.25); } .ihfx-gosum{ margin:0; font-size:14.5px; color:#1B2A4A; } @media (max-width:1100px){ .ihfx-filters{ grid-template-columns:1fr 1fr; } .ihfx-f:first-child{ grid-column:1 / -1; } } @media (max-width:640px){ .ihfx-filters{ grid-template-columns:1fr; gap:12px; } .ihfx-chips{ display:flex; width:100%; } .ihfx-chips button{ flex:1 1 auto; min-width:0; padding:0 8px; } .ihfx-chips--price button{ flex:1 1 30%; border-top:1px solid #e3dccf; } .ihfx-chips--price button:nth-child(-n+3){ border-top:0; } .ihfx-chips--price button:nth-child(4){ border-left:0; } .ihfx-go{ width:100%; } /* a choice is waiting: the Search bar sticks to the bottom of the screen until it is tapped */ html.ihfx-pending .ihfx-gobar{ position:sticky; bottom:0; z-index:5; margin:0 -16px; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:#EDE4D6; box-shadow:0 -6px 16px rgba(17,26,46,.12); } } /* one menu (9 Oct 2026, later): Where box above the town buttons, More filters folded in the same panel, Clear all */ .ihfx-where{ display:grid; gap:6px; max-width:560px; } .ihfx-qwrap{ position:relative; display:flex; align-items:center; background:#fff; border:1px solid #cfc5b4; border-radius:12px; padding-left:12px; color:#B4532A; } .ihfx-qwrap:focus-within{ border-color:#1B2A4A; box-shadow:0 0 0 3px rgba(27,42,74,.15); } .ihfx-qwrap input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:16px; color:#1B2A4A; min-height:48px; padding:0 12px 0 10px; } .ihfx-qwrap input::placeholder{ color:#4b5563; } .ihfx-sug{ position:absolute; left:-1px; right:-1px; top:calc(100% + 6px); z-index:30; list-style:none; margin:0; padding:6px; background:#fff; border:1px solid #d9d1c3; border-radius:12px; box-shadow:0 14px 30px rgba(17,26,46,.18); max-height:320px; overflow-y:auto; } .ihfx-sug[hidden]{ display:none; } .ihfx-sug li{ padding:11px 12px; border-radius:8px; color:#1B2A4A; font-weight:600; cursor:pointer; min-height:44px; box-sizing:border-box; } .ihfx-sug li[aria-selected="true"], .ihfx-sug li[role=option]:hover{ background:#F3EEE6; } .ihfx-sug .ihfx-sugh{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6b5a4a; cursor:default; min-height:0; padding:6px 12px 4px; } .ihfx-more{ grid-column:1 / -1; } .ihfx-moreb{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid #1B2A4A; border-radius:12px; background:#fff; color:#1B2A4A; font:inherit; font-weight:700; font-size:15px; cursor:pointer; } .ihfx-moreb[aria-expanded="true"] svg{ transform:rotate(180deg); } .ihfx-morec{ color:#B4532A; } .ihfx-morep{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px 26px; margin-top:12px; padding:16px; background:rgba(255,255,255,.55); border:1px solid #ddd3c3; border-radius:14px; } .ihfx-morep[hidden]{ display:none; } .ihfx-f--kw input{ font:inherit; font-size:16px; min-height:44px; padding:0 12px; border:1px solid #cfc5b4; border-radius:12px; background:#fff; color:#1B2A4A; } .ihfx-clear{ min-height:44px; padding:0 8px; border:0; background:transparent; color:#9A3412; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; } .ihfx-moreb:focus-visible, .ihfx-clear:focus-visible, .ihfx-f--kw input:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } /* Advanced options (11 Oct 2026): folded inside the filters, opened by a quiet 44px button */ .ihfx-advw{ grid-column:1 / -1; } .ihfx-advb{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border:0; background:transparent; color:#1B2A4A; font:inherit; font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .ihfx-advb[aria-expanded="true"] svg{ transform:rotate(180deg); } .ihfx-advb:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } .ihfx-adv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px 26px; margin-top:8px; padding-top:14px; border-top:1px solid #ddd3c3; } .ihfx-adv[hidden]{ display:none; } .ihfx-f--adv{ grid-column:1 / -1; } @media (max-width:640px){ .ihfx-where{ max-width:none; } .ihfx-morep{ grid-template-columns:1fr; padding:12px; } .ihfx-moreb{ width:100%; justify-content:center; } .ihfx-chips--types button, .ihfx-chips--feat button, .ihfx-chips--age button{ flex:1 1 40%; border-top:1px solid #e3dccf; } .ihfx-adv{ grid-template-columns:1fr; } .ihfx-chips--adv button, .ihfx-chips--yb button, .ihfx-chips--sto button, .ihfx-chips--maxsq button{ flex:1 1 40%; border-top:1px solid #e3dccf; } } /* one menu, polish after the first look (9 Oct 2026): price on its own row, a compact sticky bar on phones */ @media (min-width:641px){ .ihfx-filters{ grid-template-columns:auto auto; } .ihfx-f--price{ grid-column:1 / -1; } .ihfx-chips--price{ flex-wrap:nowrap; } } .ihfx-gosum.is-zero{ color:#9A3412; font-weight:700; } @media (max-width:640px){ html.ihfx-pending .ihfx-gobar{ flex-wrap:nowrap; gap:10px; } html.ihfx-pending .ihfx-gobar .ihfx-go{ flex:1 1 auto; width:auto; min-height:48px; } html.ihfx-pending .ihfx-gobar .ihfx-clear{ flex:0 0 auto; order:2; } html.ihfx-pending .ihfx-gobar .ihfx-gosum{ display:none; } } .idxs-foot{ margin:4px 10px 6px; padding-top:8px; border-top:1px solid #eee5d8; font-size:13px; color:#6b5a4a; } /* page 13: "I'm near the home" and the showing request (idx-test-nearhome.js, 9 Oct 2026) */ .idxd-nearhome{ display:none; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin:10px 0 0; padding:0 16px; border:2px solid #B4532A; border-radius:12px; background:#fff; color:#9A3412; font:inherit; font-weight:700; font-size:16px; cursor:pointer; } .idxo-panel.is-xseen .idxd-nearhome{ display:inline-flex; } .idxd-nearhome:focus-visible{ outline:3px solid #1B2A4A; outline-offset:2px; } .idxnh .sstage__box{ max-width:640px; } .idxnh-wait{ display:flex; gap:8px; margin:18px 0 6px; } .idxnh-wait i{ width:12px; height:12px; border-radius:50%; background:#B4532A; animation:idxnhB 1s infinite ease-in-out; } .idxnh-wait i:nth-child(2){ animation-delay:.15s; } .idxnh-wait i:nth-child(3){ animation-delay:.3s; } @keyframes idxnhB{ 0%,80%,100%{ opacity:.25; transform:scale(.8); } 40%{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .idxnh-wait i{ animation:none; opacity:.6; } } .idxnh-list{ list-style:none; margin:14px 0 6px; padding:0; display:grid; gap:12px; } .idxnh-card{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:10px; border:1px solid #e3dccf; border-radius:14px; background:#fff; } .idxnh-card img, .idxnh-noimg{ width:120px; height:90px; object-fit:cover; border-radius:10px; background:#EDE4D6; display:block; } .idxnh-info{ display:grid; gap:3px; min-width:0; color:#1B2A4A; } .idxnh-info b{ font-size:18px; } .idxnh-addr{ font-weight:600; } .idxnh-meta{ font-size:14px; color:#3b4556; } .idxnh-office{ font-size:12.5px; color:#5b6478; } .idxnh-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px; } .idxnh-acts .btn{ min-height:44px; } .idxnh-acts a{ color:#9E4A29; font-weight:700; } .idxnh-sel{ margin:4px 0 10px; color:#3b4556; font-weight:600; } .idxnh-form{ display:grid; gap:12px; margin-top:10px; } .idxnh-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .idxnh-f{ display:grid; gap:5px; } .idxnh-f label, .idxnh-when legend{ font-weight:700; color:#1B2A4A; font-size:15px; } .idxnh-f input, .idxnh-f textarea, .idxnh-date{ font:inherit; font-size:16px; min-height:46px; padding:8px 12px; border:1px solid #b9c2bd; border-radius:12px; background:#fff; color:#1B2A4A; box-sizing:border-box; width:100%; } .idxnh-f input[aria-invalid="true"]{ border-color:#9A3412; } .idxnh-err{ margin:0; color:#9A3412; font-size:14px; font-weight:600; } .idxnh-when{ border:0; margin:0; padding:0; display:grid; gap:8px; } .idxnh-chips{ display:flex; flex-wrap:wrap; gap:8px; } .idxnh-chip{ font:inherit; font-weight:700; font-size:15px; min-height:44px; padding:0 14px; border:1px solid #cfc5b4; border-radius:999px; background:#fff; color:#1B2A4A; cursor:pointer; } .idxnh-chip[aria-pressed="true"]{ background:#1B2A4A; border-color:#1B2A4A; color:#fff; } .idxnh-chip:focus-visible{ outline:3px solid #B4532A; outline-offset:2px; } .idxnh-consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#3b4556; } .idxnh-consent input{ width:20px; height:20px; margin-top:2px; accent-color:#B4532A; flex:none; } .idxnh-go{ min-height:50px; font-size:16.5px; } .idxnh-practice{ margin:0; font-size:13.5px; color:#6b5a4a; } .idxnh-lic{ margin:14px 0 0; font-size:12.5px; color:#5b6478; } @media (max-width:640px){ .idxnh-two{ grid-template-columns:1fr; } .idxnh-card{ grid-template-columns:96px minmax(0,1fr); } .idxnh-card img, .idxnh-noimg{ width:96px; height:76px; } } /* the real homepage (9 Oct 2026, CMO review): trust line and "Rather talk first?" under the search box */ .idxd-hero .idxd-trust{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:12px 4px 0; padding-top:10px; border-top:1px solid rgba(255,255,255,.16); color:#dfe6f2; font-size:13.5px; line-height:1.4; } .idxd-hero .idxd-trust b{ color:#fff; } .idxd-hero .idxd-talk{ margin:8px 4px 2px; color:#dfe6f2; font-size:13.5px; line-height:1.5; } .idxd-hero .idxd-talk a{ color:#EBD9B4; font-weight:700; } .idxd-hero .idxd-talk a:focus-visible{ outline:2px solid #EBD9B4; outline-offset:2px; } /* the tab labels balance across two lines instead of leaving one word alone */ .idxd-hero .idxk-tabs button, .idxd-hero .idxo-mtabs button{ text-wrap:balance; } /* (9 Oct 2026, CMO review + Efren's screenshot) on phones the floating "Search homes" pill covered headings and even a form label, and the bottom bar already has Search: phones go without it; computers keep it */ @media (max-width:760px){ .idxd-sticky{ display:none !important; } } /* (9 Oct 2026, Efren: "land near me") the Land tab keeps its "near me" button (worded "Land near me") */ .idxd-hero .is-xland .idxo-near{ display:inline-flex !important; } /* (9 Oct 2026, Efren: "a better loading screen" on phones) the loading line rises in softly, and placeholder cards shaped like the homes shimmer under it until the real ones arrive; computers keep the plain loading line */ .idxh-skel{ display:none !important; } @keyframes idxhRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @media (max-width:760px){ .idxh-skel:not([hidden]){ display:grid !important; grid-template-columns:1fr; gap:14px; margin:4px 0 10px; animation:idxhRise .6s cubic-bezier(.22,.61,.36,1) both; } .idxh-skel i b{ height:200px; } .idxh-loading:not([hidden]){ animation:idxhRise .5s cubic-bezier(.22,.61,.36,1) both; } } @media (max-width:760px) and (prefers-reduced-motion:reduce){ .idxh-skel, .idxh-loading{ animation:none !important; } .idxh-skel b, .idxh-skel s{ animation:none !important; } } /* (9 Oct 2026, Efren: "I like this button ... all of them use near me like this") one big button in every tab of the homepage search, in the look of "I'm near the home": Homes near me (Buy), Land near me (Land), I'm near the home (A home I saw), and Call / Text Antonio side by side (Sell) */ .idxd-hero .idxd-bignear{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; margin:12px 0 0; padding:0 16px; border:2px solid #B4532A; border-radius:12px; background:#fff; color:#9A3412; font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1); } .idxd-hero .idxd-bignear[hidden]{ display:none; } .idxd-hero .idxd-bignear:active{ transform:scale(.98); } @media (hover:hover){ .idxd-hero .idxd-bignear:hover{ box-shadow:0 10px 22px -12px rgba(154,52,18,.6); transform:translateY(-1px); } } .idxd-hero .idxd-bignear:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } .idxd-hero .idxd-nearhome{ min-height:52px; margin-top:12px; } .idxd-hero .idxd-selltalk{ display:none; gap:10px; } .idxd-hero .idxd-selltalk .idxd-bignear{ flex:1 1 0; } #idxhForm:has(.idxh-tabs button[data-mode="sell"][aria-pressed="true"]) .idxd-selltalk, #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxd-selltalk{ display:flex; } #idxhForm.is-x .idxd-selltalk{ display:none !important; } @media (prefers-reduced-motion:reduce){ .idxd-hero .idxd-bignear{ transition:none; } .idxd-hero .idxd-bignear:active, .idxd-hero .idxd-bignear:hover{ transform:none; } } #idxhForm .idxo-near.idxd-bignear{ width:100% !important; display:flex; margin:12px 0 0 !important; } #idxhForm .idxo-near.idxd-bignear[hidden]{ display:none !important; } #idxhForm.is-xland .idxo-near.idxd-bignear{ display:flex !important; } /* the town finder link is for buyers: a seller already knows where the home is */ #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxd-tf{ display:none !important; } /* the Search button inside the town list (9 Oct 2026) */ .idxs-go{ display:block; width:calc(100% - 16px); margin:8px; min-height:48px; border:0; border-radius:12px; background:#B4532A; color:#fff; font:inherit; font-weight:700; font-size:16px; cursor:pointer; } .idxs-go:active{ transform:scale(.98); } /* the ranges as one slim bar on phones (9 Oct 2026): homes first; the bar slides the price and bedroom choices open */ .idxx-toggle{ display:none; } @media (max-width:760px){ .idxh-results .idxx{ padding:0 !important; overflow:hidden; } .idxx-toggle{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:10px 16px; border:0; background:transparent; color:#1B2A4A; font:inherit; font-weight:700; font-size:16px; text-align:left; cursor:pointer; } .idxx-toggle span{ flex:1; } .idxx-toggle small{ font-weight:600; font-size:14px; color:#6b5a4a; } .idxx-toggle i{ font-style:normal; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .idxx-toggle[aria-expanded="true"] i{ transform:rotate(180deg); } .idxx-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1); } .idxx-body.is-open{ grid-template-rows:1fr; } .idxx-inner{ overflow:hidden; min-height:0; padding:0 14px; } .idxx-body.is-open .idxx-inner{ padding-bottom:14px; } } @media (max-width:760px) and (prefers-reduced-motion:reduce){ .idxx-body, .idxx-toggle i{ transition:none; } } /* "A home I saw" + open house (9 Oct 2026): a nearby home with an open house on now comes first, marked, and its main button opens the brochure and check-in (idx-test-nearhome.js, assets/js/ihf-openhouse.js) */ .idxnh-card.is-oh{ border-color:#B4532A; box-shadow:0 0 0 2px #B4532A inset; } .idxnh-ohbadge{ display:inline-flex; align-self:flex-start; margin-bottom:4px; padding:5px 10px; border-radius:999px; background:#B4532A; color:#fff; font:700 13px/1.1 "DM Sans",system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; } .idxnh-alt{ min-height:44px; padding:8px 4px; border:0; background:none; color:#1B2A4A; font:700 15px/1.3 "DM Sans",system-ui,sans-serif; text-decoration:underline; cursor:pointer; } /* (10 Oct 2026, Design seat) the town strip's arrows were see-through, so a chip scrolling under the next arrow showed a pin with no name ("Linda"). They take the band's colour, with a short fade on the chip side */ .idxo-strip5 .idxk-arrow{ position:relative; z-index:1; background:rgb(20,32,58); } .idxo-strip5 #idxkNext{ box-shadow:-16px 0 14px -4px rgb(20,32,58); } .idxo-strip5 #idxkPrev{ box-shadow:16px 0 14px -4px rgb(20,32,58); } .idxo-strip5 .idxk-arrow:hover:not(:disabled){ background:rgb(36,50,80); } /* a chip cut by the strip's edge showed only its pin: the edges fade, so a part-shown chip reads as "more this way" */ .idxo-strip5 #idxhQuick{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 40px), transparent 100%); } /* (11 Oct 2026) the longer must-haves wrap onto two lines instead of being cut off ("Bank-owned or short s…") */ .ihfx-chips--adv button{ white-space:normal; line-height:1.25; padding-top:8px; padding-bottom:8px; } /* "Check in at a home" (12 Oct 2026, Efren; assets/js/checkin.js): beside "Homes near me" on the homepage, filled so it reads as the one thing to tap when standing at a home for sale */ .idxo-checkin{ display:inline-flex; align-items:center; gap:8px; margin:12px 2px 0; padding:8px 16px; min-height:44px; border-radius:999px; border:1px solid #B4532A; background:#B4532A; color:#fff; font:inherit; font-weight:700; font-size:15px; cursor:pointer; } .idxo-checkin:hover{ background:#9A3412; border-color:#9A3412; } .idxo-checkin:focus-visible{ outline:3px solid #fff; outline-offset:2px; } .idxo-hero[data-layout=c] .idxo-checkin:focus-visible, .idxo-hero[data-layout=r] .idxo-checkin:focus-visible{ outline-color:#1B2A4A; } .idxd-hero .is-x .idxo-checkin, .idxo-s3.is-land .idxo-checkin, .idxo-s3.is-sell .idxo-checkin{ display:none !important; } /* the homepage search (#idxhForm): one row with "Homes near me", wrapping to two full-width buttons on phones */ #idxhForm .idxd-nearrow{ display:flex; flex-wrap:wrap; column-gap:10px; } #idxhForm .idxd-nearrow .idxd-bignear{ flex:1 1 220px; width:auto !important; margin:12px 0 0 !important; } /* (13 Oct 2026, Efren) the Spanish "Registrarme en una casa" wrapped to two lines beside "Casas cerca de mí" on computers (two equal halves of about 242px; it needs about 260px): each button takes its own text's width and never wraps inside, so both fit one line; where they do not fit side by side (phones) each still gets its own full-width row */ #idxhForm .idxd-nearrow .idxd-bignear{ flex:1 1 auto; white-space:nowrap; } /* (14 Oct 2026, Efren + CMO) Check in is for people standing at an open house: a quiet outline, so "Find your home" stays the one main action */ .idxd-hero .idxd-bignear.idxo-checkin{ border-radius:12px; border:1px solid #CDBFA8; background:#fff; color:#1B2A4A; font-size:16px; font-weight:600; } @media (hover:hover){ .idxd-hero .idxd-bignear.idxo-checkin:hover{ border-color:#1B2A4A; box-shadow:none; } } .idxd-hero .idxd-bignear.idxo-checkin:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxo-checkin, #idxhForm.is-xland .idxo-checkin, #idxhForm.is-x .idxo-checkin{ display:none !important; } /* (12 Oct 2026, Efren's homepage brief) land and acreage as a quiet secondary link under the homepage search */ .idxd-landp{ margin:10px 0 0; } .idxd-landlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; color:#fff; font:inherit; font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; } .idxd-landlink:hover{ color:var(--gold-soft,#F7E7DE); } .idxd-landlink:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; border-radius:6px; } #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxd-landp{ display:none; } /* (12 Oct 2026, Efren's brief) "Filters" under the homepage search box: the Search by picker, a top price and bedrooms */ .idxd-fbtn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:10px 0 0; padding:0 16px; border:1.5px solid rgba(255,255,255,.55); border-radius:999px; background:transparent; color:#fff; font:inherit; font-weight:700; font-size:15px; cursor:pointer; } .idxd-fbtn:hover{ background:rgba(255,255,255,.12); } .idxd-fbtn:focus-visible{ outline:3px solid #EBD9B4; outline-offset:2px; } .idxd-fbtn[aria-expanded="true"]{ background:#fff; color:#1B2A4A; border-color:#fff; } .idxd-filters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0 0; padding:14px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); } .idxd-filters[hidden]{ display:none; } .idxd-filters__f{ display:flex; flex-direction:column; gap:6px; color:#fff; font-size:14px; font-weight:700; } .idxd-filters__f .idxk-by{ display:flex; flex-direction:column; gap:6px; } .idxd-filters__f .idxk-sr{ position:static !important; width:auto !important; height:auto !important; clip:auto !important; overflow:visible !important; white-space:normal !important; color:#fff; font-size:14px; font-weight:700; } .idxd-filters select{ width:100%; min-height:46px; padding:0 12px; border-radius:10px; border:0; background:#fff; color:#1B2A4A; font:inherit; font-size:16px; font-weight:600; } .idxd-filters__note{ grid-column:1/-1; margin:0; color:#E8ECF3; font-size:14px; } #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxd-fbtn, #idxhForm:has([data-mode="sell"][aria-pressed="true"]) .idxd-filters{ display:none !important; } /* the town finder with the town guides (light background), no longer in the search box */ .idxd-tf.idxd-tf--areas{ display:inline-flex; align-items:center; gap:8px; min-height:48px; margin:28px 0 0; padding:0 18px; border:2px solid var(--gold-btn,#B4552F); border-radius:999px; background:#fff; color:var(--gold,#9E4A29); font:inherit; font-weight:700; font-size:16px; cursor:pointer; } .idxd-tf.idxd-tf--areas:hover{ background:var(--gold-soft,#F7E7DE); } .idxd-tf.idxd-tf--areas:focus-visible{ outline:3px solid #1B2A4A; outline-offset:2px; } /* (12 Oct 2026, Efren's brief: mobile readability; town discovery out of the primary search) the homepage hero: 14px+ text on phones, and no town strip under the search (the town guides further down keep every town) */ .idxd-hero .idxd-talk{ font-size:15px; } .idxd-hero #idxhForm .idxh-tabs button{ font-size:15px; } .idxd-hero .idxo-strip5{ display:none !important; } /* a row with no homes because iHomeFinder is down (12 Oct 2026, idx-test-rows.js down()): the message sits in the middle of the space the grey cards held, so nothing moves */ .idxl-isdown{ position:relative; } .idxl-down{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); margin:0 auto; max-width:520px; padding:22px 20px; border:1px solid #E4DCCB; border-radius:16px; background:#fff; text-align:center; color:#1B2A4A; } .idxl-down p{ margin:0 0 10px; font-size:16px; line-height:1.55; color:#4A5568; } .idxl-down .idxl-down__h{ font-weight:700; font-size:17px; color:#1B2A4A; } .idxl-down__go{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0 0 !important; } .idxl-down__go .btn{ min-height:44px; }