/* =================================================================== AVRA overrides - loaded LAST in , after style.css. Fixes diagnosed on the live build. =================================================================== */ /* ------------------------------------------------------------------- 1) HERO & PARALLAX: force clean full-cover, kill tiling/repeat (stellar was setting background-size:auto 120% + repeat). ------------------------------------------------------------------- */ .slider .swiper-slide,[data-stellar-background-ratio]{background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important} /* Hero headline: keep big H1 lines tight so distinct per-slide headlines stay clean during the fade between the two slides. */ .slider h1{line-height:1.06} /* ------------------------------------------------------------------- 2) INNER-PAGE HERO (.page-header) was fixed height:500px with a 96px H1 that overflowed into the next section. Make it flexible + smaller. ------------------------------------------------------------------- */ .page-header{height:auto!important;min-height:60vh;padding-top:150px;padding-bottom:90px;overflow:hidden} .page-header .container{position:relative;z-index:2} .page-header h1{font-size:clamp(36px,5vw,62px)!important;line-height:1.1;margin-bottom:.4em} /* ------------------------------------------------------------------- 3) LUXURY SPACING + ALIGNMENT. The "Avra" content sections (.intro split blocks, stats, gallery strip, CTA, plan tables) carried mismatched paddings/margins from the template (.intro had no symmetric padding; .benefits/.recent-gallery used 150px; .property-calculator/.get-consultation added an extra 100px margin), which read as cramped copy AND an oversized gap right before the stats. Normalize every section to the SAME generous vertical rhythm so spacing is even and luxurious throughout. ------------------------------------------------------------------- */ .intro, .property-calculator, .benefits, .recent-gallery, .get-consultation, .property-plans, .facilities{ padding-top:100px!important; padding-bottom:100px!important; margin-top:0!important; margin-bottom:0!important; } /* INTRO split section: constrain the floated 525px image + 120%-wide decorative .pattern-bg so the figure stays in its column and never overlaps copy; and NEUTRALIZE the big transform/negative offsets that pushed the image column out of vertical alignment with the text column (so .row.align-items-center actually centers the two columns). */ .intro{overflow:hidden} .intro .row{align-items:center} .intro figure{max-width:100%;margin-top:0} .intro figure .holder{max-width:100%;transform:translate(40px,0)} .intro figure .holder img{max-width:100%;height:auto;width:525px} .intro figure .pattern-bg{max-width:100%;overflow:hidden} .intro .content-box{padding-left:8%} /* Section heading block: now a single gold serif heading per section. Give it a touch more breathing room beneath before the body/columns. */ .benefits .col-12 h4, .property-plans .col-12 h4{margin-bottom:45px} .intro .content-box h4, .recent-gallery h4, .get-consultation h4, .property-calculator .content-box h4{margin-bottom:22px} /* Plain-text stat value (e.g. an occupancy YEAR) styled to match the odometer figures, but WITHOUT the thousands-separator an odometer would inject. */ .benefits .stat-plain{ display:inline-block; font-family:"Playfair Display",serif; font-size:50px; line-height:1; font-weight:600; color:#26282b; } /* ------------------------------------------------------------------- 6) MOBILE HEADER / OFF-CANVAS MENU (<=991px). The inline phone-email block + hamburger were cramped/overlapping on mobile. Keep a clean logo-left / hamburger-right header, hide the inline phone-email (it lives in the off-canvas side-nav instead), and re-enable the side-nav contact panel that the template hid at this breakpoint. ------------------------------------------------------------------- */ @media (max-width:991px){ /* INTRO stacks on mobile: drop offsets/padding so it reads cleanly */ .intro figure .holder{transform:none} .intro figure .holder img{width:100%} .intro .content-box{padding-left:0} .intro .content-box p{padding-right:0} /* Clean header row: logo left, hamburger right, vertically centered */ .navbar .container .upper-side{ padding:18px 0; align-items:center; flex-wrap:nowrap; } .navbar .container .upper-side .logo{margin-right:auto} .navbar .container .upper-side .logo img{height:42px} /* Hide the inline phone/email + language divider on mobile (shown in side-nav) */ .navbar .container .upper-side .phone-email{display:none!important} .navbar .container .upper-side .language{display:none!important} /* Properly sized, tappable hamburger pinned to the right */ .navbar .container .upper-side .hamburger{ display:block; margin-left:auto; margin-right:0; width:32px; height:24px; flex:0 0 auto; } /* Off-canvas side-navigation: show the contact/content panel (template hid it at <=991px) so the 8-item menu sits above clean contact info. */ .side-navigation .side-content{display:block!important} .side-navigation .menu{display:block} .side-navigation .menu ul li a{font-size:20px} } /* Tighten section rhythm a little on smaller screens */ @media (max-width:767px){ .intro, .property-calculator, .benefits, .recent-gallery, .get-consultation, .property-plans, .facilities{ padding-top:70px!important; padding-bottom:70px!important; } .benefits .stat-plain{font-size:40px} } /* ------------------------------------------------------------------- 8) STATS CONSTELLATION (connect the figures) + PARALLAX WHITE-FLASH FIX. */ /* Dark fallback behind parallax/hero so fast-scroll lag never flashes the white body bg */ .get-consultation,.slider .swiper-slide,.page-header{background-color:#26282b} html,body{background-color:#f9f9f9} /* =================================================================== MOBILE / RESPONSIVE POLISH (iPhone-first). Cleaner, luxurious stacking; removes the broken decorative tan-pattern frame + float/parallax offsets that cluttered the .intro image blocks and left large white gaps. =================================================================== */ @media (max-width:991px){ .intro figure{background:transparent!important;margin-top:0!important;margin-bottom:0!important;display:block!important} .intro figure .pattern-bg{display:none!important} .intro figure .holder{position:relative;transform:none!important;float:none!important;padding:0!important;width:100%!important;margin:0} .intro figure .holder img{width:100%!important;height:auto;border-radius:8px;box-shadow:0 16px 40px rgba(26,40,51,.16)} .intro .row{row-gap:30px} .intro .content-box{padding-left:0!important} .intro .content-box p{padding-right:0!important} .property-calculator figure{background:transparent!important} .property-calculator figure .pattern-bg{display:none!important} .property-calculator figure .holder{transform:none!important;float:none!important;padding:0!important;width:100%!important} .property-calculator figure .holder img{width:100%!important;height:auto;border-radius:8px;box-shadow:0 16px 40px rgba(26,40,51,.16)} .recent-gallery .row.inner > [class*="col"]{margin-bottom:16px} .recent-gallery figure img{width:100%;border-radius:6px} .intro,.benefits,.recent-gallery,.get-consultation,.property-plans,.facilities,.property-calculator{padding-top:60px!important;padding-bottom:60px!important} .intro .content-box h4 span,.benefits .col-12 h4 span,.recent-gallery h4 span,.property-plans .col-12 h4 span,.get-consultation h4 span{font-size:clamp(25px,6vw,32px)} } @media (max-width:575px){ .intro,.benefits,.recent-gallery,.get-consultation,.property-plans,.facilities,.property-calculator{padding-top:46px!important;padding-bottom:46px!important} .benefits .stats-row > [class*="col"]{margin-bottom:24px} .container{padding-left:22px;padding-right:22px} } /* ------------------------------------------------------------------- 7) CONTACT LEGIBILITY + SPACING (header over hero + dark footer). */ .navbar .container .upper-side .phone-email{ margin-top:6px; margin-right:36px; } .navbar .container .upper-side .phone-email h4, .navbar .container .upper-side .phone-email h4 a{ color:#ffffff!important; font-size:18px; text-shadow:0 1px 8px rgba(0,0,0,.55); } .navbar .container .upper-side .phone-email h4{ margin-bottom:4px; } .navbar .container .upper-side .phone-email small a{ color:#f1e3cd!important; opacity:.96!important; font-size:13px; text-shadow:0 1px 7px rgba(0,0,0,.55); } .footer .contact-box h3, .footer .contact-box h3 a{ color:#ffffff!important; } .footer .contact-box h5{ letter-spacing:.04em; margin-bottom:14px; } .footer .contact-box p{ margin-bottom:16px; } .footer .contact-box p a{ color:#f1e3cd!important; opacity:.96!important; } .footer .contact-box ul{ margin-top:26px; }