/** * Sidebar Navigation Styles - Modern Implementation (2025) * * Features:* - CSS Variables for dynamic theming * - Modern CSS features (@property, container queries) * - Full accessibility (WCAG 2.1 Level AA) * - Reduced motion support * - Touch-friendly targets * - Performance optimizations * * @package Hestia * @since 3.3.4 *//* ============================================================================ CSS Custom Properties (Dynamic via JavaScript & Customizer) ========================================================================= */@property --sidebar-width{ syntax:"<length>";initial-value:320px;inherits:false;}:root{ /* Layout */ --sidebar-width:320px;--sidebar-max-width:90vw;--sidebar-animation-speed:300ms;/* Colors (Light Theme) */ --sidebar-bg:#ffffff;--sidebar-text:#333333;--sidebar-border:#e5e5e5;--sidebar-hover:#f5f5f5;--sidebar-active:#007cba;--sidebar-overlay:rgba(0, 0, 0, 0.5);/* Shadows */ --sidebar-shadow-light:2px 0 8px rgba(0, 0, 0, 0.1);--sidebar-shadow-medium:2px 0 16px rgba(0, 0, 0, 0.15);--sidebar-shadow-strong:2px 0 24px rgba(0, 0, 0, 0.2);--sidebar-shadow:var(--sidebar-shadow-medium);/* Typography */ --sidebar-font-size:1rem;--sidebar-line-height:1.5;/* Spacing */ --sidebar-padding:20px;--sidebar-item-padding:12px 20px;/* Z-index - WordPress Admin Bar is 99999, so we stay below */ --sidebar-overlay-z-index:9998;--sidebar-toggle-z-index:9999;--sidebar-z-index:10000;/* Transitions */ --sidebar-transition:transform var(--sidebar-animation-speed) cubic-bezier(0.4, 0, 0.2, 1);}/* Dark Theme Support */[data-theme="dark"],.theme-dark,@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --sidebar-bg:#1a1a1a;--sidebar-text:#e0e0e0;--sidebar-border:#333333;--sidebar-hover:#2a2a2a;--sidebar-active:#4a9eff;--sidebar-overlay:rgba(0, 0, 0, 0.7);}}/* ============================================================================ Reduced Motion Support (WCAG 2.1 Level AA) ========================================================================= */@media (prefers-reduced-motion:reduce){ *{ animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} :root{ --sidebar-animation-speed:0.01ms;--sidebar-transition:none;}}/* ============================================================================ Sidebar Container (Semantic <aside>) ========================================================================= */#hestia-sidebar-navigation{ position:fixed;top:0;width:var(--sidebar-width);max-width:var(--sidebar-max-width);height:100vh;height:100dvh;/* Dynamic viewport height for mobile */ background-color:var(--sidebar-bg);color:var(--sidebar-text);z-index:var(--sidebar-z-index);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;/* Performance optimizations */ contain:layout style paint;content-visibility:auto;/* Accessibility */ outline:none;/* Initial hidden state on mobile only */ visibility:hidden;}/* Mobile:Ensure full viewport height */@media (max-width:991px){ #hestia-sidebar-navigation{ height:100vh !important;height:100dvh !important;min-height:100vh;min-height:100dvh;}}/* Desktop:Always visible sidebar */@media (min-width:992px){ #hestia-sidebar-navigation{ visibility:visible;transform:translateX(0) !important;transition:none;} #hestia-sidebar-navigation.sidebar-left{ left:0;border-right:1px solid var(--sidebar-border);} #hestia-sidebar-navigation.sidebar-right{ right:0;left:auto;border-left:1px solid var(--sidebar-border);} /* Adjust main content to make room for sidebar */ body.has-sidebar .page-header, body.has-sidebar .main, body.has-sidebar .footer{ transition:margin 0.3s ease;} body.has-sidebar.sidebar-left .page-header, body.has-sidebar.sidebar-left .main, body.has-sidebar.sidebar-left .footer{ margin-left:var(--sidebar-width);} body.has-sidebar.sidebar-right .page-header, body.has-sidebar.sidebar-right .main, body.has-sidebar.sidebar-right .footer{ margin-right:var(--sidebar-width);}}/* Left sidebar (default) */#hestia-sidebar-navigation.sidebar-left{ left:0;transform:translateX(-100%);border-right:1px solid var(--sidebar-border);box-shadow:var(--sidebar-shadow);}/* Right sidebar */#hestia-sidebar-navigation.sidebar-right{ right:0;left:auto;transform:translateX(100%);border-left:1px solid var(--sidebar-border);box-shadow:calc(-1 * var(--sidebar-shadow));}/* Open state */#hestia-sidebar-navigation.is-open{ visibility:visible;transform:translateX(0);transition:var(--sidebar-transition), visibility 0s;}/* Animation variants */#hestia-sidebar-navigation.animation-fade{ opacity:0;transition:var(--sidebar-transition), opacity var(--sidebar-animation-speed), visibility 0s;}#hestia-sidebar-navigation.animation-fade.is-open{ opacity:1;}#hestia-sidebar-navigation.animation-scale{ transform-origin:left center;transform:translateX(-100%) scale(0.9);opacity:0;transition:var(--sidebar-transition), opacity var(--sidebar-animation-speed), visibility 0s;}#hestia-sidebar-navigation.animation-scale.sidebar-right{ transform-origin:right center;transform:translateX(100%) scale(0.9);}#hestia-sidebar-navigation.animation-scale.is-open{ transform:translateX(0) scale(1);opacity:1;}/* Push animation (pushes content) */body.sidebar-open.animation-push .site-content,body.sidebar-open.animation-push .site-header{ transform:translateX(var(--sidebar-width));transition:transform var(--sidebar-animation-speed) ease;}body.sidebar-open.animation-push.sidebar-right .site-content,body.sidebar-open.animation-push.sidebar-right .site-header{ transform:translateX(calc(-1 * var(--sidebar-width)));}/* ============================================================================ Sidebar Inner Structure ========================================================================= */.sidebar-nav-inner{ display:flex;flex-direction:column;min-height:100%;padding:20px 0 0 0;}/* ============================================================================ Sidebar Header ========================================================================= */.sidebar-header{ position:relative;padding:var(--sidebar-padding);border-bottom:1px solid var(--sidebar-border);flex-shrink:0;min-height:120px;}.sidebar-header-content{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;}.sidebar-title + .sidebar-subtitle{ margin-top:-12px;/* Reduce space between title and subtitle */}.sidebar-logo{ width:100%;display:flex;justify-content:center;}.sidebar-logo img{ max-height:120px;max-width:200px;width:auto;height:auto;object-fit:contain;}.sidebar-title{ margin:0;font-size:1.25rem;font-weight:600;color:var(--sidebar-text);line-height:1.3;}.sidebar-subtitle{ margin:0;font-size:0.875rem;color:var(--sidebar-text);opacity:0.8;line-height:1.4;}/* Placeholder text in customizer */.sidebar-placeholder-text{ padding:var(--sidebar-padding);color:var(--sidebar-text);opacity:0.6;font-size:0.875rem;line-height:1.5;margin:0;}/* ============================================================================ Close Button ========================================================================= */.sidebar-close{ /* Positioning */ position:absolute !important;top:8px !important;right:8px !important;left:auto !important;bottom:auto !important;/* Reset all button styles */ background:none !important;background-color:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;/* Reset dimensions */ padding:0 !important;margin:0 !important;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;max-width:none !important;max-height:none !important;/* Display */ display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;/* Appearance */ color:var(--sidebar-text) !important;cursor:pointer !important;opacity:0.7;transition:opacity 0.2s ease;z-index:10;/* Remove transforms */ transform:none !important;}.sidebar-close:hover{ opacity:1;background:none !important;background-color:transparent !important;transform:none !important;}.sidebar-close:focus{ outline:none !important;box-shadow:none !important;background:none !important;}.sidebar-close:active{ background:none !important;transform:none !important;}/* Icon sizing for close button */.sidebar-close .menu-icon{ width:20px;height:20px;}/* ============================================================================ Sidebar Content ========================================================================= */.sidebar-nav-content{ flex:1;padding:var(--sidebar-padding) 0;overflow-y:auto;overflow-x:hidden;/* Performance */ contain:layout style;content-visibility:auto;}/* ============================================================================ Navigation Menu ========================================================================= */.sidebar-nav-menu{ list-style:none;margin:0;padding:0;}.sidebar-nav-menu li{ position:relative;}.sidebar-nav-menu a{ display:flex;align-items:center;justify-content:space-between;padding:var(--sidebar-item-padding);color:var(--sidebar-text);text-decoration:none;font-size:1.25rem;/* Increased font size (20px) */ line-height:var(--sidebar-line-height);transition:background-color 0.2s ease, color 0.2s ease;/* Touch target size */ min-height:48px;}/* Menu item icons - increase size */.sidebar-nav-menu a i,.sidebar-nav-menu a .fa,.sidebar-nav-menu a .dashicons{ font-size:1.375rem;/* 22px */ margin-right:12px;}.sidebar-nav-menu a:hover,.sidebar-nav-menu a:focus{ background-color:var(--sidebar-hover);outline:none;}.sidebar-nav-menu a:focus-visible{ outline:2px solid var(--sidebar-active);outline-offset:-2px;}/* Active/current menu item */.sidebar-nav-menu .current-menu-item > a,.sidebar-nav-menu .current-menu-parent > a,.sidebar-nav-menu .current-menu-ancestor > a{ background-color:var(--sidebar-hover);color:var(--sidebar-active);font-weight:600;}/* Submenu indicator */.menu-item-has-children > a::after{ content:"";display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform 0.2s ease;margin-left:12px;flex-shrink:0;}.menu-item-has-children.is-open > a::after{ transform:rotate(-135deg);}/* Submenus */.sidebar-nav-menu .sub-menu{ list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s ease;background-color:rgba(0, 0, 0, 0.05);}.menu-item-has-children.is-open > .sub-menu{ max-height:1000px;/* Large enough for most menus */}.sidebar-nav-menu .sub-menu a{ padding-left:calc(var(--sidebar-padding) + 20px);font-size:0.9375rem;}.sidebar-nav-menu .sub-menu .sub-menu a{ padding-left:calc(var(--sidebar-padding) + 40px);font-size:0.875rem;}/* ============================================================================ Widgets ========================================================================= */.sidebar-widgets,.sidebar-footer-widgets{ padding:0 var(--sidebar-padding);margin:20px 0;}.sidebar-widgets .widget,.sidebar-footer-widgets .widget{ margin-bottom:30px;}.sidebar-widgets .widget:last-child,.sidebar-footer-widgets .widget:last-child{ margin-bottom:0;}.widget-title{ font-size:1.125rem;font-weight:600;color:var(--sidebar-text);margin:0 0 15px;}/* ============================================================================ Search ========================================================================= */.sidebar-search{ padding:0 var(--sidebar-padding);margin:20px 0;}.sidebar-search .search-form{ display:flex;gap:8px;}.sidebar-search .search-field{ flex:1;padding:10px 15px;border:1px solid var(--sidebar-border);border-radius:4px;background-color:var(--sidebar-bg);color:var(--sidebar-text);font-size:0.9375rem;}.sidebar-search .search-submit{ padding:10px 20px;background-color:var(--sidebar-active);color:#ffffff;border:none;border-radius:4px;cursor:pointer;transition:opacity 0.2s ease;}.sidebar-search .search-submit:hover,.sidebar-search .search-submit:focus{ opacity:0.9;}/* ============================================================================ Sidebar Footer ========================================================================= */.sidebar-footer{ padding:var(--sidebar-padding);border-top:1px solid var(--sidebar-border);margin-top:auto;flex-shrink:0;}.sidebar-footer-menu{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:15px;}.sidebar-footer-menu a{ color:var(--sidebar-text);text-decoration:none;font-size:0.875rem;opacity:0.8;transition:opacity 0.2s ease;}.sidebar-footer-menu a:hover,.sidebar-footer-menu a:focus{ opacity:1;outline:none;text-decoration:underline;}/* ============================================================================ Toggle Button (Mobile Only - Fixed Position) ========================================================================= *//* Mobile Toggle Button - Fixed at top left */.sidebar-toggle-mobile{ position:fixed;top:16px;left:16px;z-index:var(--sidebar-toggle-z-index);width:48px;height:48px;padding:10px;background:transparent !important;border:2px solid #ffffff !important;border-radius:8px;box-shadow:none !important;cursor:pointer;display:none;/* Hidden by default, shown on mobile */ flex-direction:column;align-items:center;justify-content:center;color:#ffffff !important;margin:0;transition:none;/* Touch target */ min-width:48px;min-height:48px;/* Remove tap highlight on mobile */ -webkit-tap-highlight-color:transparent;}.sidebar-toggle-mobile:hover{ background:transparent !important;color:#ffffff !important;border-color:#ffffff !important;}.sidebar-toggle-mobile:focus{ background:transparent !important;color:#ffffff !important;border-color:#ffffff !important;outline:none !important;}.sidebar-toggle-mobile:active{ background:transparent !important;color:#ffffff !important;border-color:#ffffff !important;}/* Legacy .sidebar-toggle class for backwards compatibility */.sidebar-toggle{ position:relative;z-index:var(--sidebar-toggle-z-index);width:44px;height:44px;padding:10px;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sidebar-text);margin:0;/* Touch target */ min-width:44px;min-height:44px;/* Remove tap highlight on mobile */ -webkit-tap-highlight-color:transparent;}.sidebar-toggle:hover .menu-icon{ color:rgb(71, 85, 105);/* slate-600 */}.sidebar-toggle:focus{ outline:none;}.sidebar-toggle:focus .menu-icon{ color:rgb(71, 85, 105);/* slate-600 */}.sidebar-toggle:focus-visible{ outline:2px solid rgb(100, 116, 139);/* slate-500 */ outline-offset:2px;}.sidebar-toggle:active .menu-icon{ color:rgb(51, 65, 85);/* slate-700 */}/* Mobile:Show standalone toggle button */@media (max-width:991px){ .sidebar-toggle-mobile{ display:flex !important;} /* Legacy navbar toggle */ .navbar-toggle-sidebar, .sidebar-toggle{ display:inline-flex !important;}}/* Navbar integration styling */.navbar-toggle-wrapper{ display:flex;align-items:center;gap:10px;}/* Mobile only:Show sidebar toggle in navbar */@media (max-width:991px){ .navbar-toggle-wrapper .sidebar-toggle, .navbar-toggle-sidebar{ /* Reset all button styles */ background:none !important;background-color:transparent !important;border:none !important;border-radius:0 !important;box-shadow:none !important;outline:none !important;/* Reset dimensions */ padding:0 !important;margin:0 !important;width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;max-width:none !important;max-height:none !important;/* Display */ display:inline-flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;/* Appearance */ cursor:pointer !important;opacity:0.7;transition:opacity 0.2s ease;/* Remove transforms */ transform:none !important;position:relative !important;} .navbar-toggle-wrapper .sidebar-toggle:hover, .navbar-toggle-sidebar:hover{ opacity:1;background:none !important;background-color:transparent !important;transform:none !important;} .navbar-toggle-wrapper .sidebar-toggle:focus, .navbar-toggle-sidebar:focus{ outline:none !important;box-shadow:none !important;background:none !important;} .navbar-toggle-wrapper .sidebar-toggle:active, .navbar-toggle-sidebar:active{ background:none !important;transform:none !important;}}/* Desktop:Hide sidebar toggle */@media (min-width:992px){ .sidebar-toggle, .navbar-toggle-sidebar{ display:none !important;}}/* Mobile:Proper header alignment */@media (max-width:991px){ /* Override theme's margin-left:auto that pushes toggle to right */ .navbar-header .navbar-toggle-wrapper{ margin-left:0 !important;margin-right:auto !important;flex-shrink:0;display:flex;align-items:center;gap:4px;} /* Ensure navbar-header uses flexbox properly */ .navbar .container .navbar-header{ display:flex !important;align-items:center;justify-content:flex-start;gap:0;flex-wrap:nowrap;width:100%;} /* Logo wrapper alignment */ .navbar-header .title-logo-wrapper{ flex:0 0 auto;margin:0;display:flex;align-items:center;} /* Brand alignment */ .navbar-header .navbar-brand{ margin:0;padding:10px 8px;display:flex;align-items:center;height:100%;} /* Optimal touch target on mobile (44px is recommended) */ .sidebar-toggle{ width:44px;height:44px;padding:10px;min-width:44px;min-height:44px;margin:0 4px 0 0;} .menu-icon{ width:22px;height:22px;}}/* Menu icon - Heroicons SVG */.menu-icon{ display:block;width:24px;height:24px;color:currentColor;flex-shrink:0;transition:color 0.2s cubic-bezier(0.4, 0, 0.2, 1);}/* Show bars-3 icon when closed, hide x-mark */.sidebar-toggle .menu-icon-open,.sidebar-toggle-mobile .menu-icon-open{ display:block;}.sidebar-toggle .menu-icon-close,.sidebar-toggle-mobile .menu-icon-close{ display:none;}/* Show x-mark icon when open, hide bars-3 */.sidebar-toggle[aria-expanded="true"] .menu-icon-open,.sidebar-toggle-mobile[aria-expanded="true"] .menu-icon-open{ display:none;}.sidebar-toggle[aria-expanded="true"] .menu-icon-close,.sidebar-toggle-mobile[aria-expanded="true"] .menu-icon-close{ display:block;}/* Button text */.button-text{ margin-top:4px;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;}/* ============================================================================ Overlay ========================================================================= */.sidebar-overlay{ position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;background-color:var(--sidebar-overlay);z-index:var(--sidebar-overlay-z-index);opacity:0;visibility:hidden;transition:opacity var(--sidebar-animation-speed) ease, visibility 0s var(--sidebar-animation-speed);cursor:pointer;-webkit-tap-highlight-color:transparent;}.sidebar-overlay.is-visible{ opacity:1;visibility:visible;transition:opacity var(--sidebar-animation-speed) ease, visibility 0s;}/* ============================================================================ Body Modifications ========================================================================= */body.sidebar-open{ overflow:hidden;position:fixed;width:100%;}/* ============================================================================ Screen Reader Only ========================================================================= */.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}/* ============================================================================ Shadow Variants ========================================================================= */.hestia-sidebar-nav.shadow-light{ --sidebar-shadow:var(--sidebar-shadow-light);}.hestia-sidebar-nav.shadow-medium{ --sidebar-shadow:var(--sidebar-shadow-medium);}.hestia-sidebar-nav.shadow-strong{ --sidebar-shadow:var(--sidebar-shadow-strong);}.hestia-sidebar-nav.shadow-none{ --sidebar-shadow:none;}/* ============================================================================ Responsive Design ========================================================================= */@media (max-width:576px){ :root{ --sidebar-width:280px;--sidebar-max-width:85vw;--sidebar-padding:15px;--sidebar-item-padding:10px 15px;--sidebar-font-size:0.9375rem;} .sidebar-toggle{ width:44px;height:44px;}}@media (min-width:992px){ /* Desktop:Hide toggle button - sidebar always visible */ .sidebar-toggle{ display:none;} /* Desktop:Hide close button - sidebar can't be closed */ .sidebar-close{ display:none;} /* Desktop:Hide overlay - not needed */ .sidebar-overlay{ display:none;} /* Desktop:Don't lock body scroll */ body.sidebar-open{ overflow:auto;position:static;width:auto;} /* Desktop:Sidebar always visible */ #hestia-sidebar-navigation{ visibility:visible !important;transform:translateX(0) !important;transition:none;} /* Desktop:Adjust main content to make room for sidebar */ body.has-sidebar .page-header, body.has-sidebar .main, body.has-sidebar .footer{ transition:margin 0.3s ease;} body.has-sidebar.sidebar-left .page-header, body.has-sidebar.sidebar-left .main, body.has-sidebar.sidebar-left .footer{ margin-left:var(--sidebar-width);} body.has-sidebar.sidebar-right .page-header, body.has-sidebar.sidebar-right .main, body.has-sidebar.sidebar-right .footer{ margin-right:var(--sidebar-width);} /* Adjust fixed navbar positioning to account for sidebar */ body.has-sidebar .header .navbar{ max-width:100%;transition:left 0.3s ease, right 0.3s ease, width 0.3s ease;} /* For fixed navbar - adjust position and width */ body.has-sidebar.sidebar-left .header .navbar.navbar-fixed-top{ left:var(--sidebar-width);right:0;width:calc(100% - var(--sidebar-width));} body.has-sidebar.sidebar-right .header .navbar.navbar-fixed-top{ left:0;right:var(--sidebar-width);width:calc(100% - var(--sidebar-width));} /* For static navbar - use margin instead */ body.has-sidebar.sidebar-left .header .navbar.navbar-static-top{ margin-left:var(--sidebar-width);} body.has-sidebar.sidebar-right .header .navbar.navbar-static-top{ margin-right:var(--sidebar-width);} /* Adjust navbar container to fit within the content area */ body.has-sidebar .header .navbar .container{ width:100%;padding-left:15px;padding-right:15px;}}/* ============================================================================ High Contrast Mode ========================================================================= */@media (prefers-contrast:high){ .sidebar-nav-menu a:focus-visible, .sidebar-toggle:focus-visible, .sidebar-close:focus-visible{ outline-width:3px;outline-offset:3px;}}/* ============================================================================ Print Styles ========================================================================= */@media print{ #hestia-sidebar-navigation, .sidebar-toggle, .sidebar-overlay{ display:none !important;}}