/* * Armonía cromática para las subpáginas públicas. * * No reconstruye nada: se limita a llevar el fondo, la tipografía y el rojo de * la portada a las páginas que siguen montadas con Divi. El marcado, los * módulos y los formularios se quedan exactamente como están. * * Regla de oro: nada aquí puede dejar texto ilegible. Cuando se oscurece un * fondo, se aclara el color de texto en el mismo bloque, nunca por separado. * * Todo cuelga de .h10-tema, que el plugin añade al solo en las páginas * de la lista. Sin esa clase, este archivo no hace nada. */ .h10-tema { --h10-bg: #080808; --h10-surface: #111111; --h10-text: #f5f2ea; --h10-text-2: #9a9a9a; --h10-line: rgba(255, 255, 255, .10); --h10-accent: #ff0032; --h10-accent-dark: #cc0028; --h10-display: 'Space Grotesk', system-ui, sans-serif; --h10-body: 'DM Sans', system-ui, sans-serif; background-color: var(--h10-bg); color: var(--h10-text); } /* Contenedores de Divi: fondo transparente para que se vea el del body. */ .h10-tema #page-container, .h10-tema #et-main-area, .h10-tema #main-content, .h10-tema .et_pb_section, .h10-tema .et_pb_row, .h10-tema .et_pb_column, .h10-tema .et-l--header, .h10-tema .et-l--body, .h10-tema .et-l--footer { background-color: transparent; } /* Tipografía y color de texto. */ .h10-tema, .h10-tema p, .h10-tema li, .h10-tema span, .h10-tema td, .h10-tema .et_pb_text, .h10-tema .et_pb_text_inner { font-family: var(--h10-body); color: var(--h10-text); } .h10-tema h1, .h10-tema h2, .h10-tema h3, .h10-tema h4, .h10-tema h5, .h10-tema h6 { font-family: var(--h10-display); color: var(--h10-text); } /* Enlaces con el rojo de la marca. */ .h10-tema a { color: var(--h10-accent); } .h10-tema a:hover { color: var(--h10-accent-dark); } /* * Clases de color del editor de bloques. * * WordPress las escribe en el contenido cuando alguien elige un color en el * editor, y son tonos oscuros pensados para fondo claro. Sobre el fondo oscuro * quedan invisibles, así que se neutralizan. */ .h10-tema .has-black-color, .h10-tema .has-very-dark-gray-color, .h10-tema .has-dark-gray-color, .h10-tema .has-medium-gray-color, .h10-tema .has-cyan-bluish-gray-color { color: var(--h10-text) !important; } /* Y sus equivalentes de fondo, que pintarían un bloque claro sobre el fondo oscuro. */ .h10-tema .has-white-background-color, .h10-tema .has-very-light-gray-background-color, .h10-tema .has-light-gray-background-color { background-color: transparent !important; } /* * Tarjetas y bloques con fondo claro propio de Divi. * * Se les da fondo oscuro y, en el mismo bloque, se fuerza el texto claro. Si * solo se cambiara el fondo quedarían con letra negra sobre negro. */ .h10-tema .et_pb_blurb, .h10-tema .et_pb_promo, .h10-tema .et_pb_toggle, .h10-tema .et_pb_tabs, .h10-tema .et_pb_testimonial, .h10-tema .et_pb_pricing_table { background-color: var(--h10-surface) !important; border: 1px solid var(--h10-line); color: var(--h10-text); } .h10-tema .et_pb_blurb *, .h10-tema .et_pb_promo *, .h10-tema .et_pb_toggle *, .h10-tema .et_pb_testimonial * { color: var(--h10-text); } .h10-tema .et_pb_blurb a, .h10-tema .et_pb_promo a, .h10-tema .et_pb_toggle a { color: var(--h10-accent); } /* Botones de Divi con el estilo de la portada. */ .h10-tema .et_pb_button, .h10-tema .et_pb_more_button { font-family: var(--h10-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background-color: var(--h10-accent) !important; border-color: var(--h10-accent) !important; color: #fff !important; border-radius: 2px; transition: background-color .18s ease, transform .18s ease; } .h10-tema .et_pb_button:hover, .h10-tema .et_pb_more_button:hover { background-color: var(--h10-accent-dark) !important; border-color: var(--h10-accent-dark) !important; transform: translateY(-2px); } /* * Cabecera fija al hacer scroll. * * En la portada el menú acompaña siempre; en el resto del sitio se quedaba * arriba y desaparecía al bajar. Se usa sticky y no fixed: sticky no saca el * elemento del flujo, así que no hay que compensar su altura con relleno ni * arriesgarse a que tape el principio del contenido. */ .h10-tema .et-l--header { position: sticky; top: 0; z-index: 90; background-color: var(--h10-bg); border-bottom: 1px solid var(--h10-line); } /* La barra de administración ocupa la franja superior cuando hay sesión. */ body.admin-bar.h10-tema .et-l--header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar.h10-tema .et-l--header { top: 46px; } } /* * Un ancestro con overflow distinto de visible rompe position:sticky sin dar * ningún aviso. Aquí lo rompían dos: el con overflow-x hidden y * #page-container con overflow-y hidden, ambos de Divi. * * La salida no es poner overflow visible, que devolvería el scroll horizontal * que esos hidden estaban evitando. Es usar `clip`: recorta exactamente igual * pero no crea un contenedor de desplazamiento, así que el sticky sobrevive. */ body.h10-tema { overflow-x: clip; overflow-y: visible; } .h10-tema #page-container, .h10-tema #et-main-area, .h10-tema #et-boc, .h10-tema .et-l--body { overflow: clip !important; } .h10-tema .et-l--header a { color: var(--h10-text); } .h10-tema .et-l--header a:hover { color: var(--h10-accent); } /* * El módulo de menú viene con fondo blanco propio (Divi lo marca como * et_pb_bg_layout_light). Al aclarar el texto quedaba gris sobre blanco, es * decir, ilegible. Se transparenta el módulo para que se vea el fondo oscuro * del documento. */ .h10-tema .et_pb_menu, .h10-tema .et_pb_menu__wrap, .h10-tema .et_pb_menu_inner_container, .h10-tema .et_pb_row--with-menu, .h10-tema .et_pb_menu__logo-wrap { background-color: transparent !important; } .h10-tema .et_pb_menu .et-menu > li > a, .h10-tema .et_pb_menu .nav li a { color: var(--h10-text) !important; font-family: var(--h10-body); font-weight: 600; } .h10-tema .et_pb_menu .et-menu > li > a:hover, .h10-tema .et_pb_menu .nav li a:hover { color: var(--h10-accent) !important; } /* * El menú desplegable de móvil sí necesita fondo propio: flota sobre el * contenido y sin él se leería encima del texto de la página. */ .h10-tema .et_mobile_menu { background-color: #0d0d0d !important; border-top-color: var(--h10-accent); } .h10-tema .et_mobile_menu li a { color: var(--h10-text) !important; border-bottom-color: var(--h10-line); } .h10-tema .mobile_menu_bar::before { color: var(--h10-text); } /* * El logotipo publicado es negro y sobre fondo oscuro desaparece. Se invierte * mientras no haya una versión en blanco puesta en el Theme Builder. */ .h10-tema .et-l--header img[src*="logo"], .h10-tema .et_pb_image img[src*="logo-alargado"] { filter: brightness(0) invert(1); } /* Campos de formulario. */ .h10-tema input[type="text"], .h10-tema input[type="email"], .h10-tema input[type="tel"], .h10-tema input[type="number"], .h10-tema input[type="date"], .h10-tema select, .h10-tema textarea { background-color: var(--h10-surface); border: 1px solid var(--h10-line); color: var(--h10-text); } .h10-tema ::placeholder { color: var(--h10-text-2); opacity: 1; } /* * Zona franca: Amelia y Stripe. * * Sus widgets traen su propio sistema de color, con estados, calendarios y * pasarela de pago. Repintarlos desde fuera es la vía rápida a un botón * invisible o a una fecha ilegible, y eso son reservas perdidas. Se dejan * enteros, sobre una tarjeta clara que los aísla del fondo oscuro. */ .h10-tema .amelia-v2-booking, .h10-tema #amelia-container, .h10-tema .amelia-app-booking, .h10-tema .asp_product_buy_button, .h10-tema .stripe-button-el { color-scheme: light; } .h10-tema .amelia-v2-booking, .h10-tema #amelia-container, .h10-tema .amelia-app-booking { background: #fff; border-radius: 4px; padding: clamp(.5rem, 2vw, 1.25rem); } /* * Nada de reglas de color dentro de Amelia. * * Aquí hubo un intento de "devolverles su color" con `color: revert`, y salió * caro: en un