/** * ============================================================================ * GORILLA NUTRITION SINALOA - Nav CSS * ============================================================================ * * Estilos de la barra de navegación fija. * El nav es transparente por defecto y se vuelve sólido al hacer scroll * (la clase .scrolled se agrega vía JavaScript en nav-scroll.js). * * Incluye: logo, links de navegación, botón CTA, menú hamburguesa. * * @package Gorilla_Nutrition * @since 1.0.0 */ /* ─── Nav Container ───────────────────────────────────────────────────── */ .main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--container-padding); /* Estado inicial: transparente */ background: transparent; backdrop-filter: none; border-bottom: 1px solid transparent; box-shadow: none; /* Transición suave al cambiar de estado */ transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease; } /** Estado al hacer scroll (clase añadida por JS) */ .main-nav.scrolled { background: rgba(7, 7, 7, 0.97); backdrop-filter: blur(22px) saturate(1.8); border-bottom-color: var(--color-border-gold); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.7); } /** * Compensación para la barra de administración de WordPress. * WordPress agrega la clase 'admin-bar' al cuando el admin bar está activo. * El admin bar mide 32px en desktop y 46px en móvil (≤782px). */ .admin-bar .main-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .main-nav { top: 46px; } } /* ─── Logo ────────────────────────────────────────────────────────────── */ .nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; } .nav-logo__img { width: 58px; height: 58px; border-radius: var(--radius-full); object-fit: cover; border: 1px solid rgba(201, 169, 79, 0.2); flex-shrink: 0; } .nav-logo__brand { font-family: var(--font-display); font-size: 22px; letter-spacing: 5px; line-height: 1; /* text-gold-gradient se aplica como clase */ } .nav-logo__sub { font-size: 7.5px; letter-spacing: 3.5px; color: var(--color-text-darker); text-transform: uppercase; margin-top: 1px; } /* ─── Links de Navegación ─────────────────────────────────────────────── */ .nav-links { display: flex; align-items: center; gap: 34px; } .nav-link { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #888; text-decoration: none; font-weight: 700; position: relative; transition: color 0.25s ease, text-shadow 0.25s ease, letter-spacing 0.25s ease; } /** Línea decorativa debajo del link (gradiente gold→red) */ .nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: linear-gradient(90deg, var(--color-gold), var(--color-red)); transition: width 0.3s ease; } .nav-link:hover { color: var(--color-gold) !important; text-shadow: 0 0 22px rgba(201, 169, 79, 0.7), 0 0 40px rgba(201, 169, 79, 0.3); letter-spacing: 3px; } .nav-link:hover::after { width: 100%; } /* ─── Botón CTA del Nav ───────────────────────────────────────────────── */ .nav-cta { padding: 11px 28px; background: var(--color-red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); flex-shrink: 0; transition: var(--transition-base); } .nav-cta:hover { background: var(--color-gold) !important; color: var(--color-bg-primary) !important; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201, 169, 79, 0.45) !important; } /* ─── Botón Hamburguesa (Móvil) ───────────────────────────────────────── */ .nav-hamburger { display: none; /* Visible solo en responsive.css */ flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: calc(var(--z-nav) + 1); } .nav-hamburger__line { display: block; width: 26px; height: 2px; background: var(--color-text-primary); transition: var(--transition-base); border-radius: 1px; } /** Estado abierto: líneas forman una X */ .nav-hamburger.active .nav-hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.active .nav-hamburger__line:nth-child(2) { opacity: 0; } .nav-hamburger.active .nav-hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }