/** * Estilos solo para cabecera + menú (includes/header.php + includes/nav.php). * Incluir esta hoja en páginas donde se inserte el menú sin cargar common.css completo. * El JS del sitio (common.js) añade/quita la clase `menu-open` en al pulsar el hamburguesa. * Opcional: cargar las fuentes del sitio (Cormorant para el menú, Lora para coherencia). */ :root { --font-heading: 'Cormorant', Georgia, serif; --font-body: 'Lora', Georgia, serif; --color-accent: #d45b00; --color-text: #777; --color-white: #fff; --max-width: 1200px; --header-height: 65px; } html { font-size: 17px; } body.menu-open { overflow: hidden; } /* Header */ .site-header { padding: 2.25rem 2rem; } body.menu-open .site-header { z-index: 200; } .header-inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .site-header a { text-decoration: none; color: inherit; } .site-header .logo img { height: var(--header-height); width: auto; max-width: 100%; display: block; } .logo-menu { display: none; } body.menu-open .logo-default { display: none; } body.menu-open .logo-menu { display: block; } /* Hamburguesa */ .hamburger { background: none; border: none; cursor: pointer; padding: 8px; z-index: 300; position: relative; display: flex; flex-direction: column; gap: 6px; } .hamburger span { display: block; width: 26px; height: 2px; background: var(--color-accent); border-radius: 1px; transition: transform 0.35s ease, opacity 0.25s ease, background-color 0.3s ease; transform-origin: center; } body.menu-open .hamburger span { background: var(--color-text); } body.menu-open .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.menu-open .hamburger span:nth-child(2) { opacity: 0; } body.menu-open .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Overlay del menú */ .menu-overlay { position: fixed; inset: 0; background: var(--color-white); z-index: 150; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } body.menu-open .menu-overlay { opacity: 1; visibility: visible; } .menu-overlay nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; } .menu-overlay nav ul li { overflow: hidden; padding: 0; } .menu-overlay nav ul li a { display: block; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 400; color: var(--color-text); padding: 0.2rem 0; text-align: center; text-decoration: none; transform: translateY(110%); transition: transform 0.3s ease, color 0.2s ease; } body.menu-open .menu-overlay nav ul li a { transform: translateY(0); transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease; transition-delay: calc(var(--i, 0) * 60ms); } .menu-overlay nav ul li a:hover, .menu-overlay nav ul li a.active { color: var(--color-accent); } @media (max-width: 960px) { .site-header { padding: 1.5rem; } .site-header .logo img { height: 55px; } .header-inner { flex-direction: row-reverse; } .menu-overlay { padding: 3rem 2rem; } .menu-overlay nav ul li a { font-size: 7.5vw; line-height: 2; } }