/* =========================================================================== TEMAS ESTACIONALES — Muebles Roca --------------------------------------------------------------------------- REGLA INNEGOCIABLE: toda regla de este archivo empieza con html[data-tema]. Si una regla no lo hace, está mal escrita. Sin el atributo (11 meses al año) este archivo no pinta absolutamente nada y el sitio es idéntico al original. NO SE EDITA css/style.css POR UN TEMA. Los desplazamientos del navbar de más abajo ganan por especificidad — ver el comentario de esa sección. =========================================================================== */ /* --- Medidas comunes ------------------------------------------------------- El alto vive acá y NO dentro de cada preset: si lo declarara cada preset, html[data-tema="patrio"] (0,2,1) le ganaría a la media query de móvil html[data-tema] (0,1,1) y el banner nunca encogería en el teléfono. */ html[data-tema] { --tema-banner-h: 44px; } /* --- Colores: RESPALDO solamente ------------------------------------------ Los valores reales los pone js/temas.js como propiedades inline sobre , leídos de la tabla `temas` que edita el panel local. Estos son el piso por si un tema viene sin paleta: sin ellos, un campo vacío en el panel dejaría el bloque transparente y el texto invisible. */ html[data-tema] { --tema-bg: #1B6CA8; --tema-fg: #FFFFFF; --tema-accent: #6CACE4; } /* --- El banner ------------------------------------------------------------ Fijo, no absoluto: el navbar es position:fixed, así que si el banner se fuera con el scroll el navbar quedaría flotando con un hueco de 44px encima. Como se queda siempre a la vista, lleva la × para cerrarlo. */ html[data-tema] .tema-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--tema-banner-h); z-index: 1000; /* igual que .navbar; el menú móvil (1100) lo tapa */ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 48px; background: var(--tema-bg); color: var(--tema-fg); overflow: hidden; /* red de seguridad: nada se desborda al hero */ } /* El color va declarado acá y NO se hereda de .tema-banner: css/style.css:530 tiene `p { color: var(--text-soft) }`, y una regla que matchea al elemento le gana SIEMPRE al valor heredado del padre, por débil que sea su especificidad. Sin esta línea el mensaje sale en ink-700 (#2F3742) sobre el azul. */ html[data-tema] .tema-banner-msg { margin: 0; color: var(--tema-fg); font-family: var(--font-main); font-size: 0.83rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; line-height: 1.2; } html[data-tema] .tema-banner-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--tema-fg); font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: 0.75; } html[data-tema] .tema-banner-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); } /* Recuadro con la bandera, junto al texto. La primera versión ponía la bandera como franja tricolor de lado a lado del banner: a 1440px cada tercio medía 480px y no se leía como bandera, se leía como una barra blanca suelta. La bandera se reconoce por su PROPORCIÓN, no por su color — a 21×14px funciona. Decorativa: aria-hidden en el marcado. */ html[data-tema] .tema-banner-flag { width: 21px; height: 14px; flex-shrink: 0; border-radius: 2px; background: linear-gradient( to right, var(--tema-accent) 0 33.333%, #FFFFFF 33.333% 66.666%, var(--tema-accent) 66.666% 100% ); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); } /* Hairline al pie: celeste sólido, sin tricolor. */ html[data-tema] .tema-banner-linea { display: none; } html[data-tema-variante="patrio"] .tema-banner-linea { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tema-accent); } /* --- Hacerle lugar al banner ---------------------------------------------- El navbar es position:fixed con top:18px declarado en SIETE lugares: css/style.css:733 (.navbar-inner), :893 (.navbar-home), :931 (.nav-shadow), más inline en index.html:2334, index.html:2374, contacto.html:900 y nosotros.html:1326. Esta única regla los gana los siete SIN EDITAR NINGUNO: la especificidad html[data-tema-banner] .navbar-home es (0,2,1) contra (0,1,0) de las originales. La especificidad le gana al orden de carga, así que da igual que el