/* ========================================================================= Sicily Tours Pro — Estilos GLOBALES del sitio (v1.1.3) Se cargan en TODAS las páginas. - TAREA 1: eliminar el espacio entre la navbar y el hero. - TAREA 2: footer rediseñado (3 columnas) según el screenshot del cliente. Nota: las reglas que entran en conflicto con el CSS !important de FASE 1 (padding del body y .site-header) se imprimen ADEMÁS inline al final de (ver STP_Frontend::print_late_global_css) para garantizar prioridad. ========================================================================= */ /* --------------------------------------------------------------------------- TAREA 1 — NAVBAR PEGADA AL HERO (sin hueco) La navbar .site-header es position:absolute con top:35px y el body lleva un padding-top grande (FASE 1) que, junto al fondo decorativo del body (sfondo-sicilia.jpg), deja ver una franja crema entre la navbar y el hero. Pegamos la navbar arriba (top:0) y ajustamos el padding del body a la altura real de la navbar para que el hero arranque justo debajo. --------------------------------------------------------------------------- */ .site-header { top: 0 !important; } .site-header.scrolled { top: 0 !important; } /* Valores = (padding-top de FASE 1) − 35px de offset eliminado, por breakpoint. Conserva exactamente la relación "a ras" de FASE 1 (sin solape) y solo elimina la franja crema superior de 35px. */ body { padding-top: 160px !important; } /* FASE1 195 − 35 */ body.admin-bar { padding-top: 160px !important; } @media (max-width: 1250px) { body, body.admin-bar { padding-top: 130px !important; } /* FASE1 165 − 35 */ } @media (max-width: 1050px) { body, body.admin-bar { padding-top: 115px !important; } /* FASE1 150 − 35 */ } /* --------------------------------------------------------------------------- TAREA 2 — FOOTER GLOBAL (3 columnas, claro, según screenshot) Ocultamos el footer de widgets del tema (GoodLayers: CHI SONO + CF7 roto) e inyectamos nuestro propio footer limpio (#stp-global-footer). --------------------------------------------------------------------------- */ .footer-wrapper { display: none !important; } #stp-global-footer { background: #ffffff; color: #1a1a1a; padding: 64px 20px 30px; font-family: 'Montserrat', system-ui, sans-serif; border-top: 1px solid #ece3d2; } #stp-global-footer * { box-sizing: border-box; } #stp-global-footer .stp-gfooter-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; } #stp-global-footer .stp-gfcol { text-align: center; } #stp-global-footer h3 { font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #1a1a1a; margin: 0 0 22px; line-height: 1.2; } /* Columna 1 — DOVE SIAMO */ #stp-global-footer .stp-gfcol--where p { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.6; margin: 4px 0; color: #3a3a3a; } /* Columna 2 — SEGUICI (iconos horizontales: icono arriba, etiqueta abajo) */ #stp-global-footer .stp-gsocials { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; } #stp-global-footer .stp-gsocials a { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; color: #1a1a1a; font-size: 0.72rem; letter-spacing: 2px; font-weight: 500; transition: color 0.25s ease, transform 0.25s ease; } #stp-global-footer .stp-gsocials a svg { width: 23px; height: 23px; fill: currentColor; display: block; } #stp-global-footer .stp-gsocials a:hover { color: #c9a96e; transform: translateY(-2px); } /* Columna 3 — NEWSLETTER */ #stp-global-footer .stp-news-form { max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } #stp-global-footer .stp-news-form input[type="email"] { padding: 13px 15px; border: 1px solid #d9d2c2; border-radius: 0; background: #ffffff; color: #1a1a1a; font-family: 'Lora', Georgia, serif; font-size: 0.95rem; width: 100%; } #stp-global-footer .stp-news-form input[type="email"]:focus { outline: none; border-color: #c9a96e; } #stp-global-footer .stp-news-form button { padding: 13px 15px; border: 0; background: #1a1a1a; color: #ffffff; font-family: 'Montserrat', system-ui, sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease; } #stp-global-footer .stp-news-form button:hover { background: #c9a96e; } /* Copyright */ #stp-global-footer .stp-gfoot-copy { max-width: 1200px; margin: 46px auto 0; padding-top: 20px; border-top: 1px solid #ece3d2; text-align: center; font-size: 0.78rem; color: #8a8170; letter-spacing: 0.3px; } #stp-global-footer .stp-gfoot-copy a { color: #8a8170; text-decoration: none; } #stp-global-footer .stp-gfoot-copy a:hover { color: #c9a96e; } /* Responsive: 1 columna en móvil/tablet */ @media (max-width: 768px) { #stp-global-footer .stp-gfooter-inner { grid-template-columns: 1fr; gap: 40px; } #stp-global-footer { padding: 48px 18px 26px; } } /* --------------------------------------------------------------------------- FASE 3 (v1.0.7) — FIX TEXTO ILEGIBLE EN CAJAS "TOUR EXTRA" / "ATTENZIONE" En el contenido de los tours hay cajas .message-box-wrapper.red (coral) cuyo texto interior (.message-box-content) heredaba color BLANCO sobre un fondo claro (#f5f1e8) -> texto invisible. Se rediseñan estas cajas de forma global: cabecera coral con título blanco + cuerpo blanco con texto oscuro legible. --------------------------------------------------------------------------- */ .message-box-wrapper.red, .message-box-wrapper { background: #fd7348 !important; border: none !important; border-radius: 10px; overflow: hidden; margin: 24px 0; padding: 0 !important; box-shadow: 0 6px 22px rgba(253, 115, 72, 0.18); } .message-box-wrapper .message-box-title { background: #fd7348 !important; color: #ffffff !important; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; padding: 14px 22px 12px; margin: 0; } .message-box-wrapper .message-box-content { background: #ffffff !important; color: #1a1a1a !important; font-family: 'Lora', serif; line-height: 1.6; padding: 18px 22px; margin: 0; } /* Forzar legibilidad de todo el texto y elementos internos del cuerpo */ .message-box-wrapper .message-box-content, .message-box-wrapper .message-box-content *, .message-box-wrapper .message-box-content strong, .message-box-wrapper .message-box-content span, .message-box-wrapper .message-box-content p { color: #1a1a1a !important; } .message-box-wrapper .message-box-content a { color: #3e6a72 !important; font-weight: 700; text-decoration: underline; } .message-box-wrapper .message-box-content a:hover { color: #335860 !important; } /* ========================================================================= FASE 1 — FIXES CRÍTICOS MOBILE + LOGO (v1.1.2) Selectores reales del tema (GoodLayers child): · barra superior fija .......... .top-bar-custom · navbar ........................ #siteHeader.site-header · logo .......................... .site-logo img Se incluyen además selectores genéricos .gdlr-core-* por robustez. NOTA: el posicionamiento exacto (top de la navbar + padding-top del body) lo recalcula en runtime el script stp-gap-sync (ResizeObserver). Cuando la .top-bar-custom se oculta en móvil, su altura pasa a 0 y el script coloca automáticamente la navbar en top:0 con el padding-top justo. Las reglas de abajo son el estado base / fallback antes de que corra el JS. ========================================================================= */ /* 1. LOGO 50% MÁS GRANDE -------------------------------------------------- */ .site-logo img, .site-header .gdlr-core-logo img { max-height: 90px !important; /* el logo del tema renderiza ~91px en desktop */ width: auto; } /* 2. MÓVIL: BARRA SUPERIOR VISIBLE + NAVBAR DEBAJO + LOGO GRANDE --------- */ @media (max-width: 768px) { /* MOSTRAR la barra superior azul (no ocultarla) */ .top-bar-custom, .top-bar, .gdlr-core-top-bar { display: block !important; visibility: visible !important; height: auto !important; opacity: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 100000 !important; background: #2c3e50 !important; padding: 8px 15px !important; font-size: 13px !important; line-height: 1.4 !important; } /* La navbar va DEBAJO de la top-bar */ .site-header, .site-header.scrolled, .gdlr-core-header-wrap { position: fixed !important; top: 39px !important; /* altura aprox de top-bar en móvil */ left: 0 !important; width: 100% !important; margin-top: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 99999 !important; background: #f6b31d !important; } /* Padding del body = top-bar (~39px) + header (~75px) = ~114px */ body { padding-top: 114px !important; } body.admin-bar { padding-top: 160px !important; } /* Logo 50% MÁS GRANDE en móvil (de ~70px → ~105px) */ .site-logo img, .site-header .gdlr-core-logo img { max-height: 105px !important; width: auto !important; } /* Botón de menú hamburguesa siempre visible y por encima de todo */ .menu-toggle, .mobile-menu-toggle, .gdlr-core-mobile-menu-button { display: block !important; visibility: visible !important; z-index: 100001 !important; position: relative !important; } } @media (max-width: 480px) { /* Ajuste fino para pantallas muy pequeñas */ .top-bar-custom { font-size: 12px !important; padding: 6px 12px !important; } body { padding-top: 110px !important; } body.admin-bar { padding-top: 156px !important; } /* Logo grande también en pantallas pequeñas */ .site-logo img, .site-header .gdlr-core-logo img { max-height: 90px !important; } } /* ========================================== FASE 2: TIPOGRAFÍA AUMENTADA GLOBALMENTE ========================================== */ /* VARIABLES DE TIPOGRAFÍA */ :root { --font-size-base: 18px; --font-size-small: 16px; --font-size-h1: 3.5rem; --font-size-h2: 2.8rem; --font-size-h3: 2rem; --font-size-h4: 1.75rem; --line-height-base: 1.8; } /* BODY Y TEXTO BASE */ body { font-size: 18px !important; line-height: 1.8 !important; } /* ENCABEZADOS */ h1, .h1 { font-size: 3.5rem !important; line-height: 1.3 !important; } h2, .h2 { font-size: 2.8rem !important; line-height: 1.3 !important; } h3, .h3 { font-size: 2rem !important; line-height: 1.4 !important; } h4, .h4 { font-size: 1.75rem !important; line-height: 1.4 !important; } h5, .h5 { font-size: 1.5rem !important; } h6, .h6 { font-size: 1.25rem !important; } /* PÁRRAFOS */ p { font-size: 18px !important; line-height: 1.8 !important; margin-bottom: 1.5rem; } /* LISTAS */ ul li, ol li { font-size: 18px !important; line-height: 1.8 !important; margin-bottom: 0.75rem; } /* BOTONES */ button, .button, .btn, input[type="submit"], input[type="button"], .wp-block-button__link, .elementor-button { font-size: 16px !important; padding: 14px 28px !important; letter-spacing: 1.5px; } /* FORMULARIOS */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], textarea, select { font-size: 16px !important; padding: 14px !important; line-height: 1.5 !important; } label { font-size: 16px !important; margin-bottom: 8px; display: block; } /* FORMULARIO DEL PLUGIN */ .stp-booking-form input, .stp-booking-form textarea, .stp-booking-form select { font-size: 16px !important; padding: 14px !important; } .stp-booking-form label { font-size: 16px !important; font-weight: 600; } .stp-booking-form button { font-size: 16px !important; padding: 16px 32px !important; } /* QUICK INFO BAR */ .stp-quick-info { font-size: 16px !important; } .stp-quick-info-item { font-size: 16px !important; } /* FOOTER */ .stp-footer { font-size: 16px !important; } .stp-footer h3 { font-size: 1rem !important; } /* MENÚ NAVEGACIÓN */ .site-navigation a, .gdlr-core-navigation a { font-size: 16px !important; } /* WIDGETS Y SIDEBAR */ .widget { font-size: 16px !important; } .widget h3, .widget-title { font-size: 1.5rem !important; } /* CARDS Y EXCERPTS */ .tour-card p, .tour-excerpt, .entry-content { font-size: 18px !important; line-height: 1.8 !important; } /* BREADCRUMBS */ .breadcrumbs, .gdlr-core-breadcrumbs { font-size: 14px !important; } /* META INFO */ .post-meta, .entry-meta, .tour-meta { font-size: 14px !important; } /* RESPONSIVE - MOBILE */ @media (max-width: 768px) { /* Reducir levemente en mobile pero mantener legible */ body { font-size: 17px !important; } h1, .h1 { font-size: 2.5rem !important; } h2, .h2 { font-size: 2rem !important; } h3, .h3 { font-size: 1.75rem !important; } p { font-size: 17px !important; } button, .button, .btn { font-size: 15px !important; padding: 12px 24px !important; } } @media (max-width: 480px) { h1, .h1 { font-size: 2rem !important; } h2, .h2 { font-size: 1.75rem !important; } } /* AJUSTES DE ESPACIADO PROPORCIONALES */ section { padding: 20px 0; } .container, .gdlr-core-pbf-wrapper-container { padding-left: 30px; padding-right: 30px; } @media (max-width: 768px) { section { padding: 60px 0; } .container { padding-left: 20px; padding-right: 20px; } } /* ============================================================ FIX v1.2.2 — NAVBAR MÓVIL: botón cerrar + dropdowns/acordeón ============================================================ El menú móvil del TEMA usa el overlay propio `.mobile-nav-overlay#mobileNav` con un botón `.close-btn` (onclick="closeMobileNav()") y submenús anidados (`ul ul`). NO es un menú de WordPress (sin clases .sub-menu / .menu-item-has-children), por eso se acotan los selectores reales del tema. PROBLEMA 1 — El botón de cerrar (×) quedaba DETRÁS de la barra del logo: un fix previo subió el header a z-index:99999 y la hamburguesa a 100000, mientras el overlay del tema tenía z-index:9999 → la barra dorada del logo tapaba el overlay y su botón de cerrar. Subimos el overlay y el botón por encima de todo y damos al botón un estilo circular bien visible y fijo. */ .mobile-nav-overlay { z-index: 100001 !important; padding-top: 80px !important; } .mobile-nav-overlay .close-btn, .mobile-nav-overlay button.close-btn { position: fixed !important; top: 18px !important; right: 18px !important; z-index: 100003 !important; width: 46px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, 0.85) !important; color: #fff !important; border: 2px solid #fff !important; border-radius: 50% !important; font-size: 26px !important; line-height: 1 !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important; transition: background 0.2s ease, transform 0.2s ease !important; } .mobile-nav-overlay .close-btn:hover { background: #000 !important; transform: rotate(90deg) !important; } /* PROBLEMA 2 — Dropdowns / acordeón en el menú móvil. Los submenús (`ul ul`) se ocultan por defecto y solo se muestran cuando el

