/** * Kitchen / Wardrobe / Vanity configurator pages. * * Three related corrections: * 1. The app runs full bleed, not inside the 1170px content container. * 2. No gap between the site header and the top of the app. * 3. The app fills the viewport below the header, so its bottom bar - the * DRAWING / INFORMATION / INSPIRATIONS buttons and the TOTAL + Add strip - * is always on screen instead of sitting at a fixed 684px and falling * below the fold. * * --cabina-header-h is measured at runtime by configurator-pages.js; the * fallback keeps the layout sane if that script never runs. */ /* --cabina-header-h is set on by configurator-pages.js. Do NOT declare a default here: a declaration on body shadows the inherited value from , so the measured height would never reach the calc below. The fallback goes at the point of use instead. */ .cabina-app-page { --cabina-app-min-h: 520px; } /* --- 0. Let the page scroll normally ------------------------------------- */ /* * Each app's own stylesheet ships `html, body, #root { width:100%; height:100% }` * - correct for the standalone Vite app, which owns the whole page, and still * needed there so #root has a percentage height to resolve against. * * Inside WordPress it is wrong: it pins to exactly the viewport height, * so the window can never scroll. picks up the overflow instead and * becomes the scroll container. Everything keyed to window scroll then breaks * silently - the theme's scroll-to-top button (footer.php) is positioned by * jquery.main.js from jQuery(window).scrollTop(), which stays 0 forever, so on * all three apps the button sat parked at bottom:-100px. * * Handing scrolling back to the document makes these pages behave like Home and * About Us, where the same button already works. The app keeps its height from * the calc() in section 3 below, which is absolute and does not depend on the * height of body. */ html:has(> body.cabina-app-page), body.cabina-app-page { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: visible; } /* --- 2. Kill the gap above the app --------------------------------------- */ .cabina-app-page #main > .container-fluid { padding-top: 0 !important; padding-bottom: 0 !important; } .cabina-app-page .breadcrumb-container { display: none; } /* --- 1. Full bleed ------------------------------------------------------- */ .cabina-app-page #main > .container-fluid, .cabina-app-page #main > .container-fluid > .row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: none; width: 100%; } .cabina-app-page #main > .container-fluid > .row > [class*="col-"] { padding-left: 0; padding-right: 0; width: 100%; max-width: none; flex: 0 0 100%; } .cabina-app-page .entry-content, .cabina-app-page article { max-width: none; } /* Elementor boxes its containers to the kit's 1170px - the app should not be. Scoped to #main: the site header and footer are Elementor containers too, and widening those stretched the footer edge to edge. */ .cabina-app-page #main .elementor-section.elementor-section-boxed > .elementor-container, .cabina-app-page #main .e-con { --container-max-width: 100%; max-width: 100%; } .cabina-app-page #main .e-con, .cabina-app-page #main .e-con > .e-con-inner { --padding-left: 0px; --padding-right: 0px; } /* --- 3. Fill the viewport so the bottom bar is always visible ------------- */ .cabina-app-page .vmkc-shell, .cabina-app-page .vmwc-shell, .cabina-app-page .vm-vanity-shell, .cabina-app-page .vmkc-react-host, .cabina-app-page .vmwc-react-host, .cabina-app-page .vm-vanity-react-host { height: calc(100dvh - var(--cabina-header-h, 96px)) !important; min-height: var(--cabina-app-min-h) !important; max-width: none; width: 100%; } /* dvh is not universal; vh is a close enough fallback on desktop. */ @supports not (height: 100dvh) { .cabina-app-page .vmkc-shell, .cabina-app-page .vmwc-shell, .cabina-app-page .vm-vanity-shell, .cabina-app-page .vmkc-react-host, .cabina-app-page .vmwc-react-host, .cabina-app-page .vm-vanity-react-host { height: calc(100vh - var(--cabina-header-h, 96px)) !important; } } .cabina-app-page .vmkc-react-root, .cabina-app-page .vmwc-react-root, .cabina-app-page .vm-vanity-react-root { height: 100%; min-height: 0; } /* On a phone the panel needs more room than a viewport split allows, so let the app grow instead of squeezing the canvas to nothing. */ @media (max-width: 767px) { .cabina-app-page { --cabina-app-min-h: 620px; } } /* --- Focus mode ---------------------------------------------------------- */ /* The theme's header is

