/* Theme Name: LLANOSTAR MOTORS Theme URI: https://llanostarmotors.com Author: ONEX Media Author URI: https://onexmedia.co Description: Theme premium para LLANOSTAR MOTORS — "la casa de las navesotas". Estética negro mate + dorado (#d0a74d), tipografía Montserrat/Anton. Catálogo de vehículos administrable, fichas técnicas, filtros, WhatsApp prellenado, captura de leads (GHL), GA4 y Pixel de Meta. Basado en el sistema de diseño Stitch. Version: 1.4.5 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: llano-star Tags: dark, business, custom-colors, custom-menu, custom-logo, featured-images, theme-options, translation-ready */ /* * El diseño visual se construye con Tailwind (config inyectada en el ). * Aquí solo viven los estilos base/complementarios y utilidades que Tailwind * por CDN no genera dinámicamente o que conviene tener siempre disponibles. */ :root { --ls-surface: #0a0a0a; --ls-surface-container: #161616; --ls-primary: #ebca83; --ls-primary-container: #d0a74d; --ls-on-surface: #f5f5f5; --ls-on-surface-variant: #c4c4c6; --ls-outline-variant: #2c2c2c; --ls-whatsapp: #25d366; } html { scroll-behavior: smooth; } body { background-color: var(--ls-surface); color: var(--ls-on-surface); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-family: 'Montserrat', system-ui, -apple-system, sans-serif; } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } /* Nivel 2 — Glassmorphism (negro mate) */ .glass-card, .glass-panel { background: rgba(18, 18, 18, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(208, 167, 77, 0.18); } .glow-hover:hover { box-shadow: 0 0 22px 0 rgba(208, 167, 77, 0.18); } /* Scrollbar premium */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #d0a74d; } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Range slider de filtros */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #d0a74d; cursor: pointer; margin-top: -6px; box-shadow: 0 0 10px rgba(208, 167, 77, 0.35); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #2c2c2c; border-radius: 2px; } /* El header fijo no debe quedar bajo la barra de administración de WordPress */ .admin-bar [data-ls-nav] { top: 32px; } @media screen and (max-width: 782px) { .admin-bar [data-ls-nav] { top: 46px; } } /* En móvil (≤600px) la barra de admin de WP es position:absolute y se va con el scroll, así que el nav sticky debe ir pegado al top (si no, queda un hueco). */ @media screen and (max-width: 600px) { .admin-bar [data-ls-nav] { top: 0; } } /* Controles de formulario legibles en modo oscuro (refuerzo a Tailwind/forms) */ .ls-field, input[type="text"].ls-field, input[type="tel"].ls-field, input[type="email"].ls-field, input[type="number"].ls-field, select.ls-field, textarea.ls-field { background-color: #161616; border: 1px solid #3a3a3a; color: #f5f5f5; border-radius: .5rem; transition: border-color .2s, box-shadow .2s; } .ls-field:focus { outline: none; border-color: #d0a74d; box-shadow: 0 0 0 3px rgba(208, 167, 77, 0.18); } input::placeholder, textarea::placeholder { color: #8a8a8a; opacity: 1; } /* Dropdowns nativos legibles (lista de opciones) */ select { color: #f5f5f5; } select option, select optgroup { background-color: #161616; color: #f5f5f5; } /* Avisos del formulario */ .ls-alert { border-radius: .5rem; padding: 1rem 1.25rem; font-size: .95rem; } .ls-alert--ok { background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.4); color: #b9f6ca; } .ls-alert--err { background: rgba(147,0,10,.18); border: 1px solid rgba(255,180,171,.4); color: #ffb4ab; } /* Botón flotante de WhatsApp */ .ls-wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 9999px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ls-wa-float svg { width: 32px; height: 32px; } .ls-wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(37, 211, 102, 0.6); } .ls-wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: #25d366; z-index: -1; animation: ls-wa-pulse 2s ease-out infinite; } @keyframes ls-wa-pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } } @media (max-width: 640px) { .ls-wa-float { width: 54px; height: 54px; bottom: 18px; right: 18px; } .ls-wa-float svg { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .ls-wa-float::before { animation: none; } } /* Slideshow de marcas (marquee infinito) */ .ls-marquee { display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ls-marquee__track { display: flex; align-items: center; gap: 4.5rem; padding-right: 4.5rem; flex: 0 0 auto; animation: ls-marquee 38s linear infinite; } .ls-marquee:hover .ls-marquee__track { animation-play-state: paused; } .ls-marquee__item { display: flex; align-items: center; justify-content: center; height: 56px; flex: 0 0 auto; } .ls-marquee__item img { max-height: 50px; width: auto; filter: grayscale(1) brightness(1.7); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; } .ls-marquee__item:hover img { filter: grayscale(0) brightness(1); opacity: 1; } .ls-marquee__name { font-family: 'Anton', sans-serif; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: #c4c4c6; opacity: 0.7; white-space: nowrap; transition: color 0.3s, opacity 0.3s; } .ls-marquee__item:hover .ls-marquee__name { color: #ebca83; opacity: 1; } @keyframes ls-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ls-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } } /* Menú móvil */ .ls-mobile-menu { transition: transform .3s ease, opacity .3s ease; } .ls-mobile-menu[hidden] { display: none; } /* WordPress core (admin bar / alineaciones / captions) */ .alignleft { float: left; margin-right: 1.5rem; } .alignright { float: right; margin-left: 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption-text { font-size: .85rem; color: var(--ls-on-surface-variant); } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; }