/* Theme Name: Multicines Tenerife Theme URI: https://multicinestenerife.com Author: Cine Manager Description: Tema a medida para Multicines Tenerife, pensado para funcionar con el plugin Cine Manager (y degradar sin cartelera si el plugin está desactivado). Esquema oscuro, CSS puro con custom properties, sin frameworks ni dependencias externas. Version: 0.1.0 Requires at least: 6.4 Requires PHP: 8.0 Tested up to: 6.4 License: GPL v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: multicines-tenerife */ /* ------------------------------------------------------------------- Custom properties. Sobrescribibles desde Cine > Ajustes (el plugin las inyecta en el solo si el admin ha cambiado algún color). ------------------------------------------------------------------- */ :root { --cine-navy: #1B2A5E; --cine-navy-deep: #0F1838; --cine-cyan: #29ABE2; --cine-red: #E63329; --cine-white: #FFFFFF; --cine-bg: var( --cine-navy-deep ); --cine-bg-elevada: var( --cine-navy ); --cine-fg: var( --cine-white ); --cine-fg-tenue: rgba( 255, 255, 255, 0.7 ); --cine-acento: var( --cine-cyan ); --cine-cta: var( --cine-red ); --cine-borde: rgba( 255, 255, 255, 0.12 ); --cine-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --cine-radio: 4px; --cine-espaciado: clamp( 1rem, 2vw, 2rem ); --cine-ancho-contenido: 1200px; } /* ------------------------------------------------------------------- Reset mínimo ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var( --cine-bg ); color: var( --cine-fg ); font-family: var( --cine-fuente ); line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: var( --cine-acento ); } a:hover, a:focus { text-decoration: none; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; } button, input, select, textarea { font-family: inherit; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; } .screen-reader-text:focus { position: static; width: auto; height: auto; clip: auto; } /* ------------------------------------------------------------------- Estructura general ------------------------------------------------------------------- */ .cine-contenedor { max-width: var( --cine-ancho-contenido ); margin-left: auto; margin-right: auto; padding-left: var( --cine-espaciado ); padding-right: var( --cine-espaciado ); } .cine-seccion { padding: var( --cine-espaciado ) 0; } .cine-seccion h2 { font-size: 1.5rem; margin-bottom: var( --cine-espaciado ); } /* ------------------------------------------------------------------- Cabecera ------------------------------------------------------------------- */ .cine-header { background: var( --cine-navy ); position: sticky; top: 0; z-index: 100; } .cine-header-interior { display: flex; align-items: center; justify-content: space-between; gap: var( --cine-espaciado ); padding-top: 0.75rem; padding-bottom: 0.75rem; } .cine-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } /* * Se limitan alto y ancho para que un logo muy grande no descoloque la * cabecera, PERO también se fija un mínimo: un SVG sin width/height ni * viewBox no tiene tamaño propio y con "auto" colapsa a 0x0, que es * justo el caso en el que el logo "no se ve" aunque esté puesto. Los * mínimos no llegan a aplicarse nunca con un logo normal (PNG/JPG). */ .cine-logo img { height: auto; width: auto; max-height: 48px; max-width: 220px; min-height: 32px; min-width: 32px; object-fit: contain; } .cine-logo-texto { color: var( --cine-white ); font-weight: bold; font-size: 1.25rem; text-decoration: none; } .cine-nav-principal ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; flex-wrap: wrap; } .cine-nav-principal a { color: var( --cine-fg ); text-decoration: none; font-weight: 600; } .cine-nav-principal a:hover { color: var( --cine-acento ); } .cine-nav-movil-boton { display: none; background: none; border: 1px solid var( --cine-borde ); color: var( --cine-white ); padding: 0.4em 0.7em; border-radius: var( --cine-radio ); } /* * El botón de menú móvil solo aparece en pantallas pequeñas Y con JS * capaz de manejarlo (clase "js" añadida por un script mínimo e inline * en , antes de que se pinte nada: ver header.php). En escritorio * no se muestra nunca: el menú cabe entero. Sin JS, en pantallas * pequeñas el menú permanece SIEMPRE visible y apilado: sigue siendo * usable, solo que sin colapsar. */ @media ( max-width: 780px ) { .js .cine-nav-movil-boton { display: block; } .cine-nav-principal ul { flex-direction: column; gap: 0.75rem; padding: 1rem 0; } .cine-header-interior { flex-wrap: wrap; } .js .cine-nav-principal { display: none; width: 100%; } .js .cine-nav-principal.cine-nav-abierta { display: block; } } /* ------------------------------------------------------------------- Pie ------------------------------------------------------------------- */ .cine-footer { background: var( --cine-navy ); margin-top: var( --cine-espaciado ); padding: var( --cine-espaciado ) 0; color: var( --cine-fg-tenue ); font-size: 0.9rem; } .cine-footer a { color: var( --cine-fg-tenue ); } .cine-footer-columnas { display: flex; flex-wrap: wrap; gap: var( --cine-espaciado ); justify-content: space-between; } .cine-tmdb-atribucion { margin-top: 1rem; font-size: 0.8rem; opacity: 0.7; } /* ------------------------------------------------------------------- Slider de destacados (home) ------------------------------------------------------------------- */ .cine-slider { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; list-style: none; margin: 0; /* Con JS la barra sobra (hay flechas y avance automático); sin JS es la única forma de moverse, así que solo se oculta si hay JS. */ scrollbar-width: thin; } .js .cine-slider { scrollbar-width: none; } .js .cine-slider::-webkit-scrollbar { display: none; } /* Un slide ocupa el ancho completo del slider: así el avance automático pasa de una película a la siguiente, en vez de deslizar media tarjeta. */ .cine-slider-item { scroll-snap-align: start; flex: 0 0 100%; position: relative; } /* Las flechas del slider van superpuestas sobre la imagen, centradas verticalmente, en vez de debajo como en el carrusel. */ .cine-slider-marco .cine-carrusel-controles { position: absolute; inset: 0; margin: 0; align-items: center; justify-content: space-between; padding: 0 0.75rem; pointer-events: none; } .cine-slider-marco .cine-carrusel-flecha { pointer-events: auto; background: rgba( 15, 24, 56, 0.6 ); border-color: rgba( 255, 255, 255, 0.35 ); color: var( --cine-white ); backdrop-filter: blur( 2px ); } .cine-slider-marco .cine-carrusel-flecha:hover, .cine-slider-marco .cine-carrusel-flecha:focus-visible { background: var( --cine-navy ); border-color: var( --cine-white ); color: var( --cine-white ); } .cine-slider-item a { display: block; position: relative; } .cine-slider-item img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var( --cine-radio ); } .cine-slider-item .cine-etiqueta-estreno { position: absolute; top: 1rem; left: 1rem; } .cine-slider-item h3 { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; margin: 0; color: var( --cine-white ); text-shadow: 0 2px 6px rgba( 0, 0, 0, 0.7 ); } /* ------------------------------------------------------------------- Aviso (barra) — el bloque ya trae sus propias clases, solo ajustes de posición dentro de la home. ------------------------------------------------------------------- */ .cine-aviso { text-align: center; } /* ------------------------------------------------------------------- Ciclos / sesiones especiales / promociones (banners) ------------------------------------------------------------------- */ .cine-banners { display: grid; gap: 1.5rem; grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) ); list-style: none; margin: 0; padding: 0; } .cine-banner { position: relative; background: var( --cine-bg-elevada ); border-radius: var( --cine-radio ); overflow: hidden; } .cine-banner a { display: block; color: inherit; text-decoration: none; } .cine-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .cine-banner h3 { margin: 0.75rem; font-size: 1.1rem; } /* ------------------------------------------------------------------- Ficha de película (single-pelicula.php) ------------------------------------------------------------------- */ .cine-pelicula-cabecera { position: relative; color: var( --cine-white ); } .cine-pelicula-backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur( 6px ) brightness( 0.45 ); transform: scale( 1.05 ); z-index: 0; } .cine-pelicula-cabecera-interior { position: relative; z-index: 1; display: flex; gap: var( --cine-espaciado ); align-items: flex-end; flex-wrap: wrap; padding: var( --cine-espaciado ) 0; } .cine-pelicula-poster img { width: 220px; border-radius: var( --cine-radio ); box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.5 ); } .cine-pelicula-info h1 { font-size: 2rem; margin-bottom: 0.3em; } .cine-pelicula-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var( --cine-fg-tenue ); margin-bottom: 0.5em; list-style: none; padding: 0; } .cine-pelicula-meta li::after { content: "•"; margin-left: 0.75rem; opacity: 0.6; } .cine-pelicula-meta li:last-child::after { content: ""; margin: 0; } .cine-pelicula-cuerpo { padding: var( --cine-espaciado ) 0; } .cine-pelicula-cuerpo h2 { font-size: 1.25rem; } .cine-pelicula-ficha { list-style: none; margin: 1rem 0; padding: 0; } .cine-pelicula-ficha li { margin-bottom: 0.4em; } .cine-trailer { position: relative; aspect-ratio: 16 / 9; max-width: 720px; background: #000; border-radius: var( --cine-radio ); overflow: hidden; cursor: pointer; } .cine-trailer img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; } .cine-trailer-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba( 0, 0, 0, 0.35 ); } .cine-trailer-play span { width: 72px; height: 72px; border-radius: 50%; background: var( --cine-cta ); display: flex; align-items: center; justify-content: center; color: var( --cine-white ); font-size: 1.75rem; } .cine-trailer iframe { width: 100%; height: 100%; border: 0; } .cine-sesiones-dia { margin-bottom: 1.5rem; } .cine-sesiones-dia h3 { text-transform: capitalize; font-size: 1.1rem; color: var( --cine-acento ); } .cine-sesiones-horas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; } .cine-sesion-hora { display: inline-block; padding: 0.6em 1.1em; background: var( --cine-bg-elevada ); border: 1px solid var( --cine-borde ); border-radius: var( --cine-radio ); color: var( --cine-white ); text-decoration: none; font-weight: 600; } .cine-sesion-hora:hover { background: var( --cine-cta ); border-color: var( --cine-cta ); } .cine-aviso-fuera-cartelera { background: var( --cine-bg-elevada ); border-left: 4px solid var( --cine-cta ); padding: 1rem 1.25rem; margin: 1rem 0; } /* ------------------------------------------------------------------- Reutiliza las clases del plugin (cine-tarjeta-pelicula, cine-cartelera, etc. — ver assets/css/blocks-frontend.css del plugin) sin duplicarlas; aquí solo se completan detalles visuales propios del tema. ------------------------------------------------------------------- */ .cine-tarjeta-pelicula img { border-radius: var( --cine-radio ); } .cine-boton-comprar { border-radius: var( --cine-radio ); } /* ------------------------------------------------------------------- Páginas de listado (page-cartelera, page-venta-anticipada, page-proximamente, archive-ciclo, single-ciclo) ------------------------------------------------------------------- */ .cine-pagina-intro { max-width: 65ch; color: var( --cine-fg-tenue ); margin-bottom: var( --cine-espaciado ); } /* Selector de día: fila de botones-ancla, con scroll horizontal en pantallas pequeñas en vez de partirse en varias líneas. */ .cine-selector-dia { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: var( --cine-espaciado ); position: sticky; top: 64px; background: var( --cine-bg ); z-index: 10; } .cine-selector-dia a { flex: 0 0 auto; padding: 0.6em 1em; border: 1px solid var( --cine-borde ); border-radius: var( --cine-radio ); color: var( --cine-fg ); text-decoration: none; font-weight: 600; text-transform: capitalize; } .cine-selector-dia a:hover { border-color: var( --cine-acento ); } .cine-selector-dia a.cine-selector-dia-activo { background: var( --cine-acento ); border-color: var( --cine-acento ); color: var( --cine-navy-deep ); } .cine-dia-cartelera { padding: var( --cine-espaciado ) 0; border-top: 1px solid var( --cine-borde ); } .cine-dia-cartelera:first-child { border-top: none; padding-top: 0; } /* El encabezado de cada día es

en page-cartelera.php y

en la sección Cartelera de la home (cuelga del

de la sección); la clase cubre ambos niveles con el mismo estilo. */ .cine-dia-cartelera .cine-dia-cartelera-titulo { text-transform: capitalize; color: var( --cine-acento ); } .cine-dia-cartelera-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var( --cine-espaciado ); } .cine-dia-cartelera-pelicula { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .cine-dia-cartelera-enlace { display: flex; gap: 1rem; align-items: center; flex: 1 1 260px; min-width: 0; color: inherit; text-decoration: none; } .cine-dia-cartelera-enlace img { width: 64px; border-radius: var( --cine-radio ); flex-shrink: 0; } .cine-dia-cartelera-pelicula-titulo { margin: 0; font-size: 1.05rem; } .cine-dia-cartelera-pelicula .cine-sesiones-horas { flex: 2 1 320px; }