/* ========================================================= Gary James — luxe polish layer (loaded after style.css) Brand palette taken from their brochure: dark slate-navy + greys. Navy on light areas, light slate on dark areas. Plus a thorough mobile / iPad pass. ========================================================= */ :root{ --gj-navy:#333d47; /* brochure navy — accents on light backgrounds */ --gj-navy-deep:#2a333d; --gj-navy-lt:#8a8d90; /* brochure grey — menu-name active/hover (darker grey, not blue) */ --gj-ink:#111016; } /* NOTE: overflow-x:hidden on breaks iOS Safari's native scroll path and causes scroll JUDDER on iPad. It isn't needed on touch (animations are off there and nothing overflows) — only contain the desktop AOS slide-in overflow, on (never ), and only on large non-touch screens where those animations run. */ @media (min-width: 1367px){ body{ overflow-x: hidden; } } /* ---------- Headings: lighter, more letter-spacing ---------- */ .headingh2, h1.mb-0, h1.text-white, .h3heading{ font-weight:300 !important; letter-spacing:.1em !important; line-height:1.18 !important; } .headingh2.text-uppercase{ letter-spacing:.16em !important; } /* Navy accent rule under CENTRED section/page titles */ .text-center .headingh2::after, .nav-box .headingh2::after, .nav-box h2::after, h1.mb-0::after{ content:""; display:block; width:60px; height:2px; background:var(--gj-navy); margin:20px auto 0; } /* On dark sections the rule uses the light slate so it stays visible */ .bg-color1 .headingh2::after, .bg-color1 h2::after{ background:var(--gj-navy-lt); } /* ---------- Buttons: ivory w/ navy edge, fills navy on hover ---------- */ .animated-button{ border:1px solid var(--gj-navy) !important; background:#fff !important; } .animated-button .top{ background:#fff !important; color:var(--gj-ink) !important; letter-spacing:.18em !important; } .animated-button .bottom{ background:var(--gj-navy) !important; color:#fff !important; letter-spacing:.18em !important; } .btnwrap .animated-button{ border-color:var(--gj-navy) !important; } .btnwrap .animated-button .top{ background:transparent !important; } /* ---------- Nav: light-slate hover/active (visible on dark + image) ---------- */ .navigation li a{ transition:color .25s ease; } .navigation li a:hover, .navigation li.active a{ color:var(--gj-navy-lt) !important; } .navigation li.active a{ background:transparent !important; } /* kill template's white box */ /* hover underline was olive-green (#5a5f55) → brochure navy */ .navigation li a::before, .navigation li a:hover::before{ background-color:var(--gj-navy) !important; } /* ---------- Links / footer ---------- */ footer a{ transition:color .25s ease; } footer a:hover{ color:var(--gj-navy-lt) !important; } .footer-bottom-links a{ color:#9a9a9a !important; text-decoration:none !important; letter-spacing:.03em; } .footer-bottom-links a:hover{ color:var(--gj-navy-lt) !important; } /* ---------- Divider lines: soft navy ---------- */ .border-line-top-botm{ border-top-color:rgba(51,61,71,.30) !important; border-bottom-color:rgba(51,61,71,.30) !important; } /* ---------- Air around section titles + gallery hover ---------- */ .nav-box{ padding-top:10px; padding-bottom:10px; } .btnonimg img, .video-wrapper video{ transition:transform .8s ease; } .btnonimg:hover img{ transform:scale(1.03); } /* ========================================================= MOBILE & iPAD (priority — client views on phone/tablet) ========================================================= */ /* ---- iPad / tablet (≤1024px) ---- */ @media (max-width:1024px){ .section-padding{ padding:56px 26px !important; } .p-200{ padding:56px 26px !important; } .video-banner{ height:72vh !important; } .headingh2{ font-size:clamp(1.6rem,4.4vw,2.3rem) !important; } h1.mb-0, h1.text-white{ font-size:clamp(1.9rem,5vw,2.6rem) !important; } /* stacked image+text blocks get even gaps */ .about-part .col-lg-5, .about-part .col-lg-6{ margin-top:0; } } /* ---- Phones (≤767px) ---- */ @media (max-width:767px){ .video-banner{ height:60vh !important; } /* heading + body sizing */ .headingh2{ font-size:clamp(1.35rem,6vw,1.9rem) !important; letter-spacing:.1em !important; } .headingh2.text-uppercase{ letter-spacing:.12em !important; } h1.mb-0, h1.text-white{ font-size:clamp(1.55rem,7vw,2.1rem) !important; } .h3heading{ font-size:1.3rem !important; } /* tighter, even section padding */ .section-padding, .p-200, .p-lg-5, .px-lg-5{ padding-left:18px !important; padding-right:18px !important; } section .p-3{ padding:18px !important; } /* generous tap targets */ .animated-button span{ padding:15px 24px !important; } /* form: 16px stops iOS auto-zoom on focus; comfy height */ .form-control{ font-size:16px !important; min-height:50px; } textarea.form-control{ min-height:120px; } /* keep the gold/navy rule tidy under smaller headings */ .text-center .headingh2::after, .nav-box .headingh2::after, h1.mb-0::after{ margin-top:14px; } /* footer: centre + space the columns */ footer .row > [class*="col-"]{ text-align:center !important; } .footer-bottom-links p{ font-size:12px; line-height:2; } /* stop any oversized media spilling */ img, video{ max-width:100%; height:auto; } .video-bg video{ height:100%; } /* keep banner cover behaviour */ /* nudge the floating widgets so they don't sit on content edges */ .elfsight-app-636726ba-2c63-47c5-907c-359aef0b7330{ z-index:40; } } /* ---- Slide-out menu: wider panel + comfortable left inset ---- */ @media (max-width:991px){ .nav-wrapper{ width:290px !important; } .navigation li a{ padding:15px 30px !important; } /* was 10px 20px — give the text room from the edge */ .navigation li .close-menu{ padding:14px 24px !important; } } /* ========================================================= Targeted fixes (process timeline + packages spacing) ========================================================= */ /* Our Process: circle cleanly breaks the connector line (number stays clear) */ @media (min-width:992px){ .process-wrapper::before{ top:100px; height:calc(100% - 200px); } .step-number{ box-shadow:0 0 0 9px #fff, 0 12px 28px rgba(0,0,0,.15) !important; } } /* Bathroom Renovation Packages: gap between the vertical side label and the text */ @media (min-width:992px){ .about-part .plain-para{ padding-left:30px; } .threeimg-vertical-section .col-lg-10{ padding-left:22px; } } /* Mobile/iPad: fixed-attachment parallax is jittery on touch devices → make it scroll normally. (any-pointer: coarse) catches ALL iPads regardless of (wide) landscape width. */ @media (any-pointer: coarse), (max-width:1366px){ .parallax, [style*="background-attachment: fixed"], [style*="background-attachment:fixed"]{ background-attachment:scroll !important; } } /* Our Process: on phone/iPad the step circle sat on the section's clipped top edge (top:0 + translateY(-50%)) so the number was cut off. Drop it fully into view. */ @media (max-width:991px){ .process-item{ padding-top:20px; } .step-number{ top:14px !important; transform:translateX(-50%) !important; } } /* With AOS disabled on phone/iPad, ensure the animated content is fully shown (AOS's initial opacity:0 would otherwise leave it invisible). */ @media (any-pointer: coarse), (max-width:1366px){ [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; } /* transform:none removes the boxes' stacking context, which let the parallax overlay paint OVER the white text boxes (washed-out "funny tone"). Lift the section content back above the overlay. */ .parallax > .container-xxl, .parallax > .container-fluid, .parallax > .container, .greybg-overlap-sec .container-xxl, .greybg-overlap-sec .container-fluid{ position:relative; z-index:1; } } /* iPad/touch scroll smoothness: give videos their own GPU layer so scrolling doesn't re-rasterise them (large autoplay videos are the main iPad jank source). */ .video-bg video, .video-banner video, .video-wrapper video{ transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* === iPad/iOS "judder under the banner" === vh recalculates when Safari's toolbar shows/hides on scroll → the banner resizes and shoves the content beneath it (the exact reported glitch). svh is a fixed reference height that does NOT change with the toolbar. (Falls back to the earlier vh rules on browsers without svh support.) */ @media (any-pointer: coarse){ .video-banner{ height: 72svh !important; } } @media (any-pointer: coarse) and (max-width: 767px){ .video-banner{ height: 62svh !important; } } /* ========================================================= ROOT CAUSE FIX — iPad "judder under the banner video" stickup.js (tmStickUp) binds an unthrottled scroll handler that reads + writes layout every frame at #headertouch_scroll (just under the banner) = forced reflow. The template only neutralised it at <=767px, so iPhone was fine but iPad (768-1366) juddered. JS init is now gated to desktop; this is the CSS kill-switch + video layer isolation so the banner boundary never reflows/repaints on touch. ========================================================= */ @media (any-pointer: coarse), (max-width: 1366px){ #stuck_container.isstuckcontainer, .isstuckcontainer{ position: static !important; top: auto !important; } .header .isStuck{ position: static !important; } .pseudoStickyBlock{ display: none !important; height: 0 !important; } } /* Give the banner its own paint/stacking boundary so the video seam stays clean */ @media (any-pointer: coarse){ .video-banner, .video-bg{ transform: translateZ(0); -webkit-transform: translateZ(0); isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #headertouch_scroll{ position: relative; z-index: 2; } } /* ---- Area page content (why-choose list + FAQ headings) ---- */ .gj-why{ list-style:none; padding-left:0; margin:0 0 6px; } .gj-why li{ position:relative; padding-left:26px; margin-bottom:12px; line-height:1.6; } .gj-why li::before{ content:""; position:absolute; left:3px; top:11px; width:8px; height:8px; background:var(--gj-navy); border-radius:50%; } .gj-faq-q{ font-weight:600; color:var(--gj-navy); font-size:1.18rem; margin:24px 0 6px; letter-spacing:.01em; } /* ---- Area page banner (static image) + dark nav fade for logo legibility ---- */ .video-banner{ position:relative; } .gj-area-banner .video-bg{ background-size:cover; background-position:center; width:100%; height:100%; } .video-banner .nav-fade{ position:absolute; top:0; left:0; right:0; height:150px; z-index:2; pointer-events:none; background:linear-gradient(to bottom,rgba(20,18,15,.45),rgba(20,18,15,0)); } /* ---- Area page in-content photos ---- */ .gj-photo{ margin:0; } .gj-photo img{ width:100%; height:auto; display:block; border-radius:8px; aspect-ratio:4/3; object-fit:cover; /* reserve the box so lazy decode causes no layout shift */ box-shadow:0 14px 32px rgba(17,16,22,.10); } /* tight, low-opacity shadow reads more premium than a big blur */ /* ---- Area page FAQ accordion (native

, click a question to open) ---- */ .gj-faqs{ margin-top:6px; } .gj-faqs details{ border:1px solid #e3e6e8; border-radius:8px; background:#fff; margin-bottom:12px; transition:box-shadow .2s ease, border-color .2s ease; } .gj-faqs details[open]{ border-color:var(--gj-navy); box-shadow:0 10px 26px rgba(17,16,22,.08); } .gj-faqs summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative; font-weight:600; color:var(--gj-navy); font-size:1.08rem; letter-spacing:.01em; } .gj-faqs summary::-webkit-details-marker{ display:none; } .gj-faqs summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:300; line-height:1; color:var(--gj-navy); transition:transform .2s ease; } .gj-faqs details[open] summary::after{ transform:translateY(-50%) rotate(45deg); } .gj-faqs .gj-faq-a{ padding:0 20px 18px; } .gj-faqs .gj-faq-a p{ margin:0; line-height:1.65; } @media (max-width:767px){ .gj-faqs summary{ font-size:1rem; padding:15px 46px 15px 16px; } .gj-faqs .gj-faq-a{ padding:0 16px 15px; } } /* ========================================================= Area page — inner-page style image+text rows (alternating photo beside a paragraph, matching the packages page: the navy vertical divider bar + heading lockup.) ========================================================= */ .gj-rowhead{ display:flex; align-items:center; gap:18px; margin-bottom:20px; } .gj-rowbar{ flex:0 0 auto; width:2px; height:52px; background:var(--gj-navy); } .gj-rowhead h2{ margin:0; } .gj-rowtext p{ line-height:1.72; margin-bottom:14px; } .gj-rowtext p:last-child{ margin-bottom:0; } .gj-rowtext .gj-why{ margin-top:6px; } /* phone / iPad: columns stack, image already sits first via Bootstrap order; give the text a little air above it */ @media (max-width:991px){ .about-part .gj-rowtext{ padding-left:0 !important; padding-right:0 !important; margin-top:22px; } } /* ---- Premium services grid (the single tinted zone on the page) ---- */ .gj-services{ background:#f6f7f8; } .gj-services-head{ margin-bottom:14px; } .gj-services-lead{ max-width:840px; margin:0 auto 32px; text-align:center; line-height:1.72; } .gj-services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .gj-service-card{ background:#fff; border:1px solid #e3e6e8; border-radius:8px; padding:30px 28px; box-shadow:0 10px 26px rgba(17,16,22,.06); } .gj-service-card h3{ font-size:1.16rem; font-weight:400; color:var(--gj-ink); letter-spacing:.04em; margin:0 0 14px; padding-bottom:13px; border-bottom:1px solid rgba(51,61,71,.18); } .gj-service-card p{ line-height:1.7; margin-bottom:12px; } .gj-service-card p:last-child{ margin-bottom:0; } /* hover-lift ONLY on the interactive service cards (NOT the narrative photos) */ @media (min-width:1367px) and (pointer:fine){ .gj-service-card{ transition:transform .4s ease, box-shadow .4s ease; } .gj-service-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(17,16,22,.12); } } @media (max-width:991px){ .gj-services-grid{ grid-template-columns:1fr; gap:18px; } .gj-service-card{ padding:24px 20px; } } /* ========================================================= TOUCH-SAFE REVEAL (gentle movement on iPad/iPhone too) AOS is dead on touch, so motion comes from an IntersectionObserver (no scroll handler, transform+opacity only = no reflow, no judder). Elements are VISIBLE BY DEFAULT; only hidden once is armed in (after confirming IO support + no reduced-motion). A 3s JS failsafe un-arms if the body script never runs, so nothing can stick. ========================================================= */ .gj-reveal{ opacity:1; transform:none; } html.js-reveal-armed .gj-reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; } html.js-reveal-armed .gj-reveal-left{ transform:translate3d(-18px,16px,0); } html.js-reveal-armed .gj-reveal-right{ transform:translate3d(18px,16px,0); } html.js-reveal-armed .gj-reveal.is-in{ opacity:1; transform:translate3d(0,0,0); } /* on stacked layouts drop the sideways slide so it can never poke a scrollbar */ @media (max-width:991px){ html.js-reveal-armed .gj-reveal-left, html.js-reveal-armed .gj-reveal-right{ transform:translateY(16px); } html.js-reveal-armed .gj-reveal.is-in{ transform:translateY(0); } } @media (prefers-reduced-motion: reduce){ html.js-reveal-armed .gj-reveal, .gj-reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ---- One-time banner zoom-settle (transform only, runs once, not a loop) ---- */ .gj-area-banner{ overflow:hidden; } html.js-banner-settle .gj-area-banner .video-bg{ will-change:transform; animation:gjBannerSettle 1.4s cubic-bezier(.22,.61,.36,1) both; } @keyframes gjBannerSettle{ from{ transform:scale(1.06); } to{ transform:scale(1); } } @media (prefers-reduced-motion: reduce){ html.js-banner-settle .gj-area-banner .video-bg{ animation:none; } }