body{ font-family: "Assistant", sans-serif; } :root { /* bootstrap resolves --bs-body-font-family from --bs-font-sans-serif, and a few of its components (.btn, code blocks) read those variables directly rather than inheriting from body. pointing the variable at Assistant keeps the bootstrap layer on the same face as the theme. */ --bs-font-sans-serif: "Assistant", sans-serif; --bs-body-font-family: "Assistant", sans-serif; --h-color: #103C19; --t-color: #103C19; --light-blue-color: #13243E; --y-color:#103C19; --white-color: #FFFFFF; --text-cream-color: #FDEDDE; --gray-color: #E7E7E7; --black-color: #000000; --light: 300; --regular: 400; --medium: 500; --bold: 700; --extra-bold: 800; /* one height for every control in the two filter bars - the selects, the search button. 43px is what the selects come out at on their own (14px text + 10px padding top and bottom + 1px border each side), so the button is matched up to them rather than them being squashed down to it. accessibility.css re-declares this x the font scale. */ --filter-control-h: 43px; } body{ /*font-family: "Open Sans", sans-serif;*/ background-color: var(--white-color); position: relative; direction: rtl; } .header-top, .main-navbar{ background-color: var(--white-color); } .header-top .header-wrap { max-width: 1386px !important; } .main-navbar .header-wrap{ max-width: 1386px !important; } .header-wrap, .developer-section{ max-width: 100% !important; position: relative; margin: 0 auto; } .price-form label { font-size: 16px; line-height: 18px; color: var(--h-color); margin-bottom: 0; display: inline-block; vertical-align: middle; margin-left: 16px; font-weight: var(--regular); } .price-form label[for="chkbxinputone"]{ margin-top: -6px; } .price-form select { font-size: 14px; color: var(--h-color); border: 1px solid var(--h-color); margin-left: 15px; padding: 10px 15px 10px 35px; width: 139px; -webkit-appearance: none; position: relative; background-image: url('../images/dropdown-arrow.jpg'); background-repeat: no-repeat; background-size: 13px; background-position: left 15px center; background-color: #FFFFFF; } .chkbox { display: inline-block; vertical-align: bottom; position: relative; padding-right: 15px; margin-bottom: 8px !important; } .chkbox #chkbxinputone{ width: 20px; height: 20px; margin-left: 5px; margin-top: -5px; } .chkbox #chkbxinputmain { width: 20px; height: 20px; margin-left: 5px; } #chkbxinputone, #chkbxinputmain, #chkbxinputmain6, #chkboxcomp4, #chkbxinputonecomp4, #chkboxcomp1 { width: 0px; height: 0px; vertical-align: middle; } /* #chkbxinputone:after, #chkbxinputmain:after, #chkbxinputonecomp4:after{ content: ''; width: 20px; height: 20px; border: 1px solid var(--text-cream-color); display: block; position: absolute; right: -1px; bottom: 4px; } */ .ads-serch-btn-top, .ads-serch-btn, .ads-serch-btn-comp4, .ads-serch-btn-topcomp4, .ads-serch-btn-comp1 { background: var(--y-color); font-size: 18px; font-weight: var(--bold); padding: 7.9px 20px; border-radius: 0px; color: var(--white-color); text-decoration: none; cursor: pointer; white-space: nowrap; } .ads-serch-btn { background: #BE7467; } .bottom-price-form .ads-serch-btn{ color: var(--white-color); display: inline-flex; align-items: center; justify-content: center; min-height: var(--filter-control-h); padding-top: 0; padding-bottom: 0; box-sizing: border-box; vertical-align: middle; } .bottom-price-form select{ min-height: var(--filter-control-h); box-sizing: border-box; vertical-align: middle; } .top-filter-wrap{ align-items: center; display: flex; justify-content: end; } .top-filter-wrap .ads-serch-btn-top{ display: inline-flex; align-items: center; justify-content: center; min-height: var(--filter-control-h); padding-top: 0; padding-bottom: 0; box-sizing: border-box; vertical-align: middle; } .top-filter-wrap select{ min-height: var(--filter-control-h); box-sizing: border-box; vertical-align: middle; } .ads-clear-filter { display: inline-flex; align-items: center; justify-content: center; color: var(--y-color); font-size: 32px; line-height: 1; cursor: pointer; vertical-align: middle; margin-right: 6px; background: none; margin-top: -4px; } /* input[type="checkbox"]:checked::before { content: '\2713'; font-size: 16px; font-weight: var(--bold); color: var(--h-color); position: absolute; right: 3px; bottom: 2px; } */ /* the search buttons keep their white label on hover. this used to be var(--t-color), from when --y-color was the yellow the name still refers to. both are #103C19 now, so the hover was painting the text in exactly its own background colour and the button read as an empty green box. */ .ads-serch-btn-top:hover, .ads-serch-btn:hover, .ads-serch-btn-comp4:hover, .ads-serch-btn-topcomp4:hover, .ads-serch-btn-comp1:hover{ color: var(--white-color); } h1,h2, h3, h4, h5{ font-weight: var(--bold); } h2{ font-size: 44px; color: var(--t-color); line-height: 50px; margin-bottom: 0; } .sub-heading{ font-weight: 400; color: var(--t-color); font-size: 22px; } p{ font-size: 18px; font-weight: var(--medium); color: var(--t-color); } /*.hero-banner-bg{*/ /* min-height: 760px;*/ /* background-size: cover;*/ /* object-fit: cover;*/ /*}*/ .hero-curve-img { position: absolute; bottom: -10px; width: 100%; display: block; } /* developer section */ .developer-section{ background: #fff; padding: 80px 20px 80px; margin-top: 0 !important; } .developer-container{ max-width: 1100px; margin: auto; text-align: center; } /* This is the page's H1. Every value the old `h2` element rule used to supply is pinned on the class instead, so the tag carries no styling of its own and the heading renders identically whichever element wraps it - line-height in particular, which the h2 rule set and no h1 rule replaces. */ .developer-title{ font-size: 42px; line-height: 50px; font-weight: 700; color: var(--t-color); margin: 0; } .developer-subtitle{ font-size: 28px; font-weight: 500; color: var(--t-color); margin-top: 3px; } .developer-description p{ font-size: 18px; line-height: 33px; font-weight: var(--regular); color: var(--t-color); max-width: 1032px; margin: 16px auto 30px; } /* gallery */ .developer-gallery-wrap{ display: flex; align-items: stretch; gap: 4px; width: 100%; max-width: 1000px; margin: 0 auto; direction: ltr; } .developer-gallery{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; direction: ltr; } .gallery-item{ position: relative; overflow: hidden; border-radius: 0; width: 100%; aspect-ratio: 4 / 3; } .gallery-item img{ width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-tag{ position: absolute; right: 0; bottom: 0; z-index: 2; background: #4B5F46; color: #fff; padding: 5px; border-radius: 0; font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; } .developer-gallery-disclaimer{ margin: 18px 0 0; font-size: 14px; font-weight: 400; color: var(--t-color); text-align: center; } /* desktop / tablet: 4 images per row, row 2 taller than row 1 */ @media (min-width: 768px){ .developer-gallery{ grid-template-rows: auto auto; } .gallery-item:nth-child(-n + 4){ aspect-ratio: 4 / 2.6; } .gallery-item:nth-child(n + 5){ aspect-ratio: 3 / 4; } /* row 1: image 2 keeps only its top-right corner, image 3 keeps only its top-left corner */ .gallery-item:nth-child(2){ border-radius: 0 40px 0 0; } .gallery-item:nth-child(3){ border-radius: 40px 0 0 0; } /* row 2: image 1 keeps only its bottom-left corner, image 4 keeps only its bottom-right corner */ .gallery-item:nth-child(5){ border-radius: 0 0 0 40px; } /* only the last image (row 2) has a rounded corner behind the tag, so only it needs the wider box to keep the label clear of the curve */ .gallery-item-8 .gallery-tag{ width: 72%; } .gallery-item:nth-child(6){ border-radius: 0; } .gallery-item:nth-child(8){ border-radius: 0 0 40px 0; } } /* project info section */ .project-info-section{ --pi-green: #4B5F46; --pi-grey: #E7E7E7; --pi-dash: #ffffff; --pi-gutter: 60px; /* space kept beside the image so it never touches the screen edge */ background: #ffffff; display: flex; flex-direction: column; gap: 40px; padding: 0 0 60px 0; } .project-block-wrap{ position: relative; width: 100%; } .project-block{ min-height: 542px; display: flex; align-items: stretch; overflow: visible; } /* the block is inset only on the image's outer side; the content side still reaches the screen edge */ .first-section .project-block{ background: var(--pi-green); width: calc(100% - var(--pi-gutter)); margin-left: var(--pi-gutter); } .second-section .project-block{ background: var(--pi-grey); width: calc(100% - var(--pi-gutter)); margin-right: var(--pi-gutter); } .project-image{ width: 52%; min-height: 542px; position: relative; flex-shrink: 0; } .project-image img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* markup is always image-then-content; `order` is what flips the two layouts. the page is RTL, so the lower order value sits on the RIGHT. */ .first-section .project-image{ /* image left, content right */ order: 2; } .second-section .project-image{ /* image right, content left */ order: 1; } /* --pi-safe is the side gutter the corner leaves live in. Each leaf is 2.2x that wide and pulled 1.28x past its own edge, so the sliver left on screen stays just inside --pi-safe - the content's own padding - so decoration and copy never meet. Kept in px: percentage padding would resolve against the parent block, not this box. */ .project-content{ --pi-safe: clamp(40px, 11vw, 165px); position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 1 auto; min-width: 0; /* Vertical padding is doing the work: at 1.55x --pi-safe it is taller than the tallest leaf (leaf-2 at 14vw, whose 218/259 ratio makes it 1.51x --pi-safe), so EVERY leaf sits in a band above or below the copy and none can reach it - a guarantee that holds however wide a leaf gets or however the text is aligned. That frees the horizontal padding, which no longer has to clear anything, so it is halved to give the copy back its width. Keep the vertical value >= the tallest leaf if these are ever retuned. */ padding: calc(var(--pi-safe) * 1.55) calc(var(--pi-safe) * 0.5); direction: rtl; text-align: right; color: #ffffff; overflow: hidden; } /* caps the measure on wide screens and keeps the column centred in the block */ .project-content-inner{ position: relative; z-index: 2; width: 100%; /* Matched to the gallery section's copy column ("תמהיל דירות מגוון"), which is .gallery-content at 41% of a .gallery-layout capped at 1100px - so 435px flat once the viewport passes ~1100. Fixed here rather than a percentage so the three headings line up at the same measure. Narrowing the column also pulls the copy further from the corner leaves, which is what let the vertical padding above come down. */ max-width: 435px; margin: 0 auto; } /* Vertical bands and side gutters, both in raw vw, set by hand. These are NOT derived from the leaves - see the leaf rules below for how far each one reaches into its block. Where a band is shallower than its leaf reaches, that leaf crosses behind the copy; it sits at z-index 0 so the text stays legible over it. */ .first-section .project-content{ order: 1; padding-top: 5vw; padding-bottom: 10vw; padding-left: 5vw; padding-right: 5vw; } .second-section .project-content{ order: 2; color: #2E3B2A; --pi-dash: var(--pi-green); --pi-safe: 5vw; padding-top: 6vw; padding-bottom: 7vw; padding-left: 5vw; padding-right: 5vw; } .project-content h2{ position: relative; z-index: 1; font-size: 42.95px; font-weight: 800; margin: 0 0 20px; /* Centred in the column; the body copy stays right-aligned. */ text-align: center; color: inherit; } /* dash accent under the heading - centred with it */ .project-content h2::after{ content: ""; display: block; width: 60px; height: 3px; margin: 14px auto 0; background: var(--pi-dash); } .project-description{ position: relative; z-index: 1; } .project-description p{ font-size: 18px; line-height: 31px; font-weight: var(--regular); color: inherit; text-align: right; } .project-description p:last-child{ margin-bottom: 0; } /* decorative leaf vectors - one distinct asset per corner, uploaded via the media library */ .pi-leaf{ /* Nominal square size. Each leaf's width is this x the square root of its own ratio, which makes all four cover the SAME AREA - a plain shared width made leaf-1 read half-size, since it is the only landscape vector (261x185) among three portrait ones (down to 173x280). */ --pi-leaf-s: calc(var(--pi-safe) * 0.84); position: absolute; display: block; background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; z-index: 0; } /* Flush to the corner rather than a clipped sliver. The two first-section leaves are hand-tuned in vw below and are wider than --pi-safe, so nothing here can hold them off the copy sideways - the vertical padding band on .project-content does it, and it is sized off the TALLEST leaf. Anything retuned below must stay within it. The vw values are capped with min()/max() at the point --pi-safe itself stops growing (viewport 1500px), so a 4K screen cannot scale a leaf past that band. aspect-ratio mirrors each SVG's own viewBox so `contain` leaves no letterbox to push the art off its corner. */ .pi-leaf-top{ top: 0; left: 0; } .pi-leaf-bottom{ bottom: 0; right: 0; } /* Hand-tuned placement, overriding the shared equal-area sizing above: this one is deliberately larger and pulled back past the corner, so `overflow: hidden` on .project-content trims the top-left of the vector against the block edge. The negative margins are what put it there - keep them paired with the width, as all three are in vw and scale together. Reset for tablet/mobile in responsive.css, where the narrower gutter cannot absorb a leaf this wide. */ .first-section .pi-leaf-top{ width: min(16vw, 240px); aspect-ratio: 261 / 185; margin-left: max(-3vw, -45px); margin-top: max(-1.4vw, -21px); background-image: url("https://grofit.webzsites.site/wp-content/uploads/2026/08/leaf-1.svg"); background-position: top left; } /* Pulled down past the bottom edge so `overflow: hidden` trims it. Without the pull this vector reaches 1.19x --pi-safe up from the bottom, which forced a bottom band twice this size; the pull cuts its reach to 0.68x. Load-bearing - drop it and the copy lands on the leaf. */ .first-section .pi-leaf-bottom{ width: min(11vw, 165px); aspect-ratio: 218 / 260; background-image: url("https://grofit.webzsites.site/wp-content/uploads/2026/08/leaf-4.svg"); background-position: bottom right; } /* Tallest vector on the page: 14vw x 259/218 = 1.51x --pi-safe. Pulled up so only 0.73x of it reaches down into the block, which is what lets the top band above sit at 0.75x instead of 1.15x. */ .second-section .pi-leaf-top{ width: min(14vw, 210px); aspect-ratio: 218 / 259; background-image: url("https://grofit.webzsites.site/wp-content/uploads/2026/08/leaf-2.svg"); background-position: top left; } /* Pulled out bottom and right, so `overflow: hidden` trims it against both edges. The -4vw bottom pull is load-bearing: this vector is 17.8vw tall at 11vw wide, and the pull is what brings its reach back inside the padding band. */ .second-section .pi-leaf-bottom{ width: min(11vw, 165px); aspect-ratio: 173 / 280; margin-right: max(-2vw, -30px); margin-bottom: max(-4vw, -60px); background-image: url("https://grofit.webzsites.site/wp-content/uploads/2026/08/leaf-3.svg"); background-position: bottom right; } .project-shape{ position: absolute; top: 0; z-index: 5; } .blue-shape{ right: 6vw; width: 60px !important; height: 80px !important; } .pink-shape{ left: 1vw; width: 57px !important; height: 80px !important; } /* project gallery section */ .project-gallery-section{ background-color: var(--h-color); background-image: url('../images/gallery-sec-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0; margin-top: 130px; } .gallery-layout{ max-width: 1100px; margin: auto; display: flex; align-items: stretch; gap: 40px; padding: 60px 0; } .gallery-side{ width: 59%; background: transparent; display: flex; flex-direction: column; justify-content: center; } .main-gallery-image{ width: 100%; height: 445px; } .main-gallery-link{ display: block; width: 100%; height: 100%; position: relative; cursor: zoom-in; } .main-gallery-image img{ width: 100%; height: 100%; object-fit: cover; } /* magnifier badge, shown on hover over the main image. drawn inline because the theme ships the Font Awesome stylesheets without the webfont files */ .main-gallery-link::after{ content: ''; position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3Cpath d='M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center no-repeat; background-size: 20px 20px; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .main-gallery-link:hover::after, .main-gallery-link:focus-visible::after{ opacity: 1; } .gallery-content-img { margin-top: 30px; margin-bottom: 10px; } .gallery-side-disclaimer { font-size: 14px; margin: 8px 0 0; color: #fff; font-weight: 400; text-align: left; } /* the anchors only exist to feed the lightbox album */ .gallery-lightbox-album{ display: none; } .thumbnail-wrapper{ display: flex; align-items: center; gap: 10px; margin-top: 8px; position: relative; } .thumbnail-slider{ display: flex; gap: 8px; overflow: hidden; flex: 1; } .thumbnail{ min-width: calc(25% - 6px); height: 80px; cursor: pointer; border: 2px solid transparent; } .thumbnail img{ width: 100%; height: 100%; object-fit: cover; } .thumbnail.active{ border: 2px solid #BE7467; } .gallery-prev, .gallery-next{ width: 30px; position: absolute; height: 30px; border: none; background: #BE7467; color: white; cursor: pointer; } .gallery-prev{ right: 2px; } .gallery-next{ left: 0; } .gallery-content{ width: 41%; direction: rtl; text-align: center; display: flex; flex-direction: column; justify-content: center; padding: 34px 0; } /* accent colour for the block - drives both the heading and its underline */ .gallery-block-1{ --gallery-accent: #EE7B8B; } .gallery-block{ position: relative; text-align: center; } .gallery-block + .gallery-block{ margin-top: 34px; } .gallery-content h2{ position: relative; font-size: 28px; font-weight: 800; color: #ffffff; margin: 0 0 26px; padding-bottom: 20px; text-align: center; line-height: 1; } .gallery-content h2::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 6px; border-radius: 0; background: #fff; } .gallery-description p{ font-size: 18px; line-height: 31px; color: #ffffff; text-align: right; font-weight: var(--regular); margin: 0; } .gallery-description p + p{ margin-top: 8px; } .map-chart-wrap h2{ font-size: 44px; text-align: center; position: relative; margin-bottom: 30px; } .chart, .map{ background-size: cover; object-fit: cover; min-height: 400px; vertical-align: middle; display: flex; align-items: center; justify-content: center; position: relative; } /* .chart::before, .map::before { content: ''; background: rgba(255, 255, 255, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } .chart::before { border-radius: 57px 0 0 0; } .map::before { border-radius: 0 57px 0 0; } */ .map-chart { margin-bottom: 141px; } .map-chart-wrap a{ text-decoration: none; padding: 5px 56px; min-width: 9rem; font-size: 25px; font-weight: var(--bold); color: var(--white-color); border-radius: 39px; margin-top: 25px; z-index: 1; } .map-chart-wrap{ max-width: 1146px; } .chart a{ background: #274E2F; z-index: 1; } .map a{ background: #BE7467; } /* .chart{ background-image: url("../images/chart.png"); } .map{ background-image: url("../images/map1.jpg"); } */ .thumbnail-gallery{ background: var(--h-color); } .thumbnail-gallery-part{ background: var(--white-color); padding: 0 10px; } .thumb{ padding: 10px 5px 0px 5px; min-height: 103px; } .slider-content{ padding: 0 5px; } /*.thumb:first-child{*/ /* padding-right: 0;*/ /*}*/ /*.thumb:last-child{*/ /* padding-left: 0;*/ /*}*/ .thumb img{ width: 100%; object-fit: cover; cursor: pointer; height: 103px; } .thumbnail-gallery-content{ background-image: url(../images/element_bg.png); background-repeat: no-repeat; min-height: 692px; background-size: contain; position: absolute; /* right: -68px; */ right: -110px; width: 630px; top: -38px; padding: 184px 192px 0 78px; } @media (min-width: 1400px){ .thumbnail-gallery-content{ right: -68px; } } .thumbnail-gallery-content h3{ font-size: 47px; color: var(--white-color); margin-bottom: 0; } .thumbnail-gallery-content h2{ font-size: 54px; color: var(--y-color); margin-bottom: 16px; } .thumbnail-gallery-content p{ font-size: 16px; color: var(--white-color); margin-bottom: 0; text-align: right; line-height: 22px; } .thumbnail-gallery-wrap{ position: relative; } .thumbnail-gallery-part .slick-next:before{ content: ''; background-image: url(../images/gallr-prev.png); display: block; width: 33px; height: 35px; background-size: cover; opacity: 2; } .thumbnail-gallery-part .slick-prev:before{ content: ''; background-image: url(../images/gallr-next.png); display: block; width: 33px; height: 35px; background-size: cover; opacity: 2; } .thumbnail-gallery-part .slick-prev, .thumbnail-gallery-part .slick-next{ bottom: 30px; top: auto; } .thumbnail-gallery-part .slick-next{ left: 18px; right: auto; } .slick-prev{ right: 5px !important; z-index: 2 !important; } .slider-thumb .slick-slide{ opacity: .5; } .slider-thumb .slick-slide.slick-current { opacity: 1; } .notice-gallery-thimbnail{ position: absolute; left: 15px; bottom: -50px; font-size: 16px; color: #333741; } .faqs-img{ padding-right: 120px; padding-left: 8px; } /* the navy bar + angled step notch used to be faqs-an-bg.png. it is now drawn in CSS so it always matches --h-color and scales to any width. */ .faqs .accordion-header{ --faq-slant: 23px; /* how far the notch leans - matches the 25/55 slope of the old png */ } .faqs .accordion-header .accordion-button{ position: relative; overflow: hidden; background-image: none !important; background-color: var(--h-color) !important; /* navy fills the whole bar */ outline: none; font-size: 22px; line-height: 1.2; font-weight: var(--regular); color: var(--white-color); /* no right padding - the "שלב N" chip has to bleed to the edge. min-height instead of height so enlarged text grows the row. */ padding: 0 0 0 20px; min-height: 50px; height: auto; } /* the light step chip. it is a real flex item, so its width is whatever the text needs - at any accessibility font scale - instead of a fixed 106px. */ .faqs .accordion-button span{ position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; white-space: nowrap; /* "שלב 3" must never break onto two lines */ background: var(--gray-color); margin-left: 45px; padding: 0 27px; /* lands on the old 106px chip width at the default font size */ color: var(--black-color); font-size: 20px; font-weight: var(--bold); } /* the angled notch, welded to the chip's leading edge so it follows it. the notch runs 1px PAST the chip's edge and tucks under it. butting the two exactly (right: 100%) put both antialiased edges on the same fractional device pixel, and their coverage summed to less than 1, so the navy behind showed through as a hairline down the join. it only appeared on the rows whose chip happened to land on a bad fraction - the chip width follows the "שלב N" glyphs - which is why it came and went from row to row. */ .faqs .accordion-button span::before{ content: ""; position: absolute; /* the same trick as the "right" offset below, applied vertically. the accordion rows do not land on whole pixels - the buttons measure 50px but sit at fractional offsets (….281, ….719) - so the clip-path's bottom edge fell mid-pixel and was antialiased. that partial row of grey over the navy behind read as a pale hairline hanging off the bottom of the notch, which is the line that kept showing under the slant. running the box 1px past the top and bottom puts both horizontal terminations outside .accordion-button's overflow:hidden, so what stays visible is fully covered pixels only. */ top: -1px; bottom: -1px; right: calc(100% - 1px); width: calc(var(--faq-slant) + 1px); background: var(--gray-color); clip-path: polygon(100% 0, 100% 100%, 0 100%); } .faqs .accordion-button p{ flex: 1 1 auto; min-width: 0; } .accordion-button:not(.collapsed){ box-shadow:none; } .accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button{ border-top-right-radius:0 !important; border-top-left-radius:0 !important; border-radius: 0 !important; } .faqs .accordion-button p{ font-size: 20px; line-height: 1.3; margin-bottom: 0; padding-right: 20px; color: var(--white-color); font-weight: var(--medium); } button:focus{ outline: 0 !important; border-color:inherit; box-shadow: none; } .faqs .accordion-item{ margin-bottom: 25px; border: none; background: var(--gray-color); color: var(--black-color); font-size: 18px; line-height: 1.2; font-weight: var(--regular); margin-top: 0px; } .accordion-button:focus:not(:focus-visible) { outline: 0 !important; box-shadow: none; } /* accordion chevron. drawn as a MASK filled with currentColor rather than a background-image, so the pojo a11y contrast modes recolour it along with the surrounding text instead of leaving a white icon on a white/inverted background. */ .faqs .accordion-button::after, .accordian-mortgage .accordion-button::after{ /* white-arrow.svg inlined - a mask only uses the alpha channel, so the artwork is identical, with no dependency on an uploads path that differs per multisite. */ --accordion-arrow-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.3225 16.7611L15.1279 10.5664C15.0536 10.5004 14.9381 10.5004 14.8721 10.5664L8.70223 16.7611C8.62799 16.8271 8.62799 16.9508 8.70223 16.992L10.055 18.3695L14.8721 13.5276C14.9464 13.4616 15.0619 13.4616 15.1279 13.5276L19.945 18.3695L21.3225 16.992C21.3968 16.9425 21.3968 16.8271 21.3225 16.7611ZM30 14.9876C30 10.8469 28.3173 7.11026 25.6035 4.39648C22.8897 1.68271 19.1531 0 15.0124 0C10.8716 0 7.11026 1.68271 4.39648 4.39648C1.6827 7.11026 0 10.8469 0 14.9876C0 19.1284 1.6827 22.8897 4.39648 25.6035C7.11025 28.3173 10.8716 30 15.0124 30C19.1531 30 22.8897 28.3173 25.6035 25.6035C28.3173 22.8897 30 19.1532 30 14.9876ZM24.4322 5.62552C26.8326 8.02585 28.3338 11.35 28.3338 15.0124C28.3338 18.6747 26.8326 22.0319 24.4322 24.4322C22.0319 26.8326 18.7077 28.3091 15.0454 28.3091C11.383 28.3091 8.05884 26.8326 5.62552 24.4322C3.22519 22.0319 1.74869 18.7077 1.74869 15.0124C1.74869 11.317 3.22519 8.02585 5.62552 5.62552C8.05059 3.22519 11.3748 1.74869 15.0454 1.74869C18.716 1.74869 22.0319 3.22519 24.4322 5.62552Z' fill='%23fff'/%3E%3C/svg%3E"); content: "" !important; flex: 0 0 auto; width: 30px; height: 30px; margin-right: auto; margin-left: 0; background-image: none; background-color: currentColor; -webkit-mask: var(--accordion-arrow-url) no-repeat center / contain; mask: var(--accordion-arrow-url) no-repeat center / contain; transform: rotate(-90deg); transition: transform .25s ease; position: relative; z-index: 1; } /* open row points the chevron up, matching the figma; collapsed rows point inward */ .faqs .accordion-button:not(.collapsed)::after, .accordian-mortgage .accordion-button:not(.collapsed)::after{ transform: rotate(0deg); } .faqs .accordion-body p{ color: var(--h-color); font-size: 18px; line-height: 28px; font-weight: var(--regular); text-align: justify; margin-bottom: 0; } .faqs .accordion-item:last-child { margin-bottom: 0; } .faqs .accordion-body{ padding-bottom: 16px; padding-left: 20px; } .faqs-text-col{ width: 45%; } .faqs-col{ width: 55%; } .accordion-item:last-of-type .accordion-button.collapsed{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-radius: 0 !important; } .faqs-bottom p{ font-size: 16px; padding-right: 120px; color: var(--h-color); margin-top: 15px; font-weight: 400; } /* PSD: the payment-schedule block is set in Open Sans Hebrew throughout - the "פריסת תשלומים" heading, the "והוצאות נלוות" sub-heading under it, and the terms themselves ("7% - בחתימת חוזה, 13% - עד 45 יום..."). It is the one content section of the design that does not use Assistant. Declared on the wrapper so the heading, sub-heading and list all inherit it. */ .spread-payments{ font-family: "Open Sans Hebrew", "Assistant", sans-serif; } .spread-payment-content{ padding: 12px; margin-right: 120px; border: 1px solid #1C4F734D; } .spread-payment-content-inner{ padding: 20px; background-color: #F1F1F1; } .spread-payment{ padding: 0 280px 0 20px; color: var(--h-color); line-height: 2.1; } .spread-payment strong{ color: var(--h-color); } .spread-payment p{ font-weight: 400; color: var(--t-color); } .payemtn-lower li span{ color: #b1c260; font-size: 18px; font-weight: var(--bold); } .payemtn-lower li{ font-weight: var(--regular); font-size: 18px; color: #01313d; display: flex; } .mortgage-sec { padding: 60px 0 116px 0; } .faqs-section{ padding: 80px 0 100px 0; } .faqs-section .sub-heading{ color: #BE7467; } .mortgage-main-wrap{ padding-right: 120px; } .spread-payment-content .sub-heading { color: #BE7467; } .mortgage-upper .sub-heading { color: #BE7467 !important; } .mortgage-upper h2 { color: var(--h-color); } .mortgage-upper-wrap h2, .mortgage-upper-wrap .sub-heading, .mortgage-upper h2, .mortgage-upper .sub-heading{ color: var(--h-color); } .accordian-mortgage .accordion-button{ padding: 14px 15px; background: var(--y-color); border-radius: 0 !important; color: var(--white-color); /* drives the masked chevron via currentColor */ } .accordian-mortgage .accordion-body { padding-left: 20px; } .accordian-mortgage .accordion-button p{ color: var(--white-color); margin-bottom: 0; line-height: 1.3; } /* chevron for .mortgage-sec is defined with the faqs one, further up */ .accordian-mortgage .accordion-item{ border: none; background: #ecf0f2; border-bottom: 1px solid var(--white-color); } .mortga-list-style li{ position: relative; padding-right: 20px; display: block; font-weight: 400; } .mortga-list-style li:not(last-child) { margin-bottom: 16px; } .mortga-list-style li:before{ content: ''; width: 13px; height: 13px; background: var(--h-color); position: absolute; right: -3px; top: 8px; } .mortga-list-style p{ font-size: 16px; margin-bottom: 20px; } .mortgage-notice p{ font-size: 16px; color: var(--h-color); } .files-downlaod-sec h2{ color: var(--h-color) !important; font-weight: 600; } .price-list{ background-image: url("../images/bg4.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } .price-list h2{ font-size: 72px; color: var(--white-color); margin-bottom: 20px; } .price-list p{ font-size: 25px; color: var(--white-color); font-weight: 400; } .price-list input[type='text']{ font-size: 14px; color: var(--h-color); border: 1px solid var(--h-color); margin-left: 15px; padding: 10px 15px 10px 35px; width: 180px; -webkit-appearance: none; position: relative; } .price-list ::placeholder{ opacity: 1; font-size: 14px; color: var(--h-color); } .price-list .searchbox{ width: 630px; margin: 0 auto; } .price-list label{ color: #FFFFFF; } .price-list .chkbox{ display: block; text-align: right; margin-right: 151px; margin-top: 20px; } .price-list #chkbxinputone:after, .price-list #chkbxinputmain:after{ bottom: 0; } .price-list #chkbxinputmain::after{ border: 1px solid #fff !important; } /* .price-list input[type="checkbox"]:checked::before { content: ''; background-image: url("../images/checked.png"); background-size: cover; color: #FFFFFF; height: 19px; width: 18px; font-weight: 900; right: 0px; top:4px; } */ .table-head-title{ background: #E8ECEE; padding: 6px 10px !important; cursor: pointer; width: calc(100% / 3 - 4px); } .table-head-title p :where(p,span){ color: #13243E; } .table-head-title.active{ background: #13243E !important; } .table-head-title.disabled{ opacity: 0.4; pointer-events: none; cursor: not-allowed; } .table-head-title.active p :where(p,span){ color: var(--white-color); } .table-head-title :where(p,span){ font-size: 16px; color: var(--white-color); margin-bottom: 0; position: relative; width: fit-content; margin: 0 auto; font-weight: 600; } .table-setting-ads { gap: 4px; justify-content: space-between; } /* .table-head-title p:after{ content: ''; display: block; position: absolute; top: 52%; left: -20px; border-left: 7px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #FFFFFF; transform: translateY(-50%); } */ /*table style*/ .adn-tabs-accordian { justify-content: space-around; direction: rtl; } #nav-tab { display: flex; flex-flow: row; gap: 2px; } .nav-tabs .nav-link.active { font-weight: 400; position: relative; border-bottom: 1px solid #aebe4d; background: #aebe4d; } .nav-tabs .nav-link { font-size: 19px; content: var(--t-color); } .adn-tabs-accordian .nav-link { width: 33%; background: #ebeff1; border-radius: 0; color: var(--t-color); text-align: center; z-index: 5; } table { width: 100%; margin-bottom: 15px; font-size: 16px; border-spacing: 0; font-weight: 400; border-collapse: collapse; /* PSD: the apartment rows are set in Open Sans Hebrew. 147 of the 242 text layers in the design are these cells - the areas, floors, room counts and the prices. The column HEADINGS are not: those are Assistant SemiBold, and get it back in the thead rule below. */ font-family: "Open Sans Hebrew", "Assistant", sans-serif; } table thead>tr>th { background-color: #7B8696; font-size: 16px; font-weight: 400; /* PSD: the column headings are Assistant SemiBold ("מספר דירה", "קומה", "מספר חדרים", "מחיר כולל מע\"מ"), unlike the cells under them. */ font-family: "Assistant", sans-serif; color: #fff; padding: 14px 10px; border-left: 1px solid #949496; border-right: 1px solid #949496; border-top: 1px solid #949496; text-align: center; } /* table tbody>tr>th:first-child{ border-right: none; } table tbody>tr>th:last-child{ border-left: none; } */ .sale-property-strip { background: #dbe0e3 !important; position: relative !important; } .sale-property-strip td{ color: var(--t-color); } .table_section1 .fade, .table_section_comp4 .fade, .table_section_comp1 .fade{ display: none; } .table_section1 .fade.active, .table_section_comp4 .fade.active, .table_section_comp1 .fade.active{ display: block; } tbody, tr{ position: relative !important; } table td { padding: 10px; line-height: 1.5; vertical-align: center; border: 1px solid #949496; font-size: 16px; text-align: center; } table tr td:nth-child(5){ direction: ltr; } table th{ vertical-align: center; } td img{ width: 34px; mix-blend-mode: multiply; } .sale-property-strip p{ width: 99%; position: absolute; top: 1px; margin-bottom: 0; right: 1px; height: auto; background: #dbe0e3; font-size: 19px; font-weight: 700; padding: 8px; display: none !important; } .sale-property-strip::after { content: 'נמכר!'; position: absolute; border: 1px solid #949496; padding: 20px; height: 100%; text-align: center; display: flex; align-items: center; background: #dbe0e3; top: 0px; left: -80px; color: var(--t-color); font-weight: 700; } .sale-property{ display: none; } .sale-property-strip .sale-property{ display: block; } .fils-for-downlaod a, span{ font-weight: var(--regular); font-size: 16px; color: #000; text-decoration: none; } .fils-for-downlaod img{ width: 50px; } .fils-for-downlaod span{ display: block; margin-top: 10px; overflow:hidden; } .fils-for-downlaod li{ text-align: center; width: 160px; } .fils-for-downlaod{ gap: 20px; } .footer{ background: #e3e7e9; } .footer-wrap{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* 24px between wrapped rows, 14px between items side by side */ gap: 24px 14px; } /* two tight clusters - the badges together, contact info + grofit logo together - with the bigger gap sitting only between the two clusters */ .footer-group{ display: flex; align-items: center; gap: 14px; } /* container is RTL, so a HIGHER order sits further LEFT - matches the figma layout: duns100 left of the badge, contact info left of the logo */ .footer-imge02{ order: 2; } /* duns100 */ .footer-imge01{ order: 1; } /* 10-years badge */ .footer-group-contact > div:first-child{ order: 2; } /* contact info */ .footer-group-contact > div:last-child{ order: 1; } /* grofit logo */ /* unlike the other footer images, this one has no img-fluid class and no width of its own, so it was rendering at its raw (huge) source size */ .footer-logo{ max-width: 170px; width: 100%; height: auto; display: block; } /* the duns100 asset renders noticeably larger than the 10-years badge next to it - cap it so the pair reads as a matched set */ .footer-imge02 img{ max-height: 78px; width: auto; } .footer-social a{ text-decoration: none; color: #1C1C1C; font-weight: var(--regular); font-size: 17px; } .footer-social h2{ font-size: 24px; color: #1C1C1C; } .footer-social ul{ display: block; } .footer-social li + li{ margin-top: 10px; } .footer-social li img{ margin-left: 10px; } .main-menu li a{ text-decoration: none; color: var(--h-color); font-size: 16.52px; font-weight: 600; padding: 10px 14px; display: block; } .main-menu li.active a{ background: #BE7467; color: var(--white-color); } .slider-content .slick-slide img{ height: 492px; object-fit: cover; width: 100%; } .main-navbar{ position: sticky; top: 0; z-index: 9; } #sectionthree, #sectionfour, #sectionfive, #sectionsix, #sectionseven, #sectioneight, #sectionnine, #sectionten, #sectioneleven{ scroll-margin-top: 50px; scroll-padding-top: 50px; } .ajax-overly { position: absolute; display: none; width: 100%; height: 100%; background: #00000059; z-index: 8; } .tab-content { position: relative; } #nav-tab2{ flex-wrap: nowrap; gap: 2px; } #tan-cont-two, #tan-cont-three{ display: none; } .table-three-tabs a{ width: 49.9% !important; } #nav-tab3{ gap: 2px; } #tab-one-ads, #tab-two-ads, #tab-three-ads{ cursor: pointer; } /*#searchbox2{*/ /* display: none;*/ /*}*/ #file-down-compl5, #file-down-compl4{ display: none !important; } /*#map-compl05, #accordionComplex4{*/ /* display: none;*/ /*}*/ /* #searchbox, #accordionExample, #map-compl04, #file-down-compl5, #searchbox3, #searchbox3top, #accordionComplex4, #map-compl05{ display: none; } */ table thead > tr > th:nth-last-child(3) { min-width: 110px; } table thead > tr > th:nth-last-child(4){ min-width: 120px; } table thead > tr > th:nth-last-child(5){ min-width: 100px; } .top-form-scroll{ padding: 0 40px; max-width: 1400px; margin: 0 auto; } /**** Lightbox css start ****/ .lb-outerContainer{ border-radius: 20px !important; overflow: hidden; } .lb-nav a{ width: 38px !important; height: 38px; background-position: center center !important; background-size: 14px !important; border-radius: 50% !important; background-color: var(--white-color) !important; top: 50%; position: absolute; transform: translateY(-50%); opacity: 1 !important; } .lb-nav a.lb-next{ margin-right: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .lb-nav a.lb-prev{ margin-left: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .lightboxOverlay{ max-width: 100%; background-color: rgba(0, 0, 0, 0.6) !important; opacity: 1 !important; backdrop-filter: blur(10px); } .lightbox{ position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; } .lb-details{ display: none; } .lb-data{ /* top: 10px; */ position: absolute; display: block; z-index: 99; width: 45px !important; height: 45px; opacity: 1; margin-right: 7px; bottom: 10px; } .lb-data .lb-close{ width: 38px !important; height: 38px !important; background-position: center center !important; background-size: 16px !important; border-radius: 50% !important; background-color: var(--white-color) !important; opacity: 1 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .lightbox .lb-image{ border: 0 !important; } .no-data-row > td{ border: none !important; } /* Floor Plan Dropdown Styles */ .floor-dropdown-wrap { position: relative; display: inline-block; z-index: 9; } .floor-dropdown-btn { background: none; border: none; cursor: pointer; padding: 0; } /* .floor-dropdown-btn img { width: 24px; height: 24px; } */ .floor-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); list-style: none; padding: 8px 0; margin: 5px 0 0 0; min-width: 120px; z-index: 1000; } .floor-dropdown-menu li { padding: 0; } .floor-dropdown-menu li a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: #333; text-decoration: none; font-size: 18px; line-height: 1.3; white-space: nowrap; transition: background 0.2s; } .floor-dropdown-menu li a img { width: 20px; height: 20px; object-fit: contain; } .floor-dropdown-menu li a:hover { background: #f5f5f5; color: #447d8b; } .floor-dropdown-wrap.open .floor-dropdown-menu { display: block; z-index: 9; } .floor-dropdown-wrap.open{ transform: none; z-index: 10; } #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items li.pojo-a11y-toolbar-item a svg{ padding-right: 0; padding-left: 6px; } /**** Accessibility CSS ****/ body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(input, textarea, select), body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) input::placeholder{ background: transparent !important; border-bottom: 1px solid #000 !important; color: #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .bottom-price-form :where(input, textarea, select), body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .bottom-price-form input::placeholder{ background: transparent !important; border-color: #fff !important; color: #fff !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-serch-btn-top{ background: #000 !important; color: #fff !important; border: 2px solid #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .bottom-price-form .ads-serch-btn{ background: #fff !important; color: #000 !important; border: 2px solid #000 !important; } /* every other CTA button on the site shares these classes - give them the same black outline so none of them wash out against a white page */ body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.ads-serch-btn, .ads-serch-btn-comp4, .ads-serch-btn-topcomp4, .ads-serch-btn-comp1){ border: 2px solid #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .icon-bg img{ background: #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .white-bg{ background: #fff !important; } /* the step chip IS the light wedge now - it must keep its background, or the notch disappears and black text lands on the navy bar */ body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span{ background: var(--gray-color) !important; color: #000 !important; } body.pojo-a11y-high-contrast input[type="checkbox"]{ -moz-appearance: auto !important; -webkit-appearance: auto !important; appearance: auto !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) select{ -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .price-form select{ background-image: url('../images/dropdown-arrow.jpg') !important; background-repeat: no-repeat !important; background-size: 13px !important; background-position: left 15px center !important; background-color: #FFFFFF !important; color: #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span::before, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span::before, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button span::before{ background: var(--gray-color) !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage :where(.accordion-button, .accordion-button *), body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage :where(.accordion-button, .accordion-button *), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .accordian-mortgage :where(.accordion-button, .accordion-button *){ background: var(--t-color) !important; color: #fff !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button p, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button p, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-button p{ background: transparent !important; color: #fff !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .faqs .accordion-header .accordion-button{ background-image: none !important; background-color: var(--t-color) !important; color: #fff !important; } /* chevrons follow the button's text colour, so they stay legible in every mode */ body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.faqs, .accordian-mortgage) .accordion-button::after, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.faqs, .accordian-mortgage) .accordion-button::after, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.faqs, .accordian-mortgage) .accordion-button::after{ background-color: currentColor !important; background-image: none !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title.active, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title.active, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title.active{ background: #13243E !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .table-head-title{ background: #E8ECEE !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-table-of-content :where(thead, tbody, tr, th, td), body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-table-of-content :where(thead, tbody, tr, th, td), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-table-of-content :where(thead, tbody, tr, th, td){ background-color: transparent !important; } /* the hamburger is three bars: the element itself plus ::before and ::after. Only the middle one was being recoloured here, so on the black background of high/negative contrast the two outer bars kept the dark --h-color and the icon read as a single stripe. All three go white in both modes. */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::before, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::after, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::before, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::after{ background-color: #fff !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger, body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::before, body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .hamburger::after{ background-color: #000 !important; } body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg, body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg, body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-bg :where(img, svg, a), body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) svg, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-text-bg, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .transparent-text-bg .elementor-heading-title, body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.slick-arrow-transparent, .dialog-close-button, .swiper-pagination, .slick-gallery, .slick-gallery *), body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *), body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *), body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *), body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lightbox *){ background: transparent !important; } body.pojo-a11y-light-background :not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lb-data .lb-close), body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lb-data .lb-close), body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) :where(.lb-data .lb-close){ background: url(../images/close.png) top right no-repeat !important; background-color: #fff !important; background-position: center center !important; } /* body.pojo-a11y-high-contrast input[type="checkbox"]:checked::before, body.pojo-a11y-negative-contrast input[type="checkbox"]:checked::before{ color: #fff !important; } */ body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-serch-btn-top, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .ads-serch-btn-top{ border: 1px solid #fff !important; } body.pojo-a11y-high-contrast td img, body.pojo-a11y-negative-contrast td img{ mix-blend-mode: unset !important; } body.pojo-a11y-negative-contrast :not(#pojo-a11y-toolbar) .footer-imge01 img{ background-color: #fff !important; } body.pojo-a11y-high-contrast .hero-curve-img{ background: transparent !important; } body.pojo-a11y-high-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .gallery-tag, body.pojo-a11y-negative-contrast *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .gallery-tag, body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .gallery-tag{ background: transparent !important; } /* Remove the problematic body filter only during grayscale mode */ body.pojo-a11y-grayscale { -webkit-filter: none !important; filter: none !important; overflow-x: hidden !important; } /* Reapply grayscale to the document root */ html:has(body.pojo-a11y-grayscale) { -webkit-filter: grayscale(100%) !important; filter: grayscale(100%) !important; } /* Change toolbar positioning only during grayscale mode */ body.pojo-a11y-grayscale #pojo-a11y-toolbar { position: fixed !important; z-index: 99999 !important; } @media (max-width: 600px) { body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg, body.pojo-a11y-light-background *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) .mobile-dark-bg img { background: #000 !important; } } /**** Cookie consent css start ****/ .cc-title, .cc-body{ line-height: 1.3; color: #fff; } .cc-body{ font-size: 14px; } body #cc-floater { bottom: unset !important; top: 16.5vw !important; left: 0.2vw !important; right: unset !important; width: 2.5vw !important; height: 2.5vw !important; line-height: 2.5vw; text-align: center !important; z-index: 999 !important; } #cc-floater svg{ width: 1.5vw !important; height: 1.5vw !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body #pojo-a11y-toolbar{ z-index: 9999 !important; top: 13vw !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { font-size: 1.5vw !important; padding: 0.6vw !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg{ width: 1.5vw !important; } @media(max-width: 767px){ body #cc-floater{ bottom: unset !important; top: 78vw !important; left: 2px !important; width: 7.5vw !important; height: 7.5vw !important; line-height: 7.5vw; padding: 4.5vw !important; } #cc-floater svg { width: 5vw !important; height: 5vw !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { font-size: 5.5vw !important; padding: 2vw !important; } #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg { width: 5.8vw !important; } body #pojo-a11y-toolbar { top: 66vw !important; } .cc-banner { padding: 16px !important; } .cc-pos-right { left: 50% !important; right: unset !important; bottom: 20px !important; width: 95%; transform: translateX(-50%); } .cc-btn{ padding: 7px 9px !important; } } /* .building-table{ overflow-x: auto; -webkit-overflow-scrolling: touch; } */ .footer-sec-1 { display: flex; width: 42%; justify-content: space-between; align-items: start; } .footer-sec-2 { display: flex; width: 33%; justify-content: space-between; align-items: start; } /* The cookie-consent widget (cookie.webzapp.click) injects its own inline