/* ========================================================================== La Voz de Dios · TOKENS Única fuente de verdad del sistema de diseño. Ningún otro fichero define colores, tamaños ni espaciados en crudo: todos consumen estas variables. ========================================================================== */ :root{ /* ---------------------------------------------------------------------- COLOR · Base El fondo azulado es lo que hace saltar los acentos. Un blanco cálido apagaría toda la paleta. ---------------------------------------------------------------------- */ --c-fondo: #F5F8FC; --c-superficie: #FFFFFF; /* Crema del fondo de las fotos recortadas, leído del PNG original */ --c-crema: #FEFAE7; --c-tinta: #0E2340; --c-oscuro: #0A1B33; /* Alfa. El número del nombre es el porcentaje de opacidad, en orden descendente, para poder juzgar el contraste sin abrir el fichero. Cada uno lleva al lado para qué nació: si algún día no lo usa nadie, se borra sin miedo. */ /* Tinta sobre fondo claro. */ --c-tinta-70: rgba(14, 35, 64, .70); --c-tinta-40: rgba(14, 35, 64, .40); --c-tinta-24: rgba(14, 35, 64, .24); --c-tinta-14: rgba(14, 35, 64, .14); --c-tinta-88: rgba(14, 35, 64, .88); /* velo sobre foto de fondo */ --c-tinta-08: rgba(14, 35, 64, .08); /* sombra del panel móvil */ --c-tinta-07: rgba(14, 35, 64, .07); /* rejilla sobre fondo claro */ /* El fondo claro sobre superficies oscuras: texto del pie y velos. */ --c-claro-94: rgba(245, 248, 252, .94); /* cabecera translúcida */ --c-claro-75: rgba(245, 248, 252, .75); --c-claro-62: rgba(245, 248, 252, .62); --c-claro-50: rgba(245, 248, 252, .50); --c-claro-24: rgba(245, 248, 252, .24); --c-claro-09: rgba(245, 248, 252, .09); /* marca de agua del pie */ /* Blanco de verdad, no el claro azulado. Solo donde el tinte se notaría: encima de fotos y de fondos muy oscuros. */ --c-superficie-92: rgba(255, 255, 255, .92); --c-superficie-07: rgba(255, 255, 255, .07); /* rejilla sobre fondo oscuro */ /* Telón que oscurece la página con el menú móvil abierto. */ --c-oscuro-55: rgba(10, 27, 51, .55); /* ---------------------------------------------------------------------- COLOR · Andamiaje de maqueta Amarillo de aviso para los huecos que aún faltan por rellenar (la clase .pend). NO forma parte de la paleta de la iglesia: es señalización temporal, y por eso vive en su propio bloque en vez de mezclarse con los acentos. Contraste del texto sobre su fondo: ≈5.6:1, pasa AA para cuerpo. El borde discontinuo se queda en ≈2.9:1, pero es decorativo: no lleva ninguna información que no esté ya en el texto. Cuando no quede ni un solo .pend en la maqueta, este bloque y la clase que lo consume se borran juntos. ---------------------------------------------------------------------- */ --c-pend-fondo: #FFF3CD; --c-pend-borde: #B8860B; --c-pend-texto: #7A5C00; /* ---------------------------------------------------------------------- COLOR · Acción Solo tres rellenos de botón en toda la web. Más variedad diluye la jerarquía y el usuario deja de saber qué es lo importante. --c-accion naranja + texto blanco → 4.61:1 acción principal --c-vivo lima + texto tinta → 14.2:1 acción sobre oscuro --c-superficie blanco + texto tinta → 15.9:1 acción secundaria ---------------------------------------------------------------------- */ --c-accion: #D93A06; --c-accion-hover: #B82F04; /* El naranja de accion como TEXTO no llega al 4.5 exigible: da 4.33:1 sobre el fondo y baja a 3.92 sobre los tintes de color. Este, un 8% mas oscuro, cumple sobre los cinco (4.51 en el peor caso, el fucsia) y a simple vista es el mismo naranja. Solo para texto; los rellenos siguen usando --c-accion. */ --c-accion-texto: #C83506; --c-vivo: #C4F04A; --c-vivo-hover: #B2E033; /* Alerta: barra de transmisión en directo. Blanco encima da 4.59:1 */ --c-alerta: #E5194B; /* ---------------------------------------------------------------------- COLOR · Acentos plenos Piezas pequeñas: bloques del calendario, chips, sellos. A saturación completa una superficie grande resulta agresiva. ---------------------------------------------------------------------- */ --c-cielo: #17B8F5; --c-lima: #C4F04A; --c-amarillo: #FFD93D; --c-fucsia: #FF7EC7; /* Violeta: entró con la reunión de Varones de los jueves. En el calendario cada reunión lleva su propio color, y los cuatro de arriba más el naranja y la tinta ya estaban tomados; repetir uno habría dado a entender que dos reuniones son la misma cosa. Elegido para dar 6.91:1 con la tinta encima, exactamente lo mismo que --c-cielo. */ --c-violeta: #B79CFF; /* ---------------------------------------------------------------------- COLOR · Tintes Superficies grandes: bandas de ministerio, fondos de sección, tarjetas. ---------------------------------------------------------------------- */ --c-cielo-t: #D9F1FD; --c-lima-t: #EDFACB; --c-amarillo-t: #FFF4C9; --c-fucsia-t: #FFE6F5; --c-violeta-t: #EDE6FF; /* ---------------------------------------------------------------------- COLOR · Enlace de texto El naranja de acción da 2.9:1 como texto sobre claro. Este azul de la misma familia que --c-cielo da 5.3:1. ---------------------------------------------------------------------- */ --c-enlace: #0E6E9B; --c-enlace-oscuro: var(--c-lima); /* ---------------------------------------------------------------------- TIPOGRAFÍA Boldonse solo en titulares. DM Sans en todo lo demás, interfaz incluida. Nada va en cursiva: se descartó porque a tamaño pequeño no se leía (navegación, botones y chips van en DM Sans a propósito). Boldonse pide tres cosas distintas a Figtree y todas están abajo: · un solo peso, el 400. Pedirle 700 hace que el navegador la engorde artificialmente y le rompe el dibujo de la letra. · versales. Es una tipografía de caja alta; en caja normal pierde justo el carácter por el que se eligió. · tracking neutro o positivo y una escala más corta: es mucho más ancha, así que donde Figtree admitía 76px ella topa en 58. Los valores son los medidos en la referencia. ---------------------------------------------------------------------- */ --f-titular: "Boldonse", "Arial Black", Impact, sans-serif; --f-texto: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Sin cursiva en toda la web: el acento es DM Sans, sin estilo propio. Se conserva el nombre para que ninguna regla quede huérfana. */ --f-acento: var(--f-texto); /* Escala modular de razon 1.25 sobre el cuerpo de 20px: h4 = 20 x 1.25 = 25 h3 = 31 h2 = 39 h1 = 49 En movil la razon se comprime al 62% (base 16) para que los saltos quepan a 375px sin perder la jerarquia: 28 / 25 / 21 / 18. El maximo se alcanza a 1450px de ventana. */ --fs-h1: clamp(28px, 3.37vw, 49px); --fs-h2: clamp(25px, 2.69vw, 39px); --fs-h3: clamp(21px, 2.16vw, 31px); --fs-h4: clamp(18px, 1.72vw, 25px); --fs-lead: clamp(21px, 2.16vw, 31px); --fs-cuerpo: clamp(17px, 1.4vw, 20px); --fs-medio: 16px; --fs-chico: 15px; --fs-mini: 13px; --fs-micro: 11.5px; /* Interlínea. Medido en el navegador con measureText, por cada 100px de tamaño Boldonse ocupa: mayúscula normal (H) 119 de ascendente mayúscula con tilde (Á Í) 156 de ascendente descendente (Q) 23 Es decir, dos líneas se tocan por debajo de 1.79. El original usa 1.60 y le basta porque su texto es inglés sin tildes; el nuestro está lleno de SOFÍA, EVANGÉLICA y ORACIÓN, así que necesita más. */ --lh-h1: 1.82; --lh-h2: 1.82; --lh-h3: 1.88; --lh-h4: 1.95; --lh-cuerpo: 1.7; --ls-titular: .01em; --ls-etiqueta: .07em; /* Boldonse solo trae el 400 */ --peso-titular: 400; --peso-fuerte: 700; --peso-normal: 400; /* ---------------------------------------------------------------------- ESPACIADO ---------------------------------------------------------------------- */ --e-1: clamp(8px, 1vw, 12px); --e-2: clamp(14px, 1.6vw, 20px); --e-3: clamp(20px, 2.4vw, 32px); --e-4: clamp(32px, 4vw, 56px); --e-5: clamp(48px, 6vw, 80px); --e-6: clamp(56px, 7vw, 110px); --ancho-max: min(1680px, 92vw); --ancho-texto: min(820px, 92vw); --padding-lat: clamp(20px, 3.4vw, 64px); /* ---------------------------------------------------------------------- FORMA ---------------------------------------------------------------------- */ --r-chico: 10px; --r-medio: 14px; --r-grande: 62px; --r-pildora: 99px; /* Botones: 6px de esquina. La píldora se reserva a las etiquetas pequeñas, donde sí lee como etiqueta. */ --r-boton: 6px; --borde: 2px solid var(--c-tinta); --sombra-dura: 4px 4px 0 var(--c-tinta); --sombra-dura-xl: 8px 10px 0 var(--c-tinta); /* ---------------------------------------------------------------------- MOVIMIENTO Curva y tiempos medidos de la referencia. ---------------------------------------------------------------------- */ --curva: cubic-bezier(.44, 0, .56, 1); --t-rapida: 400ms; --t-normal: 700ms; --escalonado: 55ms; /* ---------------------------------------------------------------------- CAPAS ---------------------------------------------------------------------- */ --z-base: 1; --z-flotante: 3; --z-cabecera: 60; --z-alerta: 70; } /* ========================================================================= MÓVIL (≤560px): escala comprimida y espaciados más cortos. Los mínimos de los clamp() ya eran chicos; aquí se bajan un escalón más para que el hero entre en la primera pantalla de un iPhone (375×812). Boldonse con tildes necesita ≥1.6 de interlineado para no tocarse. ========================================================================= */ @media (max-width:560px){ :root{ --fs-h1: 24px; --fs-h2: 22px; --fs-h3: 19px; --fs-h4: 17px; --fs-lead: 19px; --fs-cuerpo: 16px; --lh-h1: 1.6; --lh-h2: 1.65; --lh-h3: 1.7; --lh-h4: 1.8; --e-4: 28px; --e-5: 36px; --e-6: 44px; /* Laterales fijos: 16px y ni uno más */ --ancho-max: 100%; --padding-lat: 16px; } }