/**========================= New optimized CSS ========================**/ .save li a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important; background-color: var(--front_btn_primary_bg, #a00a0f) !important;} .save .auto-select i.svg-icons { color: var(--white) !important;} .save li a.auto-select .fa { color: var(--white) !important;} .backdiv {position: fixed;width: 100%;height: 100%;display:none;top: 0;left: 0;z-index: 1000;opacity: 0.6;background-color:black;} #divhide > h2 img{margin:13px 4px;} span.price_unit { font-size: 75%; } .mapSearchPage .mapSearchContainer { margin-top: 10px; } .pageEditorContent { display: inline-block; width: 100%; color: var(--pc-text-dark);} /* Swiper's built-in dynamicBullets mode fought this pill's fixed right-anchored position (it inline-transforms/resizes the container assuming it's free to recenter) -- pagination windowing is done manually instead (updateDotsWindow() in table_form_renders.php, same MAX_DOTS=5 clamped-centering logic as the homepage's fp-photo gallery), toggling .is-hidden on plain (non-dynamic) bullets. Container naturally shrinks to fit only the visible bullets via width:fit-content, same as .fp-dots. */ .swiperSlider .swiper-pagination-bullets.swiper-pagination-horizontal { position: absolute; top: 10px; right: 10px; left: auto; background: #00000061; z-index: 1; height: fit-content; padding: 10px; width: fit-content; border-radius: 20px; } .inventoryPage .swiperSlider .swiper-pagination-bullets.swiper-pagination-horizontal { right: 40px; left: auto;} .swiperSlider span.swiper-pagination-bullet { width: 7px; height: 7px; background: #ffffff; transition: width .2s ease, height .2s ease, opacity .2s ease, margin .2s ease; } /* Collapsed to zero width/opacity instead of display:none, so a dot leaving or entering the visible window shrinks/grows and the others slide over to fill the gap -- gives the window movement a visible animation instead of an instant jump. */ .swiperSlider span.swiper-pagination-bullet.is-hidden { width: 0; height: 0; margin-left: 0 !important; margin-right: 0 !important; opacity: 0; } .swiperSlider span.swiper-pagination-bullet.swiper-pagination-bullet-active { width: 8px; height: 8px; } .defaultPageBanner img{ width: 100%; padding:10px 0px; } .propertySearchPage .int_cntnt { padding: 0px; } .propertySearchPage .page_title_heading { margin-bottom: 15px; } /* No heading text sits between the red header and the search tabs on these pages (unlike SS/SI, which have their own heading providing spacing) -- match the sidebar's own buttons-to-card gap instead of the shared component's default 8px. .propertySearchPage alone isn't specific enough -- it's also on the 4 SS pages (which get "singleSearchPage" too) and on ourFeaturedProperties.php (which gets "inventoryPage" too), both of which DO have their own heading and must keep the smaller default gap. */ .noHeadingAboveTabs .ss-page-header-bar { margin-bottom: 20px; } .propertySearchPage .page_title_heading h2 { display: flex; gap: 5px; width: 100%; align-items: center; } .propertySearchPage .page_title_heading svg { width: 40px; } .propertySearchPage .search-properties-panel { width:100%; margin-top:0px; margin-bottom:24px; border-radius: 5px;} .propertySearchPage .search-properties-panel-main { width:100%; background:var(--white); z-index:99 } .propertySearchPage .search-properties-panel-mid { width:100%; background:var(--white); } .propertySearchPage .defaultPageBanner img{ padding: 0px; margin-bottom: 15px; } .info-window { display: contents; } /* .info-window is display:contents so its own width does nothing -- the two real boxes (photo + info) carry the width; bump from the old ~260px. */ .info-window .propImageMap, .info-window .propInfo { width: 330px; max-width: calc(100vw - 56px); box-sizing: border-box; } .info-window p { color: var(--cgray); font-size: 14px; font-weight: 400; text-align: left; height: auto; padding: 0px 10px 5px; } .info-window h3 { color: var(--cgray); padding: 10px; margin: 0px; border-bottom: solid 1px var(--lgray-cc);} /* Two-row address (street / city-state-zip), matching .property-address + .property-subaddress's own font-size/weight/color from the property card grid (css/master.css) -- same values, own class names since this sits in a different container with its own padding/margin conventions. */ .info-window .info-window-address { font-size: 15px; font-weight: 700; color: var(--pc-text-dark, #333333); border-bottom: 0px; padding: 10px 96px 0px 10px; margin: 0 0 2px; line-height: 1.3; } .info-window .info-window-subaddress { font-size: 12.5px; font-weight: 400; color: var(--pc-text-gray, #6b6b6b); padding: 0 96px 0 10px; margin: 0; } .info-window img { width: 100%; filter: brightness(0.8); height: 100%;} .info-window .propImageMap span.propStatus { position: absolute; top: 15px; left: 10px; padding: 5px 10px; border-radius: 5px; font-size: 14px; background: #000000b3; color: var(--white); } .info-window .propImageMap span.propFavorite { position: absolute; top: 15px; right: 10px; padding: 10px; background: #00000061; border-radius: 50%; } .info-window .propImageMap span.propFavorite:hover { background: #19191961 } .info-window .propImageMap span.propFavorite .fa-heart, .info-window .propImageMap span.propFavorite .fa-heart-o { color: var(--white); font-size:18px; } .info-window .propImageMap { height: 150px; overflow: hidden; position: relative; } .info-window .propInfo span.propBedBath { font-size: 13px; color: var(--pc-text-gray, #6b6b6b); } .info-window .propInfo { padding-bottom: 5px; position: relative; } /* flex + align-items:baseline instead of propBedBath's old float:right -- a float aligns to the top of the line box, which visibly floated the smaller 13px bed/bath text above the larger 18px price instead of lining up with it. Baseline lines up the actual text, not the boxes, so two different font sizes still read as sitting on the same line. */ .info-window p.propPrice { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .info-window .propInfo span.price { color: var(--front_primary_brand); font-weight: 600; font-size: 18px; } /* MLS attribution logo -- top-right, in line with the address block (address/ subaddress reserve 96px padding-right so text never runs under it). Absolute so it adds no vertical space of its own. */ .info-window img.miamiRealtorLogo { width: 78px; height: auto; position: absolute; top: 12px; right: 10px; margin: 0; } /* [MAP_MARKER_USE_INFO_WINDOW = true branch, js/map_search_new.js] Action row -- View Details (opens the listing in a new tab, preserving the search/map state in this one) + Show in List (jumps to the matching Photo View card in this same window). Styled to match the property card grid's own two-button row (.property-actions .propBoxButton / .view-details in css/master.css) for visual consistency. */ .info-window .info-window-actions { display: flex; gap: 6px; padding: 10px 10px 12px; } .info-window .info-window-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 11.5px; font-weight: 600; text-align: center; border-radius: 6px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, color .15s; } .info-window .info-window-btn-outline { background: var(--front_btn_secondary_bg, #ffffff); color: var(--front_btn_secondary_text, #a00a0f); border: 1px solid var(--front_btn_secondary_border, #a00a0f); } .info-window .info-window-btn-outline:hover { background: var(--front_btn_secondary_bg_hover, #a00a0f14); color: var(--front_btn_secondary_text_hover, #a00a0f); border-color: var(--front_btn_secondary_border_hover, #a00a0f); } .info-window .info-window-btn-solid { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: 1px solid var(--front_btn_primary_border, #a00a0f); } .info-window .info-window-btn-solid:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); border-color: var(--front_btn_primary_border_hover, #900606); } /* "View Rates" popup (propertyDetails.php): 568px widget + the 30px header gutters */ #mortgageRatesModal .modal-dialog { width: 100%; max-width: 628px; } #mortgageRatesModal .modal-content { background: transparent; } #mortgageRatesModal .panel.panel-default { width: 100%; } #mortgageRatesModal .panel-body { padding: 20px 30px 30px; } #mortgageRatesModal .major-widget { float: none; } #mortgageRatesModal .major-widget iframe { display: block; width: 100%; max-width: none; border: 0; } #agentInfoPopup .panel.login-screen { width: auto; } /* caps modal height + scrolls the body so it can't clip off short screens */ #agentInfoPopup .panel.login-screen { max-height: 90vh; display: flex; flex-direction: column; } #agentInfoPopup .panel-body.login-content { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* stacked/centered layout, matching the mockup (was a side-by-side flex row) */ #agentInfoPopup .agentProfilePic { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 7px solid #b4b4b4; transition: all ease-in-out 0.2s; margin: 0 auto 22px; } #agentInfoPopup .agentProfilePic:hover { border-width:12px; } #agentInfoPopup .agentProfilePic a { padding:0px; } .agentProfilePic img { width: 100%; height: 100%; object-fit: cover; display: block; } #agentInfoPopup img.img_brdr { width:100%; height:100%; display: block;} @media (max-width: 560px) { #agentInfoPopup .agentProfilePic { width: 300px; height: 300px; margin: auto; } } #agentInfoPopup .loginInputContainer { text-align: center; } #agentInfoPopup .agentContanctInfo { width: 100%; } #agentInfoPopup .modal-dialog { width: 100%; max-width: 480px; } #agentInfoPopup .agentPopTable td.dataLable { font-weight: 600; text-align: right; width: 93px; } #agentInfoPopup .agentPopTable td.dataLable, #agentInfoPopup .agentPopTable td.dataValue { border: 0px !important; padding: 5px 0px; } #agentInfoPopup .agentPopTable td.dataLable span { border-right: 1px solid #6e6e6e; padding-right: 7px; margin-right: 7px; } #agentInfoPopup .dataRow { font-size: 16px; } #agentInfoPopup .agentPopTable td.dataLable.officeFaxMinW { min-width: 93px; } #agentInfoPopup table.agentPopTable.table { width: fit-content; margin: auto; } #agentInfoPopup td.dataValue.emailAddress { word-break: break-word; } #agentInfoPopup .agentContanctInfo .agentName { font-size: 26px; color: #a00a0f; border-bottom: 2px solid #80808054; width: 100%; padding: 0 0 20px; margin: 0px 0px 24px; font-weight: 700; text-align: center;} #agentInfoPopup .loginBoxContainer { padding: 32px 15px 13px; } #agentInfoPopup .testimonialInfo .dataRow { color: #000; text-align: center;} #agentInfoPopup .testimonialInfo { display: flex; flex-direction: column; gap: 10px; padding: 0px;} #agentInfoPopup .testimonialCientName { font-size: 18px; color: var(--front_primary_brand); } #agentInfoPopup .testimonialComment { text-align: left; } #agentInfoPopup .testimonialRating i.fa { font-size: 20px; } .testimonialRating { display: flex; align-items: center; gap: 5px; justify-content: center; font-size: 20px; } .testimonialPanel .testimonialRating, .testimonialPanel .continueReading { margin-bottom:15px; } .mapPanel { border-radius: 15px; } a.readmore, a.viewall { border: 1px solid #999999; display: inline-block; font-size: 14px; border-radius: 5px; text-transform: uppercase; padding: 10px 30px; margin-top: 15px; text-transform:uppercase; } a.readmore .fa, a.viewall .fa { margin-left:6px; } .welcomePanel a.readmore { background-color: var(--home_welcome_btn_bg); color: var(--home_welcome_btn_text_border); border-color: var(--home_welcome_btn_text_border);} .welcomePanel a.readmore:hover { background-color: var(--home_welcome_btn_bg_hover); color: var(--home_welcome_btn_text_border_hover); border-color: var(--home_welcome_btn_text_border_hover); } .welcomePanel.welcomePanelHome{background-color: var(--home_welcome_bg) !important;} .welcomePanel { background:var(--white); padding:30px 0 35px; text-align:center } .welcomePanel p { text-align:left;font-size:18px;color:var(--lgray-33);line-height:28px;font-family: var(--font-base);} .featuredPanel a.viewall { background-color: var(--home_featured_btn_bg); border-color: var(----home_featured_btn_text_border); color: var(--home_featured_btn_text_border); } .featuredPanel a.viewall:hover{ background-color: var(--home_featured_btn_bg_hover); } /* Home page CTA buttons share one SHAPE (silhouette only -- height/padding/ radius/border-width/typography/transition), matching .sf-save-search-btn. Colors are deliberately NOT part of this shared rule: Welcome/Featured get white-bg/red-border/red-text below; Testimonial keeps its own original colors entirely (css/new-master.css, .testimonialPanelHome a.readmore rule further down, unchanged) -- white border/white text on a transparent bg, since it sits on a red background photo where red-on-red would vanish. */ .welcomePanel a.readmore, .featuredPanel a.viewall, .testimonialPanelHome a.readmore { height: 48px; padding: 0 20px 0 18px; border-radius: 8px; border-width: 1.5px; border-style: solid; font-weight: 700; letter-spacing: 0.05em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* Template-level Learn More CTA, placed after the CMS-edited welcome content -- 28px matches the spacing convention the CMS content itself already uses above its own (soon to be removed) static button. */ .welcomePanel a.readmore { margin-top: 28px; } /* Sidebar-to-content gap is now a single global flex gap: .container .resource{gap:28px} in master.css */ .testimonial-content::before { content: ""; position: absolute; left: -8px; border-top: 1px solid var(--lgray-cc); border-right: 1px solid var(--lgray-cc); transform: rotate(225deg); width: 15px; height: 15px; background: #fff; } .testimonialPanelHome .testimonialCont .clientName, .testimonialPanelHome h1, .testimonialPanelHome a, .testimonialPanelHome .fa-chevron-right, .testimonialPanelHome .testimonialCont {color: var(--home_testimonial_text) !important} .testimonialPanelHome a.readmore { background-color: var(--home_testimonial_btn_bg); color: var(--home_testimonial_btn_text_border) !important; border-color: var(--home_testimonial_btn_text_border); } .testimonialPanelHome a.readmore:hover { background-color: var(--home_testimonial_btn_bg_hover); border-color: var(--home_testimonial_btn_text_border_hover); color: var(--home_testimonial_btn_text_border_hover) !important; } .testimonialPanelHome { background-image: var(--home_testimonial_bg_image) !important; background-repeat: no-repeat; background-position: center bottom; background-size: cover; background-attachment: scroll; background-color: rgba(0, 0, 0, 0); /* Optional if you want transparency */ } /* overlay */ .testimonialPanelHome::before { content: ""; position: absolute; inset: 0; background: var(--home_testimonial_overlay); z-index: 0; } /* keep text above overlay */ .testimonialPanelHome > * { position: relative; z-index: 1; } .testimonialPanel{width:100%;overflow:hidden;background:url(../images/testimonial-bg.jpg) center bottom no-repeat ;text-align:center;position:relative;background-size:cover;background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;-webkit-background-size:cover;padding:30px 0 35px;text-align:center } .testimonialPanel h1{text-align:center} .testimonialPanel .testimonialCont { font-size:16px; margin: auto; } .testimonialPanel .testimonialCont .clientText { text-align:center; padding:0px 5px; margin-bottom: 15px; line-height: 28px; } .testimonialPanel .testimonialCont .clientText .textOpen, .testimonialPanel .testimonialCont .clientText .textClose { width: 35px; height: 24px; display: inline-block; vertical-align: bottom; position: relative; } .testimonialPanel .testimonialCont .clientText .textOpen { background: url(../images/text-open.png) no-repeat; top: -10px; } .testimonialPanel .testimonialCont .clientText .textClose { background: url(../images/text-close.png) no-repeat; top: 5px; } .testimonialPanel .testimonialCont .clientName { font-size:16px; line-height:20px; } /* Soft divider between the two home testimonials. Stacked columns (below the col-md-6 breakpoint at 992px) get a horizontal fade in normal flow; side-by-side columns (992px+) get a vertical fade positioned in the row's gutter. Mobile note: the divider's own margin-top is useless here -- clearing a float snaps the cleared box straight to the float's bottom edge regardless of its margin-top (clearance swallows it). The real top gap has to come from margin-bottom on the float itself, which the clearance calc DOES respect. */ @media (max-width:991px) { .testimonialPanelHome .testinmonailNumber_1 { margin-bottom: 24px; } } .testimonialPanelHome .testimonialDivider { clear: both; width: 70%; height: 2px; margin: 0 auto 24px; /*background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 15%, rgba(255,255,255,.55) 85%, rgba(255,255,255,0) 100%);*/ background: linear-gradient(to bottom, #ffffff00 5%, #ffffff99 5%, #ffffff99 95%, #ffffff00 95%); } @media (min-width:992px) { .testimonialPanelHome .testimonialRow { position: relative; } .testimonialPanelHome .testimonialDivider { position: absolute; top: 50px; bottom: 4px; left: 50%; width: 2px; height: auto; margin: 0; transform: translateX(-50%); /*background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 15%, rgba(255,255,255,.55) 85%, rgba(255,255,255,0) 100%);*/ background: linear-gradient(to bottom, #ffffff00 5%, #ffffff99 5%, #ffffff99 95%, #ffffff00 95%); } } .featuredPanel .featureBoxOut .forRent { color: var(--home_featured_text); background-color: var(--home_featured_transparent_overlay); } .featuredPanel{padding:30px 0 35px;text-align:center;background:#f3f3f3 url(../images/graph-bg1.jpg) repeat;} .featuredPanel h1.featureText { margin-bottom: 8px; } .featuredPanel .featureSubText { font-size: 15px; margin-bottom: 15px; } #cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--white); color: #000; padding: 10px; text-align: center; z-index: 1000; box-shadow: 0px 0px 10px #00000085; } #cookie-banner button { background: #000; color: white; border: none; font-weight: 600; padding: 10px 20px; cursor: pointer; border-radius: 5px;} .cookiesPopups .modal-content { background: transparent; } .cookiesPopups .panel.panel-default { width: 100%; } .cookiesPopups .cookiesInfo { text-align: left; font-size: 16px; padding: 20px 15px 5px; } .cookiesPopups .cookiesInfo a { color: var(--front_primary_brand); padding: 0px; display: contents; } .cookiesPopups .cookiesInfo a:hover { text-decoration: none; color: var(--front_primary_brand); } .cookiesPopups .panel-footer { text-align: center; display: flex; background: #fff; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; } .cookiesPopups .panel-footer button { background-color: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: none; padding: 10px 30px; cursor: pointer; } .cookiesPopups .panel-footer button:hover { background-color: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); } .cookieConainer { max-width: 1365px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0px 70px; } .consentButtons { display: flex; align-items: center; gap: 20px; min-width: fit-content;} .cookiesInfo { display: flex; flex-direction: column; gap: 20px; } /* Popup X ink sits 13px inside its 44px button: pull it out so it lines up with the content edge */ .signUp-modal .panel-heading.login-heading button.close, #mapSearchInfoModal .modal-header button.close { margin-right: -13px !important; } /* bootstrap.min-front-new.css forces .modal{overflow-y:scroll}: a second, empty scrollbar on desktop */ .signUp-modal.in { overflow-y: auto; } .consentText { text-align: left; } .cosentTypeRow h3 { margin-bottom: 5px; } .cosentTypeRow span { color: var(--lgray-66); } .cosentTypeRow { display: flex; justify-content: space-between; gap: 15px;} .switch { display: inline-block; height: 26px; position: relative; width: 45px; min-width: 45px;} .switch input { display:none; } .switch .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .switch .slider:before { background-color: #fff; bottom: 3px; content: ""; height: 20px; left: 3px; position: absolute; transition: .4s; width: 20px; } .switch input:checked + .slider { background-color: #66bb6a; } .switch input:checked + .slider:before { transform: translateX(18px); } .switch .slider.round { border-radius: 34px; } .switch .slider.round:before { border-radius: 50%; } .footerTop { padding:35px 0 } .footerTop h2 { font-size:16px; font-family: var(--font-base);color:var(--lgray-33);margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--lgray-cc); font-weight:bold; } .footerTop .svg-icons { color : var(--front_primary_brand) !important; width:20px; height: 20px; } .footerTop .newsPanel a { color : var(--front_primary_brand) !important; font-size:14px; } .footerTop .newsPanel a:hover { color : var(--front_primary_brand) !important; text-decoration:none; } .footerTop .newsPanel ul { background-color: var(--front_topbar_bg) !important; overflow-y:scroll; height:214px; padding:15px;} .footerTop .newsPanel1 { height:227px; padding:5px; background-color:var(--white); border:solid 1px var(--lgray-cc); width: 100%; } .feature-request a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important; background-color: var(--front_btn_primary_bg, #a00a0f) !important;} .feature-request a.auto-select .fa, .feature-request a.auto-select i.svg-icons, .feature-request a:hover i.svg-icons, .feature-request li:hover > a i.svg-icons, .feature-request a:hover .fa, .feature-request a:hover, .feature-request li.shares:hover > a{ color: var(--white) !important;} .feature-request i.svg-icons { color : var(--front_primary_brand) !important;} .feature-request a .fa { color : var(--front_primary_brand) !important;} .feature-request li.shares:hover > a, .feature-request a:hover { background-color: var(--front_btn_primary_bg, #a00a0f) !important;} .feature-request { width:100%;} .feature-request a .fa { font-size:15px;} .feature-request i.svg-icons { height: 18px; vertical-align: middle; } .feature-request i.svg-icons.svg-info-square { height: 28px; width: 28px; margin-right: 3px; } .feature-request a span { vertical-align: middle; } .feature-request1 { width:100%; background-color:var(--white); margin-bottom:4px; text-align:center; } .feature-request1 a{ font-size:15px; color:var(--cgray); font-weight:600; text-decoration:none; display:block; padding:12px 0;} .feature-request1 a:hover{ font-size:15px; color:#000;text-decoration:none; display:block; background-color:var(--white); padding:12px 0;} .saveShareDrop li { background-color:var(--white); text-align:center; position: relative;} .saveShareDrop li:hover ul.dropdown { display: block; } .saveShareDrop li ul.dropdown { background-color: var(--white);border-color: var(--lgray-cc);border-image: none;border-style: solid;border-width: 5px 1px 1px;display: none;min-width: 125px;position: absolute;z-index: 999;width: 100%; left: 0; right: 0px; } .saveShareDrop li ul.dropdown::before { color: var(--front_secondary_brand) !important; content: ""; position: absolute; left: 50%; top: -7px; transform: translateY(-50%) rotate(-90deg); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid currentColor; } .saveShareDrop li ul.dropdown li { display: block;height:auto;width:100%; box-shadow: 0px 0px 1px 0px;} .saveShareDrop li ul.dropdown li a { display: block;height:auto;width:100%;padding:10px;text-align:left; line-height: inherit; font-weight: 600; font-size: 15px;} .saveShareDrop li ul.dropdown li a .fa, .copyLinkButton .svg-copy { margin-right:5px; width:17px; line-height:17px; text-align:center;} .saveShareDrop svg { height: 18px; vertical-align: middle; color : var(--front_primary_brand); fill : var(--front_primary_brand); position: relative; } .saveShareDrop li.shares .copyLinkButton svg { height: 20px; margin-right: 8px; } .saveShareDrop:not(.pd-sidebar-actions) li:hover > a > svg { color: var(--white); } .save li a { text-decoration:none;color:var(--pc-text-dark); display:block;height:56px;width:100%;line-height:56px;} .save li .fa { font-size:16px; margin-right:6px; line-height:5px;} .save li:last-child { margin-right:0; } .save i.svg-icons { height: 18px; vertical-align: middle; color : var(--front_primary_brand);} .save:not(.pd-sidebar-actions) li:hover > a > i.svg-icons { color: var(--white) !important;} .save:not(.pd-sidebar-actions) li:hover > a .fa { color: var(--white) !important;} .save:not(.pd-sidebar-actions) li:hover > a { color: var(--white) !important; background-color: var(--front_primary_brand) !important;} .save li a .fa { color : var(--front_primary_brand) !important;} .feature-request2 { width:100%; display: flex; gap: 4px;} .feature-request2 li { flex: 1; } .feature-request2 li .fa { color : var(--front_primary_brand) !important; font-size:15px;} .feature-request2 li a { text-align:center; color:var(--cgray); font-weight:600; font-size:15px; display:block; padding:12px 0;} .feature-request2 li a:hover { text-align:center; color:#000; font-size:15px; display:block; background-color:var(--white); padding:12px 0;} .property-feature-info1 ul { display: flex; gap: 0px 40px; flex-wrap: wrap; } .property-feature-info1 li { font-size:14px;color:var(--cgray); width: calc(50% - 20px); padding: 5px 0px; display: flex; gap: 40px;} .property-feature-info-sub.amenities .property-feature-info1 li { width: calc(25% - 30px) } .property-feature-info-sub:not(.amenities) .property-feature-info1 li:not(:nth-child(-n+2)) { border-top: solid 1px #eee; } .property-feature-info1 li span { font-weight: 600; } .property-feature-info1 li span, .property-feature-info1 li span1 { width: 50%; text-align: left; } /* ── Desktop tab count-based responsive wrapping ─────────────────────────── Mobile tabs use display:grid and stack naturally — no rules needed there. Math: each tab needs ~162px min (142px text + 10px padding each side) + 6px gap. 5 tabs × 162 + 4 × 6 = 834px → wrap below 850px (with buffer). 4 tabs × 162 + 3 × 6 = 666px → always fits at desktop min (768px), no rule needed. ─────────────────────────────────────────────────────────────────────────── */ @media (min-width:980px) { .home_image header .nav > li > a.active, .home_image header .navbar-default .navbar-nav > .active > a, .home_image header .navbar-default .navbar-nav > .active > a:hover, .home_image header .navbar-default .navbar-nav > .active > a:focus { color : var(--white) !important; background: transparent;} .footerTop .newsPanel { padding-right:0px } .footerTop .newsletterPanel{padding-left:28px; } } @media (min-width:1200px){ #divhide > h2 img{margin:13px 4px;} } @media screen and (-webkit-min-device-pixel-ratio:0) { .footerTop h2{margin-bottom:12px;} .footerTop .newsletterPanel h2{margin-bottom:10px;} } .offeringType ul.chosen-results li:not(:first-child) { padding-left: 44px !important; } .adminDropdownContainer ul.dropdown-menu { border-radius: 9px; } .adminDropdownContainer ul.dropdown-menu li:first-child > a { border-top-left-radius: 9px; border-top-right-radius: 9px; } .adminDropdownContainer ul.dropdown-menu li:last-child > a { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } @media (max-width: 979px) { .footerTop .newsletterPanel h2 { margin-top: 20px; } .isBridgeProperty .single_property_detail_container { margin-bottom: 32px; } } @media (max-width: 767px) { .cookieConainer { flex-direction: column; gap: 10px; padding: 0px; } .featuredPanel .featureSubText { text-align: left; } } @media (max-width: 620px) { .property-feature-info1 ul { flex-direction: column; } .property-feature-info-sub.amenities .property-feature-info1 ul { flex-direction: row; } .property-feature-info1 li { width: 100%; } .property-feature-info-sub.amenities .property-feature-info1 li { width: calc(50% - 20px) } .property-feature-info-sub:not(.amenities) .property-feature-info1 li:not(:nth-child(-n+1)){ border-top: solid 1px #eee; } } @media (max-width: 600px) { } @media (max-width: 480px) { #agentInfoPopup .testimonialInfo { padding: 0px; } .cookiesPopups .cookiesInfo { padding: 20px 0px 5px; } /* the header drops to 15px here (common-back-front.css): content follows it */ .signUp-modal .login-screen.panel-default .panel-body .loginBoxContainer, #agentInfoPopup .loginBoxContainer { padding-left: 0; padding-right: 0; } #mortgageRatesModal .panel-body { padding: 15px; } } @media (max-width: 420px) { .contactus_info_sub .col-xs-12:nth-child(2) { margin-top: 20px; } } /* -- Slider inside featured property boxes (home + agent pages) -- */ .featuredBox .swiperSlider { position: relative; overflow: hidden; } .featuredBox .swiperSlider .swiper-slide img { width: 100%; height: 195px; object-fit: cover; display: block; } /* Labels/badges must sit above the Swiper wrapper (default z-index: 1) */ .featureBoxOut .forRent { z-index: 2; } .prop-status-ring { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: #00000061; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: auto; } .prop-status-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #fff;} .prop-status-active { background: #22c55e; } .prop-status-closed { background: #a00a0f; } .prop-status-pending { background: #f59e0b; } .prop-status-coming-soon { background: #3b82f6; } @media (max-width: 767px) { .featuredSlider .swiperSlider.propertyList .swiper-wrapper { display: block; transform: none !important; } .featuredSlider .swiperSlider.propertyList .swiper-slide { display: none; width: 100% !important; } .featuredSlider .swiperSlider.propertyList .swiper-slide:first-child { display: block; } .featuredSlider .swiperSlider.propertyList .swiper-button-next, .featuredSlider .swiperSlider.propertyList .swiper-button-prev, .featuredSlider .swiperSlider.propertyList [class^="swiper_pagination_thumb_"] { display: none !important; } /* Hide prev/next arrows on all property sliders on mobile (search, map, featured) */ .swiperSlider.propertyList .swiper-button-next, .swiperSlider.propertyList .swiper-button-prev { display: none !important; } } /* ===== Map tab loading overlay ===== */ .mapLoadingOverlay { display: none; position: absolute; inset: 0; z-index: 10; background: rgba(255,255,255,0.75); align-items: center; justify-content: center; pointer-events: none; } .mapLoadingSpinner { width: 44px; height: 44px; border: 4px solid var(--lgray-cc); border-top-color: var(--front_primary_brand); border-radius: 50%; animation: mapSpin 0.75s linear infinite; } @keyframes mapSpin { to { transform: rotate(360deg); } } /* Wrapper scopes the overlay to exactly the map canvas */ .mapViewWrap { position: relative; height: 474px; } /* ===== Property Detail — Photo/Map/Aerial/Street tabs (matches sf-tab style) ===== Mockup note: each tab is individually rounded (radius-input, 6px) rather than only the row's outer corners -- that "whole row as one clipped unit" look is exactly what the redesign moved away from, so :first-child/:last-child no longer get their own border-radius override. */ .propDetailTabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; } .propDetailTab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 14px; min-height: 118px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #333333; background: #e5e5e5; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; line-height: 1.2; text-align: center; } .propDetailTab:hover { background: #ddd; } .propDetailTab.active { background: var(--front_primary_brand); color: #fff; } .propDetailTab svg { width: 40px; height: 40px; fill: #333333; flex-shrink: 0; transition: fill 0.15s ease; } .propDetailTab.active svg { fill: #fff; } @media (max-width: 1024px) { .propDetailTab { padding: 18px 10px; min-height: 100px; } } @media (max-width: 767px) { .propDetailTabs { gap: 3px; } .propDetailTab { padding: 14px 6px; min-height: 88px; font-size: 11px; letter-spacing: 0.04em; gap: 8px; } .propDetailTab svg { width: 28px; height: 28px; } } @media (max-width: 480px) { .propDetailTab { padding: 12px 4px; min-height: 80px; } .propDetailTab svg { width: 26px; height: 26px; } } @media (max-width: 360px) { .propDetailTab { padding: 10px 3px; min-height: 72px; gap: 6px; } .propDetailTab svg { width: 22px; height: 22px; } } /* Footer news + newsletter box redesign -- global, via includes/footer.inc.php */ .footerTop { --ft-radius-card: 12px; --ft-shadow-card: 0 4px 16px rgba(0,0,0,.10); --ft-shadow-soft: 0 6px 12px rgba(0,0,0,.10); --ft-info-box-height: 232px; --ft-info-box-padding: 20px 22px; } .footerTop .newsPanel, .footerTop .newsletterPanel { display: flex; flex-direction: column; } @media (max-width: 980px) { .footerTop .newsPanel { margin-bottom: 35px; } } .footerTop .section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex: 0 0 auto; gap: 10px; } .footerTop .section-header-row h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-base); font-size: 16px; color: var(--lgray-33); margin: 0; font-weight: 700; padding-bottom: 0; border-bottom: none; } .footerTop .section-header-row .section-icon { width: 22px; height: 22px; fill: none; stroke: var(--front_primary_brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footerTop .section-header-row .more-link { font-size: 12px; font-weight: 700; color: var(--front_primary_brand) !important; text-transform: uppercase; letter-spacing: .3px; text-decoration: underline; flex: 0 0 auto; white-space: nowrap; } .footerTop .section-header-row .more-link:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; } /* News box: fixed-height scroll list */ .footerTop .newsPanel1 { height: var(--ft-info-box-height); overflow-y: auto; padding: var(--ft-info-box-padding); border-radius: var(--ft-radius-card); background: var(--front_topbar_bg); box-shadow: var(--ft-shadow-soft); border: none; width: 100%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--front_primary_brand) transparent; } .footerTop .newsPanel1::-webkit-scrollbar { width: 6px; } .footerTop .newsPanel1::-webkit-scrollbar-track { background: transparent; } .footerTop .newsPanel1::-webkit-scrollbar-thumb { background: var(--front_primary_brand); border-radius: 3px; } .footerTop .news-item { padding: 9px 0; border-bottom: 1px solid var(--lgray-cc); font-size: 13px; color: var(--lgray-33); } .footerTop .news-item:first-child { padding-top: 0; } .footerTop .news-item:last-child { border-bottom: none; } .footerTop .news-item a { color: rgba(160,10,15,.85) !important; font-weight: 500; font-size: 13px; text-decoration: underline; } .footerTop .news-item a:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; } .footerTop .news-item .src { color: var(--lgray-66); font-size: 12px; margin-left: 4px; } /* Newsletter box: fixed height, matches news box */ .footerTop .newsletter_box { height: var(--ft-info-box-height); overflow: hidden; padding: var(--ft-info-box-padding); border-radius: var(--ft-radius-card); background: var(--front_topbar_bg); box-shadow: var(--ft-shadow-soft); display: flex; flex-direction: column; box-sizing: border-box; } .footerTop .newsletter_box_inner { padding: 0; border: none; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .footerTop .newsletter_box_gray { background: none !important; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .footerTop .newsletter_box .newsletter_text { font-size: 13px; color: var(--lgray-66); margin-bottom: 10px; } .footerTop .newsletter_box .newsletter_text a { color: var(--front_primary_brand) !important; font-weight: 700; text-decoration: underline; } .footerTop .newsletter_box .newsletter_text a:hover { color: var(--front_primary_brand_hover) !important; text-decoration: none; } .footerTop #mc_embed_signup .mc-field-group input { width: 100%; border: 1px solid var(--su-border) !important; border-radius: 6px; padding: 11px 13px; font-size: 14px; font-family: inherit; color: var(--lgray-33); background: var(--white); box-sizing: border-box; outline: none !important; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; } .footerTop #mc_embed_signup .mc-field-group input:hover { border-color: var(--su-border-strong) !important; } .footerTop #mc_embed_signup .mc-field-group input:focus { border: 1px solid var(--front_primary_brand) !important; box-shadow: 0 0 0 3px rgba(160,10,15,.10) !important; } .footerTop #mc_embed_signup .optionalParent .clear.foot.join-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; margin-top: 4px; } .footerTop .newsletter-consent { font-size: 13px; color: var(--lgray-66); line-height: 1.4; margin: 0; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; } .footerTop .newsletter-consent a { color: var(--front_primary_brand); text-decoration: underline; } .footerTop .newsletter-consent a:hover { text-decoration: none; } .footerTop #mc_embed_signup #mc-embedded-subscribe { background: var(--front_btn_primary_bg, #a00a0f); color: var(--front_btn_primary_text, #ffffff); border: none; border-radius: 6px; padding: 12px 20px; font-weight: 600; font-size: 13px; font-family: inherit; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; flex: 0 0 auto; } .footerTop #mc_embed_signup #mc-embedded-subscribe:hover { background: var(--front_btn_primary_bg_hover, #900606); color: var(--front_btn_primary_text_hover, #ffffff); } .footerTop .newsletter_box .field { position: relative; } .footerTop .newsletter_box .field .error-msg { display: none; align-items: center; gap: 5px; margin-top: 4px; color: var(--front_primary_brand); font-size: 12px; font-weight: 400; line-height: 1.4; } .footerTop .newsletter_box .field .error-msg::before { content: '!'; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--front_primary_brand); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; } .footerTop .newsletter_box .field .error-msg svg { display: none; } .footerTop .newsletter_box div.mce_inline_error { display: none !important; } /* Error state -- red border + faint tint, same as the sidebar request form's input.error. Selectors carry #mc_embed_signup so they out-specify the base input rule above (its border is !important). Covers both the blur-handler .has-error class and Mailchimp mc-validate.js's own input.mce_inline_error class. */ .footerTop #mc_embed_signup .mc-field-group.has-error input, .footerTop #mc_embed_signup .mc-field-group input.mce_inline_error, .footerTop .newsletter_box .field.has-error input { border: 1px solid var(--front_primary_brand) !important; background: rgba(160,10,15,.04) !important; } .footerTop .newsletter_box .field.has-error .error-msg { display: flex; } .footerTop .newsletter_box.showing-error { height: auto; overflow: visible; } @media (max-width: 979px) { .footerTop .newsletter_box { height: auto; overflow: visible; } } @media (max-width: 480px) { .footerTop #mc_embed_signup .optionalParent .clear.foot.join-row { flex-wrap: wrap; row-gap: 10px; } .footerTop .newsletter-consent { white-space: normal; overflow: visible; text-overflow: clip; } } /* ===== Newsletter page (newsLetter.php) main Subscribe form -- matches newsletter-redesign-mockup.html. Everything scoped under #newslettersForm so it can't collide with the bare sitewide .field (a different, taller 48px-input filter-form pattern used elsewhere) or with .footerTop's own separate newsletter widget in the site footer. ===== */ #newslettersForm.newsletter-form-card { background: #fff; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 4px 16px rgba(0,0,0,.10); border-radius: 12px; padding: 36px; margin-bottom: 32px; } #newslettersForm h2 { color: var(--front_primary_brand); font-weight: 700; font-size: 24px; letter-spacing: .2px; margin: 0 0 10px; display: flex; align-items: center; gap: 12px; } #newslettersForm h2 svg { width: 30px; height: 30px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } #newslettersForm .lede { margin: 0 0 24px; font-size: 14.5px; color: #6b6b6b; line-height: 1.55; max-width: 46em; } @media (max-width: 480px) { #newslettersForm.newsletter-form-card { padding: 22px; } #newslettersForm h2 { font-size: 20px; gap: 10px; } #newslettersForm h2 svg { width: 26px; height: 26px; } } #newslettersForm .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 560px) { #newslettersForm .form-row { grid-template-columns: 1fr; } } #newslettersForm .field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 14px; } #newslettersForm #field-email { margin-bottom: 30px; } #newslettersForm .field label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #6b6b6b; font-weight: 700; margin-bottom: 0; } #newslettersForm .field .req { color: var(--front_primary_brand); } #newslettersForm .field input[type=text], #newslettersForm .field input[type=email], #newslettersForm .field textarea { border: 1px solid var(--su-border); border-radius: 6px; padding: 11px 13px; font-size: 14px; font-family: inherit; color: #333333; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: auto; } #newslettersForm .field input[type=text]:hover, #newslettersForm .field input[type=email]:hover, #newslettersForm .field textarea:hover { border-color: var(--su-border-strong); } #newslettersForm .field input[type=text]:focus, #newslettersForm .field input[type=email]:focus, #newslettersForm .field textarea:focus { border-color: var(--front_primary_brand); box-shadow: 0 0 0 3px rgba(160,10,15,.10); } #newslettersForm .field textarea { resize: vertical; min-height: 64px; height: auto; } #newslettersForm .field.has-error input, #newslettersForm .field.has-error textarea { border-color: var(--front_primary_brand); background: rgba(160,10,15,.04); } #newslettersForm .field .error-msg { display: none; align-items: center; gap: 5px; margin-top: 4px; color: var(--front_primary_brand); font-size: 12px; font-weight: 400; line-height: 1.4; } #newslettersForm .field .error-msg::before { content: '!'; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--front_primary_brand); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; } #newslettersForm .field .error-msg svg { display: none; } #newslettersForm .field.has-error .error-msg { display: flex; } @media (max-width: 600px) { #newslettersForm .field input[type=text], #newslettersForm .field input[type=email], #newslettersForm .field textarea { font-size: 16px; } } /* "Wait! / Why You Should Answer" tinted callout */ #newslettersForm .survey-intro { background: rgba(160,10,15,.05); border-left: 4px solid var(--front_primary_brand); border-radius: 6px; padding: 18px 20px; margin: 2px 0 20px; } #newslettersForm .survey-intro h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #333333; display: flex; align-items: center; gap: 8px; } #newslettersForm .survey-intro h3 svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--front_primary_brand); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #newslettersForm .survey-intro p { margin: 0 0 8px; font-size: 13.5px; color: #333333; line-height: 1.55; } #newslettersForm .survey-intro p:last-child { margin-bottom: 0; } #newslettersForm .survey-intro .why { display: inline-block; background: rgba(160,10,15,.12); color: var(--front_primary_brand); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px; border-radius: 100px; margin: 0 0 8px; } /* Survey question rows -- grid-row alignment so a row's two labels of different lengths still leave both controls starting on the same line (display:contents unwraps .field-question so label/control become direct grid children of .form-row-questions itself). */ #newslettersForm .field-question label { font-size: 13.5px !important; text-transform: none; letter-spacing: normal; color: #333333; font-weight: 700; margin-bottom: 8px; } #newslettersForm .field-question label .optional { color: #6b6b6b; font-weight: 400; font-size: 12px; margin-left: 4px; } #newslettersForm .form-row.form-row-questions { margin-bottom: 14px; } #newslettersForm .form-row.form-row-questions.form-row-questions-last { margin-bottom: 8px; } @media (min-width: 561px) { #newslettersForm .form-row.form-row-questions { column-gap: 20px; row-gap: 14px; } #newslettersForm .form-row-questions .field-question { display: contents; } #newslettersForm .form-row-questions .field-question label { grid-row: 1; margin-bottom: 0; } #newslettersForm .form-row-questions .field-question textarea, #newslettersForm .form-row-questions .field-question .nl-dropdown { grid-row: 2; } } @media (max-width: 560px) { #newslettersForm .form-row-questions .field-question { display: flex; flex-direction: column; gap: 6px; } } /* Custom dropdown (Q1/Q3) -- nl- prefixed, see the JS comment for why */ #newslettersForm .nl-dropdown { position: relative; } #newslettersForm .nl-dropdown-trigger { height: 48px; width: 100%; padding: 0 16px; font-size: 14px; font-weight: 500; color: #1A1A1A; background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: inherit; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #newslettersForm .nl-dropdown-trigger:hover { border-color: var(--su-border-strong); } #newslettersForm .nl-dropdown-trigger.open, #newslettersForm .nl-dropdown-trigger:focus { outline: none; border-color: var(--front_primary_brand); box-shadow: 0 0 0 3px rgba(160,10,15,.10); } #newslettersForm .nl-dropdown-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #newslettersForm .nl-dropdown-chevron { width: 12px; height: 12px; margin-left: 8px; color: #6B7280; transition: transform .2s ease; flex-shrink: 0; } #newslettersForm .nl-dropdown-trigger.open .nl-dropdown-chevron { transform: rotate(180deg); } #newslettersForm .nl-dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; right: auto; min-width: 100%; width: max-content; max-width: calc(100vw - 48px); background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.10); padding: 14px; z-index: 200; display: none; } #newslettersForm .nl-dropdown-panel.open { display: block; } #newslettersForm .nl-dropdown-options { max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #newslettersForm .nl-dropdown-option { padding: 10px 12px; font-size: 14px; color: #1A1A1A; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: background .1s ease; outline: none; white-space: nowrap; } #newslettersForm .nl-dropdown-option:hover, #newslettersForm .nl-dropdown-option:focus { background: #f5f5f5; } #newslettersForm .nl-dropdown-option:focus-visible { box-shadow: inset 0 0 0 2px var(--front_primary_brand); background: rgba(160,10,15,.06); } #newslettersForm .nl-dropdown-option.selected { background: rgba(160,10,15,.08); color: var(--front_primary_brand); font-weight: 500; } #newslettersForm .nl-dropdown-option .check { width: 14px; height: 14px; color: var(--front_primary_brand); opacity: 0; flex-shrink: 0; } #newslettersForm .nl-dropdown-option.selected .check { opacity: 1; } #newslettersForm .nl-visually-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } #newslettersForm .nl-dropdown.nl-dropdown-anchor-right .nl-dropdown-panel { left: auto; right: 0; } @media (max-width: 600px) { #newslettersForm .nl-dropdown-trigger { font-size: 16px; } } /* Join Now -- right-aligned, more space above; button's own typography (uppercase/600/13px/letter-spacing/6px radius) matched to the mockup's shared .btn-solid, since the existing primaryRedBg/... classes give it the right colors but not the right type treatment. */ #newslettersForm .form-actions { margin-top: 32px; display: flex; justify-content: flex-end; } #newslettersForm #mc-embedded-subscribe { text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .6px; border-radius: 6px; padding: 13px; width: 100%; } @media (min-width: 560px) { #newslettersForm #mc-embedded-subscribe { width: auto; padding: 13px 40px; } } /* v84 Property Details redesign -- pd- prefixed, propertyDetails.php-only; mirrors css/somi-search.css's page-header-bar/sidebar-card recipe. */ .pd-page-header-bar { display: flex; align-items: stretch; width: 100%; min-height: 72px; box-sizing: border-box; border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .pd-page-header-bar-main { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; background: var(--front_primary_brand); color: #fff; padding: 0 28px; font-weight: 700; letter-spacing: 0.6px; } .pd-page-header-bar-main h2 { margin: 0; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; } /* Icon badge, matches .ss-page-header-bar-main svg; optional, unused here. */ .pd-page-header-bar-main svg { width: 28px; height: 28px; flex: 0 0 auto; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pd-page-header-bar-aside { flex: 0 0 140px; background: #e5e5e5; display: flex; align-items: center; justify-content: center; padding: 0 16px; } .pd-back-link { color: #2374db; font-size: 13px; font-weight: 600; text-decoration: underline; white-space: nowrap; } .pd-back-link:hover { text-decoration: none; } @media (max-width: 768px) { .pd-page-header-bar-main { padding: 0 18px; gap: 10px; } .pd-page-header-bar-main h2 { font-size: 17px; } .pd-page-header-bar-main svg { width: 22px; height: 22px; } .pd-page-header-bar-aside { flex-basis: 90px; padding: 0 10px; } } @media (max-width: 480px) { .pd-page-header-bar-aside { flex-basis: 48px; } } @media (max-width: 360px) { .pd-page-header-bar { min-height: 64px; } } /* Save/Share/Print card -- flat children, matching the mockup's button row */ .pd-sidebar-actions { display: flex; margin: 0 0 20px; padding: 0; background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); border: 1px solid rgba(0, 0, 0, 0.07); overflow: hidden; } .pd-sidebar-actions > a { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 1 1 0; min-width: 0; height: 70px; box-sizing: border-box; padding: 14px 8px; font-size: 12px; letter-spacing: 0.3px; text-align: center; line-height: 1.25; background: #fff; color: var(--pc-text-dark); text-decoration: none; font-weight: 600; text-transform: uppercase; border-right: 1px solid #e2e2e2; transition: background 0.15s ease; } .pd-sidebar-actions > a:last-child { border-right: 0; } .pd-sidebar-actions > a:hover { background: #f5f5f5; } /* fill:currentColor so .auto-select below can still recolor the icon */ .pd-sidebar-actions > a svg { width: 24px; height: 24px; flex: 0 0 auto; fill: currentColor; stroke: none; color: var(--front_primary_brand); } .pd-sidebar-actions > a.auto-select { color: var(--front_btn_primary_text, #ffffff) !important; background-color: var(--front_btn_primary_bg, #a00a0f) !important; } .pd-sidebar-actions > a.auto-select svg { color: var(--white) !important; } @media (max-width: 360px) { .pd-sidebar-actions > a { height: 64px; font-size: 11px; padding: 12px 6px; } } /* Loan Calculator / Request Info cards -- one bordered box, gray header bleeds in via negative margin. */ .pd-sidebar-card { --card-pad: 24px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); border-radius: 12px; padding: var(--card-pad); overflow: hidden; margin-bottom: 0; max-width: 100%; } /* 32px gap down to Request Info, matching the mockup. */ .pd-sidebar-card.pd-mortgage-calc-card { margin-bottom: 32px; } .pd-sidebar-card-head { background: #e5e5e5; height: 72px; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 20px !important; padding: 0 !important; border-radius: 12px 12px 0 0; overflow: hidden; /* width:auto overrides .left1-resource's sitewide width:100% */ width: auto !important; float: none !important; display: block; } .pd-sidebar-card-head h2 { color: var(--font-base) !important; font-weight: 700 !important; font-size: 17px !important; letter-spacing: 0.4px; text-transform: uppercase; height: 100%; margin: 0 !important; padding: 0 20px !important; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; width: auto !important; float: none !important; background: transparent !important; } .pd-sidebar-card-head span { float: none !important; padding: 0 !important; } .pd-sidebar-card-body { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .pd-sidebar-card-body.mcw-wrap_250 { padding: 0 !important; } /* The mortgage-advice-online.org widget renders its own internal DOM at runtime (mcw-form__* classes) -- untouchable JS/settings, per project memory, but its rendered output can still be restyled like any other real DOM. Its own .mcw-form__block is flex-direction:row (title beside the input, one row) -- mockup's .field is label-above-input (two rows), matching every other field styling on this page (.field label above). */ #mcwWidget .mcw-form__block { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } #mcwWidget .mcw-form__title { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: #6b6b6b !important; font-weight: 600 !important; width: auto !important; margin-bottom: 6px !important; } #mcwWidget .mcw-form__field-group { width: 100% !important; } /* .int_cntnt_testimonial is a shared "internal content" wrapper (used on many pages) that happens to sit directly after the header bar here, adding an extra 12px on top of .pd-page-header-bar's own 20px margin-bottom (32px total instead of the mockup's 20px). Scoped to only-when-preceded-by the header bar so no other page's use of .int_cntnt_testimonial is affected. */ .pd-page-header-bar ~ .int_cntnt_testimonial { padding-top: 0; } /* Calculate + Request More Details buttons -- uppercase/bold/letter-spaced, matching the mockup's shared .btn-solid. #mcwWidget is unique to this page (safe to target directly); .save-submit is the SAME class ~20 other pages' renderRequestForm() also uses, so scoped via .pd-sidebar-card-body (this page's own wrapper) instead of touching .save-submit globally. */ #mcwWidget .mcw-calculate-btn { text-transform: uppercase !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .6px !important; border-radius: 6px !important; padding: 13px !important; } .pd-sidebar-card-body .save-submit { text-transform: uppercase; font-weight: 600; font-size: 13px !important; letter-spacing: .6px; border-radius: 6px; padding: 13px !important; } /* Consent (.formLegalText, shared by ~20 pages' renderRequestForm() -- scoped to this page's own wrapper) + Loan Calculator disclaimer (.mortgageLegalText, the widget's own class, already has the mockup's exact wording built in -- only its styling drifted). Both match the mockup's shared .consent/ .mc-disclaimer spec: 11px, 1.5 line-height, 14px/16px margin. Color already matches (--cgray resolves to #545454, same as the mockup's literal value). */ .pd-sidebar-card-body .formLegalText { font-size: 11px; line-height: 1.5; } #mcwWidget .mortgageLegalText { font-size: 11px !important; line-height: 1.5 !important; margin: 14px 0 16px !important; } /* Spec sections (Property Description / Overview / Interior / Exterior / Other Info / Listing Info / Sale-Lease Info) -- new .card.detail-section/.spec-grid structure, replacing the old single-column .property-feature-info-sub