/* ========================================================================== Sistema de landings — base común -------------------------------------------------------------------------- Lo que comparten todas las landings: tipografías de marca, paleta, blindaje contra Bootstrap y MDB, contenedor, botones, barra superior, slider, formularios y acordeón. page-landing.php lo carga en TODAS las landings, antes del CSS propio de cada una. Para ajustar una landing concreta no se toca este archivo: se usa su landing.css, que se carga después y puede sobrescribir lo que haga falta. ========================================================================== */ /* -------------------------------------------------------------------------- Tipografías corporativas -------------------------------------------------------------------------- Hagrid -> títulos y textos destacados Geomanist -> párrafos y el resto Archivos originales en .ttf, convertidos a .woff2 (pesan ~85% menos). Hagrid solo tiene dos pesos disponibles: Regular (400) y Extrabold. Por eso el Extrabold se declara con el rango "700 800": así el 700 que usan botones y algunos titulares toma el archivo real en vez de fabricar una negrita falsa engordando el Regular. Geomanist no trae itálicas, y no hacen falta: ningún texto en Geomanist va inclinado. Las cursivas de la landing son todas de Hagrid. -------------------------------------------------------------------------- */ @font-face { font-family: 'Hagrid'; src: url('fonts/Hagrid-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hagrid'; src: url('fonts/Hagrid-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Hagrid'; src: url('fonts/Hagrid-ExtraBold.woff2') format('woff2'); font-weight: 700 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Hagrid'; src: url('fonts/Hagrid-ExtraBoldItalic.woff2') format('woff2'); font-weight: 700 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Geomanist'; src: url('fonts/Geomanist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geomanist'; src: url('fonts/Geomanist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geomanist'; src: url('fonts/Geomanist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Geomanist no tiene Extrabold: por encima de Bold solo hay Black y Ultra, ambos declarados como 900. Se usa Black, y el rango cubre 800 y 900. */ @font-face { font-family: 'Geomanist'; src: url('fonts/Geomanist-Black.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; } .lpg { /* Paleta — muestreada del comp original */ --rojo: #ff0042; --rojo-osc: #d80038; --amarillo: #fcc048; --amarillo-osc:#e8a92e; --crema: #fcfcf0; --morado: #4a1a3c; /* variedades de zarzamora */ --dorado: #c8a44a; --tinta: #2b2b2b; --gris: #6d6d6d; --gris-linea: #d9d9d9; --blanco: #fff; /* Tipografía corporativa */ --font-display: 'Hagrid', system-ui, sans-serif; --font-texto: 'Geomanist', system-ui, sans-serif; --contenedor: 1200px; --radio: 22px; --radio-lg: 34px; font-family: var(--font-texto); /* MDB pone font-weight:300 en el y se hereda hacia dentro, así que todo el texto salía un peso por debajo del que le toca. */ font-weight: 400; color: var(--tinta); background: var(--blanco); line-height: 1.55; overflow-x: clip; } /* -------------------------------------------------------------------------- Blindaje contra Bootstrap / MDB -------------------------------------------------------------------------- */ .lpg *, .lpg *::before, .lpg *::after { box-sizing: border-box; } /* Todo el bloque va con :where(), que aporta especificidad cero. Así cada regla pesa lo mismo que la clase .lpg y nada más: sigue ganando a los selectores de elemento de Bootstrap y MDB, pero cualquier clase propia declarada más abajo la sobrescribe sin pelear. Sin :where(), un selector como ".lpg a" (0,1,1) vence a ".lpg-topbar__mail" (0,1,0) y deja los enlaces sin su color. */ .lpg :where(h1, h2, h3, h4, p, ul, li, figure) { margin: 0; padding: 0; } .lpg :where(ul) { list-style: none; } .lpg :where(img, picture, svg) { display: block; max-width: 100%; } .lpg :where(img) { height: auto; } .lpg :where(a) { color: inherit; text-decoration: none; } /* -------------------------------------------------------------------------- Neutralización de los estilos del tema -------------------------------------------------------------------------- main.css cuelga estilos de las clases que WordPress pone en el , y alcanzan a los elementos de la landing: .page h2 / .page h3 (0,1,1) Oswald y versalitas .page h2:after / h3:after (0,1,2) la raya morada #583d72 .page p (0,1,1) gris #5d5d5d en Lato .page ul li (0,1,2) gris en Lato .page ul (0,1,1) sangría de 15px .content h3:after (0,1,2) más rayas de colores .content h4 (0,1,1) Oswald y versalitas Todas ganan al bloque de blindaje de arriba, que va con :where() a propósito para que las clases propias puedan sobrescribirlo. Aquí se recuperan añadiendo .lpg al selector, lo que sube un punto la especificidad y basta para pasar por encima. Los valores son "inherit" y no colores fijos: así el elemento vuelve a heredar de su contenedor, que es donde el sistema define qué corresponde en cada sitio. Un párrafo dentro de una tarjeta roja seguirá saliendo blanco, y uno sobre fondo claro seguirá en color tinta. Con un valor fijo habría que acertar caso por caso y se rompería a la primera. Estas reglas alcanzan (0,1,1), lo mismo que las del tema, y ganan por ir declaradas después. Las clases propias que necesiten imponerse a ellas se escriben ".lpg .mi-clase" (0,2,0), que pesa más por llevar dos clases. -------------------------------------------------------------------------- */ .lpg :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; text-transform: none; } /* Los adornos: la raya morada y sus variantes de color */ .lpg :is(h1, h2, h3, h4, h5, h6)::before, .lpg :is(h1, h2, h3, h4, h5, h6)::after { content: none; } .lpg :is(p, li) { font-family: inherit; color: inherit; } .lpg :is(ul, ol) { padding-left: 0; margin-bottom: 0; } /* El tema baja a ".page ul li" (0,1,2) y ".page ul li strong" (0,1,3), por encima de las reglas de arriba. Se replica su forma para empatar, y así ganan estas por ir declaradas después. */ .lpg :is(ul, ol) li { font-family: inherit; color: inherit; margin-bottom: 0; } .lpg :is(ul, ol) li strong { font-weight: 700; } .lpg li { margin-bottom: 0; } .lpg strong { font-weight: 700; } .lpg hr { width: auto; margin: 0; } .lpg :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; border-radius: 0; background: none; border: 0; box-shadow: none; } /* MDB inyecta transiciones y bordes animados en los inputs */ .lpg input:focus, .lpg select:focus, .lpg textarea:focus { box-shadow: none; outline: none; } .lpg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Contenedor estándar -------------------------------------------------------------------------- .wrap es el único contenedor del sitio: 1200px como máximo, centrado, con aire lateral en pantallas pequeñas. TODO el contenido va dentro de un .wrap. Lo único que puede salirse a ancho completo son los elementos decorativos: fondos, texturas, imágenes de banda y velos de color. Esos van en el contenedor de sección (posicionados o como background), nunca en el .wrap. Va con el scope .lpg para que ningún plugin de WordPress con una clase .wrap propia lo pise. Si algún día se quiere global, se quita el .lpg. -------------------------------------------------------------------------- */ .lpg .wrap { width: min(100% - 2.5rem, var(--contenedor)); margin-inline: auto; } .lpg-center { text-align: center; } .lpg .lpg-h2 { font-family: var(--font-texto); /* Geomanist Bold */ font-weight: 700; font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem); line-height: 1.22; letter-spacing: -0.01em; text-align: center; text-wrap: balance; } .lpg-h2--red { color: var(--rojo); } .lpg .lpg-h3 { font-family: var(--font-display); /* Hagrid Regular */ font-weight: 400; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: 1.2; text-wrap: balance; } .lpg .lpg-lead { max-width: 46rem; margin-inline: auto; text-align: center; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); color: var(--tinta); } /* -------------------------------------------------------------------------- Botones — componente estándar de la landing -------------------------------------------------------------------------- Un único estilo para todos los botones, sea o