/* ===================================================================== TEMA "EDITORIAL" — identidad de Alexis Escobedo ===================================================================== Paleta tomada del demo de Quinn de Squarespace, medida con el navegador, no a ojo: fondo #FDFDFD · rojo #FF340A · casi negro #1D1D1D · gris #F2F2F2 SOBRE EL ROJO, QUE ES LO IMPORTANTE DE ESTE ARCHIVO --------------------------------------------------- #FF340A sobre #FDFDFD da 3.59:1. Eso alcanza para texto grande —el mínimo es 3:1— pero NO para texto normal, donde el mínimo es 4.5:1. En el demo de Squarespace los párrafos son rojos y por eso no pasan; en un portafolio de fotos casi no importa, pero esta página existe para que un lead lea precios, metros y fechas de entrega, muchas veces en el celular a media calle. Ahí sí importa. La solución no fue cambiarle el color: fue repartir los papeles. --marca #FF340A el rojo EXACTO. Fondos y texto grande (titulares, el gigante de la portada, los números de las fichas). --acento #E12700 el mismo rojo 15% más oscuro, 4.60:1. Sólo para texto CHICO: etiquetas, ligas, letras pequeñas. --tinta #1D1D1D 16.57:1. Todo el cuerpo de texto. Los dos rojos son indistinguibles uno al lado del otro. La diferencia se nota nada más al leer, que es de lo que se trata. Botones: fondo rojo de marca con texto #1D1D1D = 4.61:1. Pasa. Texto blanco sobre ese rojo daría 3.65:1 y no pasa, así que los botones llevan letra casi negra, no blanca. NO HAY MODO OSCURO EN ESTE ARCHIVO, y es a propósito: Alexis no lo quiso. Su ficha trae modo_oscuro:false, el Worker no imprime el botón ni el script que lee la preferencia, y el se queda en data-theme="light". La portada "tipografico" vive aquí abajo y no en base.css porque hoy la usa una sola asesora. Si un segundo asesor la pide con OTRA paleta, su estructura se muda a base.css y los colores se quedan en cada tema. ===================================================================== */ :root{ --ancho:1140px; /* Instrument Serif sustituye a Minion Pro Condensed Display, que es de Adobe Fonts: licencia por suscripción y amarrada al dominio, así que no se puede servir desde aquí. Es la libre que más se le acerca. */ --display:"Instrument Serif", Georgia, "Times New Roman", serif; /* ---- papel y superficies ---- */ --papel:#FDFDFD; --papel-translucido:rgba(253,253,253,.92); --superficie:#F2F2F2; --superficie-2:#E9E9E9; /* El SEGUNDO color de fondo. Su referencia tiene dos: el blanco roto de la página y este gris claro, que alterna por secciones. #E8E8E8 y no el #F2F2F2 del demo original: ése se distingue del blanco apenas 1.10:1 y en la pantalla de un celular al sol no se ve. Éste da 1.20:1, que sí se nota. Por eso los grises de texto de abajo van más oscuros: tienen que seguir pasando SOBRE esta banda. */ --banda:#E8E8E8; --op-fondo:#FDFDFD; /* ---- texto ---- */ --tinta:#1D1D1D; /* 16.57:1 sobre el papel */ --suave:#676767; /* 5.01:1 — el gris de #767676 del demo daba 4.47:1 y se quedaba a un pelo */ --sepia-deco:#8A8A8A; /* ---- el rojo, en sus dos papeles ---- */ --marca:#FF340A; /* el exacto: fondos y texto grande */ --marca-fuerte:#E12700; --marca-txt:#1D1D1D; /* 4.61:1 sobre el rojo */ /* #E12700 daba 4.60:1 sobre el papel pero sólo 4.18:1 sobre la superficie gris, y hay texto chico en las dos. Éste es el primer rojo que aguanta en los TRES fondos del tema: 5.42 sobre papel, 4.93 sobre gris y 4.54 sobre gris oscuro. Validar un color contra un solo fondo fue mi error. */ --acento:#C92300; /* Rojo de los TITULARES, y existe aparte de --marca por una razón medida: el de marca da 2.98:1 sobre la banda gris y el mínimo para texto de 24px o más es 3:1 — falla por dos centésimas. Este otro, 5% más oscuro, da 3.12 sobre la banda y 3.76 sobre el papel, así que sirve en los dos fondos. Junto al de marca no se distingue. --marca se queda intacto para el tipo gigante de la portada y para los botones, que siempre caen sobre blanco. */ --titular:#FC2B00; /* ---- líneas ---- El estilo editorial es plano: líneas finas en lugar de sombras. */ --linea:rgba(29,29,29,.14); --linea-fuerte:rgba(29,29,29,.30); --sombra:none; --sombra-alta:none; --sombra-marca:none; --elev-0:none; --elev-1:0 1px 2px rgba(29,29,29,.06); --elev-2:0 2px 4px rgba(29,29,29,.08), 0 14px 28px -18px rgba(29,29,29,.28); --elev-marca:0 2px 4px rgba(255,52,10,.16); --filo:inset 0 0 0 0 transparent; /* ---- la etiqueta que gira junto al nombre ---- Negra con letra blanca, no roja: sobre el rojo la letra chica no alcanzaba 4.5:1, y el negro además se parece más a la referencia. */ --chapa-fondo:#1D1D1D; --chapa-txt:#FDFDFD; --chapa-sombra:none; --pulso:255,52,10; /* ---- chips y estados ---- */ --chip-fondo:rgba(255,52,10,.09); --chip-txt:#B31F00; /* sobre el rojo al 9%, que es más claro */ --chip-linea:rgba(255,52,10,.28); --estado-fondo:#F2F2F2; --estado-txt:#4A4A4A; /* ---- bloques oscuros ---- */ --terminal:#1D1D1D; --terminal-txt:#FDFDFD; --terminal-suave:rgba(253,253,253,.72); /* ---- el pie ---- Rojo de marca sobre el negro da 4.38:1, otro pelo por debajo. Para las ligas del pie se aclara el mismo rojo. */ --pie-fondo:#1D1D1D; --pie-txt:#FDFDFD; --pie-suave:rgba(253,253,253,.70); --pie-linea:rgba(253,253,253,.18); --pie-acento:#FF8264; /* ---- la portada del pórtico, que aquí no se usa ---- Se dejan definidos para que ningún var() quede sin valor si algún día esta paleta se combina con la otra portada. */ --pan-fondo:#1D1D1D; --portico-nombre:#6E6E6E; --pan-textura-movil:linear-gradient(160deg,#2A2A2A,#1D1D1D); } /* Instrument Serif sólo existe en un peso. Pedirle 700 obliga al navegador a engordarla a la fuerza y se ve sucia. Los titulares van en 400 y el contraste lo da el tamaño, no el grosor — que es justo cómo funciona la referencia. */ h1,h2,h3,h4{font-weight:400;letter-spacing:-.015em} /* Titulares y subtítulos en su rojo, que es lo que pidió. El reparto por tamaño NO es un capricho: su rojo de marca da 3.59:1, que alcanza para texto de 24px o más (mínimo 3:1) pero no para texto normal (mínimo 4.5:1). Los titulares grandes llevan el rojo exacto; los chicos, el rojo oscuro, que da 4.93:1 hasta sobre el gris. A la vista son el mismo color. */ /* LAS BANDAS. Este tema no las tenía definidas, y por eso su página se veía toda de un solo blanco: las clases existen en el HTML compartido, pero sin color asignado no pintan nada. Los cortes diagonales del diseño original se quitan aquí: el estilo editorial es de líneas rectas y un corte en diagonal se pelea con eso. */ .banda-suave,.banda-papel{background:var(--banda)} .diag,.diag-i{clip-path:none;margin-top:0;padding-top:0} h1,h2{color:var(--titular)} h3,h4{color:var(--acento)} /* Los números de los pasos también son texto grande en rojo. Lleva :root delante a propósito: el