/** * Vertical Navigation Styles */ /** * Scroll lock — applied to by JS when search or modal overlays open. * scrollbar-gutter: stable prevents page layout shift when the scrollbar * disappears, which body { overflow: hidden } alone does not handle. */ html.nav-scroll-locked { overflow: hidden; scrollbar-gutter: stable; } /* Container */ .nav-container { position: relative; } /* Navigation Header */ .nav-vertical__header { display: none; } /* Logo Section */ .nav-vertical__logo { padding: var(--space-2) 0rem; display: flex; justify-content: center; align-items: center; } .nav-vertical__logo-link { display: block; text-decoration: none; } .nav-vertical__logo-image { max-width: 100%; height: auto; max-height: var(--logo-max-height); display: block; } .nav-vertical__logo-text { font-size: var(--font-size-3xl); font-weight: var(--font-weight-extrabold); color: var(--color-neutral-900); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); } /* Divider */ .nav-vertical__divider { height: var(--border-width-1); background: var(--nav-divider); margin: 0; } /* Navigation List */ .nav-vertical__list { list-style: none; margin: 0; padding: var(--space-4) 0; } /* Navigation Links */ /* Styles moved to theme components.css */ /* Overlay */ .nav-overlay { display: none; } /* Search Overlay */ .nav-search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); z-index: calc(var(--z-sticky) + 10); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .nav-search-overlay.is-open { opacity: 1; visibility: visible; } .nav-search-container { position: relative; width: 90%; max-width: 600px; background: white; border-radius: var(--radius-lg); padding: var(--space-8); transform: translateY(-20px); transition: transform 0.3s ease; padding: var(--space-12); } .nav-search-overlay.is-open .nav-search-container { transform: translateY(0); } .nav-search-close { position: absolute; top: var(--space-4); right: var(--space-4); background: transparent; border: none; cursor: pointer; padding: var(--space-2); color: var(--color-white); transition: color 0.2s ease; display: flex; align-items: center; justify-content: center; } .nav-search-close:hover { color: var(--color-neutral-200); } .nav-search-close svg { width: 24px; height: 24px; } /* Search Form Styling */ .nav-search-overlay .e-search-form { display: flex; flex-direction: column; gap: var(--space-4); } .nav-search-overlay .e-search-label { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-neutral-900); margin-bottom: var(--space-2); } .nav-search-overlay .elementor-screen-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-search-overlay .e-search-input-wrapper { position: relative; width: 100%; } .nav-search-overlay .e-search-input { width: 100%; padding: var(--space-4) var(--space-6); font-size: var(--font-size-lg); border: 2px solid var(--color-neutral-300); border-radius: var(--radius-md); outline: none; transition: border-color 0.2s ease; } .nav-search-overlay .e-search-input:focus { border-color: var(--color-primary); } .nav-search-overlay .e-search-submit { padding: var(--space-4) var(--space-8); background: var(--color-primary); color: white; border: none; border-radius: var(--radius-md); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); font-family: var(--font-primary); text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .nav-search-overlay .e-search-submit:hover { background: var(--color-primary-dark, var(--color-primary)); transform: translateY(-2px); } .nav-search-overlay .e-search-submit:active { transform: translateY(0); } /* Button styling for search trigger */ .nav-search-trigger { background: transparent; border: none; cursor: pointer; } /* ============================================ VERTICAL NAVIGATION COMPONENT Usage: Mobile-first collapsible sidebar navigation ============================================ */ .nav-vertical { position: fixed; top: 0; left: 0; width: var(--space-24); height: 100vh; background-color: var(--color-primary); color: white; z-index: var(--z-sticky); display: flex; flex-direction: column; overflow-x: hidden; } #nav-vertical-menu .e-con-inner { padding: 0; } /* Show desktop menu, hide mobile menu on desktop */ @media (min-width: 768px) { .desktop-menu, .desktop-top { display: block; } } /* Hide desktop menu, show mobile menu on mobile */ @media (max-width: 767px) { .desktop-menu, .desktop-top { display: none !important; } .nav-vertical, .product-showcase-overlay { display: none; } } /* Navigation header */ .nav-vertical__header { padding: var(--space-6) var(--space-4); display: flex; align-items: center; justify-content: space-between; } .nav-vertical__logo { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: white; text-decoration: none; letter-spacing: var(--letter-spacing-tight); } /* Navigation menu */ .nav-vertical__menu { flex: 1; padding: var(--space-4) 0; list-style: none; margin: 0; } .nav-vertical__item { margin: 0; padding: var(--space-2) 0; } /* Increased specificity to override .elementor-kit-10 a */ .nav-vertical__list .nav-vertical__link { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-3) 0; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); font-family: var(--font-secondary); font-style: italic; letter-spacing: var(--letter-spacing-wide); transition: all var(--transition-fast); position: relative; } .nav-vertical__list .nav-vertical__link::after { content: ''; position: absolute; right: var(--nav-circle-offset); top: 50%; transform: translateY(-50%); width: var(--nav-circle-size); height: var(--nav-circle-size); border-radius: 50%; background: var(--nav-circle-color); opacity: 0; transition: var(--nav-circle-transition); } .nav-vertical__list .nav-vertical__link:hover, .nav-vertical__list .nav-vertical__link.is-active { color: white; } .nav-vertical__list .nav-vertical__link:hover::after, .nav-vertical__list .nav-vertical__link.is-active::after { opacity: 1; } .nav-vertical__list .nav-vertical__link:hover::before, .nav-vertical__list .nav-vertical__link.is-active::before { transform: scaleY(1); } /* Small tablets & narrow laptop windows */ @media (max-height: 700px) { .nav-vertical__item { margin: 0; height: 56px; padding: var(--space-1) 0; } .nav-vertical__list, .nav-vertical__link { padding: var(--space-2) 0; } .nav-vertical__icons { padding: 0; } .nav-vertical__icon-link { padding: var(--space-3) 0; } } /* Narrow & medium viewports */ @media (max-width: 900px) { .nav-vertical__item { margin: 0; height: 56px; padding: var(--space-1) 0; } .nav-vertical__list, .nav-vertical__link { padding: var(--space-2) 0; } .nav-vertical__icons { padding: 0; } .nav-vertical__icon-link { padding: var(--space-3) 0; } } /* Wide viewports */ @media (max-width: 1280px) { .nav-vertical__list, .nav-vertical__link { padding: var(--space-2) 0; } } /* Navigation icon (optional) */ .nav-vertical__icon { width: 20px; height: 20px; flex-shrink: 0; } /* Icon Links */ .nav-vertical__icons { list-style: none; margin: 0; margin-top: auto; /* Push to bottom */ padding: var(--space-4) 0; display: flex; flex-direction: column; gap: 0; } .nav-vertical__icon-item { margin: 0; } .nav-vertical__icon-link { display: flex; align-items: center; justify-content: center; padding: var(--space-4); color: white !important; text-decoration: none; transition: all var(--transition-fast); position: relative; overflow: hidden; width: 100%; } .nav-vertical__icon-link::after { content: ''; position: absolute; right: var(--nav-circle-offset); top: 50%; transform: translateY(-50%); width: var(--nav-circle-size); height: var(--nav-circle-size); border-radius: 50%; background: var(--nav-circle-color); opacity: 0; transition: var(--nav-circle-transition); } .nav-vertical__icon-link:hover { background: var(--nav-hover-bg); } .nav-vertical__icon-link:hover::after { opacity: 1; } .nav-vertical__icon-link svg { width: var(--space-6); height: var(--space-6); stroke: currentColor; transition: stroke var(--transition-fast); } .nav-vertical__icon-link:hover svg { stroke: white; } /* Navigation footer (for utility icons) */ .nav-vertical__footer { padding: var(--space-6) var(--space-4); border-top: var(--border-width-1) solid var(--nav-divider); display: flex; gap: var(--space-4); justify-content: center; } .nav-vertical__footer-link { display: flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); color: rgba(255, 255, 255, 0.9); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition-fast); } .nav-vertical__footer-link:hover { background-color: var(--nav-hover-bg); color: white; } /* Arrow indicator for items with children */ .nav-vertical__arrow { margin-left: auto; display: flex; align-items: center; opacity: 0.7; transition: opacity var(--transition-fast); } .nav-vertical__link:hover .nav-vertical__arrow { opacity: 1; } /* Product Showcase Overlay */ .product-showcase-overlay { position: fixed; top: 0; left: var(--space-24); width: 100%; height: 100vh; background: var(--color-secondary, #f9fafb); transform: translateX(-100%); transition: transform 0.3s ease-in-out; z-index: calc(var(--z-sticky) - 1); overflow-y: auto; } .product-showcase-overlay.is-open { transform: translateX(0); left: var(--space-24); box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3); border: 2px solid var(--color-primary); overflow-y: hidden; } /* Desktop: 50% width */ @media (min-width: 1024px) { .product-showcase-overlay { width: 60%; max-width: var(--overlay-max-width); } } .product-showcase-overlay__close { position: absolute; top: 30px; right: 30px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 10; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-fast); } .product-showcase-overlay__close:hover { transform: rotate(90deg); } .product-showcase-overlay__close:focus { outline: 3px solid var(--color-accent, #4a5568); outline-offset: 4px; transform: rotate(90deg); } /* CSS-only X icon using pseudo-elements */ .product-showcase-overlay__close::before, .product-showcase-overlay__close::after { content: ''; position: absolute; width: 84px; height: 1px; background-color: var(--color-primary, #4a5568); transition: background-color var(--transition-fast); pointer-events: none; /* Ensures button area remains clickable, not just the thin lines */ } .product-showcase-overlay__close::before { transform: rotate(45deg); } .product-showcase-overlay__close::after { transform: rotate(-45deg); } .product-showcase-overlay__close:hover::before, .product-showcase-overlay__close:hover::after { background-color: var(--color-primary-dark, #2d3748); } .product-showcase-overlay__content { padding: 125px 40px 40px; min-height: 100vh; display: flex; justify-content: center; align-items: start; } /* Product Showcase Layout */ .product-showcase { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; max-width: var(--overlay-max-width); animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .product-showcase__image { width: 100%; display: flex; justify-content: center; } .product-showcase__image img { width: auto; height: auto; display: block; border-radius: 8px; } .product-showcase__details { display: flex; flex-direction: column; gap: 1rem; color: var(--color-black, #111827); } .product-showcase__title { font-size: var(--font-size-2xl); font-weight: 400; line-height: 1.2; margin: 0; font-style: italic; } .product-showcase__description { font-size: var(--font-size-lg); line-height: 1.6; margin: 0; } .product-showcase__tagline { font-size: var(--font-size-base); font-style: italic; margin: 0; grid-column: 1 / -1; } .product-showcase__actions { display: flex; flex-direction: column; gap: 1.75rem; align-items: center; } .product-showcase__btn-primary, .product-showcase__btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-size: var(--font-size-base); font-weight: 500; text-decoration: none; border-radius: 50px; transition: all 0.2s; text-align: center; width: 100%; } .product-showcase__btn-primary { background: var(--color-primary, #3b5998); color: var(--color-white); border: var(--border-width-1) solid var(--color-primary, #3b5998); } .product-showcase__btn-primary:hover, .product-showcase__btn-primary:focus { transform: translateY(-2px); } .product-showcase__btn-primary:focus { outline: 3px solid var(--color-primary, #3b5998); outline-offset: 2px; } .product-showcase__btn-secondary { background: url('./images/underline-link.png') no-repeat bottom center; background-size: 100% 20px; background-position: center bottom; color: var(--color-primary, #111827); padding: var(--space-4) var(--space-12); border: none; border-radius: inherit; transition: padding 0.2s; line-height: 2; } .product-showcase__btn-secondary:focus { outline: 3px solid var(--color-primary, #3b5998); outline-offset: 2px; } /* Responsive */ @media (max-width: 768px) { .product-showcase-overlay { max-width: 100%; } .product-showcase-overlay__content { padding: 80px 24px 40px; } .product-showcase { grid-template-columns: 1fr; gap: 40px; } .product-showcase__title { font-size: var(--font-size-xl); } } /* Error State */ .nav-submenu-error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: var(--space-8); text-align: center; } .nav-submenu-error p { font-size: var(--font-size-lg); color: var(--color-neutral-700); margin: 0 0 var(--space-4); } .nav-submenu-error-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--color-primary); color: white; text-decoration: none; border-radius: var(--radius-lg); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); } .nav-submenu-error-link:hover { background: var(--color-primary-dark, var(--color-primary)); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Older laptop / tablet landscape: Always visible sidebar */ @media (min-width: 1024px) { /* Adjust main content to account for sidebar */ .site-content { margin-left: var(--space-24); } .product-showcase__title { padding-right: 40px; } .product-showcase__actions { max-width: 50%; } .product-showcase__details { max-width: 350px; } .product-showcase__image { max-width: 300px; } .product-showcase__btn-secondary { width: 75%; } }