/* ========================================================= BASIC THEME — sistema de diseño base (css/styles.css) ========================================================= Theme base nativo Joomla 6 para tiendas EasyStore + SP Page Builder. SIN Bootstrap, SIN Lenis: CSS propio + vanilla JS (js/core.js). RE-SKIN POR PROYECTO: cambiar SOLO los tokens de §02 (:root). Mismo vocabulario que el proyecto 264 (--paper, --ink, --mute, --rule, --accent, --gutter, --display, --body, --mono) con valores neutros. Reglas anti-colisión (método del proyecto): - Clases nuevas con prefijo tb- (bs- es legado, solo secciones). - Estados propios .is-* — NUNCA .active, .show, .open, .hidden, .visible, .collapse (territorio Bootstrap/SPBuilder/Joomla). - background-color SIEMPRE en propiedad larga donde haya transición (el shorthand background + color-mix congela la animación). - Los wrappers de SPBuilder pueden traer position/overflow: cualquier absolute del snippet ancla al wrapper más cercano, no a la sección. Neutralizar con CSS quirúrgico (ver §13). ───────────────────────────────────────────────────────── ÍNDICE DEL ARCHIVO ───────────────────────────────────────────────────────── §01 Reset ligero + documento ................ L~45 §01b Lenis (opt-in) + scrollbar oculta ....... L~72 §02 Tokens (:root) — RE-SKIN AQUÍ ........... L~105 §03 Accesibilidad (skip, focus, sr) ......... L~130 §04 Tipografía base + .text-mono ............ L~160 §05 Layout (container, main) ................ L~215 §06–§08 NAVEGACIÓN → en css/nav.css ....... (promobar, topbar, logo, menú, drawer) §09 Botones (.tb-btn, .sppb-btn) ........... L~470 §10 Formularios base (com_users, contacto) .. L~520 §11 Core Joomla: mensajes, paginación, breadcrumbs ............................. L~560 §12 Secciones bs-section--light/--dark ...... L~625 §13 SPBuilder: notas de neutralización ...... L~665 §14 Reveal on scroll ........................ L~700 §14b Componentes base (tb-hero, tb-card) ... L~712 §15 Módulos (chrome .tb-module) ............ L~750 §16 Footer .................................. L~730 §17 Responsive (≤768) + reduced-motion ...... L~780 NOTA: añadir bloques nuevos al final de su sección temática y actualizar este índice. El orden respeta la cascada. ========================================================= */ /* ---------- §01 · Reset ligero + documento ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Bloqueo de scroll horizontal (regla del proyecto): clip es más estricto que hidden (no crea scroll context); hidden queda como fallback para navegadores viejos. Aplicado a html Y body (iOS Safari ignora el de html solo). */ html, body { max-width: 100vw; overflow-x: hidden; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; } /* Anclas con scroll suave nativo (cuando Lenis está apagado) */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---------- §01b · Lenis (opt-in) + scrollbar oculta ---------- */ /* Clases que inyecta Lenis en cuando el parámetro "Scroll suave" está activo. Inertes si Lenis no corre. Recordatorio 264: carruseles con scroll propio → data-lenis-prevent-touch (NUNCA data-lenis-prevent, que bloquea también la rueda vertical). */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Scrollbar nativa oculta (parámetro "Ocultar barra de scroll"). El scroll sigue funcionando: solo desaparece la barra. */ html.tb-noscrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } html.tb-noscrollbar::-webkit-scrollbar { display: none; /* WebKit/Blink */ width: 0; height: 0; } /* ---------- §02 · Tokens (:root) — RE-SKIN AQUÍ ---------- */ /* Valores NEUTROS a propósito: el theme base no lleva identidad. Cada tienda redefine estos tokens (y solo estos) en su proyecto. */ :root { /* Color */ --paper: #ffffff; /* blanco puro — el theme NO pinta fondos de página por defecto */ --ink: #161513; /* texto principal */ --mute: #6f6b64; /* texto secundario */ --rule: rgba(0, 0, 0, 0.14); /* separadores */ --accent: #161513; /* acción/acento — neutro: cambiar por proyecto */ /* Tema oscuro (secciones bs-section--dark y topbar en dark) */ --dark-paper: #161513; --dark-ink: #f4f2ee; --dark-mute: #a9a49b; --dark-rule: rgba(255, 255, 255, 0.18); /* Tipografía — stacks de sistema, sin fuentes licenciadas */ --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; --fs-base: 16px; /* Navegación (topbar + drawer) — ajustar por proyecto sin tocar reglas */ --nav-font: var(--mono); --nav-fs: 14px; --nav-tracking: 0.1em; /* Layout */ --container: 1280px; --gutter: 24px; --topbar-h: 64px; --radius: 2px; /* Transiciones */ --t-theme: 0.35s ease; /* cambio de tema topbar/secciones */ --t-ui: 0.2s ease; /* hovers, foco */ } /* ---------- §03 · Accesibilidad ---------- */ .tb-skip { position: absolute; top: -100px; left: var(--gutter); z-index: 200; padding: 10px 16px; background-color: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; text-decoration: none; } .tb-skip:focus-visible { top: 8px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Solo lectores de pantalla (NO usar .visually-hidden ni .sr-only: nombres reclamados por Bootstrap y otros starters) */ .tb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- §04 · Tipografía base + .text-mono ---------- */ /* SIN background-color de salida: página/main/footer van en blanco (fondo del navegador). Un fondo global se define, si acaso, en el re-skin del proyecto (custom.css). */ body { color: var(--ink); font-family: var(--body); font-size: var(--fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } p { margin: 0 0 1em; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: text-decoration-color var(--t-ui), color var(--t-ui); } a:hover { text-decoration-color: var(--accent); } hr { border: 0; border-top: 1px solid var(--rule); margin: calc(var(--gutter) * 1.5) 0; } ::selection { background-color: var(--ink); color: var(--paper); } /* Etiqueta mono — convención del proyecto para snippets SPBuilder */ .text-mono { color: var(--mute); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- §05 · Layout (container, main) ---------- */ /* .tb-container es SOLO del core (main, breadcrumbs, footer-bottom, páginas de sistema). El nav NO la usa: topbar__inner define su propio contenedor en nav.css §N2 — no acoplar el nav a esta clase. */ .tb-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .tb-main { min-height: 55vh; /* evita footers flotando en páginas cortas */ } .tb-main-top, .tb-main-bottom { padding-block: var(--gutter); } /* ---------- §06–§08 · NAVEGACIÓN → css/nav.css ---------- */ /* Promobar, topbar sticky, logo, menú escritorio, utilidades y drawer móvil viven en css/nav.css (pareja de js/nav.js): hoja INDEPENDIENTE para poder cambiar el nav entre themes sin tocar este core. Contrato: nav.css consume los tokens de §02 (con fallbacks) y el body[data-theme] que escribe core.js. */ /* ---------- §09 · Botones (.tb-btn, .sppb-btn) ---------- */ .tb-btn { display: inline-block; padding: 12px 28px; background-color: var(--accent); color: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--t-ui), color var(--t-ui); } .tb-btn:hover { background-color: transparent; color: var(--accent); } .tb-btn--ghost { background-color: transparent; color: var(--ink); border-color: var(--ink); } .tb-btn--ghost:hover { background-color: var(--ink); color: var(--paper); } /* Botones SPBuilder → tipografía del sistema. !important necesario: SPBuilder emite estilos por id de addon. */ .sppb-btn { font-family: var(--mono) !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* ---------- §10 · Formularios base ---------- */ /* Sin Bootstrap: los formularios core (com_users login/registro, contacto) se visten aquí con tokens. */ input, button, select, textarea { font: inherit; color: inherit; } .tb-main input[type="text"], .tb-main input[type="email"], .tb-main input[type="password"], .tb-main input[type="search"], .tb-main input[type="tel"], .tb-main input[type="number"], .tb-main input[type="url"], .tb-main select, .tb-main textarea { width: 100%; max-width: 480px; padding: 10px 14px; background-color: transparent; border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color var(--t-ui); } .tb-main input:focus-visible, .tb-main select:focus-visible, .tb-main textarea:focus-visible { outline: none; border-color: var(--ink); } .tb-main label { display: inline-block; margin-bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .tb-main fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--gutter); margin: 0 0 var(--gutter); } .tb-main legend { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-inline: 8px; } .tb-main button[type="submit"], .tb-main input[type="submit"], .tb-main .btn-primary { /* clase que emiten vistas core */ display: inline-block; padding: 12px 28px; background-color: var(--accent); color: var(--paper); border: 1px solid var(--accent); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } /* ---------- §11 · Core Joomla: mensajes, paginación, breadcrumbs ---------- */ /* .alert escopado al contenedor de mensajes del sistema — la clase la emite Joomla, no es un estado propio. */ /* Contenedor de mensajes: CERO padding/margin de salida — Joomla lo pinta SIEMPRE (vacío casi siempre) y cualquier espacio propio empujaría todas las páginas. El aire lo ponen los avisos cuando existen, via su propio margin. */ #system-message-container { margin: 0; padding: 0; } #system-message-container .alert, #system-message-container joomla-alert { display: block; max-width: var(--container); margin: var(--gutter) auto; padding: 14px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--mute); border-radius: var(--radius); background-color: var(--paper); font-size: 0.9rem; } #system-message-container .alert-success { border-left-color: #3f7a52; } #system-message-container .alert-warning { border-left-color: #b08a3e; } #system-message-container .alert-danger, #system-message-container .alert-error { border-left-color: #a4453a; } /* Paginación (categorías, resultados EasyStore) */ .tb-main .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--gutter) 0; padding: 0; list-style: none; justify-content: center; } .tb-main .pagination a, .tb-main .pagination .page-link, .tb-main .pagination span { display: inline-block; min-width: 36px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; text-align: center; text-decoration: none; } .tb-main .pagination .active .page-link, .tb-main .pagination .active span { background-color: var(--ink); color: var(--paper); border-color: var(--ink); } /* Breadcrumbs */ .tb-breadcrumbs { padding-block: 12px; } .tb-breadcrumbs ol, .tb-breadcrumbs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); } .tb-breadcrumbs a { color: var(--mute); text-decoration: none; } .tb-breadcrumbs a:hover { color: var(--ink); } /* ---------- §12 · Secciones bs-section--light/--dark ---------- */ /* MISMOS NOMBRES que en proyecto 264: la clase custom se escribe en la sección SPBuilder (Ajustes de sección → clase CSS) y core.js las usa como fallback de detección de tema. OJO con el typo histórico "--ligh" (sin t): aquí NO hay alias — si falta la t, no pinta. Solo color/tema: el padding de sección lo define el builder. */ .bs-section--light { /* SIN fondo por defecto (todo blanco): el fondo de una sección clara lo define el builder o el proyecto si lo quiere. La clase sigue siendo el marcador de tema para core.js. */ color: var(--ink); } .bs-section--dark { --ink: var(--dark-ink); --mute: var(--dark-mute); --rule: var(--dark-rule); background-color: var(--dark-paper); color: var(--ink); } .bs-section--dark a { color: var(--ink); } /* ---------- §13 · SPBuilder: notas de neutralización ---------- */ /* El snippet nunca es hijo directo de .bs-section: hay 5-7 wrappers (.sppb-container-inner > .sppb-row > .sppb-row-column > .sppb-column > .sppb-column-addons > .sppb-addon-wrapper > .clearfix). Algunos traen position:relative y/o overflow:hidden. Si un componente debe romper hacia la sección (sticker, imagen flotante), neutralizar QUIRÚRGICAMENTE — nunca en global: .sppb-section:has(.tb-mi-componente) .sppb-addon-wrapper { position: static; overflow: visible; } Sticky dentro del row flex de SPBuilder: va en la COLUMNA — .sppb-row-column { position: sticky; top: X; align-self: flex-start; } y la sección con overflow: clip (no hidden). NUNCA redefinir display/anchos de .sppb-row/.sppb-row-column: el grid es del builder (fracciones de 12 emitidas por id). */ /* ---------- §14 · Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- §14b · Componentes base (tb-hero, tb-card) ---------- */ /* Piezas mínimas de tienda para snippets SPBuilder (ver landing.html). */ .tb-hero { padding-block: clamp(24px, 6vw, 72px); } .tb-hero h1 { margin-bottom: 0.4em; } /* Card de producto genérica. El placeholder de imagen SPBuilder ({{ aN_image }}) va SIEMPRE dentro de .tb-card__media. */ .tb-card { margin: 0; } .tb-card__media { display: block; overflow: hidden; margin-bottom: 12px; background-color: var(--rule); } .tb-card__media img { display: block; width: 100%; height: auto; } .tb-card__title { margin: 0 0 2px; font-size: 1rem; font-weight: 500; } .tb-card a { text-decoration: none; } /* ---------- §15 · Módulos (chrome .tb-module) ---------- */ .tb-module { margin-bottom: var(--gutter); } .tb-module__title { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); } .tb-module ul { margin: 0; padding: 0; list-style: none; } .tb-module li { padding-block: 4px; } /* ---------- §16 · Footer ---------- */ /* footer1-4 = franjas FULL WIDTH apiladas, SIN márgenes ni paddings por defecto: el módulo o la sección SPBuilder de dentro define su propio layout, fondos y espaciados. El theme solo apila. */ .tb-footer { margin: 0; padding: 0; } .tb-footer__area { width: 100%; margin: 0; padding: 0; } .tb-footer a { text-decoration: none; color: var(--mute); transition: color var(--t-ui); } .tb-footer a:hover { color: var(--ink); } .tb-footer__bottom { border-top: 1px solid var(--rule); padding-block: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); } .tb-footer__bottom p { margin: 0; } /* ---------- §17 · Responsive (≤768) + reduced-motion ---------- */ /* Breakpoint principal del método del proyecto: 768px. */ @media (max-width: 768px) { :root { --gutter: 16px; --topbar-h: 56px; } /* reglas de nav ≤768 → css/nav.css §N7 */ /* footer1-4 no necesitan reglas responsive: son franjas full width */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } }