/** * Culture Racing — CSS Global * * Variables CSS del proyecto, resets mínimos, y comportamiento del smart * header (scroll-aware sticky header). Carga en todas las páginas. * * ───────────────────────────────────────────────────────────────────────── * ÍNDICE * §1 Tokens (:root) → colores, tipografía, dimensiones, transiciones, z * §2 Reset base → body, html/body overflow-x, img, :focus-visible * §3 Botones → reset del fondo "rosado" del tema padre * §4 Utilidades tipo → .cr-font-display / .cr-font-body * §5 Textura → .cr-has-texture * §6 Smart header → #cr-site-header + estados + padding de contenido * §7 Accesibilidad → focus de #content + skip-link * §8 Scrollbar → scrollbar global CR * §9 Animación global → @property --cr-cta-angle + @keyframes * §10 Responsive → @media de tamaño + prefers-reduced-motion * ───────────────────────────────────────────────────────────────────────── * BREAKPOINTS usados acá: 1024 (tablet) · 480 (mobile-small) * Ambos solo reescalan tokens del header/container. + 1 media de * accesibilidad (prefers-reduced-motion). Todo en §10. * * El comportamiento del header se controla con clases en (header.js): * .cr-header-is-transparent → header sobre fondo oscuro (hero del home) * .cr-header-is-hidden → header oculto (scrolleando hacia abajo) * .cr-header-is-compact → header con fondo sólido (scrolleado arriba) * ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ §1 · TOKENS (:root) ═══════════════════════════════════════════════════════════════════════ */ :root { /* Colores marca */ --cr-color-primary: #c00000; --cr-color-primary-dark: #8b0000; --cr-color-primary-hover: #e60000; --cr-color-dark: #1a1a1a; --cr-color-darker: #0f0f0f; --cr-color-black: #000000; --cr-color-gray-900: #1a1a1a; --cr-color-gray-800: #2a2a2a; --cr-color-gray-700: #3a3a3a; --cr-color-gray-600: #4a4a4a; --cr-color-gray-500: #81817f; --cr-color-gray-400: #999999; --cr-color-gray-200: #e5e5e5; --cr-color-gray-100: #f5f5f5; --cr-color-white: #ffffff; /* Aliases semánticos de texto. Usar estos en componentes en lugar de los grays directos para que un eventual cambio de paleta se propague desde un solo lugar. */ --cr-color-text: var(--cr-color-white); --cr-color-text-muted: var(--cr-color-gray-500); /* #81817f — body secundario sobre dark */ --cr-color-text-dim: rgba(255, 255, 255, 0.78); /* body principal levemente atenuado */ /* Tipografía */ --cr-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cr-font-heading: 'Super Brigade', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cr-font-display: 'Super Brigade', 'Montserrat', Impact, sans-serif; /* Dimensiones del header */ --cr-header-height: 80px; --cr-topbar-height: 30px; --cr-header-total-height: calc(var(--cr-header-height) + var(--cr-topbar-height)); /* Contenedor */ --cr-container-max: 1440px; --cr-container-pad: 32px; /* Grosor único del outline (-webkit-text-stroke) de los títulos display. Single source of truth: cambiar acá propaga a todo el proyecto. Los widgets del plugin lo consumen como var(--cr-outline-width, 1.5px). */ --cr-outline-width: 1.5px; /* Transiciones */ --cr-transition-fast: 150ms ease; --cr-transition-base: 250ms ease; --cr-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --cr-transition-header: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* z-indexes */ --cr-z-header: 9999; --cr-z-dropdown: 10000; --cr-z-drawer: 999999; /* Textura (consolidado acá; antes vivía en un segundo :root más abajo) */ --cr-texture-url: url('../img/texture-concrete.webp'); --cr-texture-size: 256px 256px; --cr-texture-size-small: 180px 180px; /* para elementos pequeños */ /* Overlay unificado para TODOS los backdrops del proyecto (megamenu drawer, minicart, search modal, shop filters drawer, auth modal). El plugin lo referencia desde sus módulos como var(--zenth-mm-overlay) con fallback al mismo valor. */ --zenth-mm-overlay: rgba(0, 0, 0, 0.7); } /* ═══════════════════════════════════════════════════════════════════════ §2 · RESET BASE ═══════════════════════════════════════════════════════════════════════ */ body { font-family: var(--cr-font-body); color: var(--cr-color-gray-900); background-color: var(--cr-color-black); } /* Prevenir scroll horizontal a nivel global. - `overflow-x: hidden` es el fix universal compatible con todos los browsers. - `overflow-x: clip` (la segunda declaración) lo override en browsers que lo soportan: NO crea scroll container, así `position: sticky` sigue funcionando en descendientes (algo que `hidden` rompe). Combinados: máxima compatibilidad sin sacrificar sticky. */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--cr-color-primary); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════ §3 · BOTONES — neutralizar el fondo "rosado" del tema padre ─────────────────────────────────────────────────────────────────────── El tema padre define un fondo en [type=button]:hover/:focus, [type=submit]:hover/:focus, button:hover/:focus que sobre la paleta CR se ve rosado. Lo limpiamos en DOS niveles, ambos SEGUROS (no tocan botones con fondo propio): 1) Red de seguridad GLOBAL para