padre tiene la clase .stp-open (gestionada por el JS del plugin). Se usa !important para imponerse a los estilos inline que el script del tema pudiera aplicar (display:block/none). Solo afecta al overlay móvil (oculto en desktop). */ .mobile-nav-overlay ul ul { display: none !important; overflow: hidden; } .mobile-nav-overlay li.stp-open > ul { display: block !important; animation: stpSlideDown 0.3s ease; } @keyframes stpSlideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 800px; } } /* Indicador ▼ en los ítems que tienen submenú (clase .stp-has-sub del JS). */ .mobile-nav-overlay li.stp-has-sub > a { position: relative; padding-right: 30px !important; } .mobile-nav-overlay li.stp-has-sub > a::after { content: "\25BC"; /* ▼ */ position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.85; transition: transform 0.3s ease; } .mobile-nav-overlay li.stp-has-sub.stp-open > a::after { transform: translateY(-50%) rotate(180deg); } /* Ítems principales un poco más destacados y submenús con sangría clara. */ .mobile-nav-overlay > ul > li > a { font-weight: 700 !important; } .mobile-nav-overlay ul ul li { margin: 4px 0; } /* ========================================================================= v1.2.6 — CORRECCIÓN DE 7 PROBLEMAS CRÍTICOS (cliente, junio 2026) ========================================================================= */ /* ------------------------------------------------------------------------- PROBLEMA 5 — TIPOGRAFÍA DEMASIADO GRANDE El cliente pidió reducir los textos ~10-15%. La home está construida con Elementor y define los tamaños en bloques