/** * @file * Estilos del Header/Navegación para CasaEditora. */ nav.navbar#navbar { position: fixed; top: 0; left: 0; width: 100%; /* Must exceed .nav-overlay (z-index 999, appended to by JS) so the fixed off-canvas .nav-menu inside this stacking context paints above the overlay and its links stay clickable on mobile. */ z-index: 500; padding: 15px 0; transition: var(--transition); background: white; flex-wrap: nowrap; --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0; } nav.navbar#navbar { position: fixed; top: 0; left: 0; width: 100%; /* Must exceed .nav-overlay (z-index 999, appended to by JS) so the fixed off-canvas .nav-menu inside this stacking context paints above the overlay and its links stay clickable on mobile. */ z-index: 500; padding: 15px 0; transition: var(--transition); background: white; flex-wrap: nowrap; --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0; } @media (max-width: 1000px) { nav.navbar#navbar { z-index: 1000; } } nav.navbar#navbar.scrolled { background: white; backdrop-filter: blur(10px); padding: 10px 0; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } nav.navbar#navbar .nav-container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-img { height: 45px; width: auto; max-width: 320px; object-fit: contain; } .logo-icon { color: var(--color-white); font-size: 24px; } .logo-name { color: var(--color-white); font-size: 14px; font-weight: 600; } .logo-divider { color: rgba(255, 255, 255, 0.5); font-size: 20px; } .logo-text { color: var(--color-white); font-size: 14px; font-weight: 500; } .nav-logo:hover { color: var(--color-white); text-decoration: none; } /* Nav Links - Drupal menu wrapper */ .nav-links-wrapper { display: flex; align-items: center; } .nav-menu { display: flex; align-items: center; gap: 25px; list-style: none; margin: 0; padding: 0; } .nav-item { margin: 0; padding: 0; white-space: nowrap; } .nav-link, .nav-menu a, .nav-menu a.is-active, .nav-menu a:visited, .nav-menu a:active { color: black; text-decoration: none !important; font-weight: 400; font-size: 14px; transition: var(--transition); position: relative; padding: 0.5rem 0; display: inline-block; } .nav-link::after, .nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #0670b2;; transition: var(--transition); } .nav-link:hover::after, .nav-menu a:hover::after { width: 100%; } .nav-link:hover, .nav-menu a:hover { color: black !important; } .nav-link:focus, .nav-menu a:focus { outline: none; box-shadow: none; color: black !important; } .nav-link.active, .nav-menu a.active { color: black !important; } .nav-link.active::after, .nav-menu a.active::after { width: 100%; } /* Mobile Menu Toggle */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; margin-left: auto; } .nav-toggle span { display: block; width: 25px; height: 2px; background: #282828; transition: var(--transition); } .nav-toggle:hover span { background: #0670b2;; } /* Nav overlay for mobile */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .nav-overlay.active { display: block; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 992px) { nav.navbar#navbar { padding: 10px 0; } .nav-toggle { display: flex; flex-shrink: 0; z-index: 1001; order: 3; } .nav-links-wrapper .nav-menu, .nav-menu { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #fff; flex-direction: column; align-items: flex-start; padding: 80px 30px 30px; gap: 0; transition: right 0.3s ease; box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3); z-index: 1000; } .nav-links-wrapper .nav-menu.active, .nav-menu.active { right: 0; } .nav-item, .nav-menu li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .nav-link, .nav-menu a { display: block; padding: 15px 0; font-size: 15px; } .nav-link::after, .nav-menu a::after { display: none; } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } } @media (max-width: 768px) { nav.navbar#navbar .nav-container { padding: 0 15px; } .logo-name { font-size: 12px; } .logo-text { font-size: 12px; } .logo-divider { font-size: 16px; } .logo-icon { font-size: 20px; } } @media (max-width: 480px) { .logo-text, .logo-divider { display: none; } }