/* ============================================================ ACERINA AMADOR — Temas de color alternativos El tema por defecto (Vermelho) vive en tokens.css. Aquí solo van las variantes: cada una redefine la paleta base y todo el sitio la hereda, porque cada sección consume tokens (nada codificado a mano). Se activan con [data-theme] en ; assets/js/main.js lo persiste. ============================================================ */ /* ------------------------------------------------------------ VIOLETA — "luz de escena" El violeta/magenta que aparece de verdad en su fotografía (The Last Animal, Art & Life): paleta e imagen, la misma luz. ------------------------------------------------------------ */ :root[data-theme="violeta"] { --vermelho: oklch(0.60 0.20 310); --vermelho-bright: oklch(0.72 0.19 310); /* AA sobre el fondo oscuro */ --vermelho-deep: oklch(0.42 0.17 305); --vermelho-ink: oklch(0.14 0.03 305); --obsidian: oklch(0.15 0.018 300); --obsidian-deep: oklch(0.105 0.015 300); --surface: oklch(0.205 0.020 300); --surface-2: oklch(0.255 0.022 300); --bone: oklch(0.945 0.010 300); --bone-dim: oklch(0.80 0.013 300); --muted: oklch(0.665 0.015 300); --glow-red: 0 0 60px -10px oklch(0.60 0.20 310 / 0.55); } /* ------------------------------------------------------------ ÁMBAR — cálido El dorado íntimo de Placeres extraños y Les Stripteases: piel, madera y luz de vela. ------------------------------------------------------------ */ :root[data-theme="ambar"] { --vermelho: oklch(0.70 0.145 80); --vermelho-bright: oklch(0.80 0.14 82); --vermelho-deep: oklch(0.41 0.10 70); /* bone-dim encima = 4.8:1 (AA) */ --vermelho-ink: oklch(0.17 0.03 70); --obsidian: oklch(0.15 0.016 50); --obsidian-deep: oklch(0.105 0.014 50); --surface: oklch(0.205 0.018 50); --surface-2: oklch(0.255 0.020 50); --bone: oklch(0.945 0.012 80); --bone-dim: oklch(0.80 0.014 75); --muted: oklch(0.665 0.016 70); --glow-red: 0 0 60px -10px oklch(0.70 0.145 80 / 0.5); } /* ------------------------------------------------------------ CLARA — galería Fondo hueso, tinta oscura: el color lo ponen SOLO sus fotos, como cuadros colgados. Los velos sobre imagen siguen oscuros (--scrim) para que el texto sobre foto mantenga contraste. ------------------------------------------------------------ */ :root[data-theme="clara"] { --obsidian: oklch(0.96 0.006 85); --obsidian-deep: oklch(0.925 0.008 85); --surface: oklch(0.93 0.008 85); --surface-2: oklch(0.90 0.010 85); --hairline: oklch(0 0 0 / 0.16); --hairline-soft: oklch(0 0 0 / 0.09); --bone: oklch(0.185 0.012 40); /* tinta: 15.6:1 sobre el fondo claro */ --bone-dim: oklch(0.34 0.012 40); /* 9.0:1 */ --muted: oklch(0.47 0.012 40); /* 5.4:1 */ --vermelho: oklch(0.55 0.20 30); /* display grande sobre claro */ --vermelho-bright: oklch(0.47 0.185 30); /* texto pequeño: 5.2:1 */ --vermelho-deep: oklch(0.44 0.16 26); --vermelho-ink: oklch(0.97 0.010 80); /* Los velos NO se aclaran: la fotografía sigue mandando */ --scrim: oklch(0.105 0.015 25); --shadow-lg: 0 24px 60px -24px oklch(0 0 0 / 0.28); --glow-red: 0 0 60px -14px oklch(0.55 0.20 30 / 0.4); } /* --- Texto SOBRE fotografía --- Estas zonas conservan el velo oscuro (--scrim), así que su tinta sigue siendo clara: redefinir la familia de tintas en el contenedor la hereda todo lo de dentro (título, roles, cita, cue, datos de contacto). */ :root[data-theme="clara"] .hero, :root[data-theme="clara"] .wd__panel, :root[data-theme="clara"] .ct, :root[data-theme="clara"] .nav:not(.is-scrolled) { --bone: oklch(0.945 0.012 75); --bone-dim: oklch(0.80 0.014 60); --muted: oklch(0.665 0.016 45); } /* Nav translúcida sobre fondo claro (ya con tinta oscura) */ :root[data-theme="clara"] .nav.is-scrolled { background: color-mix(in oklab, var(--obsidian) 82%, transparent); } /* En galería el bloque destacado deja de estar teñido: manda la foto. (En los temas oscuros sigue siendo la pieza drenada en color.) */ :root[data-theme="clara"] .wk__work--red { background: transparent; padding-block: 0; } :root[data-theme="clara"] .wk__work--red .wk__num { color: var(--vermelho); } :root[data-theme="clara"] .wk__work--red .wk__rule { background: var(--hairline); } :root[data-theme="clara"] .wk__work--red .wk__title { color: var(--bone); } :root[data-theme="clara"] .wk__work--red .wk__desc { color: var(--bone-dim); } :root[data-theme="clara"] .wk__work--red .wk__meta { color: var(--muted); } /* Sin lavado rojo sobre las fotos: en galería se ven tal cual */ :root[data-theme="clara"] .media--treat::after { background: none; } :root[data-theme="clara"] .media--treat img { filter: contrast(1.03) saturate(1.02); }