/* ishvhome.com — shared styles This file also styles the IDX Broker wrapper, so their search pages inherit the same type, color, and spacing as the rest of the site. */ :root{ --snow:#F4F6F2; --paper:#FFFFFF; --paper-2:#ECEFE9; --ink:#16291F; --granite:#59655C; --line:#D6DBD2; --lake:#2F5D6E; --lake-soft:#E3EDF0; --gold:#8C6A22; --shadow:0 1px 2px rgba(22,41,31,.06), 0 8px 24px -12px rgba(22,41,31,.18); --serif:"Fraunces",Georgia,serif; --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --maxw:1180px; --r:3px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--snow);color:var(--ink);font-family:var(--sans); font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;line-height:1.1;letter-spacing:-.015em} h1{font-size:clamp(2.3rem,5.4vw,3.9rem)} h2{font-size:clamp(1.75rem,3.2vw,2.4rem)} h3{font-size:1.22rem;line-height:1.25} p{margin:0 0 1em} a{color:inherit} :focus-visible{outline:2px solid var(--lake);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--paper);padding:10px 16px;z-index:200;border:1px solid var(--ink)} /* header */ /* body > header: only the site's own top bar. IDX's listing page has its own
, and without this it also turned sticky and slid over ours. */ body > header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--snow) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:26px;height:68px} .brand{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;min-width:0;line-height:1.15} .brand b{font-family:var(--serif);font-weight:600;font-size:1.16rem;letter-spacing:-.02em;white-space:nowrap} .brand span{font-size:.7rem;color:var(--granite);letter-spacing:.04em;text-transform:uppercase} nav.main{display:flex;gap:22px} nav.main a{text-decoration:none;font-size:.93rem;color:var(--granite);padding:4px 0;border-bottom:1.5px solid transparent} nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--lake)} .tel{text-decoration:none;font-size:.9rem;font-weight:600;padding:9px 16px;border:1px solid var(--ink); border-radius:var(--r);white-space:nowrap} .tel:hover{background:var(--ink);color:var(--snow)} .menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r); padding:8px 12px;color:inherit;font:inherit;cursor:pointer} @media (max-width:940px){ nav.main{display:none;position:absolute;left:0;right:0;top:68px;background:var(--snow); border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:6px 24px 18px} nav.main.open{display:flex} nav.main a{padding:12px 0;border-bottom:1px solid var(--line)} .menu-btn{display:block}.tel{display:none} } /* hero */ .hero{position:relative;background:var(--ink);color:#EEF2EC} .hero .topo{position:absolute;inset:0;width:100%;height:100%;display:block} .hero-in{position:relative;padding-top:76px;padding-bottom:86px} /* top/bottom only: keeps .wrap's side margins */ .hero.sm .hero-in{padding-top:56px;padding-bottom:60px} .hero h1{max-width:16ch;color:#F3F6F0} .hero .lede{max-width:48ch;color:#B6C4B9;font-size:1.05rem;margin:20px 0 0} .hero .eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA894;margin:0 0 18px} /* IDX search form */ .search{position:relative;margin:38px 0 0;background:var(--paper);color:var(--ink); border-radius:var(--r);box-shadow:var(--shadow);display:grid; grid-template-columns:1.4fr 1fr 1fr .6fr .6fr auto;border:1px solid var(--line)} .f{padding:13px 18px;border-right:1px solid var(--line);min-width:0;display:flex;flex-direction:column;gap:2px} .f label{font-size:.71rem;color:var(--granite)} .f input,.f select{border:none;background:none;color:inherit;font:inherit;font-size:.96rem; padding:0;width:100%;min-width:0;appearance:none} .f select{cursor:pointer;padding-right:18px;line-height:1.5; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%2359655C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center} .f select:hover{color:var(--lake)} .f input:focus,.f select:focus{outline:none} .f:focus-within{background:var(--lake-soft)} .search > button[type=submit]{border:none;background:var(--lake);color:#fff;font:inherit; font-weight:600;font-size:.96rem;padding:0 32px;cursor:pointer; border-radius:0 var(--r) var(--r) 0} .search > button[type=submit]:hover{filter:brightness(1.12)} @media (max-width:820px){ .search{grid-template-columns:1fr 1fr} .f{border-bottom:1px solid var(--line)} /* city on its own row, then price | home type, beds | baths */ .f.city-field{grid-column:1/-1;border-right:none} .f:nth-child(even){border-right:1px solid var(--line)} .f:nth-child(odd){border-right:none} .search > button[type=submit]{grid-column:1/-1;padding:15px; border-radius:0 0 var(--r) var(--r)} } .quick{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 0} .quick a{text-decoration:none;font-size:.84rem;padding:6px 14px;border-radius:100px; border:1px solid rgba(255,255,255,.28);color:#D8E2DA} .quick a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} /* sections */ /* only the site's own page sections; IDX pages use
tags internally too */ main > section{padding:76px 0;border-top:1px solid var(--line)} main > section.plain{border-top:none} .head{margin-bottom:32px;max-width:60ch} .head p{color:var(--granite);margin:12px 0 0;font-size:1rem} .lead{font-size:1.06rem;color:var(--granite);max-width:56ch} /* IDX widget mount */ .idx-mount{min-height:220px} .idx-pending{border:1px dashed var(--line);border-radius:var(--r);padding:44px 24px;text-align:center; color:var(--granite);font-size:.92rem;background:var(--paper)} /* buttons */ .btn{font:inherit;font-size:.95rem;font-weight:500;padding:12px 24px;border-radius:var(--r); border:1px solid var(--ink);background:var(--ink);color:var(--snow);cursor:pointer; text-decoration:none;display:inline-block} .btn:hover{filter:brightness(1.2)} .btn.ghost{background:none;color:var(--ink)} .btn.ghost:hover{background:var(--paper-2);filter:none} .btn.lg{padding:15px 32px;font-size:1rem} /* two column */ .two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .two.center{align-items:center} @media (max-width:880px){.two{grid-template-columns:1fr;gap:36px}} .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px} /* portrait */ .portrait{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)} .portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover} /* stats */ .stats{display:flex;gap:36px;flex-wrap:wrap;margin:30px 0 0;padding-top:26px;border-top:1px solid var(--line)} .stats div b{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-.02em} .stats div span{font-size:.85rem;color:var(--granite)} /* cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media (max-width:880px){.cards{grid-template-columns:1fr}} .pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 28px} .pcard h3{margin-bottom:10px} .pcard p{color:var(--granite);font-size:.94rem;margin:0} /* forms */ .field{margin-bottom:18px} .field label{display:block;font-size:.88rem;margin-bottom:7px} .field label span{color:var(--granite);float:right;font-variant-numeric:tabular-nums} .field input[type=text],.field input[type=email],.field input[type=tel], .field input[type=number],.field textarea,.field select{ width:100%;font:inherit;font-size:.97rem;padding:11px 13px;border:1px solid var(--line); border-radius:var(--r);background:var(--paper);color:var(--ink)} .field textarea{min-height:110px;resize:vertical} input[type=range]{width:100%;accent-color:var(--lake);margin:4px 0 0} .ok{background:var(--lake-soft);border:1px solid var(--lake);padding:15px 17px; border-radius:var(--r);font-size:.93rem;margin-top:16px} .hp{position:absolute;left:-9999px} /* calculator */ .calc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start} @media (max-width:880px){.calc{grid-template-columns:1fr;gap:32px}} .fields{display:grid;gap:20px} .out{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px} .big{font-family:var(--serif);font-size:clamp(2.2rem,4.4vw,2.9rem);font-weight:600; letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1} .big small{display:block;font-family:var(--sans);font-size:.85rem;font-weight:400; color:var(--granite);letter-spacing:0;margin-top:9px} .rows{margin:22px 0 0;border-top:1px solid var(--line)} .rows div{display:flex;justify-content:space-between;gap:16px;padding:10px 0; border-bottom:1px solid var(--line);font-size:.92rem} .rows dt{color:var(--granite)} .rows dd{margin:0;font-variant-numeric:tabular-nums} .disclaim{font-size:.81rem;color:var(--granite);margin:16px 0 0;line-height:1.55} /* quote */ blockquote{margin:0;font-family:var(--serif);font-size:1.28rem;line-height:1.45; border-left:2px solid var(--lake);padding-left:22px} blockquote footer{font-family:var(--sans);font-size:.88rem;color:var(--granite);margin-top:13px} /* contact rows */ .crow{display:grid;gap:13px;margin-top:26px;font-size:1rem} .crow a{font-weight:500} /* footer */ footer{background:var(--ink);color:#AFBFB3;padding:54px 0 32px;font-size:.9rem} footer a{color:#DCE4DA} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12)} @media (max-width:760px){.fgrid{grid-template-columns:1fr;gap:26px}} .fgrid h4{font-size:1.04rem;color:#F3F6F0;margin:0 0 12px} .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .fgrid ul a{text-decoration:none} .fgrid ul a:hover{text-decoration:underline} .eho{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.78rem;color:#8FA093} .eho svg{flex:none} .idx-legal{margin:24px 0 0;font-size:.76rem;line-height:1.6;color:#8FA093;max-width:94ch} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} /* review stars */ .rstars{color:var(--gold);letter-spacing:2px;font-size:.95rem;line-height:1} /* card icons */ .cicon{width:48px;height:40px;color:var(--lake);display:block;margin-bottom:16px} /* ---------- client slideshow (about page) ---------- */ .showcol{position:static} .show{position:relative;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;background:var(--paper-2)} .show-frame{position:relative;aspect-ratio:4/5} .cslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .45s ease} .cslide.is-on{opacity:1} .carrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px; border-radius:100px;border:none;background:rgba(255,255,255,.92);color:#16291F; font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center; padding:0 0 3px;box-shadow:0 2px 10px rgba(0,0,0,.22);opacity:.72;transition:opacity .2s} .show:hover .carrow,.carrow:focus-visible{opacity:1} .carrow.prev{left:12px}.carrow.next{right:12px} .carrow:hover{background:#fff} .cdots{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap} .cdot{width:8px;height:8px;border-radius:100px;border:none;padding:0;cursor:pointer; background:var(--line);transition:background .2s,width .2s} .cdot.is-on{background:var(--lake);width:22px} /* review text + attribution box */ .creview{margin:24px 0 0;font-family:var(--serif);font-size:1.12rem;line-height:1.5; border-left:2px solid var(--lake);padding-left:20px} .cbox{background:var(--ink);color:#F3F6F0;border-radius:var(--r);padding:18px 22px;margin-top:16px; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .cbox-stars{color:#E3B85C;letter-spacing:3px;font-size:1.05rem;line-height:1} .cbox-who{font-family:var(--serif);font-size:1.16rem;font-weight:500;color:#FFFFFF; letter-spacing:-.01em} @media (max-width:880px){.creview{font-size:1.06rem} .cbox{flex-direction:column;align-items:flex-start;gap:8px}} /* blockquote footer should never inherit the page footer's dark background */ blockquote footer{background:none;color:var(--granite);padding:0} /* about page: photo column carries the slideshow + review */ .two.about-split{grid-template-columns:minmax(0,46%) 1fr;gap:0 52px;align-items:start} .about-split > .showcol{grid-column:1;grid-row:1 / span 2} .about-split > .biocol{grid-column:2;grid-row:1} .about-split > .contactcol{grid-column:2;grid-row:2;margin-top:8px} @media (max-width:880px){ /* phones read: bio, then photos and reviews, then contact details */ .two.about-split{grid-template-columns:1fr;gap:40px} .about-split > .biocol{grid-column:1;grid-row:1} .about-split > .showcol{grid-column:1;grid-row:2} .about-split > .contactcol{grid-column:1;grid-row:3;margin-top:0} } /* contact links: no underline, so nothing reads as a stray mark before the number */ .crow a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)} .crow a:hover{border-bottom-color:var(--ink)} /* IDX Broker embedded widgets (our own pages only: IDX's results page also uses a .idx-map class, so these rules are scoped to .idx-mount) */ .idx-mount.idx-map{min-height:640px} .idx-mount.idx-map iframe{width:100%;border:0} #IDX-main{max-width:100%} @media (max-width:760px){.idx-mount.idx-map{min-height:520px}} .idx-carousel{min-height:420px} @media (max-width:760px){.idx-carousel{min-height:520px}} /* email typo hint */ .email-hint{font-size:.85rem;color:var(--granite);margin:7px 0 0} .email-fix{font:inherit;font-size:.85rem;background:none;border:none;padding:0; color:var(--lake);text-decoration:underline;cursor:pointer} /* city autocomplete */ .city-field{position:relative} .city-list{position:absolute;left:0;right:0;top:100%;z-index:70;margin:0;padding:6px 0; list-style:none;background:var(--paper);border:1px solid var(--line); border-top:none;border-radius:0 0 var(--r) var(--r); box-shadow:0 12px 28px -12px rgba(22,41,31,.3);max-height:300px;overflow-y:auto} .city-list li{padding:9px 18px;font-size:.95rem;cursor:pointer;color:var(--ink); display:flex;align-items:baseline;justify-content:space-between;gap:14px} .city-name{white-space:nowrap} .city-sub{font-size:.82rem;color:var(--granite);white-space:nowrap} .city-list li:hover,.city-list li.is-on{background:var(--lake-soft)} .city-list li b{font-weight:600;color:var(--lake)} @media (max-width:820px){ .city-list{border-top:1px solid var(--line);border-radius:var(--r)} } /* ---------- map search card (search page) ---------- */ .map-cta{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:0;text-decoration:none; color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .2s,border-color .2s} .map-cta:hover{border-color:var(--lake);box-shadow:0 2px 4px rgba(22,41,31,.06),0 18px 40px -18px rgba(22,41,31,.35)} .map-cta-text{padding:44px 44px 48px} .map-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.12;letter-spacing:-.02em;margin:0 0 14px} .map-cta p{color:var(--granite);margin:0 0 26px;max-width:36ch} .map-cta-art{display:block;width:100%;height:100%;min-height:300px} .map-cta:hover .btn{filter:brightness(1.2)} @media (max-width:820px){ .map-cta{grid-template-columns:1fr} .map-cta-art{order:-1;min-height:0;height:auto} .map-cta-text{padding:28px 24px 32px} } /* ---------- price range control ---------- */ .price-field{position:relative} .price-btn{font:inherit;font-size:.96rem;color:var(--ink);background:none;border:none; padding:0;text-align:left;cursor:pointer;width:100%;line-height:1.5; display:flex;align-items:center;justify-content:space-between;gap:8px} .price-btn::after{content:"";width:7px;height:7px;flex:none;margin-right:2px; border-right:1.5px solid var(--granite);border-bottom:1.5px solid var(--granite); transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s} .price-btn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-3px,-3px)} .price-btn:hover{color:var(--lake)} .price-pop{position:absolute;left:-1px;top:calc(100% + 1px);z-index:80; width:min(360px,88vw);background:var(--paper); border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px; box-shadow:0 18px 40px -16px rgba(22,41,31,.38)} .price-read{display:flex;align-items:baseline;gap:11px;font-family:var(--serif); font-size:1.34rem;font-weight:600;letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-bottom:26px;color:var(--ink)} .price-to{font-family:var(--sans);font-size:.82rem;font-weight:400;color:var(--granite)} .range-wrap{position:relative;height:24px;margin:0 11px 4px} .range-track{position:absolute;top:10px;left:-11px;right:-11px;height:4px; background:var(--paper-2);border-radius:2px} .range-fill{position:absolute;top:0;height:100%;background:var(--lake);border-radius:2px} .range-wrap input[type=range]{position:absolute;top:0;left:-11px;width:calc(100% + 22px); height:24px;margin:0;padding:0;background:none; pointer-events:none;-webkit-appearance:none;appearance:none} .range-wrap input[type=range]:focus{outline:none} .range-wrap input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;pointer-events:auto; width:22px;height:22px;border-radius:50%;background:var(--paper); border:2.5px solid var(--lake);cursor:grab; box-shadow:0 2px 6px rgba(22,41,31,.25);transition:transform .12s} .range-wrap input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} .range-wrap input[type=range]::-webkit-slider-thumb:active{cursor:grabbing; background:var(--lake);transform:scale(1.12)} .range-wrap input[type=range]::-moz-range-thumb{ pointer-events:auto;width:22px;height:22px;border-radius:50%;background:var(--paper); border:2.5px solid var(--lake);cursor:grab;box-shadow:0 2px 6px rgba(22,41,31,.25)} .range-wrap input[type=range]::-moz-range-track{background:none;border:none} .range-wrap input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--lake);outline-offset:3px} .price-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px; padding-top:18px;border-top:1px solid var(--line)} .price-quick button{font:inherit;font-size:.85rem;padding:9px 10px;cursor:pointer; border:1px solid var(--line);border-radius:var(--r); background:var(--paper);color:var(--granite);text-align:center; white-space:nowrap} .price-quick button:hover{border-color:var(--lake);color:var(--lake);background:var(--lake-soft)} .price-quick button:last-child{grid-column:1/-1} @media (max-width:820px){ /* on phones Price is now the left-hand box (Home type sits to its right), so the pop-up opens from the box's left edge and never wider than the screen allows */ .price-pop{left:-1px;right:auto;transform:none;width:min(340px,calc(100vw - 48px))} } /* ============================================================ IDX Broker hosted pages (search.ishvhome.com) These load after IDX's own stylesheets. Every rule starts with #IDX-main so it outranks IDX's class-based rules and never touches the rest of the site. ============================================================ */ /* type and color */ #IDX-main{font-family:var(--sans);color:var(--ink);font-size:1rem;line-height:1.5} #IDX-main :is(div,span,p,a,button,input,select,textarea,label,legend,li,dt,dd,td,th,h1,h2,h3,h4,h5,h6){ font-family:var(--sans)} #IDX-main, #IDX-main *{text-transform:none !important;letter-spacing:normal !important} #IDX-main :is(h1,h2,h3,h4){font-family:var(--serif);font-weight:500;color:var(--ink)} /* buttons: solid ink for the main action, outlined for everything else */ #IDX-main .IDX-btn{font-size:.93rem;font-weight:500;line-height:1.3;height:auto; padding:10px 18px;border-radius:var(--r);box-shadow:none;text-decoration:none} #IDX-main .IDX-btn-primary, #IDX-main #IDX-refinementSearchForm > .IDX-btn{background:var(--ink);border:1px solid var(--ink);color:var(--snow)} #IDX-main .IDX-btn-primary:hover, #IDX-main #IDX-refinementSearchForm > .IDX-btn:hover{background:var(--ink);color:var(--snow);filter:brightness(1.25)} #IDX-main .idx-dropdown > .IDX-btn, #IDX-main .IDX-btn__PL--inverse{background:var(--paper) !important;border:1px solid var(--line) !important; color:var(--ink) !important} #IDX-main .idx-dropdown > .IDX-btn:hover, #IDX-main .idx-dropdown > .IDX-btn[aria-expanded="true"], #IDX-main .IDX-btn__PL--inverse:hover{border-color:var(--ink) !important;filter:none} /* keep every button's label centred top to bottom (Save Search was sitting high) */ #IDX-main #IDX-refinementSearchForm .IDX-btn{display:inline-flex;align-items:center;justify-content:center} #IDX-main .idx-dropdown > .IDX-btn .fa{margin-left:8px;color:var(--granite)} #IDX-main .IDX-btn-link{background:none;border-color:transparent;color:var(--lake)} /* New Search / Modify Search: quiet text links, like the site nav */ #IDX-main .IDX-topAction .IDX-btn{background:none;border:0;border-radius:0;padding:4px 0;margin-left:22px; color:var(--granite);border-bottom:1.5px solid transparent} #IDX-main .IDX-topAction .IDX-btn:hover{color:var(--ink);border-bottom-color:var(--lake);background:none} /* filter dropdown panels */ #IDX-main .idx-dropdown__menu{background:var(--paper);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow);min-width:300px;padding:18px 20px} #IDX-main .idx-dropdown__menu legend{font-family:var(--serif);font-size:1.05rem;color:var(--ink); border-bottom:1px solid var(--line)} #IDX-main .idx-dropdown__menu input[type=text]{display:block;width:100%;margin:0 0 10px; border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--paper);color:var(--ink)} /* results summary: one quiet line instead of a blue box */ #IDX-main .IDX-results__alert{background:none;border:0;padding:0;margin:14px 0 0; color:var(--granite);font-size:.9rem} #IDX-main .idx-results__header{border-color:var(--line)} #IDX-main .idx-results-total__heading{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ink)} #IDX-main .idx-results__category--title{font-family:var(--serif);font-size:1.2rem;color:var(--ink)} /* results with map (city, ZIP and home page searches): on desktop, use more of the screen, a taller map, and listings two across in the side panel */ @media (min-width:961px){ main > .wrap:has(#IDX-main.IDX-page-listings){max-width:1520px} /* IDX gives the whole results area a fixed 800px height and squeezes the map inside it. Let it grow instead, and size the map/list box ourselves. (#IDX-main twice = extra weight) */ #IDX-main#IDX-main.IDX-page-listings{max-width:none !important;height:auto !important;max-height:none !important} #IDX-main#IDX-main .idx-results.idx-results--map{height:auto !important;max-height:none !important;flex:none !important} #IDX-main#IDX-main #idx-results-content.idx-results__content{display:grid !important;flex:none !important; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;--iv-panel-h:clamp(560px,calc(100vh - 170px),940px); height:var(--iv-panel-h) !important;max-height:none !important;margin-top:8px} #IDX-main#IDX-main #idx-results-content > #IDX-map{height:100% !important;max-height:none !important; min-height:0 !important;width:auto !important;float:none !important;margin:0 !important} #IDX-main#IDX-main #idx-results-content > .idx-results__listings{height:100% !important;max-height:none !important; min-height:0 !important;width:auto !important;float:none !important;margin:0 !important; overflow-y:auto !important;padding:0 6px 0 0 !important} #IDX-main .idx-results--map .idx-results__category{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;margin-bottom:18px} #IDX-main .idx-results--map .idx-results__listing{width:auto !important;float:none !important;margin:0 !important; min-width:0} #IDX-main .idx-results--map .idx-results__category--title{margin:4px 0 10px} } #IDX-main .idx-map{border-radius:var(--r);overflow:hidden} /* listing cards */ #IDX-main .idx-listing-card{border-radius:var(--r);overflow:hidden} #IDX-main .idx-listing-card__price{font-family:var(--serif);font-weight:500} #IDX-main .idx-listing-card__courtesy{color:var(--granite);font-size:.78rem} #IDX-main .IDX-badge{border-radius:var(--r)} /* ---------- IDX map search page (/idx/map/mapsearch) ---------- */ #IDX-main.IDX-page-mapsearch hr.no-gap-hr{border:0;border-top:1px solid var(--line);margin:0} /* Advanced Search / Listing ID / Address / Map Search: quiet tabs instead of blue buttons */ #IDX-main.IDX-page-mapsearch .idx-nav-button-container{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 0} #IDX-main.IDX-page-mapsearch .idx-nav-button{background:none !important;border:0 !important;border-radius:0 !important; box-shadow:none !important;padding:10px 0 12px !important;margin:0 !important;color:var(--granite) !important; font-size:.95rem;font-weight:500;text-decoration:none;border-bottom:2px solid transparent !important;opacity:1 !important} #IDX-main.IDX-page-mapsearch .idx-nav-button:hover{color:var(--ink) !important} #IDX-main.IDX-page-mapsearch .idx-nav-button__active{color:var(--ink) !important;border-bottom-color:var(--lake) !important} /* location box and filter buttons on one row */ #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar{display:flex !important;align-items:center; justify-content:space-between;gap:14px 18px;flex-wrap:wrap;padding:18px 0 !important;margin:0 !important; height:auto !important;min-height:0 !important} #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar > div, #IDX-main.IDX-page-mapsearch #fly-to-options-containers{margin:0 !important;padding:0 !important;border:0 !important; height:auto !important;min-height:0 !important;width:auto} #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar__flyto{flex:1 1 340px;max-width:480px} #IDX-main.IDX-page-mapsearch #fly-to-options-containers{width:100% !important} #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field{display:flex !important;align-items:center;gap:10px;width:100% !important; min-height:48px;height:auto !important;margin:0 !important;background:var(--paper);border:1px solid var(--line) !important; border-radius:var(--r);padding:0 14px !important;box-shadow:none} #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field:focus-within{border-color:var(--lake);box-shadow:0 0 0 3px var(--lake-soft)} #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field > section{display:flex;align-items:center;margin:0;padding:0;position:static} #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field > section svg{width:17px;height:17px;color:var(--granite);fill:var(--granite)} #IDX-main.IDX-page-mapsearch .vue-tags-input{flex:1;max-width:none !important;background:none !important} #IDX-main.IDX-page-mapsearch .ti-input{border:0 !important;padding:10px 0 !important;background:none !important; min-height:0 !important;height:auto !important} #IDX-main.IDX-page-mapsearch .ti-new-tag-input-wrapper{margin:0 !important;padding:0 !important;flex:1} #IDX-main.IDX-page-mapsearch .ti-new-tag-input{width:100% !important;min-width:12ch} #IDX-main.IDX-page-mapsearch .ti-new-tag-input{font-size:.98rem !important;color:var(--ink);background:none} #IDX-main.IDX-page-mapsearch .ti-new-tag-input::placeholder{color:var(--granite)} #IDX-main.IDX-page-mapsearch .ti-tag{background:var(--lake) !important;border-radius:var(--r) !important} #IDX-main.IDX-page-mapsearch .filter-buttons-container{display:flex;gap:10px;flex-wrap:wrap} #IDX-main.IDX-page-mapsearch .idx-filter-button{background:var(--paper) !important;border:1px solid var(--line) !important; border-radius:var(--r) !important;color:var(--ink) !important;padding:11px 16px !important;box-shadow:none !important; height:auto !important;min-height:0 !important;line-height:1.3;font-size:.93rem;font-weight:500;cursor:pointer} #IDX-main.IDX-page-mapsearch .idx-filter-button:hover{border-color:var(--ink) !important} #IDX-main.IDX-page-mapsearch .idx-filter-button > div{display:flex;align-items:center;gap:8px} #IDX-main.IDX-page-mapsearch .idx-filter-button svg{width:12px;height:12px} /* open filter panels and their buttons */ #IDX-main.IDX-page-mapsearch .idx-main-filters-container > div{background:var(--paper);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow)} #IDX-main.IDX-page-mapsearch :is(select,input[type=number]){border:1px solid var(--line);border-radius:var(--r); padding:8px 10px;background:var(--paper);color:var(--ink);font-size:.95rem} #IDX-main.IDX-page-mapsearch .idx-filter-apply-button{background:var(--ink) !important;color:var(--snow) !important; border:1px solid var(--ink) !important;border-radius:var(--r) !important;font-weight:500} #IDX-main.IDX-page-mapsearch .idx-filter-apply-button-white{background:var(--paper) !important;color:var(--ink) !important; border-color:var(--line) !important} /* results count chip */ #IDX-main.IDX-page-mapsearch #listing-results-count__chip{background:var(--lake-soft) !important;color:var(--ink) !important; border-radius:100px !important;font-size:.85rem;font-weight:600;padding:5px 14px !important} #IDX-main.IDX-page-mapsearch #listing-results-count__chip svg{fill:var(--granite)} /* price pins: dark green tags like the rest of the site (map search and results maps) */ #IDX-main .leaflet-label{background:var(--ink) !important;background-image:none !important;color:var(--snow) !important; border:0 !important;border-radius:4px !important;box-shadow:0 1px 4px rgba(22,41,31,.3) !important; font-family:var(--sans) !important;font-size:.72rem !important;font-weight:600 !important;line-height:1.2 !important; padding:2px 6px !important;opacity:.94 !important;text-shadow:none !important} #IDX-main .leaflet-label:hover{background:var(--lake) !important;z-index:1000} #IDX-main .leaflet-label::before{border-top-color:var(--ink) !important} #IDX-main .leaflet-label:hover::before{border-top-color:var(--lake) !important} #IDX-main.IDX-page-mapsearch #IDX-map{border-radius:var(--r)} /* listing cards in the side list */ #IDX-main.IDX-page-mapsearch .listing-card__parent{border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--paper);margin-bottom:16px} #IDX-main.IDX-page-mapsearch .listing-card__details{padding:12px 16px 4px} #IDX-main.IDX-page-mapsearch .listing-card__listing-price{font-family:var(--serif);font-weight:500;font-size:1.35rem;color:var(--ink)} #IDX-main.IDX-page-mapsearch .listing-card__core-fields, #IDX-main.IDX-page-mapsearch .listing-card__address{font-size:.92rem;color:var(--ink);line-height:1.45} #IDX-main.IDX-page-mapsearch .listing-card__core-fields{color:var(--granite)} #IDX-main.IDX-page-mapsearch .listing-card__additional-info{padding:0 16px 12px} #IDX-main.IDX-page-mapsearch .listing-card__courtesy{font-size:.76rem;color:var(--granite)} #IDX-main.IDX-page-mapsearch .listing-card__prop-status{border-radius:4px;font-size:.82rem !important;font-weight:600} #IDX-main.IDX-page-mapsearch .listing-card__label{border-radius:4px} /* "Welcome, John Doe (Not you?) My Account" bar on every IDX page: a quiet pale strip instead of a solid blue bar */ #IDX-main #IDX-leadToolsBar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px; background:var(--lake-soft) !important;color:var(--ink) !important;border:0 !important; border-radius:var(--r);padding:10px 16px !important;margin:0 0 6px;font-size:.9rem;line-height:1.4;height:auto} #IDX-main #IDX-leadToolsBar > div{float:none !important;margin:0 !important;padding:0 !important; color:var(--ink) !important;font-size:inherit !important;font-weight:400} #IDX-main #IDX-leadInfo{font-weight:500 !important} #IDX-main #IDX-leadToolsBar a{color:var(--lake) !important;text-decoration:none;font-weight:500} #IDX-main #IDX-leadToolsBar a:hover{text-decoration:underline} #IDX-main #IDX-leadLogOutLink{color:var(--granite) !important} #IDX-main #IDX-leadAccountLink{margin-left:auto !important} #IDX-main #IDX-leadToolsBar .IDX-clear{display:none} /* ---------- IDX listing page ---------- */ #IDX-main.IDX-page-listing #IDX-detailsHeader{position:static !important;background:none !important; backdrop-filter:none !important;border:0 !important;z-index:auto !important} /* the long field lists: hide the duplicate and raw-data fields, keep the useful ones */ #IDX-main.IDX-page-listing #IDX-detailsBasicInfo, #IDX-main.IDX-page-listing [id^="IDX-detailsContainer-"]:has(#IDX-field-halfBaths), #IDX-main.IDX-page-listing :is(#IDX-field-idxContactInformation,#IDX-field-vowContactInformation, #IDX-field-imageStatus,#IDX-field-livingAreaUnits,#IDX-field-lotSizeUnits,#IDX-field-lotSizeDimensions, #IDX-field-country,#IDX-field-priceBeforeReduction,#IDX-field-priceReductionDate,#IDX-field-MlsStatus, #IDX-field-zoningDescription,#IDX-field-aduYN,#IDX-field-bathroomsPartial,#IDX-field-postalCity, #IDX-field-mlsAreaMajor,#IDX-field-yearBuiltEffective,#IDX-field-propertyCondition){display:none !important} /* Key details grid (built by site.js from the listing's own fields) */ .iv-key{margin:26px 0 30px;padding:24px 26px 8px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r)} .iv-key h3{font-family:var(--serif) !important;font-weight:500;font-size:1.3rem;margin:0 0 16px;color:var(--ink)} .iv-key dl{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin:0} .iv-key .row{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:12px;padding:11px 0; border-top:1px solid var(--paper-2);font-size:.94rem;line-height:1.4} .iv-key .row:nth-child(-n+2){border-top:0} .iv-key dt{color:var(--granite);margin:0} .iv-key dd{margin:0;color:var(--ink);font-weight:500} .iv-key dd small{display:block;font-weight:400;color:var(--granite);font-size:.78rem;margin-top:2px} .iv-key dd a{color:var(--lake)} @media (max-width:640px){ .iv-key{padding:20px 18px 4px} .iv-key dl{grid-template-columns:1fr} .iv-key .row:nth-child(2){border-top:1px solid var(--paper-2)} } /* listing header: price first and large, address under it */ #IDX-main.IDX-page-listing .iv-price{font-family:var(--serif) !important;font-weight:500;font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1.05;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px} #IDX-main.IDX-page-listing #IDX-detailsAddressStreet{font-size:1.2rem !important;font-weight:600;line-height:1.3;margin:0 0 2px} #IDX-main.IDX-page-listing #IDX-detailsAddressRegion{color:var(--granite);font-size:.98rem} #IDX-main.IDX-page-listing #IDX-detailsHeaderActions .IDX-btn{padding:10px 20px !important;font-size:.93rem !important; border-radius:var(--r) !important;min-height:0 !important;height:auto !important} /* contact card: photo, name, one-tap call, and a Schedule a showing button */ #IDX-main.IDX-page-listing .iv-agent{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center} #IDX-main.IDX-page-listing .iv-agent img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 20%; display:block;border:1px solid var(--line)} #IDX-main.IDX-page-listing .iv-agent b{display:block;font-family:var(--serif) !important;font-weight:500;font-size:1.25rem; color:var(--ink);line-height:1.2} #IDX-main.IDX-page-listing .iv-agent span{display:block;font-size:.85rem;color:var(--granite);margin-top:2px} #IDX-main.IDX-page-listing .iv-agent-links{margin:14px 0 0;font-size:.95rem;line-height:1.7} #IDX-main.IDX-page-listing .iv-agent-links a{color:var(--lake);text-decoration:none;font-weight:500} #IDX-main.IDX-page-listing .iv-agent-links a:hover{text-decoration:underline} #IDX-main.IDX-page-listing .iv-actions{display:grid;gap:10px;margin:18px 0 6px} #IDX-main.IDX-page-listing .iv-actions a{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:1rem; padding:14px 18px;border-radius:var(--r);border:1px solid var(--ink)} #IDX-main.IDX-page-listing .iv-actions .iv-go{background:var(--ink);color:var(--snow) !important} #IDX-main.IDX-page-listing .iv-actions .iv-go:hover{filter:brightness(1.25)} #IDX-main.IDX-page-listing .iv-actions .iv-call{background:var(--paper);color:var(--ink) !important} #IDX-main.IDX-page-listing .iv-actions .iv-call:hover{background:var(--paper-2)} #IDX-main.IDX-page-listing #IDX-contactInformation{padding:4px 0 8px !important;border:0 !important} /* ---------- IDX photo gallery page ---------- */ #IDX-main.IDX-page-photogallery #IDX-photoGalleryHeader{display:none} /* repeats the listing ID below */ #IDX-main.IDX-page-photogallery .IDX-PIH{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px; margin:6px 0 22px;padding:0 0 18px;border-bottom:1px solid var(--line)} #IDX-main.IDX-page-photogallery .IDX-PIH__row--listingID{grid-column:1/-1;font-size:.8rem;color:var(--granite);margin:0} #IDX-main.IDX-page-photogallery .IDX-PIH__row--details{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0} #IDX-main.IDX-page-photogallery .IDX-PIH__row--details > div:nth-child(2){display:none} /* stray " - " */ #IDX-main.IDX-page-photogallery .IDX-PIH__address{font-family:var(--serif) !important;font-size:1.35rem;font-weight:500;color:var(--ink)} #IDX-main.IDX-page-photogallery .IDX-PIH__address span{font-family:inherit !important} #IDX-main.IDX-page-photogallery .IDX-PIH__bedBathArea{color:var(--granite);font-size:.95rem} #IDX-main.IDX-page-photogallery .IDX-PIH__price{color:var(--ink);font-weight:600} #IDX-main.IDX-page-photogallery .IDX-PIH__vertical-divider{display:inline-block;width:1px;height:.9em;background:var(--line); margin:0 10px;vertical-align:-1px;border:0} #IDX-main.IDX-page-photogallery .IDX-PIH__row--action{margin:0} #IDX-main.IDX-page-photogallery .IDX-PIH__row--action .IDX-btn{background:var(--ink) !important;color:var(--snow) !important; border:1px solid var(--ink) !important;border-radius:var(--r) !important;padding:11px 20px !important;font-weight:500; text-decoration:none;height:auto !important;min-height:0 !important} /* photos: our own grid (site.js builds it). IDX's slideshow script locks its own gallery to a fixed height, so that one is hidden and left alone. */ #IDX-main.iv-own-gallery #IDX-photoGallery{display:none !important} #IDX-main.IDX-page-photogallery #IDX-photoGalleryContainer{height:auto !important;max-height:none !important;overflow:visible !important} #IDX-main.IDX-page-photogallery .IDX-PIH *{text-decoration:none !important;border-bottom:0 !important} .iv-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 10px} .iv-gallery button{display:block;padding:0;margin:0;border:0;background:var(--paper-2);border-radius:var(--r); overflow:hidden;cursor:zoom-in;width:100%} .iv-gallery button:first-child{grid-column:1/-1} .iv-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:opacity .15s} .iv-gallery button:first-child img{aspect-ratio:16/9} .iv-gallery button:hover img{opacity:.92} .iv-gallery button:focus-visible{outline:3px solid var(--lake);outline-offset:2px} @media (max-width:700px){ .iv-gallery{grid-template-columns:1fr;gap:10px} #IDX-main.IDX-page-photogallery .IDX-PIH{grid-template-columns:1fr} } /* full-size photo viewer */ .iv-lb{position:fixed;inset:0;z-index:2000;background:rgba(10,20,15,.94);display:flex;align-items:center;justify-content:center} .iv-lb[hidden]{display:none} .iv-lb img{max-width:min(92vw,1400px);max-height:84vh;width:auto;height:auto;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)} .iv-lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%; width:52px;height:52px;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center} .iv-lb button:hover{background:rgba(255,255,255,.24)} .iv-lb .iv-lb-prev{left:18px;top:50%;transform:translateY(-50%)} .iv-lb .iv-lb-next{right:18px;top:50%;transform:translateY(-50%)} .iv-lb .iv-lb-close{right:18px;top:18px;width:44px;height:44px;font-size:1.3rem} .iv-lb .iv-lb-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#dfe6e1;font-size:.9rem} @media (max-width:700px){.iv-lb .iv-lb-prev{left:6px}.iv-lb .iv-lb-next{right:6px}} /* empty-message warning on IDX contact forms (added by site.js) */ .iv-form-error{color:#9A3412;font-size:.88rem;margin:6px 0 0} #IDX-main textarea[aria-invalid="true"]{border-color:#9A3412 !important;box-shadow:0 0 0 3px rgba(154,52,18,.12) !important} /* listing page: the "Message" box */ #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap{background:var(--paper) !important;border:1px solid var(--line) !important; border-radius:var(--r);padding:20px 20px 22px !important;margin:14px 0 0 !important;box-shadow:none !important} /* IDX draws its own border and padding on the form inside our box; one box is enough */ #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap :is(form,.IDX-message-column,#IDX-message-group,.IDX-contact__actions){ margin:0 !important;padding:0 !important;border:0 !important;box-shadow:none !important; background:none !important;width:100% !important;max-width:none !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap #IDX-message-group{margin:0 0 14px !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap .IDX-form-group--PL{margin:0 0 14px !important;padding:0 !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap label{display:block;margin:0 0 8px !important;padding:0 !important; font-family:var(--serif) !important;font-weight:500;font-size:1.1rem;color:var(--ink);position:static !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap textarea{display:block;width:100% !important;min-height:120px; margin:0 !important;padding:12px 14px !important;font:inherit;font-size:.95rem;line-height:1.5;color:var(--ink); background:var(--snow) !important;border:1px solid var(--line) !important;border-radius:var(--r) !important;resize:vertical} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap textarea:focus{outline:none;border-color:var(--lake) !important; box-shadow:0 0 0 3px var(--lake-soft) !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap textarea::placeholder{color:var(--granite)} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap .IDX-submit-btn{width:100% !important;margin:0 !important; padding:13px 18px !important;height:auto !important;border-radius:var(--r) !important;font-weight:600;font-size:1rem; background:var(--lake) !important;border:1px solid var(--lake) !important;color:var(--snow) !important} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap .IDX-submit-btn:hover{filter:brightness(1.15)} #IDX-main.IDX-page-listing #IDX-detailscontactFormWrap .IDX-formResponse:not(:empty){margin-top:12px} /* "Listing courtesy of ..." lines: small, gray, and below the photo instead of crowding it */ #IDX-main .IDX-similar-listings--item{display:flex !important;flex-direction:column;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 16px !important;padding:0 !important} #IDX-main .IDX-similar-listings--item > a.IDX-similar-listings--item-image{order:1;display:block} #IDX-main .IDX-similar-listings--item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} #IDX-main .IDX-similar-listings--info{order:2;position:static !important;background:none !important;color:var(--ink) !important; padding:12px 14px 4px !important;text-shadow:none !important} #IDX-main .IDX-similar-listings--info *{color:var(--ink) !important;text-shadow:none !important} #IDX-main .IDX-similar-listings--price{font-family:var(--serif) !important;font-size:1.3rem;font-weight:500;line-height:1.2} #IDX-main .IDX-similar-listings--bed-bath-sqft-acre{font-size:.86rem;color:var(--granite) !important;margin-top:3px} #IDX-main .IDX-similar-listings--details br{display:none} #IDX-main .IDX-similar-listings--address{font-size:.9rem;margin-top:4px} #IDX-main .IDX-similar-listings--redirect{display:none} #IDX-main .IDX-similar-listings--item > .IDX-mlsSelectorRulesCourtesy{order:3;display:block;padding:0 14px 12px; font-size:.74rem;line-height:1.35;color:var(--granite) !important} #IDX-main .idx-results__listing{display:flex !important;flex-direction:column} #IDX-main .idx-results__listing > .idx-listing-card__courtesy{order:2;margin:6px 2px 0 !important;padding:0 !important; font-size:.72rem !important;line-height:1.3;color:var(--granite) !important} /* IDX maps: keep the map's own layers (tiles, pins, buttons) inside the map, so they can't slide over the site header or its menu when the page scrolls, especially on phones */ #IDX-main .leaflet-container{isolation:isolate;z-index:0} /* ---------- results page on phones: the bottom button bar ---------- IDX puts five buttons in one row (Filter, Save, New Search, Modify, Hide Map) and the last gets cut off. New Search and Modify both just open the map search, which is already in the menu, and Filter now covers changing a search, so those two are hidden. */ @media (max-width:960px){ #IDX-main #idx-results-mobile-control{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; background:var(--snow) !important;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(22,41,31,.08); padding:10px 12px calc(10px + env(safe-area-inset-bottom)) !important;overflow:visible !important} #IDX-main #idx-results-mobile-control > a[href$="/idx/map/mapsearch"], #IDX-main #idx-results-mobile-control > #idx-mobile-modify-search{display:none !important} #IDX-main #idx-results-mobile-control > .IDX-btn{display:flex !important;align-items:center;justify-content:center; min-height:46px;margin:0 !important;padding:8px 6px !important;border-radius:var(--r) !important;width:auto !important; font-size:.95rem !important;font-weight:600;text-decoration:none !important;white-space:nowrap; background:var(--paper) !important;border:1px solid var(--line) !important;color:var(--ink) !important} #IDX-main #idx-results-mobile-control > #idx-mobile-filters{background:var(--ink) !important;border-color:var(--ink) !important; color:var(--snow) !important} /* room at the bottom of the page so the bar never covers the last listing */ #IDX-main.IDX-page-listings{padding-bottom:90px !important} } /* ---------- map search on phones ---------- */ @media (max-width:760px){ /* the empty white box: IDX's phone dropdown for Advanced Search / Listing ID / Address / Map Search. Not needed on a phone, where the map is the search. */ #IDX-main.IDX-page-mapsearch :is(.idx-nav-button-container,.idx-nav-button-container-mobile){display:none !important} #IDX-main.IDX-page-mapsearch #navigation-container + hr.no-gap-hr{display:none} /* search box and the filter button side by side */ #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar{flex-wrap:nowrap !important;gap:10px;padding:12px 0 !important} #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar__flyto{flex:1 1 auto;min-width:0;max-width:none} #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar__filter{flex:none} #IDX-main.IDX-page-mapsearch .idx-filter-button--show--mobile{min-height:48px;background:var(--ink) !important; border-color:var(--ink) !important;color:var(--snow) !important} /* IDX labels that button "More"; it opens every filter, so call it Filters */ #IDX-main.IDX-page-mapsearch .idx-filter-button--show--mobile > div > span:first-child{font-size:0} #IDX-main.IDX-page-mapsearch .idx-filter-button--show--mobile > div > span:first-child::after{content:"Filters";font-size:.95rem} #IDX-main.IDX-page-mapsearch .idx-filter-button--show--mobile svg{fill:var(--snow);color:var(--snow)} } /* IDX's slide-up filter panels (map search and results) must sit above the site header */ /* (IDX's filter panel on results pages is #idx-results-refinement / .idx-results__refinement) */ #IDX-main .mls-filter-container-mobile{z-index:1100 !important} @media (max-width:960px){ #IDX-main #idx-results-refinement.idx-results__refinement{z-index:1100 !important} } /* desktop and laptop: the filter bar is part of the page. It had been lifted above everything for the phone panel, and on a laptop it then slid over the site header while scrolling. */ @media (min-width:961px){ #IDX-main #idx-results-refinement.idx-results__refinement{position:static !important;z-index:auto !important; top:auto !important;box-shadow:none !important} /* one tidy row that shares the width, instead of wrapping into uneven rows on smaller laptops */ #IDX-main #IDX-refinementSearchForm{display:flex !important;flex-wrap:wrap;gap:10px;align-items:stretch} #IDX-main #IDX-refinementSearchForm > .idx-dropdown, #IDX-main #IDX-refinementSearchForm > .IDX-btn{flex:1 1 130px;width:auto !important;max-width:none !important; margin:0 !important;position:relative} #IDX-main #IDX-refinementSearchForm > .idx-dropdown > .IDX-btn{width:100% !important;margin:0 !important; white-space:nowrap} #IDX-main #IDX-refinementSearchForm > .idx-dropdown > .idx-dropdown__menu{z-index:60} } /* the dimmed backdrop goes UNDER the filter panel (it was on top of it, so nothing could be tapped) and covers the whole screen behind it; tapping it still closes the panel */ #IDX-main .idx-results-refinement__overlay{z-index:1090 !important} @media (max-width:960px){ #IDX-main .idx-results-refinement__overlay{position:fixed !important;inset:0 !important;width:auto !important; height:auto !important;margin:0 !important} } /* ---------- map search: the city / ZIP chip in the search box ---------- Keep the chip on one line inside the box (it was wrapping and spilling over the top on phones), and make sure there is always a visible way to remove it. */ /* no overflow:hidden here: the suggestions list drops down out of this box */ #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field{position:relative;overflow:visible !important} #IDX-main.IDX-page-mapsearch .vue-tags-input{position:relative} /* on desktop IDX lays the typing box over the whole field, on top of the chip, so the chip's x never received the click. Put the typing box back in line beside the chip. */ #IDX-main.IDX-page-mapsearch :is(.ti-new-tag-input-wrapper,.ti-new-tag-input){position:static !important; left:auto !important;top:auto !important;inset:auto !important} #IDX-main.IDX-page-mapsearch .ti-tag{position:relative;z-index:2} #IDX-main.IDX-page-mapsearch .ti-tag .ti-actions, #IDX-main.IDX-page-mapsearch .ti-tag .ti-icon-close{position:relative;z-index:3;pointer-events:auto !important} /* the suggestions list ("Salt Lake City (city)" and so on): above the map, styled like the site */ #IDX-main.IDX-page-mapsearch .ti-autocomplete{position:absolute !important;z-index:1200 !important;left:-15px;right:-15px; top:calc(100% + 12px);max-height:320px;overflow-y:auto;background:var(--paper) !important; border:1px solid var(--line) !important;border-radius:var(--r);box-shadow:var(--shadow);padding:6px 0} #IDX-main.IDX-page-mapsearch .ti-autocomplete .ti-item{padding:9px 14px !important;font-size:.95rem;color:var(--ink);cursor:pointer} #IDX-main.IDX-page-mapsearch .ti-autocomplete .ti-item.ti-selected-item, #IDX-main.IDX-page-mapsearch .ti-autocomplete .ti-item:hover{background:var(--lake-soft) !important;color:var(--ink) !important} #IDX-main.IDX-page-mapsearch .vue-tags-input{min-width:0} #IDX-main.IDX-page-mapsearch .ti-input{min-width:0} #IDX-main.IDX-page-mapsearch .ti-tags{display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:6px; margin:0 !important;padding:0 !important;list-style:none;min-width:0;overflow:hidden} #IDX-main.IDX-page-mapsearch .ti-tag{display:inline-flex !important;align-items:center;gap:6px;flex:0 1 auto;min-width:0; max-width:100%;margin:0 !important;padding:5px 8px 5px 10px !important;height:auto !important; font-size:.88rem !important;line-height:1.3 !important;white-space:nowrap;border-radius:var(--r) !important} #IDX-main.IDX-page-mapsearch .ti-tag .ti-content{min-width:0;overflow:hidden} #IDX-main.IDX-page-mapsearch .ti-tag .ti-tag-center{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #IDX-main.IDX-page-mapsearch .ti-tag .ti-actions{display:flex !important;align-items:center;margin:0;flex:none} /* the chip's own x: IDX draws it with an icon font that isn't loading, so it was invisible */ #IDX-main.IDX-page-mapsearch .ti-tag .ti-icon-close{font-family:var(--sans) !important;font-style:normal;cursor:pointer; width:18px;height:18px;display:grid;place-items:center;border-radius:50%;opacity:.85} #IDX-main.IDX-page-mapsearch .ti-tag .ti-icon-close::before{content:"\00d7" !important;font-size:1.05rem;line-height:1; font-family:var(--sans) !important} #IDX-main.IDX-page-mapsearch .ti-tag .ti-icon-close:hover{opacity:1;background:rgba(255,255,255,.18)} #IDX-main.IDX-page-mapsearch .ti-new-tag-input-wrapper{flex:1 1 8px;min-width:8px;margin:0 !important;padding:0 !important} #IDX-main.IDX-page-mapsearch .ti-tags:has(.ti-tag) .ti-new-tag-input{min-width:0 !important} /* IDX's own clear button at the right end of the box. Once a city is picked IDX locks the chip (the "ti-disabled" state), so only this button can clear it. site.js makes the chip's x press it, so this one stays out of sight rather than showing two x's. */ #IDX-main.IDX-page-mapsearch .pm-ccz-fly-to-field .rm-btn{display:none !important} /* ---------- results filters: price / beds / baths panels ---------- */ /* Beds and Baths as tap-friendly chips (Any, Studio, 1+, 2+ ...) instead of a tall list */ #IDX-main .idx-results__refinement .idx-dropdown__menu fieldset{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;margin:0;padding:0;border:0;min-width:0} #IDX-main .idx-results__refinement .idx-dropdown__menu fieldset > legend{grid-column:1/-1;float:left;width:100%; margin:0 0 6px;padding:0 0 8px} #IDX-main .idx-results__refinement .idx-dropdown__menu fieldset:has(input[type=text]){grid-template-columns:1fr 1fr} #IDX-main .idx-results__refinement .idx-dropdown__menu fieldset:has(input[type=text]) input{margin:0 !important} #IDX-main .idx-results__refinement .idx-form__group--inline{margin:0 !important;padding:0 !important;width:auto !important; float:none !important;display:block !important} #IDX-main .idx-results__refinement .IDX-custom-form-element__label{display:flex !important;align-items:center;justify-content:center; text-align:center;min-height:42px;margin:0 !important;padding:6px 4px !important;border:1px solid var(--line) !important; border-radius:var(--r) !important;background:var(--paper) !important;color:var(--ink) !important;font-size:.86rem !important; font-weight:500;line-height:1.2;cursor:pointer;white-space:normal;box-shadow:none !important} #IDX-main .idx-results__refinement .IDX-custom-form-element__label:hover{border-color:var(--ink) !important} #IDX-main .idx-results__refinement .IDX-radio-button__box{display:none !important} #IDX-main .idx-results__refinement input:checked + .IDX-custom-form-element__label{background:var(--ink) !important; border-color:var(--ink) !important;color:var(--snow) !important} #IDX-main .idx-results__refinement .idx-dropdown.iv-closed > .idx-dropdown__menu{display:none !important} @media (max-width:960px){ /* the slide-up panel: never taller than the screen; scroll inside it instead of running off the top */ #IDX-main #idx-results-refinement.idx-results__refinement{max-height:calc(100dvh - 96px) !important;overflow-y:auto !important; overscroll-behavior:contain;border-radius:14px 14px 0 0;padding:14px 14px 18px !important; box-shadow:0 -10px 30px rgba(22,41,31,.18)} #IDX-main #idx-results-refinement .idx-results-refinement__title{font-family:var(--serif) !important;font-size:1.2rem; font-weight:500;text-align:left;margin:2px 2px 12px} /* open sections sit in the panel as part of the list, not floating cards */ #IDX-main #idx-results-refinement .idx-dropdown__menu{position:static !important;min-width:0 !important;width:auto !important; box-shadow:none !important;margin:8px 0 4px !important;padding:14px !important;background:var(--snow) !important} #IDX-main #idx-results-refinement .idx-dropdown{margin:0 0 10px !important} } /* ---------- results: price check message and the "no homes found" panel ---------- */ .iv-price-error{margin:10px 0 0;color:#9A3412;font-size:.88rem;line-height:1.4} .iv-empty{margin:18px 0 24px;padding:28px 28px 30px;background:var(--paper);border:1px solid var(--line); border-radius:var(--r);text-align:center} .iv-empty h3{font-family:var(--serif) !important;font-weight:500;font-size:1.45rem;margin:0 0 8px;color:var(--ink)} .iv-empty p{margin:0 auto 20px;max-width:46ch;color:var(--granite);font-size:.98rem;line-height:1.5} .iv-empty .iv-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .iv-empty .iv-empty-actions a{display:inline-block;padding:12px 20px;border-radius:var(--r);text-decoration:none; font-weight:500;font-size:.95rem;border:1px solid var(--line);background:var(--paper);color:var(--ink) !important} .iv-empty .iv-empty-actions a.iv-primary{background:var(--ink);border-color:var(--ink);color:var(--snow) !important} .iv-empty .iv-empty-actions a:hover{border-color:var(--ink)} #IDX-main.iv-no-results .idx-results__content{display:none !important} /* ---------- IDX "City" picker inside More Filters (select2) ---------- Its suggestion list is drawn at the very end of the page, outside the filter panel, and was landing underneath it, so typing a city showed nothing. Lift it above the panel. */ body > .select2-container--open, .select2-container--open .select2-dropdown{z-index:1200 !important} .select2-container--open .select2-dropdown{background:var(--paper);border:1px solid var(--line) !important; border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;font-family:var(--sans)} .select2-container--open .select2-results__option{padding:10px 14px;font-size:.95rem;color:var(--ink)} .select2-container--open .select2-results__option--highlighted{background:var(--lake-soft) !important;color:var(--ink) !important} .select2-container--open .select2-results__message{color:var(--granite)} #IDX-main .select2-selection--multiple{min-height:46px;border:1px solid var(--line) !important;border-radius:var(--r) !important; padding:4px 8px !important;background:var(--paper) !important} #IDX-main .select2-selection__choice{background:var(--lake) !important;border:0 !important;color:var(--snow) !important; border-radius:var(--r) !important;padding:4px 8px !important;margin:4px 6px 4px 0 !important;font-size:.9rem} #IDX-main .select2-selection__choice__remove{color:var(--snow) !important;margin-right:6px !important;font-weight:600} #IDX-main .select2-search__field{min-width:10ch;font-family:var(--sans);font-size:.95rem !important} /* ---------- IDX pages: less empty space above the content ---------- The wrapper adds 38px above the page and IDX's area another 34px, which assumed the "Welcome, John Doe" bar would fill the top. Signed out, that bar is gone and left a gap. */ main > .wrap:has(> #IDX-main){padding-top:28px !important} #IDX-main#IDX-main{padding-top:0 !important} /* if IDX leaves the welcome bar in the page with nothing in it, don't let it take up room */ #IDX-main #IDX-leadToolsBar:not(:has(#IDX-leadInfo, a)){display:none !important} @media (max-width:760px){ main > .wrap:has(> #IDX-main){padding-top:16px !important} } /* ============================================================ IDX sign-up / log-in: the pop-up (jQuery dialog added at the end of the page) and the /idx/userlogin and /idx/usersignup pages ============================================================ */ .ui-widget-overlay{background:rgba(12,24,17,.58) !important;opacity:1 !important; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);position:fixed !important;inset:0 !important; width:auto !important;height:auto !important} .IDX-registrationModal.ui-dialog{position:fixed !important;top:50% !important;left:50% !important; transform:translate(-50%,-50%);width:min(440px,calc(100vw - 28px)) !important;max-height:calc(100dvh - 28px); overflow-y:auto;padding:0 !important;border:0 !important;border-radius:14px !important;background:var(--snow) !important; box-shadow:0 30px 80px -20px rgba(10,20,15,.55) !important;font-family:var(--sans) !important;color:var(--ink)} .IDX-registrationModal *{font-family:var(--sans);box-sizing:border-box} .IDX-registrationModal .ui-dialog-titlebar{background:none !important;border:0 !important;padding:0 !important; position:absolute;top:10px;right:10px;left:auto;z-index:2} .IDX-registrationModal .ui-dialog-title{display:none} .IDX-registrationModal .ui-dialog-titlebar-close{position:static !important;display:grid;place-items:center;width:36px;height:36px; margin:0 !important;padding:0 !important;border:0 !important;border-radius:50%;background:transparent !important; color:var(--granite) !important;text-decoration:none} .IDX-registrationModal .ui-dialog-titlebar-close:hover{background:var(--paper-2) !important;color:var(--ink) !important} .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon{background:none !important;text-indent:0 !important;width:auto;height:auto; font-size:0;overflow:visible} .IDX-registrationModal .ui-dialog-titlebar-close .ui-icon::before{content:"\00d7";font-size:1.6rem;line-height:1} .IDX-registrationModal .ui-dialog-content{padding:28px 28px 24px !important;background:none !important;border:0 !important; width:auto !important;height:auto !important;min-height:0 !important;overflow:visible !important} /* our header inside the pop-up (added by site.js) */ .iv-reg-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding-right:28px} .iv-reg-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--line);flex:none} .iv-reg-head b{display:block;font-family:var(--serif) !important;font-weight:500;font-size:1.05rem;line-height:1.2} .iv-reg-head span{display:block;font-size:.8rem;color:var(--granite)} .IDX-registrationModal #IDX-registrationMessage{margin:0 0 18px;font-size:.95rem;line-height:1.55;color:var(--granite)} .IDX-registrationModal #IDX-registrationMessage b, .iv-reg-title{display:block;font-family:var(--serif) !important;font-weight:500;font-size:1.55rem;line-height:1.15; letter-spacing:-.01em;color:var(--ink);margin:0 0 8px} .IDX-registrationModal #IDX-registrationMessage br{display:none} .IDX-registrationModal .IDX-signupLoginContent > p:first-child{display:none} /* "To create an account, fill out..." */ /* fields, shared by the pop-up and the log-in / sign-up pages */ :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-customRegistrationFields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) #IDX-email-group, :is(.IDX-registrationModal, #IDX-main.IDX-category-user) #IDX-phone-group{grid-column:1/-1} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(.IDX-control-group,[id$="-group"]){margin:0 0 12px !important;padding:0 !important; width:auto !important;float:none !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-control-label{display:block;margin:0 0 5px !important;padding:0 !important; font-size:.86rem !important;font-weight:500;color:var(--ink) !important;text-align:left !important;float:none !important;width:auto !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-required{color:var(--lake);margin-left:2px} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-controls{margin:0 !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(input[type=text],input[type=email],input[type=tel],input[type=password]){ display:block;width:100% !important;height:auto !important;margin:0 !important;padding:12px 14px !important; font-size:1rem !important;line-height:1.3;color:var(--ink);background:var(--paper) !important; border:1px solid var(--line) !important;border-radius:var(--r) !important;box-shadow:none !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) input:focus{outline:none;border-color:var(--lake) !important; box-shadow:0 0 0 3px var(--lake-soft) !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(#IDX-keepLoggedIn,.IDX-keepLoggedIn){margin:2px 0 14px !important;padding:0 !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(#IDX-keepLoggedIn,.IDX-keepLoggedIn) label{display:flex;align-items:center;gap:8px; font-size:.9rem;color:var(--granite);cursor:pointer;margin:0} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-googleRecaptchaPolicy{margin:4px 0 14px;font-size:.72rem; line-height:1.45;color:var(--granite)} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-googleRecaptchaPolicy a{color:var(--granite);text-decoration:underline} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-form-actions{margin:0 !important;padding:0 !important; background:none !important;border:0 !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-form-actions .IDX-btn{display:block;width:100% !important;margin:0 !important; padding:14px 18px !important;height:auto !important;border:1px solid var(--ink) !important;border-radius:var(--r) !important; background:var(--ink) !important;color:var(--snow) !important;font-size:1rem !important;font-weight:600;text-shadow:none !important; box-shadow:none !important;cursor:pointer} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-form-actions .IDX-btn:hover{filter:brightness(1.25)} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-form-actions .IDX-btn i.fa{display:none} /* icon font doesn't load */ :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-formResponse:not(:empty){margin:0 0 12px;font-size:.9rem} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(.IDX-signupLoginToggleWrap,#IDX-gotoUserSignup){margin:16px 0 0; text-align:center;font-size:.92rem;color:var(--granite)} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(.IDX-signupLoginToggleWrap,#IDX-gotoUserSignup) p{margin:0} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(.IDX-signupLoginToggle,#IDX-userSignupLink){color:var(--lake) !important; font-weight:600;text-decoration:none} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) :is(.IDX-signupLoginToggle,#IDX-userSignupLink):hover{text-decoration:underline} #IDX-main.IDX-category-user #IDX-userSignupLink i.fa{display:none} /* the log-in / sign-up pages: one centered card */ #IDX-main.IDX-category-user .IDX-row{margin:0 !important} #IDX-main.IDX-category-user .IDX-row > [class*="col-"]{float:none !important;width:auto !important;max-width:460px; margin:10px auto 30px !important;padding:0 !important} #IDX-main.IDX-category-user #IDX-loginForm .IDX-row > [class*="col-"], #IDX-main.IDX-category-user form .IDX-row > [class*="col-"]{max-width:none;margin:0 !important} #IDX-main.IDX-category-user .IDX-panel{background:var(--snow) !important;border:1px solid var(--line) !important; border-radius:14px !important;box-shadow:var(--shadow) !important;overflow:hidden;margin:0} #IDX-main.IDX-category-user .IDX-panel-heading{background:none !important;border:0 !important;padding:28px 28px 0 !important} #IDX-main.IDX-category-user .IDX-panel-title{font-family:var(--serif) !important;font-weight:500;font-size:1.6rem;margin:0;color:var(--ink)} #IDX-main.IDX-category-user .iv-reg-sub{margin:6px 0 0;color:var(--granite);font-size:.95rem;line-height:1.5} #IDX-main.IDX-category-user .IDX-panel-body{padding:20px 28px 26px !important} @media (max-width:520px){ .IDX-registrationModal .ui-dialog-content{padding:24px 20px 20px !important} :is(.IDX-registrationModal, #IDX-main.IDX-category-user) .IDX-customRegistrationFields{grid-template-columns:1fr} #IDX-main.IDX-category-user .IDX-panel-heading{padding:24px 20px 0 !important} #IDX-main.IDX-category-user .IDX-panel-body{padding:18px 20px 22px !important} } .IDX-registrationModal .iv-login-intro{margin:0 0 16px;color:var(--granite);font-size:.95rem;line-height:1.5} .IDX-registrationModal .iv-q{color:var(--granite)} /* ---------- no sideways scrolling on phones ---------- The home page's "New on the market" carousel is an IDX widget that lays its listing cards out in one long row; on phones that row pushed the page wider than the screen. Keep the widget inside its box, and as a safety net never let the page scroll sideways. ("clip" rather than "hidden" so the sticky header keeps working.) */ .idx-mount.idx-carousel{max-width:100%;overflow:hidden;contain:inline-size} html, body{overflow-x:clip} /* IDX's widget pre-builds its hover tooltips (e.g. for the heart buttons) at the end of the page, parked thousands of pixels off to the right. Nobody sees them, but phones zoom the whole page out to fit them. Hide them until IDX actually shows one ("show"), and keep a shown one inside the screen. */ .idx-tooltip:not(.show){display:none !important} .idx-tooltip{max-width:min(280px,calc(100vw - 16px)) !important} /* and in general: anything placed relative to the whole page gets clipped at the screen edge too, instead of widening the page */ body{position:relative} /* ---------- listing page on phones: swipe through the photos ---------- On phones IDX shows one still photo. site.js builds a swipeable strip from the same photos (with arrows and a counter) and shows it on phones only; desktop keeps IDX's own slider. */ .iv-slides{display:none} @media (max-width:760px){ #IDX-main.IDX-page-listing.iv-has-slides #IDX-primaryPhoto{display:none !important} .iv-slides{display:block;position:relative;margin:0 0 14px;border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .iv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; -webkit-overflow-scrolling:touch;scrollbar-width:none} .iv-track::-webkit-scrollbar{display:none} .iv-track img{flex:0 0 100%;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:center;display:block} .iv-slides button{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%; background:rgba(22,41,31,.72);color:#fff;font-size:1.5rem;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0} .iv-slides .iv-prev{left:10px} .iv-slides .iv-next{right:10px} .iv-slides button[disabled]{opacity:0;pointer-events:none} .iv-slides .iv-count{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:100px; background:rgba(22,41,31,.72);color:#fff;font-size:.8rem;font-weight:600} } /* field-level messages on IDX sign-up / contact forms (added by site.js) */ .iv-field-error{margin:6px 0 0;color:#9A3412;font-size:.84rem;line-height:1.35} :is(.IDX-registrationModal, #IDX-main) input[aria-invalid="true"]{border-color:#9A3412 !important; box-shadow:0 0 0 3px rgba(154,52,18,.12) !important} /* ============================================================ IDX "My Account" (My Listings Manager: dashboard, saved searches, saved properties, settings) ============================================================ */ #IDX-main.IDX-page-myaccount{--mlm-card-radius:12px} #IDX-main.IDX-page-myaccount #idx-mlm-app{font-family:var(--sans);color:var(--ink)} #IDX-main.IDX-page-myaccount :is(.container-fluid,#app-body){padding-left:0 !important;padding-right:0 !important} #IDX-main.IDX-page-myaccount .row{margin-left:0 !important;margin-right:0 !important} /* broken icon font: simple text stand-ins */ #IDX-main.IDX-page-myaccount .fa{font-family:var(--sans) !important;font-style:normal} #IDX-main.IDX-page-myaccount .fa-bars::before{content:"\2630"} #IDX-main.IDX-page-myaccount .fa-caret-down::before{content:"\25BE"} #IDX-main.IDX-page-myaccount .fa-times::before{content:"\00d7"} #IDX-main.IDX-page-myaccount .fa-heart::before{content:"\2665"} #IDX-main.IDX-page-myaccount .fa-heart-o{display:none !important} /* top bar: page title plus tabs, instead of IDX's dark "My Listings Manager" bar */ #IDX-main.IDX-page-myaccount .mlm-navbar{background:none !important;border:0 !important;border-bottom:1px solid var(--line) !important; border-radius:0 !important;box-shadow:none !important;margin:0 0 22px !important;min-height:0 !important;padding:0 0 10px !important} #IDX-main.IDX-page-myaccount .mlm-navbar .container-fluid{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px} #IDX-main.IDX-page-myaccount #idx-mlm-brand{font-size:0 !important;padding:0 !important;height:auto !important;float:none !important} #IDX-main.IDX-page-myaccount #idx-mlm-brand::after{content:"My account";font-family:var(--serif);font-weight:500; font-size:1.8rem;letter-spacing:-.01em;color:var(--ink)} #IDX-main.IDX-page-myaccount .mlm-navbar__header{display:flex;align-items:center;gap:10px;float:none !important} #IDX-main.IDX-page-myaccount .mlm-menu__toggle{background:none !important;border:1px solid var(--line) !important; border-radius:var(--r) !important;color:var(--ink) !important;padding:0 !important;margin:0 !important; width:40px;height:40px;display:inline-grid;place-items:center;box-shadow:none !important} #IDX-main.IDX-page-myaccount .mlm-menu__toggle:hover{border-color:var(--ink) !important} #IDX-main.IDX-page-myaccount .mlm-menu__toggle .fa{font-size:1.1rem;line-height:1} /* IDX paints the phone header row and its menu grey/dark; keep them on the page background */ #IDX-main.IDX-page-myaccount :is(.mlm-navbar,.mlm-navbar__header,.mlm-navbar .container-fluid,.app-header){ background:transparent !important;background-image:none !important} @media (max-width:767px){ /* Phones: IDX turns the tabs into a slide-out drawer from the left that breaks with the site's layout. There are only two tabs, so show them in a row under the title instead, like desktop, and skip the drawer (and its menu and close buttons) entirely. */ #IDX-main.IDX-page-myaccount .mlm-navbar .container-fluid{flex-direction:column;align-items:flex-start;gap:6px} #IDX-main.IDX-page-myaccount .mlm-navbar__header{width:100%;padding:0 !important} #IDX-main.IDX-page-myaccount :is(.mlm-menu__toggle,.mlm-mobile-close){display:none !important} #IDX-main.IDX-page-myaccount .mlm-navbar__collapse, #IDX-main.IDX-page-myaccount .mlm-navbar__collapse.in, #IDX-main.IDX-page-myaccount .mlm-navbar__collapse.show{display:block !important;position:static !important;inset:auto !important; transform:none !important;width:100% !important;height:auto !important;max-height:none !important;overflow:visible !important; background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important; visibility:visible !important;opacity:1 !important;z-index:auto !important} #IDX-main.IDX-page-myaccount .mlm-navbar__collapse .mlm-navbar__nav{flex-direction:row !important;align-items:center;gap:20px} #IDX-main.IDX-page-myaccount .mlm-navbar__collapse .dropdown-menu{position:absolute !important;left:auto !important;right:auto; top:100%;box-shadow:var(--shadow) !important;border:1px solid var(--line) !important;background:var(--paper) !important; padding:6px 0 !important;min-width:210px} } /* any dimmed backdrop IDX adds for its drawer */ #IDX-main.IDX-page-myaccount :is(.mlm-overlay,.mlm-mobile-overlay,.navbar-backdrop){display:none !important} #IDX-main.IDX-page-myaccount .mlm-navbar__nav{display:flex;align-items:center;gap:22px;margin:0 !important;padding:0;list-style:none;float:none !important} #IDX-main.IDX-page-myaccount .mlm-navbar__nav > li > a{display:inline-flex;align-items:center;gap:6px;padding:8px 0 !important; background:none !important;color:var(--granite) !important;font-size:.95rem;font-weight:500;text-decoration:none;cursor:pointer; border-bottom:2px solid transparent} #IDX-main.IDX-page-myaccount .mlm-navbar__nav > li > a:hover, #IDX-main.IDX-page-myaccount .mlm-navbar__nav > li > a.router-link-exact-active{color:var(--ink) !important;border-bottom-color:var(--lake)} #IDX-main.IDX-page-myaccount .mlm-dropdown-icon__plus > span{display:none} #IDX-main.IDX-page-myaccount .dropdown{position:relative} #IDX-main.IDX-page-myaccount .dropdown-menu{background:var(--paper) !important;border:1px solid var(--line) !important; border-radius:var(--r) !important;box-shadow:var(--shadow) !important;padding:6px 0 !important;min-width:210px;right:0;left:auto} #IDX-main.IDX-page-myaccount .dropdown-menu a{display:block;padding:9px 16px !important;color:var(--ink) !important; background:none !important;font-size:.93rem;text-decoration:none} #IDX-main.IDX-page-myaccount .dropdown-menu a:hover{background:var(--lake-soft) !important} #IDX-main.IDX-page-myaccount #idx-mlm-logout-nav-link{color:var(--granite) !important} /* "verify your account" note */ #IDX-main.IDX-page-myaccount .mlm-alert{background:var(--lake-soft) !important;border:0 !important;border-radius:var(--r) !important; color:var(--ink) !important;padding:12px 16px !important;margin:0 0 22px !important;text-align:left !important} #IDX-main.IDX-page-myaccount .mlm-alert p{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:.93rem} #IDX-main.IDX-page-myaccount .mlm-alert .strong{font-weight:600} /* buttons */ #IDX-main.IDX-page-myaccount .mlm-button{display:inline-block;border-radius:var(--r) !important;font-weight:500;text-decoration:none !important; border:1px solid var(--ink) !important;background:var(--ink) !important;color:var(--snow) !important;box-shadow:none !important; padding:10px 18px !important;font-size:.95rem !important;line-height:1.2;cursor:pointer} #IDX-main.IDX-page-myaccount .mlm-button:hover{filter:brightness(1.25)} #IDX-main.IDX-page-myaccount .mlm-button__xsmall{padding:6px 12px !important;font-size:.85rem !important} #IDX-main.IDX-page-myaccount .mlm-button__large{padding:14px 28px !important;font-size:1rem !important} #IDX-main.IDX-page-myaccount .mlm-button__transparent{background:none !important;border-color:transparent !important; color:inherit !important;padding:4px 6px !important} #IDX-main.IDX-page-myaccount .mlm-button__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* dashboard intro panel */ #IDX-main.IDX-page-myaccount .panel{background:none !important;border:0 !important;box-shadow:none !important;margin:0 !important;padding:0 !important} #IDX-main.IDX-page-myaccount .panel-body{padding:0 !important;margin:0 0 30px} #IDX-main.IDX-page-myaccount #idx-mlm-landing-cta{background:var(--ink);color:#EEF2EC;border-radius:14px;padding:34px 28px !important; text-align:center} #IDX-main.IDX-page-myaccount :is(.action__subheading,.action__subheading *){font-size:.8rem !important;letter-spacing:.14em !important;text-transform:uppercase !important; color:#8FA894 !important;margin:0 0 10px !important;font-weight:500} #IDX-main.IDX-page-myaccount :is(.action__heading,.action__heading *){font-family:var(--serif) !important;font-weight:500;font-size:clamp(1.4rem,3vw,2rem); line-height:1.2;color:#F3F6F0 !important;margin:0 0 22px !important} #IDX-main.IDX-page-myaccount #idx-mlm-landing-actions [class*="col-"]{float:none !important;width:auto !important;margin:0 !important;padding:0 !important} #IDX-main.IDX-page-myaccount #idx-mlm-landing-search-button{background:var(--snow) !important;color:var(--ink) !important;border-color:var(--snow) !important} /* section headers: "1 Saved Property ... View all" */ #IDX-main.IDX-page-myaccount .mlm-bar{background:none !important;border:0 !important;border-bottom:1px solid var(--line) !important; border-radius:0 !important;padding:0 0 10px !important;margin:0 0 16px !important} #IDX-main.IDX-page-myaccount .mlm-bar__body{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} #IDX-main.IDX-page-myaccount :is(.mlm-bar__body > span:first-child,.mlm-bar__body > span:first-child *){font-family:var(--serif) !important;font-size:1.35rem;font-weight:500} #IDX-main.IDX-page-myaccount .mlm-bar__link{color:var(--lake) !important;font-weight:500;text-decoration:none;font-size:.93rem} #IDX-main.IDX-page-myaccount .mlm-bar__link:hover{text-decoration:underline} /* card grids (dashboard and the full Saved Searches / Saved Properties pages) */ #IDX-main.IDX-page-myaccount :is(#idx-mlm-saved-searches-group,#idx-mlm-saved-properties-group), #IDX-main.IDX-page-myaccount [id*="saved-search"][id$="-group"], #IDX-main.IDX-page-myaccount [id*="saved-propert"][id$="-group"]{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px} #IDX-main.IDX-page-myaccount :is(#idx-mlm-saved-searches-group,#idx-mlm-saved-properties-group) > *{float:none !important; width:auto !important;padding:0 !important;margin:0 !important;min-width:0} /* grey loading placeholders IDX leaves behind empty slots */ #IDX-main.IDX-page-myaccount [aria-disabled="true"]:is(.mlm-saved-search-single,.mlm-saved-property-single__placeholder){display:none !important} /* saved search cards */ #IDX-main.IDX-page-myaccount .mlm-card{background:var(--paper) !important;border:1px solid var(--line) !important; border-radius:var(--mlm-card-radius) !important;overflow:hidden;box-shadow:none !important;margin:0 !important} #IDX-main.IDX-page-myaccount .mlm-card__title-image{display:block;width:100%;height:140px;object-fit:cover} #IDX-main.IDX-page-myaccount .mlm-card__menu-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px !important; background:none !important;color:var(--ink) !important;font-weight:600;font-size:.95rem;border:0 !important} #IDX-main.IDX-page-myaccount .mlm-card__body{padding:0 14px 10px !important;color:var(--granite);font-size:.9rem} #IDX-main.IDX-page-myaccount :is(.mlm-card__footer,.mlm-saved-property-updates__toggle-update){display:flex;align-items:center; justify-content:space-between;gap:10px;padding:10px 14px !important;border-top:1px solid var(--paper-2) !important; background:none !important;color:var(--granite) !important;font-size:.88rem} /* saved property cards: photo with price and address, email toggle underneath */ #IDX-main.IDX-page-myaccount .mlm-saved-property-single{background:var(--paper);border:1px solid var(--line); border-radius:var(--mlm-card-radius);overflow:hidden} #IDX-main.IDX-page-myaccount .mlm-saved-property{position:relative;aspect-ratio:4/3;height:auto !important;min-height:0 !important; background-size:cover !important;background-position:center !important;border-radius:0 !important;margin:0 !important} #IDX-main.IDX-page-myaccount .mlm-saved-property__overlay{position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(10,20,15,.78) 100%) !important;opacity:1 !important} #IDX-main.IDX-page-myaccount .mlm-prop__details{position:absolute;left:0;right:0;bottom:0;padding:14px 16px !important; color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.35);font-size:.9rem;line-height:1.35} #IDX-main.IDX-page-myaccount .mlm-prop__details .clearfix{display:none} #IDX-main.IDX-page-myaccount .single-prop-listingPrice{display:block;font-family:var(--serif) !important;font-size:1.4rem;font-weight:500; margin:0 0 2px} #IDX-main.IDX-page-myaccount :is(.single-prop-address,.single-prop-city,.single-prop-state){text-transform:capitalize !important} #IDX-main.IDX-page-myaccount .single-prop-address{display:block;margin-top:2px} #IDX-main.IDX-page-myaccount .mlm-prop__favorite{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer} #IDX-main.IDX-page-myaccount .mlm-prop__favorite .fa-stack{width:auto;height:auto;line-height:1} #IDX-main.IDX-page-myaccount .mlm-prop__favorite .fa-heart{position:static;font-size:1.1rem;color:#C0392B} #IDX-main.IDX-page-myaccount .mlm-saved-property-updates{border-top:0} /* email-update switches in the site blue */ #IDX-main.IDX-page-myaccount .mlm-toggle-switch__slider--active{background:var(--lake) !important} #IDX-main.IDX-page-myaccount .mlm-toggle__placeholder-container{color:var(--granite)} /* settings and other forms inside My Account */ #IDX-main.IDX-page-myaccount :is(input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea){ border:1px solid var(--line) !important;border-radius:var(--r) !important;padding:10px 12px !important;background:var(--paper) !important; font-size:.95rem !important;color:var(--ink);box-shadow:none !important;height:auto !important} #IDX-main.IDX-page-myaccount label{font-size:.88rem;font-weight:500;color:var(--ink)} @media (max-width:640px){ #IDX-main.IDX-page-myaccount #idx-mlm-landing-cta{padding:26px 18px !important} #IDX-main.IDX-page-myaccount #idx-mlm-brand::after{font-size:1.5rem} } @media (min-width:768px){ #IDX-main.IDX-page-myaccount :is(.mlm-menu__toggle,.mlm-mobile-close){display:none !important} #IDX-main.IDX-page-myaccount .mlm-navbar__collapse{display:block !important} } /* ---------- IDX pages: no white slab behind the content ---------- IDX paints its whole content area white, which shows as a big white box on the site's off-white background (most noticeable in My Account). Let the site background show through; the cards and boxes inside keep their own white. */ #IDX-main, #IDX-main :is(.IDX-pageContainer,#IDX-detailsPageContainer,#IDX-detailsWrapper,#idx-mlm-app,#app-body, .container-fluid,.IDX-container-fluid){background:transparent !important;box-shadow:none !important;border-color:transparent !important} #IDX-main.IDX-page-myaccount :is(.panel,.panel-default,.panel-body,.panel-heading):not(#idx-mlm-landing-cta){ background:transparent !important} /* My Account: the "My Account" dropdown arrow. IDX swaps its icon when the menu opens, and the swapped icon comes from the icon font that doesn't load, so it showed as an empty box. Hide IDX's icon bits and draw one arrow after the text that flips when open. */ #IDX-main.IDX-page-myaccount .mlm-dropdown-icon > *{display:none !important} #IDX-main.IDX-page-myaccount .mlm-dropdown-icon{display:inline-block;width:auto;height:auto;margin:0 0 0 2px;background:none !important; border:0 !important;order:2} #IDX-main.IDX-page-myaccount .mlm-dropdown-icon::after{content:"";display:inline-block;width:0;height:0;margin-left:4px; vertical-align:middle;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor; transition:transform .15s} #IDX-main.IDX-page-myaccount :is(.dropdown.open,.dropdown.show,.dropdown.active) > a .mlm-dropdown-icon::after, #IDX-main.IDX-page-myaccount .dropdown > a[aria-expanded="true"] .mlm-dropdown-icon::after{transform:rotate(180deg)} #IDX-main.IDX-page-myaccount .mlm-dropdown-title{order:1} /* other icons My Account may use, so none turn into empty boxes */ #IDX-main.IDX-page-myaccount .fa-caret-up::before{content:"\25B4"} #IDX-main.IDX-page-myaccount .fa-chevron-down::before{content:"\25BE"} #IDX-main.IDX-page-myaccount .fa-chevron-up::before{content:"\25B4"} #IDX-main.IDX-page-myaccount .fa-chevron-left::before{content:"\2039"} #IDX-main.IDX-page-myaccount .fa-chevron-right::before{content:"\203A"} #IDX-main.IDX-page-myaccount .fa-check::before{content:"\2713"} #IDX-main.IDX-page-myaccount .fa-plus::before{content:"+"} #IDX-main.IDX-page-myaccount .fa-minus::before{content:"\2212"} #IDX-main.IDX-page-myaccount .fa-pencil::before{content:"\270E"} #IDX-main.IDX-page-myaccount .fa-envelope::before{content:"\2709"} #IDX-main.IDX-page-myaccount :is(.fa-trash,.fa-trash-o,.fa-close,.fa-remove)::before{content:"\00d7"} #IDX-main.IDX-page-myaccount :is(.fa-cog,.fa-gear)::before{content:"\2699"} #IDX-main.IDX-page-myaccount .fa-search::before{content:"\2315"} /* "Receive Email Updates" rows on saved searches and saved properties: label left, switch right */ #IDX-main.IDX-page-myaccount [class*="updates__toggle-update"]{display:flex !important;align-items:center; justify-content:space-between;gap:16px;padding:12px 14px !important;border-top:1px solid var(--paper-2); color:var(--granite);font-size:.88rem} #IDX-main.IDX-page-myaccount [class*="updates__toggle-update"] > :last-child{margin-left:auto;flex:none} #IDX-main.IDX-page-myaccount :is(.mlm-toggle-switch,.mlm-toggle__placeholder-container){display:inline-flex;align-items:center;gap:8px} #IDX-main.IDX-page-myaccount :is(.dropdown-menu,.mlm-navbar__nav){list-style:none !important;padding-left:0} #IDX-main.IDX-page-myaccount .dropdown-menu > li{list-style:none;margin:0} /* ---------- My Account: keep the site at its normal size ---------- IDX's My Account app loads an older toolkit (Bootstrap) that shrinks the page's base text size to 10px. The site sizes everything from that base, so the header, footer and our styling all came out about a third smaller on this page only. Put the base back. */ html:has(#IDX-main.IDX-page-myaccount){font-size:100% !important} /* My Account tabs: no box around a tab after clicking it. Keyboard users still get a clear, spaced-out focus ring. */ #IDX-main.IDX-page-myaccount .mlm-navbar a:is(:focus,:active){outline:none !important;box-shadow:none !important; background:none !important;border-top:0 !important;border-left:0 !important;border-right:0 !important} #IDX-main.IDX-page-myaccount .mlm-navbar a:focus-visible{outline:2px solid var(--lake) !important;outline-offset:6px;border-radius:4px} /* ---------- My Account: Saved Searches page ---------- The full page wraps each card in a one-third-width column. Inside our card grid that column kept its one-third width, squeezing each card into a thin strip. Let it fill its grid cell. */ #IDX-main.IDX-page-myaccount [id*="saved-search"][id$="-group"] > *, #IDX-main.IDX-page-myaccount [id*="saved-propert"][id$="-group"] > *{float:none !important;width:auto !important; max-width:none !important;padding:0 !important;margin:0 !important;min-width:0} #IDX-main.IDX-page-myaccount .saved-searches > .panel-heading{padding:0 !important;margin:0 0 16px !important;border:0 !important} #IDX-main.IDX-page-myaccount .saved-searches .panel-title > div{display:flex;align-items:baseline;justify-content:space-between; flex-wrap:wrap;gap:8px;padding:0 0 10px;border-bottom:1px solid var(--line)} #IDX-main.IDX-page-myaccount .saved-searches .panel-title :is(span,span *){font-family:var(--serif) !important;font-weight:500} #IDX-main.IDX-page-myaccount .saved-searches .panel-title > div > span:first-child{font-size:1.5rem} #IDX-main.IDX-page-myaccount .saved-searches .panel-title > div > span.mlm-align__right{font-size:1rem;color:var(--granite);float:none !important} #IDX-main.IDX-page-myaccount .saved-searches .panel-title :is(.clearfix,hr){display:none} /* the card itself */ #IDX-main.IDX-page-myaccount .mlm-card.saved-search{display:flex;flex-direction:column;height:auto !important;min-height:0 !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__title{height:auto !important;margin:0 !important;padding:0 !important} #IDX-main.IDX-page-myaccount .saved-search :is(.mlm-card__menu,.mlm-card__body){position:static !important;height:auto !important; max-height:none !important;overflow:visible !important;transform:none !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__menu-divider{display:none} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__menu-bar{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase !important; color:var(--granite) !important;font-weight:600;padding:12px 16px 0 !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__menu-bar *{text-transform:uppercase !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body{padding:4px 16px 14px !important;color:var(--ink)} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-titleText{display:inline-flex;align-items:center;gap:8px; font-family:var(--serif) !important;font-size:1.3rem;font-weight:500;color:var(--ink);cursor:pointer} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-titleText .fa-pencil{font-size:.95rem;color:var(--granite)} /* rename box (appears after clicking the pencil) */ #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-hiddenInput:not(.hidden){margin:8px 0 4px} #IDX-main.IDX-page-myaccount .saved-search .input-group{display:flex;gap:8px;width:100%} #IDX-main.IDX-page-myaccount .saved-search .input-group .form-control{flex:1;min-width:0;height:auto !important} #IDX-main.IDX-page-myaccount .saved-search .input-group-btn{display:flex;width:auto} #IDX-main.IDX-page-myaccount .saved-search .input-group__button{border:1px solid var(--ink) !important;background:var(--ink) !important; color:var(--snow) !important;border-radius:var(--r) !important;padding:0 14px !important;min-width:44px;box-shadow:none !important} /* the search's details as a tidy two-column list */ #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px; margin:12px 0 14px;font-size:.9rem;line-height:1.35} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-fields br{display:none} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-fields > span{display:flex;flex-direction:column;min-width:0} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__body-fields strong{font-weight:500;font-size:.78rem;color:var(--granite)} /* View Listings / Edit / Delete as one row of actions */ #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__stacked{display:flex !important;flex-wrap:wrap;gap:8px;margin:0 !important; padding:0 !important;list-style:none} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item{margin:0 !important;float:none !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item-link{display:inline-block;padding:7px 10px !important;border-radius:var(--r); border:1px solid var(--line) !important;background:var(--paper) !important;color:var(--ink) !important;font:inherit;font-size:.88rem; font-weight:500;text-decoration:none;cursor:pointer;line-height:1.2} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item:first-child .mlm-nav__item-link{background:var(--ink) !important; border-color:var(--ink) !important;color:var(--snow) !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item:last-child .mlm-nav__item-link{color:#9A3412 !important;border-color:transparent !important; background:none !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item-link:hover{border-color:var(--ink) !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__footer{margin-top:auto;padding:0 !important;border-top:0 !important} #IDX-main.IDX-page-myaccount .fa-angle-up::before{content:"\25B4"} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item:last-child{margin-left:auto !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__stacked{flex-wrap:nowrap !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-card__footer > *{width:100%} #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__item-link{white-space:nowrap} /* Saved Searches: IDX hides View Listings / Edit / Delete behind the menu button and opens them as a panel over the card, with no clear way to close it. The actions now always sit in the card, so the menu button isn't needed; IDX's "open" state looks exactly like the normal one. */ #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__stacked, #IDX-main.IDX-page-myaccount .saved-search .mlm-nav__stacked.mlm-nav__active{display:flex !important;position:static !important; inset:auto !important;opacity:1 !important;visibility:visible !important;max-height:none !important;height:auto !important; width:auto !important;transform:none !important;pointer-events:auto !important;overflow:visible !important; background:none !important;box-shadow:none !important;z-index:auto !important;border:0 !important} #IDX-main.IDX-page-myaccount .saved-search .mlm-button__toggle{display:none !important} /* ---------- map search: drop filters that don't help here ---------- Status: the MLS feed only sends active listings (Utah doesn't share sold data), so Active / Sold choices do nothing. Type stays, trimmed to Residential, Commercial and Land by site.js. Note: IDX gives the phone "Filters" button the same id as the desktop Status button, so the desktop one is targeted by its desktop-only class. */ #IDX-main.IDX-page-mapsearch #status-filter-button.idx-filter-button--hide--mobile, #IDX-main.IDX-page-mapsearch .property-status-filter-container, /* More > MLS: there's only one MLS (Wasatch Front), so the choice does nothing. (".mls-filter-container" alone; the phone panel is "mls-filter-container-mobile", a different name) */ #IDX-main.IDX-page-mapsearch .mls-filter-container{display:none !important} #IDX-main.IDX-page-mapsearch option.iv-off{display:none !important} /* ---------- map search: filter panels stay below the site header ---------- IDX draws the Price / Bed & Baths / Type / More panels on a high layer, so when you scrolled with one open it slid over the header. Keep the whole filter bar (and anything it opens) on its own layer: above the map, below the header. */ /* desktop only: on phones the Filters panel lives inside this bar, and this layer kept the full-screen panel UNDER the site header, which covered its top row (and its Close button) */ @media (min-width:761px){ #IDX-main.IDX-page-mapsearch #prime-map-search--filter-bar{position:relative;z-index:5} } /* ---------- map search on phones: the full-screen Filters panel ---------- site.js adds "iv-filters-open" to the page while the panel is showing. Then: - the panel is exactly the visible screen height. IDX sizes it to 100vh, which on phones is taller than the area between the browser bars, so its top (results count, close button, Minimum / Maximum labels) was pushed off the top of the screen; - the page behind it can't scroll; - the floating "List View" button, which sat on top of the panel, is hidden. */ html.iv-filters-open, html.iv-filters-open body{overflow:hidden !important;overscroll-behavior:none} html.iv-filters-open #IDX-main.IDX-page-mapsearch #toggle-map-button{display:none !important} html.iv-filters-open #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile{height:100dvh !important;max-height:100dvh !important; overflow-y:auto !important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--snow) !important} html.iv-filters-open #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header{position:sticky;top:0;z-index:3; display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--snow) !important; padding:calc(12px + env(safe-area-inset-top, 0px)) 18px 12px !important;border-bottom:1px solid var(--line); font-weight:600;font-size:.95rem;color:var(--ink)} html.iv-filters-open #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header .header-close{min-width:40px;min-height:40px; display:grid;place-items:center;cursor:pointer} html.iv-filters-open #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-body{padding:6px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important} html.iv-filters-open #IDX-main.IDX-page-mapsearch .idx-filter-input-section-mobile{padding:14px 0 !important; border-bottom:1px solid var(--paper-2)} /* phone Filters panel, applied whether or not the page has noticed it opening: never taller than the visible screen (so its top can't be pushed off-screen), scrolls inside, and its top row, with our Close button, stays pinned */ @media (max-width:760px){ #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile{max-height:100dvh !important;overflow-y:auto !important; overscroll-behavior:contain} #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header{position:sticky !important;top:0;z-index:3;display:flex !important; align-items:center;justify-content:space-between;gap:12px;background:var(--snow) !important; padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px !important;border-bottom:1px solid var(--line)} /* IDX's own close control, drawn as a visible "Close x" button with styling alone (no script), so it works even if the phone still has an older copy of site.js */ #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header .header-close{display:inline-flex !important; align-items:center;justify-content:center;margin-left:auto;min-height:38px;padding:0 16px !important; /* IDX gives this control a fixed small size; let it fit its label instead */ width:auto !important;height:auto !important;min-width:0 !important;max-width:none !important; line-height:1 !important;white-space:nowrap;box-sizing:border-box; border:1px solid var(--ink) !important;border-radius:100px;background:var(--ink) !important;color:var(--snow) !important; font-size:0 !important;cursor:pointer;position:relative;z-index:4;visibility:visible !important;opacity:1 !important} #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header .header-close > *{display:none !important} #IDX-main.IDX-page-mapsearch .mls-filter-container-mobile-header .header-close::before{content:"Close \00d7" !important; font-family:var(--sans) !important;font-size:14px !important;font-weight:600;line-height:1 !important; letter-spacing:.01em;color:var(--snow) !important} #IDX-main.IDX-page-mapsearch .iv-filters-close{display:none !important} } /* results next to the map (desktop): four big cards in view (two across, two down) instead of eight small ones. The photo fills the card and is cropped to fit (never stretched); the price and address sit on a soft dark fade along the bottom; badges and the heart stay at the top; the whole card still opens the listing. */ @media (min-width:961px){ #IDX-main .idx-results--map .idx-results__listing > .idx-listing-card{position:relative !important; display:flex !important;flex-direction:column !important;justify-content:flex-end !important; height:calc(var(--iv-panel-h, 760px) / 2 - 44px) !important;min-height:0 !important;max-height:none !important;padding:0 !important; overflow:hidden !important;background:var(--paper-2) !important} #IDX-main .idx-results--map .idx-listing-card .idx-listing-card__image{position:absolute !important;inset:0 !important; width:100% !important;height:100% !important;max-width:none !important;max-height:none !important; object-fit:cover !important;object-position:center !important;margin:0 !important;z-index:0 !important;transform:none !important} #IDX-main .idx-results--map .idx-listing-card .idx-listing-card__image-overlay{position:absolute !important;inset:0 !important; z-index:1 !important;pointer-events:none;display:block !important; background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(12,20,15,.82) 100%) !important;opacity:1 !important} #IDX-main .idx-results--map .idx-listing-card > .idx-listing-card__link{position:absolute !important;inset:0 !important;z-index:1 !important;display:block !important} #IDX-main .idx-results--map .idx-listing-card > .idx-listing-card__actions{position:absolute !important;top:0;left:0;right:0; z-index:3 !important;display:flex;align-items:flex-start;justify-content:space-between;padding:10px 12px !important} /* the text sits over the bottom of the photo and can never make the card taller: anything beyond the bottom 70% of the card is cut off rather than pushing the card open */ #IDX-main .idx-results--map .idx-listing-card > .idx-listing-card__content{position:absolute !important;left:0 !important; right:0 !important;bottom:0 !important;top:auto !important;max-height:70% !important;overflow:hidden !important; z-index:2 !important;pointer-events:none;padding:14px 16px 14px !important;color:#fff !important;background:none !important; text-shadow:0 1px 2px rgba(0,0,0,.35)} /* IDX forces each listing's box to a fixed size or shape (644px tall on Ishmael's screen) that's bigger than the card inside it. Undo every way it can do that, with extra weight (#IDX-main twice), and let each row be only as tall as its cards. */ #IDX-main#IDX-main .idx-results--map .idx-results__category{grid-auto-rows:auto !important;grid-template-rows:none !important; align-items:start !important;align-content:start !important} #IDX-main#IDX-main .idx-results--map .idx-results__category > .idx-results__listing{height:auto !important;min-height:0 !important; max-height:none !important;aspect-ratio:auto !important;flex:none !important;align-self:start !important; padding-top:0 !important;padding-bottom:0 !important;contain:none !important} #IDX-main .idx-results--map .idx-listing-card > .idx-listing-card__content *{color:#fff !important} #IDX-main .idx-results--map .idx-listing-card__price{font-size:1.5rem !important;line-height:1.15;margin:2px 0 4px} #IDX-main .idx-results--map .idx-listing-card__details, #IDX-main .idx-results--map .idx-listing-card__address{font-size:.86rem !important;line-height:1.4} #IDX-main .idx-results--map .idx-listing-card__status{font-size:.74rem;opacity:.9} } /* Advanced Search: "+ sq ft" right after the number in the SqFt box (site.js places it) */ #IDX-main .iv-plus-wrap{position:relative;display:block} #IDX-main .iv-plus-wrap > input{width:100%} #IDX-main .iv-plus{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none; color:var(--granite);font-size:.95em;white-space:nowrap} #IDX-main .iv-plus-measure{position:absolute;visibility:hidden;white-space:pre;left:-9999px;top:0} /* if IDX draws SqFt as a type-in picker instead of a box, add the "+" to the picked number */ #IDX-main select[name="sqft"] + .select2-container .select2-selection__rendered:not(:has(.select2-selection__placeholder)):not(:empty)::after{ content:"+";margin-left:1px} /* ---------- phones: IDX's floating buttons never sit on top of the site menu ---------- The map search's "List View / Map View" button (and the results page's bottom button bar) float on a layer above the site header, so they covered the menu. Keep them just under the header, and hide them while the menu is open. */ @media (max-width:960px){ #IDX-main #toggle-map-button, #IDX-main #idx-results-mobile-control{z-index:90 !important} html.iv-menu-open #IDX-main #toggle-map-button, html.iv-menu-open #IDX-main #idx-results-mobile-control{visibility:hidden !important} }