and the footer is the Elementor template wrapper .thim-ekit__footer - neither carries a .site-header / .site-footer class, which is why an earlier attempt at this did nothing. */ /* .scroll-to-top is the theme's actual button (footer.php); .modus-back-to-top and #back-to-top never existed and are kept only in case a child theme or plugin prints them. */ .cabina-app-page.cabina-app-fullscreen #masthead, .cabina-app-page.cabina-app-fullscreen .thim-ekit__footer, .cabina-app-page.cabina-app-fullscreen .site-header, .cabina-app-page.cabina-app-fullscreen .site-footer, .cabina-app-page.cabina-app-fullscreen .scroll-to-top, .cabina-app-page.cabina-app-fullscreen .modus-back-to-top, .cabina-app-page.cabina-app-fullscreen #back-to-top { display: none !important; } .cabina-app-page.cabina-app-fullscreen #main > .container-fluid { margin-top: 0 !important; } /* The toggle itself. Top right of the canvas, clear of the app's own controls: the panel handle sits mid-right and the DRAWING / INFORMATION / INSPIRATIONS buttons sit bottom centre. */ .cabina-app-chrome-toggle { position: fixed; top: calc(var(--cabina-header-h) + 12px); right: 16px; z-index: 9998; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #e5e7eb; border-radius: 4px; background: rgba(255, 255, 255, 0.92); color: #221f20; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .cabina-app-chrome-toggle:hover, .cabina-app-chrome-toggle:focus-visible { background: #221f20; color: #ffffff; outline: none; } .cabina-app-chrome-toggle svg { display: block; } @media (max-width: 767px) { .cabina-app-chrome-toggle { top: calc(var(--cabina-header-h) + 8px); right: 8px; width: 32px; height: 32px; } } /* --- The configurators stay left to right, in every language ------------- */ /* * Arabic turns the rest of the site right to left. The three apps do not * follow, by decision: their panels, 3D view, drag handles and option grids * are laid out against a left-to-right reading order, and mirroring them is a * separate piece of work rather than a stylesheet flip. * * Written as `direction: ltr` on the app shells rather than by unhooking the * RTL stylesheets, so it holds no matter which of WordPress's, WooCommerce's * or Elementor's 309 RTL files end up loading on the page. * * Arabic text inside still renders right to left within each line - that is * the browser's bidi handling and is exactly what we want. Only the layout * direction is pinned. */ .cabina-app-page .vmkc-shell, .cabina-app-page .vmwc-shell, .cabina-app-page .vm-vanity-shell, .cabina-app-page .vmkc-react-host, .cabina-app-page .vmwc-react-host, .cabina-app-page .vm-vanity-react-host, .cabina-app-page .vmkc-react-root, .cabina-app-page .vmwc-react-root, .cabina-app-page .vm-vanity-react-root { direction: ltr; text-align: left; } /* --- Coming soon ---------------------------------------------------------- */ /* * Shown in place of a configurator that has not been released - see * inc/functions/coming-soon.php. The page keeps its header, title and footer, * so this only has to fill the space the app would have taken and give the * footer something to sit under. */ .cabina-coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; padding: 60px 20px 80px; text-align: center; } .cabina-coming-soon__heading { margin: 0 0 18px; font-size: 32px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .cabina-coming-soon__message { max-width: 520px; margin: 0 0 28px; color: #666; font-size: 16px; line-height: 1.7; } .cabina-coming-soon__button { display: inline-block; padding: 12px 34px; border: 1px solid #221f20; background: #221f20; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } .cabina-coming-soon__button:hover, .cabina-coming-soon__button:focus { background: #fff; color: #221f20; } @media (max-width: 767px) { .cabina-coming-soon { min-height: 30vh; padding: 40px 20px 56px; } .cabina-coming-soon__heading { font-size: 24px; } .cabina-coming-soon__message { font-size: 14px; } }