/* ───────────────────────────────────────────────────────────────────────── Prepstellar — landing (spec: docs/superpowers/specs/2026-07-17-prepstellar-landing-design.md) Skin ÚNICA: Observatory (oscura). Los tokens son espejo de `lib/theme/skin.dart` (kObservatorySkin) — cambiarlos aquí SIN cambiarlos allí desincroniza marca y web. Regla heredada intacta: el ORO (--gold) es EXCLUSIVO del reclamo premium/CTA. ───────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Playfair Display'; src: url('assets/playfair.woff2') format('woff2'); font-weight: 400 900; font-display: swap; /* el texto se ve desde el primer frame, sin FOIT */ } :root { /* Superficies (kObservatorySkin) */ --bg1: #0C0E16; --bg2: #12151F; --bg3: #171B27; --scaffold: #0E111A; --card: #161A26; /* Tinta */ --ink: #EDE7D6; --ink-soft: #A8AEC0; --ink-mute: #878D9E; --label: #E0B85C; /* Oro — SOLO premium/CTA */ --gold: #D9B75A; --gold-soft: #F3E1A6; --gold-deep: #C2972F; --gold-btn-ink: #3A2C08; /* Acción no-premium: invertida (relleno crema, texto navy) */ --primary: #EDE7D6; --on-primary: #1A2238; --edge: #2A3145; --success: #77C083; --danger: #D08A63; --r-card: 18px; --r-tile: 16px; --r-btn: 13px; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wrap: 1120px; --gut: clamp(20px, 5vw, 40px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* El color base vive en : queda transparente para que el cielo (canvas fijo, z-index 0) se vea DETRÁS de toda la página, no solo del hero. */ html { background: var(--scaffold); } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── El cielo, global ────────────────────────────────────────────────────── Fijo al viewport y detrás de todo. Al ser `fixed` el campo NO hace parallax ni se repite: es un cielo quieto sobre el que se desplaza el contenido, que es justo como se comporta en la app. */ #stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } /* Todo el contenido va por encima del cielo. */ .nav, main, .footer { position: relative; z-index: 1; } h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; } p { margin: 0; } a { color: inherit; } .wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; } /* Eyebrow: versalitas con tracking (spec Observatory §2) */ .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; } /* ── Nav ───────────────────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gut); background: color-mix(in srgb, var(--scaffold) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.scrolled { border-bottom-color: var(--edge); } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-brand img { width: 26px; height: 29px; } .nav-brand span { font-family: var(--serif); font-size: 19px; font-weight: 700; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-size: 14px; color: var(--ink-soft); text-decoration: none; transition: color .2s; } .nav-links a:hover { color: var(--ink); } /* `.nav-links a` (0,1,1) le gana a `.btn-gold` (0,1,0) y le robaba el color al botón → texto gris sobre oro, ilegible. Se le devuelve su tinta espresso. */ .nav-links a.btn-gold, .nav-links a.btn-gold:hover { color: var(--gold-btn-ink); } @media (max-width: 720px) { .nav-links a:not(.btn-sm) { display: none; } } /* ── Botones ───────────────────────────────────────────────────────────── */ /* Dorado = reclamo premium. Gradiente compartido del spec Observatory §3. */ .btn-gold { display: inline-block; padding: 15px 30px; border: 0; cursor: pointer; border-radius: var(--r-btn); background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--gold-btn-ink); font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; text-decoration: none; text-align: center; box-shadow: 0 6px 22px rgba(217, 183, 90, .22); transition: transform .18s, box-shadow .18s, filter .18s; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217, 183, 90, .32); filter: brightness(1.04); } .btn-gold:active { transform: translateY(0); } .btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; } /* Acción NO-premium: crema sobre navy (nunca oro) */ .btn-ghost { display: inline-block; padding: 14px 26px; border: 1px solid var(--edge); border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; transition: border-color .2s, background .2s; } .btn-ghost:hover { border-color: var(--ink-mute); background: var(--bg3); } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gut) 80px; /* Gradiente radial con centro en bg3 (spec Observatory §3: "gradiente centro=bg3"). Translúcido: deja pasar el cielo, más denso en el centro para que el wordmark no compita con las estrellas. */ background: radial-gradient(120% 90% at 50% 42%, color-mix(in srgb, var(--bg3) 84%, transparent) 0%, color-mix(in srgb, var(--bg2) 76%, transparent) 45%, color-mix(in srgb, var(--bg1) 62%, transparent) 100%); } .hero-inner { position: relative; z-index: 2; max-width: 780px; } .hero-logo { width: clamp(96px, 15vw, 132px); height: auto; margin-bottom: 26px; } /* ── La S se traza, como en la splash ────────────────────────────────────── Port de `_ConstellationPainter` (lib/splash_screen.dart): la línea se dibuja en 1900 ms con Curves.easeInOut (= cubic-bezier(.42,0,.58,1)) y cada estrella hace "pop" (r 8.12 → 5.6, o sea scale 1.45 → 1) en el instante en que la punta la alcanza. Los --d de cada estrella salen de INVERTIR esa curva: el trazo acelera en el centro, así que delays lineales se desincronizarían. Todo en CSS: sin JS, la S aparece igual (fill-mode: both). */ /* OJO: el fill/filter de las estrellas van como ATRIBUTO en el SVG, no aquí. En una hoja externa, url(#h-star) se resuelve contra el propio CSS y no encuentra el gradiente → el relleno cae al negro por defecto de SVG. */ .js .cst .cst-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cst-draw 1900ms cubic-bezier(.42, 0, .58, 1) both; } .js .cst .cst-star { /* Sin esto, `scale` toma como origen el (0,0) del viewBox y las estrellas saldrían disparadas en diagonal en vez de crecer sobre sí mismas. */ transform-box: fill-box; transform-origin: center; transform: scale(1.45); opacity: 0; animation: cst-pop 130ms ease-out both; animation-delay: var(--d); } .js .cst .cst-dust { animation: cst-fade 900ms ease-out both; } @keyframes cst-draw { to { stroke-dashoffset: 0; } } @keyframes cst-pop { from { transform: scale(1.45); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes cst-fade { from { opacity: 0; } to { opacity: .26; } } /* Sin animación: la marca se ve entera de entrada, no a medio trazar. */ @media (prefers-reduced-motion: reduce) { .js .cst .cst-line { stroke-dashoffset: 0; animation: none; } .js .cst .cst-star { transform: none; opacity: 1; animation: none; } .js .cst .cst-dust { animation: none; } } /* Wordmark: degradado crema→oro, igual que la splash de la app. ⚠️ El nombre de la marca NUNCA puede quedar invisible. El truco del gradiente recortado al texto exige que TODO salga bien; si el recorte falla y el texto ya está en transparente, la marca desaparece (pasó en el móvil de Oriol, 2026-07-17 — clásico de Safari iOS). Por eso: 1. el color sólido es el estado base, no el excepcional; 2. solo se pasa a transparente DENTRO de @supports, y con -webkit-text-fill-color explícito, que es lo que Safari mira de verdad (sin él, `color: transparent` no basta y el texto se esfuma). */ .wordmark { font-family: var(--serif); font-weight: 700; font-size: clamp(46px, 9vw, 88px); letter-spacing: -.015em; color: var(--ink); /* base: crema sólido, siempre legible */ margin-bottom: 18px; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .wordmark { background: linear-gradient(105deg, var(--ink) 12%, var(--gold-soft) 48%, var(--gold) 72%, var(--ink) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .tagline { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 30px; } .hero-lead { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-soft); max-width: 620px; margin: 0 auto 36px; } .hero-lead strong { color: var(--ink); font-weight: 600; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 20px; font-size: 13.5px; color: var(--ink-mute); } .scroll-hint { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; z-index: 2; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } } /* ── Secciones ─────────────────────────────────────────────────────────── */ .section { padding: clamp(72px, 10vw, 120px) 0; } .section-head { max-width: 720px; margin-bottom: 52px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 18px; } .section-head p { color: var(--ink-soft); font-size: 18px; } /* Bandas alternas: translúcidas para que el cielo siga viéndose detrás, pero lo bastante densas para no robarle contraste al texto (verificado AA). */ .alt { background: color-mix(in srgb, var(--bg1) 86%, transparent); border-block: 1px solid var(--edge); } /* ── Contraste: banco de preguntas vs academia ─────────────────────────── */ .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 780px) { .versus { grid-template-columns: 1fr; } } .vs-card { padding: 30px; border-radius: var(--r-card); border: 1px solid var(--edge); } .vs-card.them { background: transparent; } .vs-card.us { background: color-mix(in srgb, var(--card) 92%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); } .vs-card h3 { font-size: 21px; margin-bottom: 16px; } .vs-card.them h3 { color: var(--ink-mute); } .vs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .vs-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; } .vs-list .mark { flex: none; width: 18px; text-align: center; font-weight: 700; } .them .vs-list li { color: var(--ink-mute); } .them .mark { color: var(--danger); } .us .mark { color: var(--success); } /* ── Pilares ───────────────────────────────────────────────────────────── */ .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 18px; } .pillar { padding: 28px 24px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--edge); border-radius: var(--r-card); transition: transform .22s, border-color .22s; } .pillar:hover { transform: translateY(-4px); border-color: var(--ink-mute); } .pillar .ico { width: 30px; height: 30px; margin-bottom: 16px; stroke: var(--primary); fill: none; stroke-width: 1.6; } .pillar h3 { font-size: 18px; margin-bottom: 9px; } .pillar p { font-size: 14.5px; color: var(--ink-soft); } /* ── Bloques con vídeo ─────────────────────────────────────────────────── */ .media { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--edge); isolation: isolate; } .media video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Overlay navy: el vídeo es TEXTURA, nunca protagonista — mantiene la paleta */ .media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 62%, transparent) 0%, color-mix(in srgb, var(--bg1) 78%, transparent) 100%); } .media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } @media (max-width: 900px) { .media-split { grid-template-columns: 1fr; gap: 30px; } } .media-split .media { aspect-ratio: 16 / 11; } .media-copy h2 { font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 18px; } .media-copy p { color: var(--ink-soft); margin-bottom: 14px; } /* Banda de vídeo a lo ancho */ .band { position: relative; overflow: hidden; border-block: 1px solid var(--edge); } .band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .band::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 88%, transparent), color-mix(in srgb, var(--bg1) 74%, transparent)); } .band-inner { position: relative; z-index: 2; padding: clamp(76px, 9vw, 116px) 0; text-align: center; } .band-inner h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 18px; } .band-inner p { color: var(--ink-soft); max-width: 620px; margin-inline: auto; font-size: 17.5px; } /* ── Catálogo por vendor ───────────────────────────────────────────────── */ .vendors { display: grid; gap: 16px; } .vendor { background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--edge); border-radius: var(--r-card); padding: 26px 28px; } .vendor-head { display: flex; align-items: baseline; gap: 13px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--edge); } /* Vendors en TEXTO, nunca con su logo (CLAUDE.md §8: evitar sugerir endorsement) */ .vendor-head h3 { font-size: 20px; } .vendor-head .count { font-size: 13px; color: var(--ink-mute); margin-left: auto; } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--bg2) 86%, transparent); font-size: 13.5px; color: var(--ink-soft); transition: border-color .2s, color .2s; } .chip:hover { border-color: var(--ink-mute); color: var(--ink); } .chip .code { color: var(--ink-mute); font-size: 12.5px; margin-left: 5px; } /* ── Waitlist ──────────────────────────────────────────────────────────── */ .waitlist { text-align: center; } .wl-card { max-width: 620px; margin: 0 auto; padding: clamp(32px, 5vw, 52px); background: color-mix(in srgb, var(--card) 90%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); border-radius: var(--r-card); box-shadow: 0 18px 60px rgba(0, 0, 0, .35); } .wl-form { display: flex; gap: 11px; margin: 26px 0 16px; } @media (max-width: 560px) { .wl-form { flex-direction: column; } } .wl-form input[type=email] { flex: 1; padding: 15px 18px; background: color-mix(in srgb, var(--bg1) 88%, transparent); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-btn); font-family: var(--sans); font-size: 16px; /* 16px evita el zoom automático de iOS */ transition: border-color .2s; } .wl-form input[type=email]::placeholder { color: var(--ink-mute); } .wl-form input[type=email]:focus { outline: none; border-color: var(--gold); } .wl-form input[type=email][aria-invalid=true] { border-color: var(--danger); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */ .wl-consent { font-size: 13px; color: var(--ink-mute); } .wl-consent a { color: var(--ink-soft); } .wl-msg { margin-top: 16px; font-size: 15px; min-height: 22px; } .wl-msg.ok { color: var(--success); } .wl-msg.err { color: var(--danger); } button[disabled] { opacity: .6; cursor: progress; } /* ── Footer ────────────────────────────────────────────────────────────── */ .footer { background: color-mix(in srgb, var(--bg1) 90%, transparent); border-top: 1px solid var(--edge); padding: 56px 0 34px; } .footer-grid { display: flex; justify-content: space-between; gap: 34px; flex-wrap: wrap; margin-bottom: 34px; } .footer-brand { display: flex; align-items: center; gap: 11px; } .footer-brand img { width: 30px; height: 33px; } .footer-brand span { font-family: var(--serif); font-size: 20px; font-weight: 700; } .footer-links { display: flex; gap: 22px; flex-wrap: wrap; } .footer-links a { font-size: 14px; color: var(--ink-soft); text-decoration: none; } .footer-links a:hover { color: var(--ink); text-decoration: underline; } .footer-legal { font-size: 12.5px; color: var(--ink-mute); line-height: 1.75; border-top: 1px solid var(--edge); padding-top: 24px; } .footer-legal p + p { margin-top: 7px; } /* ── Páginas de texto (método, legales) ────────────────────────────────── */ .page { padding: 140px 0 90px; } /* La columna es una HOJA que flota sobre el cielo. Sin este velo el texto se apoyaría directamente en el canvas y una estrella detrás de un glifo lo dejaba en 1.34 de contraste (medido) — ilegible y con aspecto de suciedad. El cielo sigue viéndose alrededor de la hoja, que es donde luce. */ .page-narrow { width: min(100% - var(--gut) * 2, 760px); margin-inline: auto; background: color-mix(in srgb, var(--scaffold) 92%, transparent); border: 1px solid var(--edge); border-radius: var(--r-card); padding: clamp(28px, 5vw, 56px); } .page h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 12px; } .page .updated { color: var(--ink-mute); font-size: 14px; margin-bottom: 46px; } .page h2 { font-size: 25px; margin: 44px 0 16px; } .page h3 { font-size: 19px; margin: 28px 0 10px; } .page p, .page li { color: var(--ink-soft); } .page p + p { margin-top: 14px; } .page ul, .page ol { padding-left: 22px; margin: 14px 0; } .page li { margin-bottom: 9px; } .page a { color: var(--gold-soft); } .page strong { color: var(--ink); } .page table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; } .page th, .page td { text-align: left; padding: 11px 13px; border: 1px solid var(--edge); } .page th { background: var(--bg2); color: var(--ink); font-family: var(--sans); } .page td { color: var(--ink-soft); } .callout { padding: 20px 24px; margin: 26px 0; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--edge); border-left: 3px solid var(--label); border-radius: var(--r-tile); } .callout p { color: var(--ink-soft); font-size: 15px; } /* ── Reveal on scroll ──────────────────────────────────────────────────── */ /* El contenido NUNCA depende de JS para verse: solo se oculta si `.js` está en (lo pone un script inline del ). Sin JS —bloqueado, fallido o aún cargando— todo se ve de entrada, que es como debe degradar una web. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* Accesibilidad: foco visible en todo lo interactivo */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; z-index: 100; padding: 12px 20px; background: var(--card); color: var(--ink); border: 1px solid var(--gold); border-radius: var(--r-btn); text-decoration: none; } .skip:focus { left: var(--gut); top: 12px; }