/* * ESTRUCTURA — Latinos en Texas * * Cabecera fija, menú móvil, pie y el cromo compartido por index.php y 404.php * (cabecera de listado, paginación, estado vacío). Todo sale de tokens.css: * aquí no hay ni un color literal, ni un tamaño de fuente suelto. * * PUNTO DE CORTE DEL MENÚ: 1320px. Debe coincidir con CONSULTA_MOVIL en * assets/js/tema.js. Se corta ahí y no en los 1024px habituales porque en esta * cabecera conviven logo + selector de ciudad + siete entradas de menú + * buscador + CTA: por debajo de 1140 el menú empieza a comerse al buscador. * * REGLA DE LA CLASE .lt-js: la pone tema.js en . Todo lo que dependa de * JavaScript (el cajón lateral, el autoenvío del selector) cuelga de ella. Sin * JS la cabecera deja de ser fija en móvil y el menú se apila visible: nunca * queda un botón que no hace nada ni un menú imposible de abrir. * * --------------------------------------------------------------------------- * CABECERA TRANSLÚCIDA — la decisión y su límite * --------------------------------------------------------------------------- * La cabecera es papel translúcido con desenfoque, y al bajar se vuelve sólida * con filete y sombra. El estado lo marca animaciones.js poniendo la clase * `lt-desplazado` en ; si ese script no carga, la cabecera se queda en su * estado translúcido, que es perfectamente legible — no hay ningún estado roto. * * Es translúcida CLARA y no oscura, aunque la paleta nueva sea nocturna, por * una razón concreta: el logotipo del cliente es a color y está pensado para * fondo claro. Una cabecera oscura obligaría a mantener dos versiones del logo * y a que el operador supiera cuál subir en cada sitio — exactamente el tipo de * trampa que este tema existe para no dejar. El fondo oscuro dominante de la * dirección de arte lo ponen las bandas de sección, que sí controlamos. */ /* ---------------------------------------------------------------- */ /* Compensación de la barra de administración de WordPress */ /* ---------------------------------------------------------------- */ /* * La barra del admin también es fija y se pondría encima de la cabecera. Su * alto se declara UNA vez como variable local y de ahí lo leen la cabecera y el * cajón: es el mismo problema resuelto en un sitio en vez de en cuatro. * Por debajo de 600px WordPress deja de fijar su barra, así que vuelve a 0. */ body { --desplazamiento-barra: 0px; padding-top: var(--alto-cabecera); } body.admin-bar { --desplazamiento-barra: 32px; } @media (max-width: 782px) { body.admin-bar { --desplazamiento-barra: 46px; } } @media (max-width: 600px) { body.admin-bar { --desplazamiento-barra: 0px; } } /* ---------------------------------------------------------------- */ /* Iconos */ /* ---------------------------------------------------------------- */ /* * Los SVG del tema son de trazo y heredan el color del texto: un solo estilo * sirve para el icono azul del selector, el blanco del botón y el claro del * pie. El sitio anterior cargaba seis hojas de Font Awesome y cuatro librerías * de iconos para conseguir menos que esto. */ .lt-icono { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* * WordPress imprime .screen-reader-text por su cuenta (paginación, formularios * de comentarios, wp_link_pages). Sin esta regla, esos textos —pensados solo * para lectores de pantalla— aparecen a la vista en mitad de la página. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------- */ /* Cabecera */ /* ---------------------------------------------------------------- */ .lt-cabecera { position: fixed; top: var(--desplazamiento-barra); left: 0; right: 0; z-index: 100; /* * Papel cálido al 82% con desenfoque y saturación. El `saturate` es lo que * evita el efecto «cristal sucio»: sin él, el contenido que pasa por debajo * se ve lavado y la cabecera parece un plástico gris. */ background: color-mix(in srgb, var(--hueso) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); /* El filete nace invisible y aparece al bajar, junto con la sombra: en lo alto de la página la cabecera tiene que sentirse parte del documento, no una barra pegada encima. */ border-bottom: 1px solid transparent; transition: background-color var(--transicion), border-color var(--transicion), box-shadow var(--transicion); } /* * Respaldo para navegadores sin backdrop-filter (Firefox con la opción * desactivada, WebViews viejas de Android que en esta comunidad todavía se * usan). Sin él la cabecera quedaría translúcida SIN desenfoque y el menú se * leería sobre el texto de la página. Aquí se vuelve opaca y punto. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lt-cabecera { background: var(--hueso); } } /* El estado «ya se bajó»: la pone animaciones.js en . */ .lt-desplazado .lt-cabecera { background: color-mix(in srgb, var(--hueso) 97%, transparent); border-bottom-color: var(--linea); box-shadow: var(--sombra-1); } /* ---------------------------------------------------------------- */ /* Cabecera transparente sobre banda oscura */ /* ---------------------------------------------------------------- */ /* * ARRIBA DEL TODO la cabecera desaparece y el hero se ve entero detras del * menu. AL BAJAR se vuelve solida, que es como estaba. El interruptor ya * existia: animaciones.js pone `lt-desplazado` en el al pasar del * umbral, y de ahi colgaba el estado «ya se bajo». * * SOLO DONDE HAY OSCURO DETRAS. La clase `lt-sobre-oscuro` la pone * functions.php segun la pantalla. Se midio una por una: ocho de las once * empiezan en oscuro, pero empleos, noticias y el 404 arrancan en blanco y ahi * el menu transparente seria un menu invisible. De momento esta encendido solo * en la portada, a peticion del dueno. * * NO ES SOLO QUITAR EL FONDO. Hay que invertir TODO lo que se lee sobre el: * los enlaces del menu, el selector de ciudad, el conmutador de idioma y la * hamburguesa estan pensados para tinta oscura sobre papel claro. Dejar solo * uno sin invertir es dejarlo ilegible, y es el fallo tipico de este efecto. * * LA TRANSICION VA EN LA REGLA BASE, no aqui: asi el cambio de transparente a * solido se funde en vez de dar un salto al cruzar el umbral. */ /* * EL SELECTOR TIENE QUE NOMBRAR LOS DOS ELEMENTOS, Y AQUI ESTUVO EL FALLO. * * `lt-sobre-oscuro` va en el y `lt-desplazado` en el : son * elementos DISTINTOS. La primera version escribia * `.lt-sobre-oscuro:not(.lt-desplazado)`, que pregunta si el MISMO elemento * tiene una y no la otra — y el body nunca tiene `lt-desplazado`, asi que la * condicion se cumplia siempre y la cabecera se quedaba transparente tambien * despues de bajar. * * No dio ningun error: simplemente el menu flotaba sobre el contenido claro y * dejaba de leerse en cuanto se pasaba el hero. */ /* * EL HERO TIENE QUE PASAR POR DEBAJO DE LA CABECERA. * * Esto no es opcional y es lo que faltaba en el primer intento: la cabecera se * volvia transparente y detras seguia viendose BLANCO, porque el `body` lleva * un relleno superior del alto de la cabecera para que el contenido no quede * tapado. O sea, el hero empezaba justo DEBAJO y lo que asomaba por la * transparencia era el fondo del body. * * Se quita ese relleno solo en estas paginas y se le pasa al hero como relleno * interno: la seccion sube hasta el borde de la ventana —y se ve entera detras * del menu— pero su contenido sigue empezando por debajo de la cabecera, que * es lo unico que ese relleno tenia que garantizar. * * `box-sizing: border-box` es lo que hace que el `min-height: 92vh` del hero * siga siendo 92vh y no 92vh mas la cabecera. El tema lo aplica globalmente. */ /* * EL SELECTOR NOMBRA A PROPOSITO, Y SIN ESO EL MOVIL SE QUEDA EN BLANCO. * * Mas abajo, dentro del bloque de hasta 1320px, hay un `.lt-js body { * padding-top: var(--alto-cabecera) }` que devuelve el relleno cuando la * cabecera pasa a ser fija con JavaScript. Ese selector pesa lo mismo que * `body.lt-sobre-oscuro` —una clase y un elemento cada uno— y esta escrito * DESPUES, asi que ganaba: en el movil el hero seguia empezando por debajo de * la cabecera y por la transparencia asomaba el blanco del body. * * Nombrando tambien el el peso sube a dos clases y dos elementos y la * regla gana en los dos tamanos. Es mas barato que mover el bloque o duplicarlo * dentro de cada consulta de medios. */ html body.lt-sobre-oscuro, html.lt-js body.lt-sobre-oscuro { padding-top: 0; } body.lt-sobre-oscuro .lt-hero { /* * AIRE EXTRA ENTRE LA CABECERA Y EL CONTENIDO. * * Con solo el alto de la cabecera quedaban 102px hasta el antetitulo y se * leia apretado: el menu transparente y el texto comparten fondo, asi que * sin separacion se mezclan visualmente en una sola masa. Cuando la cabecera * era solida no hacia falta —el filete y el cambio de color ya separaban—, * pero al quitarlos hay que separar con espacio. * * En `clamp` y no fijo porque este hueco compite con la altura util: en una * pantalla baja, 72px fijos empujarian el buscador fuera de la primera * vista, y el buscador es la razon de ser del hero. */ --lt-aire-hero: clamp(24px, 6vh, 76px); padding-top: calc(var(--alto-cabecera) + var(--lt-aire-hero)); /* * Y EL HERO CRECE ESE MISMO ALTO. Las dos lineas van juntas. * * Con solo el relleno, el hero seguia midiendo 92vh en total y por dentro le * quedaban 92vh MENOS la cabecera: su contenido, que va centrado en vertical, * subia medio alto de cabecera y todo quedaba apelotonado contra el menu. * * Sumando la cabecera al minimo, la caja interior vuelve a medir exactamente * los 92vh de antes y el titular cae donde caia. Lo que crece es la seccion, * que es justo lo que se quiere: la parte que ahora se ve por debajo del menu * transparente. * * `svh` en la segunda declaracion por lo mismo que en el resto del tema: en * movil `vh` cuenta la barra del navegador como si no existiera. Los * navegadores que no conocen `svh` se quedan con la primera. */ /* El hero crece lo mismo que se anade arriba: asi la caja interior sigue midiendo 92vh y el contenido BAJA entero en vez de comprimirse. */ min-height: calc(92vh + var(--alto-cabecera) + var(--lt-aire-hero)); min-height: calc(92svh + var(--alto-cabecera) + var(--lt-aire-hero)); } /* * EN MOVIL EL AIRE SOBRA CASI ENTERO. * * Arriba se pusieron hasta 76px porque en escritorio el lienzo esta en posicion * ABSOLUTA y arranca pegado al borde: sin ese colchon la punta del panhandle * quedaba bajo los enlaces del menu. * * En movil el reparto es otro. Por debajo de 1024px el lienzo deja de estar * posicionado y pasa a ser el PRIMER BLOQUE de una columna (ver hero.css), asi * que ya no puede meterse debajo de nada — y ademas trae su propio colchon * gratis: la figura no llena su caja, le sobran unos 60px transparentes por * arriba. Sumando los dos, el hueco medido entre el menu y el dibujo era de * 107-128px segun el telefono, y se veia como un agujero. * * Se deja un aire minimo, no cero: pegar la caja al ras del menu deja el dibujo * a merced de esos 60px internos, que dependen de la proporcion de la figura y * cambiarian el dia que se retoque el encuadre del mapa. El colchon explicito * es la parte que se controla. * * AQUI SE PROBO TAMBIEN DEVOLVER `min-height: 0` Y SE DESCARTO CON NUMEROS. * * El razonamiento era bueno: hero.css pide `min-height: 0` en esta consulta de * medios —en la columna apilada manda el contenido— y la regla de la cabecera * transparente se lo comia por especificidad. Se corrigio, se midio, y la * correccion resulto peor que el fallo: en tableta vertical (768x1024, 820x1180, * 834x1194, 900x1200) el contenido apilado se queda 30-100px por debajo de la * ventana, y lo que asoma al pie de la portada es el relleno superior de la * seccion siguiente — una franja lisa, sin nada dentro. Se lee como un hueco, * no como «hay mas abajo». * * En telefono da igual: ahi el contenido siempre pasa del minimo. Asi que la * unica diferencia medible del cambio era esa franja vacia. Se queda el minimo. */ @media (max-width: 1024px) { body.lt-sobre-oscuro .lt-hero { --lt-aire-hero: clamp(6px, 1.2vh, 14px); } /* * SIN JAVASCRIPT LA CABECERA NO ES FIJA, ASI QUE NO HAY QUE COMPENSARLA. * * Por debajo de 1320px y sin `.lt-js`, la cabecera pasa a `position: static` * (mas abajo en este mismo archivo) y ocupa su sitio en el flujo. El relleno * del hero seguia descontando su altura igualmente: 90px de negro muerto * entre el final del menu y el mapa, justo el agujero que este bloque viene a * cerrar, colado por otra puerta. */ html:not(.lt-js) body.lt-sobre-oscuro .lt-hero { padding-top: var(--lt-aire-hero); } /* * El mismo alivio para las otras siete pantallas de banda oscura, que hoy * estan comentadas en functions.php. Si no se escribe ahora, el dia que se * enciendan repetiran en movil justo el agujero que se acaba de cerrar en la * portada, y nadie recordara por que la portada si y el resto no. */ body.lt-sobre-oscuro > .lt-principal > .lt-seccion--marca:first-child, body.lt-sobre-oscuro .lt-principal > .lt-seccion--marca:first-child { padding-top: calc(var(--alto-cabecera) + var(--e-4, 32px)); } } /* * En las paginas que no son la portada, la banda oscura de arriba es la * cabecera de marca del archivo. Se le da el mismo trato para cuando se * enciendan (hoy solo esta activa la portada). */ body.lt-sobre-oscuro > .lt-principal > .lt-seccion--marca:first-child, body.lt-sobre-oscuro .lt-principal > .lt-seccion--marca:first-child { padding-top: calc(var(--alto-cabecera) + var(--seccion-y, 64px)); } /* * `.lt-anima` EN TODAS ESTAS REGLAS, Y NO ES DECORATIVO. * * La transparencia y la tinta blanca son UNA sola decision y tienen que * encenderse y apagarse juntas. Estaban separadas: el fondo se devolvia con * `html:not(.lt-anima)` y la tinta no, asi que en cuanto animaciones.js no * corria —sin JavaScript, o con `prefers-reduced-motion`, que hace que el guion * se abstenga a proposito— quedaba cabecera CREMA con letras BLANCAS. Medido: * 1,56:1 de contraste en escritorio y 1,09:1 en el menu desplegado del movil, * contra el 4,5:1 que exige el minimo. El menu entero, ilegible, en la pagina * mas visitada. * * Y no se recuperaba al bajar: `lt-desplazado` la escribe el mismo guion que no * habia corrido. * * Colgando las 18 reglas del mismo interruptor, sin JS y con movimiento * reducido se cae al comportamiento de siempre: cabecera solida, tinta oscura. */ html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-cabecera { background: transparent; border-bottom-color: transparent; box-shadow: none; /* Sin desenfoque: sobre el video del hero, un blur de 14px lo emborrona justo en la franja superior y se nota como una banda mate. */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* --- Lo que se lee encima: todo a blanco -------------------------- */ html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-nav__lista a, html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-marca__texto { color: var(--blanco, #FFF); } html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-nav__lista a:hover { color: var(--blanco, #FFF); background: rgba(255, 255, 255, .14); } /* * La pagina actual seguia marcandose con el azul de marca, que sobre el hero * oscuro da 2,3:1 y desaparece. Se marca con blanco y el filete inferior, que * es la otra mitad de la senal y sigue funcionando. */ html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-nav__lista .current-menu-item > a, html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-nav__lista .current_page_item > a { color: var(--blanco, #FFF); } /* Selector de ciudad: borde y texto claros, fondo apenas insinuado. */ html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-ciudad__caja { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .08); } html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-ciudad__campo, html.lt-anima:not(.lt-desplazado) body.lt-sobre-oscuro .lt-ciudad__caja .lt-icono { color: var(--blanco, #FFF); } /* * AQUI SE PUSO UNA FLECHA DE FONDO Y SOBRABA. Queda anotado porque el error es * facil de repetir: el selector del HERO si dibuja su flecha con * `background-image`, y al invertir los colores parecia que este tambien. * * Pero el selector de la CABECERA tiene su flecha como un aparte * (`.lt-ciudad__flecha`). Anadir la de fondo pintaba una SEGUNDA flecha dentro * del campo, encima del texto: se leia «All of Texas» con un chevron tachandolo. * * No hace falta ninguna regla: ese usa `currentColor` y ya se vuelve * blanco con la regla del icono de mas arriba. */ /* Las opciones del desplegable se pintan con el tema del sistema: si el texto va blanco, el fondo del dentro, y deja el * —que ya estaba escondido— y en pantalla no cambiaba * absolutamente nada: la caja seguia midiendo 151px. * * El SIGUE ESTANDO, con * su nombre, su etiqueta y su lista entera. Lo que se esconde es el texto * dibujado, no el control. Se puede pulsar, se abre la lista nativa del * teléfono con todas las ciudades, funciona con teclado y el lector de * pantalla lo sigue anunciando por su