/* ============================================================ PIEL CLARA · El Reencuentro ------------------------------------------------------------ No cambia ni una animación ni una línea de estructura: solo reescribe los colores de css/style.css. Se enciende añadiendo la clase "claro" al , cosa de la que se ocupa js/piel.js. Los colores están sacados de las fotos del local: paredes blancas, madera clara del rótulo, madera oscura rojiza de las columnas y la barra, turquesa de los cojines y verde de las plantas. La intro del avión y la cortina de paso entre páginas se quedan oscuras: el golpe de cine de la entrada se mantiene. La portada sí pasa a clara (David, 12/9/2026), y las chispas con ella: dejan de ser brasas y pasan a ser motas de polvo flotando a contraluz. ============================================================ */ html.claro{ --negro: #F7F3EC; /* el fondo de la web */ --negro-2: #EFE7DA; /* las bandas alternas */ --carbon: #FFFFFF; /* las tarjetas */ --carbon-2: #EFE7DA; --humo: #E2D5C2; --oro: #22736C; /* el acento pasa de oro a turquesa */ --oro-claro: #14544F; --oro-hondo: #8A4432; --brasa: #8A4432; /* mismo brillo que el degradado dorado, pero en madera: el nombre tiene que leerse como una sola palabra, no cambiar de color a medias */ --grad-oro: linear-gradient(100deg,#6E3325 0%,#B4643F 26%,#8A4432 48%,#C47B50 72%,#7A3A28 100%); --oro-rgb: 138,68,50; /* las líneas doradas pasan a madera */ --oro-claro-rgb: 34,115,108; --negro-rgb: 247,243,236; /* las veladuras negras pasan a crema */ --brasa-rgb: 138,68,50; --sobre-oro: #FFFFFF; --crema: #2A1D17; /* los titulares pasan a tinta */ --texto: #5C4C43; --tenue: #6E5C4C; /* la portada vuelve a ser oscura (foto con velo, 24/9): las chispas vuelven a ser brasas encendidas, un poco más suaves */ --chispa-rgb: 246,227,176; --chispa-fuerza: .8; /* sombras en marrón de madera, no en negro, que sobre crema ensucia */ --sombra: 0 26px 50px -24px rgba(60,32,20,.45), 0 6px 14px -8px rgba(60,32,20,.22); --sombra-chica: 0 10px 18px -10px rgba(60,32,20,.4); } /* ---- Lo que sigue siendo de noche ---- La intro, la portada, la cortina de paso entre páginas y la cabecera mientras está sobre la portada. Dentro de estos bloques mandan otra vez los colores de siempre. */ html.claro .intro, html.claro .cortina, html.claro .hero, html.claro .s-cifras, html.claro body:has(.hero) .top:not(.pegada){ --negro: #070708; --negro-2: #0D0D0F; --carbon: #131316; --carbon-2: #1B1B20; --humo: #26262C; --oro: #D9A94C; --oro-claro: #F6E3B0; --oro-hondo: #8A6520; --brasa: #E2622B; --grad-oro: linear-gradient(100deg,#8A6520 0%,#F5D488 26%,#D9A94C 48%,#FBEDC4 72%,#A87C28 100%); --oro-rgb: 217,169,76; --oro-claro-rgb: 246,227,176; --negro-rgb: 7,7,8; --brasa-rgb: 226,98,43; --sobre-oro: #0B0906; --crema: #F6F1E7; --texto: #B9B2A6; --tenue: #74706A; } /* La niebla cálida que sigue al ratón por la portada: sobre negro son 16 de intensidad y sobre crema ensucia, así que baja a 7 */ html.claro .hero-luz{ background:radial-gradient(620px 520px at var(--mx,50%) var(--my,42%), rgba(var(--brasa-rgb),.07), transparent 62%); } /* La cabecera ya pegada lleva el velo crema; sobre la portada, que desde el 24/9 es la foto del local con velo oscuro, va de noche */ html.claro .top.pegada::before{ background:linear-gradient(180deg, rgba(var(--negro-rgb),.86), rgba(var(--negro-rgb),0)); } /* El grano de película se come el papel claro: se baja mucho */ html.claro body::after{ opacity:.022; } /* Sombra suave bajo la cabecera pegada, que sobre crema un borde dorado no se ve */ html.claro .top.pegada{ box-shadow:0 1px 0 rgba(138,68,50,.14), 0 10px 30px rgba(42,29,23,.06); } /* El degradado madera-turquesa queda bien en el logo, pero sucio relleno en un botón: ahí, turquesa liso */ html.claro .b.lleno, html.claro .tabs button.on, html.claro .al-btn.on{ background:var(--oro); background-image:none; } html.claro .b.lleno:hover{ filter:brightness(1.12); } /* El semáforo de "abierto ahora": el verde y el rojo claros no se leen sobre crema, hacen falta los tonos oscuros */ html.claro .estado.abierto{ color:#256038; background:rgba(37,96,56,.09); } html.claro .estado.cerrado{ color:#94261F; background:rgba(148,38,31,.09); } /* Los huecos de foto sin imagen, en claro */ html.claro .hueco{ background: repeating-linear-gradient(118deg, rgba(42,29,23,.03) 0 2px, transparent 2px 10px), linear-gradient(150deg,var(--carbon-2),var(--negro)); } /* ---- El interruptor para comparar ---- */ .piel-btn{ position:fixed; right:1rem; bottom:1rem; z-index:9600; display:inline-flex; align-items:center; gap:.55rem; padding:.65rem 1.1rem; border-radius:100px; cursor:pointer; font-family:var(--f-sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid rgba(var(--oro-rgb),.45); background:var(--carbon); color:var(--oro-claro); transition:background .35s, color .35s, border-color .35s, transform .35s var(--e-out); } .piel-btn:hover{ transform:translateY(-2px); border-color:var(--oro); } .piel-btn i{ width:9px; height:9px; border-radius:50%; background:var(--oro); display:inline-block; } @media (max-width:900px){ .piel-btn{ right:.8rem; bottom:68px; } } /* ============================================================ FRANJAS CON LOS COLORES DEL LOCAL (24/9) Para que la web no sea crema de arriba abajo: la portada va con la foto del local lleno, la cita en teja (las columnas del bar) y las cifras sobre madera oscura (la barra). ============================================================ */ /* la portada: la foto ya trae su velo; sin fundido a negro abajo */ html.claro .hero::before{ background:radial-gradient(900px 640px at 50% 30%, rgba(217,169,76,.1), transparent 65%); } /* la cita, sobre teja */ html.claro .golpe{ background: radial-gradient(760px 440px at 50% 45%, rgba(255,214,170,.16), transparent 70%), #8E4430; border-block:0; } html.claro .golpe q{ color:#FBF3E8; } html.claro .golpe .fi{ color:#F1CBA9; } /* las cifras, sobre madera oscura */ html.claro .s-cifras{ background: radial-gradient(700px 360px at 50% 0%, rgba(211,179,140,.12), transparent 70%), #2A1D17; } html.claro .s-cifras .cifra .n em{ color:#D3B38C; } html.claro .s-cifras .cifra .e{ color:rgba(246,241,231,.62); }