/* Apresentação do produto — o que não cabe em utilitário do Tailwind. Carregado só em `landing.html`. A página é escura como o resto do site público, mas o conteúdo denso vive em FOLHAS claras (.folha) — o papel da marca, pousado sobre a mesa escura. Isso é a estrutura da identidade e não decoração: a papelaria do Beat é clara, o app é Nocturne, e a apresentação é o lugar onde os dois se encontram. */ .lp { --papel: #e9e8ef; --papel-2: #f7f7fb; --tinta: #17161c; --tinta-2: #4d495c; --regua: #d9d7e3; /* O roxo e o verde são os do orbe (brand/marca), não os do painel: quem desenha aqui é a marca, e o orb.js lê estas mesmas variáveis. */ --brand: #5b4bdb; --en: #0f6b53; --muted: #6f6b7d; --rule: #e4e2ec; } /* ── Tipografia ──────────────────────────────────────────────────────────── */ /* Display: a mesma equação tipográfica do wordmark — grotesca neutra em peso máximo com o tracking bem fechado (o logo é `800` com -0.045em). Uma display de caráter próprio brigava com a marca em vez de estendê-la. */ .lp-display { font-family: "Inter", "Lato", system-ui, sans-serif; font-weight: 900; letter-spacing: -0.045em; line-height: 1.0; text-wrap: balance; } /* Mono para número e rótulo. Não é enfeite de "tech": o produto mede tempo, o aluno é dev, e o nome da marca saiu de uma classe CSS (`.beat`). */ .lp-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: "tnum" 1; } .lp-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } /* ── A folha ─────────────────────────────────────────────────────────────── */ .folha { background: var(--papel); color: var(--tinta); border-radius: 1.75rem; /* Sombra de papel sobre mesa: curta e baixa, não halo difuso. */ box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 24px 60px -30px rgb(0 0 0 / 0.9); } .folha .lp-kicker { color: var(--muted); } .folha hr { border: 0; border-top: 1px solid var(--regua); } /* ── A janela: o vídeo, emoldurado como se fosse a câmera da daily ───────── */ .janela { position: relative; overflow: hidden; border-radius: 1.25rem; background: #0b0a0f; border: 1px solid rgb(255 255 255 / 0.1); } .janela video { display: block; width: 100%; height: 100%; object-fit: cover; } /* Vinheta: puxa o olho para o centro e deixa legível o que se sobrepõe. */ .janela::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(11 10 15 / 0.55) 100%), linear-gradient(180deg, transparent 45%, rgb(11 10 15 / 0.85) 100%); } /* ── O cronômetro: a assinatura em números ───────────────────────────────── */ .beat { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; } /* Enquanto corre é branco; ao travar vira o verde do inglês — a mesma convenção do painel, onde verde é "dentro da meta". */ .beat[data-estado="correndo"] { color: #fff; } .beat[data-estado="travado"] { color: #5fe3b0; } /* O orbe desenha num canvas quadrado; o host controla o tamanho. */ .orbe { display: grid; place-items: center; } .orbe canvas { display: block; } /* ── Movimento ───────────────────────────────────────────────────────────── */ /* O reveal é ENFEITE, e enfeite não pode esconder conteúdo: quem esconde é a classe `lp-js`, que o próprio landing.js põe no ao começar. Sem JS (ou com ele quebrado) todo bloco nasce visível. */ .lp-js .sobe { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .lp-js .sobe.dentro { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sobe { opacity: 1; transform: none; transition: none; } .janela video { display: none; } } /* ── Carrossel do hero ───────────────────────────────────────────────────── */ /* As duas chamadas ocupam a mesma célula do grid; a inativa continua no fluxo (para a altura ser a da maior) mas sai de vista e do alcance do teclado. */ .chamada { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s .6s; } .chamada.ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } /* As cenas se sobrepõem e trocam por fade. A regra vale para QUALQUER cena, não só as de dentro de `.janela`: escopada, ela deixou de valer quando o hero virou largura inteira, e as duas cenas ficaram visíveis ao mesmo tempo — a inativa (pausada, num quadro congelado) cobria a que estava tocando, e o hero parecia uma foto. */ .cena { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; } .cena.ativa { opacity: 1; } .ponto { width: 26px; height: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.18); transition: background-color .3s, width .3s; cursor: pointer; } .ponto:hover { background: rgb(255 255 255 / 0.35); } .ponto.ativo { width: 40px; background: var(--brand-300, #b48eff); } .ponto:focus-visible { outline: 2px solid var(--brand-300, #b48eff); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .chamada, .janela .cena { transition: none; } } /* ── Hero de largura inteira ─────────────────────────────────────────────── */ .hero .cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* O véu: escuro e opaco onde o texto vive, transparente onde a cena importa. Sem ele a display branca cai sobre a rua molhada e desaparece. */ .hero-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 10 15 / .92) 0%, rgb(11 10 15 / .74) 40%, rgb(11 10 15 / .12) 72%, transparent 100%), linear-gradient(180deg, rgb(11 10 15 / .45) 0%, transparent 32%, rgb(11 10 15 / .45) 100%); } /* O cronômetro mora no canto e não empurra o texto. */ .hero-cron { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 1; } @media (min-width: 768px) { .hero-cron { right: 3rem; bottom: 3rem; } } /* Em tela estreita a cena vira fundo de apoio: o texto é que precisa ler. */ @media (max-width: 767px) { .hero-veu { background: linear-gradient(180deg, rgb(11 10 15 / .72) 0%, rgb(11 10 15 / .88) 55%, rgb(11 10 15 / .96) 100%); } .hero-cron { display: none; } } @media (prefers-reduced-motion: reduce) { .hero .cena { display: none; } .hero-veu { background: #0b0a0f; } } /* O plano do silêncio é de câmera travada: sem um empurrão a imagem passa por foto e a pessoa acha que o vídeo não carregou. O zoom lento devolve a vida sem inventar movimento que a cena não tem. */ @keyframes lp-aproxima { from { transform: scale(1.0); } to { transform: scale(1.09); } } .hero .cena-viva { animation: lp-aproxima 6.6s ease-out infinite; transform-origin: 62% 45%; } @media (prefers-reduced-motion: reduce) { .hero .cena-viva { animation: none; } }