/* ========================================================================== CABECERA OSCURA, al estilo de La Gaceta. -------------------------------------------------------------------------- Se aplica a las paginas que llevan la clase hs-oscura en el , que se anade desde inc/index.php. Ahora mismo: la portada de la tienda y la pagina de Arsenal Meta (listas meta). TODO cuelga de body.hs-oscura , asi que no puede tocar ninguna otra pagina. Para quitarlo: borrar este archivo y el bloque que lo carga en inc/index.php. Los valores NO son aproximados: estan copiados de assets/css/blog.css (la cabecera real de La Gaceta), para que sea la misma cosa y no un parecido. --g-noche #10141a --g-noche-2 #161c23 --g-naranja #d28712 barra superior #0c0f13 ========================================================================== */ body.hs-oscura { --hn-noche: #10141a; --hn-noche-2: #161c23; --hn-tira: #0c0f13; --hn-ambar: #d28712; --hn-texto: #c3c8ce; --hn-apagado: #8d949c; } /* ---------- 1. La tira de avisos: cristal esmerilado ---------- Se devuelven los valores EXACTOS que tenia el tema antes de quitarlo (ver el comentario de styles.css, linea 40): teal al 70% + blur(28px) brightness(2). Antes esto no se notaba, porque detras solo habia blanco y el resultado era indistinguible de un color plano. Ahora detras esta el bloque oscuro de la cabecera, asi que el cristal SI tiene algo que desenfocar. EL PRECIO, dicho claro: `backdrop-filter` obliga al navegador a recalcular toda la franja en CADA fotograma del desplazamiento. Fue una de las tres causas de que el scroll fuera a tirones. Si vuelven, se quitan estas dos lineas y ya. Texto, tipografia e iconos de la tira NO se tocan: siguen siendo los del tema. */ body.hs-oscura .hs-topbar { background: rgba(112, 142, 149, 0.7) !important; -webkit-backdrop-filter: blur(28px) brightness(2); backdrop-filter: blur(28px) brightness(2); } /* ---------- 1 bis. La cabecera arranca en el pixel 0 ---------- EL PROBLEMA: la tira de envios va FIJA (position:fixed), asi que no ocupa sitio en la pagina. Para compensarlo, el cuerpo lleva un padding-top de 43px... y ese hueco es BLANCO. Por eso, por detras de las esquinas redondeadas de la tira, asomaba el blanco. LA SOLUCION: quitarle ese padding al cuerpo y que la cabecera empiece arriba del todo, por debajo de la tira. Asi la tira flota sobre el bloque oscuro y sus esquinas se recortan contra el, no contra el blanco. Para que el contenido no se meta debajo de la tira, la fila del logotipo recibe 43px extra de aire por arriba: exactamente el alto de la tira. Resultado: mismo respiro por encima que por debajo, contando desde el borde de la tira. */ body.hs-oscura { padding-top: 0 !important; } /* ---------- 2. La cabecera ---------- */ body.hs-oscura header.site-header, body.hs-oscura > header, body.hs-oscura .site-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--hn-noche-2) 0%, var(--hn-noche) 100%); /* SIN borde inferior. Llevaba `1px solid rgba(255,255,255,.09)` y ese era el origen de la marca de las esquinas: un borde de UN SOLO lado no puede acabar en seco cuando hay border-radius. El navegador tiene que pasar de 1px abajo a 0px en los laterales, y lo resuelve dibujando una CUNA DIAGONAL en cada esquina. Sobre el fondo oscuro esa cuna se leia como un triangulo raro, y en el lado derecho cantaba mas. La separacion ya la pone el filete ambar de aqui abajo. */ /* SIN sombra. La llevaba (0 10px 26px rgba(0,0,0,.18)) y como la cabecera se cierra con 20px de radio, la sombra se proyectaba siguiendo esa curva y en las dos puntas se juntaba consigo misma y se acumulaba: por fuera de cada esquina redondeada asomaba una cuna oscura. Sobre el blanco del home se veia a la legua. No hace falta: la cabecera ya se despega del contenido con el filete de 1px de arriba y con la linea ambar de abajo. */ margin: 0; } /* Las esquinas de abajo del bloque negro, redondeadas: asi el bloque se cierra como una pieza y no como un corte a hachazo. NADA de overflow:hidden aqui. Se probo, para que el filete siguiera la curva, y la cabecera colapsaba a 1px de alto (medido). No hace falta: el filete ambar es un degradado que se desvanece a transparente en los dos extremos, asi que en las esquinas ya no hay nada que pueda asomar. */ body.hs-oscura > header { border-radius: 0 0 20px 20px; } /* El filete ambar al borde mismo de la cabecera: el sello de la casa en La Gaceta. */ body.hs-oscura > header::after { content: ""; display: block; height: 2px; /* Metido 50px por cada lado. Los 20 primeros son obligatorios: son el radio de las esquinas de abajo. Antes iba a todo el ancho y, como no se recorta con la curva (el header es overflow:visible), la cruzaba con una recta, y el hueco que quedaba atrapado entre la curva y esa recta se leia como un triangulo negro pegado a cada esquina. Los 30 restantes son decision del cliente: el filete se queda mas corto y mas centrado. */ margin-left: 50px; margin-right: 50px; background: linear-gradient(90deg, rgba(210, 135, 18, 0) 0%, var(--hn-ambar) 25%, var(--hn-ambar) 75%, rgba(210, 135, 18, 0) 100%); } /* ---------- 2 bis. Repartir el aire, no quitarlo ---------- MEDIDO en el navegador, no supuesto: fila del logotipo 43 -> 132 (pegada al borde de arriba, 0px encima) hueco muerto 64px (margin-top del menu, de la rejilla de Bootstrap, que se escapa hacia arriba porque su fila es block) menu 196 -> 261 Todo el aire estaba DEBAJO de la fila del logotipo, asi que se veia subida. El primer intento fue quitar el hueco, y quedo apelotonado. Lo correcto es REPARTIRLO: se anula el margen que se escapa y se le da a la fila del logotipo el mismo respiro arriba que abajo. Misma cantidad de aire, centrada. */ body.hs-oscura .store-menu { margin-top: 0 !important; } body.hs-oscura > header .row.align-items-center { /* 43px = alto de la tira de envios, que va flotando por encima. 1.45rem = el aire de verdad, el mismo que abajo. */ padding-top: calc(43px + 1.45rem); padding-bottom: 1.45rem; } /* ---------- 2 ter. El slider, con el mismo aire arriba que abajo ---------- MEDIDO: por debajo, del slider al carrusel de marcas hay 72px (24px del mb-4 del slider + 48px del my-5 de la fila del carrusel). Arriba habia 0px. Se iguala a 72px para que el slider quede centrado entre la cabecera y el carrusel. */ body.hs-oscura #mainHeroSlider { margin-top: 72px; } /* ---------- 3. El logotipo, en blanco ---------- */ /* El logotipo de la tienda es de color y no hay version blanca en el tema. Para la prueba se pasa a blanco puro por filtro: instantaneo y reversible. Si la prueba se aprueba, hay que exportar un PNG blanco de verdad. */ body.hs-oscura .logo img { filter: brightness(0) invert(1); } body.hs-oscura .logo h1, body.hs-oscura .logo h1 a { color: #f5f1e9; } /* ---------- 4. El menu horizontal ---------- */ body.hs-oscura .store-menu { border-top: 1px solid rgba(255, 255, 255, 0.07); } body.hs-oscura .store-menu .navbar-nav a { display: inline-block; padding: 6px 2px; font-family: 'Montserrat', Arial, sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hn-texto); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } body.hs-oscura .store-menu .navbar-nav a:hover, body.hs-oscura .store-menu .navbar-nav .current-menu-item > a, body.hs-oscura .store-menu .navbar-nav .current_page_item > a { color: #fff; border-bottom-color: var(--hn-ambar); } /* ---------- 5. Los iconos de la derecha ---------- */ body.hs-oscura .hs-icon-cart { color: #e4e7ea; } body.hs-oscura .hs-icon-cart path, body.hs-oscura .hs-icon-cart circle, body.hs-oscura .hs-icon-cart g { stroke: currentColor; } body.hs-oscura .cart-contents { color: #e4e7ea !important; } /* El boton de la cuenta: circulo blanco y monigote en negro. El color va escrito en el propio SVG (fill="#d28712" y stroke="#fff"), asi que hay que pisarlo desde aqui. El circulo grande es hijo directo del svg; el monigote va dentro de un , que es como se distinguen. */ body.hs-oscura .hs-icon-account > circle { fill: #ffffff; } body.hs-oscura .hs-icon-account g circle, body.hs-oscura .hs-icon-account g path { stroke: #1c1c1c; } /* El buscador (FiboSearch, estilo "solaris") sobre fondo oscuro. Su pastilla es blanca por defecto y canta muchisimo aqui. OJO: el

que envuelve al campo es CUADRADO y el campo va redondeado a 800px. Si se le pone fondo al form, asoman cuatro cantos grises en las esquinas. Por eso el form se deja TRANSPARENTE y solo se pinta el campo. */ body.hs-oscura .search-wrapper .dgwt-wcas-search-wrapp, body.hs-oscura .search-wrapper .dgwt-wcas-search-form { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.hs-oscura .search-wrapper .dgwt-wcas-search-input { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #e4e7ea !important; box-shadow: none !important; } body.hs-oscura .search-wrapper .dgwt-wcas-search-input::placeholder { color: #8d949c !important; opacity: 1; } body.hs-oscura .search-wrapper .dgwt-wcas-search-input:focus { background: rgba(255, 255, 255, 0.11) !important; border-color: rgba(210, 135, 18, 0.55) !important; } body.hs-oscura .search-wrapper .dgwt-wcas-ico-magnifier, body.hs-oscura .search-wrapper .dgwt-wcas-ico-magnifier path, body.hs-oscura .search-wrapper .dgwt-wcas-search-submit { fill: #c3c8ce !important; color: #c3c8ce !important; background: transparent !important; } /* ---------- 6. El boton de menu (hamburguesa) ---------- */ body.hs-oscura .hs-hamburger span, body.hs-oscura .hs-hamburger::before, body.hs-oscura .hs-hamburger::after { background: #e4e7ea; } body.hs-oscura .hs-hamburger { color: #e4e7ea; } /* ---------- 7. Que el cuerpo no arranque en blanco pegado ---------- */ /* Sin esto se ve una franja blanca entre la cabecera y el primer bloque. */ body.hs-oscura .hs-topbar + header, body.hs-oscura header + * { margin-top: 0; }