/* Overrides for the /website route (loaded LAST so it wins). --------------------------------------------------------------- Webflow's stylesheet sets `html { height: 100% }` and responsive-enhancements.css sets `html, body { overflow-x: hidden }`. Together they pin to the viewport height and turn it into an inner scroll container, so the page won't scroll normally. Reset to natural height/overflow and keep horizontal clipping on . */ html { height: auto !important; overflow: visible !important; } body { height: auto !important; min-height: 100%; overflow-x: clip; overflow-y: visible !important; } /* Font overrides for the /website route */ @font-face { font-family: 'ZT Talk Expanded'; src: url('/fonts/zt-talk-expanded/ZTTalk-MediumExpanded.woff2') format('woff2'); font-weight: 500; font-stretch: expanded; font-style: normal; font-display: swap; } @font-face { font-family: 'ZT Talk Expanded'; src: url('/fonts/zt-talk-expanded/ZTTalk-SemiBoldExpanded.woff2') format('woff2'); font-weight: 600; font-stretch: expanded; font-style: normal; font-display: swap; } /* Apply ZT Talk Expanded Semibold to all headers */ [data-website-route="true"] h1, [data-website-route="true"] h2, [data-website-route="true"] h3, [data-website-route="true"] h4, [data-website-route="true"] h5, [data-website-route="true"] h6 { font-family: 'ZT Talk Expanded', 'ZT Talk', system-ui, sans-serif !important; font-weight: 600 !important; font-stretch: expanded !important; } /* Apply ZT Talk Expanded Medium to all body content */ [data-website-route="true"] body, [data-website-route="true"] p, [data-website-route="true"] span, [data-website-route="true"] div, [data-website-route="true"] a, [data-website-route="true"] button, [data-website-route="true"] input, [data-website-route="true"] textarea, [data-website-route="true"] label { font-family: 'ZT Talk Expanded', 'ZT Talk', system-ui, sans-serif !important; font-weight: 500 !important; font-stretch: expanded !important; } /* The reused homeowners navbar logo uses Tailwind `h-16 w-auto`, but Webflow's global image CSS on this route forces it to full width / auto height (a giant logo). Pin it back to a fixed logo height. Match spacing/width from other pages. */ .page-wrapper img.h-16 { height: 4rem !important; width: auto !important; max-width: none !important; } /* Ensure navbar logo has consistent spacing with other pages */ .page-wrapper > nav { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* Webflow's UNLAYERED `img { height:auto }` outranks Tailwind v4's LAYERED `.h-full`/`object-cover` utilities, so the hero slideshow images collapse to natural height (image stuck at the top, black below) instead of filling the card — most visible on mobile. Force them to cover the full hero card so the /website hero is full-bleed like /homeowners. */ .reno-hero-card img { height: 100% !important; width: 100% !important; object-fit: cover !important; } /* Fix hero image zoom to properly fill the entire card without gaps on desktop */ @media (min-width: 1024px) { .reno-hero-card img { transform: scale(1.4) !important; transform-origin: center center !important; } } /* Center the reno logo in the nav (Webflow's global nav CSS overrides the Navbar's flex centering on this route). */ .page-wrapper > nav { display: flex !important; justify-content: center !important; } /* Mobile: a solid black fixed navbar at the top holding the centered logo — the hero image sits below it (the hero block reserves matching top padding). */ @media (max-width: 767px) { .page-wrapper > nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 50 !important; background: #0A0A0A !important; padding: 8px 0 !important; align-items: center !important; } } /* On the website hero the inline form is always shown on desktop, so pull the hero bottom row's right edge in to keep the "Interior Design…" caption clear of the form (it otherwise hides behind it). */ @media (min-width: 1024px) { .page-wrapper .reno-hero-bottom { right: clamp(430px, 38vw, 600px) !important; } } /* The DreamSpace slider runs on `.swiper_component` (not `.swiper`), so it doesn't inherit Swiper's default overflow:hidden — adjacent slides spill past the viewport. Clip the container on all viewports (it's a slider on desktop too now). */ .why-reno .swiper_component { overflow: hidden; } .why-reno .swiper_component .swiper-slide { box-sizing: border-box; } /* DreamSpace slider controls — prev/next arrows + clickable pagination dots, shown centred below the cards. */ .why-reno .dreamspace-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; } .why-reno .dreamspace-arrow { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; min-width: 52px; min-height: 52px; padding: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; cursor: pointer; transition: background 200ms ease, opacity 200ms ease; } .why-reno .dreamspace-arrow:hover { background: rgba(255, 255, 255, 0.18); } /* Smaller, less bulky arrows on tablet & mobile. */ @media (max-width: 1023px) { .why-reno .dreamspace-arrow { width: 38px; height: 38px; min-width: 38px; min-height: 38px; } .why-reno .dreamspace-arrow svg { width: 18px; height: 18px; } .why-reno .dreamspace-controls { gap: 16px; } } .why-reno .dreamspace-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; } .why-reno .dreamspace-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; } .why-reno .dreamspace-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; background: rgba(255, 255, 255, 0.4); opacity: 1; border-radius: 9999px; transition: width 300ms ease, background 300ms ease; } .why-reno .dreamspace-pagination .swiper-pagination-bullet-active { width: 24px; background: #fff; } /* Portfolio desktop nav arrows — clear Webflow's button padding default. */ .page-wrapper .portfolio-section .portfolio-arrow { padding: 0 !important; } /* Webflow ships a generic `.grid { position:absolute; inset:0%; grid-template-columns: 1fr×8 }` class that COLLIDES with Tailwind's `grid` display utility used by the reused WhyReno section's card grids. Because Webflow's CSS is unlayered it beats Tailwind's layered utilities, so the WhyReno grids become absolutely-positioned + mis-columned — the cards collapse and overlap the following sections. Restore normal flow for them. (The desktop bento sets its columns/rows/areas inline, so those survive; we only undo the absolute positioning there, and fix the single column on mobile.) Scoped to #why-reno only — a broader `section[class*="px-4"]` selector also caught the PortfolioSection's Tailwind `grid grid-cols-2` and collapsed it to a single stacked column on mobile. */ .page-wrapper #why-reno .grid { position: static !important; inset: auto !important; width: auto !important; aspect-ratio: auto !important; } @media (max-width: 1023px) { .page-wrapper #why-reno .grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; } } /* Same Webflow `.grid` collision hits the mobile PortfolioSection: its Tailwind `grid grid-cols-2` cards inherit Webflow's absolute + 8-column generic `.grid` (unlayered, so it beats Tailwind's layered utilities), collapsing the gallery into one stacked, oversized column. Restore normal flow and pin the gallery to the intended 2-column / auto-row grid so `col-span-2` (hero) still spans both. */ .page-wrapper .portfolio-section .grid { position: static !important; inset: auto !important; width: auto !important; aspect-ratio: auto !important; grid-template-rows: none !important; grid-auto-rows: auto !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Webflow forces a 44px min tap-target on every