/* ========================================================================= SCALAR — landing page shared.css — componentes reutilizados entre 2 o más secciones. Es parte de la hoja de estilos, dividida en varios módulos (ver /css). IMPORTANTE — orden de carga: el ORDEN en que estos archivos se linkean en el de index.html importa, mantiene el mismo orden de cascada que tenía todo en un único styles.css. Si se agrega un archivo nuevo hay que linkearlo en el lugar que corresponda: 1. variables.css — paleta de colores y tokens (:root) 2. base.css — reset y estilos base de html/body 3. shared.css — componentes reutilizados entre 2+ secciones (línea divisoria, eyebrow, keyframe de brillo) 4. navbar.css — navbar fija (logo, links, cta, versión compacta) 5. hero.css — hero (imagen, texto, botones, leyenda rotativa) 6. layout.css — .split-view ("El problema" + "La solución" juntas) 7. problema.css — sección "El problema" (fondo claro) 8. solucion.css — sección "La solución" (fondo claro) 9. que-hacemos.css — sección "Qué hacemos" (fondo oscuro, timeline) 10. responsive.css — ajustes de tablet, mobile y celulares chicos shared.css (3) va TEMPRANO a propósito: junta reglas que usan 2 o más secciones (ej. .divider-line lo usan hero/problema/solucion/que-hacemos), así que no puede vivir adentro del archivo de una sola sección — si agregás un componente nuevo usado por 2+ secciones, va ahí, no repetido en cada una. ========================================================================= */ /* Línea divisoria de marca: patrón reutilizado como separador corto (2px de alto, color de marca) en varios lugares del sitio — el eyebrow de "El problema"/"La solución" (.problema-eyebrow-line), el divisor entre título y copy (.problema-divider), el separador de cada tarjeta (.problema-item- divider), el de "La solución" en mobile (.solucion-divider) y la línea de la leyenda rotativa del hero (.hero-caption-line). Esta clase concentra lo que las 5 variantes tienen en común; cada una agrega sólo su ancho, margen o color puntual (ver cada clase, marcadas con "usa .divider-line"). */ .divider-line{ display: block; height: 2px; background: var(--blue); } /* ---- Eyebrow (línea + texto en mayúsculas), compartido entre 3 secciones ---- */ /* Compartida con .que-hacemos-eyebrow (ver sección "Qué hacemos"): mismo contenedor (línea + texto), sólo cambia el color del texto/línea de cada uno según el fondo de su sección (ver .problema-eyebrow span:last-child vs .que-hacemos-eyebrow span:last-child). */ .problema-eyebrow, .que-hacemos-eyebrow{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } /* Usa .divider-line (ver sección 1); acá sólo el ancho propio. */ .problema-eyebrow-line{ width: 28px; } .problema-eyebrow span:last-child{ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); } /* Mismo estilo que el eyebrow de "El problema" (.problema-eyebrow): línea corta y sólida + texto en mayúsculas, en vez de la línea en degradado que tenía antes. Usa .divider-line (ver sección 1); acá sólo el ancho y el color propios, en --blue-light (no --blue) para que se note bien sobre una foto oscura. Compartida con .que-hacemos-eyebrow-line (mismo ancho y color — otra sección de fondo oscuro con el mismo criterio). */ .hero-caption-line, .que-hacemos-eyebrow-line{ width: 28px; background: var(--blue-light); } .hero-caption-label span:not(.hero-caption-line){ font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); text-shadow: 0 1px 8px rgba(0,0,0,0.5); /* respaldo de legibilidad sobre fotos con zonas claras */ } /* ---- Utilidad de accesibilidad: contenido sólo para lectores de pantalla ---- */ /* Oculta visualmente sin sacarlo del árbol de accesibilidad (a diferencia de display:none/visibility:hidden, que lo sacan de los dos lados). Usado por .marcas-heading (ver segmentos.css): el título "Marcas que confían en SCALAR" se pidió sacar de la vista (no encajaba con el diseño), pero sigue haciendo falta como contexto para quien navega con lector de pantalla — sin él, el marquee de logos vuelve a no tener ningún texto que explique qué es (mismo problema que motivó agregarlo, ver historial). */ .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; } /* ---- Brillo animado de botones/CTA (usa .btn-primary en hero.css y .navbar-cta en navbar.css) ---- */ /* El degradado recorre su propio ancho (400%) en un solo sentido y vuelve a 0 de golpe; como el primer y el último color del gradiente coinciden, el "salto" es imperceptible y el loop queda continuo. */ @keyframes btnGlow{ 0% { background-position: 0 0; } 100% { background-position: 400% 0; } } /* ---- Entrada del hero (fundido + sube), compartida entre "/" y las subpáginas de partners ---- Usada por .hero-copy (ver hero.css) y .partner-hero-inner (ver partner-page.css): mismo fundido + leve subida de 16px al cargar cualquiera de las 2, para que se sienta consistente entrar a "/" o volver a ella desde audaces.html/vesto.html (pedido puntual: "también pone animaciones al volver a la pantalla principal"). Funciona en TODOS los navegadores (a diferencia del crossfade de @view-transition, ver más abajo, que sólo corren los que lo soportan) — sirve de piso mínimo garantizado de animación. */ @keyframes heroContentIn{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: none; } } /* ---- Transición entre páginas (View Transitions API) ---- Sitewide (no sólo en las subpáginas de partners) porque para que el navegador anime una navegación cross-document hace falta que ESTE opt-in esté declarado tanto en la página de salida como en la de llegada — así, sin importar en qué dirección se navegue (index → audaces/vesto, o de vuelta), hay transición. navigation:auto le pide al navegador el crossfade por defecto entre el snapshot de la página vieja y la nueva (sin declarar ninguna animación custom): alcanza para que se sienta como "una linda animación" en vez del salto seco de siempre, sin tener que armar keyframes ni JS propios. Progressive enhancement puro: sólo lo soportan Chrome/Edge recientes (cross-document view transitions) — en el resto de los navegadores esta regla simplemente no hace nada y la navegación sigue siendo la de siempre, sin fallback necesario en JS ni feature-detection. */ @view-transition{ navigation: auto; }