/* SYL Events · BASE COMPARTIDA (30 sep 2026): fuentes autoalojadas + tokens de diseño. * * Esta hoja la cargan TODAS las páginas. Lo que vive aquí es lo que antes se * repetía —con pequeñas diferencias— en cada archivo (ver auditoría 360 del * 30 sep 2026: 32 duraciones y 11 curvas de animación distintas, 41 valores de * espaciado en la portada, padding de sección de 74/84/56/60 px según la * página, 16 radios y 5 sombras). Los tokens NO cambian el aspecto por sí * solos: se adoptan donde se toca código. Regla: si vas a escribir un número de * duración, curva, espaciado de sección o capa, usa el token. */ :root{ /* --- Movimiento -------------------------------------------------------- Cinco duraciones y tres curvas cubren TODO el sitio. 1 micro (foco, hover de icono) · 2 hover/UI · 3 estado de componente · 4 aparición de sección · 5 entrada de hero / cambio de diapositiva. */ --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:520ms; --dur-5:800ms; --ease-out:cubic-bezier(.22,1,.36,1); /* entradas: arranca rápido, se posa */ --ease-inout:cubic-bezier(.65,0,.35,1); /* traslados entre dos estados */ --ease-spring:cubic-bezier(.34,1.4,.64,1); /* rebote leve: círculos, chips */ /* Carruseles: UN reloj para todos (auditoría 30 sep 2026: cada uno tenía el suyo — 0,42 · 0,45 · 0,7 · 0,75 · 1,1 s — y el gesto manual tardaba lo mismo que el avance automático, que es lo que se sentía «lento»). manual = respuesta al dedo, clic, teclado o trackpad (siempre ágil); slide = cambio automático de diapositivas a sangre; glide = carrusel con tarjeta central (reseñas): recorrido largo y suave. */ --car-manual:420ms; --car-slide:700ms; --car-glide:1100ms; --car-autoplay:6000ms; /* --- Espacio (retícula de 4 px) ---------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; /* Ritmo vertical de página: sección normal, sección «capítulo» y aire entre el titular de una sección y su contenido. */ --sec-y:clamp(56px,6vw,80px); --sec-y-lg:clamp(72px,8vw,112px); --sec-head-gap:clamp(28px,3.2vw,40px); /* --- Forma -------------------------------------------------------------- */ --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; --sh-1:0 1px 2px rgba(10,57,84,.06),0 4px 14px rgba(10,57,84,.06); --sh-2:0 10px 30px rgba(10,57,84,.10); --sh-3:0 24px 50px -18px rgba(10,57,84,.35); /* --- Capas: nadie inventa un z-index fuera de esta escala ----------------- */ --z-raised:2; --z-sticky:40; --z-nav:60; --z-overlay:80; --z-modal:100; --z-toast:120; /* --- Ancho de la barra y de los banners a sangre (1 oct 2026, ref. klarna.com/us) --- Medido en Klarna: la cabecera y el carrusel de banners usan TODO el ancho con un margen lateral de 40 px a 1287 px (≈3,1 vw) y se centran con un tope de 1760 px (1680 de contenido). El contenido de lectura (--max:1180px) NO se toca: solo la barra y los banners. */ --gut:clamp(16px,3.1vw,40px); --wide:1760px; /* --- Zonas táctiles (WCAG 2.5.8 pide 24 px como mínimo; 44 px es lo cómodo) */ --tap:44px; --tap-min:24px; } /* Menos movimiento: las duraciones se quedan en cero y todo lo que use los tokens obedece sin tocar nada más. */ @media (prefers-reduced-motion:reduce){ :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms;--dur-5:0ms;--car-manual:0ms;--car-slide:0ms;--car-glide:0ms} } /* Texto solo para lectores de pantalla (h1 estables, etiquetas). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ── CONTROL DE PAUSA DEL MOVIMIENTO (WCAG 2.2.2, nivel A) ───────────────────── * Todo lo que se mueve solo más de 5 s necesita un botón para detenerlo. Es UN * solo estado para todo el sitio (assets/syl-site.js → SYLMotion): si alguien * lo pausa en la marquesina, se pausan también los carruseles y el resto de * los botones reflejan lo mismo. Hereda el color del sitio donde se pone * (`currentColor`), así vale sobre claro, sobre oscuro y sobre foto. * 32 px (WCAG 2.5.8 pide 24); 40 px con puntero táctil. */ .mo-btn{flex:none;width:32px;height:32px;padding:0;border-radius:50%;cursor:pointer; display:inline-grid;place-items:center;color:inherit;background:transparent; border:1.5px solid color-mix(in srgb,currentColor 38%,transparent); transition:background var(--dur-2),border-color var(--dur-2)} .mo-btn svg{width:12px;height:12px;fill:currentColor;pointer-events:none} .mo-btn:hover{background:color-mix(in srgb,currentColor 14%,transparent)} .mo-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px} /* Gestos (SYLMotion.swipe): mientras se arrastra no se selecciona texto, y el gesto horizontal de un carrusel no dispara el «atrás» del navegador. */ .swiping,.swiping *{-webkit-user-select:none;user-select:none} .swiping{cursor:grabbing} .rk-stage,.ab-media,.hs-view,.sv-view,.bl-row{overscroll-behavior-x:contain} /* Con «reducir movimiento» nada se mueve solo: el botón sobra. */ @media (prefers-reduced-motion:reduce){.mo-btn{display:none}} .mo-btn .i-play{display:none} .mo-btn[aria-pressed="true"] .i-play{display:block} .mo-btn[aria-pressed="true"] .i-pause{display:none} @media (pointer:coarse){.mo-btn{width:40px;height:40px}} /* Pausa global: detiene las animaciones en bucle de CSS (las de JS consultan SYLMotion.ok()). */ html.mo-paused :is(.ptn-track,.scroll-cue .m,.scroll-cue .m::after,.mk-f .campo .car,.hero .bg.on){animation-play-state:paused!important} /* ── FUENTES AUTOALOJADAS ── * SYL Events · fuentes AUTOALOJADAS (30 sep 2026) * * Antes se pedían a Google Fonts: una hoja de estilos que bloquea el pintado * (≈850 ms medidos en móvil con Lighthouse), dos orígenes de terceros y la IP * del visitante enviada a Google. Ahora salen de nuestro propio dominio, con * de la variante latina, y el LCP ya no espera a nadie. * * INTER — una sola fuente variable (pesos 100–900) en dos trozos por * `unicode-range`: el navegador solo baja «latin-ext» si aparece un carácter * que no esté en «latin» (Ł, ő…). Ñ, tildes, ¿ ¡ y comillas están en «latin». * MONTSERRAT 900 — solo el peso Black y solo el trozo latino. ⚠️ ANTES la * página cargaba un subconjunto de 11 letras (B D E F I L O R S T U) pensado * para el lema del pie; los titulares que piden `Montserrat,Inter` pintaban * esas 11 letras en Montserrat y el resto en Inter, mezclando dos tipografías * DENTRO de la misma palabra («Conoce SYL Roofing Supply»). Con el trozo * latino completo cada titular sale entero en Montserrat. * INTER FALLBACK — Arial con las métricas de Inter, para que el cambio de * fuente no mueva el texto (CLS) mientras baja el archivo. * * Las rutas son RELATIVAS a este archivo, así que valen igual en local * (/web/assets/…) y en producción (/assets/…). */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap; src:url(fonts/montserrat-900-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter Fallback';src:local('Arial'); ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.4%}