/* ============================================================ boot.css — Cortina de boot (terminal) Carregado ANTES do style.css, de propósito: em é render-blocking, então a moldura já está estilizada no primeiro paint e o site nunca pisca antes de ser coberto. Tudo aqui é inerte até o script do colocar .booting no . Sem JS, sem .booting: nada aparece, nada é pausado. ============================================================ */ #boot { display: none; } html.booting #boot { display: flex; position: fixed; inset: 0; z-index: 10001; /* acima do .noise (9999) e do .skip-link (10000) */ align-items: center; justify-content: center; padding: 24px; background: #0e0e0e; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* Trava o scroll e segura a entrada do hero enquanto a cortina está no ar. O .hero-anim dispara sozinho no parse do CSS; sem pausar, a animação de entrada acontece atrás da cortina e ninguém vê. */ html.booting body { overflow: hidden; } html.booting .hero-anim { animation-play-state: paused; } /* ----- Janela ----- Duas camadas: a externa é a borda (fundo claro), a interna é o fundo. Um clip-path só, com border, deixaria a diagonal do chanfro sem traço. */ .boot-window { width: 100%; max-width: 560px; padding: 1px; background: rgba(236, 233, 228, 0.22); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); opacity: 0; transform: translateY(8px); animation: bootWindowIn 420ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } .boot-window-inner { background: #101010; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); } @keyframes bootWindowIn { to { opacity: 1; transform: translateY(0); } } /* ----- Barra de título ----- */ .boot-titlebar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(236, 233, 228, 0.14); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(236, 233, 228, 0.55); } .boot-tag { color: var(--accent, #7c6aff); } .boot-host { flex: 1; } .boot-clock { font-variant-numeric: tabular-nums; } /* ----- Corpo ----- */ .boot-body { padding: 16px 14px 18px; font-size: clamp(11px, 3.1vw, 13px); line-height: 1.9; color: #ece9e4; } .boot-line { white-space: pre; overflow: hidden; } /* Linha chave/valor — é assim que CLI de verdade alinha (vite, npm, next): símbolo, rótulo em coluna fixa, valor ocupando o resto. O valor usa `flex: 1 1 0` (base 0) e não `auto`: com base auto a largura natural do texto entra na conta do encolhimento e o flexbox esprema o rótulo junto, mesmo sobrando espaço. Com base 0 o valor pega só a folga e, quando não cabe, vira reticências em vez de estourar a caixa. */ .boot-kv { display: flex; align-items: baseline; gap: 0.9ch; padding-left: 1ch; } /* 1.5ch, não 1ch: o ✓ cai num fallback não-monoespaçado e mede ~9.8px contra os ~7.1px de 1ch, encostando no rótulo. A coluna é uniforme em todas as linhas, então alargar não desalinha nada. */ .boot-kv .boot-sym { flex: none; width: 1.5ch; } .boot-kv .boot-key { flex: none; width: 9ch; color: #ece9e4; } .boot-kv .boot-val { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Linha em branco — terminal respira, e o espaçamento é o que separa o cabeçalho do npm da saída do servidor. */ .boot-gap { height: 0.95em; } /* ----- Paleta ANSI ----- Aproximação da paleta de terminal escuro (estilo GitHub Dark), não do accent do site. O accent fica no prompt, no cursor e no badge, que é onde a marca aparece sem descaracterizar o terminal. */ .c-dim { color: #6e7681; } .c-green { color: #3fb950; } .c-cyan { color: #39c5cf; } .c-text { color: #ece9e4; } .c-badge { color: var(--accent, #7c6aff); font-weight: 700; letter-spacing: 0.06em; } .boot-prompt { color: var(--accent, #7c6aff); } .boot-out-line { opacity: 0; animation: bootLineIn 220ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes bootLineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .boot-cursor { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.18em; background: var(--accent, #7c6aff); animation: bootBlink 1s steps(1) infinite; } @keyframes bootBlink { 50% { opacity: 0; } } /* ----- Saída ----- */ html.boot-exit #boot { animation: bootOut 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } html.boot-exit .boot-window { animation: bootWindowOut 400ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes bootOut { to { opacity: 0; } } @keyframes bootWindowOut { to { opacity: 0; transform: scale(0.98); } } /* ----- Telas estreitas ----- Devolve ~32px de largura útil pra caixa. Sem isso, num viewport de 320px a caixa cai pra ~242px e o label mais longo ("compilando 3+ anos de trabalho") entra em reticências. Com isso, os três cabem inteiros. */ @media (max-width: 480px) { html.booting #boot { padding: 12px; } .boot-titlebar { padding: 9px 10px; gap: 8px; } .boot-body { padding: 14px 10px 16px; } } /* ----- Movimento reduzido ----- O script do nem chega a adicionar .booting nesse caso; isto é só uma rede de segurança para não animar nada se ele for adicionado. */ @media (prefers-reduced-motion: reduce) { .boot-window, .boot-out-line, .boot-cursor, html.boot-exit #boot, html.boot-exit .boot-window { animation: none !important; opacity: 1 !important; transform: none !important; } }