/* ============================================================ STRASBOURG · web2 — estilos base + tipografías Diseño claro, moderno, con curvas y sombras suaves. El grueso del estilo va con Tailwind (ver ). ============================================================ */ /* ---------- Oswald (display / títulos) ---------- */ @font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Oswald"; src:url("../fonts/Oswald-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } /* ---------- Oktah Round (texto) ---------- */ @font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; } @font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Book.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Regular.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Oktah Round"; src:url("../fonts/OktahRound-Medium.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .font-display { font-family:"Oswald","Arial Narrow",sans-serif; } /* Blobs decorativos flotantes */ @keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-18px) scale(1.04); } } .animate-float { animation: float 9s ease-in-out infinite; } .animate-float-slow { animation: float 13s ease-in-out infinite; } /* Aparición al hacer scroll */ .reveal { opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.is-visible { opacity:1; transform:none; } /* Marquesina */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .animate-marquee { animation: marquee 26s linear infinite; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } .animate-float,.animate-float-slow,.animate-marquee { animation:none; } }