/* ═══════════════════════════════════════════════════════════════════════ Andriu Chef — tres versiones de color Los verdes salen de las hojas de olivo de sus propias piezas de Instagram, muestreadas de "ARROCES Y FIDEOS TOSTADOS": olivo medio #767354 · oscuro #575435 · claro #949171 Cada versión solo redefine variables de estilos.css. La estructura, la tipografía y el contenido son idénticos: lo único que cambia es el color, para poder compararlas de verdad. Para verlas: abrir index.html?versiones y usar el selector de abajo a la izquierda. Cuando Andrea elija una, se fija en el y este archivo se puede borrar. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1 · OLIVAR — el dorado sigue mandando, el verde entra de apoyo La más cercana a lo que ya publica. El verde aparece en el fondo oscuro (que deja de ser negro y se vuelve tierra) y en el botón de contacto. Es la opción prudente: suma sin cambiar lo que su gente ya reconoce. ─────────────────────────────────────────────────────────────────────── */ :root, :root[data-tema="olivar"] { --fondo: #F9F6EF; --fondo-alterno: #F0E9DC; --linea: #E7DECD; --acento: #A9803E; --acento-texto: #7A5A22; --acento-claro: #C9A86A; --oscuro-fondo: #1E1D14; --oscuro-texto: #D6D2C2; --oscuro-apagado: #BDB9A6; --boton-fondo: #1E1D14; --boton-hover: #A9803E; --contacto: #5E6A45; } /* ─────────────────────────────────────────────────────────────────────── 2 · HUERTA — el verde toma el mando El bloque del arroz pasa a verde olivo profundo y los botones se van al verde. El dorado se reserva para filetes y cifras, que es donde más luce. La más personal de las tres, y la que más la separa de otros caterings. ─────────────────────────────────────────────────────────────────────── */ :root[data-tema="huerta"] { --fondo: #F8F6EE; --fondo-alterno: #ECEBDD; --linea: #DEDCC8; --acento: #8A7A3C; --acento-texto: #5F5424; --acento-claro: #C6B87C; --oscuro-fondo: #2E3323; --oscuro-texto: #D8DAC6; --oscuro-apagado: #BCC0A6; --boton-fondo: #3D442E; --boton-hover: #8A7A3C; --contacto: #3D442E; } /* ─────────────────────────────────────────────────────────────────────── 3 · CAL — clara y fresca, de verano Fondos con un punto de verde, y el bloque oscuro se sustituye por un olivo medio: menos contraste, más luz, más piscina y cal blanca. La que mejor acompaña las fotos de sol, y la más distinta a lo que hay ahora. ─────────────────────────────────────────────────────────────────────── */ :root[data-tema="cal"] { --fondo: #F7F7F0; --fondo-alterno: #E9EBE0; --linea: #D8DCCB; --acento: #6F7A52; --acento-texto: #4F5838; --acento-claro: #DCDDC2; /* #5A6144 quedaba bonito pero dejaba el texto del bloque en 4,4:1, justo por debajo del mínimo legible. Un par de tonos más abajo y se resuelve. */ --oscuro-fondo: #4C5237; --oscuro-texto: #EDEEE2; --oscuro-apagado: #D3D6BF; --boton-fondo: #4F5838; --boton-hover: #A9803E; --contacto: #4F5838; } /* ─────────────────────────────────────────────────────────────────────── Selector de versiones. Solo aparece con index.html?versiones; no forma parte de la web publicada. ─────────────────────────────────────────────────────────────────────── */ .selector-versiones { position: fixed; left: 16px; bottom: 16px; z-index: 120; display: none; gap: 6px; padding: 7px; background: rgba(20, 17, 14, .86); backdrop-filter: blur(8px); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.3); } .selector-versiones[data-visible] { display: flex; } .selector-versiones button { font-family: var(--texto); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(249,246,239,.72); background: transparent; border: 0; border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: background .25s ease, color .25s ease; } .selector-versiones button:hover { color: #fff; } .selector-versiones button[aria-pressed="true"] { background: var(--acento); color: #fff; } @media (max-width: 619px) { .selector-versiones { left: 12px; bottom: 12px; padding: 5px; } .selector-versiones button { padding: 7px 11px; font-size: .62rem; letter-spacing: .1em; } }