/* Theme Name: Koro Travel Theme URI: https://example.com/koro-travel Author: Estudio de Desarrollo Web Author URI: https://example.com Description: Tema a medida para "Koro Travel", agencia boutique de experiencias turísticas en Rapa Nui (Isla de Pascua). Paquetes con salidas grupales, tours privados y arriendos, blog y contacto, construido con Tailwind CSS (CDN) sobre WordPress Core. WhatsApp, correos, horario, fechas de salida, precios, itinerarios y preguntas frecuentes se editan en wp-admin → Koro Travel → Ajustes; las consultas del formulario llegan a Koro Travel → Consultas. Version: 1.8.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: koro-travel Tags: custom-colors, custom-menu, custom-logo, blog, e-commerce-ready */ /* ========================================================================= KORO TRAVEL — SISTEMA DE DISEÑO ------------------------------------------------------------------------- Identidad: "Koro" significa "abuelo / anciano sabio" en rapa nui — un guardián de la cultura y el conocimiento de la isla. La marca se apoya en esa idea: viajar de la mano de quienes realmente conocen Rapa Nui. Paleta: --basalt #211E1B Piedra volcánica (fondos oscuros, texto principal) --basalt-soft #34302B Basalto suave (tarjetas sobre fondo oscuro) --paper #F3ECDF Arena cálida (fondo principal claro) --paper-soft #FAF5EB Arena clara (tarjetas sobre fondo claro) --ocean #0F6E76 Océano profundo (acento primario, enlaces) --ocean-light #4FB6AE Turquesa costero (hover, detalles frescos) --sunset #E2632B Atardecer sobre los moái (acento cálido, olas) --sunset-deep #B04A19 Atardecer profundo (botones y texto naranja chico: el #E2632B sobre arena solo llega a 3,2:1 y la norma pide 4,5:1; este llega a 4,7:1) --sunset-soft #F2A45C Ámbar suave (detalles, badges) --stone #8B7E6A Piedra moái (texto secundario, bordes) Tipografía: Display: 'Bricolage Grotesque' (carácter contemporáneo, editorial) Cuerpo: 'Manrope' (sans geométrica cálida, alta legibilidad) ========================================================================= */ :root { --basalt: #211e1b; --basalt-soft: #34302b; --paper: #f3ecdf; --paper-soft: #faf5eb; --ocean: #0f6e76; --ocean-light: #4fb6ae; --sunset: #e2632b; --sunset-deep: #b04a19; --sunset-soft: #f2a45c; --stone: #8b7e6a; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--paper); color: var(--basalt); font-family: "Manrope", sans-serif; -webkit-font-smoothing: antialiased; } .font-display { font-family: "Bricolage Grotesque", sans-serif; } /* Respeta la preferencia de movimiento reducido del visitante */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------------------- DIVISOR DE OLEAJE — SVG inline en template-parts/divider-wave.php, la clase solo controla el tamaño/recorte. ------------------------------------------------------------------------- */ .wave-divider svg { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------------------- SELLO DE CONFIANZA — insignia circular tipo piedra tallada, con anillos concéntricos. Úsese con moderación (banda de confianza, footer). ------------------------------------------------------------------------- */ .sello-koro { display: inline-flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 50%; border: 2px solid rgba(243, 236, 223, 0.35); box-shadow: 0 0 0 6px rgba(243, 236, 223, 0.08), inset 0 0 0 6px rgba(243, 236, 223, 0.08); font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 0.85rem; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; color: var(--paper-soft); padding: 0.75rem; } /* ------------------------------------------------------------------------- BORDE "POSTAL" (perforado) — elemento de firma Simula el filo perforado de una postal / estampilla de correo. Implementado con mask-image para no depender de imágenes. ------------------------------------------------------------------------- */ .postcard-edge { -webkit-mask-image: radial-gradient(circle at 10px 10px, transparent 7px, #000 7.5px); mask-image: radial-gradient(circle at 10px 10px, transparent 7px, #000 7.5px); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-position: -10px -10px; mask-position: -10px -10px; } /* ------------------------------------------------------------------------- TARJETA DE PAQUETE (home) — velo sobre la foto. El texto va abajo, así que el velo es casi opaco ahí y se desvanece antes de la mitad: sobre una foto clara (la playa de Anakena) el enfoque en ámbar no se leía. ------------------------------------------------------------------------- */ .pack-scrim { background: linear-gradient( to top, rgba(33, 30, 27, 0.96) 0%, rgba(33, 30, 27, 0.9) 24%, rgba(33, 30, 27, 0.45) 48%, rgba(33, 30, 27, 0) 74% ); } /* ------------------------------------------------------------------------- TARJETAS DE EXPERIENCIA (packs) ------------------------------------------------------------------------- */ .pack-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .pack-card:hover { transform: translateY(-6px); box-shadow: 0 20px 35px -15px rgba(33, 30, 27, 0.45); } .pack-card[hidden] { display: none; } /* ------------------------------------------------------------------------- PASTILLAS DE FILTRO (Experiencias) ------------------------------------------------------------------------- */ .filter-pill { font-family: "Manrope", sans-serif; font-weight: 700; border: 2px solid var(--basalt); transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .filter-pill:hover { transform: translateY(-2px); } .filter-pill.is-active { background-color: var(--sunset); border-color: var(--sunset); color: var(--paper-soft); } /* ------------------------------------------------------------------------- FOCO DE TECLADO VISIBLE (accesibilidad) El anillo era naranja y se perdía justo encima de los botones naranjas. Ahora es basalto sobre los fondos claros y arena dentro de las secciones oscuras (que en este tema siempre llevan la clase "text-paper-soft"). ------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--basalt); outline-offset: 2px; } /* Solo cuenta el fondo de la sección (el contenedor), no el color del propio botón: el naranja del encabezado lleva letra clara pero está sobre arena. */ .text-paper-soft :focus-visible, .hero-koro :focus-visible, footer :focus-visible { outline-color: var(--paper-soft); } /* ------------------------------------------------------------------------- TOAST de confirmación (formulario simulado de contacto) ------------------------------------------------------------------------- */ #contacto-toast { position: fixed; bottom: 1.5rem; left: 1.5rem; /* A la izquierda: el botón flotante de WhatsApp ocupa la esquina derecha. */ z-index: 60; max-width: 20rem; transform: translateY(120%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } #contacto-toast.is-visible { transform: translateY(0); opacity: 1; } /* ------------------------------------------------------------------------- MENÚ PRINCIPAL — wp_nav_menu imprime
  • sueltos dentro de