/* ═══════════════════════════════════════════════════════════════════════ RELIC — EL TEMA. Una web, dos caras, y el visitante manda. Hasta hoy la paleta colgaba de `data-casa`, que lo decidía el SERVIDOR según la URL: «papel» (claro) en la tienda, «sala» (oscuro) en el cine. Eso resolvía el problema del producto —una prenda se compra a la luz— pero dejaba la web partida en dos mitades que no se parecen, y al visitante sin voz. Lo que se pide es lo que hacen las webs que se copian: TRES ESTADOS. · el del sistema ← por defecto, sin tocar nada (@media prefers-color-scheme) · claro ← elegido a mano, manda sobre el sistema · oscuro ← elegido a mano, manda sobre el sistema Y se recuerda (localStorage), y se pinta ANTES del primer fotograma con un guion síncrono en el : si se hiciera con `defer`, la página pinta en claro y salta a oscuro medio segundo después. Ese salto es exactamente lo que separa una web buena de una cutre. ── POR QUÉ ESTE FICHERO Y NO estilo.css ────────────────────────────── Por lo mismo que existe venta.css y está escrito en su cabecera: estilo.css lo está reescribiendo otro proceso —hoy mismo ha crecido 39 líneas mientras se medía esto—, y dos manos en un fichero de 2.500 líneas pierden reglas en silencio. Aquí manda el orden: esta hoja se carga LA ÚLTIMA, así que a igualdad de especificidad gana. ── EL CONMUTADOR, Y POR QUÉ LLEVA :not() ───────────────────────────── `:root:not([data-tema="oscuro"])` pesa (0,2,0) igual que el viejo `:root[data-casa="papel"]` de estilo.css. Un `:root` pelado pesa (0,1,0) y PERDERÍA contra él en la tienda: la tienda se quedaría con la paleta vieja y el resto de la casa con la nueva. Con el :not() empatan en peso y gana ésta por ir después — y sigue ganando aunque el otro proceso vuelva a escribir su bloque. Los valores viven una sola vez, en crudo (--claro-* y --oscuro-*). Lo que se repite abajo es sólo el cableado, que no lleva ni un color: no hay ninguna cifra que se pueda quedar desparejada entre las dos caras. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── LA CARA CLARA ────────────────────────────────────────────────── «Haz toda la web con este color, o incluso pon el fondo blanco mejor.» El fondo es BLANCO. La rampa se abre desde ahí con los mismos saltos de L* (claridad perceptual del CIE) que la cara oscura, no con saltos de ratio: el ratio se aplasta arriba igual que se aplasta abajo. token hex L* contra la página --sala #FFFFFF 100,0 1,00 : 1 el papel, blanco --banda #FAF8F2 97,6 1,06 : 1 la franja alterna --sala-2 #F5F2E9 95,5 1,12 : 1 tarjeta, pie, panel --sala-3 #EBE7DB 91,7 1,24 : 1 hueco: campos y pozos --borde #D8D2C4 84,3 1,51 : 1 filete --borde-vivo #949080 59,7 3,20 : 1 filete de mando (WCAG 1.4.11) Texto sobre la página / sobre la tarjeta: --luz #14120E 18,71 : 1 · 16,71 : 1 --luz-2 #4A453B 9,52 : 1 · 8,51 : 1 --luz-3 #6B6456 5,86 : 1 · 5,24 : 1 (cumple cuerpo, no sólo grande) --haz #8A5410 6,26 : 1 · 5,59 : 1 el ámbar COMO TEXTO El #E8A33D de la sala daría 1,88:1 sobre blanco: como texto no vale, y por eso el ámbar está partido en dos desde ayer (--haz texto, --campo campo). --campo NO cambia de cara: un cartel amarillo es un cartel amarillo con la luz encendida y con la luz apagada. */ --claro-sala:#FFFFFF; --claro-banda:#FAF8F2; --claro-sala-2:#F5F2E9; --claro-sala-3:#EBE7DB; --claro-borde:#D8D2C4; --claro-borde-vivo:#949080; --claro-luz:#14120E; --claro-luz-2:#4A453B; --claro-luz-3:#6B6456; --claro-haz:#8A5410; --claro-haz-fuerte:#6B3F0A; --claro-verde:#1F6B45; /* 6,47 : 1 */ --claro-rojo:#A32E1C; /* 7,08 : 1 */ --claro-ambar:#8A5410; /* El botón sólido es EL INVERSO de la página: tinta con papel encima. */ --claro-papel:#14120E; --claro-tinta:#FFFFFF; /* 18,71 : 1 */ --claro-ambar-hondo:#F7E6C4; /* lavado pálido; con --luz encima, 15,21:1 */ --claro-hueso:#E9E3D4; /* Sombra cálida y corta. En negro la sombra es negra; sobre papel una sombra negra ensucia, así que se tiñe con el marrón de la casa. */ --claro-caja:0 1px 2px rgba(40,34,20,.06), 0 16px 40px -28px rgba(40,34,20,.34); --claro-sombra-1:0 1px 1px rgba(40,34,20,.05); --claro-sombra-2:0 2px 4px rgba(40,34,20,.06), 0 12px 26px -16px rgba(40,34,20,.24); --claro-sombra-3:0 3px 6px rgba(40,34,20,.07), 0 24px 48px -26px rgba(40,34,20,.34); /* Los rgba() que había escritos a pelo, aquí como token y con su pareja en la otra cara. Eran veintitantos y TODOS estaban en blanco: sobre papel un filete blanco no existe. */ --claro-filete:rgba(20,18,14,.14); /* filetes y separadores finos */ --claro-filete-suave:rgba(20,18,14,.05); /* fondos de fila alterna, hover */ --claro-filete-fuerte:rgba(20,18,14,.22); --claro-eco:rgba(20,18,14,.055); /* el título fantasma de las secciones */ --claro-anillo:rgba(138,84,16,.20); /* el aro de foco: ámbar de texto */ --claro-vineta:rgba(20,18,14,.07); /* la viñeta del héroe */ --claro-telon:#FFFFFF; /* el telón de apertura */ --claro-velo-fin:rgba(12,12,14,.94); /* el cierre del degradado a sangre */ --claro-barrido:rgba(255,255,255,.30); /* el brillo que barre el botón oscuro */ --claro-foco:transparent; /* la luz que sigue al cursor: sólo en la sala */ --claro-grano:.03; /* el grano de película */ --claro-grano-mezcla:multiply; --claro-esquema:light; /* ── LA CARA OSCURA ───────────────────────────────────────────────── Intacta: es la rampa que se midió ayer en L* y no se toca ni un dígito. --sala #0C0C0E L* 3,4 · --sala-2 L* 12,0 · --sala-3 L* 21,2 --borde L* 31,8 (2,23:1) · --borde-vivo L* 44,3 (3,55:1) texto 17,48 / 9,38 / 6,01 · ámbar de texto 9,06 */ --oscuro-sala:#0C0C0E; --oscuro-banda:#151418; --oscuro-sala-2:#201F23; --oscuro-sala-3:#343237; --oscuro-borde:#4C4A4F; --oscuro-borde-vivo:#6A686D; --oscuro-luz:#F5F2EB; --oscuro-luz-2:#B9B3A8; --oscuro-luz-3:#948E83; --oscuro-haz:#E8A33D; --oscuro-haz-fuerte:#F5BC63; --oscuro-verde:#6FD3A0; --oscuro-rojo:#F08A72; --oscuro-ambar:#E8A33D; --oscuro-papel:#F2EEE6; --oscuro-tinta:#0C0C0E; /* 16,89 : 1 */ --oscuro-ambar-hondo:#5A3A0C; /* con --luz encima, 9,18:1 */ --oscuro-hueso:#E9E3D6; --oscuro-caja:0 2px 8px rgba(0,0,0,.5), 0 24px 60px -32px rgba(0,0,0,.9); --oscuro-sombra-1:0 1px 2px rgba(0,0,0,.4); --oscuro-sombra-2:0 4px 10px -2px rgba(0,0,0,.5), 0 12px 28px -12px rgba(0,0,0,.7); --oscuro-sombra-3:0 8px 20px -6px rgba(0,0,0,.6), 0 32px 68px -28px rgba(0,0,0,.95); --oscuro-filete:rgba(245,242,235,.16); --oscuro-filete-suave:rgba(245,242,235,.045); --oscuro-filete-fuerte:rgba(245,242,235,.30); --oscuro-eco:rgba(242,238,230,.055); --oscuro-anillo:rgba(232,163,61,.16); --oscuro-vineta:rgba(0,0,0,.62); --oscuro-telon:#000000; --oscuro-velo-fin:var(--sala); --oscuro-barrido:rgba(12,12,14,.22); --oscuro-foco:rgba(245,242,235,.055); --oscuro-grano:.085; --oscuro-grano-mezcla:soft-light; --oscuro-esquema:dark; /* ── LO QUE NO TIENE DOS CARAS ────────────────────────────────────── No es olvido: es la parte fina del encargo. Estos valores NO pueden colgar del tema porque no describen la página, describen el PRODUCTO o una foto, y ni el producto ni la foto cambian de color porque el visitante le dé a un botón. EL SUELO DE LA FOTO ES UNO SOLO, Y ES ÉSTE. ───────────────────────────────────────────────────────────────────── Antes había dos y la caja saltaba de uno a otro según la claridad de la prenda. Numéricamente era impecable —el peor contraste de la web pasó a 8,47:1— y visualmente era un tablero de ajedrez: cajas crema y cajas negras alternando en cuadros contiguos, porque el color del suelo lo decidía qué prenda tocaba enseñar primero en cada tarjeta. El dueño lo vio en /tienda y tenía razón: una tienda no puede tener el fondo saltando entre una tarjeta y la de al lado. Ahora hay UN color, el mismo en las dos caras y en las nueve rejillas. El paspartú crema de un museo, que es el que ya llevaba la casa como --claro-hueso. caja #E9E3D4 (L* 90,3) negro 12,43 : 1 arena 1,38 : 1 marino 12,86 : 1 blanco 1,16 : 1 antracita 9,58 : 1 lámina 1,07 : 1 Medido el 19-08-2026 sobre el tono MEDIANO real de los píxeles opacos de los mockups del catálogo (no sobre el nombre del color, y no sobre el token): negro #181818, marino #202030, antracita #303030, arena #d0c0a8, blanco #d0d0d0, lámina #e8e8e0. POR QUÉ ESTE COLOR Y NO UN GRIS DE COMPROMISO. El encargo pone un solo suelo numérico: ≥3:1 con la prenda NEGRA. Cualquier claro lo cumple de sobra y éste lo cumple cuatro veces. Un gris medio (#6F6F6F) daría 3,17 con el negro y 2,84 con la arena —pasaría el negro y suspendería en la antracita (2,44)— y encima ensucia la foto de producto. Y no existe NINGÚN color plano que separe por contraste a la vez la antracita (L* 24) y la arena (L* 79): entre ellas hay 7,6:1 y harían falta 9. Así que el color no puede ser el que recorta la prenda clara. LO QUE LA RECORTA es el recurso de abajo, --recorte-prenda: una sombra que sigue la SILUETA (los mockups son PNG con alfa recortado, medido: 1.680.856 píxeles transparentes de 4.000.000 en la camiseta). Un filete finísimo pegado al canto para que la blanca, la arena y el papel de la lámina no se fundan con el crema, y una sombra ancha por debajo que las levanta del suelo. Sobre la prenda oscura no se nota, porque ahí ya sobran 12:1. Y el marco de la caja deja de ser gris al 20 %: como el suelo ya no cambia, el canto se puede templar para ESTE crema en vez de tener que valer sobre crema y sobre grafito a la vez. Sombra cálida, la de la casa. */ --suelo:#E9E3D4; /* LOS TRES NOMBRES VIEJOS, ATADOS AL MISMO COLOR. Es el cinturón: aunque mañana una plantilla, galeria.css o una regla olvidada de estilo.css vuelvan a pedir «el suelo oscuro», lo que pinta el navegador sigue siendo un único crema y el ajedrez no puede volver por la puerta de atrás. Se quedan como alias a propósito, no por pereza. */ --suelo-claro:var(--suelo); --suelo-oscuro:var(--suelo); --suelo-neutro:var(--suelo); --marco-prenda:rgba(52,42,24,.15); --marco-prenda-vivo:rgba(52,42,24,.30); /* EL RECURSO DE SEPARACIÓN. Dos sombras sobre la silueta: el filete que recorta y la sombra que levanta. La segunda versión, para miniaturas de 70 px, con la caja recortada a `overflow:hidden` y 4 px de aire. */ --recorte-prenda:drop-shadow(0 0 1px rgba(52,42,24,.85)) drop-shadow(0 6px 12px rgba(52,42,24,.30)); --recorte-prenda-mini:drop-shadow(0 0 .5px rgba(52,42,24,.85)) drop-shadow(0 1px 3px rgba(52,42,24,.30)); /* EL ÁMBAR COMO CAMPO. Un cartel amarillo con tinta encima: 8,69:1. Es el único acento pleno y es el mismo con la luz encendida y apagada. */ --campo:#E8A33D; --campo-tinta:#141209; --campo-apunte:rgba(20,18,9,.72); /* el rótulo pequeño dentro del campo: 5,9:1 */ --campo-hueco:#FFFFFF; /* el campo de correo dentro del boletín ámbar */ /* El guiño del proyector (se teclea RELIC y se enciende en azul). Vivía escrito a pelo en `:root.proyector`. */ --proyector:#7FD4FF; --proyector-vivo:#B8E9FF; /* TEXTO SOBRE FOTOGRAFÍA. Los rótulos de las losas de colección, del bloque a sangre y del sello de fuente van ENCIMA de una imagen con velo oscuro pintado sobre ella. Si esos rótulos siguieran a --luz, en tema claro se volverían casi negros sobre un velo casi negro y desaparecerían. Se quedan claros SIEMPRE, y el velo también: 15,8:1 y 8,7:1 sobre el velo al 86 %. */ --sobre-foto:#F7F5F0; --verde-foto:#6FD3A0; /* el rótulo de procedencia sobre foto: 10,70:1 */ --sobre-foto-2:#D9D5CC; --sobre-foto-3:#B4AFA4; --velo:12,12,14; /* EL CRISTAL DEL MODAL. Oscuro en las dos caras: un velo claro detrás de un diálogo no separa nada. */ --velo-modal:rgba(8,8,10,.72); /* LA LOSA DE PAPEL. El bloque «.papel» es un cartón crema que se cuelga dentro de la página para dar rango. Sobre negro contrasta por claro, sobre blanco por tono; en las dos caras se lee la misma losa. */ --losa:#E9E3D6; --losa-tinta:#0A0A0B; --losa-texto:#3A352C; --losa-haz:#6B5320; --losa-apunte:#6A6154; /* 5,74:1 y 4,7:1 sobre la losa */ /* PANEL DE GESTIÓN. Lo que urge se ve sin buscarlo, con la luz encendida y con la luz apagada. */ --urge:#C24A33; --urge-campo:rgba(194,74,51,.10); --sello-neutro:rgba(128,128,128,.16); /* ── EL CABLEADO ──────────────────────────────────────────────────── De aquí para abajo no hay ni un color: sólo se dice qué juego manda. Por defecto, el claro. */ --sala:var(--claro-sala); --banda:var(--claro-banda); --sala-2:var(--claro-sala-2); --sala-3:var(--claro-sala-3); --borde:var(--claro-borde); --borde-vivo:var(--claro-borde-vivo); --linea:var(--claro-borde); --luz:var(--claro-luz); --luz-2:var(--claro-luz-2); --luz-3:var(--claro-luz-3); --haz:var(--claro-haz); --haz-fuerte:var(--claro-haz-fuerte); --verde:var(--claro-verde); --rojo:var(--claro-rojo); --ambar:var(--claro-ambar); --papel:var(--claro-papel); --tinta:var(--claro-tinta); --ambar-hondo:var(--claro-ambar-hondo); --hueso:var(--claro-hueso); --caja:var(--claro-caja); --sombra-1:var(--claro-sombra-1); --sombra-2:var(--claro-sombra-2); --sombra-3:var(--claro-sombra-3); --brillo:0 0 0 1px var(--borde-vivo); --filete:var(--claro-filete); --filete-suave:var(--claro-filete-suave); --filete-fuerte:var(--claro-filete-fuerte); --eco:var(--claro-eco); --anillo:var(--claro-anillo); --vineta:var(--claro-vineta); --telon:var(--claro-telon); --velo-fin:var(--claro-velo-fin); --barrido:var(--claro-barrido); --foco:var(--claro-foco); --grano:var(--claro-grano); --grano-mezcla:var(--claro-grano-mezcla); color-scheme:var(--claro-esquema); } /* La cara oscura ELEGIDA A MANO: manda sobre el sistema, en los dos sentidos. Sin este bloque, quien tiene el ordenador en claro no podría poner la web en oscuro. */ :root[data-tema="oscuro"]{ --sala:var(--oscuro-sala); --banda:var(--oscuro-banda); --sala-2:var(--oscuro-sala-2); --sala-3:var(--oscuro-sala-3); --borde:var(--oscuro-borde); --borde-vivo:var(--oscuro-borde-vivo); --linea:var(--oscuro-borde); --luz:var(--oscuro-luz); --luz-2:var(--oscuro-luz-2); --luz-3:var(--oscuro-luz-3); --haz:var(--oscuro-haz); --haz-fuerte:var(--oscuro-haz-fuerte); --verde:var(--oscuro-verde); --rojo:var(--oscuro-rojo); --ambar:var(--oscuro-ambar); --papel:var(--oscuro-papel); --tinta:var(--oscuro-tinta); --ambar-hondo:var(--oscuro-ambar-hondo); --hueso:var(--oscuro-hueso); --caja:var(--oscuro-caja); --sombra-1:var(--oscuro-sombra-1); --sombra-2:var(--oscuro-sombra-2); --sombra-3:var(--oscuro-sombra-3); --filete:var(--oscuro-filete); --filete-suave:var(--oscuro-filete-suave); --filete-fuerte:var(--oscuro-filete-fuerte); --eco:var(--oscuro-eco); --anillo:var(--oscuro-anillo); --vineta:var(--oscuro-vineta); --telon:var(--oscuro-telon); --velo-fin:var(--oscuro-velo-fin); --barrido:var(--oscuro-barrido); --foco:var(--oscuro-foco); --grano:var(--oscuro-grano); --grano-mezcla:var(--oscuro-grano-mezcla); color-scheme:var(--oscuro-esquema); } /* Y EL AUTOMÁTICO, que es lo que ve quien no toca nada: la misma cara oscura cuando el sistema la pide. `:not([data-tema="claro"])` es lo que hace que una elección a mano gane a la preferencia del sistema. */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ --sala:var(--oscuro-sala); --banda:var(--oscuro-banda); --sala-2:var(--oscuro-sala-2); --sala-3:var(--oscuro-sala-3); --borde:var(--oscuro-borde); --borde-vivo:var(--oscuro-borde-vivo); --linea:var(--oscuro-borde); --luz:var(--oscuro-luz); --luz-2:var(--oscuro-luz-2); --luz-3:var(--oscuro-luz-3); --haz:var(--oscuro-haz); --haz-fuerte:var(--oscuro-haz-fuerte); --verde:var(--oscuro-verde); --rojo:var(--oscuro-rojo); --ambar:var(--oscuro-ambar); --papel:var(--oscuro-papel); --tinta:var(--oscuro-tinta); --ambar-hondo:var(--oscuro-ambar-hondo); --hueso:var(--oscuro-hueso); --caja:var(--oscuro-caja); --sombra-1:var(--oscuro-sombra-1); --sombra-2:var(--oscuro-sombra-2); --sombra-3:var(--oscuro-sombra-3); --filete:var(--oscuro-filete); --filete-suave:var(--oscuro-filete-suave); --filete-fuerte:var(--oscuro-filete-fuerte); --eco:var(--oscuro-eco); --anillo:var(--oscuro-anillo); --vineta:var(--oscuro-vineta); --telon:var(--oscuro-telon); --velo-fin:var(--oscuro-velo-fin); --barrido:var(--oscuro-barrido); --foco:var(--oscuro-foco); --grano:var(--oscuro-grano); --grano-mezcla:var(--oscuro-grano-mezcla); color-scheme:var(--oscuro-esquema); } } /* ═══════════════════════════════════════════════════════════════════════ 2. EL INTERRUPTOR En la cabecera, al lado del idioma y del carrito, que es donde lo busca todo el mundo. Es un