/* ============================================================ Furniture & Home Decor Store Main Stylesheet (style.css) ------------------------------------------------------------ Fonts : Urbanist (headings) / Outfit (body & everything else) Colors : Primary #1F2A40 (logo navy) | Secondary #9A6B40 (kraft) | Black #212121 (solid colors only - no gradients) Built on: Bootstrap 5.3.8 + Font Awesome 6.7.2 + Animate.css 4 + WOW.js + Swiper 11 ------------------------------------------------------------ TABLE OF CONTENTS 01. Root Variables 02. Base / Reset 03. Typography (headings & paragraphs) 04. Text Color Utilities 05. Background Utilities 06. Font Weight / Font Size / Line Height Utilities 07. Spacing Utilities (padding & margin - top / bottom / combined) 08. Section Helpers 09. Buttons 10. Top Bar (offer / phone + email / socials) 11. Header (logo / centered menu / action icons) 12. Mega Menu & Dropdown 13. Search Panel (animated slide-down) 14. Mobile Offcanvas Menu 15. Hero Section (Swiper fade slider) 16. Responsive Media Queries 17. Reduced Motion (accessibility) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Outfit:wght@400;500;600&family=Urbanist:wght@600;700;800&display=swap'); /* Metric-matched fallback fonts */ @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); font-style: normal; size-adjust: 104.3%; } @font-face { font-family: 'Fraunces Fallback'; src: local('Georgia Italic'); font-style: italic; size-adjust: 97.4%; } /* ============================================================ 01. ROOT VARIABLES ============================================================ */ :root { /* ---- Brand Colors (solid only) ---- */ --primary: #1F2A40; /* logo navy - buttons / top bar */ --secondary: #9A6B40; /* kraft brown - accents / links / hover (logo kraft #B68C65 darkened for AA contrast with white text) */ --color-black: #212121; /* soft black - best shade for text */ --color-dark: #212121; /* dark surfaces (.bg-dark) */ --color-white: #FFFFFF; --color-gray: #424243; /* muted text (Bootstrap-like muted) */ --color-gray-light: #ADB5BD; /* placeholders / soft icons */ --bg-alt: #FAF7F2; /* light alternate section background */ --border-color: #ECE4D8; /* hairline borders / dividers */ --secondary-soft: #F6EFE6; /* soft tint of secondary (hero arch, badge icon, image placeholders) */ --secondary-light: #E8DBC9; /* hover tint used on dark backgrounds */ --kraft: #B68C65; /* logo kraft (decorative only) */ --cream: #E8DBC9; /* logo cream sheet */ /* ---- Effects ---- */ --radius: 6px; --shadow-sm: 0 8px 24px rgba(31, 42, 64, 0.09); --transition: all 0.3s ease; /* ---- Font Families ---- */ --heading-font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; --font-heading: var(--heading-font-family); /* h1 - h6 */ --font-body: 'Outfit', sans-serif; /* paragraphs & all other tags */ /* ---- Font Weights ---- */ --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; /* added: needed by .fw-700 utility */ /* ---- Font Sizes ---- */ --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-25: 25px; --fs-30: 30px; --fs-37: 37px; --fs-40: 40px; /* added: h2 size as per spec */ --fs-42: 42px; --fs-50: 50px; /* ---- Line Heights ---- */ --lh-21: 21px; --lh-23: 23px; --lh-25: 25px; --lh-30: 30px; --lh-35: 35px; --lh-39: 39px; --lh-43: 43px; --lh-45: 45px; /* added: pairs with --fs-40 (h2) */ --lh-50: 50px; --lh-55: 55px; /* ---- Spacing (top / bottom padding & margin scale) ---- */ --space-10: 10px; --space-15: 15px; --space-20: 20px; --space-30: 30px; --space-35: 35px; --space-40: 40px; --space-50: 50px; --space-60: 60px; --space-80: 80px; /* default section gap on desktop */ --space-100: 100px; } /* .wow { visibility: hidden; animation: none !important; } .wow.animated, .wow.animate__animated { visibility: visible; animation: unset !important; } */ /* ============================================================ 02. BASE / RESET ============================================================ */ html { scroll-behavior: smooth; scroll-padding-top: 100px; /* offset for the sticky header */ } body { font-family: var(--font-body); font-size: var(--fs-16); font-weight: var(--font-weight-400); line-height: var(--lh-25); color: var(--color-black); background-color: var(--color-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--secondary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--primary); } button { font-family: var(--font-body); } /* Accessible keyboard focus ring */ :focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Brand text selection */ ::selection { background: var(--secondary); color: var(--color-white); } strong{ font-weight: var(--font-weight-500); } /* ============================================================ 03. TYPOGRAPHY ------------------------------------------------------------ Headings only carry font-family / size / weight / line-height. Colors are applied separately via the color utility classes (e.g.

). ============================================================ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .h-xl { font-family: var(--heading-font-family); color: var(--color-black); } h1, .h1 { font-weight: var(--font-weight-500); font-size: var(--fs-50); line-height: var(--lh-55); } /* Extra large display heading (same scale as h1, use where needed) */ .h-xl { font-weight: var(--font-weight-500); font-size: var(--fs-50); line-height: var(--lh-55); } h2, .h2 { font-weight: var(--font-weight-500); font-size: var(--fs-40); line-height: var(--lh-45); } h3, .h3 { font-weight: var(--font-weight-500); font-size: var(--fs-37); line-height: var(--lh-43); } h4, .h4 { font-weight: var(--font-weight-500); font-size: var(--fs-30); line-height: var(--lh-35); } h5, .h5 { font-weight: var(--font-weight-500); font-size: var(--fs-25); line-height: var(--lh-30); } h6, .h6 { font-weight: var(--font-weight-500); font-size: var(--fs-20); line-height: var(--lh-25); } /* Paragraphs - Outfit / 16px / 400 by default */ .p-default, p { font-size: var(--fs-17); line-height: var(--lh-25); letter-spacing:0.3px; } .p-small { font-size: var(--fs-15); line-height: var(--lh-23); } /* ============================================================ 04. TEXT COLOR UTILITIES ============================================================ */ .primary-text { color: var(--primary); } .secondary-text { color: var(--secondary); } .text-white { color: var(--color-white); } .text-black { color: var(--color-black); } .text-gray { color: var(--color-gray); /* muted / helper text */ } /* ============================================================ 05. BACKGROUND UTILITIES ============================================================ */ .section-bg { background: var(--bg-alt); /* light alternate section */ } .bg-primary { background-color: var(--primary) !important; color: var(--color-white); } .bg-secondary { background-color: var(--secondary) !important; color: var(--color-white); } .bg-dark { background-color: var(--color-dark) !important; color: var(--color-white); } .bg-white { background-color: var(--color-white) !important; } .bg-secondary-soft { background-color: var(--secondary-soft) !important; } /* ============================================================ 06. FONT WEIGHT / FONT SIZE / LINE HEIGHT UTILITIES ============================================================ */ /* ---- Font Weights ---- */ .fw-400 { font-weight: var(--font-weight-400); } .fw-500 { font-weight: var(--font-weight-500); } .fw-600 { font-weight: var(--font-weight-600); } .fw-700 { font-weight: var(--font-weight-700); } /* ---- Font Sizes ---- */ .fs-15 { font-size: var(--fs-15); } .fs-16 { font-size: var(--fs-16); } .fs-18 { font-size: var(--fs-18); } .fs-20 { font-size: var(--fs-20); } .fs-25 { font-size: var(--fs-25); } .fs-30 { font-size: var(--fs-30); } .fs-37 { font-size: var(--fs-37); } .fs-40 { font-size: var(--fs-40); } .fs-42 { font-size: var(--fs-42); } .fs-50 { font-size: var(--fs-50); } /* ---- Line Heights ---- */ .lh-21 { line-height: var(--lh-21); } .lh-23 { line-height: var(--lh-23); } .lh-25 { line-height: var(--lh-25); } .lh-30 { line-height: var(--lh-30); } .lh-35 { line-height: var(--lh-35); } .lh-39 { line-height: var(--lh-39); } .lh-43 { line-height: var(--lh-43); } .lh-45 { line-height: var(--lh-45); } .lh-50 { line-height: var(--lh-50); } .lh-55 { line-height: var(--lh-55); } /* ============================================================ 07. SPACING UTILITIES ------------------------------------------------------------ Separate top / bottom classes + combined (tb) classes for both padding and margin. Values follow the --space-* scale. ============================================================ */ /* ---- Padding Top ---- */ .pt-10 { padding-top: var(--space-10); } .pt-20 { padding-top: var(--space-20); } .pt-30 { padding-top: var(--space-30); } .pt-35 { padding-top: var(--space-35); } .pt-40 { padding-top: var(--space-40); } .pt-50 { padding-top: var(--space-50); } .pt-60 { padding-top: var(--space-60); } .pt-80 { padding-top: var(--space-80); } .pt-100 { padding-top: var(--space-100); } /* ---- Padding Bottom ---- */ .pb-10 { padding-bottom: var(--space-10); } .pb-20 { padding-bottom: var(--space-20); } .pb-30 { padding-bottom: var(--space-30); } .pb-35 { padding-bottom: var(--space-35); } .pb-40 { padding-bottom: var(--space-40); } .pb-50 { padding-bottom: var(--space-50); } .pb-60 { padding-bottom: var(--space-60); } .pb-80 { padding-bottom: var(--space-80); } .pb-100 { padding-bottom: var(--space-100); } /* ---- Padding Top + Bottom (combined) ---- */ .ptb-10 { padding: var(--space-10) 0; } .ptb-20 { padding: var(--space-20) 0; } .ptb-30 { padding: var(--space-30) 0; } .ptb-35 { padding: var(--space-35) 0; } .ptb-40 { padding: var(--space-40) 0; } .ptb-50 { padding: var(--space-50) 0; } .ptb-60 { padding: var(--space-60) 0; } .ptb-80 { padding: var(--space-80) 0; } .ptb-100 { padding: var(--space-100) 0; } /* ---- Margin Top ---- */ .mt-10 { margin-top: var(--space-10); } .mt-20 { margin-top: var(--space-20); } .mt-30 { margin-top: var(--space-30); } .mt-35 { margin-top: var(--space-35); } .mt-40 { margin-top: var(--space-40); } .mt-50 { margin-top: var(--space-50); } .mt-60 { margin-top: var(--space-60); } .mt-80 { margin-top: var(--space-80); } .mt-100 { margin-top: var(--space-100); } /* ---- Margin Bottom ---- */ .mb-10 { margin-bottom: var(--space-10); } .mb-20 { margin-bottom: var(--space-20); } .mb-30 { margin-bottom: var(--space-30); } .mb-35 { margin-bottom: var(--space-35); } .mb-40 { margin-bottom: var(--space-40); } .mb-50 { margin-bottom: var(--space-50); } .mb-60 { margin-bottom: var(--space-60); } .mb-80 { margin-bottom: var(--space-80); } .mb-100 { margin-bottom: var(--space-100); } /* ---- Margin Top + Bottom (combined) ---- */ .mtb-10 { margin: var(--space-10) 0; } .mtb-20 { margin: var(--space-20) 0; } .mtb-30 { margin: var(--space-30) 0; } .mtb-35 { margin: var(--space-35) 0; } .mtb-40 { margin: var(--space-40) 0; } .mtb-50 { margin: var(--space-50) 0; } .mtb-60 { margin: var(--space-60) 0; } .mtb-80 { margin: var(--space-80) 0; } .mtb-100 { margin: var(--space-100) 0; } /* ============================================================ 08. SECTION HELPERS ------------------------------------------------------------ Every home page section gets 80px top + bottom on desktop. The value auto-scales (80 -> 60 tablet -> 50 mobile) because --space-80 itself is redefined in the media queries below. Usage:
or
============================================================ */ .section-padding { padding: var(--space-80) 0; } .section-margin { margin: var(--space-80) 0; } /* ============================================================ 09. BUTTONS (solid colors - no gradient) ============================================================ */ .btn-theme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-size: var(--fs-16); font-weight: var(--font-weight-500); color: var(--color-white); background-color: var(--primary); border: 0; border-radius: var(--radius); white-space: nowrap; cursor: pointer; transition: var(--transition); } .btn-theme:hover, .btn-theme:focus { background-color: var(--secondary); color: var(--color-white); box-shadow: var(--shadow-sm); } .btn-theme-sec { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-size: var(--fs-16); font-weight: var(--font-weight-500); color: var(--color-white); background-color: var(--secondary); border: 0; border-radius: var(--radius); white-space: nowrap; cursor: pointer; transition: var(--transition); } .btn-theme-sec:hover, .btn-theme-sec:focus { background-color: var(--primary); color: var(--color-white); box-shadow: var(--shadow-sm); } /* Outline variant */ .btn-theme-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; font-size: var(--fs-16); font-weight: var(--font-weight-500); color: var(--primary); background-color: transparent; border: 1px solid var(--primary); border-radius: var(--radius); white-space: nowrap; cursor: pointer; transition: var(--transition); } .newsletter-form .wpcf7-submit { margin-top: 15px; } .newsletter-form .btn-theme-sec:hover, .newsletter-form .btn-theme-sec:focus{ background-color: var(--color-white); color: var(--primary); box-shadow: var(--shadow-sm); } .btn-theme-outline:hover, .btn-theme-outline:focus { background-color: var(--primary); color: var(--color-white); } /* ============================================================ 10. TOP BAR (offer / phone + email / socials) ============================================================ */ .top-bar { background: var(--primary); color: rgba(255, 255, 255, 0.92); padding: var(--space-10) 0; font-size: var(--fs-15); } .top-bar-offer { line-height: var(--lh-23); } /* "Sign up now" underlined link */ .top-bar-link { color: var(--color-white); font-weight: var(--font-weight-500); text-decoration: underline; text-underline-offset: 3px; } .top-bar-link:hover { color: var(--secondary-light); } /* Phone + email group */ .top-bar-contact { gap: 24px; } .top-bar-contact a { color: var(--color-white); font-weight: var(--font-weight-500); display: inline-flex; align-items: center; gap: 8px; } .top-bar-contact a i { font-size: 14px; color: var(--secondary-light); } .top-bar-contact a:hover { color: var(--secondary-light); } /* Social icons */ .social-links a { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; color: var(--color-white); font-size: 13px; transition: var(--transition); } .social-links a:hover { background: var(--color-white); border-color: var(--color-white); color: var(--primary); } /* Dark variant - offcanvas drawer & hero social rail */ .social-links--dark a { border-color: var(--border-color); color: var(--primary); } .social-links--dark a:hover { background: var(--secondary); border-color: var(--secondary); color: var(--color-white); } /* ============================================================ 11. HEADER (logo / centered menu / action icons) ------------------------------------------------------------ The header sticks to the top; the mega menu and the search panel are positioned against it (top: 100%). ============================================================ */ .header-area { position: sticky; top: 0; z-index: 1030; background: var(--color-white); border-bottom: 1px solid var(--border-color); } /* Shadow added by js/main.js once the page is scrolled */ .header-area.is-stuck { box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; gap: 20px; min-height: 86px; } /* ---- Logo ---- */ .site-logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .logo-icon { width: 40px; height: 40px; flex-shrink: 0; } .logo-text { font-family: var(--font-heading); font-size: var(--fs-30); font-weight: var(--font-weight-700); line-height: 1; color: var(--primary); letter-spacing: -0.5px; text-transform: lowercase; } /* ---- Action Icons (search / wishlist / cart / account / toggler) ---- */ .header-actions { margin-left: auto; flex-shrink: 0; } .action-btn { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; background: var(--secondary); border: 0; border-radius: var(--radius); color: var(--color-white); font-size: var(--fs-18); cursor: pointer; transition: var(--transition); } .action-btn:hover { background: var(--primary); color: var(--color-white); transform: translateY(-2px); } /* Search toggle switches to an X while the panel is open */ .action-btn[aria-expanded="true"] { background: var(--primary); color: var(--color-white); } /* Small count badge on wishlist / cart */ .action-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--secondary); border: 2px solid var(--color-white); border-radius: 50rem; color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-600); line-height: 1; } /* ---- Main Menu (desktop: centered where the search bar was) ---- */ .menu-link { display: block; font-weight: var(--font-weight-500); color: var(--color-black); transition: var(--transition); } .menu-link:hover, .menu-link.active { color: var(--secondary); } /* Chevron on items that own a mega menu / dropdown */ .menu-link .menu-caret { font-size: 12px; margin-left: 6px; transition: transform 0.3s ease; } .header-logo img { max-width: 150px; } @media (min-width: 992px) { /* Force the responsive offcanvas wrapper to behave as a full-height flex row inside the header on desktop */ .main-menu-wrap { display: flex !important; flex-direction: row; align-self: stretch; flex-grow: 1; min-width: 0; } .main-menu-wrap .offcanvas-body { display: flex; align-items: stretch; flex-grow: 1; padding: 0; overflow: visible; } .main-menu { display: flex; align-items: stretch; margin-inline: auto; /* centers the menu in the header */ column-gap: 4px; } .main-menu > li { display: flex; align-items: stretch; } /* Full-height links so the hover never breaks while moving the cursor down into the mega menu */ .menu-link { display: inline-flex; align-items: center; position: relative; padding: 0 10px; } /* Animated underline on hover / active */ .menu-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 26px; height: 2px; background: var(--secondary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .menu-link:hover::after, .menu-link.active::after { transform: scaleX(1); transform-origin: left; } .main-menu > li:hover .menu-caret, .main-menu > li:focus-within .menu-caret { transform: rotate(180deg); } } /* ============================================================ 12. MEGA MENU & DROPDOWN (desktop, hover / focus driven) ============================================================ */ /* ---- Mega menu: full header width, image on the left ---- */ .mega-menu { position: absolute; /* positioned against .header-area */ top: 100%; left: 0; right: 0; z-index: 5; background: var(--color-white); border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-30) 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } .has-mega:hover > .mega-menu, .has-mega:focus-within > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* Left side promo image */ .mega-menu-media { position: relative; height: 100%; min-height: 280px; border-radius: var(--radius); overflow: hidden; background: var(--secondary-soft); /* graceful fallback if the image is missing */ } .mega-menu-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mega-media-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: rgba(31, 42, 64, 0.88); /* solid overlay, no gradient */ color: var(--color-white); } .mega-media-caption .h6 { color: var(--color-white); margin-bottom: 4px; } .mega-media-caption a { color: var(--secondary-light); font-size: var(--fs-15); font-weight: var(--font-weight-500); } .mega-media-caption a:hover { color: var(--color-white); } /* Link columns */ .mega-col-title { font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--font-weight-600); color: var(--primary); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .mega-links { list-style: none; margin: 0; padding: 0; } .mega-links li + li { margin-top: 9px; } .mega-links a { display: inline-block; font-size: var(--fs-15); color: var(--color-gray); transition: var(--transition); } .mega-links a:hover { color: var(--secondary); transform: translateX(4px); } /* ---- Simple dropdown (e.g. "Pages") ---- */ .has-dropdown { position: relative; } .sub-menu { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 220px; background: var(--color-white); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-sm); padding: 12px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } .has-dropdown:hover > .sub-menu, .has-dropdown:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--radius); font-size: var(--fs-15); color: var(--color-black); transition: var(--transition); } .sub-menu a:hover { background: var(--bg-alt); color: var(--secondary); } /* ============================================================ 13. SEARCH PANEL (animated slide-down, no categories) ------------------------------------------------------------ Hidden by default. js/main.js toggles the .active class when the search icon in the header is clicked. ============================================================ */ .search-panel { position: absolute; /* positioned against .header-area */ top: 100%; left: 0; right: 0; z-index: 4; background: var(--color-white); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); padding: var(--space-20) 0; opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } /*================================================== AJAX PRODUCT SEARCH ==================================================*/ .search-panel-form{ position:relative; } .search-loader{ position:absolute; top:50%; right:170px; /* adjust if your search button width changes */ transform:translateY(-50%); font-size:18px; color:var(--secondary); z-index:100; pointer-events:none; } .search-resultss{ display:none; margin-top:15px; background:var(--color-white); border:1px solid var(--border-color); border-radius:10px; max-height:450px; overflow-y:auto; box-shadow:0 12px 30px rgba(0,0,0,.08); } .search-resultss:not(:empty){ display:block; } .search-item{ display:flex; align-items:center; gap:12px; padding:10px 15px; text-decoration:none; border-bottom:1px solid var(--border-color); transition:all .2s ease; } .search-item:hover{ background:var(--secondary-soft); } .search-item:last-child{ border-bottom:none; } .search-thumb{ width:48px; height:48px; flex:0 0 48px; } .search-thumb img{ width:48px; height:48px; object-fit:cover; border-radius:6px; } .search-content{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:15px; } .search-content h6{ margin:0; color:var(--color-black); font-size:14px; font-weight:600; line-height:1.4; } .search-content span{ white-space:nowrap; color:var(--secondary); font-size:15px; font-weight:700; } .search-empty{ padding:30px; text-align:center; color:var(--color-gray); } /* Section labels: CATEGORIES / PRODUCTS */ .search-section-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #888; padding: 10px 16px 6px; background: #fff; position: sticky; top: 0; z-index: 1; } /* Category link rows */ .search-category-item { display: block; padding: 9px 16px; color: var( --primary); /* red accent — adjust to your brand */ font-size: 14px; text-decoration: none; transition: background .15s; } .search-category-item:hover { background: var(--secondary-soft); } .search-section-label{ background: var(--secondary); color: var(--color-white); } @media(max-width:991px){ .search-loader{ right:70px; } } @media(max-width:575px){ .search-thumb{ width:42px; height:42px; flex:0 0 42px; } .search-thumb img{ width:42px; height:42px; } .search-content h6{ font-size:13px; } } .search-panel.active { opacity: 1; visibility: visible; transform: translateY(0); } .search-panel-form { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 20px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--color-white); transition: var(--transition); } .search-panel-form:focus-within { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(154, 107, 64, 0.08); } .search-panel-form > i { color: var(--color-gray); } .search-panel-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-16); color: var(--color-black); } .search-panel-input::placeholder { color: var(--color-gray); } .search-panel-submit { height: 42px; padding: 0 24px; font-size: var(--fs-15); } .search-panel-close { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: var(--radius); background: var(--bg-alt); color: var(--color-black); cursor: pointer; transition: var(--transition); } .search-panel-close:hover { background: var(--primary); color: var(--color-white); } /* ============================================================ 14. MOBILE OFFCANVAS MENU (< 992px) ------------------------------------------------------------ KEY FIX: Bootstrap's offcanvas adds padding-right to when it opens to compensate for the scrollbar width. This shifts the sticky top bar and header, causing the height jump you see. We force padding-right: 0 at all times so nothing shifts when the drawer opens or closes. ============================================================ */ /* --- Prevent Bootstrap scrollbar-compensation shift --- */ body { /* Override Bootstrap's dynamic padding-right injection */ /* padding-right: 0 !important; */ overflow-x: hidden; } /* Slide-in animations (WOW + animate.css fadeInLeft/Right start at ±100%) must never create sideways scrolling. `clip` (unlike `hidden`) creates no scroll container, so the sticky header keeps working. */ @supports (overflow: clip) { html, body { overflow-x: clip; } } /* Lock header so it never shifts right */ .header-area { padding-right: 0 !important; } /* Lock top bar so it never shifts right */ .top-bar { padding-right: 0 !important; } /* Offcanvas width token */ .main-menu-wrap { --bs-offcanvas-width: 330px; } /* The offcanvas drawer must use fixed positioning so it overlays the page without pushing any content */ @media (max-width: 991.98px) { .user-logged-in .main-menu-wrap.offcanvas-lg , .user-admin .main-menu-wrap.offcanvas-lg { top: 45px !important; } .main-menu-wrap.offcanvas-lg { position: fixed !important; top: 0 !important; left: 0 !important; height: 100dvh !important; /* dvh: avoids mobile address-bar jump */ z-index: 1055 !important; } /* Backdrop sits above the page but below the drawer */ .offcanvas-backdrop { z-index: 1050 !important; } .offcanvas-title { font-family: var(--font-heading); font-size: var(--fs-25); font-weight: var(--font-weight-700); color: var(--primary); } .main-menu { list-style: none; margin: 0; padding: 0; } .main-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-color); padding: 5px 0; } .main-menu .menu-link { flex: 1; padding: 10px 0; font-size: var(--fs-18); } .mob-mega-links{ padding-left: 15px; list-style: none; } .mob-mega-links li a{ color: var(--color-gray); padding: 7px 0; } /* Chevron button that opens the mobile submenu (collapse) */ .submenu-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--radius); background: var(--bg-alt); color: var(--color-black); cursor: pointer; transition: var(--transition); } .submenu-toggle i { transition: transform 0.3s ease; } .submenu-toggle[aria-expanded="true"] { background: var(--secondary); color: var(--color-white); } .submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); } .submenu-collapse { width: 100%; } .sub-menu-mobile { list-style: none; margin: 0; padding: 4px 0 12px 14px; } .sub-menu-mobile a { display: block; padding: 7px 0; font-size: var(--fs-15); color: var(--color-gray); } .sub-menu-mobile a:hover { color: var(--secondary); } .offcanvas-contact a { color: var(--color-black); font-weight: var(--font-weight-500); } .offcanvas-contact a:hover { color: var(--secondary); } /* WOW.js hides .wow elements until scrolled into view; inside the offcanvas that never happens, so force them visible on mobile. */ .main-menu-wrap .wow { visibility: visible !important; animation: none !important; } } /* ============================================================ 16. RESPONSIVE MEDIA QUERIES ------------------------------------------------------------ Heading sizes & section spacing are controlled by redefining the root variables, so every heading, .fs-* utility and .ptb-80 / .section-padding class scales automatically: h1: 50px -> 40px (tablet) -> 35px (mobile) section gap: 80px -> 60px (tablet) -> 50px (mobile) ============================================================ */ /* ---- Large / small desktop (< 1200px) ---- */ @media (max-width: 1199.98px) { .main-menu { column-gap: 0; } .menu-link { padding: 0 10px; font-size: var(--fs-15); } .menu-link::after { left: 10px; right: 10px; } .hero-thumbs-wrap { display: none; /* pagination dots take over */ } .hero-slide-inner { min-height: 600px; } .hero-arch { width: min(400px, 100%); height: 500px; } .hero-model { max-height: 570px; } .hero-arrow { display: none; } } /* ---- Tablet (< 992px) ---- */ @media (max-width: 991.98px) { :root { /* Headings scale down: h1 = 40px on tablet */ --fs-50: 40px; --lh-55: 46px; --fs-42: 36px; --fs-40: 34px; --lh-45: 40px; --fs-37: 31px; --lh-43: 37px; --fs-30: 26px; --lh-35: 32px; --fs-25: 22px; --lh-30: 28px; /* Section spacing: 80px -> 60px on tablet */ --space-100: 80px; --space-80: 60px; --space-60: 50px; } } /* ---- Mobile (< 768px) ---- */ @media (max-width: 767.98px) { :root { /* Headings scale down: h1 = 35px on mobile */ --fs-50: 35px; --lh-55: 42px; --fs-42: 32px; --fs-40: 30px; --lh-45: 36px; --fs-37: 27px; --lh-43: 33px; --fs-30: 24px; --lh-35: 30px; --fs-25: 21px; --lh-30: 27px; /* Section spacing: 80px -> 50px on mobile */ --space-100: 60px; --space-80: 50px; --space-60: 40px; } .top-bar-inner { justify-content: center !important; text-align: center; } .header-inner { min-height: 70px; gap: 16px; } .logo-icon { width: 34px; height: 34px; } .logo-text { font-size: 26px; } .action-btn { width: 44px; height: 44px; font-size: var(--fs-16); } .search-panel-form { height: 50px; padding-left: 14px; } .search-panel-submit { display: none; /* enter key submits on phones */ } .hero-watermark { display: none; } } /* ============================================================ 17. REDUCED MOTION (accessibility) ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .wow { visibility: visible !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; } } /* ============================================================ 12b. wp_nav_menu() HEADER MENUS (inc/navigation.php, js/navigation.js) "Pages" menu + "Products" dropdown; Pages sub-menus. ============================================================ */ .menu-dropdown-toggle { border: 0; background: none; font: inherit; cursor: pointer; text-align: left; } .menu-dropdown__list, .main-menu .sub-menu { list-style: none; margin: 0; padding: 0; } .dropdown-link, .submenu-link { display: block; padding: 8px 12px; border-radius: 6px; color: var(--color-black); font-weight: var(--font-weight-500); text-decoration: none; } .dropdown-link:hover, .dropdown-link:focus-visible, .dropdown-link.active, .submenu-link:hover, .submenu-link.active { background: var(--bg-alt); color: var(--secondary); } .dropdown-link--child { padding-left: 26px; font-weight: 400; color: var(--color-gray); } @media (min-width: 992px) { .main-menu > li { position: relative; } .main-menu .submenu-toggle { align-self: center; width: 24px; height: 24px; margin-left: -6px; padding: 0; border: 0; background: none; color: inherit; font-size: 12px; cursor: pointer; } .menu-dropdown, .main-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 6; min-width: 260px; max-width: min(340px, 90vw); padding: 10px; background: var(--color-white, #fff); border: 1px solid var(--border-color); border-radius: 0 0 12px 12px; box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } /* Last items open towards the left so they never leave the screen. */ .main-menu > li:last-child > .menu-dropdown, .main-menu > li:last-child > .sub-menu { left: auto; right: 0; } .main-menu > li:hover > .menu-dropdown, .main-menu > li:focus-within > .menu-dropdown, .main-menu > li.is-open > .menu-dropdown, .main-menu > li:hover > .sub-menu, .main-menu > li:focus-within > .sub-menu, .main-menu > li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; } .main-menu > li.is-open .menu-caret, .main-menu > li.is-open > .submenu-toggle i { transform: rotate(180deg); } } @media (max-width: 991.98px) { .main-menu .menu-dropdown-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; } .menu-dropdown, .main-menu .sub-menu { display: none; flex: 0 0 100%; padding: 0 0 10px 12px; } .main-menu > li.is-open > .menu-dropdown, .main-menu > li.is-open > .sub-menu { display: block; } .main-menu > li.is-open .menu-caret { transform: rotate(180deg); } .dropdown-link, .submenu-link { padding: 8px 0; font-size: var(--fs-15); } .dropdown-link--child { padding-left: 14px; } .dropdown-link:hover, .dropdown-link.active, .submenu-link:hover { background: none; } } /* ---- Top bar: "Get a Quote" (Theme Options -> Header Options) ---- */ .top-bar-inner { flex-wrap: nowrap; } .top-bar-offer { min-width: 0; } .top-bar-quote { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; padding: 6px 16px; border-radius: 999px; background: var(--secondary); color: var(--color-white, #fff); font-size: 14px; font-weight: var(--font-weight-600); line-height: 1.3; white-space: nowrap; text-decoration: none; transition: var(--transition); } .top-bar-quote:hover, .top-bar-quote:focus-visible { background: var(--color-white, #fff); color: var(--primary); } .top-bar-quote:focus-visible { outline: 2px solid var(--secondary-light); outline-offset: 2px; } @media (max-width: 767.98px) { .top-bar-inner { justify-content: space-between !important; text-align: left; } .top-bar-offer { font-size: 13px !important; line-height: 1.35; text-align: left !important; margin-inline: 0 !important; } .top-bar-quote { padding: 6px 12px; font-size: 13px; } } @media (max-width: 359.98px) { .top-bar-quote i { display: none; } } /* Child lists inside the Products panel are always shown, indented (not a 2nd flyout). */ .main-menu .menu-dropdown .sub-menu { position: static; display: block; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: inherit; transform: none; }