/* Theme Name: Boshoff Troue Theme URI: https://boshofftroue.co.za Description: Custom wedding theme for the Boshoff wedding — built as a Blocksy child theme. Author: Chris Boshoff Author URI: https://boshofftroue.co.za Template: blocksy Version: 1.51.0 License: GNU General Public License v2 or later Text Domain: boshoff-troue */ /* ===== GLOBAL OVERRIDES ===== */ :root { --wedding-maroon: #3A000C; --wedding-cream: #FFF8E7; --scrollbar-width: calc(100vw - 100%); } html { overflow-x: hidden; /* Reserve scrollbar space so opening/closing the off-canvas menu (which toggles body overflow) does not shift the page content sideways. */ scrollbar-gutter: stable; } body { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; background-color: var(--wedding-maroon); color: var(--wedding-cream); } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; font-weight: 400; } /* ===== STICKY SITE HEADER (MOBILE) ===== ux.js adds .ux-sticky-header to the Blocksy site header on mobile and exposes its measured height as --site-header-height so the layout can offset itself by exactly the right amount. */ @media (max-width: 600px) { .ux-sticky-header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 100; } body { padding-top: var(--site-header-height, 0) !important; } } /* ===== OFF-CANVAS MOBILE MENU ===== Theme the Blocksy off-canvas menu to match the site (cream background, maroon Playfair text) and stop the page from shifting sideways when the menu opens. */ /* Blocksy adds padding-right to when the off-canvas opens to compensate for the disappearing scrollbar — but we already reserve the scrollbar via scrollbar-gutter, so the extra padding just creates a visible jump. Cancel it. */ body.ct-toggle-offcanvas-open, body.ct-active-menu-modal, body.has-modal-open { padding-right: 0 !important; } /* Panel background — anchored on #offcanvas (the panel's own ID) for highest specificity, plus cream on every nested wrapper so menu items can never appear to float over a transparent area. */ #offcanvas, #offcanvas .ct-panel-inner, #offcanvas .ct-panel-actions, #offcanvas .ct-panel-content, #offcanvas .ct-panel-content-inner, #offcanvas nav, #offcanvas .mobile-menu, #offcanvas ul { background-color: var(--wedding-cream) !important; } /* Hide menu items until the panel is fully open. Blocksy sets inert="" on #offcanvas while it is closed and removes it when opening, so we can use that as the "is open" hook. While the panel is closed/closing, force the inner content invisible; on open, fade it in after a short delay so the panel slides in first and the items appear inside the cream area, not floating over the page. */ #offcanvas[inert] .ct-panel-content-inner { opacity: 0 !important; } #offcanvas:not([inert]) .ct-panel-content-inner { opacity: 1; transition: opacity 0.18s ease 0.12s; } /* Menu typography — Playfair, maroon */ #offcanvas, #offcanvas a, #offcanvas li, #offcanvas .menu-item, #offcanvas .menu-item > a, #offcanvas .ct-menu-link { font-family: 'Playfair Display', serif !important; color: var(--wedding-maroon) !important; } /* Close button (X) */ #offcanvas .ct-toggle-close, #offcanvas button.ct-toggle-close, #offcanvas .ct-toggle-close svg { color: var(--wedding-maroon) !important; fill: var(--wedding-maroon) !important; } /* Backdrop / overlay behind the open menu — translucent maroon so it is clearly distinct from the cream menu panel and visually dims the page underneath. Blocksy can render the overlay under several class names depending on the offcanvas behaviour, so target all of them. */ .ct-panel-overlay, [data-id="overlay"], .ct-modal-overlay, .ct-drawer-overlay, [data-behaviour="modal"] ~ .ct-panel-overlay, [data-behaviour="right-side"] ~ .ct-panel-overlay { background-color: rgba(58, 0, 12, 0.7) !important; }