.elementor-kit-123{--e-global-color-primary:#1C244B;--e-global-color-secondary:#F3F5F8;--e-global-color-text:#324A6D;--e-global-color-accent:#467FF7;--e-global-color-c696dce:#FFFFFF;--e-global-color-14ef391:#C8D5DC;--e-global-color-764183d:#F9FAFD;--e-global-color-d6cea4e:#FFFFFF;--e-global-color-86b4fcd:#02010100;--e-global-color-57c8da2:#000000CC;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-size:65px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:capitalize;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Founders Grotesk Regular";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:capitalize;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-4919d5a-font-family:"Founders Grotesk Medium";--e-global-typography-4919d5a-font-size:25px;--e-global-typography-4919d5a-font-weight:400;--e-global-typography-4919d5a-text-transform:uppercase;--e-global-typography-4919d5a-letter-spacing:0.075em;--e-global-typography-d2b1825-font-family:"Beaufort Pro Light";--e-global-typography-d2b1825-font-size:32px;--e-global-typography-d2b1825-font-weight:400;--e-global-typography-d2b1825-font-style:normal;--e-global-typography-d2b1825-line-height:125%;--e-global-typography-d2b1825-letter-spacing:0.02em;--e-global-typography-8167d72-font-family:"Founders Grotesk Regular";--e-global-typography-8167d72-font-size:1.1em;--e-global-typography-8167d72-font-weight:400;--e-global-typography-8167d72-text-transform:uppercase;--e-global-typography-8167d72-line-height:1.2em;--e-global-typography-8167d72-letter-spacing:0.15em;--e-global-typography-8bb7226-font-family:"Beaufort Pro Light";--e-global-typography-8bb7226-font-size:60px;--e-global-typography-8bb7226-font-weight:400;--e-global-typography-8bb7226-line-height:1em;--e-global-typography-8bb7226-letter-spacing:-0.5px;--e-global-typography-09c3d00-font-family:"Founders Grotesk Regular";--e-global-typography-09c3d00-font-size:1.3em;--e-global-typography-09c3d00-font-weight:400;--e-global-typography-09c3d00-line-height:130%;--e-global-typography-09c3d00-letter-spacing:0.02em;--e-global-typography-917e4c2-font-family:"Founders Grotesk Medium";--e-global-typography-917e4c2-font-size:19px;--e-global-typography-917e4c2-font-weight:400;--e-global-typography-917e4c2-text-transform:uppercase;--e-global-typography-917e4c2-font-style:normal;--e-global-typography-917e4c2-letter-spacing:0.08em;--e-global-typography-5af10fd-font-family:"Beaufort Pro Light";--e-global-typography-5af10fd-font-size:24px;--e-global-typography-5af10fd-font-weight:400;--e-global-typography-5af10fd-line-height:125%;--e-global-typography-5af10fd-letter-spacing:0.02em;--e-global-typography-defd500-font-family:"Founders Grotesk Regular";--e-global-typography-defd500-font-size:16px;--e-global-typography-defd500-font-weight:400;--e-global-typography-defd500-text-decoration:underline;--e-global-typography-defd500-letter-spacing:0.03em;background-color:var( --e-global-color-c696dce );}.elementor-kit-123 e-page-transition{background-color:#FFBC7D;}.site-header{background-color:var( --e-global-color-c696dce );padding-inline-end:8%;padding-inline-start:8%;}.site-footer{background-color:var( --e-global-color-accent );}.elementor-kit-123 a{color:var( --e-global-color-accent );}.elementor-kit-123 a:hover{color:var( --e-global-color-primary );}.elementor-kit-123 h4{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .header-inner{width:1600px;max-width:100%;}.site-header .site-navigation ul.menu li a{color:var( --e-global-color-primary );}.site-header .site-navigation-toggle .site-navigation-toggle-icon{color:var( --e-global-color-accent );}.site-header .site-navigation .menu li{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}@media(max-width:1919px){.elementor-kit-123{--e-global-typography-4919d5a-font-size:22px;--e-global-typography-4919d5a-letter-spacing:0.075em;--e-global-typography-d2b1825-font-size:24px;--e-global-typography-d2b1825-line-height:125%;--e-global-typography-d2b1825-letter-spacing:0.01em;--e-global-typography-8167d72-font-size:1.05em;--e-global-typography-8167d72-line-height:1.2em;--e-global-typography-8167d72-letter-spacing:0.15em;--e-global-typography-8bb7226-font-size:50px;--e-global-typography-8bb7226-line-height:1em;--e-global-typography-8bb7226-letter-spacing:-0.5px;--e-global-typography-09c3d00-font-size:1.2em;--e-global-typography-09c3d00-line-height:130%;--e-global-typography-09c3d00-letter-spacing:0.02em;--e-global-typography-917e4c2-font-size:17px;--e-global-typography-5af10fd-font-size:20px;--e-global-typography-5af10fd-line-height:125%;--e-global-typography-5af10fd-letter-spacing:0.02em;--e-global-typography-defd500-font-size:16px;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:1024px){.elementor-kit-123{--e-global-typography-primary-font-size:45px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:14px;--e-global-typography-4919d5a-font-size:18px;--e-global-typography-4919d5a-letter-spacing:0.075em;--e-global-typography-d2b1825-font-size:19px;--e-global-typography-d2b1825-line-height:125%;--e-global-typography-d2b1825-letter-spacing:0.01em;--e-global-typography-8167d72-font-size:1em;--e-global-typography-8167d72-line-height:1.2em;--e-global-typography-8167d72-letter-spacing:0.15em;--e-global-typography-8bb7226-font-size:45px;--e-global-typography-8bb7226-line-height:1em;--e-global-typography-8bb7226-letter-spacing:-0.5px;--e-global-typography-09c3d00-font-size:1.2em;--e-global-typography-09c3d00-line-height:130%;--e-global-typography-09c3d00-letter-spacing:0.02em;--e-global-typography-917e4c2-font-size:17px;--e-global-typography-5af10fd-font-size:15px;--e-global-typography-5af10fd-line-height:125%;--e-global-typography-5af10fd-letter-spacing:0.02em;--e-global-typography-defd500-font-size:14px;--e-global-typography-defd500-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}.site-header{padding-inline-end:5%;padding-inline-start:5%;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-kit-123{--e-global-typography-primary-font-size:28px;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:20px;--e-global-typography-4919d5a-font-size:14px;--e-global-typography-4919d5a-letter-spacing:0.075em;--e-global-typography-d2b1825-font-size:15px;--e-global-typography-d2b1825-line-height:125%;--e-global-typography-d2b1825-letter-spacing:0.01em;--e-global-typography-8167d72-font-size:0.8em;--e-global-typography-8167d72-line-height:1.2em;--e-global-typography-8167d72-letter-spacing:0.12em;--e-global-typography-8bb7226-font-size:30px;--e-global-typography-8bb7226-line-height:1.1em;--e-global-typography-8bb7226-letter-spacing:-0.5px;--e-global-typography-09c3d00-font-size:0.95em;--e-global-typography-09c3d00-line-height:130%;--e-global-typography-09c3d00-letter-spacing:0.02em;--e-global-typography-917e4c2-font-size:17px;--e-global-typography-917e4c2-letter-spacing:0.04em;--e-global-typography-5af10fd-font-size:14px;--e-global-typography-5af10fd-line-height:125%;--e-global-typography-5af10fd-letter-spacing:0.02em;--e-global-typography-defd500-font-size:16px;--e-global-typography-defd500-letter-spacing:0.01em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}.site-header{padding-inline-end:8%;padding-inline-start:8%;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(min-width:1920px){.elementor-kit-123{--e-global-typography-text-font-size:1.2em;--e-global-typography-text-line-height:130%;--e-global-typography-text-letter-spacing:0.02em;--e-global-typography-4919d5a-font-size:25px;--e-global-typography-4919d5a-letter-spacing:0.075em;--e-global-typography-d2b1825-font-size:32px;--e-global-typography-d2b1825-line-height:125%;--e-global-typography-d2b1825-letter-spacing:0.01em;--e-global-typography-8167d72-font-size:1.1em;--e-global-typography-8167d72-line-height:1.2em;--e-global-typography-8167d72-letter-spacing:0.15em;--e-global-typography-8bb7226-font-size:60px;--e-global-typography-8bb7226-line-height:1em;--e-global-typography-8bb7226-letter-spacing:-0.5px;--e-global-typography-8bb7226-word-spacing:0px;--e-global-typography-09c3d00-font-size:1.3em;--e-global-typography-09c3d00-line-height:130%;--e-global-typography-09c3d00-letter-spacing:0.02em;--e-global-typography-917e4c2-font-size:17px;--e-global-typography-917e4c2-letter-spacing:0.04em;--e-global-typography-5af10fd-font-size:20px;--e-global-typography-5af10fd-line-height:125%;--e-global-typography-5af10fd-letter-spacing:0.02em;--e-global-typography-defd500-font-size:16px;--e-global-typography-defd500-letter-spacing:0.01em;}.site-header .site-navigation .menu li{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}} /* Start custom CSS *//* ================================================================================================ ================================================================================================ == == == THE ISLES — CUSTOM RESPONSIVE STYLESHEET (custom.css) == == >>>>>>>>>> START OF CUSTOM CSS <<<<<<<<<< == == == == Structure: base rules first, then FIVE non-overlapping ranges matching the == == Elementor breakpoints exactly: == == 1. Mobile max-width: 767px == == 2. Tablet Portrait 768px – 1024px == == 3. Tablet Landscape 1025px – 1440px == == 4. Laptop 1441px – 1919px == == 5. Widescreen min-width: 1920px == == == == Every .elementor-kit-123 is duplicated inside every range so each device size is fully == == self-contained. Selectors are prefixed with the section ID (e.g. #design .intro_text) == == so they always beat Elementor's generated CSS without needing !important. == == Shared patterns use :is(#design, #interiors, #location) — section-specific variants == == (.intro_text2 etc.) sit directly below them and win on specificity when filled. == == == == Pre-populated values are STARTING POINTS — tune freely in the inspector. == == Values ported from the previous custom.css are preserved as-is. == == == ================================================================================================ ================================================================================================ */ /* ------------------------------------------------------------ BASE (all device sizes) ------------------------------------------------------------ */ /* 1. Force Safari to repaint the logo container on scroll */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo { -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; will-change: transform, opacity; visibility: visible !important; opacity: 1 !important; } /* 2. Prevent Safari's flexbox engine from collapsing the image/SVG width to 0px */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo img, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo svg { -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; flex-shrink: 0 !important; max-width: 100% !important; height: auto !important; } /* ============================================================ 1. MOBILE — max-width: 767px ============================================================ */ @media (max-width: 767px) { /* ---------- STICKY NAV / HEADER ---------- */ .sticky-header-container { } #full_nav_logo { } #full_nav_logo img { } #top_logo { } #top_logo img { max-height: 42px; } #reg_btn { } #menu_register { } /* ---------- HOME / HERO ---------- */ #home { overflow-x: hidden !important; } #home .home_intro_text { max-width: 100%; } #home .elementor-element-1dd3d47, #home .elementor-element-6f96336 /* fixed 650px/630px Elementor containers — caused 35px mobile overflow */ { max-width: 100% !important; } #home svg { max-width: 100%; height: auto; } #home .home_intro_text h1 { font-size: 22px; line-height: 140%; max-width: min(92%, 460px); margin: 0 auto 7vh; } #preload_video { } #video_container { } /* ---------- SHARED TEXT PATTERNS (design / interiors / location) ---------- */ :is(#design, #interiors, #location) .section_small_text h2 { font-size: 11px; max-width: 100%; } :is(#design, #interiors, #location) .intro_text h2 { font-size: 24px; line-height: 112%; max-width: min(100%, 470px); margin-inline: auto; } :is(#design, #interiors, #location) .body_text p { font-size: 14px; line-height: 135%; max-width: min(95%, 450px); margin-inline: auto; } #design .section_small_text1 h2 { } #design .intro_text1 h2 { } #design .body_text1 p { } #interiors .section_small_text2 h2 { } #interiors .intro_text2 h2 { } #interiors .body_text2 p { } #location .section_small_text3 h2 { } #location .intro_text3 h2 { } #location .body_text3 p { } /* ---------- DESIGN — RENDER CAROUSEL ---------- */ .render_carousel { } .render_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .render_carousel img { max-height: 300px; /* no radius on mobile */ } .render_carousel .premium-carousel-template { margin-inline: 8px !important; } .render_carousel2 /* interiors variant */ { } .premium-carousel-thumb-info { background-color: transparent !important; opacity: 0; } .premium-carousel-thumb-title { color: #707B73; font-family: "Founders Grotesk Regular"; text-transform: uppercase; font-size: 12px; letter-spacing: 0.02em; margin: 10px auto 10px; } .slick-current { } .slick-current .premium-carousel-thumb-info { opacity: 1; transition: all 0.5s ease; } /* ---------- DESIGN FEATURES ---------- */ #design_features { background-image: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp'); } #features_title_row h2 /* was 26.4px at every size — now scales */ { font-size: 22px; } #design_features .features_container { margin-bottom: 30px; } #design_features .features_container img { max-height: 60px; width: auto; } #design_features .features_container h3 /* was 22/28/17/23/29 — smoothed */ { font-size: 17px; } #design_features .features_container p { font-size: 14px; line-height: 140%; max-width: min(90%, 420px); } /* ---------- VIDEO SECTIONS ---------- */ #video { } #video_row2 { } /* ---------- LOCATION ---------- */ #location h2 /* generic catch: 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { font-size: 16px; /* was 14px — too small for a heading */ } #location p.p1, #location .animated-slow p /* lifestyle statement paragraphs */ { font-size: 16px; line-height: 132%; max-width: min(90%, 520px); } #double_aerial_row { } #double_aerial_row img { } #location img[id="31"] /* aerial_mobile */ { } #location img[id="1104"], #location img[id="1105"], #location img[id="1106"] /* full-width lifestyle images */ { max-width: 100%; } .lifestyle_carousel { } .lifestyle_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .lifestyle_carousel img { max-height: 420px; /* was 700px tall on phones */ } .lifestyle_carousel .premium-carousel-template { margin-inline: 8px !important; } .life_carousel { } /* ---------- TEAM ---------- */ #team /* quote wrap carries the closing space now */ { padding-bottom: 0; } :is(#team, #team_internal) h2 { } :is(#team, #team_internal) .tl { } :is(#team, #team_internal) .tl img { height: 35px !important; width: auto; display: block; margin: 10px auto 10px; } :is(#team, #team_internal) .tl1 img { } :is(#team, #team_internal) .tl2 img { } :is(#team, #team_internal) .tl3 img { } :is(#team, #team_internal) .tl4 img { } :is(#team, #team_internal) .tl5 img { } #team .architect_quote h1, #team .architect_quote h2 /* NOW AN H1 — h2 kept as fallback */ { font-size: 18px; line-height: 130%; max-width: min(90%, 480px); margin-inline: auto; } #team .architect_name h5, #team .architect_name h2 /* NOW AN H5 — h2 kept as fallback */ { font-size: 12px; } /* ---------- REGISTER / FOOTER ---------- */ #register { } #register .stamp_row { } #register .stamp_row img { max-height: 64px; margin: 0 auto 20px; } #register .footer_large_text h2 /* was 30px at every size */ { font-size: 18px; line-height: 130%; max-width: min(95%, 300px); margin-inline: auto; } #register .contact_small_text h2 { font-size: 13px; } #register .contact_phone_number h2 /* was 41px even on phones */ { font-size: 26px; } #register .form_row { } #register .form_wrap { max-width: min(90%, 500px); margin: 0 auto 20px; } #footer_logo_container /* fixed 500px wide — overflowed mobile viewport */ { max-width: 100% !important; } #register .fl { } #register .fl img /* leave empty: fl1–fl3 already sized in Elementor */ { } #register .fl1 img { } #register .fl2 img { } #register .fl3 img { } #register .fl4 img /* was 45-49px tall vs siblings at 22-32px */ { max-height: 28px; width: auto; } #footer_text_small { font-size: 11px; max-width: 100% !important; /* was 500px fixed — overflowed mobile viewport */ } /* ---------- SITE FOOTER (Hello theme) ---------- */ #site-footer { } #site-footer .footer-inner { } #site-footer .custom-logo { max-width: 120px; } #site-footer p { font-size: 12px; } #site-footer .copyright p { font-size: 11px; } /* ---------- REFINEMENTS — SECTION SHELLS & GUTTERS ---------- */ #home .elementor-element-1dd3d47 /* hero content block — clearance below h1 for mobile browser chrome */ { padding-bottom: 84px !important; } :is(#design, #interiors) /* section rhythm: gap between stacked rows + top/bottom padding */ { padding-top: 48px !important; padding-bottom: 44px !important; row-gap: 10px !important; } #location { row-gap: 15px !important; /* matches #design / #interiors */ padding-bottom: 32px !important; } :is(#design, #interiors) > .e-con /* symmetric 20px gutters (rows had 24/39 + 40/0 asymmetry) */ { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-inline: auto !important; row-gap: 16px; } #location > .e-con { width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-inline: auto !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 0 !important; } #location .e-con .e-con /* nested rows carried pl:40/pr:0 — de-centred everything */ { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; } #location h2 /* centre 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { text-align: center; } #location .elementor-widget-image img /* width:100% keeps all three aerials identical */ { display: block; margin-inline: auto; width: 100% !important; } /* ---------- REFINEMENTS — TEXT ROW SPACING ---------- */ .section_small_text h2 { margin-bottom: 0; } .intro_text { margin-bottom: 0 !important; } .body_text { margin-bottom: 6px; } .e-con:has(> .section_small_text) { margin-bottom: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .intro_text) { margin-bottom: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .body_text) /* row wrapper had 40px bottom margin */ { margin-bottom: 0 !important; } /* ---------- REFINEMENTS — CAROUSELS (full-bleed on mobile, tightened margins everywhere) ---------- */ .render_carousel, .lifestyle_carousel, .life_carousel /* mobile: fills its row (100%); tablet+: full browser bleed */ { flex-shrink: 0 !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .render_carousel .slick-list, .lifestyle_carousel .slick-list { padding-left: 0 !important; padding-right: 0 !important; } .e-con:has(> .render_carousel), .e-con:has(> .lifestyle_carousel) /* carousel wrapper column had 80px margins */ { margin-top: 12px !important; margin-bottom: 12px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .e-con > .render_carousel), .e-con:has(> .e-con > .lifestyle_carousel) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .e-con:has(.render_carousel), .e-con:has(.lifestyle_carousel) { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; margin-inline: auto; } /* ---------- REFINEMENTS — DOUBLE AERIAL ROW ---------- */ #location #double_aerial_row /* stacked on mobile; width matches the single aerial rows */ { flex-direction: column !important; width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; margin-inline: auto !important; row-gap: 10px; } #location #double_aerial_row > div.e-con { width: 100% !important; max-width: 100% !important; } #location #double_aerial_row img { width: 100% !important; } /* ---------- REFINEMENTS — DESIGN FEATURES GRID ---------- */ #design_features { row-gap: 24px !important; } #design_features .e-con, #design_features .e-con-inner /* feature-block gap lives on the .e-con-inner (was 76px) */ { row-gap: 20px !important; } #design_features .features_container { margin-bottom: 0; padding-top: 0 !important; } #features_title_row h2 { text-align: center; margin-bottom: 0; } #features_title_row { padding-bottom: 0 !important; margin-bottom: 6px !important; } /* ---------- REFINEMENTS — TEAM SECTION ---------- */ :is(#team, #team_internal) /* section itself was 405px wide with 40px side padding on mobile */ { width: 100% !important; max-width: 100% !important; padding: 0 !important; } :is(#team, #team_internal) > .e-con-inner { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-top: 0 !important; } :is(#team, #team_internal) > .e-con-inner > .e-con /* two-column team rows — stepped max-widths */ { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } :is(#team, #team_internal) .e-con .e-con { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } :is(#team, #team_internal) .elementor-widget-image { width: 100% !important; max-width: 100% !important; } :is(#team, #team_internal) img.size-large /* max-width caps the photos; tune per taste */ { width: 100% !important; max-width: min(90%, 450px) !important; margin-inline: auto !important; display: block; } .elementor-element-a3efed4 h2 /* 'Our Team' heading */ { text-align: center; } /* ---------- REFINEMENTS — REGISTER SECTION ---------- */ #register /* clearance above the stamp for sticky nav / anchor jumps */ { padding-top: 88px !important; } #register .contact_small_text /* space above 'More Information' */ { margin-top: 34px; } /* ---------- REFINEMENTS — MOBILE BORDER-RADIUS RESET (images, carousels & video only; Register pill button keeps its radius) ---------- */ :is(#video, #video_row2) .premium-video-box-container, :is(#video, #video_row2) .premium-video-box-video-container, :is(#video, #video_row2) video, :is(#video, #video_row2) iframe, :is(#video, #video_row2) img, :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img, .render_carousel img, .lifestyle_carousel img, .premium-carousel-inner-img { border-radius: 0 !important; } /* ---------- ROUND 2 — DESIGN FEATURES CENTRED AT ALL MOBILE WIDTHS ---------- */ #design_features /* section had a fixed-width, left-anchored content column */ { width: 100% !important; max-width: 100% !important; } #design_features > .e-con, #design_features > .e-con-inner { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-left: 20px !important; padding-right: 20px !important; } #design_features .features_container { margin: 0 auto !important; padding: 0 !important; } #design_features .features_container p /* had a 420px max-width but no auto margins — sat left */ { margin-inline: auto !important; text-align: center; } #design_features .features_container h3 { text-align: center; } #design_features .features_container img { display: block; margin: 0 auto; } /* ---------- ROUND 2 — CAROUSEL DOTS (scale down as devices shrink) ---------- */ .render_carousel .slick-dots li, .lifestyle_carousel .slick-dots li { margin: 0 3px !important; width: auto !important; height: auto !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i /* dots are FontAwesome icons */ { font-size: 6px !important; } /* ---------- ROUND 2 — FULL-BLEED SUPPORT & TEXT CENTRING ---------- */ :is(#design, #interiors, #location) /* lets 100vw carousels bleed without a horizontal scrollbar */ { overflow-x: clip; } #location p.p1, #location .animated-slow p /* centred under its image on mobile/tablet only; desktop sizes are left-aligned below */ { margin-inline: auto !important; } /* ---------- ROUND 2 — TEAM SLOTS (heading margin, image margin, bio text width) ---------- */ :is(#team, #team_internal) .elementor-element-a3efed4 h2 /* margin under 'Our Team' */ { margin-bottom: 18px !important; } :is(#team, #team_internal) .elementor-widget-image /* margin slot for the team photos */ { margin-bottom: 14px; } :is(#team, #team_internal) .e-con .e-con h2 /* max-width slot for the team text */ { max-width: min(92%, 450px); margin-inline: auto; } /* ---------- ROUND 2 — REGISTER SPACING ---------- */ #register .contact_small_text /* 5px under 'More Information' */ { margin-bottom: 5px !important; } #register .contact_small_text h2 { margin-bottom: 0; } #register .contact_phone_number /* 25px under the phone number */ { margin-bottom: 25px !important; } #register .contact_phone_number h2 { margin-bottom: 0; } #register /* bottom clearance so the disclaimer never touches the viewport edge */ { padding-bottom: 100px !important; padding-left: 10px; padding-right: 10px; } /* ---------- ROUND 3 — WATERFRONT PARK BLOCK (#park_img / .park_img_row) ---------- */ .park_img_row /* had 40px top / 120px bottom margins */ { margin-top: 16px !important; margin-bottom: 0 !important; } .park_img_row > .e-con-inner, .park_img_row .e-con-inner /* Elementor caps this at 66% — unlocked so the #park_img caps below govern */ { } #park_img /* masterplan map — proportional cap at every size */ { max-width: min(100%, 550px); margin: 0 auto; } /* ---------- ROUND 3 — NAV (visible on mobile & tablet) ---------- */ #full_nav_logo /* at tablet the full logo left only 6px before the first menu link */ { } #full_nav_logo svg, #full_nav_logo img { } /* ---------- ROUND 4 — MOBILE NAVIGATION ---------- */ #top_logo img { display: none; } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-menu-toggle, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus, .elementor-menu-toggle /* white over the hero; !important because post-270.css loads after this file */ { color: #fff !important; fill: #fff !important; background: transparent; } .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg, .elementor-menu-toggle svg path, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover svg, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus svg { fill: #fff !important; } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:hover, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:focus /* brand green once the sticky header kicks in */ { color: #707B73 !important; fill: #707B73 !important; } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg path { fill: #707B73 !important; } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects.sticky-header-container { padding: 15px 10px 10px !important; min-height: 50px !important; /* interpreting the stray '50px' — change to height if intended */ background-color: #f8f8f6 !important; } #full_nav_logo img, #full_nav_logo svg { width: 180px; height: auto; margin: 4px auto 0 0 !important; } .elementor-nav-menu--dropdown.elementor-nav-menu__container { margin-top: 5px; background-color: #F8F8F6 !important; border: 0 !important; /* kills the red bottom border */ box-shadow: 0 14px 28px rgba(40, 48, 43, .10); } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a /* was red Inter; now matches the site */ { color: #707B73 !important; fill: #707B73 !important; font-family: 'Founders Grotesk Regular', Inter, sans-serif !important; font-size: 16px !important; /* larger tap targets on small devices */ letter-spacing: .08em !important; text-transform: uppercase !important; padding: 18px 24px !important; /* ~56px tap height */ } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a.elementor-item-active { color: #4E5850 !important; background-color: rgba(112, 123, 115, .07) !important; } .elementor-nav-menu--dropdown li { border-color: rgba(112, 123, 115, .15) !important; } /* ---------- ROUND 4 — 'ENQUIRE NOW' MENU ITEM (add in WP menu with CSS class 'menu-item-enquire'; styles below activate automatically) ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown .menu-item-enquire a /* matched by link — no CSS class needed; specificity mirrors the green link rule so white wins */ { background-color: #707B73 !important; color: #fff !important; fill: #fff !important; text-align: center !important; } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:focus { background-color: #5E6960 !important; color: #fff !important; } .elementor-nav-menu .menu-item-enquire, .elementor-nav-menu li:has(> a[href*='#register']) /* hidden above mobile — desktop/tablet use the Register button */ { } /* ---------- ROUND 4 — TEAM & ARCHITECT HEADING SLOTS (target each heading individually, every breakpoint) ---------- */ :is(#team, #team_internal) h4 /* team row labels, e.g. 'Developed by:' / 'Sales & marketing:' */ { font-size: 13px; margin: 15px auto 0; letter-spacing: 0.08em; } :is(#team, #team_internal) .e-con .e-con h3, :is(#team, #team_internal) .e-con .e-con h3 a /* the team URL links (now h3) */ { margin-bottom: 30px; } /* ---------- ROUND 4 — MISC MOBILE VALUES ---------- */ :is(#design, #interiors) > .e-con { margin-top: 5px; } #interiors .intro_text2 h2 { max-width: min(90%, 420px); } .body_text2 /* user's '.boody_text2' — typo corrected */ { margin-bottom: 30px !important; max-width: min(95%, 450px); margin-inline: auto; } #location > .e-con { margin-top: 0; } .elementor .e-6ad5061-7a4fd51 { max-width: 100%; } #footer_logo_container { padding: 0 0 10px; } #site-footer, .site-footer { display: none; background-color: transparent; } /* ---------- ROUND 5 — CAROUSEL ROWS FULL VIEWPORT WIDTH ON MOBILE ---------- */ :is(#design, #interiors, #location) > .e-con:has(.render_carousel), :is(#design, #interiors, #location) > .e-con:has(.lifestyle_carousel), :is(#design, #interiors, #location) > .e-con:has(.life_carousel) { width: 100% !important; max-width: 100% !important; } /* ---------- ROUND 6 — NAV FINE-TUNING & MISC ---------- */ .elementor .e-0fd00fa-bb736bb, .elementor .e-827b2fa-30e28d2 { margin: 0 auto; max-width: 100%; } .elementor-menu-toggle .e-font-icon-svg { position: absolute; right: 10px; top: -15px; } .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { top: 15px !important; } .architect_name { margin-bottom: 0; } .render_carousel .slick-dots, .lifestyle_carousel .slick-dots, .life_carousel .slick-dots /* mobile: shown BENEATH the image as a swipe cue */ { display: block !important; position: static !important; bottom: auto !important; margin: 12px auto 0 !important; text-align: center; line-height: 1; } /* ---------- ROUND 7 — TABLET PORTRAIT PASS ---------- */ .elementor .e-fb8dcee { } :is(#design, #video, #interiors, #location, #team, #register) /* anchor jumps land clear of the sticky nav */ { } :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img /* any capped-width image centres itself; .tl logos re-left-aligned by their own rule */ { } :is(#team, #team_internal) h2 { } #team #video_row2 .video2_container /* matches the architect quote's max-width at every size; double-ID beats the :is(#team, #team_internal) .e-con .e-con rule */ { padding-right: 0 !important; } #team #video_row2 .e-con-inner { padding-bottom: 0; } #team #video_row2 .premium-video-box-container { } /* ---------- ROUND 8 — FEATURES IMAGE-BOX CENTRING (TL) & WIDESCREEN RESETS ---------- */ #design_features .elementor-image-box-content h3 { } #design_features .elementor-image-box-content p { } :is(#design, #video, #interiors, #location, #team, #register) { } /* ---------- ROUND 9 — WIDESCREEN EXTRAS ---------- */ .elementor-232 .elementor-element.elementor-element-7c8d634 { } #design_features > .e-con, #design_features > .e-con-inner { } /* ---------- FINAL — SAFARI STICKY HEADER FIX ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; z-index: 9999 !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; opacity: 1 !important; } /* ---------- CLIENT ROUND — TEAM QUOTE WRAP & NEW CLASSES (stepped from the 1920 spec) ---------- */ #team.team_quote_wrap, .team_quote_wrap /* .team_quote_wrap IS #team — ID-level .elementor-kit-123 so this beats the #team padding reset. Texture matches register; padding steps down through the viewports */ { padding: 40px 0 40px !important; margin-bottom: 30px; background-color: #6E7A70; background-image: url(https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp); } .team_quote_wrap > .e-con-inner /* inner slot */ { } .team_quote_wrap .architect_quote h1, .team_quote_wrap .architect_quote h2 /* quote colour slot inside the textured wrap */ { } .team_quote_wrap .architect_name h5, .team_quote_wrap .architect_name h2 /* name slot inside the textured wrap */ { } /* ---------- FINAL — STICKY-STATE FIXES (Enquire colour + logo visibility after scroll) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-nav-menu--dropdown a[href*='#register'] { background-color: #707B73 !important; color: #fff !important; fill: #fff !important; text-align: center !important; } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo, body.page_scrolled #full_nav_logo /* visible only after scroll — driven by the JS body class, because Elementor's .elementor-sticky--effects never fires on mobile */ { display: block !important; visibility: visible !important; opacity: 1 !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo img, body.page_scrolled #full_nav_logo img { display: block !important; visibility: visible !important; opacity: 1 !important; width: 180px !important; height: 21px !important; /* explicit height beats the iOS auto-height collapse */ -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; } /* ---------- CLIENT ROUND 2 — NAV UNDERLINE OFF, #team_internal, HERO CLEARANCE, IMAGE-BOX ICONS ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main .elementor-item::after /* no underline on hover/active, any size */ { display: none !important; height: 0 !important; background: none !important; } .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main .elementor-item:focus { text-decoration: none !important; } div#team_internal /* the two-column developer/architect section (sibling of #team) */ { padding-left: 0 !important; padding-right: 0 !important; } #home .elementor-element-1dd3d47 /* hero text 40px from the bottom of the viewport */ { } #home /* its own 90px bottom padding was stacking on top of the above */ { } #design_features .elementor-image-box-img img { } /* ---------- SCROLL — native smooth scroll off; the custom anchor-scroll script (Elementor Custom Code) animates instead ---------- */ html { scroll-behavior: auto !important; } /* ---------- FINAL — KEYBOARD FOCUS VISIBILITY (accessibility) ---------- */ .elementor-nav-menu a:focus-visible, #register .form_wrap :focus-visible { outline: 2px solid #707B73; outline-offset: 2px; } /* ---------- CLIENT FINAL MARKUP — VIEWS TITLE, FEATURES TITLE, ICON BLOCKS, MOBILE DOTS ---------- */ #views_title h2.elementor-heading-title, #views_title .section_small_text h2, #views_title :is(h1, h2, h3, h4, p) /* 'views that can never be built out' — larger at every size; outranks the .section_small_text sizing */ { font-size: 14px; line-height: 125%; } #features_title_row h2 /* sized like the intro headings, white, sentence case; font family set on the widget in Elementor to match the intro heading */ { font-family: "Beaufort Pro Light", Sans-serif; color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; margin-inline: auto; font-size: 24px; line-height: 112%; max-width: min(100%, 470px); } #design_features .elementor-image-box-wrapper, #design_features .elementor-image-box-img, #design_features .elementor-image-box-content /* icons and text centred at every size */ { text-align: center; } #design_features .elementor-image-box-img img { margin: 0 auto 0; display: block; max-height: 48px; } #design_features .elementor-image-box-content h3 { text-align: center; font-size: 16px; } #design_features .elementor-image-box-content p { text-align: center; margin-inline: auto; font-size: 13px; line-height: 140%; } #design_features .e-con-inner:has(> .features_container), #design_features .e-con:has(> .features_container) /* mobile: icon blocks two per row */ { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px !important; align-items: start; } #design_features .features_container /* mobile: fill the grid cell */ { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i, .life_carousel .slick-dots li i /* mobile dot colours: muted, active in brand green */ { color: #C4CBC5 !important; font-size: 7px !important; } .render_carousel .slick-dots li.slick-active i, .lifestyle_carousel .slick-dots li.slick-active i, .life_carousel .slick-dots li.slick-active i { color: #707B73 !important; } #design_features .e-con-inner:has(> .features_container) > :not(.features_container) /* mobile: the title row spans both grid columns */ { grid-column: 1 / -1; } /* ---------- MOBILE HERO (#hero_mobile) — pre-wired; every rule is inert until the section exists ---------- */ #hero_mobile /* mobile-only section: full render + blue text band. Hidden above mobile as belt-and-braces to Elementor's responsive visibility */ { min-height: 0 !important; display: block; padding: 0 !important; width: 100% !important; max-width: 100% !important; background-color: #707B73 !important; overflow: hidden; } #hero_mobile > .e-con-inner, #hero_mobile .e-con-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; } #hero_mobile img /* the render at its natural aspect — nothing cropped */ { display: block; width: 100% !important; max-width: 100% !important; height: auto; border-radius: 0 !important; } #hero_mobile .hero_mobile_text /* blue band: fills the viewport height left beneath a 16:9 render (100vw x 9/16 = 56.25vw). For another aspect use 100vw x height/width */ { display: flex !important; flex-direction: column; align-items: start; justify-content: start; row-gap: 24px; padding: 32px 20px 42px !important; /* 32px top matches the gap above the video */ margin: 0 !important; width: 100% !important; max-width: 100% !important; background-color: #707B73 !important; } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p) { font-family: "Beaufort Pro Light", Sans-serif; font-size: 28px; line-height: 120%; max-width: min(90%, 320px); margin: 0 auto; text-align: center; color: #ffffff; } body:has(#hero_mobile) #home .home_intro_text /* desktop hero copy leaves the video hero once the mobile hero exists */ { display: none !important; } body:has(#hero_mobile) #home .elementor-element-1dd3d47 { padding-bottom: 0 !important; } /* ---------- MOBILE HERO — video, logo & text styling (client spec: #707B73 band, white logo + text) ---------- */ #hero_mobile .elementor-widget-video, #hero_mobile .elementor-video, #hero_mobile .hero_mobile_video /* 16:9 media block, flush, no controls reachable */ { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: hidden; } #hero_mobile .hero_mobile_video { position: relative; aspect-ratio: 16 / 9; background-color: #707B73; } #hero_mobile .hero_mobile_video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } #hero_mobile iframe, #hero_mobile video /* no hover/tap interaction reaches the player */ { pointer-events: none; border-radius: 0 !important; } #hero_mobile .hero_mobile_text svg /* logo */ { width: 100%; max-width: min(80%, 500px); height: auto; display: block; margin: 0 auto; color: #ffffff; } #hero_mobile .hero_mobile_text svg *[fill]:not([fill='none']) { fill: #ffffff !important; } #hero_mobile .hero_mobile_text svg *[stroke]:not([stroke='none']) { stroke: #ffffff !important; } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p), #hero_mobile .hero_mobile_text .elementor-heading-title { color: #ffffff !important; margin: 0 auto !important; } #home .elementor-background-slideshow /* desktop image gallery — mobile uses #hero_mobile instead */ { display: none !important; } /* ---------- MOBILE INTRO OVERLAY — #home fixed & faded out by the JS snippet (Elementor > Custom Code) ---------- */ body.hero_intro #home /* JS adds .hero_intro, so with JS off the hero stays in normal flow */ { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 100; transition: opacity 800ms ease; } body.hero_intro /* no scrolling behind the intro */ { overflow: hidden !important; } body.hero_intro_out #home { opacity: 0; pointer-events: none; } body.hero_intro_out { overflow: visible !important; } body.hero_intro_gone #home { display: none !important; } /* ---------- MOBILE INTRO — logo centred in the overlay ---------- */ body.hero_intro #home /* section carried 25% top padding / 0 bottom, pushing the logo low */ { padding-top: 0 !important; padding-bottom: 0 !important; justify-content: center !important; align-items: center !important; } body.hero_intro #home .elementor-element-d3d654d /* logo row: size to the artwork, not the leftover space */ { height: auto !important; flex: 0 0 auto !important; width: 100% !important; } body.hero_intro #home .elementor-element-d3d654d svg /* SVG was stretched to 677px against a 896x169 viewBox */ { height: auto !important; width: 78%; max-width: 420px; margin: 0 auto; display: block; } /* ---------- NAV LOGO — hidden until scrolled (mobile) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo /* hidden at the top of the page; revealed by body.page_scrolled above */ { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transition: opacity 300ms ease; } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo { pointer-events: auto; } /* ---------- MOBILE HERO — logo container (clears the nav) & equal spacing around the video ---------- */ .hero_mobile_logo_container /* top padding drops the logo below the hamburger; bottom padding = gap above the video */ { padding: 70px 20px 32px !important; /* 70px drops the logo clear of the hamburger; 32px = the gap above the video */ margin: 0 !important; width: 100% !important; max-width: 100% !important; display: flex; justify-content: center; align-items: center; } .hero_mobile_logo_container > .e-con-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .hero_mobile_logo_container .elementor-widget, .hero_mobile_logo_container .elementor-widget-container, .hero_mobile_logo_container div /* wrapper was fixed at 65px around a 44px logo — collapse it so the 32px gap is exact */ { height: auto !important; min-height: 0 !important; line-height: 0 !important; font-size: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } .hero_mobile_logo_container svg, .hero_mobile_logo_container img /* logo sized off its own artwork, not the container */ { width: 70%; max-width: 300px; height: auto !important; display: block; margin: 0 auto; color: #ffffff; } .hero_mobile_logo_container svg *[fill]:not([fill='none']) { fill: #ffffff !important; } .hero_mobile_logo_container svg *[stroke]:not([stroke='none']) { stroke: #ffffff !important; } #hero_mobile .elementor-widget-video, #hero_mobile .hero_mobile_video /* margins zeroed so the 32px above/below come only from the two neighbours */ { margin: 0 !important; } } /* ============================================================ 2. TABLET PORTRAIT — 768px to 1024px ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* ---------- STICKY NAV / HEADER ---------- */ .sticky-header-container { } #full_nav_logo { } #full_nav_logo img { } #top_logo { } #top_logo img { max-height: 46px; } #reg_btn { } #menu_register { } /* ---------- HOME / HERO ---------- */ #home { overflow-x: hidden !important; } #home .home_intro_text { max-width: 100%; } #home .elementor-element-1dd3d47, #home .elementor-element-6f96336 /* fixed 650px/630px Elementor containers — caused 35px mobile overflow */ { } #home svg { } #home .home_intro_text h1 { font-size: 28px; line-height: 135%; max-width: min(90%, 630px); margin: 0 auto 7vh; } #preload_video { } #video_container { } /* ---------- SHARED TEXT PATTERNS (design / interiors / location) ---------- */ :is(#design, #interiors, #location) .section_small_text h2 { font-size: 16px; } :is(#design, #interiors, #location) .intro_text h2 { font-size: 40px; line-height: 105%; max-width: min(100%, 560px); margin-inline: auto; } :is(#design, #interiors, #location) .body_text p { font-size: 17px; line-height: 142%; max-width: min(100%, 540px); margin-inline: auto; } #design .section_small_text1 h2 { } #design .intro_text1 h2 { } #design .body_text1 p { } #interiors .section_small_text2 h2 { } #interiors .intro_text2 h2 { } #interiors .body_text2 p { } #location .section_small_text3 h2 { } #location .intro_text3 h2 { } #location .body_text3 p { } /* ---------- DESIGN — RENDER CAROUSEL ---------- */ .render_carousel { } .render_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .render_carousel img { max-height: 400px; } .render_carousel .premium-carousel-template { margin-inline: 10px !important; } .render_carousel2 /* interiors variant */ { } .premium-carousel-thumb-info { background-color: transparent !important; opacity: 0; } .premium-carousel-thumb-title { color: #707B73; font-family: "Founders Grotesk Regular"; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; margin: 12px auto 10px; } .slick-current { } .slick-current .premium-carousel-thumb-info { opacity: 1; transition: all 0.5s ease; } /* ---------- DESIGN FEATURES ---------- */ #design_features { background-image: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp'); } #features_title_row h2 /* was 26.4px at every size — now scales */ { font-size: 24px; } #design_features .features_container { margin-bottom: 30px; } #design_features .features_container img { max-height: 70px; width: auto; } #design_features .features_container h3 /* was 22/28/17/23/29 — smoothed */ { font-size: 17px; } #design_features .features_container p { font-size: 14px; line-height: 138%; } /* ---------- VIDEO SECTIONS ---------- */ #video { } #video_row2 { } /* ---------- LOCATION ---------- */ #location h2 /* generic catch: 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { font-size: 18px; } #location p.p1, #location .animated-slow p /* lifestyle statement paragraphs */ { font-size: 19px; line-height: 128%; max-width: min(100%, 640px); } #double_aerial_row { } #double_aerial_row img { } #location img[id="31"] /* aerial_mobile */ { } #location img[id="1104"], #location img[id="1105"], #location img[id="1106"] /* full-width lifestyle images */ { } .lifestyle_carousel { } .lifestyle_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .lifestyle_carousel img { max-height: 480px; } .lifestyle_carousel .premium-carousel-template { margin-inline: 10px !important; } .life_carousel { } /* ---------- TEAM ---------- */ #team /* quote wrap carries the closing space now */ { padding-bottom: 0; } :is(#team, #team_internal) h2 { } :is(#team, #team_internal) .tl { } :is(#team, #team_internal) .tl img { height: 38px !important; width: auto; margin: 7px auto 0 0; display: block; } :is(#team, #team_internal) .tl1 img { } :is(#team, #team_internal) .tl2 img { } :is(#team, #team_internal) .tl3 img { } :is(#team, #team_internal) .tl4 img { } :is(#team, #team_internal) .tl5 img { } #team .architect_quote h1, #team .architect_quote h2 /* NOW AN H1 — h2 kept as fallback */ { font-size: 20px; line-height: 128%; max-width: min(100%, 580px); margin-inline: auto; } #team .architect_name h5, #team .architect_name h2 /* NOW AN H5 — h2 kept as fallback */ { font-size: 13px; } /* ---------- REGISTER / FOOTER ---------- */ #register { } #register .stamp_row { } #register .stamp_row img { max-height: 72px; margin: 0 auto 20px; } #register .footer_large_text h2 /* was 30px at every size */ { font-size: 24px; line-height: 126%; max-width: min(100%, 530px); margin-inline: auto; } #register .contact_small_text h2 { font-size: 14px; } #register .contact_phone_number h2 /* was 41px even on phones */ { font-size: 30px; } #register .form_row { } #register .form_wrap { max-width: 500px; margin: 0 auto; } #footer_logo_container /* fixed 500px wide — overflowed mobile viewport */ { } #register .fl { } #register .fl img /* leave empty: fl1–fl3 already sized in Elementor */ { } #register .fl1 img { } #register .fl2 img { } #register .fl3 img { } #register .fl4 img /* was 45-49px tall vs siblings at 22-32px */ { max-height: 30px; width: auto; } #footer_text_small { font-size: 12px; } /* ---------- SITE FOOTER (Hello theme) ---------- */ #site-footer { } #site-footer .footer-inner { } #site-footer .custom-logo { max-width: 140px; } #site-footer p { font-size: 13px; } #site-footer .copyright p { font-size: 12px; } /* ---------- REFINEMENTS — SECTION SHELLS & GUTTERS ---------- */ #home .elementor-element-1dd3d47 /* hero content block — clearance below h1 for mobile browser chrome */ { padding-bottom: 56px !important; } :is(#design, #interiors) /* section rhythm: gap between stacked rows + top/bottom padding */ { padding-top: 100px !important; /* clears the overlaying nav */ padding-bottom: 0 !important; row-gap: 18px !important; } #location { row-gap: 18px !important; /* matches #design / #interiors */ padding-top: 100px !important; padding-bottom: 56px !important; } :is(#design, #interiors) > .e-con /* symmetric 20px gutters (rows had 24/39 + 40/0 asymmetry) */ { } #location > .e-con { width: 100% !important; max-width: 820px !important; margin-inline: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; } #location .e-con .e-con /* nested rows carried pl:40/pr:0 — de-centred everything */ { padding-left: 0 !important; padding-right: 0 !important; } #location h2 /* centre 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { text-align: center; } #location .elementor-widget-image img /* width:100% keeps all three aerials identical */ { display: block; margin-inline: auto; } /* ---------- REFINEMENTS — TEXT ROW SPACING ---------- */ .section_small_text h2 { } .intro_text { margin-bottom: 0 !important; } .body_text { } .e-con:has(> .section_small_text) { margin-bottom: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .intro_text) { margin-top: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .body_text) /* row wrapper had 40px bottom margin */ { margin-bottom: 0 !important; } /* ---------- REFINEMENTS — CAROUSELS (full-bleed on mobile, tightened margins everywhere) ---------- */ .render_carousel, .lifestyle_carousel, .life_carousel /* mobile: fills its row (100%); tablet+: full browser bleed */ { flex-shrink: 0 !important; width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0 !important; margin-right: 0 !important; } .render_carousel .slick-list, .lifestyle_carousel .slick-list { } .e-con:has(> .render_carousel), .e-con:has(> .lifestyle_carousel) /* carousel wrapper column had 80px margins */ { margin-top: 20px !important; margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .e-con:has(> .e-con > .render_carousel), .e-con:has(> .e-con > .lifestyle_carousel) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .e-con:has(.render_carousel), .e-con:has(.lifestyle_carousel) { } /* ---------- REFINEMENTS — DOUBLE AERIAL ROW ---------- */ #location #double_aerial_row /* stacked on mobile; width matches the single aerial rows */ { width: 100% !important; max-width: 100% !important; column-gap: 12px; padding: 0 0; } #location #double_aerial_row > div.e-con { } #location #double_aerial_row img { } /* ---------- REFINEMENTS — DESIGN FEATURES GRID ---------- */ #design_features { row-gap: 28px !important; } #design_features .e-con, #design_features .e-con-inner /* feature-block gap lives on the .e-con-inner (was 76px) */ { row-gap: 40px !important; } #design_features .features_container { margin-bottom: 0; padding-top: 0 !important; } #features_title_row h2 { text-align: center; margin-bottom: 0; } #features_title_row { margin-bottom: 10px !important; } /* ---------- REFINEMENTS — TEAM SECTION ---------- */ :is(#team, #team_internal) /* section itself was 405px wide with 40px side padding on mobile */ { width: 100% !important; max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; } :is(#team, #team_internal) > .e-con-inner { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-top: 0 !important; } :is(#team, #team_internal) > .e-con-inner > .e-con /* two-column team rows — stepped max-widths */ { width: 100% !important; max-width: 760px !important; margin-inline: auto !important; padding-left: 0 !important; padding-right: 0 !important; } :is(#team, #team_internal) .e-con .e-con { padding-left: 0 !important; padding-right: 20px !important; width: 100% !important; max-width: 100% !important; } :is(#team, #team_internal) .elementor-widget-image { width: 100% !important; max-width: 100% !important; } :is(#team, #team_internal) img.size-large /* max-width caps the photos; tune per taste */ { width: 100% !important; max-width: 100% !important; } .elementor-element-a3efed4 h2 /* 'Our Team' heading */ { text-align: center; } /* ---------- REFINEMENTS — REGISTER SECTION ---------- */ #register /* clearance above the stamp for sticky nav / anchor jumps */ { padding-top: 80px !important; } #register .contact_small_text /* space above 'More Information' */ { margin-top: 36px; } /* ---------- REFINEMENTS — MOBILE BORDER-RADIUS RESET (images, carousels & video only; Register pill button keeps its radius) ---------- */ :is(#video, #video_row2) .premium-video-box-container, :is(#video, #video_row2) .premium-video-box-video-container, :is(#video, #video_row2) video, :is(#video, #video_row2) iframe, :is(#video, #video_row2) img, :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img, .render_carousel img, .lifestyle_carousel img, .premium-carousel-inner-img { border-radius: 0 !important; } /* ---------- ROUND 2 — DESIGN FEATURES CENTRED AT ALL MOBILE WIDTHS ---------- */ #design_features /* section had a fixed-width, left-anchored content column */ { } #design_features > .e-con, #design_features > .e-con-inner { } #design_features .features_container { } #design_features .features_container p /* had a 420px max-width but no auto margins — sat left */ { } #design_features .features_container h3 { } #design_features .features_container img { } /* ---------- ROUND 2 — CAROUSEL DOTS (scale down as devices shrink) ---------- */ .render_carousel .slick-dots li, .lifestyle_carousel .slick-dots li { margin: 0 4px !important; width: auto !important; height: auto !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i /* dots are FontAwesome icons */ { font-size: 7px !important; } /* ---------- ROUND 2 — FULL-BLEED SUPPORT & TEXT CENTRING ---------- */ :is(#design, #interiors, #location) /* lets 100vw carousels bleed without a horizontal scrollbar */ { overflow-x: clip; } #location p.p1, #location .animated-slow p /* centred under its image on mobile/tablet only; desktop sizes are left-aligned below */ { margin-inline: auto !important; } /* ---------- ROUND 2 — TEAM SLOTS (heading margin, image margin, bio text width) ---------- */ :is(#team, #team_internal) .elementor-element-a3efed4 h2 /* margin under 'Our Team' */ { } :is(#team, #team_internal) .elementor-widget-image /* margin slot for the team photos */ { } :is(#team, #team_internal) .e-con .e-con h2 /* max-width slot for the team text */ { } /* ---------- ROUND 2 — REGISTER SPACING ---------- */ #register .contact_small_text /* 5px under 'More Information' */ { margin-bottom: 5px !important; } #register .contact_small_text h2 { margin-bottom: 0; } #register .contact_phone_number /* 25px under the phone number */ { margin-bottom: 25px !important; } #register .contact_phone_number h2 { margin-bottom: 0; } #register /* bottom clearance so the disclaimer never touches the viewport edge */ { padding-bottom: 80px !important; } /* ---------- ROUND 3 — WATERFRONT PARK BLOCK (#park_img / .park_img_row) ---------- */ .park_img_row /* had 40px top / 120px bottom margins */ { margin-top: 20px !important; margin-bottom: 0 !important; } .park_img_row > .e-con-inner, .park_img_row .e-con-inner /* Elementor caps this at 66% — unlocked so the #park_img caps below govern */ { width: 100% !important; max-width: 100% !important; } #park_img /* masterplan map — proportional cap at every size */ { max-width: min(90%, 720px) !important; margin: 0 auto 60px; } /* ---------- ROUND 3 — NAV (visible on mobile & tablet) ---------- */ #full_nav_logo /* at tablet the full logo left only 6px before the first menu link */ { max-width: 150px; } #full_nav_logo svg, #full_nav_logo img { max-width: 100%; height: auto; } /* ---------- ROUND 4 — MOBILE NAVIGATION ---------- */ #top_logo img { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-menu-toggle, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus, .elementor-menu-toggle /* white over the hero; !important because post-270.css loads after this file */ { } .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg, .elementor-menu-toggle svg path, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover svg, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus svg { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:hover, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:focus /* brand green once the sticky header kicks in */ { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg path { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects.sticky-header-container { } #full_nav_logo img, #full_nav_logo svg { } .elementor-nav-menu--dropdown.elementor-nav-menu__container { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a /* was red Inter; now matches the site */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a.elementor-item-active { } .elementor-nav-menu--dropdown li { } /* ---------- ROUND 4 — 'ENQUIRE NOW' MENU ITEM (add in WP menu with CSS class 'menu-item-enquire'; styles below activate automatically) ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown .menu-item-enquire a /* matched by link — no CSS class needed; specificity mirrors the green link rule so white wins */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:focus { } .elementor-nav-menu .menu-item-enquire, .elementor-nav-menu li:has(> a[href*='#register']) /* hidden above mobile — desktop/tablet use the Register button */ { display: none; } /* ---------- ROUND 4 — TEAM & ARCHITECT HEADING SLOTS (target each heading individually, every breakpoint) ---------- */ :is(#team, #team_internal) h4 /* team row labels, e.g. 'Developed by:' / 'Sales & marketing:' */ { font-size: 14px; margin: 18px auto 0; letter-spacing: 0.08em; } :is(#team, #team_internal) .e-con .e-con h3, :is(#team, #team_internal) .e-con .e-con h3 a /* the team URL links (now h3) */ { } /* ---------- ROUND 4 — MISC MOBILE VALUES ---------- */ :is(#design, #interiors) > .e-con { margin-top: 0; } #interiors .intro_text2 h2 { margin-bottom: 20px; } .body_text2 /* user's '.boody_text2' — typo corrected */ { margin-bottom: 40px; } #location > .e-con { } .elementor .e-6ad5061-7a4fd51 { } #footer_logo_container { } #site-footer, .site-footer { display: none; } /* ---------- ROUND 5 — CAROUSEL ROWS FULL VIEWPORT WIDTH ON MOBILE ---------- */ :is(#design, #interiors, #location) > .e-con:has(.render_carousel), :is(#design, #interiors, #location) > .e-con:has(.lifestyle_carousel), :is(#design, #interiors, #location) > .e-con:has(.life_carousel) { } /* ---------- ROUND 6 — NAV FINE-TUNING & MISC ---------- */ .elementor .e-0fd00fa-bb736bb, .elementor .e-827b2fa-30e28d2 { } .elementor-menu-toggle .e-font-icon-svg { } .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { } .architect_name { } .render_carousel .slick-dots, .lifestyle_carousel .slick-dots, .life_carousel .slick-dots /* dots hidden on mobile & tablet */ { display: none !important; } /* ---------- ROUND 7 — TABLET PORTRAIT PASS ---------- */ .elementor .e-fb8dcee { left: 15px; } :is(#design, #video, #interiors, #location, #team, #register) /* anchor jumps land clear of the sticky nav */ { scroll-margin-top: 90px; } :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img /* any capped-width image centres itself; .tl logos re-left-aligned by their own rule */ { margin-inline: auto; } :is(#team, #team_internal) h2 { text-align: left; } #team #video_row2 .video2_container /* matches the architect quote's max-width at every size; double-ID beats the :is(#team, #team_internal) .e-con .e-con rule */ { max-width: min(100%, 690px) !important; margin-inline: auto !important; padding-right: 0 !important; } #team #video_row2 .e-con-inner { width: 100% !important; max-width: 100% !important; } #team #video_row2 .premium-video-box-container { width: 100% !important; max-width: 100% !important; } /* ---------- ROUND 8 — FEATURES IMAGE-BOX CENTRING (TL) & WIDESCREEN RESETS ---------- */ #design_features .elementor-image-box-content h3 { text-align: center; } #design_features .elementor-image-box-content p { text-align: center; } :is(#design, #video, #interiors, #location, #team, #register) { } /* ---------- ROUND 9 — WIDESCREEN EXTRAS ---------- */ .elementor-232 .elementor-element.elementor-element-7c8d634 { } #design_features > .e-con, #design_features > .e-con-inner { max-width: min(100%, 600px); } /* ---------- FINAL — SAFARI STICKY HEADER FIX ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; z-index: 9999 !important; -webkit-transform: translateZ(0) !important; transform: translateZ(0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; visibility: visible !important; opacity: 1 !important; } /* ---------- CLIENT ROUND — TEAM QUOTE WRAP & NEW CLASSES (stepped from the 1920 spec) ---------- */ #team.team_quote_wrap, .team_quote_wrap /* .team_quote_wrap IS #team — ID-level .elementor-kit-123 so this beats the #team padding reset. Texture matches register; padding steps down through the viewports */ { padding: 80px 0 60px !important; margin-bottom: 40px; background-color: #6E7A70; background-image: url(https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp); } .team_quote_wrap > .e-con-inner /* inner slot */ { } .team_quote_wrap .architect_quote h1, .team_quote_wrap .architect_quote h2 /* quote colour slot inside the textured wrap */ { } .team_quote_wrap .architect_name h5, .team_quote_wrap .architect_name h2 /* name slot inside the textured wrap */ { } /* ---------- FINAL — STICKY-STATE FIXES (Enquire colour + logo visibility after scroll) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-nav-menu--dropdown a[href*='#register'] { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo img, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo img { } /* ---------- CLIENT ROUND 2 — NAV UNDERLINE OFF, #team_internal, HERO CLEARANCE, IMAGE-BOX ICONS ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main .elementor-item::after /* no underline on hover/active, any size */ { display: none !important; height: 0 !important; background: none !important; } .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main .elementor-item:focus { text-decoration: none !important; } div#team_internal /* the two-column developer/architect section (sibling of #team) */ { padding-bottom: 50px; } #home .elementor-element-1dd3d47 /* hero text 40px from the bottom of the viewport */ { } #home /* its own 90px bottom padding was stacking on top of the above */ { } #design_features .elementor-image-box-img img { } /* ---------- SCROLL — native smooth scroll off; the custom anchor-scroll script (Elementor Custom Code) animates instead ---------- */ html { scroll-behavior: auto !important; } /* ---------- FINAL — KEYBOARD FOCUS VISIBILITY (accessibility) ---------- */ .elementor-nav-menu a:focus-visible, #register .form_wrap :focus-visible { outline: 2px solid #707B73; outline-offset: 2px; } /* ---------- CLIENT FINAL MARKUP — VIEWS TITLE, FEATURES TITLE, ICON BLOCKS, MOBILE DOTS ---------- */ #views_title h2.elementor-heading-title, #views_title .section_small_text h2, #views_title :is(h1, h2, h3, h4, p) /* 'views that can never be built out' — larger at every size; outranks the .section_small_text sizing */ { font-size: 20px; line-height: 122%; } #features_title_row h2 /* sized like the intro headings, white, sentence case; font family set on the widget in Elementor to match the intro heading */ { font-family: "Beaufort Pro Light", Sans-serif; color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; margin-inline: auto; font-size: 40px; line-height: 105%; max-width: min(100%, 560px); } #design_features .elementor-image-box-wrapper, #design_features .elementor-image-box-img, #design_features .elementor-image-box-content /* icons and text centred at every size */ { text-align: center; } #design_features .elementor-image-box-img img { margin: 0 auto 0; display: block; } #design_features .elementor-image-box-content h3 { text-align: center; font-size: 17px; } #design_features .elementor-image-box-content p { text-align: center; margin-inline: auto; } #design_features .e-con-inner:has(> .features_container), #design_features .e-con:has(> .features_container) /* mobile: icon blocks two per row */ { } #design_features .features_container /* mobile: fill the grid cell */ { } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i, .life_carousel .slick-dots li i /* mobile dot colours: muted, active in brand green */ { } .render_carousel .slick-dots li.slick-active i, .lifestyle_carousel .slick-dots li.slick-active i, .life_carousel .slick-dots li.slick-active i { } #design_features .e-con-inner:has(> .features_container) > :not(.features_container) /* mobile: the title row spans both grid columns */ { } /* ---------- MOBILE HERO (#hero_mobile) — pre-wired; every rule is inert until the section exists ---------- */ #hero_mobile /* mobile-only section: full render + blue text band. Hidden above mobile as belt-and-braces to Elementor's responsive visibility */ { min-height: 0 !important; display: none !important; } #hero_mobile > .e-con-inner, #hero_mobile .e-con-inner { } #hero_mobile img /* the render at its natural aspect — nothing cropped */ { } #hero_mobile .hero_mobile_text /* blue band: fills the viewport height left beneath a 16:9 render (100vw x 9/16 = 56.25vw). For another aspect use 100vw x height/width */ { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p) { } body:has(#hero_mobile) #home .home_intro_text /* desktop hero copy leaves the video hero once the mobile hero exists */ { } body:has(#hero_mobile) #home .elementor-element-1dd3d47 { } /* ---------- MOBILE HERO — video, logo & text styling (client spec: #707B73 band, white logo + text) ---------- */ #hero_mobile .elementor-widget-video, #hero_mobile .elementor-video, #hero_mobile .hero_mobile_video /* 16:9 media block, flush, no controls reachable */ { } #hero_mobile .hero_mobile_video { } #hero_mobile .hero_mobile_video iframe { } #hero_mobile iframe, #hero_mobile video /* no hover/tap interaction reaches the player */ { } #hero_mobile .hero_mobile_text svg /* logo */ { } #hero_mobile .hero_mobile_text svg *[fill]:not([fill='none']) { } #hero_mobile .hero_mobile_text svg *[stroke]:not([stroke='none']) { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p), #hero_mobile .hero_mobile_text .elementor-heading-title { } #home .elementor-background-slideshow /* desktop image gallery — mobile uses #hero_mobile instead */ { } /* ---------- MOBILE INTRO OVERLAY — #home fixed & faded out by the JS snippet (Elementor > Custom Code) ---------- */ body.hero_intro #home /* JS adds .hero_intro, so with JS off the hero stays in normal flow */ { } body.hero_intro /* no scrolling behind the intro */ { } body.hero_intro_out #home { } body.hero_intro_out { } body.hero_intro_gone #home { } /* ---------- MOBILE INTRO — logo centred in the overlay ---------- */ body.hero_intro #home /* section carried 25% top padding / 0 bottom, pushing the logo low */ { } body.hero_intro #home .elementor-element-d3d654d /* logo row: size to the artwork, not the leftover space */ { } body.hero_intro #home .elementor-element-d3d654d svg /* SVG was stretched to 677px against a 896x169 viewBox */ { } /* ---------- NAV LOGO — hidden until scrolled (mobile) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo /* hidden at the top of the page; revealed by body.page_scrolled above */ { } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo { } /* ---------- MOBILE HERO — logo container (clears the nav) & equal spacing around the video ---------- */ .hero_mobile_logo_container /* top padding drops the logo below the hamburger; bottom padding = gap above the video */ { } .hero_mobile_logo_container > .e-con-inner { } .hero_mobile_logo_container .elementor-widget, .hero_mobile_logo_container .elementor-widget-container { } .hero_mobile_logo_container svg, .hero_mobile_logo_container img /* logo sized off its own artwork, not the container */ { } .hero_mobile_logo_container svg *[fill]:not([fill='none']) { } .hero_mobile_logo_container svg *[stroke]:not([stroke='none']) { } #hero_mobile .elementor-widget-video, #hero_mobile .hero_mobile_video /* margins zeroed so the 32px above/below come only from the two neighbours */ { } } /* ============================================================ 3. TABLET LANDSCAPE — 1025px to 1440px ============================================================ */ @media (min-width: 1025px) and (max-width: 1440px) { /* ---------- STICKY NAV / HEADER ---------- */ .sticky-header-container { } #full_nav_logo { } #full_nav_logo img { } #top_logo { } #top_logo img { max-height: 50px; } #reg_btn { } #menu_register { } /* ---------- HOME / HERO ---------- */ #home { overflow-x: hidden !important; } #home .home_intro_text { } #home .elementor-element-1dd3d47, #home .elementor-element-6f96336 /* fixed 650px/630px Elementor containers — caused 35px mobile overflow */ { } #home svg { } #home .home_intro_text h1 { font-size: 31px; line-height: 135%; max-width: min(90%, 630px); margin: 0 auto 0; } #preload_video { } #video_container { } /* ---------- SHARED TEXT PATTERNS (design / interiors / location) ---------- */ :is(#design, #interiors, #location) .section_small_text h2 { font-size: 17px; } :is(#design, #interiors, #location) .intro_text h2 { font-size: 50px; line-height: 102%; max-width: min(100%, 760px); margin-inline: auto; } :is(#design, #interiors, #location) .body_text p { font-size: 18px; line-height: 140%; max-width: min(100%, 660px); margin-inline: auto; } #design .section_small_text1 h2 { } #design .intro_text1 h2 { } #design .body_text1 p { } #interiors .section_small_text2 h2 { } #interiors .intro_text2 h2 { } #interiors .body_text2 p { } #location .section_small_text3 h2 { } #location .intro_text3 h2 { } #location .body_text3 p { } /* ---------- DESIGN — RENDER CAROUSEL ---------- */ .render_carousel { } .render_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .render_carousel img { max-height: 500px; border-radius: 10px 10px 10px 10px !important; } .render_carousel .premium-carousel-template { margin-inline: 15px !important; } .render_carousel2 /* interiors variant */ { } .premium-carousel-thumb-info { -webkit-transition: opacity .25s ease-out; transition: opacity .25s ease-out; background-color: transparent !important; opacity: 0; } .premium-carousel-thumb-title { color: #707B73; font-family: "Founders Grotesk Regular"; text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; margin: 15px auto 10px; } .slick-current { } .slick-current .premium-carousel-thumb-info { opacity: 1; transition: all 0.5s ease; } /* ---------- DESIGN FEATURES ---------- */ #design_features { background-image: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp'); } #features_title_row h2 /* was 26.4px at every size — now scales */ { font-size: 26px; } #design_features .features_container { } #design_features .features_container img { max-height: 70px; width: auto; } #design_features .features_container h3 /* was 22/28/17/23/29 — smoothed */ { font-size: 17px; } #design_features .features_container p { font-size: 14px; line-height: 135%; } /* ---------- VIDEO SECTIONS ---------- */ #video { } #video_row2 { } /* ---------- LOCATION ---------- */ #location h2 /* generic catch: 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { font-size: 22px; } #location p.p1, #location .animated-slow p /* lifestyle statement paragraphs */ { font-size: 20px; line-height: 125%; display: block; margin: 0 auto 0 0; max-width: 550px; } #double_aerial_row { } #double_aerial_row img { } #location img[id="31"] /* aerial_mobile */ { } #location img[id="1104"], #location img[id="1105"], #location img[id="1106"] /* full-width lifestyle images */ { } .lifestyle_carousel { } .lifestyle_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .lifestyle_carousel img { max-height: 400px; } .lifestyle_carousel .premium-carousel-template { margin-inline: 15px !important; } .life_carousel { } /* ---------- TEAM ---------- */ #team /* quote wrap carries the closing space now */ { padding-bottom: 0; } :is(#team, #team_internal) h2 { } :is(#team, #team_internal) .tl { } :is(#team, #team_internal) .tl img { height: 40px !important; width: auto; margin: 0; float: left; } :is(#team, #team_internal) .tl1 img { } :is(#team, #team_internal) .tl2 img { } :is(#team, #team_internal) .tl3 img { } :is(#team, #team_internal) .tl4 img { } :is(#team, #team_internal) .tl5 img { } #team .architect_quote h1, #team .architect_quote h2 /* NOW AN H1 — h2 kept as fallback */ { font-size: 23px; line-height: 128%; max-width: min(100%, 700px); margin-inline: auto; } #team .architect_name h5, #team .architect_name h2 /* NOW AN H5 — h2 kept as fallback */ { font-size: 13px; } /* ---------- REGISTER / FOOTER ---------- */ #register { } #register .stamp_row { } #register .stamp_row img { max-height: 80px; margin: 0 auto 20px; } #register .footer_large_text h2 /* was 30px at every size */ { font-size: 26px; line-height: 124%; max-width: min(100%, 600px); margin-inline: auto; } #register .contact_small_text h2 { font-size: 15px; } #register .contact_phone_number h2 /* was 41px even on phones */ { font-size: 34px; } #register .form_row { } #register .form_wrap { max-width: 600px; margin: 0 auto; } #footer_logo_container /* fixed 500px wide — overflowed mobile viewport */ { } #register .fl { } #register .fl img /* leave empty: fl1–fl3 already sized in Elementor */ { } #register .fl1 img { } #register .fl2 img { } #register .fl3 img { } #register .fl4 img /* was 45-49px tall vs siblings at 22-32px */ { max-height: 32px; width: auto; } #footer_text_small { font-size: 12px; } /* ---------- SITE FOOTER (Hello theme) ---------- */ #site-footer { } #site-footer .footer-inner { } #site-footer .custom-logo { max-width: 160px; } #site-footer p { font-size: 13px; } #site-footer .copyright p { font-size: 12px; } /* ---------- REFINEMENTS — SECTION SHELLS & GUTTERS ---------- */ #home .elementor-element-1dd3d47 /* hero content block — clearance below h1 for mobile browser chrome */ { } :is(#design, #interiors) /* section rhythm: gap between stacked rows + top/bottom padding */ { padding-bottom: 0 !important; } #location { padding-bottom: 0 !important; } :is(#design, #interiors) > .e-con /* symmetric 20px gutters (rows had 24/39 + 40/0 asymmetry) */ { } #location > .e-con { } #location .e-con .e-con /* nested rows carried pl:40/pr:0 — de-centred everything */ { } #location h2 /* centre 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { } #location .elementor-widget-image img /* width:100% keeps all three aerials identical */ { } /* ---------- REFINEMENTS — TEXT ROW SPACING ---------- */ .section_small_text h2 { } .intro_text { } .body_text { } .e-con:has(> .section_small_text) { } .e-con:has(> .intro_text) { } .e-con:has(> .body_text) /* row wrapper had 40px bottom margin */ { margin-bottom: 28px !important; } /* ---------- REFINEMENTS — CAROUSELS (full-bleed on mobile, tightened margins everywhere) ---------- */ .render_carousel, .lifestyle_carousel, .life_carousel /* mobile: fills its row (100%); tablet+: full browser bleed */ { flex-shrink: 0 !important; width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0 !important; margin-right: 0 !important; } .render_carousel .slick-list, .lifestyle_carousel .slick-list { } .e-con:has(> .render_carousel), .e-con:has(> .lifestyle_carousel) /* carousel wrapper column had 80px margins */ { margin-top: 56px !important; margin-bottom: 56px !important; } .e-con:has(> .e-con > .render_carousel), .e-con:has(> .e-con > .lifestyle_carousel) { } .e-con:has(.render_carousel), .e-con:has(.lifestyle_carousel) { } /* ---------- REFINEMENTS — DOUBLE AERIAL ROW ---------- */ #location #double_aerial_row /* stacked on mobile; width matches the single aerial rows */ { } #location #double_aerial_row > div.e-con { } #location #double_aerial_row img { } /* ---------- REFINEMENTS — DESIGN FEATURES GRID ---------- */ #design_features { row-gap: 40px !important; } #design_features .e-con, #design_features .e-con-inner /* feature-block gap lives on the .e-con-inner (was 76px) */ { row-gap: 56px !important; } #design_features .features_container { } #features_title_row h2 { } #features_title_row { } /* ---------- REFINEMENTS — TEAM SECTION ---------- */ :is(#team, #team_internal) /* section itself was 405px wide with 40px side padding on mobile */ { } :is(#team, #team_internal) > .e-con-inner { } :is(#team, #team_internal) > .e-con-inner > .e-con /* two-column team rows — stepped max-widths */ { width: 100% !important; max-width: 1080px !important; margin-inline: auto !important; padding-left: 0 !important; padding-right: 0 !important; } :is(#team, #team_internal) .e-con .e-con { } :is(#team, #team_internal) .elementor-widget-image { } :is(#team, #team_internal) img.size-large /* max-width caps the photos; tune per taste */ { } .elementor-element-a3efed4 h2 /* 'Our Team' heading */ { } /* ---------- REFINEMENTS — REGISTER SECTION ---------- */ #register /* clearance above the stamp for sticky nav / anchor jumps */ { padding-top: 90px !important; } #register .contact_small_text /* space above 'More Information' */ { margin-top: 40px; } /* ---------- REFINEMENTS — MOBILE BORDER-RADIUS RESET (images, carousels & video only; Register pill button keeps its radius) ---------- */ :is(#video, #video_row2) .premium-video-box-container, :is(#video, #video_row2) .premium-video-box-video-container, :is(#video, #video_row2) video, :is(#video, #video_row2) iframe, :is(#video, #video_row2) img, :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img, .render_carousel img, .lifestyle_carousel img, .premium-carousel-inner-img { } /* ---------- ROUND 2 — DESIGN FEATURES CENTRED AT ALL MOBILE WIDTHS ---------- */ #design_features /* section had a fixed-width, left-anchored content column */ { } #design_features > .e-con, #design_features > .e-con-inner { } #design_features .features_container { } #design_features .features_container p /* had a 420px max-width but no auto margins — sat left */ { } #design_features .features_container h3 { } #design_features .features_container img { } /* ---------- ROUND 2 — CAROUSEL DOTS (scale down as devices shrink) ---------- */ .render_carousel .slick-dots li, .lifestyle_carousel .slick-dots li { margin: 0 4px !important; width: auto !important; height: auto !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i /* dots are FontAwesome icons */ { font-size: 8px !important; } /* ---------- ROUND 2 — FULL-BLEED SUPPORT & TEXT CENTRING ---------- */ :is(#design, #interiors, #location) /* lets 100vw carousels bleed without a horizontal scrollbar */ { overflow-x: clip; } #location p.p1, #location .animated-slow p /* centred under its image on mobile/tablet only; desktop sizes are left-aligned below */ { } /* ---------- ROUND 2 — TEAM SLOTS (heading margin, image margin, bio text width) ---------- */ :is(#team, #team_internal) .elementor-element-a3efed4 h2 /* margin under 'Our Team' */ { } :is(#team, #team_internal) .elementor-widget-image /* margin slot for the team photos */ { } :is(#team, #team_internal) .e-con .e-con h2 /* max-width slot for the team text */ { } /* ---------- ROUND 2 — REGISTER SPACING ---------- */ #register .contact_small_text /* 5px under 'More Information' */ { margin-bottom: 5px !important; } #register .contact_small_text h2 { margin-bottom: 0; } #register .contact_phone_number /* 25px under the phone number */ { margin-bottom: 25px !important; } #register .contact_phone_number h2 { margin-bottom: 0; } #register /* bottom clearance so the disclaimer never touches the viewport edge */ { padding-bottom: 80px !important; } /* ---------- ROUND 3 — WATERFRONT PARK BLOCK (#park_img / .park_img_row) ---------- */ .park_img_row /* had 40px top / 120px bottom margins */ { margin-top: 32px !important; margin-bottom: 24px !important; } .park_img_row > .e-con-inner, .park_img_row .e-con-inner /* Elementor caps this at 66% — unlocked so the #park_img caps below govern */ { width: 100% !important; max-width: 100% !important; } #park_img /* masterplan map — proportional cap at every size */ { max-width: min(88%, 950px) !important; margin: 0 auto 50px; } /* ---------- ROUND 3 — NAV (visible on mobile & tablet) ---------- */ #full_nav_logo /* at tablet the full logo left only 6px before the first menu link */ { } #full_nav_logo svg, #full_nav_logo img { } /* ---------- ROUND 4 — MOBILE NAVIGATION ---------- */ #top_logo img { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-menu-toggle, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus, .elementor-menu-toggle /* white over the hero; !important because post-270.css loads after this file */ { } .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg, .elementor-menu-toggle svg path, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover svg, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus svg { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:hover, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:focus /* brand green once the sticky header kicks in */ { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg path { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects.sticky-header-container { } #full_nav_logo img, #full_nav_logo svg { } .elementor-nav-menu--dropdown.elementor-nav-menu__container { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a /* was red Inter; now matches the site */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a.elementor-item-active { } .elementor-nav-menu--dropdown li { } /* ---------- ROUND 4 — 'ENQUIRE NOW' MENU ITEM (add in WP menu with CSS class 'menu-item-enquire'; styles below activate automatically) ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown .menu-item-enquire a /* matched by link — no CSS class needed; specificity mirrors the green link rule so white wins */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:focus { } .elementor-nav-menu .menu-item-enquire, .elementor-nav-menu li:has(> a[href*='#register']) /* hidden above mobile — desktop/tablet use the Register button */ { display: none; } /* ---------- ROUND 4 — TEAM & ARCHITECT HEADING SLOTS (target each heading individually, every breakpoint) ---------- */ :is(#team, #team_internal) h4 /* team row labels, e.g. 'Developed by:' / 'Sales & marketing:' */ { font-size: 14px; margin: 20px auto 0; letter-spacing: 0.08em; } :is(#team, #team_internal) .e-con .e-con h3, :is(#team, #team_internal) .e-con .e-con h3 a /* the team URL links (now h3) */ { } /* ---------- ROUND 4 — MISC MOBILE VALUES ---------- */ :is(#design, #interiors) > .e-con { } #interiors .intro_text2 h2 { } .body_text2 /* user's '.boody_text2' — typo corrected */ { } #location > .e-con { } .elementor .e-6ad5061-7a4fd51 { } #footer_logo_container { } #site-footer, .site-footer { display: none; } /* ---------- ROUND 5 — CAROUSEL ROWS FULL VIEWPORT WIDTH ON MOBILE ---------- */ :is(#design, #interiors, #location) > .e-con:has(.render_carousel), :is(#design, #interiors, #location) > .e-con:has(.lifestyle_carousel), :is(#design, #interiors, #location) > .e-con:has(.life_carousel) { } /* ---------- ROUND 6 — NAV FINE-TUNING & MISC ---------- */ .elementor .e-0fd00fa-bb736bb, .elementor .e-827b2fa-30e28d2 { } .elementor-menu-toggle .e-font-icon-svg { } .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { } .architect_name { } .render_carousel .slick-dots, .lifestyle_carousel .slick-dots, .life_carousel .slick-dots /* dots hidden on mobile & tablet */ { } /* ---------- ROUND 7 — TABLET PORTRAIT PASS ---------- */ .elementor .e-fb8dcee { } :is(#design, #video, #interiors, #location, #team, #register) /* anchor jumps land clear of the sticky nav */ { } :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img /* any capped-width image centres itself; .tl logos re-left-aligned by their own rule */ { } :is(#team, #team_internal) h2 { } #team #video_row2 .video2_container /* matches the architect quote's max-width at every size; double-ID beats the :is(#team, #team_internal) .e-con .e-con rule */ { max-width: min(100%, 850px) !important; margin-inline: auto !important; padding-right: 0 !important; } #team #video_row2 .e-con-inner { width: 100% !important; max-width: 100% !important; } #team #video_row2 .premium-video-box-container { width: 100% !important; max-width: 100% !important; } /* ---------- ROUND 8 — FEATURES IMAGE-BOX CENTRING (TL) & WIDESCREEN RESETS ---------- */ #design_features .elementor-image-box-content h3 { text-align: center; } #design_features .elementor-image-box-content p { text-align: center; margin: 0 auto; max-width: min(90%, 500px); } :is(#design, #video, #interiors, #location, #team, #register) { } /* ---------- ROUND 9 — WIDESCREEN EXTRAS ---------- */ .elementor-232 .elementor-element.elementor-element-7c8d634 { } #design_features > .e-con, #design_features > .e-con-inner { } /* ---------- FINAL — SAFARI STICKY HEADER FIX ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects { } /* ---------- CLIENT ROUND — TEAM QUOTE WRAP & NEW CLASSES (stepped from the 1920 spec) ---------- */ #team.team_quote_wrap, .team_quote_wrap /* .team_quote_wrap IS #team — ID-level .elementor-kit-123 so this beats the #team padding reset. Texture matches register; padding steps down through the viewports */ { padding-top: 72px; padding-bottom: 72px; background-color: #6E7A70; background-image: url(https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp); } .team_quote_wrap > .e-con-inner /* inner slot */ { } .team_quote_wrap .architect_quote h1, .team_quote_wrap .architect_quote h2 /* quote colour slot inside the textured wrap */ { } .team_quote_wrap .architect_name h5, .team_quote_wrap .architect_name h2 /* name slot inside the textured wrap */ { } /* ---------- FINAL — STICKY-STATE FIXES (Enquire colour + logo visibility after scroll) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-nav-menu--dropdown a[href*='#register'] { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo img, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo img { } /* ---------- CLIENT ROUND 2 — NAV UNDERLINE OFF, #team_internal, HERO CLEARANCE, IMAGE-BOX ICONS ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main .elementor-item::after /* no underline on hover/active, any size */ { display: none !important; height: 0 !important; background: none !important; } .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main .elementor-item:focus { text-decoration: none !important; } div#team_internal /* the two-column developer/architect section (sibling of #team) */ { } #home .elementor-element-1dd3d47 /* hero text 40px from the bottom of the viewport */ { padding-bottom: 40px !important; } #home /* its own 90px bottom padding was stacking on top of the above */ { padding-bottom: 0 !important; } #design_features .elementor-image-box-img img { margin: 0 auto 0; max-height: 70px; } /* ---------- SCROLL — native smooth scroll off; the custom anchor-scroll script (Elementor Custom Code) animates instead ---------- */ html { scroll-behavior: auto !important; } /* ---------- FINAL — KEYBOARD FOCUS VISIBILITY (accessibility) ---------- */ .elementor-nav-menu a:focus-visible, #register .form_wrap :focus-visible { outline: 2px solid #707B73; outline-offset: 2px; } /* ---------- CLIENT FINAL MARKUP — VIEWS TITLE, FEATURES TITLE, ICON BLOCKS, MOBILE DOTS ---------- */ #views_title h2.elementor-heading-title, #views_title .section_small_text h2, #views_title :is(h1, h2, h3, h4, p) /* 'views that can never be built out' — larger at every size; outranks the .section_small_text sizing */ { font-size: 23px; line-height: 120%; } #features_title_row h2 /* sized like the intro headings, white, sentence case; font family set on the widget in Elementor to match the intro heading */ { font-family: "Beaufort Pro Light", Sans-serif; color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; margin-inline: auto; font-size: 50px; line-height: 102%; max-width: min(100%, 760px); } #design_features .elementor-image-box-wrapper, #design_features .elementor-image-box-img, #design_features .elementor-image-box-content /* icons and text centred at every size */ { text-align: center; } #design_features .elementor-image-box-img img { margin: 0 auto 0; display: block; max-height: 70px; } #design_features .elementor-image-box-content h3 { text-align: center; font-size: 17px; } #design_features .elementor-image-box-content p { text-align: center; margin: 0 auto; max-width: min(90%, 500px); } #design_features .e-con-inner:has(> .features_container), #design_features .e-con:has(> .features_container) /* mobile: icon blocks two per row */ { } #design_features .features_container /* mobile: fill the grid cell */ { } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i, .life_carousel .slick-dots li i /* mobile dot colours: muted, active in brand green */ { } .render_carousel .slick-dots li.slick-active i, .lifestyle_carousel .slick-dots li.slick-active i, .life_carousel .slick-dots li.slick-active i { } #design_features .e-con-inner:has(> .features_container) > :not(.features_container) /* mobile: the title row spans both grid columns */ { } /* ---------- MOBILE HERO (#hero_mobile) — pre-wired; every rule is inert until the section exists ---------- */ #hero_mobile /* mobile-only section: full render + blue text band. Hidden above mobile as belt-and-braces to Elementor's responsive visibility */ { min-height: 0 !important; display: none !important; } #hero_mobile > .e-con-inner, #hero_mobile .e-con-inner { } #hero_mobile img /* the render at its natural aspect — nothing cropped */ { } #hero_mobile .hero_mobile_text /* blue band: fills the viewport height left beneath a 16:9 render (100vw x 9/16 = 56.25vw). For another aspect use 100vw x height/width */ { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p) { } body:has(#hero_mobile) #home .home_intro_text /* desktop hero copy leaves the video hero once the mobile hero exists */ { } body:has(#hero_mobile) #home .elementor-element-1dd3d47 { } /* ---------- MOBILE HERO — video, logo & text styling (client spec: #707B73 band, white logo + text) ---------- */ #hero_mobile .elementor-widget-video, #hero_mobile .elementor-video, #hero_mobile .hero_mobile_video /* 16:9 media block, flush, no controls reachable */ { } #hero_mobile .hero_mobile_video { } #hero_mobile .hero_mobile_video iframe { } #hero_mobile iframe, #hero_mobile video /* no hover/tap interaction reaches the player */ { } #hero_mobile .hero_mobile_text svg /* logo */ { } #hero_mobile .hero_mobile_text svg *[fill]:not([fill='none']) { } #hero_mobile .hero_mobile_text svg *[stroke]:not([stroke='none']) { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p), #hero_mobile .hero_mobile_text .elementor-heading-title { } #home .elementor-background-slideshow /* desktop image gallery — mobile uses #hero_mobile instead */ { } /* ---------- MOBILE INTRO OVERLAY — #home fixed & faded out by the JS snippet (Elementor > Custom Code) ---------- */ body.hero_intro #home /* JS adds .hero_intro, so with JS off the hero stays in normal flow */ { } body.hero_intro /* no scrolling behind the intro */ { } body.hero_intro_out #home { } body.hero_intro_out { } body.hero_intro_gone #home { } /* ---------- MOBILE INTRO — logo centred in the overlay ---------- */ body.hero_intro #home /* section carried 25% top padding / 0 bottom, pushing the logo low */ { } body.hero_intro #home .elementor-element-d3d654d /* logo row: size to the artwork, not the leftover space */ { } body.hero_intro #home .elementor-element-d3d654d svg /* SVG was stretched to 677px against a 896x169 viewBox */ { } /* ---------- NAV LOGO — hidden until scrolled (mobile) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo /* hidden at the top of the page; revealed by body.page_scrolled above */ { } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo { } /* ---------- MOBILE HERO — logo container (clears the nav) & equal spacing around the video ---------- */ .hero_mobile_logo_container /* top padding drops the logo below the hamburger; bottom padding = gap above the video */ { } .hero_mobile_logo_container > .e-con-inner { } .hero_mobile_logo_container .elementor-widget, .hero_mobile_logo_container .elementor-widget-container { } .hero_mobile_logo_container svg, .hero_mobile_logo_container img /* logo sized off its own artwork, not the container */ { } .hero_mobile_logo_container svg *[fill]:not([fill='none']) { } .hero_mobile_logo_container svg *[stroke]:not([stroke='none']) { } #hero_mobile .elementor-widget-video, #hero_mobile .hero_mobile_video /* margins zeroed so the 32px above/below come only from the two neighbours */ { } } /* ============================================================ 4. LAPTOP — 1441px to 1919px ============================================================ */ @media (min-width: 1441px) and (max-width: 1919px) { /* ---------- STICKY NAV / HEADER ---------- */ .sticky-header-container { } #full_nav_logo { } #full_nav_logo img { } #top_logo { } #top_logo img { max-height: 54px; } #reg_btn { } #menu_register { } /* ---------- HOME / HERO ---------- */ #home { overflow-x: hidden !important; } #home .home_intro_text { } #home .elementor-element-1dd3d47, #home .elementor-element-6f96336 /* fixed 650px/630px Elementor containers — caused 35px mobile overflow */ { } #home svg { } #home .home_intro_text h1 { font-size: 30px; line-height: 130%; max-width: min(100%, 630px); margin: 0 auto; } #preload_video { } #video_container { } /* ---------- SHARED TEXT PATTERNS (design / interiors / location) ---------- */ :is(#design, #interiors, #location) .section_small_text h2 { font-size: 17px; } :is(#design, #interiors, #location) .intro_text h2 { font-size: 50px; line-height: 102%; max-width: min(100%, 820px); margin-inline: auto; } :is(#design, #interiors, #location) .body_text p { font-size: 19px; line-height: 138%; max-width: min(100%, 690px); margin-inline: auto; } #design .section_small_text1 h2 { } #design .intro_text1 h2 { } #design .body_text1 p { } #interiors .section_small_text2 h2 { } #interiors .intro_text2 h2 { } #interiors .body_text2 p { } #location .section_small_text3 h2 { } #location .intro_text3 h2 { } #location .body_text3 p { } /* ---------- DESIGN — RENDER CAROUSEL ---------- */ .render_carousel { } .render_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .render_carousel img { max-height: 650px; border-radius: 10px !important; } .render_carousel .premium-carousel-template { margin-inline: 15px !important; } .render_carousel2 /* interiors variant */ { } .premium-carousel-thumb-info { background-color: transparent !important; opacity: 0; } .premium-carousel-thumb-title { color: #707B73; font-family: "Founders Grotesk Regular"; text-transform: uppercase; font-size: 13px; letter-spacing: 0.02em; margin: 15px auto 10px; } .slick-current { } .slick-current .premium-carousel-thumb-info { opacity: 1; transition: all 0.5s ease; } /* ---------- DESIGN FEATURES ---------- */ #design_features { background-image: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp'); } #features_title_row h2 /* was 26.4px at every size — now scales */ { font-size: 28px; } #design_features .features_container { } #design_features .features_container img { max-height: 75px; width: auto; } #design_features .features_container h3 /* was 22/28/17/23/29 — smoothed */ { font-size: 23px; } #design_features .features_container p { font-size: 15px; line-height: 132%; } /* ---------- VIDEO SECTIONS ---------- */ #video { } #video_row2 { } /* ---------- LOCATION ---------- */ #location h2 /* generic catch: 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { font-size: 22px; } #location p.p1, #location .animated-slow p /* lifestyle statement paragraphs */ { font-size: 23px; line-height: 125%; display: block; margin: 0 auto 0 0; } #double_aerial_row { } #double_aerial_row img { } #location img[id="31"] /* aerial_mobile */ { } #location img[id="1104"], #location img[id="1105"], #location img[id="1106"] /* full-width lifestyle images */ { } .lifestyle_carousel { } .lifestyle_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .lifestyle_carousel img { max-height: 550px; } .lifestyle_carousel .premium-carousel-template { margin-inline: 15px !important; } .life_carousel { } /* ---------- TEAM ---------- */ #team /* quote wrap carries the closing space now */ { padding-bottom: 0; } :is(#team, #team_internal) h2 { } :is(#team, #team_internal) .tl { } :is(#team, #team_internal) .tl img { height: 45px !important; width: auto; margin: 10px 0 20px; float: left; } :is(#team, #team_internal) .tl1 img { } :is(#team, #team_internal) .tl2 img { } :is(#team, #team_internal) .tl3 img { } :is(#team, #team_internal) .tl4 img { } :is(#team, #team_internal) .tl5 img { } #team .architect_quote h1, #team .architect_quote h2 /* NOW AN H1 — h2 kept as fallback */ { font-size: 28px; line-height: 122%; max-width: min(100%, 840px); margin-inline: auto; } #team .architect_name h5, #team .architect_name h2 /* NOW AN H5 — h2 kept as fallback */ { font-size: 14px; } /* ---------- REGISTER / FOOTER ---------- */ #register { } #register .stamp_row { } #register .stamp_row img { max-height: 75px; margin: 0 auto 20px; } #register .footer_large_text h2 /* was 30px at every size */ { font-size: 28px; line-height: 122%; max-width: min(100%, 630px); margin-inline: auto; } #register .contact_small_text h2 { font-size: 15px; } #register .contact_phone_number h2 /* was 41px even on phones */ { font-size: 38px; } #register .form_row { } #register .form_wrap { max-width: 600px; margin: 0 auto; } #footer_logo_container /* fixed 500px wide — overflowed mobile viewport */ { } #register .fl { } #register .fl img /* leave empty: fl1–fl3 already sized in Elementor */ { } #register .fl1 img { } #register .fl2 img { } #register .fl3 img { } #register .fl4 img /* was 45-49px tall vs siblings at 22-32px */ { max-height: 32px; width: auto; } #footer_text_small { font-size: 13px; margin-top: 10px; } /* ---------- SITE FOOTER (Hello theme) ---------- */ #site-footer { } #site-footer .footer-inner { } #site-footer .custom-logo { max-width: 180px; } #site-footer p { font-size: 14px; } #site-footer .copyright p { font-size: 12px; } /* ---------- REFINEMENTS — SECTION SHELLS & GUTTERS ---------- */ #home .elementor-element-1dd3d47 /* hero content block — clearance below h1 for mobile browser chrome */ { } :is(#design, #interiors) /* section rhythm: gap between stacked rows + top/bottom padding */ { padding-bottom: 0 !important; } #location { padding-bottom: 88px !important; } :is(#design, #interiors) > .e-con /* symmetric 20px gutters (rows had 24/39 + 40/0 asymmetry) */ { } #location > .e-con { margin-bottom: 10px !important; /* matches #design / #interiors rows */ } #location .e-con .e-con /* nested rows carried pl:40/pr:0 — de-centred everything */ { } #location h2 /* centre 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { } #location .elementor-widget-image img /* width:100% keeps all three aerials identical */ { } /* ---------- REFINEMENTS — TEXT ROW SPACING ---------- */ .section_small_text h2 { } .intro_text { } .body_text { } .e-con:has(> .section_small_text) { } .e-con:has(> .intro_text) { margin-bottom: 20px; } .e-con:has(> .body_text) /* row wrapper had 40px bottom margin */ { margin-bottom: 28px !important; } /* ---------- REFINEMENTS — CAROUSELS (full-bleed on mobile, tightened margins everywhere) ---------- */ .render_carousel, .lifestyle_carousel, .life_carousel /* mobile: fills its row (100%); tablet+: full browser bleed */ { flex-shrink: 0 !important; width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0 !important; margin-right: 0 !important; } .render_carousel .slick-list, .lifestyle_carousel .slick-list { } .e-con:has(> .render_carousel), .e-con:has(> .lifestyle_carousel) /* carousel wrapper column had 80px margins */ { margin-top: 56px !important; margin-bottom: 56px !important; } .e-con:has(> .e-con > .render_carousel), .e-con:has(> .e-con > .lifestyle_carousel) { } .e-con:has(.render_carousel), .e-con:has(.lifestyle_carousel) { } /* ---------- REFINEMENTS — DOUBLE AERIAL ROW ---------- */ #location #double_aerial_row /* stacked on mobile; width matches the single aerial rows */ { } #location #double_aerial_row > div.e-con { } #location #double_aerial_row img { } /* ---------- REFINEMENTS — DESIGN FEATURES GRID ---------- */ #design_features { row-gap: 40px !important; } #design_features .e-con, #design_features .e-con-inner /* feature-block gap lives on the .e-con-inner (was 76px) */ { row-gap: 56px !important; } #design_features .features_container { } #features_title_row h2 { } #features_title_row { } /* ---------- REFINEMENTS — TEAM SECTION ---------- */ :is(#team, #team_internal) /* section itself was 405px wide with 40px side padding on mobile */ { } :is(#team, #team_internal) > .e-con-inner { } :is(#team, #team_internal) > .e-con-inner > .e-con /* two-column team rows — stepped max-widths */ { max-width: 1240px !important; margin-inline: auto !important; } :is(#team, #team_internal) .e-con .e-con { } :is(#team, #team_internal) .elementor-widget-image { } :is(#team, #team_internal) img.size-large /* max-width caps the photos; tune per taste */ { } .elementor-element-a3efed4 h2 /* 'Our Team' heading */ { } /* ---------- REFINEMENTS — REGISTER SECTION ---------- */ #register /* clearance above the stamp for sticky nav / anchor jumps */ { padding-top: 90px !important; } #register .contact_small_text /* space above 'More Information' */ { margin-top: 40px; } /* ---------- REFINEMENTS — MOBILE BORDER-RADIUS RESET (images, carousels & video only; Register pill button keeps its radius) ---------- */ :is(#video, #video_row2) .premium-video-box-container, :is(#video, #video_row2) .premium-video-box-video-container, :is(#video, #video_row2) video, :is(#video, #video_row2) iframe, :is(#video, #video_row2) img, :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img, .render_carousel img, .lifestyle_carousel img, .premium-carousel-inner-img { } /* ---------- ROUND 2 — DESIGN FEATURES CENTRED AT ALL MOBILE WIDTHS ---------- */ #design_features /* section had a fixed-width, left-anchored content column */ { } #design_features > .e-con, #design_features > .e-con-inner { } #design_features .features_container { } #design_features .features_container p /* had a 420px max-width but no auto margins — sat left */ { } #design_features .features_container h3 { } #design_features .features_container img { } /* ---------- ROUND 2 — CAROUSEL DOTS (scale down as devices shrink) ---------- */ .render_carousel .slick-dots li, .lifestyle_carousel .slick-dots li { margin: 0 5px !important; width: auto !important; height: auto !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i /* dots are FontAwesome icons */ { font-size: 9px !important; } /* ---------- ROUND 2 — FULL-BLEED SUPPORT & TEXT CENTRING ---------- */ :is(#design, #interiors, #location) /* lets 100vw carousels bleed without a horizontal scrollbar */ { overflow-x: clip; } #location p.p1, #location .animated-slow p /* centred under its image on mobile/tablet only; desktop sizes are left-aligned below */ { } /* ---------- ROUND 2 — TEAM SLOTS (heading margin, image margin, bio text width) ---------- */ :is(#team, #team_internal) .elementor-element-a3efed4 h2 /* margin under 'Our Team' */ { } :is(#team, #team_internal) .elementor-widget-image /* margin slot for the team photos */ { } :is(#team, #team_internal) .e-con .e-con h2 /* max-width slot for the team text */ { } /* ---------- ROUND 2 — REGISTER SPACING ---------- */ #register .contact_small_text /* 5px under 'More Information' */ { margin-bottom: 5px !important; } #register .contact_small_text h2 { margin-bottom: 0; } #register .contact_phone_number /* 25px under the phone number */ { margin-bottom: 25px !important; } #register .contact_phone_number h2 { margin-bottom: 0; } #register /* bottom clearance so the disclaimer never touches the viewport edge */ { padding-bottom: 80px !important; } /* ---------- ROUND 3 — WATERFRONT PARK BLOCK (#park_img / .park_img_row) ---------- */ .park_img_row /* had 40px top / 120px bottom margins */ { margin-top: 32px !important; margin-bottom: 24px !important; } .park_img_row > .e-con-inner, .park_img_row .e-con-inner /* Elementor caps this at 66% — unlocked so the #park_img caps below govern */ { width: 100% !important; max-width: 100% !important; } #park_img /* masterplan map — proportional cap at every size */ { max-width: min(86%, 1100px) !important; margin: 0 auto 70px; } /* ---------- ROUND 3 — NAV (visible on mobile & tablet) ---------- */ #full_nav_logo /* at tablet the full logo left only 6px before the first menu link */ { } #full_nav_logo svg, #full_nav_logo img { } /* ---------- ROUND 4 — MOBILE NAVIGATION ---------- */ #top_logo img { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-menu-toggle, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus, .elementor-menu-toggle /* white over the hero; !important because post-270.css loads after this file */ { } .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg, .elementor-menu-toggle svg path, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover svg, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus svg { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:hover, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:focus /* brand green once the sticky header kicks in */ { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg path { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects.sticky-header-container { } #full_nav_logo img, #full_nav_logo svg { } .elementor-nav-menu--dropdown.elementor-nav-menu__container { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a /* was red Inter; now matches the site */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a.elementor-item-active { } .elementor-nav-menu--dropdown li { } /* ---------- ROUND 4 — 'ENQUIRE NOW' MENU ITEM (add in WP menu with CSS class 'menu-item-enquire'; styles below activate automatically) ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown .menu-item-enquire a /* matched by link — no CSS class needed; specificity mirrors the green link rule so white wins */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:focus { } .elementor-nav-menu .menu-item-enquire, .elementor-nav-menu li:has(> a[href*='#register']) /* hidden above mobile — desktop/tablet use the Register button */ { display: none; } /* ---------- ROUND 4 — TEAM & ARCHITECT HEADING SLOTS (target each heading individually, every breakpoint) ---------- */ :is(#team, #team_internal) h4 /* team row labels, e.g. 'Developed by:' / 'Sales & marketing:' */ { font-size: 15px; margin: 20px auto 0; letter-spacing: 0.08em; } :is(#team, #team_internal) .e-con .e-con h3, :is(#team, #team_internal) .e-con .e-con h3 a /* the team URL links (now h3) */ { } /* ---------- ROUND 4 — MISC MOBILE VALUES ---------- */ :is(#design, #interiors) > .e-con { margin-bottom: 10px !important; } #interiors .intro_text2 h2 { } .body_text2 /* user's '.boody_text2' — typo corrected */ { margin: 0 auto; max-width: min(90%, 750px) !important; } #location > .e-con { } .elementor .e-6ad5061-7a4fd51 { } #footer_logo_container { } #site-footer, .site-footer { display: none; } /* ---------- ROUND 5 — CAROUSEL ROWS FULL VIEWPORT WIDTH ON MOBILE ---------- */ :is(#design, #interiors, #location) > .e-con:has(.render_carousel), :is(#design, #interiors, #location) > .e-con:has(.lifestyle_carousel), :is(#design, #interiors, #location) > .e-con:has(.life_carousel) { } /* ---------- ROUND 6 — NAV FINE-TUNING & MISC ---------- */ .elementor .e-0fd00fa-bb736bb, .elementor .e-827b2fa-30e28d2 { } .elementor-menu-toggle .e-font-icon-svg { } .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { } .architect_name { } .render_carousel .slick-dots, .lifestyle_carousel .slick-dots, .life_carousel .slick-dots /* dots hidden on mobile & tablet */ { } /* ---------- ROUND 7 — TABLET PORTRAIT PASS ---------- */ .elementor .e-fb8dcee { } :is(#design, #video, #interiors, #location, #team, #register) /* anchor jumps land clear of the sticky nav */ { } :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img /* any capped-width image centres itself; .tl logos re-left-aligned by their own rule */ { } :is(#team, #team_internal) h2 { } #team #video_row2 .video2_container /* matches the architect quote's max-width at every size; double-ID beats the :is(#team, #team_internal) .e-con .e-con rule */ { max-width: min(100%, 990px) !important; margin-inline: auto !important; padding-right: 0 !important; } #team #video_row2 .e-con-inner { width: 100% !important; max-width: 100% !important; } #team #video_row2 .premium-video-box-container { width: 100% !important; max-width: 100% !important; } /* ---------- ROUND 8 — FEATURES IMAGE-BOX CENTRING (TL) & WIDESCREEN RESETS ---------- */ #design_features .elementor-image-box-content h3 { } #design_features .elementor-image-box-content p { } :is(#design, #video, #interiors, #location, #team, #register) { margin-top: 0 !important; } /* ---------- ROUND 9 — WIDESCREEN EXTRAS ---------- */ .elementor-232 .elementor-element.elementor-element-7c8d634 { } #design_features > .e-con, #design_features > .e-con-inner { } /* ---------- FINAL — SAFARI STICKY HEADER FIX ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects { } /* ---------- CLIENT ROUND — TEAM QUOTE WRAP & NEW CLASSES (stepped from the 1920 spec) ---------- */ #team.team_quote_wrap, .team_quote_wrap /* .team_quote_wrap IS #team — ID-level .elementor-kit-123 so this beats the #team padding reset. Texture matches register; padding steps down through the viewports */ { padding-top: 80px; padding-bottom: 80px; background-color: #6E7A70; background-image: url(https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp); } .team_quote_wrap > .e-con-inner /* inner slot */ { } .team_quote_wrap .architect_quote h1, .team_quote_wrap .architect_quote h2 /* quote colour slot inside the textured wrap */ { } .team_quote_wrap .architect_name h5, .team_quote_wrap .architect_name h2 /* name slot inside the textured wrap */ { } /* ---------- FINAL — STICKY-STATE FIXES (Enquire colour + logo visibility after scroll) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-nav-menu--dropdown a[href*='#register'] { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo img, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo img { } /* ---------- CLIENT ROUND 2 — NAV UNDERLINE OFF, #team_internal, HERO CLEARANCE, IMAGE-BOX ICONS ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main .elementor-item::after /* no underline on hover/active, any size */ { display: none !important; height: 0 !important; background: none !important; } .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main .elementor-item:focus { text-decoration: none !important; } div#team_internal /* the two-column developer/architect section (sibling of #team) */ { } #home .elementor-element-1dd3d47 /* hero text 40px from the bottom of the viewport */ { } #home /* its own 90px bottom padding was stacking on top of the above */ { } #design_features .elementor-image-box-img img { } /* ---------- SCROLL — native smooth scroll off; the custom anchor-scroll script (Elementor Custom Code) animates instead ---------- */ html { scroll-behavior: auto !important; } /* ---------- FINAL — KEYBOARD FOCUS VISIBILITY (accessibility) ---------- */ .elementor-nav-menu a:focus-visible, #register .form_wrap :focus-visible { outline: 2px solid #707B73; outline-offset: 2px; } /* ---------- CLIENT FINAL MARKUP — VIEWS TITLE, FEATURES TITLE, ICON BLOCKS, MOBILE DOTS ---------- */ #views_title h2.elementor-heading-title, #views_title .section_small_text h2, #views_title :is(h1, h2, h3, h4, p) /* 'views that can never be built out' — larger at every size; outranks the .section_small_text sizing */ { font-size: 26px; line-height: 118%; } #features_title_row h2 /* sized like the intro headings, white, sentence case; font family set on the widget in Elementor to match the intro heading */ { font-family: "Beaufort Pro Light", Sans-serif; color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; margin-inline: auto; font-size: 50px; line-height: 102%; max-width: min(100%, 820px); } #design_features .elementor-image-box-wrapper, #design_features .elementor-image-box-img, #design_features .elementor-image-box-content /* icons and text centred at every size */ { text-align: center; } #design_features .elementor-image-box-img img { margin: 0 auto 0; display: block; } #design_features .elementor-image-box-content h3 { text-align: center; font-size: 23px; } #design_features .elementor-image-box-content p { text-align: center; margin-inline: auto; } #design_features .e-con-inner:has(> .features_container), #design_features .e-con:has(> .features_container) /* mobile: icon blocks two per row */ { } #design_features .features_container /* mobile: fill the grid cell */ { } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i, .life_carousel .slick-dots li i /* mobile dot colours: muted, active in brand green */ { } .render_carousel .slick-dots li.slick-active i, .lifestyle_carousel .slick-dots li.slick-active i, .life_carousel .slick-dots li.slick-active i { } #design_features .e-con-inner:has(> .features_container) > :not(.features_container) /* mobile: the title row spans both grid columns */ { } /* ---------- MOBILE HERO (#hero_mobile) — pre-wired; every rule is inert until the section exists ---------- */ #hero_mobile /* mobile-only section: full render + blue text band. Hidden above mobile as belt-and-braces to Elementor's responsive visibility */ { min-height: 0 !important; display: none !important; } #hero_mobile > .e-con-inner, #hero_mobile .e-con-inner { } #hero_mobile img /* the render at its natural aspect — nothing cropped */ { } #hero_mobile .hero_mobile_text /* blue band: fills the viewport height left beneath a 16:9 render (100vw x 9/16 = 56.25vw). For another aspect use 100vw x height/width */ { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p) { } body:has(#hero_mobile) #home .home_intro_text /* desktop hero copy leaves the video hero once the mobile hero exists */ { } body:has(#hero_mobile) #home .elementor-element-1dd3d47 { } /* ---------- MOBILE HERO — video, logo & text styling (client spec: #707B73 band, white logo + text) ---------- */ #hero_mobile .elementor-widget-video, #hero_mobile .elementor-video, #hero_mobile .hero_mobile_video /* 16:9 media block, flush, no controls reachable */ { } #hero_mobile .hero_mobile_video { } #hero_mobile .hero_mobile_video iframe { } #hero_mobile iframe, #hero_mobile video /* no hover/tap interaction reaches the player */ { } #hero_mobile .hero_mobile_text svg /* logo */ { } #hero_mobile .hero_mobile_text svg *[fill]:not([fill='none']) { } #hero_mobile .hero_mobile_text svg *[stroke]:not([stroke='none']) { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p), #hero_mobile .hero_mobile_text .elementor-heading-title { } #home .elementor-background-slideshow /* desktop image gallery — mobile uses #hero_mobile instead */ { } /* ---------- MOBILE INTRO OVERLAY — #home fixed & faded out by the JS snippet (Elementor > Custom Code) ---------- */ body.hero_intro #home /* JS adds .hero_intro, so with JS off the hero stays in normal flow */ { } body.hero_intro /* no scrolling behind the intro */ { } body.hero_intro_out #home { } body.hero_intro_out { } body.hero_intro_gone #home { } /* ---------- MOBILE INTRO — logo centred in the overlay ---------- */ body.hero_intro #home /* section carried 25% top padding / 0 bottom, pushing the logo low */ { } body.hero_intro #home .elementor-element-d3d654d /* logo row: size to the artwork, not the leftover space */ { } body.hero_intro #home .elementor-element-d3d654d svg /* SVG was stretched to 677px against a 896x169 viewBox */ { } /* ---------- NAV LOGO — hidden until scrolled (mobile) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo /* hidden at the top of the page; revealed by body.page_scrolled above */ { } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo { } /* ---------- MOBILE HERO — logo container (clears the nav) & equal spacing around the video ---------- */ .hero_mobile_logo_container /* top padding drops the logo below the hamburger; bottom padding = gap above the video */ { } .hero_mobile_logo_container > .e-con-inner { } .hero_mobile_logo_container .elementor-widget, .hero_mobile_logo_container .elementor-widget-container { } .hero_mobile_logo_container svg, .hero_mobile_logo_container img /* logo sized off its own artwork, not the container */ { } .hero_mobile_logo_container svg *[fill]:not([fill='none']) { } .hero_mobile_logo_container svg *[stroke]:not([stroke='none']) { } #hero_mobile .elementor-widget-video, #hero_mobile .hero_mobile_video /* margins zeroed so the 32px above/below come only from the two neighbours */ { } } /* ============================================================ 5. WIDESCREEN — 1920px and up ============================================================ */ @media (min-width: 1920px) { /* ---------- STICKY NAV / HEADER ---------- */ .sticky-header-container { } #full_nav_logo { } #full_nav_logo img { } #top_logo { } #top_logo img { max-height: 62px; } #reg_btn { } #menu_register { } /* ---------- HOME / HERO ---------- */ #home { overflow-x: hidden !important; } #home .home_intro_text { } #home .elementor-element-1dd3d47, #home .elementor-element-6f96336 /* fixed 650px/630px Elementor containers — caused 35px mobile overflow */ { } #home svg { } #home .home_intro_text h1 { font-size: 36px; line-height: 128%; max-width: min(85%, 820px); margin: 0 auto; } #preload_video { } #video_container { } /* ---------- SHARED TEXT PATTERNS (design / interiors / location) ---------- */ :is(#design, #interiors, #location) .section_small_text h2 { font-size: 18px; } :is(#design, #interiors, #location) .intro_text h2 { font-size: 60px; line-height: 100%; max-width: min(100%, 950px); margin-inline: auto; } :is(#design, #interiors, #location) .body_text p { font-size: 20px; line-height: 135%; max-width: min(100%, 720px); /* keeps line length ~70 chars */ margin-inline: auto; } #design .section_small_text1 h2 { } #design .intro_text1 h2 { } #design .body_text1 p { } #interiors .section_small_text2 h2 { } #interiors .intro_text2 h2 { } #interiors .body_text2 p { } #location .section_small_text3 h2 { } #location .intro_text3 h2 { } #location .body_text3 p { } /* ---------- DESIGN — RENDER CAROUSEL ---------- */ .render_carousel { } .render_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .render_carousel img { max-height: min(80vh, 900px); border-radius: 10px !important; } .render_carousel .premium-carousel-template { margin-inline: 20px !important; } .render_carousel2 /* interiors variant */ { } .premium-carousel-thumb-info { background-color: transparent !important; opacity: 0; } .premium-carousel-thumb-title { color: #707B73; font-family: "Founders Grotesk Regular"; text-transform: uppercase; font-size: 15px; letter-spacing: 0.10em; margin: 15px auto 10px; } .slick-current { } .slick-current .premium-carousel-thumb-info { opacity: 1; transition: all 0.5s ease; } /* ---------- DESIGN FEATURES ---------- */ #design_features { background-image: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp'); } #features_title_row h2 /* was 26.4px at every size — now scales */ { font-size: 32px; } #design_features .features_container { } #design_features .features_container img { max-height: 90px; width: auto; } #design_features .features_container h3 /* was 22/28/17/23/29 — smoothed */ { font-size: 29px; } #design_features .features_container p { font-size: 17px; line-height: 130%; max-width: min(90%, 500px); } /* ---------- VIDEO SECTIONS ---------- */ #video { } #video_row2 { } /* ---------- LOCATION ---------- */ #location h2 /* generic catch: 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { font-size: 25px; } #location p.p1, #location .animated-slow p /* lifestyle statement paragraphs */ { font-size: 30px; line-height: 125%; max-width: min(100%, 800px); display: block; margin: 0 auto 0 0; } #double_aerial_row { } #double_aerial_row img { } #location img[id="31"] /* aerial_mobile */ { } #location img[id="1104"], #location img[id="1105"], #location img[id="1106"] /* full-width lifestyle images */ { } .lifestyle_carousel { } .lifestyle_carousel .pa-carousel-gallery.premium-carousel__eq-height-yes img, .lifestyle_carousel img { height: min(90vh, 700px); } .lifestyle_carousel .premium-carousel-template { margin-inline: 20px !important; } .life_carousel { } /* ---------- TEAM ---------- */ #team /* quote wrap carries the closing space now */ { padding-bottom: 0; } :is(#team, #team_internal) h2 { } :is(#team, #team_internal) .tl { } :is(#team, #team_internal) .tl img { height: 48px; width: auto; margin: 10px 0 20px; float: left; } :is(#team, #team_internal) .tl1 img { } :is(#team, #team_internal) .tl2 img { } :is(#team, #team_internal) .tl3 img { } :is(#team, #team_internal) .tl4 img { } :is(#team, #team_internal) .tl5 img { } #team .architect_quote h1, #team .architect_quote h2 /* NOW AN H1 — h2 kept as fallback */ { font-size: 32px; line-height: 120%; max-width: 1050px; margin-inline: auto; } #team .architect_name h5, #team .architect_name h2 /* NOW AN H5 — h2 kept as fallback */ { font-size: 14px; letter-spacing: 0.15em; line-height: 160%; } /* ---------- REGISTER / FOOTER ---------- */ #register { } #register .stamp_row { } #register .stamp_row img { max-height: 92px; } #register .footer_large_text h2 /* was 30px at every size */ { font-size: 30px; line-height: 130%; max-width: min(100%, 720px); margin-inline: auto; } #register .contact_small_text h2 { font-size: 18px; } #register .contact_phone_number h2 /* was 41px even on phones */ { font-size: 40px; } #register .form_row { } #register .form_wrap { max-width: 680px; margin: 0 auto; } #footer_logo_container /* fixed 500px wide — overflowed mobile viewport */ { } #register .fl { } #register .fl img /* leave empty: fl1–fl3 already sized in Elementor */ { } #register .fl1 img { } #register .fl2 img { } #register .fl3 img { } #register .fl4 img /* was 45-49px tall vs siblings at 22-32px */ { max-height: 32px; width: auto; } #footer_text_small { font-size: 14px; } /* ---------- SITE FOOTER (Hello theme) ---------- */ #site-footer { } #site-footer .footer-inner { } #site-footer .custom-logo { max-width: 220px; } #site-footer p { font-size: 15px; } #site-footer .copyright p { font-size: 13px; } /* ---------- REFINEMENTS — SECTION SHELLS & GUTTERS ---------- */ #home .elementor-element-1dd3d47 /* hero content block — clearance below h1 for mobile browser chrome */ { } :is(#design, #interiors) /* section rhythm: gap between stacked rows + top/bottom padding */ { padding-bottom: 0 !important; } #location { padding-bottom: 88px !important; } :is(#design, #interiors) > .e-con /* symmetric 20px gutters (rows had 24/39 + 40/0 asymmetry) */ { } #location > .e-con { } #location .e-con .e-con /* nested rows carried pl:40/pr:0 — de-centred everything */ { } #location h2 /* centre 'Outdoor living' / 'Dining' / 'retail + Amenity' */ { } #location .elementor-widget-image img /* width:100% keeps all three aerials identical */ { } /* ---------- REFINEMENTS — TEXT ROW SPACING ---------- */ .section_small_text h2 { } .intro_text { } .body_text { } .e-con:has(> .section_small_text) { } .e-con:has(> .intro_text) { } .e-con:has(> .body_text) /* row wrapper had 40px bottom margin */ { margin-bottom: 28px !important; } /* ---------- REFINEMENTS — CAROUSELS (full-bleed on mobile, tightened margins everywhere) ---------- */ .render_carousel, .lifestyle_carousel, .life_carousel /* mobile: fills its row (100%); tablet+: full browser bleed */ { flex-shrink: 0 !important; width: 100vw !important; max-width: 100vw !important; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0 !important; margin-right: 0 !important; } .render_carousel .slick-list, .lifestyle_carousel .slick-list { } .e-con:has(> .render_carousel), .e-con:has(> .lifestyle_carousel) /* carousel wrapper column had 80px margins */ { margin-top: 56px !important; margin-bottom: 56px !important; } .e-con:has(> .e-con > .render_carousel), .e-con:has(> .e-con > .lifestyle_carousel) { } .e-con:has(.render_carousel), .e-con:has(.lifestyle_carousel) { } /* ---------- REFINEMENTS — DOUBLE AERIAL ROW ---------- */ #location #double_aerial_row /* stacked on mobile; width matches the single aerial rows */ { } #location #double_aerial_row > div.e-con { } #location #double_aerial_row img { } /* ---------- REFINEMENTS — DESIGN FEATURES GRID ---------- */ #design_features { row-gap: 40px !important; } #design_features .e-con, #design_features .e-con-inner /* feature-block gap lives on the .e-con-inner (was 76px) */ { row-gap: 56px !important; } #design_features .features_container { } #features_title_row h2 { } #features_title_row { } /* ---------- REFINEMENTS — TEAM SECTION ---------- */ :is(#team, #team_internal) /* section itself was 405px wide with 40px side padding on mobile */ { } :is(#team, #team_internal) > .e-con-inner { } :is(#team, #team_internal) > .e-con-inner > .e-con /* two-column team rows — stepped max-widths */ { max-width: 1400px !important; margin-inline: auto !important; } :is(#team, #team_internal) .e-con .e-con { } :is(#team, #team_internal) .elementor-widget-image { } :is(#team, #team_internal) img.size-large /* max-width caps the photos; tune per taste */ { } .elementor-element-a3efed4 h2 /* 'Our Team' heading */ { } /* ---------- REFINEMENTS — REGISTER SECTION ---------- */ #register /* clearance above the stamp for sticky nav / anchor jumps */ { padding-top: 100px !important; } #register .contact_small_text /* space above 'More Information' */ { margin-top: 48px; } /* ---------- REFINEMENTS — MOBILE BORDER-RADIUS RESET (images, carousels & video only; Register pill button keeps its radius) ---------- */ :is(#video, #video_row2) .premium-video-box-container, :is(#video, #video_row2) .premium-video-box-video-container, :is(#video, #video_row2) video, :is(#video, #video_row2) iframe, :is(#video, #video_row2) img, :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img, .render_carousel img, .lifestyle_carousel img, .premium-carousel-inner-img { } /* ---------- ROUND 2 — DESIGN FEATURES CENTRED AT ALL MOBILE WIDTHS ---------- */ #design_features /* section had a fixed-width, left-anchored content column */ { } #design_features > .e-con, #design_features > .e-con-inner { } #design_features .features_container { } #design_features .features_container p /* had a 420px max-width but no auto margins — sat left */ { } #design_features .features_container h3 { } #design_features .features_container img { } /* ---------- ROUND 2 — CAROUSEL DOTS (scale down as devices shrink) ---------- */ .render_carousel .slick-dots li, .lifestyle_carousel .slick-dots li { margin: 0 5px !important; width: auto !important; height: auto !important; } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i /* dots are FontAwesome icons */ { font-size: 10px !important; } /* ---------- ROUND 2 — FULL-BLEED SUPPORT & TEXT CENTRING ---------- */ :is(#design, #interiors, #location) /* lets 100vw carousels bleed without a horizontal scrollbar */ { overflow-x: clip; } #location p.p1, #location .animated-slow p /* centred under its image on mobile/tablet only; desktop sizes are left-aligned below */ { } /* ---------- ROUND 2 — TEAM SLOTS (heading margin, image margin, bio text width) ---------- */ :is(#team, #team_internal) .elementor-element-a3efed4 h2 /* margin under 'Our Team' */ { } :is(#team, #team_internal) .elementor-widget-image /* margin slot for the team photos */ { } :is(#team, #team_internal) .e-con .e-con h2 /* max-width slot for the team text */ { max-width: min(95%, 550px); } /* ---------- ROUND 2 — REGISTER SPACING ---------- */ #register .contact_small_text /* 5px under 'More Information' */ { margin-bottom: 5px !important; } #register .contact_small_text h2 { margin-bottom: 0; } #register .contact_phone_number /* 25px under the phone number */ { margin-bottom: 25px !important; } #register .contact_phone_number h2 { margin-bottom: 0; } #register /* bottom clearance so the disclaimer never touches the viewport edge */ { padding-bottom: 80px !important; } /* ---------- ROUND 3 — WATERFRONT PARK BLOCK (#park_img / .park_img_row) ---------- */ .park_img_row /* had 40px top / 120px bottom margins */ { margin-top: 32px !important; margin-bottom: 24px !important; } .park_img_row > .e-con-inner, .park_img_row .e-con-inner /* Elementor caps this at 66% — unlocked so the #park_img caps below govern */ { width: 100% !important; max-width: 100% !important; } #park_img /* masterplan map — proportional cap at every size */ { max-width: min(84%, 1250px) !important; margin: 0 auto 80px; } /* ---------- ROUND 3 — NAV (visible on mobile & tablet) ---------- */ #full_nav_logo /* at tablet the full logo left only 6px before the first menu link */ { } #full_nav_logo svg, #full_nav_logo img { } /* ---------- ROUND 4 — MOBILE NAVIGATION ---------- */ #top_logo img { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-menu-toggle, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus, .elementor-menu-toggle /* white over the hero; !important because post-270.css loads after this file */ { } .elementor-menu-toggle svg, .elementor-menu-toggle .e-font-icon-svg, .elementor-menu-toggle svg path, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:hover svg, .elementor-270 .elementor-element.elementor-element-3d235884 div.elementor-menu-toggle:focus svg { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:hover, .elementor-270 .elementor-element-6139215f.elementor-sticky--effects div.elementor-menu-toggle:focus /* brand green once the sticky header kicks in */ { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-menu-toggle svg path { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects.sticky-header-container { } #full_nav_logo img, #full_nav_logo svg { } .elementor-nav-menu--dropdown.elementor-nav-menu__container { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a /* was red Inter; now matches the site */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a.elementor-item-active { } .elementor-nav-menu--dropdown li { } /* ---------- ROUND 4 — 'ENQUIRE NOW' MENU ITEM (add in WP menu with CSS class 'menu-item-enquire'; styles below activate automatically) ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown .menu-item-enquire a /* matched by link — no CSS class needed; specificity mirrors the green link rule so white wins */ { } .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:hover, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register']:focus { } .elementor-nav-menu .menu-item-enquire, .elementor-nav-menu li:has(> a[href*='#register']) /* hidden above mobile — desktop/tablet use the Register button */ { display: none; } /* ---------- ROUND 4 — TEAM & ARCHITECT HEADING SLOTS (target each heading individually, every breakpoint) ---------- */ :is(#team, #team_internal) h4 /* team row labels, e.g. 'Developed by:' / 'Sales & marketing:' */ { font-size: 16px; margin: 24px auto 0; letter-spacing: 0.08em; } :is(#team, #team_internal) .e-con .e-con h3, :is(#team, #team_internal) .e-con .e-con h3 a /* the team URL links (now h3) */ { } /* ---------- ROUND 4 — MISC MOBILE VALUES ---------- */ :is(#design, #interiors) > .e-con { } #interiors .intro_text2 h2 { } .body_text2 /* user's '.boody_text2' — typo corrected */ { } #location > .e-con { } .elementor .e-6ad5061-7a4fd51 { } #footer_logo_container { } #site-footer, .site-footer { display: none; } /* ---------- ROUND 5 — CAROUSEL ROWS FULL VIEWPORT WIDTH ON MOBILE ---------- */ :is(#design, #interiors, #location) > .e-con:has(.render_carousel), :is(#design, #interiors, #location) > .e-con:has(.lifestyle_carousel), :is(#design, #interiors, #location) > .e-con:has(.life_carousel) { } /* ---------- ROUND 6 — NAV FINE-TUNING & MISC ---------- */ .elementor .e-0fd00fa-bb736bb, .elementor .e-827b2fa-30e28d2 { } .elementor-menu-toggle .e-font-icon-svg { } .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown { } .architect_name { } .render_carousel .slick-dots, .lifestyle_carousel .slick-dots, .life_carousel .slick-dots /* dots hidden on mobile & tablet */ { } /* ---------- ROUND 7 — TABLET PORTRAIT PASS ---------- */ .elementor .e-fb8dcee { } :is(#design, #video, #interiors, #location, #team, #register) /* anchor jumps land clear of the sticky nav */ { } :is(#home, #design, #interiors, #location, #design_features, #team, #team_internal, #register) img /* any capped-width image centres itself; .tl logos re-left-aligned by their own rule */ { } :is(#team, #team_internal) h2 { } #team #video_row2 .video2_container /* matches the architect quote's max-width at every size; double-ID beats the :is(#team, #team_internal) .e-con .e-con rule */ { max-width: min(100%, 1200px) !important; margin-inline: auto !important; padding-right: 0 !important; } #team #video_row2 .e-con-inner { width: 100% !important; max-width: 100% !important; } #team #video_row2 .premium-video-box-container { width: 100% !important; max-width: 100% !important; } /* ---------- ROUND 8 — FEATURES IMAGE-BOX CENTRING (TL) & WIDESCREEN RESETS ---------- */ #design_features .elementor-image-box-content h3 { } #design_features .elementor-image-box-content p { } :is(#design, #video, #interiors, #location, #team, #register) { margin-top: 0 !important; } /* ---------- ROUND 9 — WIDESCREEN EXTRAS ---------- */ .elementor-232 .elementor-element.elementor-element-7c8d634 { --width: 800px; } #design_features > .e-con, #design_features > .e-con-inner { max-width: 1800px; } /* ---------- FINAL — SAFARI STICKY HEADER FIX ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects { } /* ---------- CLIENT ROUND — TEAM QUOTE WRAP & NEW CLASSES (stepped from the 1920 spec) ---------- */ #team.team_quote_wrap, .team_quote_wrap /* .team_quote_wrap IS #team — ID-level .elementor-kit-123 so this beats the #team padding reset. Texture matches register; padding steps down through the viewports */ { padding-top: 100px; padding-bottom: 100px; background-color: #6E7A70; background-image: url(https://theislesmainbeach.com.au/wp-content/uploads/2026/07/egg-shell.webp); } .team_quote_wrap > .e-con-inner /* inner slot */ { } .team_quote_wrap .architect_quote h1, .team_quote_wrap .architect_quote h2 /* quote colour slot inside the textured wrap */ { } .team_quote_wrap .architect_name h5, .team_quote_wrap .architect_name h2 /* name slot inside the textured wrap */ { } /* ---------- FINAL — STICKY-STATE FIXES (Enquire colour + logo visibility after scroll) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-element.elementor-element-3d235884 .elementor-nav-menu--dropdown a[href*='#register'], .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects .elementor-nav-menu--dropdown a[href*='#register'] { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo { } .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--effects #full_nav_logo img, .elementor-270 .elementor-element.elementor-element-6139215f.elementor-sticky--active #full_nav_logo img { } /* ---------- CLIENT ROUND 2 — NAV UNDERLINE OFF, #team_internal, HERO CLEARANCE, IMAGE-BOX ICONS ---------- */ .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after, .elementor-270 .elementor-element.elementor-element-3d235884 .elementor-nav-menu--main .elementor-item::after /* no underline on hover/active, any size */ { display: none !important; height: 0 !important; background: none !important; } .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-nav-menu--main .elementor-item:focus { text-decoration: none !important; } div#team_internal /* the two-column developer/architect section (sibling of #team) */ { } #home .elementor-element-1dd3d47 /* hero text 40px from the bottom of the viewport */ { } #home /* its own 90px bottom padding was stacking on top of the above */ { } #design_features .elementor-image-box-img img { } /* ---------- SCROLL — native smooth scroll off; the custom anchor-scroll script (Elementor Custom Code) animates instead ---------- */ html { scroll-behavior: auto !important; } /* ---------- FINAL — KEYBOARD FOCUS VISIBILITY (accessibility) ---------- */ .elementor-nav-menu a:focus-visible, #register .form_wrap :focus-visible { outline: 2px solid #707B73; outline-offset: 2px; } /* ---------- CLIENT FINAL MARKUP — VIEWS TITLE, FEATURES TITLE, ICON BLOCKS, MOBILE DOTS ---------- */ #views_title h2.elementor-heading-title, #views_title .section_small_text h2, #views_title :is(h1, h2, h3, h4, p) /* 'views that can never be built out' — larger at every size; outranks the .section_small_text sizing */ { font-size: 28px; line-height: 115%; } #features_title_row h2 /* sized like the intro headings, white, sentence case; font family set on the widget in Elementor to match the intro heading */ { font-family: "Beaufort Pro Light", Sans-serif; color: #ffffff !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 400; margin-inline: auto; font-size: 60px; line-height: 100%; max-width: min(100%, 950px); } #design_features .elementor-image-box-wrapper, #design_features .elementor-image-box-img, #design_features .elementor-image-box-content /* icons and text centred at every size */ { text-align: center; } #design_features .elementor-image-box-img img { margin: 0 auto 0; display: block; } #design_features .elementor-image-box-content h3 { text-align: center; font-size: 29px; } #design_features .elementor-image-box-content p { text-align: center; margin-inline: auto; } #design_features .e-con-inner:has(> .features_container), #design_features .e-con:has(> .features_container) /* mobile: icon blocks two per row */ { } #design_features .features_container /* mobile: fill the grid cell */ { } .render_carousel .slick-dots li i, .lifestyle_carousel .slick-dots li i, .life_carousel .slick-dots li i /* mobile dot colours: muted, active in brand green */ { } .render_carousel .slick-dots li.slick-active i, .lifestyle_carousel .slick-dots li.slick-active i, .life_carousel .slick-dots li.slick-active i { } #design_features .e-con-inner:has(> .features_container) > :not(.features_container) /* mobile: the title row spans both grid columns */ { } /* ---------- MOBILE HERO (#hero_mobile) — pre-wired; every rule is inert until the section exists ---------- */ #hero_mobile /* mobile-only section: full render + blue text band. Hidden above mobile as belt-and-braces to Elementor's responsive visibility */ { min-height: 0 !important; display: none !important; } #hero_mobile > .e-con-inner, #hero_mobile .e-con-inner { } #hero_mobile img /* the render at its natural aspect — nothing cropped */ { } #hero_mobile .hero_mobile_text /* blue band: fills the viewport height left beneath a 16:9 render (100vw x 9/16 = 56.25vw). For another aspect use 100vw x height/width */ { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p) { } body:has(#hero_mobile) #home .home_intro_text /* desktop hero copy leaves the video hero once the mobile hero exists */ { } body:has(#hero_mobile) #home .elementor-element-1dd3d47 { } /* ---------- MOBILE HERO — video, logo & text styling (client spec: #707B73 band, white logo + text) ---------- */ #hero_mobile .elementor-widget-video, #hero_mobile .elementor-video, #hero_mobile .hero_mobile_video /* 16:9 media block, flush, no controls reachable */ { } #hero_mobile .hero_mobile_video { } #hero_mobile .hero_mobile_video iframe { } #hero_mobile iframe, #hero_mobile video /* no hover/tap interaction reaches the player */ { } #hero_mobile .hero_mobile_text svg /* logo */ { } #hero_mobile .hero_mobile_text svg *[fill]:not([fill='none']) { } #hero_mobile .hero_mobile_text svg *[stroke]:not([stroke='none']) { } #hero_mobile .hero_mobile_text :is(h1, h2, h3, p), #hero_mobile .hero_mobile_text .elementor-heading-title { } #home .elementor-background-slideshow /* desktop image gallery — mobile uses #hero_mobile instead */ { } /* ---------- MOBILE INTRO OVERLAY — #home fixed & faded out by the JS snippet (Elementor > Custom Code) ---------- */ body.hero_intro #home /* JS adds .hero_intro, so with JS off the hero stays in normal flow */ { } body.hero_intro /* no scrolling behind the intro */ { } body.hero_intro_out #home { } body.hero_intro_out { } body.hero_intro_gone #home { } /* ---------- MOBILE INTRO — logo centred in the overlay ---------- */ body.hero_intro #home /* section carried 25% top padding / 0 bottom, pushing the logo low */ { } body.hero_intro #home .elementor-element-d3d654d /* logo row: size to the artwork, not the leftover space */ { } body.hero_intro #home .elementor-element-d3d654d svg /* SVG was stretched to 677px against a 896x169 viewBox */ { } /* ---------- NAV LOGO — hidden until scrolled (mobile) ---------- */ .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo /* hidden at the top of the page; revealed by body.page_scrolled above */ { } body.page_scrolled .elementor-270 .elementor-element.elementor-element-6139215f #full_nav_logo { } /* ---------- MOBILE HERO — logo container (clears the nav) & equal spacing around the video ---------- */ .hero_mobile_logo_container /* top padding drops the logo below the hamburger; bottom padding = gap above the video */ { } .hero_mobile_logo_container > .e-con-inner { } .hero_mobile_logo_container .elementor-widget, .hero_mobile_logo_container .elementor-widget-container { } .hero_mobile_logo_container svg, .hero_mobile_logo_container img /* logo sized off its own artwork, not the container */ { } .hero_mobile_logo_container svg *[fill]:not([fill='none']) { } .hero_mobile_logo_container svg *[stroke]:not([stroke='none']) { } #hero_mobile .elementor-widget-video, #hero_mobile .hero_mobile_video /* margins zeroed so the 32px above/below come only from the two neighbours */ { } } h2#footer_text_small a { color: #fff !important; } /* ================================================================================================ ================================================================================================ == == == >>>>>>>>>> END OF CUSTOM CSS <<<<<<<<<< == == THE ISLES — CUSTOM RESPONSIVE STYLESHEET == == == ================================================================================================ ================================================================================================ *//* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Founders Grotesk Regular'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Founders-Grotesk-Regular.woff2') format('woff2'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Founders-Grotesk-Regular.woff') format('woff'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Founders-Grotesk-Regular.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Founders Grotesk Medium'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/FoundersGrotesk-Medium.woff2') format('woff2'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/FoundersGrotesk-Medium.woff') format('woff'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/FoundersGrotesk-Medium.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Beaufort Pro Light'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Beaufort-Pro-Light-1.woff2') format('woff2'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Beaufort-Pro-Light-1.woff') format('woff'), url('https://theislesmainbeach.com.au/wp-content/uploads/2026/06/Beaufort-Pro-Light-1.ttf') format('truetype'); } /* End Custom Fonts CSS */