/* ═══════════════════════════════════════════════════════════════════════════ AURORA — la colorimetría de MAIDROP Dos colores saturados y el negro. Nada más entra aquí. Si un valor cambia en el icono de la app, cambia aquí. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Los dos ────────────────────────────────────────────────────────────── Turquesa y azul son los únicos colores que existen en esta marca. Todo lo demás —cada resplandor, cada canto, cada estado— sale de estos dos. */ --teal: #00D6C2; --blue: #3B5BFF; --cyan: #12B4E6; /* el punto medio del degradado, aislado */ --teal-deep: #007A6E; --blue-deep: #1B2E9E; /* ── El negro ───────────────────────────────────────────────────────────── Cinco escalones, y ninguno es gris: todos llevan una gota de azul dentro. Un gris neutro al lado del turquesa se ve sucio; con el azul dentro, el fondo parece parte del mismo sistema en vez de una ausencia de color. */ --ink: #000000; /* el lienzo. Negro puro, sin disculpas */ --ink-1: #05070B; --ink-2: #0A0E16; --ink-3: #111725; --ink-4: #1A2233; /* ── La tinta clara ─────────────────────────────────────────────────────── Blanco frío, nunca #FFF. Sobre negro puro el blanco puro vibra y cansa; bajarlo dos puntos y tirarlo al azul lo asienta. */ --ice: #EAF1FF; --ice-80: rgba(234, 241, 255, .80); --ice-62: rgba(234, 241, 255, .62); --ice-45: rgba(234, 241, 255, .45); --ice-28: rgba(234, 241, 255, .28); --ice-14: rgba(234, 241, 255, .14); --ice-08: rgba(234, 241, 255, .08); --ice-04: rgba(234, 241, 255, .04); /* En CSS `transparent` es rgba(0,0,0,0) — negro transparente. Interpolarlo con la tinta clara pasa la mezcla por grises y deja una banda sucia. Esta variable existe para no volver a caer en eso. */ --ice-0: rgba(234, 241, 255, 0); /* ── Degradados ─────────────────────────────────────────────────────────── El de la marca va a 120°: la misma diagonal del icono. */ --aurora: linear-gradient(120deg, var(--teal) 0%, var(--cyan) 46%, var(--blue) 100%); --aurora-flat: linear-gradient(90deg, var(--teal), var(--blue)); --aurora-halo: radial-gradient(60% 60% at 30% 20%, rgba(0, 214, 194, .55), rgba(0, 214, 194, 0) 70%), radial-gradient(60% 60% at 75% 70%, rgba(59, 91, 255, .55), rgba(59, 91, 255, 0) 70%); --aurora-veil: linear-gradient(120deg, rgba(0, 214, 194, .16), rgba(59, 91, 255, .16)); /* Velo que sienta cualquier fotografía sobre el negro. Se aplica encima de la foto, no sobre ella con `filter`: filtrar una imagen a pantalla completa cuesta un repintado por fotograma si algo se mueve; una capa no. */ --photo-veil: linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.34) 20%, rgba(0,0,0,.50) 48%, rgba(0,0,0,.76) 74%, rgba(0,0,0,.97) 100%); /* ── Vidrio ─────────────────────────────────────────────────────────────── Cuatro tintes. El cuerpo lleva algo de azul para que el cristal pertenezca a la paleta y no parezca un plástico gris pegado encima. */ --glass-body: rgba(18, 26, 44, .52); --glass-body-2: rgba(10, 14, 22, .74); --glass-edge: rgba(234, 241, 255, .16); --glass-sheen: rgba(234, 241, 255, .30); --glass-blur: 18px; --glass-sat: 170%; /* ── Tipografía ─────────────────────────────────────────────────────────── Unbounded para la marca y los titulares: es una display geométrica que aguanta tamaños absurdos sin deshacerse. Outfit para leer. */ --font-display: 'Unbounded', 'Outfit', system-ui, sans-serif; --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; /* La escala es fluida, no por saltos: entre 380px y 1600px de ancho cada tamaño interpola. Un titular de portada no puede tener el mismo cuerpo en un móvil que en un monitor. */ /* Cuánto mide MAIDROP de ancho, en múltiplos de su cuerpo: 5.90 en Unbounded 900 con -.055em de interletraje. De aquí sale el tamaño del nombre, así que hay que volver a medirlo si cambia la fuente, el interletraje o el número de letras. Para medirlo bien hacen falta dos cuidados, y los dos me costaron un número equivocado: esperar a `document.fonts.ready` (si no, se mide la fuente de repliegue) y NO medir el nombre de la portada, que va montado sobre el zoom del scroll y devuelve su ancho ya escalado. El del cierre está quieto y es el que dice la verdad. */ --mega-ratio: 5.92; /* ▸ EL TAMAÑO DEL NOMBRE. Es el % del ancho de pantalla que ocupa MAIDROP. Baja este número para achicarlo: 95 sangra de borde a borde, 80 lo deja claramente metido, 65 lo vuelve un titular normal. No pases de 96: el poco aire que queda es lo que evita que la P toque el canto. */ --mega-fill: 85; /* Solo el repliegue para navegadores sin unidades de contenedor. El cuerpo bueno se calcula en `.wordmark` con `cqi`; aquí se pide menos ancho a propósito, porque `vw` incluye la barra de desplazamiento y ese margen de más es lo único que evita que la última letra se salga. */ --t-mega: clamp(2.6rem, 15.2vw, 26rem); --t-h1: clamp(2.4rem, 6.4vw, 6rem); --t-h2: clamp(1.9rem, 4.2vw, 3.6rem); --t-h3: clamp(1.2rem, 1.9vw, 1.6rem); --t-lead: clamp(1.05rem, 1.45vw, 1.3rem); --t-body: clamp(.95rem, 1.1vw, 1.05rem); --t-micro: .74rem; /* ── Ritmo ──────────────────────────────────────────────────────────────── */ --wrap: min(92vw, 78rem); --gutter: clamp(1.2rem, 4vw, 3rem); --section: clamp(6rem, 14vh, 11rem); --r-sm: .7rem; --r-md: 1.2rem; --r-lg: 2rem; --r-xl: 2.6rem; --r-pill: 999px; /* ── Curvas ─────────────────────────────────────────────────────────────── Nada aquí es `ease`. La entrada tiene un empujón; la salida frena sola. */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.32, .72, 0, 1); --dur: .8s; } /* La página es negra por definición: no hay modo claro y no lo va a haber. Se declara aquí para que el navegador pinte los sobredesplazamientos, las barras y los formularios en el mismo negro y no aparezca un flash blanco. */ :root { color-scheme: dark; }