/* ============================================================================ Eventos El Rodeo · sistema base ---------------------------------------------------------------------------- Escrito a mano, sin build, sin framework. Se sirve tal cual. POR QUÉ «NOCHE Y CHAMPÁN» La dirección la marcó el cliente al revisar el primer muestrario (que era en verde bosque): más elegancia, el negro que ya usa su web de siempre, y el champán de la flor del logo. No es un capricho: la web actual ES oscura con la flor dorada, así que esto conserva la marca en vez de inventarle otra. El beige+latón de toda finca rústica sigue descartado, y el negro cumple la misma función técnica que cumplía el verde: las fotos son de móvil, de años distintos y con dominantes dispares, y sobre un fondo casi negro encajan como en una galería en lugar de pelearse entre ellas. Sobre crema se ven sucias. El CHAMPÁN es el único acento y sale de la flor del logo. Regla dura, medida: champán (1,65:1) y salvia (2,11:1) NO llegan al mínimo sobre fondo claro. Son colores del lado oscuro; sobre claro, el acento es el ámbar hondo (4,91:1). Ningún negro ni blanco puros: la noche es #141412 y el claro es hueso. ========================================================================= */ /* fuentes.css va enlazado desde el , antes que este. Ver la nota de web.css. */ :root { /* ── Noche: la base oscura ────────────────────────────────────────── */ --noche: #141412; /* cabecera, pie, hero, sección de ruptura */ --carbon: #1f1f1c; /* superficie elevada sobre la noche */ --humo: #55534a; /* bordes y secundarios sobre claro */ --salvia: #8fae98; /* secundario SOBRE oscuro · 7,62:1. Nunca sobre claro */ /* ── Hueso: el fondo de lectura ───────────────────────────────────── */ --hueso: #eef0ea; --hueso-hondo: #e3e0d6; --tinta: #191813; /* texto sobre hueso · 15,48:1 */ /* ── Champán: el único acento, de la flor del logo ────────────────── */ --champan: #d9b877; /* sobre noche · 9,73:1. Nunca sobre claro (1,65:1) */ --ambar-hondo: #8a5f10; /* el acento del lado claro · 4,91:1 sobre hueso */ /* ── Roles FIJOS, ajenos al modo claro/oscuro ───────────────────────── Lo que va encima de una FOTO no puede depender del tema: la foto no se invierte, así que su texto tampoco. La primera versión usaba --hueso en el hero y en modo oscuro el titular salía verde oscuro sobre foto oscura, ilegible. Estos dos no se tocan en el bloque de modo oscuro, a propósito. */ --sobre-foto: #eef0ea; --sobre-foto-suave: #dce4dd; /* Y la TERCERA cara del acento. El champán tenía dos —claro y oscuro—, pero sobre una foto no vale ninguna: medido sobre la parte soleada del césped del hero da 3,52:1, y la etiqueta «Valdemoro · Madrid» es texto pequeño, que pide 4,5:1. Este aclarado llega a 4,78:1 ahí y a 13,2:1 sobre la noche, así que sirve para cualquier texto de acento que caiga encima de una imagen. El champán normal se queda para los fondos sólidos, donde luce. */ --champan-sobre-foto: #eed8ab; /* El acento tiene DOS caras y no es un descuido: champán sobre claro da 1,65:1, ilegible. Es el mismo error que ya costó retirar cuatro grises en KitEventos: un color que se ve bien en la pantalla del que lo elige y no lo lee quien tiene la vista cansada. Sobre claro, siempre ámbar hondo. */ /* ── Tipografía ───────────────────────────────────────────────────── */ /* PRATA en titulares: elegida por el cliente en el casting de letras (letras.html) entre seis candidatas. Didona con alma caligráfica: el filo del lujo con una gota de dulzura. Y con fundamento competitivo: Cortesin lleva Freight+Crimson, Villa Laureana lleva Cormorant — Prata no la lleva nadie de la zona. El texto corrido sigue en sans: una didona en cuerpo de lectura sobre pantalla castiga la vista. */ --display: 'Prata', 'Didot', Georgia, serif; --texto: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif; /* Escala fluida. La didona pide cuerpos grandes: ahí es donde brillan los contrastes de trazo. El tope del hero sube respecto a las propuestas anteriores a propósito. */ /* El arranque baja a 2.1rem: a 500px de ancho, «Celebración, cocina» en Prata a 2.95rem se salía del viewport y el overflow del hero lo cortaba. Se vio en la captura de móvil, no en la de escritorio. */ --t-hero: clamp(2.1rem, 0.8rem + 5.2vw, 5.6rem); --t-h2: clamp(2rem, 1.2rem + 2.7vw, 3.4rem); --t-h3: clamp(1.25rem, 1rem + 0.9vw, 1.65rem); --t-cuerpo: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-pie: 0.875rem; /* ── Un solo radio en toda la web ─────────────────────────────────── */ --radio: 2px; /* ── Ritmo vertical ───────────────────────────────────────────────── */ --aire-seccion: clamp(4rem, 2rem + 8vw, 7.5rem); --ancho: 1180px; /* ── Movimiento ───────────────────────────────────────────────────── */ --curva: cubic-bezier(0.16, 1, 0.3, 1); --rapido: 180ms; --normal: 420ms; color-scheme: light dark; } /* Modo oscuro: las zonas de lectura se apagan hacia la noche, no cambia la identidad. El acento del lado claro pasa a ser el champán, que sobre oscuro cumple de sobra (9,73:1). */ @media (prefers-color-scheme: dark) { :root { --hueso: #161511; --hueso-hondo: #201f1a; --tinta: #eae7dd; --ambar-hondo: var(--champan); --humo: #6d6a5e; } } /* ── Reset corto ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--texto); font-size: var(--t-cuerpo); line-height: 1.65; color: var(--tinta); background: var(--hueso); -webkit-font-smoothing: antialiased; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--display); /* Prata solo existe en 400 y es lo correcto: la didona ya trae el contraste de trazo. Pedir más peso haría que el navegador lo FALSIFIQUE embarrando los perfiles. Por lo mismo, nada de cursiva en titulares: Prata no la tiene y la cursiva sintética es el sello de la web de aficionado. */ font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; text-wrap: balance; } /* El acento dentro de un titular NO es cursiva (Prata no tiene y el navegador la inventaría inclinando letras): es el champán. Más marca y cero falsete. */ h1 em, h2 em, h3 em { font-style: normal; color: var(--champan); } /* La etiqueta de lujo: versalitas espaciadas sobre el titular. Es la gramática de Cortesin, de Belmond y de la propia web vieja de la casa. Se usa CON CUENTAGOTAS: una por cada tres secciones como mucho, o deja de significar. */ .etiqueta { font-family: var(--texto); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; } /* La raya fina de la casa: ya estaba en la web vieja bajo cada titular. Se conserva, en champán y con un ancho corto, como firma. */ .regla { width: 64px; height: 1px; background: var(--champan); border: 0; margin: 1.3rem auto; } .regla--izquierda { margin-inline: 0; } p { text-wrap: pretty; max-width: 68ch; } a { color: var(--ambar-hondo); text-underline-offset: 0.2em; } /* Foco visible SIEMPRE. Nunca outline:none sin sustituto. */ :focus-visible { outline: 3px solid var(--ambar-hondo); /* 4,91:1 sobre claro y 3,27:1 sobre noche */ outline-offset: 3px; border-radius: var(--radio); } /* ── Estructura ──────────────────────────────────────────────────────── */ .contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; } .seccion { padding-block: var(--aire-seccion); } /* ── Botones ─────────────────────────────────────────────────────────── */ /* Versalitas espaciadas y generosos de aire: el botón de lujo no grita, se planta. El cuerpo baja a 0.78rem porque el espaciado ya le da presencia. */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2.1rem; border: 1px solid transparent; border-radius: var(--radio); font-family: var(--texto); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; /* un botón que parte en dos líneas está roto */ transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva); } .boton--principal { background: var(--champan); color: #191813; } /* 9,37:1 */ .boton--principal:hover { background: #e5c890; } .boton--linea { background: transparent; color: var(--tinta); border-color: var(--humo); } .boton--linea:hover { background: var(--humo); color: var(--sobre-foto); } /* 6,72:1 */ /* Sobre foto hace falta borde y sombra propios, o el botón desaparece justo encima de una zona clara de la imagen. */ .boton--sobre-foto { background: rgb(20 20 18 / 0.55); color: #eef0ea; border-color: rgb(238 240 234 / 0.45); backdrop-filter: blur(6px); } .boton--sobre-foto:hover { background: rgb(20 20 18 / 0.78); } /* El fantasma champán: borde fino dorado sobre la noche. Es EL botón del sector del lujo. Solo sobre fondos oscuros: champán sobre claro no llega al contraste mínimo y ahí se usa --linea. */ .boton--champan-linea { background: transparent; color: var(--champan); border-color: var(--champan); } .boton--champan-linea:hover { background: var(--champan); color: #191813; } .boton:active { transform: translateY(1px); } /* ── Movimiento ──────────────────────────────────────────────────────── */ /* Nivel 8 de 10, por petición expresa del cliente en la segunda revisión: parallax, desenfoques al bajar y revelados con presencia. Tres reglas duras: 1. TODO en CSS con animation-timeline (scroll-driven animations). Cero listeners de scroll: un listener corre en cada fotograma y da tirones en el móvil. Donde el navegador no soporte la timeline, el fallback es el revelado clásico por IntersectionObserver: la página funciona igual, solo que con menos teatro. 2. Solo se animan transform, opacity y filter: lo que compone la GPU. 3. prefers-reduced-motion lo apaga TODO. El público incluye a los abuelos de la comunión y a gente que se marea: no es negociable. */ /* Revelado con desenfoque: la pieza entra nítida desde el desenfoque, que es el efecto que el cliente describió («cuando bajas se nota»). */ .revelar { opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity 700ms var(--curva), transform 700ms var(--curva), filter 700ms var(--curva); } .revelar.visible { opacity: 1; transform: none; filter: none; } /* Con soporte de scroll-driven animations, los efectos ricos: */ @supports (animation-timeline: view()) { /* La foto del hero se mueve más despacio que la página (parallax) y se acerca un punto. La foto viene sobredimensionada un 12% en alto para que el desplazamiento no enseñe los bordes. */ .parallax-foto { animation: ke-parallax linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } @keyframes ke-parallax { from { transform: translateY(0) scale(1.06); } to { transform: translateY(12%) scale(1.12); } } /* El texto del hero se desvanece y desenfoca al salir de pantalla: el titular se «disuelve» mientras bajas. */ .disolver-al-salir { animation: ke-disolver linear both; animation-timeline: view(); animation-range: exit 10% exit 85%; } @keyframes ke-disolver { to { opacity: 0; filter: blur(14px); transform: translateY(-32px); } } /* Revelado conducido por el scroll: en vez de dispararse una vez, la pieza se completa según entra, y retrocede si subes. Para fotos y números. */ .revelar-scroll { animation: ke-entrar linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; } @keyframes ke-entrar { from { opacity: 0; transform: translateY(34px) scale(0.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .revelar, .revelar-scroll { opacity: 1; transform: none; filter: none; } .parallax-foto, .disolver-al-salir, .revelar-scroll, .abrir, .deriva-s, .deriva-b { animation: none !important; } }