/* ============================================================================
SISTEMA DE DISEÑO de las páginas estáticas (landing, 404, soporte, guías,
legal, app, anotador). El juego es Flutter y NO usa nada de esto.
POR QUE EXISTE: el rediseño traía este mismo bloque COPIADO Y PEGADO en los
7 HTML (fondo + footer-glow + gradient-text + scrollbar + @font-face). Eso
son ~150 líneas duplicadas x 7 archivos: cambiar un color implicaba tocar
siete lugares. Acá se define UNA vez y se linkea con:
Va DESPUES de /tailwind.css en el para poder pisar utilidades.
========================================================================= */
/* ---------------------------------------------------------------------------
TIPOGRAFIA — Poppins SELF-HOSTED.
Antes estas páginas pedían la fuente a fonts.googleapis.com (origen externo
+ render bloqueado). El index ya la self-hosteaba; ahora todas hacen igual.
font-display:swap => el texto se ve YA con la fuente del sistema y cambia a
Poppins cuando cargó, sin bloquear el primer paint.
------------------------------------------------------------------------ */
/* WOFF2 primero (el mismo tipo comprimido con brotli: 50 KB en vez de 156 KB
por peso, -68%). El .ttf queda de respaldo para cualquier navegador viejo:
el navegador baja UNO SOLO, el primero que entienda. */
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url("/assets/fonts/Poppins-Regular.woff2") format("woff2"),
url("/assets/fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src:
url("/assets/fonts/Poppins-Medium.woff2") format("woff2"),
url("/assets/fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src:
url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2"),
url("/assets/fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
url("/assets/fonts/Poppins-Bold.woff2") format("woff2"),
url("/assets/fonts/Poppins-Bold.ttf") format("truetype");
}
/* ---------------------------------------------------------------------------
TOKENS de la marca. Si mañana cambia el azul, se cambia ACA y listo.
------------------------------------------------------------------------ */
:root {
--marca-azul: #2474ec;
--marca-azul-claro: #4a8fde;
--marca-cielo: #c8ebff;
--marca-cian: #00a2ff;
--marca-fondo: #0a0a0a;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------------
SCROLLBAR de la marca (WebKit + Firefox).
------------------------------------------------------------------------ */
::-webkit-scrollbar {
width: 6px;
/* height: para la barra HORIZONTAL. Sin esto quedaba en el tamaño por
defecto (~15px) y con el thumb azul: una franja gruesa fuera de estilo. */
height: 6px;
}
::-webkit-scrollbar-track {
background: #000;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--marca-azul);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--marca-azul-claro);
}
::-webkit-scrollbar-button {
display: none;
}
/* ---------------------------------------------------------------------------
FONDO de la cabecera: foto difuminada hacia abajo + tinte azul radial.
Antes iba con ~40 líneas de style="" inline repetidas en cada página; ahora
alcanza con:
El .webp pesa 13 KB contra el 1 MB del .png original.
------------------------------------------------------------------------ */
/* #(el corte a media página): #special-body (el contenedor de TODA la landing)
no tenía color de fondo, así que era transparente. La imagen de cabecera sólo
cubre 120vh; de ahí para abajo se veía LO QUE FLUTTER PINTA POR DETRÁS, y
quedaba una línea horizontal con la mitad de abajo más clara.
Con el negro de la marca acá, el patrón de cartas queda sólo en el header/main
(como corresponde) y el resto de la página apoya sobre color sólido. */
#special-body {
background-color: #0a0a0a;
}
.landing-fondo {
position: absolute;
top: 0;
left: 0;
z-index: -30;
width: 100%;
height: 120vh;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
pointer-events: none;
}
/* Cada breakpoint baja SOLO su imagen: el celular nunca pide la de escritorio. */
.landing-fondo--movil {
display: block;
background-image: url("/assets/new_landing/bg-mobile.webp");
}
.landing-fondo--escritorio {
display: none;
background-image: url("/assets/new_landing/bg.webp");
}
@media (min-width: 768px) {
.landing-fondo--movil {
display: none;
}
.landing-fondo--escritorio {
display: block;
}
}
.landing-tinte {
position: absolute;
top: 0;
left: 0;
z-index: -20;
width: 100%;
height: 120vh;
opacity: 0.5;
pointer-events: none;
background-color: #0a0a0a;
background-image: radial-gradient(
ellipse 80% 80% at 50% -0%,
rgba(0, 119, 255, 0.35),
rgba(20, 118, 255, 0)
);
}
/* ---------------------------------------------------------------------------
TITULOS con degradado (celeste -> cian).
------------------------------------------------------------------------ */
.gradient-text {
background-image: linear-gradient(
to bottom,
var(--marca-cielo) 0%,
var(--marca-cian) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
/* Si el título corta en dos renglones, el degradado se repite en cada uno
en vez de quedar cortado a la mitad. */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ---------------------------------------------------------------------------
FOOTER: resplandor azul difuminado hacia los costados y hacia abajo.
------------------------------------------------------------------------ */
.footer-glow {
background-image: linear-gradient(
to bottom,
rgba(56, 130, 246, 0.22),
rgba(56, 130, 246, 0.05) 55%,
rgba(56, 130, 246, 0) 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 50%,
black 50%,
transparent
);
mask-image: linear-gradient(
to right,
transparent,
black 50%,
black 50%,
transparent
);
}
/* ---------------------------------------------------------------------------
ACCESIBILIDAD: si el sistema pide menos movimiento, se cortan animaciones
y transiciones. Lo pide iOS/Android/Windows desde Accesibilidad y evita
mareos; además baja el consumo en equipos lentos.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}