/* * assets/home.css — Portada de zaalen * * ══════════════════════════════════════════════════════════════════════ * QUÉ ES ESTO Y POR QUÉ NO ES app.css * ══════════════════════════════════════════════════════════════════════ * * app.css viste el ARMAZÓN DE PRODUCTO: barra oscura, barra lateral * colapsable, panel de ajustes. Es el mueble que comparten DEZIMI, OCTABI * y QUMERIQ, y qumeriq.html lo reproduce a propósito para que quien pasa * de la web al producto reconozca el mismo sitio. * * La portada de zaalen no es eso. Es un escaparate: barra superior * transparente sobre vídeo, mega-menú desplegable, hero a pantalla * completa. Meter ambas cosas en app.css obligaría a acotar cada regla * con un `body.home` y las dos páginas se estorbarían en cada cambio. * Así que este fichero es independiente y sólo comparte con el resto los * TOKENS y las @font-face de theme.css, que sí es la única fuente de * verdad de la marca. * * Orden del fichero: base → barra superior → mega-menú → waffle → hero * → secciones → pie → móvil. El bloque de móvil va al final entero, en * vez de repartido, porque en una portada la versión estrecha es una * reorganización de todo el armazón y no un retoque suelto. */ /* ══════════════════════════════════════════════════════════════════════ 1 · BASE ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { /* El scroll suave lo pide la navegación por anclas del mega-menú, pero se retira más abajo para quien ha pedido menos movimiento. */ scroll-behavior: smooth; /* La barra es fija: sin esto, un ancla deja el titular debajo de ella. */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-md); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Con el menú móvil o un mega-menú abiertos, el fondo no debe correr. */ body.is-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display, var(--font)); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } /* Sólo para lectores de pantalla: el texto está, pero no ocupa. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* El foco visible se declara una vez y para todo: es la única pista que tiene quien navega con el teclado, y se pierde en cuanto una regla de componente pone outline:none sin reponerlo. */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* Sobre el vídeo, el azul de marca no se ve: ahí el foco va en blanco. */ .hero :focus-visible, .topbar:not(.is-solid) :focus-visible { outline-color: #fff; } /* Salto al contenido: el primer tabulador de la página. */ .skip { position: absolute; top: -60px; left: 12px; z-index: 200; padding: 10px 18px; background: var(--brand); color: #fff; font-weight: 600; transition: top var(--transition); } .skip:focus { top: 12px; } .wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 32px; } /* ══════════════════════════════════════════════════════════════════════ 2 · BARRA SUPERIOR ══════════════════════════════════════════════════════════════════════ Empieza transparente y encima del vídeo —de ahí el texto blanco— y se vuelve sólida en cuanto la página baja del hero, que es cuando debajo hay fondo claro y el blanco dejaría de leerse. La clase la pone home.js con un IntersectionObserver sobre el hero, no con un listener de scroll: el observador no corre en cada píxel. */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; gap: 4px; height: 68px; padding-inline: 32px; color: #fff; background: transparent; transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition); border-bottom: 1px solid transparent; } /* Sólida: al bajar del hero, o mientras un mega-menú está abierto (el panel es claro y tiene que nacer de una barra clara, no del vídeo). */ .topbar.is-solid, .topbar.has-open { background: var(--surface); color: var(--text); border-bottom-color: var(--border-dim); } .topbar-logo { display: flex; align-items: center; padding: 8px 10px 8px 0; flex: 0 0 auto; } .topbar-mark { height: 26px; width: auto; /* El logotipo trae el rojo de marca cocido en los travesaños y el azul como currentColor. Sobre el vídeo, ese azul sería ilegible: se hereda el blanco de la barra y el rojo se deja estar, que sí contrasta. */ color: currentColor; } /* En cuanto la barra se vuelve sólida, el fondo pasa a ser el papel claro del tema y el azul de marca ya se lee: el logotipo deja de heredar y sale en el #0032a0 del original, con el rojo que ya trae dentro. Es la misma marca que en la firma de SOLUCIONES, y por la misma razón —debajo hay blanco—; sobre el vídeo sigue en blanco, que es donde el azul no aguantaría. No hace falta tocar la transición: .topbar ya anima `color`, así que el paso de blanco a azul se funde a la vez que el del resto de la barra. */ .topbar.is-solid .topbar-mark, .topbar.has-open .topbar-mark { color: #0032a0; } /* Los cinco apartados. Van en un