/* ============================================================ NOVO HAIR — NAV-FOOTER.CSS Estilos de header y footer, compartidos por todas las páginas. Mobile-first: la base es mobile, los @media agrandan a desktop. ============================================================ */ /* ============================================================ SKIP LINK (accesibilidad — invisible salvo con teclado) ============================================================ */ .skip-link { position: absolute; top: -100px; left: 0; background-color: var(--color-white); color: var(--color-black); padding: var(--space-sm); z-index: 1000; transition: top var(--transition-fast); } .skip-link:focus { top: 0; } /* ============================================================ HEADER ============================================================ */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: transparent; transition: background-color var(--transition-medium), box-shadow var(--transition-medium); } /* Estado al hacer scroll — clase agregada por navbar.js */ .header--scrolled { background-color: var(--color-off-white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .header__container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-sm); } .header__logo img { display: block; width: 140px; height: auto; } .header__nav { display: flex; align-items: center; gap: var(--space-md); } /* --- Menú de navegación (oculto en mobile por defecto) --- */ .header__nav-menu { display: none; } .header__nav-menu a { font-family: var(--font-body); font-size: var(--text-label-button-size); font-weight: 600; color: var(--color-off-white); transition: color var(--transition-fast); letter-spacing: 0.04em; } .header--scrolled .header__nav-menu a { color: var(--color-brown); } .header__nav-menu a:hover { color: var(--color-gold); } /* --- Botón CTA del header --- */ .header__cta { display: none; /* se muestra desde desktop, ver media query */ padding: 10px 20px; border-radius: 9px; } /* --- Botón hamburguesa (solo mobile) --- */ .header__menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; } .header__menu-icon, .header__menu-icon::before, .header__menu-icon::after { content: ''; display: block; width: 24px; height: 2px; background-color: var(--color-off-white); transition: background-color var(--transition-fast), transform var(--transition-fast); } .header--scrolled .header__menu-icon, .header--scrolled .header__menu-icon::before, .header--scrolled .header__menu-icon::after { background-color: var(--color-brown); } .header__menu-icon::before { content: ''; position: absolute; transform: translateY(-8px); } .header__menu-icon::after { content: ''; position: absolute; transform: translateY(8px); } /* Ícono se transforma en "X" cuando el menú está abierto (clase agregada por navbar.js sobre o el botón) */ .header__menu-toggle[aria-expanded="true"] .header__menu-icon { background-color: transparent; } .header__menu-toggle[aria-expanded="true"] .header__menu-icon::before { transform: rotate(45deg); } .header__menu-toggle[aria-expanded="true"] .header__menu-icon::after { transform: rotate(-45deg); } /* --- Menú mobile desplegado --- NOTA: este diseño de dropdown es una propuesta estándar, no vino especificado en el Figma (no había frame del estado abierto). Ajustar si el cliente tiene algo puntual en mente. */ .header__nav-menu.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-off-white); padding: var(--space-md) var(--container-padding); gap: var(--space-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .header__nav-menu.is-open a { color: var(--color-brown); font-size: var(--text-body-large-size); } /* ============================================================ HEADER — DESKTOP (1024px+) ============================================================ */ @media (min-width: 1024px) { .header__container { padding-block: var(--space-md); } .header__logo img { width: 180px; } .header__nav-menu { display: flex; align-items: center; gap: var(--space-lg); position: static; background-color: transparent; box-shadow: none; padding: 0; } .header__cta { display: inline-flex; } .header__menu-toggle { display: none; } } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--color-white); padding-block: var(--space-lg); } .footer__top { display: flex; flex-direction: column; gap: var(--space-lg); padding-block: var(--space-md); } .footer__logo img { display: block; width: 200px; height: auto; } /* --- Nav del footer: en mobile, 2 columnas de 3 items --- */ .footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: var(--space-sm) var(--space-lg); } .footer__nav a { font-family: var(--font-body); font-size: var(--text-label-button-size); font-weight: 600; color: var(--color-gold); transition: color var(--transition-fast); } .footer__nav a:hover { color: var(--color-brown); } /* --- Footer bottom: en mobile, Instagram arriba, copyright abajo --- */ .footer__bottom { display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-gold-light); } .footer__social-links { display: flex; gap: var(--space-md); order: -1; /* en mobile van primero, como en el diseño */ } .footer__social-links a { font-family: var(--font-body); font-size: var(--text-label-button-size); font-weight: 600; color: var(--color-brown); transition: color var(--transition-fast); white-space: nowrap; } .footer__social-links a:hover { color: var(--color-gold); } .footer__copyright { font-family: var(--font-body); font-size: var(--text-label-button-size); font-style: italic; color: var(--color-gray); } /* ============================================================ FOOTER — DESKTOP (1024px+) ============================================================ */ @media (min-width: 1024px) { .footer__top { flex-direction: row; align-items: center; justify-content: space-between; } .footer__nav ul { display: flex; flex-direction: row; gap: var(--space-lg); } .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } .footer__social-links { order: 0; /* en desktop van a la derecha, orden natural del DOM */ } } /* Fuerza el header en su estado "sólido" desde el arranque, para páginas que NO tienen una foto detrás del header (todas menos Home y Fue Full) */ .header--solid { background-color: var(--color-off-white); } .header--solid .header__nav-menu a { color: var(--color-brown); } .header--solid .header__menu-icon, .header--solid .header__menu-icon::before, .header--solid .header__menu-icon::after { background-color: var(--color-brown); }