/* ── Binova Studio — Cross-browser patches ────────────────────────────────── Loaded on every page. Fixes that belong in style.min.css but can't be edited directly. All overrides are either vendor-prefix additions, specificity bumps, or genuine bug fixes — not cosmetic changes. */ /* ── Scroll fixes: Chrome mouse-wheel + iOS pull-to-refresh ───────────────── style.min.css sets body{overflow-x:hidden}, which makes a vertical scroll-container even though is the real scroller. Two bugs result: (1) Chrome desktop: overscroll-behavior-y:none on that body scroll-container absorbed wheel events and refused to chain the scroll to , so the mouse-wheel/trackpad did nothing (the scrollbar still worked). Safari chains regardless, so it only broke in Chrome. (2) iOS Safari: pull-to-refresh is governed by the scroll root, so a reload fired when overscrolling at the top of the page. Fix: overflow-x:clip clips horizontally WITHOUT making a scroll container, so the wheel chains to normally; body:auto is a fallback for browsers without clip support; and overscroll-behavior-y:none on (the real scroll root) stops the iOS pull-to-refresh reload. */ html { overscroll-behavior-y: none; } body { overflow-x: clip; overscroll-behavior-y: auto !important; } /* ── iOS < 15: scroll-crash prevention ───────────────────────────────────── backdrop-filter on a position:fixed element forces the entire page into a GPU compositing layer on older iOS. Under memory pressure the GPU layer is evicted and the page goes blank / reloads. Remove the effect and substitute an opaque background so the nav stays readable. */ .ios-legacy #nav, .ios-legacy .nav-dropdown, .ios-legacy .drawer-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ios-legacy #nav { background: rgba(255,255,255,.98) !important; } .ios-legacy #nav.nav--scrolled { background: rgba(255,255,255,.99) !important; } .ios-legacy .nav-dropdown { background: #fff !important; } .ios-legacy .k-card-brochure-btn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,.78) !important; } /* Too many simultaneous will-change:transform elements exhaust GPU memory */ .ios-legacy .gsap-fade, .ios-legacy .reveal-line__inner { will-change: auto !important; } /* ScrollTrigger parallax is the #2 cause of iOS scroll crashes */ .ios-legacy .parallax-img { transform: none !important; will-change: auto !important; } /* ── Form inputs: prevent iOS auto-zoom on focus ──────────────────────────── iOS zooms when an input's font-size is below 16px. style.min.css sets .form-input at 15px, which triggers this on every iPhone. */ .form-input { font-size: 16px !important; } /* ── Sticky sidebar: -webkit- vendor prefix (Safari < 13) ────────────────── position:sticky without the vendor prefix is ignored on Safari < 13. */ .living-values-sidebar { position: -webkit-sticky; position: sticky; } /* ── Grid label links: display:contents breaks click targets ──────────────── An with display:contents has no box model — its click area collapses to zero in some browsers. Replace with block so the full card is tappable. */ .l-grid-label-link { display: block; } /* ── Heading text rendering: skip optimizeLegibility on mobile ────────────── text-rendering:optimizeLegibility triggers kerning and ligature layout for every heading. On mobile CPUs this adds measurable paint time. Auto is faster and looks identical at typical heading sizes. */ @media (max-width: 900px) { h1, h2, h3, h4, h5, h6 { text-rendering: auto; } } /* ── Drawer footer: iPhone home-bar safe area ─────────────────────────────── Without env(safe-area-inset-bottom), the drawer CTA sits behind the home indicator on iPhone X and later. */ .drawer-footer { padding-bottom: max(clamp(24px, 4vw, 40px), calc(env(safe-area-inset-bottom) + 16px)); } /* ── Scroll indicator: writing-mode vendor prefix (Safari < 14) ───────────── Safari added unprefixed writing-mode in 14. Older versions need -webkit-. */ .hero-scroll-label { -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; } /* ── WhatsApp button: reset green pill + icon alignment + clean hover underline style.min.css gives .whatsapp-btn a green background + white text. Reset to plain text style matching phone/email links, with SVG icon centered via flex. */ .whatsapp-btn { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; background: none !important; color: inherit !important; padding: 0 !important; margin: 0 !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: none !important; border-radius: 0 !important; transition: none !important; text-decoration: none !important; } .whatsapp-btn:hover { background: none !important; color: inherit !important; text-underline-offset: 3px !important; text-decoration-skip-ink: auto !important; } .whatsapp-btn svg { display: block !important; flex-shrink: 0 !important; margin-right: 6px; opacity: 0.7; } /* ── Inner page hero: remove gap between eyebrow label and headline ────────── page-hero__content is a flex column with a default gap. Zeroing the label's margin collapses just the space between the label and the h1 beneath it. */ .page-hero__content { gap: 0 !important; } /* ── Hero copy group: tighten spacing between location, headline, tagline ──── hero-content has gap:18px between all flex children. Wrapping the three text elements lets us use a smaller inner gap while keeping normal spacing above the button row. */ .hero-copy { display: flex; flex-direction: column; gap: 0; } .hero-scroll-indicator { display: none !important; } .hero-location { color: rgba(245,243,240,.9) !important; } .hero-sub { color: rgba(245,243,240,.9) !important; } /* ── About intro buttons: force equal width ──────────────────────────────── */ .about-intro .btn { min-width: 220px !important; } /* ── Buttons: always center text (needed when btn is full-width block) ────── */ .btn { text-align: center !important; } .editorial__img-col:hover .editorial__img { animation: none !important; } .statement-section:hover .statement-section__img { animation: none !important; } .showroom-photo:hover img, .showroom-photo:nth-child(n):hover img { animation: none !important; } /* ── Page transitions: curtain panels start covering screen ───────────────── animations.js immediately sets scaleY(1) via GSAP then animates to 0. Giving panels scaleY(1) in CSS (no !important) ensures zero flash before GSAP fires — GSAP inline styles still override this for the animation. */ .curtain-panel { transform: scaleY(1); background: #f5f3f0; } /* ── CSS-only safety fallback: if JS fails to dismiss the preloader/curtain ─ After 5s, force both invisible via CSS animation. When JS works correctly it hides them in under 2s so this never fires in normal operation. */ @keyframes bv-force-hide { to { opacity: 0; pointer-events: none; visibility: hidden; } } #preloader { animation: bv-force-hide 0.6s ease 5s forwards; } #curtain { animation: bv-force-hide 0.6s ease 5s forwards; } @media (prefers-reduced-motion: reduce) { /* JS skips the reveal animation and instantly hides panels via gsap.set. Start at scaleY(0) here so there's no flash of dark curtain before GSAP fires. */ .curtain-panel { transform: scaleY(0) !important; } } /* ── Preloader: cream background so black logo is readable ─────────────────── style.min.css sets #preloader to near-black (#0d0c0b); override with the site's own cream so the black logo is visible and there's no dark flash. */ #preloader { background: #f5f3f0 !important; } .preloader-line { background: rgba(26,25,24,.1) !important; } .preloader-line:after { background: rgba(26,25,24,.5) !important; } .preloader-line-fill { background: rgba(26,25,24,.5) !important; } /* ── Phone landscape: hero is too cramped, page-hero overflows viewport ───── In landscape a phone viewport is only ~360–450px tall. The default hero headline (clamp 58→116px) and inner page-hero (min-height:480px) overflow badly. Scale text down, hide secondary chrome, and cap heights. max-height:500px targets phones; tablets in landscape are typically taller. */ @media (orientation: landscape) and (max-height: 500px) { /* ── Home page video hero ── */ .hero-headline { font-size: clamp(24px, 9vh, 40px) !important; line-height: 1 !important; letter-spacing: -.01em !important; } .hero-content { bottom: max(10px, env(safe-area-inset-bottom)) !important; gap: 8px !important; } .hero-location { font-size: 8px !important; letter-spacing: .18em !important; } .hero-sub { display: none !important; } .hero-scroll-indicator { display: none !important; } .hero-bottom-row { gap: 8px !important; } .hero-content .btn { padding: 10px 18px !important; font-size: 9px !important; } /* ── Inner page hero ── min-height:480px overflows a ~360px landscape viewport entirely. */ .page-hero { height: 56vh !important; height: 56svh !important; min-height: 160px !important; } .page-hero__title { font-size: clamp(22px, 7vh, 36px) !important; line-height: 1.05 !important; } .page-hero__content { padding-bottom: max(14px, env(safe-area-inset-bottom)) !important; } /* ── Nav safe area in landscape (notch on left/right) ── */ #nav { padding-left: max(24px, calc(env(safe-area-inset-left) + 16px)) !important; padding-right: max(24px, calc(env(safe-area-inset-right) + 16px)) !important; } } /* ── Cookie banner: home-bar safe area + reduced-motion fix ───────────────── style.min.css pads left/right but has no padding-bottom, so the buttons are hidden behind the iPhone X home indicator (34px safe area). Also: when prefers-reduced-motion is on, style.min.css forces transition-duration:0.01ms on *, which can prevent iOS Safari from repainting the banner to its final translateY(0) state. Override both. */ .cookie-banner { padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; z-index: 100002 !important; } .scroll-top { z-index: 100001 !important; /* Glide (not snap) when lifted above / dropped below the cookie banner. No !important so the reduced-motion override below still wins. */ transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none !important; transform: translateY(100%) !important; } .cookie-banner.is-visible { transform: translateY(0) !important; } .scroll-top { transition: none !important; } .scroll-top.is-visible { opacity: 1 !important; pointer-events: all !important; transform: none !important; } } /* ── Cookie banner: center the buttons once they wrap (phones) ────────────── The banner is a wrapping flexbox with justify-content:space-between. On wide and medium screens the text and buttons share one row (buttons right-aligned, looks good). Below ~460px the Decline/Accept block wraps onto its own line, and space-between then pins that single item to the LEFT — which reads as a lopsided, "off" layout. Forcing the actions to full width + centered at phone widths gives a clean, intentional stacked layout (text above, buttons centered below). Breakpoint sits just above the measured 460px wrap point. */ @media (max-width: 480px) { .cookie-banner__actions { width: 100%; justify-content: center; } } /* ── Scroll-to-top: home-bar safe area ────────────────────────────────────── On mobile, style.min.css sets bottom:80px which doesn't account for the iPhone home indicator. Keep 80px on old iPhones; add safe-area on X+. */ @media (max-width: 768px) { .scroll-top { bottom: calc(56px + max(24px, env(safe-area-inset-bottom))) !important; } } /* ── Scroll-to-top: clear the cookie banner ───────────────────────────────── The cookie banner is a full-width fixed bar pinned to bottom:0; the back-to- top arrow is also bottom-anchored, so the banner overlapped it (≈19px on desktop, up to ≈50px on phones). The banner's .is-visible class is only ever added by JS, so the banner can never cover the arrow unless JS is running — which means this general-sibling rule (banner precedes arrow in the DOM on every page) is a complete, browser-universal fix with no JS changes. It only applies while the banner is up and reverts the instant it's dismissed. The banner text is fixed, so its height is deterministic per width (measured: ~60px desktop → 149px at 320px as the text/buttons wrap). Each band lifts the arrow to clear the banner's tallest height in that range plus a small gap; mobile bands add the home-indicator safe area, which inflates the banner too. Range (min+max) media queries ensure exactly one band matches at any width. */ .cookie-banner.is-visible ~ .scroll-top { bottom: 84px !important; /* >768px: banner ~60px */ } @media (max-width: 768px) and (min-width: 601px) { .cookie-banner.is-visible ~ .scroll-top { bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; /* banner 62–88px */ } } @media (max-width: 600px) and (min-width: 481px) { .cookie-banner.is-visible ~ .scroll-top { bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important; /* banner 88–107px */ } } @media (max-width: 480px) and (min-width: 376px) { .cookie-banner.is-visible ~ .scroll-top { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; /* banner 107–130px */ } } @media (max-width: 375px) { .cookie-banner.is-visible ~ .scroll-top { bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important; /* banner 130–150px */ } } /* ── View Transitions API: eliminate navigation flash ─────────────────────── When the user clicks to a new page, the browser normally shows a blank white frame between unloading the old page and painting the new one. With navigation:auto the browser takes a live snapshot of the old page (cream curtain panels covering it) and holds that snapshot while the new page loads — zero gap. Supported on Chrome 111+ and Safari 18+; all other browsers silently fall back to the existing behavior. animation:none on the pseudo-elements keeps the built-in crossfade out of the way; our own preloader handles the visible reveal. */ /* @view-transition removed — conflicts with custom preloader/curtain system */ /* ── No-JS animation fallback ─────────────────────────────────────────────── When JS is disabled GSAP never runs, leaving .gsap-fade elements invisible and .reveal-line__inner elements clipped above their containers forever. Expose everything immediately so the page is readable without JS. */ .no-js .gsap-fade { opacity: 1 !important; transform: none !important; } .no-js .reveal-line__inner { transform: none !important; } .no-js .section-rule { transform: scaleX(1) !important; } .no-js #preloader, .no-js #curtain { display: none !important; } /* ── Design Guides nav link: secondary styling, desktop dropdown ───────────── Slightly muted vs. main collection links; hover restores full legibility. */ .nav-guides-desktop { color: rgba(26,25,24,.4) !important; } .nav-guides-desktop:hover { color: rgba(26,25,24,.85) !important; background: rgba(26,25,24,.04) !important; } /* ── Design Guides in mobile drawer ───────────────────────────────────────── Identical to other drawer-sub-link items — no size, color, or border differences so it fits seamlessly in the Collections sub-menu. */ .nav-guides-drawer { color: hsla(0,0%,100%,.55) !important; font-size: clamp(12px,1.6vw,15px) !important; border-top: none !important; margin-top: 0 !important; } .nav-guides-drawer:hover { color: hsla(0,0%,100%,.9) !important; } /* ── Editorial image col: fix white space on mobile ───────────────────────── style.min.css has two competing approaches: legacy padding-top:75% + img position:absolute (base) and modern aspect-ratio:4/3 (≤900px). On mobile the legacy padding-top doubles the height and can leave gaps. Override to the clean modern approach: no padding-top, aspect-ratio drives the height, image is relative-positioned and fills via width/height 100%. */ @media (max-width: 900px) { .editorial__img-col { padding-top: 0 !important; aspect-ratio: 4 / 3 !important; width: 100% !important; } .editorial__img-col img, .editorial__img { position: relative !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } } @media (max-width: 600px) { .editorial__img-col { aspect-ratio: 16 / 10 !important; max-height: 280px !important; } } /* ── Room categories heading: center "Every Room, Reimagined." ─────────────── */ .collections-header { text-align: center !important; } /* ── CTA section buttons: center + equal width ─────────────────────────────── style.min.css sets align-items:stretch at ≤680px, which left-pins buttons when max-width prevents them from stretching fully. Override to center. */ .cta-btns { align-items: center !important; justify-content: center !important; } .cta-btns .btn { flex: 0 0 auto !important; width: 100% !important; max-width: 300px !important; text-align: center !important; justify-content: center !important; } /* ── Editorial button rows: center + equal-width on ALL pages ──────────────── Targets the direct-child div inside every editorial text column (the button wrapper) without requiring a class on each HTML file. Also covers the .editorial-btns class used on the home page. flex:0 0 auto with matching min/max-width forces siblings to the same size regardless of label length. */ .editorial__text-col > div, .editorial-b__text-col > div, .editorial-btns { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; } .editorial__text-col > div .btn, .editorial-b__text-col > div .btn, .editorial-btns .btn { flex: 0 0 auto !important; min-width: 180px !important; max-width: 240px !important; text-align: center !important; justify-content: center !important; } /* ── Inner page sections: center text + remove narrow max-width ────────────── Each major page uses its own CSS class for its content sections. The patterns are identical to the editorial sections: a 2-col grid collapses to 1-col on mobile/small desktop, leaving body text left-aligned inside a wide column. Fixing each container: text-align:center on the column, max-width removed from constrained children, align-items:center on button wrappers. */ /* — About page + collection pages (kitchens/bathrooms/closets/livingrooms) ── */ /* These pages all use .about-intro for their text+image layout. */ /* Text column of about-intro grid (first child, not the image col) */ .about-intro > div:not(.about-intro__img) { text-align: center !important; } /* All child divs: margin:auto centers constrained blocks (button wrappers with max-width). Do NOT add align-items:center here — text wrapper divs are also flex columns and align-items:center would shrink-wrap paragraphs to their content width, breaking layout and causing GSAP animation glitches. */ .about-intro > div:not(.about-intro__img) > div { margin-left: auto !important; margin-right: auto !important; } /* Button wrapper only (last child div): safe to center-align its flex items because buttons have explicit widths (inline width:250px or .btn max-width). */ .about-intro > div:not(.about-intro__img) > div:last-child { align-items: center !important; justify-content: center !important; } /* about-split 2-col grid: text is first child */ .about-split > div:first-child { text-align: center !important; } /* Remove inline max-width so paragraphs fill the column */ .about-intro .t-body, .about-split .t-body { max-width: none !important; } /* — Showroom page ——————————————————————————————————————————————————————————— */ .editorial-split-grid > div:first-child { text-align: center !important; } /* Center constrained child divs (button wrappers with max-width) */ .editorial-split-grid > div:first-child > div { margin-left: auto !important; margin-right: auto !important; justify-content: center !important; } /* Button wrapper only (last child div) — safe to align-items:center */ .editorial-split-grid > div:first-child > div:last-child { align-items: center !important; } .editorial-split-grid .t-body { max-width: none !important; } /* ── editorial-split-grid: image-left / text-right layout (last child = text col) ─ When grid stacks at ≤900px the text column stays left-aligned. Center it and center any bare .btn that is a direct child (no wrapper div). */ @media (max-width: 900px) { .editorial-split-grid > div:last-child { text-align: center !important; } .editorial-split-grid > div:last-child > .btn { display: block !important; width: 100% !important; max-width: 300px !important; margin: 0 auto !important; justify-content: center !important; text-align: center !important; } } /* — Trade page —————————————————————————————————————————————————————————————— */ /* trade-intro body text stays left-aligned by design (long-form professional copy reads better left-aligned; user confirmed this preference). */ .trade-intro { text-align: left !important; } .trade-commitment { text-align: center !important; } .trade-commitment h2 { max-width: none !important; } .trade-access__inner { text-align: center !important; } .trade-access__body { max-width: none !important; } /* ── Room intro grid (bathrooms page): center text + buttons on mobile ──────── At ≤900px the 2-col grid stacks to 1 col. Text and button wrapper stay left-aligned by default. Center them to match the other collection pages. */ @media (max-width: 900px) { .room-intro-grid > div:first-child { text-align: center !important; } .room-intro-grid > div:first-child .t-body { max-width: none !important; } /* Button wrapper has inline max-width:300px — expand it, center it, center items */ .room-intro-grid > div:first-child > div { max-width: none !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; } .room-intro-grid > div:first-child > div .btn { max-width: 300px !important; width: 100% !important; } } /* ── Editorial body text: remove narrow max-width so text fills the column ─── style.min.css sets max-width:36ch on .editorial__body and 38ch on .editorial-b__body. In the wide text column on desktop this leaves a lot of empty space to the right, making the text appear hard left-aligned. The column's own padding (clamp(48px,7vw,100px)) already provides ample breathing room, so the max-width cap is not needed. */ .editorial__body, .editorial-b__body { max-width: none !important; } /* ── Editorial text cols: center text at all sizes ─────────────────────────── On desktop the text cols are in a 2-col grid; on mobile they stack full-width. In both cases the body text and headlines should be centered. The mobile block also adds align-items:center so constrained-width children (buttons, body paragraphs) are centered as a block, not just their internal text. */ .editorial__text-col, .editorial-b__text-col { text-align: center !important; } /* ── Editorial text cols + button rows: center on mobile ────────────────────*/ @media (max-width: 900px) { /* align-items intentionally omitted — editorial text cols may be flex columns, and align-items:center would shrink-wrap paragraph children to content width. text-align:center on the parent already centers text within full-width blocks. */ /* Fix editorial-b image column: same competing-CSS issue as editorial__img-col */ .editorial-b__img-col { padding-top: 0 !important; aspect-ratio: 4 / 3 !important; width: 100% !important; } .editorial-b__img-col img { position: relative !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } } @media (max-width: 600px) { .editorial-b__img-col { aspect-ratio: 16 / 10 !important; max-height: 280px !important; } } /* ── Drawer: scrollable across the full burger range (≤900px) ─────────────── Base CSS: .drawer-links{flex:1;overflow-y:auto} locks the nav list to the viewport height and clips overflow internally. style.min.css only fixes this at ≤768px (overflow-y:visible + flex:1 1 auto so #drawer scrolls). Extend the same pattern to 769–900px where burger is still shown. */ @media (max-width: 900px) { #drawer { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .drawer-links { overflow-y: visible !important; flex: 1 1 auto !important; padding-bottom: 80px; } .drawer-collections-sub.is-open { max-height: 2000px !important; } } /* ── Mobile drawer footer: center the CTA button ───────────────────────────── style.min.css sets flex-direction:column;align-items:flex-start at ≤600px, leaving the drawer "Schedule" button left-aligned. Center it to match desktop. */ @media (max-width: 600px) { .drawer-footer { align-items: center !important; } } /* ── About intro / collection page button wrappers: center on all screen sizes ─ These divs have inline align-items:flex-start. Our !important override centers the stacked buttons (width:250px) within the full-width text column. */ .about-intro > div:not(.about-intro__img) > div[style*="flex-direction:column"] { align-items: center !important; } /* ── Contact form submit button: center text, full width on mobile ─────────── On mobile style.min.css sets width:100% but justify-content isn't !important so the text renders left-aligned inside the wide button. */ .form-submit .btn { justify-content: center !important; text-align: center !important; } @media (max-width: 600px) { .form-submit { align-self: stretch !important; } .form-submit .btn { width: 100% !important; } } /* ── Stats grid: collapse to 2×2 on mobile ─────────────────────────────────── Inline style forces repeat(4,1fr) at all sizes — 4 columns on a 375px phone leaves ~60px per cell, making numbers and labels unreadably cramped. */ @media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(20px, 5vw, 32px) !important; } } /* ── Brochure strip: center text + button on mobile, keep side-by-side on desktop ─ Desktop: flex row with space-between (text left, button right). ≤900px: stack to column, center text and button. margin:auto is the most reliable centering for a flex item that also has width:100%. */ @media (max-width: 900px) { .brochure-strip-row { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .brochure-strip-text { text-align: center !important; width: 100% !important; } .brochure-strip-row .btn { display: flex !important; width: 100% !important; max-width: 300px !important; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; text-align: center !important; } } /* ── Room card category label: hide on small screens ──────────────────────── "Binova Studio" at 9px + wide letter-spacing overflows the 2-col card width on mobile. The room name alone is sufficient at that size. */ @media (max-width: 768px) { .room-card__category { display: none !important; } } /* ── Room grid: 4 equal square columns ────────────────────────────────────── Overrides the default 3-col layout; Living card wide-span removed in HTML. */ .room-card--wide { grid-column: auto !important; } .room-card { aspect-ratio: 4 / 3 !important; position: relative !important; overflow: hidden !important; background: #1a1918 !important; } /* 32px bleed: gives Ken Burns panning room so background never peeks at edges */ .room-card__img-wrap { position: absolute !important; inset: -16px !important; width: calc(100% + 32px) !important; height: calc(100% + 32px) !important; aspect-ratio: unset !important; overflow: hidden !important; transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } .room-card:hover .room-card__img-wrap, .room-card:focus-visible .room-card__img-wrap { transform: scale(1.03) !important; } .room-card__img { object-fit: cover !important; width: 100% !important; height: 100% !important; opacity: 1 !important; } /* style.min.css dims image to 0.72 on hover — override to keep full opacity */ .room-card:hover .room-card__img, .room-card:focus-visible .room-card__img { opacity: 1 !important; } /* ── Touch devices: kill all hover motion on room cards ───────────────────── @keyframes g starts at translate(-1.5%,1%). iOS briefly fires :hover during scroll momentum, which snaps the image to that offset then snaps back — visually jarring. Fix: kill transition on img-wrap (so any hover snap is instant and invisible) + kill animation + kill scale. Desktop mouse-hover keeps Ken Burns and scale intact. */ @media (pointer: coarse) { .room-card__img-wrap { transition: none !important; } .room-card:hover .room-card__img-wrap, .room-card:focus-visible .room-card__img-wrap { transform: none !important; } .room-card .room-card__img, .room-card:hover .room-card__img, .room-card:focus-visible .room-card__img { animation: none !important; transform: none !important; } /* Text body: always in final position (no hover needed to reveal) */ .room-card__body { transform: translateY(0) !important; transition: none !important; } /* Explore CTA: always visible — there's no hover on touch */ .room-card__cta { color: hsla(0, 0%, 100%, 0.6) !important; transition: none !important; } .room-card__arrow { transform: translateX(0) !important; transition: none !important; } } /* Softer gradient — lets photography breathe, still anchors text */ .room-card__overlay { background: linear-gradient( 0deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.10) 44%, transparent 70% ) !important; opacity: 1 !important; } /* ── Room grid: single column stack on mobile ─────────────────────────────── Below 768px the 2×2 grid collapses to 1 column — all 4 cards stacked. */ @media (max-width: 767px) { .room-grid { grid-template-columns: 1fr !important; } .room-grid .room-card { aspect-ratio: 4 / 3 !important; } } /* ── Showroom page: mobile responsive grids ───────────────────────────────── Four-col visit-info, three-col what-to-expect, three-col testimonials, and the two-col map panel all need to stack on mobile. */ /* Visit info: 4-col → 2-col → 1-col */ @media (max-width: 800px) { .visit-info-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .visit-info-grid { grid-template-columns: 1fr !important; } } /* What to Expect: 3-col → 1-col */ @media (max-width: 700px) { .what-to-expect-grid { grid-template-columns: 1fr !important; } } /* Reviews grid: 3-col base (was inline on index.html) */ .reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,48px); } .reviews-grid figure { padding: clamp(24px,3vw,40px); } @media (max-width: 767px) { .reviews-grid { gap: 20px !important; } .reviews-grid figure { padding: 24px !important; } } /* Testimonials: 3-col → 1-col */ @media (max-width: 700px) { .reviews-grid { grid-template-columns: 1fr !important; } } /* Map grid: side-by-side → stacked */ @media (max-width: 700px) { .map-grid { grid-template-columns: 1fr !important; } .map-grid > div:last-child { min-height: 300px !important; } } /* ── Service area cards (index.html section) ────────────────────────────────*/ .sa-card { display:block; padding:clamp(16px,2.5vw,24px); background:#fff; border:1px solid #e8e6e3; text-decoration:none; transition:border-color .2s; } .sa-card:hover { border-color:#1a1918; } .sa-county { font-family:'Jost',sans-serif; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#6b6966; font-weight:400; margin:0 0 .35em; } .sa-town { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.1rem; font-weight:400; color:#1a1918; margin:0 0 .35em; letter-spacing:.02em; } .sa-arrow { font-family:'Jost',sans-serif; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#6b6966; } @media(max-width:900px){ .sa-grid { grid-template-columns:repeat(2,1fr) !important; } } @media(max-width:480px){ .sa-grid { grid-template-columns:1fr !important; } } @media(max-width:768px){ .sa-county { font-size:11px !important; letter-spacing:.12em; } .sa-arrow { font-size:11px !important; letter-spacing:.10em; } } /* ── Trade inquiry form: single-col on mobile ───────────────────────────────*/ @media(max-width:600px){ #trade-inquiry-form { grid-template-columns:1fr !important; } } /* ── Drawer: remove separator line under last sub-link (Design Guides) ──────*/ .drawer-sub-link:last-child { border-bottom: none !important; } /* ── Nav: safe-area-inset-top fix for iOS notch + toolbar shift ───────────── min-height instead of height:calc() so the nav is never shorter than 80px + safe-area even if env() briefly reports 0 during iOS toolbar show/hide. -webkit-transform forces a GPU compositing layer which eliminates the iOS position:fixed repaint flicker on scroll. The plain 80px min-height is a fallback: on browsers too old to support env() the calc() line is dropped, and since height:auto overrides the base height:80px, the nav would otherwise collapse with no floor. */ #nav { -webkit-transform: translate3d(0, 0, 0) !important; padding-top: env(safe-area-inset-top, 0px) !important; padding-bottom: 0 !important; height: auto !important; min-height: 80px !important; min-height: calc(80px + env(safe-area-inset-top, 0px)) !important; } /* ── Marquee strip: seamless loop ─────────────────────────────────────────── animations.js clones .marquee-track and scrolls both by one track-width to create an infinite loop. That only looks seamless if the two tracks sit side by side — but .marquee-strip is a block container in style.min.css, so the clone stacks below the original and the strip "runs out of text", leaving a blank gap before it repeats. Make the strip a flex row and stop the tracks from shrinking so the clone trails the original horizontally. */ .marquee-strip { display: flex !important; flex-wrap: nowrap !important; } .marquee-strip > .marquee-track { flex-shrink: 0 !important; } /* ── Hero: keep narrow desktop windows from going dark ────────────────────── The hero video is full-bleed with object-fit:cover. As the window gets narrower than the 16:9 footage it crops the sides and zooms into the centre, which is often darker — and the heavy base overlay (0.86 bottom) compounds it. The darkening starts well before the window is portrait, so a single portrait-only rule left a band of landscape-but-narrow sizes still dark. Fix it as a two-tier ramp scoped to fine-pointer (desktop/laptop) only, so phones and genuinely wide monitors (aspect > 1.5) are untouched: • Tier 1 (aspect ≤ 1.5): mild overlay lift + small brightness boost • Tier 2 (aspect ≤ 1.0): stronger lift + bigger boost (wins in overlap) */ @media (pointer: fine) and (max-aspect-ratio: 3/2) { .hero-overlay { background: linear-gradient(180deg, rgba(12,11,10,0.16) 0%, rgba(12,11,10,0.18) 34%, rgba(12,11,10,0.60) 100%), linear-gradient(90deg, rgba(12,11,10,0.15) 0%, rgba(12,11,10,0) 70%) !important; } .hero-video-iframe, .hero-fallback-img { -webkit-filter: brightness(1.10) !important; filter: brightness(1.10) !important; } } @media (pointer: fine) and (max-aspect-ratio: 1/1) { .hero-overlay { background: linear-gradient(180deg, rgba(12,11,10,0.08) 0%, rgba(12,11,10,0.10) 34%, rgba(12,11,10,0.38) 100%), linear-gradient(90deg, rgba(12,11,10,0.08) 0%, rgba(12,11,10,0) 70%) !important; } .hero-video-iframe, .hero-fallback-img { -webkit-filter: brightness(1.22) !important; filter: brightness(1.22) !important; } } /* ── Cloudflare Stream hero — cover the hero area (iframes ignore object-fit) ── */ .hero-stream{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; /* 16:9 sized from width */ min-width:177.78vh; min-height:100vh; /* 16:9 sized from height (covers portrait) */ border:0; pointer-events:none; } .hero-fallback-img{z-index:0} /* ── Content gutter fix: .container had max-width + margin:auto but NO side padding, so on any screen narrower than its inline max-width (smaller desktop windows and mobile) the text sat flush against the page edges. .wrap (used by the main pages) already has padding-inline; .container did not. Add the same kind of responsive gutter so content never touches the edges. box-sizing keeps the inline max-width honest, and env() respects notch safe-areas. Hero/content sections use padding:N 0 N (zero horizontal) so this does not double up; the few sections that already pad horizontally just get a touch more breathing room (harmless). */ .container { box-sizing: border-box; padding-left: max(clamp(20px, 5vw, 40px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 5vw, 40px), env(safe-area-inset-right)); } /* ── Brand logo +25% in the top bar (all pages) ──────────────────────── Company wanted the nav logo larger. The lockup is WIDTH-constrained inside its 120x72 box (object-fit:contain renders it ~120x49, leaving vertical whitespace), so widening the box scales the whole mark proportionally. 120 -> 150px = +25% (visible ~150x62), the middle ground: 35%/162px read too big, 15%/138px too subtle. Still ~9px headroom in the 80px bar. Box height (72) and bar height (80) are untouched, so no other layout shifts. */ .nav-logo { width: 150px; } .nav-logo-img { width: 150px; } /* ── "Made in Italy" corner badge on collection cards — more visible ───────── style.min.css renders .k-card__origin tiny (8px, 60% white) and even hides it. Make it a clear, always-visible top-right badge: larger, full-white text on a blurred dark chip with padding + hairline border. !important to beat the base rules (incl. the :hover opacity:0). Applies on all 6 pages that use k-cards. */ .k-card__origin { opacity: 1 !important; font-size: 9.5px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; color: #fff !important; background: rgba(26, 25, 24, 0.7) !important; padding: 5px 11px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (max-width: 600px) { .k-card__origin { font-size: 8.5px !important; padding: 4px 9px !important; letter-spacing: 0.12em !important; } } /* ── Smoother scroll animations ────────────────────────────────────────────── The about-page photo and parallax/showroom images are driven by scroll-scrubbed GSAP transforms (Ken-Burns scale + parallax). Promoting them (and the masked text reveals) to their own GPU layer with will-change stops per-frame repaints that were lagging the page and stuttering the text-reveal animations. */ .about-intro__img img, .parallax-img, .showroom-photo img { will-change: transform; } .reveal-line__inner { will-change: transform; } /* ── "Download Brochure" button: keep it in the bottom-RIGHT corner at every width (an earlier tweak that moved it bottom-left collided with the card copy — reverted). Size it consistently at all widths: the desktop base read too chunky (10px), AND a grouped rule in style.min.css (@media max-width:768px, shared with .k-card__origin/.showroom-photo__tag) bumped it to 11px — so it was actually BIGGER on phones/tablet than desktop. One unscoped rule fixes both. */ .k-card-brochure-btn { font-size: 9px !important; letter-spacing: 0.14em !important; padding: 6px 11px !important; } .k-card-brochure-btn svg { width: 9px !important; height: 9px !important; } /* ── Burger drawer footer: the address/CTA block is centered, but its text lines were left-aligned (text-align:start) so the shorter lines hugged the left and looked off-centre. Centre the lines. ─────────────────────────────────────── */ .drawer-footer { align-items: center; } .drawer-footer-info, .drawer-footer-cta { text-align: center; } /* ── Hero on touch devices: the Cloudflare Stream iframe frequently won't autoplay on phones/tablets (iOS Low Power Mode, Data Saver, in-iframe autoplay limits), leaving a blank WHITE box. Show the high-res poster image instead — it always renders, so the hero is never blank. Desktop (mouse) keeps the video. The base mobile CSS hid the poster and styled a non-existent ".hero-video-iframe" class, which is why phones got the white screen. ──────────────────────────────────── */ @media (hover: none) and (pointer: coarse) { .hero-stream { display: none !important; } .hero-fallback-img { display: block !important; z-index: 1 !important; object-position: center 42% !important; } /* The static showroom frame doesn't need the heavy video overlay; lighten it so the kitchen is clearly visible while keeping the bottom dark for headline text. */ .hero-overlay { background: linear-gradient(180deg, rgba(12,11,10,0.12) 0%, rgba(12,11,10,0.28) 40%, rgba(12,11,10,0.74) 100%) !important; } }