/* ============================================================================ Brooklyn by Janice — Header, footer y navegación Port de header-brooklyn.liquid y footer-brooklyn.liquid. Los colores y fuentes literales del original se reemplazan por tokens. ========================================================================= */ /* ---------- Barra de anuncios ---------- */ .announce { position: relative; /* Alto medido, no heredado del line-height del cuerpo: la barra es decorativa y en un sitio 95,64% móvil cada píxel que ocupa se lo quita al primer pantallazo, que es donde se decide la compra. */ padding: 4px 0; background: var(--ink); color: var(--sand); font-family: var(--mono); font-size: .68rem; line-height: var(--lh-texto); letter-spacing: .04em; white-space: nowrap; overflow: hidden; } .announce-track { display: inline-flex; width: max-content; animation: bk-marquee 20s linear infinite; } .announce-item { display: inline-flex; align-items: center; white-space: nowrap; padding-right: 56px; } @keyframes bk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .announce-track { animation: none; } } /* ---------- Header ---------- */ header.site { position: sticky; top: 0; z-index: 50; /* Blanco puro (pedido de Janice, 30-08). Era rgba(240,240,240,.92), o sea el gris `--paper` del sistema visual viejo, que sobre el papel cálido del cuerpo se leía como una franja sucia. Se mantiene semitransparente + blur para que el contenido que pasa por debajo se insinúe al hacer scroll. */ background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(43, 43, 43, .08); transition: transform .28s ease; } /* Se oculta al bajar, vuelve al subir — ver initHeaderScroll() en app.js. */ header.site.is-oculto { transform: translateY(-100%); } /* La barra de admin de WordPress mide 32px y es fija: sin esto, el header pegajoso se le mete debajo al estar logueado. */ .admin-bar header.site { top: 32px; } @media (max-width: 782px) { .admin-bar header.site { top: 46px; } } /* Grilla de 1fr auto 1fr, no flex con space-between: con flex el logo se centra respecto del espacio sobrante y basta que un lado sea más ancho —el carrito con su contador— para que quede corrido. Con 1fr a cada lado el centro del logo es el centro real de la pantalla. El padding lateral descuenta el aire interno del botón redondo (44 - 20 de ícono = 12 por lado), para que el ÍCONO quede alineado con el borde de texto del sitio y no el rectángulo invisible que lo contiene. */ header.site .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; max-width: var(--container); margin-inline: auto; padding: 4px max(8px, calc(var(--edge) - 12px)); } .nav-lado { display: flex; align-items: center; gap: 0; } .nav-lado--izq { justify-self: start; } .nav-lado--der { justify-self: end; } /* 34px, no 26 (pedido de Ignacio, 23-08: «más presencia al centro»). El alto del header no cambia: lo fija el botón táctil de 44px, y el logo sigue cabiendo dentro de esa fila con aire. La firma es de proporción 3:1, así que a 34px mide 102px de ancho — con los cuatro íconos ocupando 176px, sobra espacio incluso en la pantalla más angosta que se soporta. */ header.site .logo { display: flex; align-items: center; justify-content: center; height: 34px; flex-shrink: 0; } header.site .logo img { height: 100%; width: auto; } @media (min-width: 700px) { header.site .logo { height: 38px; } } /* El botón sigue midiendo 44px —el mínimo táctil— aunque el ícono baje a 20px: reducir el alto del header no puede pagarse con un blanco de tiro más chico en un sitio que es 95,64% móvil. Lo que se recortó es el padding del contenedor, no el área tocable. */ .icon-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--ink); flex-shrink: 0; cursor: pointer; transition: background var(--t-fast); } .icon-btn:hover { background: rgba(43, 43, 43, .06); } .cart-btn { position: relative; } .cart-count { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--wine); color: var(--white); font-family: var(--mono); font-size: .6rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .cart-count.is-empty { display: none; } /* ---------- Menú móvil a pantalla completa: CSS puro, sin Javascript ---------- El checkbox tiene que ser hermano directo del drawer para que funcione :checked ~ . Sin JS el menú funciona aunque el script falle o llegue tarde. Fondo de papel con textura de harina a pantalla completa, no una franja lateral — la versión anterior dejaba una porción del contenido de fondo asomando porque el drawer medía un % de un contenedor que no era el viewport. `inset: 0` deja de depender de ningún padre. El fondo es EXACTAMENTE el del home (`--papel` + `--harina`): abrir el menú no cambia de mundo, se levanta una capa del mismo papel. ⚠️ Al invertir el fondo hubo que revisar el color de TODOS los hijos —es la regla de §3.l, aprendida cinco veces en este proyecto: cambiar el fondo de un contenedor obliga a repasar cada color que vive dentro. Nada de arena (`--sand` da 1,29:1 sobre claro) ni blush como color de texto. */ #bk-menu-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* El panel arranca DEBAJO del header (30-08, pedido de Ignacio: «que en el menú aparezca el header»). Antes era `inset: 0` con z-index 200, o sea tapaba el header entero y traía su propio logo y su propia ✕. ⚠️ El z-index baja de 200 a 40 —por debajo de los 50 del header— y no es un detalle: con 200 el panel seguiría dibujándose encima aunque empiece más abajo, y el header quedaría tapado por su franja translúcida. El alto se calcula, no se asume: `100dvh` menos el header. `dvh` y no `vh` porque en un teléfono la barra del navegador aparece y desaparece, y con `vh` el final del menú queda debajo de ella. */ .bk-drawer { position: fixed; /* 🔴 NO es `var(--sticky-h)`, y esto costó una medición para verlo. `--sticky-h` son 53px: SOLO el header. Pero la barra de anuncios va encima y NO es fija —se va con el scroll—, así que mientras se ve empuja al header hacia abajo: su borde inferior real son 75,8px, no 53. Con el panel arrancando en 53 el primer ítem del menú quedaba **16,8px por detrás del header**, o sea la primera opción del menú tapada. Lo resuelve `--drawer-top`, que app.js pone al abrir con el borde inferior medido del header. El respaldo NO es `--sticky-h` sino `--sticky-h + 24`: si el JS no corre, se prefiere que sobre aire —un hueco de 24px cuando la barra ya se fue— antes que esconder la primera opción. Un menú con una opción invisible es peor que un menú con una separación de más. */ top: var(--drawer-top, calc(var(--sticky-h) + 24px)); left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 40; background: var(--papel); background-image: var(--harina); background-size: var(--harina-size); color: var(--ink); transform: translateX(100%); transition: transform .22s ease; overscroll-behavior: contain; display: flex; flex-direction: column; } #bk-menu-toggle:checked ~ .bk-drawer { transform: translateX(0); } /* La barra de admin de WordPress mide 32px y es fija: sin esto el panel se le mete debajo al estar logueado, igual que le pasaba al header. */ .admin-bar .bk-drawer { top: calc(var(--drawer-top, calc(var(--sticky-h) + 24px)) + 32px); } @media (max-width: 782px) { .admin-bar .bk-drawer { top: calc(var(--drawer-top, calc(var(--sticky-h) + 24px)) + 46px); } } /* 🔴 EL HEADER NO PUEDE ESCONDERSE CON EL MENÚ ABIERTO. `initHeaderScroll()` le pone `.is-oculto` al bajar, y ahora el header es la única forma de cerrar el menú: si se va, la ✕ se va con él y el panel queda sin salida. Se le gana con `:has()` sobre el checkbox, que es la misma mecánica sin JS que ya usa el bloqueo de scroll de abajo. */ body:has(#bk-menu-toggle:checked) header.site.is-oculto { transform: none; } /* 🔴 LOS DOS FLOTANTES SE ESCONDEN CON EL MENÚ ABIERTO. El conversor de moneda va en z-index 55 y el lanzador de Brook en 60; el panel bajó a 40 para quedar bajo el header, así que los dos pasaron a dibujarse ENCIMA del menú — montados justo sobre el botón «Ver Ebooks», que es el CTA que cierra el panel. Se vio en la primera captura del menú abierto: el círculo USD a la izquierda del botón y la B de Brook a la derecha, los dos por delante. No se arregla subiendo el panel —volvería a tapar el header, que es exactamente lo que se acaba de pedir que no pase—: se esconden, que además es lo correcto. Con el menú abierto no hay página debajo sobre la que convertir un precio ni sobre la que preguntar nada; son capas de servicio de la página, no del menú. `visibility` y no solo `opacity`: un elemento transparente sigue recibiendo toques, así que el botón del panel quedaría con dos zonas muertas. */ body:has(#bk-menu-toggle:checked) .moneda-fab, body:has(#bk-menu-toggle:checked) .brook-fab, body:has(#bk-menu-toggle:checked) .brook--flotante { opacity: 0; visibility: hidden; pointer-events: none; } /* La hamburguesa pasa a ✕ mientras el menú está abierto (30-08). Los dos íconos y los dos nombres accesibles viven en el marcado; acá se decide cuál se ve. `~` alcanza al header porque el checkbox ahora va ANTES que él. */ .menu-toggle .menu-toggle-cerrar { display: none; } #bk-menu-toggle:checked ~ header.site .menu-toggle .menu-toggle-abrir { display: none; } #bk-menu-toggle:checked ~ header.site .menu-toggle .menu-toggle-cerrar { display: block; } /* `.screen-reader-text` ya está fuera de pantalla, así que para el texto no sirve `display: block` — hay que devolverle su propia caja oculta. */ #bk-menu-toggle:checked ~ header.site .menu-toggle span.menu-toggle-cerrar { display: inline; } .menu-toggle span.menu-toggle-cerrar { display: none; } /* Bloquea el scroll del fondo mientras el menú está abierto — misma regla :checked, sin una línea de Javascript. */ body:has(#bk-menu-toggle:checked) { overflow: hidden; } /* Acá vivían `.bk-drawer-top`, `.bk-drawer-logo`, `.bk-drawer-logo-link` y `.bk-drawer-cerrar` — la cabecera propia del panel. Se BORRARON, no se dejaron comentadas, al pasar el header por encima del menú (30-08): ninguna de esas clases existe ya en `header.php`. No es higiene. Este proyecto perdió tres sesiones depurando CSS muerto que no estaba inerte y ganaba por especificidad (~200 líneas en `home-brooklyn.css` el 19-08, ~150 en `cart.css` el 26-08, ~320 del checkout el 26-08). El CSS que ya no se usa no estorba hasta que gana. Con ellas se va también el comentario de la trampa de `woocommerce-layout.css` —`.woocommerce-page img { height: auto }` deformaba el logo del panel en carrito, checkout y mi cuenta—. Deja de aplicar porque ese logo ya no existe; la trampa sigue viva para cualquier otra imagen del tema. */ /* Por clase y no por nombre de etiqueta (`.bk-drawer nav`): el panel completo pasó a ser el `