/* ========================================================================== HEADER GLOBAL V1 — ARQUITECTURA C Referencia visual: BOCETO.png, especialmente CONCEPTO 5. El header NO pertenece a la pelicula del Revuelto: pertenece al concesionario. Permanece AUSENTE durante la presentacion 0->100, el Hero comercial y practicamente toda la salida naranja, y solo entra cuando el obsidian del catalogo ha ocupado por completo la banda superior. Transparencia total: sin background, sin border, sin blur, sin shadow. El contraste no se resuelve con una superficie: se resuelve no estando. NO modifica style.css, app.js, hero.css, hero.js ni catalog.js. De catalog.css consume UNICAMENTE --site-container. ========================================================================== */ :root{ /* Banda estructural. Muy por encima del alto del texto: el area interactiva vive dentro, pero no se dibuja ninguna barra. */ --hdr-h: 72px; --hdr-ink: #F4F2ED; --hdr-muted: #8A8A86; /* Manrope entra sola en cuanto exista localmente. Sin fuentes remotas. */ --hdr-font: 'Manrope', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; /* Separaciones medidas en la auditoria: 34px entre links, 48px antes de ES. */ --hdr-nav-gap: clamp(20px, 2.4vw, 34px); --hdr-aux-gap: clamp(28px, 3.4vw, 48px); --hdr-lang-gap: 30px; } /* ========================================================================== 1. SKIP LINK Fuera de pantalla hasta el foco. Es el unico elemento de este archivo con fondo propio, porque al recibir foco puede caer sobre el naranja. ========================================================================== */ .skip-to-content{ position:fixed; top:0; left:0; z-index:200; padding:16px 26px; background:#080808; color:var(--hdr-ink); font-family:var(--hdr-font); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transform:translateY(-101%); } .skip-to-content:focus, .skip-to-content:focus-visible{ transform:translateY(0); outline:2px solid var(--hdr-ink); outline-offset:-7px; } /* ========================================================================== 2. BANDA position:fixed, primer hijo de , fuera del overflow:hidden y del isolation:isolate de .stage. z-index 100: por encima de todo el contenido (que va en auto) y muy por debajo del panel de debug (9999). ========================================================================== */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:100; height:var(--hdr-h); color:var(--hdr-ink); font-family:var(--hdr-font); font-synthesis:none; -webkit-font-smoothing:antialiased; opacity:0; transform:translateY(-14px); /* Durante la entrada geometrica NO hay transicion: cada valor es funcion pura de la posicion de scroll. La transicion solo se activa (.is-eased) en la zona persistente, donde el unico cambio lo produce la direccion. */ transition:none; will-change:opacity, transform; } .site-header[data-state="hidden"]{ visibility:hidden; pointer-events:none; } .site-header.is-eased{ transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s; } /* Al ocultarse por direccion, visibility espera a que termine el fundido; al reaparecer entra de inmediato. Sin timers en JS. */ .site-header.is-eased[data-state="hidden"]{ transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } /* Misma reticula que el catalogo. La medida vive en una sola variable. */ .site-header-inner{ width:var(--site-container); margin:0 auto; height:100%; display:flex; align-items:center; } /* ========================================================================== 3. GRUPO A — WORDMARK Placeholder visible. La marca definitiva NO esta decidida: sustituir el texto del es suficiente, no hay que reestructurar nada. ========================================================================== */ .site-wordmark{ flex:0 0 auto; font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; color:var(--hdr-ink); user-select:none; } /* ========================================================================== 4. GRUPO B — NAVEGACION margin-left:auto empuja navegacion y auxiliares al borde derecho: todo el espacio sobrante se acumula entre el wordmark y el primer link. EL VACIO ES EL ELEMENTO DOMINANTE DE LA COMPOSICION. ========================================================================== */ .site-nav{margin-left:auto} .site-nav-list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--hdr-nav-gap); } .site-nav-link{ position:relative; display:inline-flex; align-items:center; min-height:44px; margin:0; padding:0; border:0; background:none; appearance:none; color:var(--hdr-muted); font:inherit; font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; text-decoration:none; cursor:pointer; transition:color .2s ease; } /* Mismo lenguaje que .cat-filter::after: 1px, limpio, contenido. */ .site-nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; } .site-nav-link:hover{color:var(--hdr-ink)} .site-nav-link[aria-current="page"]{color:var(--hdr-ink)} .site-nav-link[aria-current="page"]::after{transform:scaleX(1)} /* ========================================================================== 5. GRUPO C — ES / MENU ========================================================================== */ .site-aux{ display:flex; align-items:center; gap:var(--hdr-lang-gap); margin-left:var(--hdr-aux-gap); } .site-lang, .site-menu{ position:relative; margin:0; padding:0; border:0; background:none; appearance:none; font:inherit; cursor:pointer; transition:color .2s ease; } /* Area interactiva de 44x44 sin ensanchar la caja de maquetacion: asi el glifo del menu termina exactamente en el borde del contenedor. */ .site-lang::before, .site-menu::before{ content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%, -50%); } .site-lang{ height:44px; display:inline-flex; align-items:center; color:var(--hdr-muted); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; } .site-lang:hover{color:var(--hdr-ink)} .site-menu{ width:18px; height:44px; display:inline-flex; align-items:center; justify-content:center; color:var(--hdr-ink); font-size:17px; line-height:1; } .site-menu:hover{color:#fff} /* ========================================================================== 6. FOCO Integrado con la estetica obsidian. Anula el naranja de style.css. ========================================================================== */ .site-header :focus-visible{ outline:2px solid var(--hdr-ink); outline-offset:6px; } /* ========================================================================== 7. REDUCED MOTION El header sigue apareciendo y desapareciendo segun posicion, pero sin transform, sin transiciones y sin logica de direccion. ========================================================================== */ @media (prefers-reduced-motion: reduce){ .site-header, .site-header.is-eased, .site-header.is-eased[data-state="hidden"]{transition:none} .site-header{transform:none !important} .site-nav-link, .site-nav-link::after, .site-lang, .site-menu{transition:none} } /* ========================================================================== 8. PROTECCION ESTRUCTURAL — MOBILE NO ESTA DISENADO Por debajo de 860px los cinco links desktop se retiran en lugar de aplastarse. El menu fullscreen NO esta construido todavia. ========================================================================== */ @media (max-width:1100px){ :root{--hdr-nav-gap:18px; --hdr-lang-gap:26px} } @media (max-width:860px){ :root{--hdr-h:64px} .site-nav{display:none} .site-aux{margin-left:auto} }