/* MT-SPIKE-2 (rebase) · Fase A — vidro líquido flutuante sobre o globo carimbado. * Colocação FIXADA pelo Designer (via A, âncora orbe-globo-livre-padrao.html): * chat/PERGUNTAR = rail ESQUERDO (left:22 top:22 bottom:22) com estrutura de diálogo * (mensagens acima, campo em baixo); controlos = BAIXO-CENTRO; * prosa longa = FORA do rail, recolhível «sobre esta base» como conteúdo de PÁGINA. * A PÁGINA rola na vertical (globo fixo por trás); a roda pertence à página. */ :root { --verde: #2E9E5B; --warn-ink: #ffd98a; /* paleta selada do globo Designer */ --navy: #060E1F; --horiz: #0B1730; --surf: #13233F; --luz: #E8EEF8; --luzs: #9DB2CE; --ouro-c: #E2B14D; /* vidro líquido (a técnica da referência, nos nossos tokens) */ --vidro: rgba(9,16,30,.62); --vidro-borda: rgba(190,208,240,.16); --vidro-claro: rgba(232,238,248,.05); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--luz); background: var(--navy); line-height: 1.5; overflow: hidden; /* ACTO 3: a app ocupa 100dvh em duas colunas; nada rola a janela */ } /* ── ACTO 3 · AS DUAS COLUNAS IRMÃS (spec §1) ──────────────────────────────── A conversa (largura fixa, esquerda) e o mundo (o resto, direita), no mesmo flex. Nunca sobrepostas: é isto que dá ao globo espaço próprio. */ .app { display: flex; height: 100dvh; width: 100vw; align-items: stretch; } .chat { flex: 0 0 auto; width: min(420px, 36vw); min-width: 320px; display: flex; flex-direction: column; min-height: 0; padding: 22px 20px; gap: 14px; box-sizing: border-box; overflow: hidden; background: var(--horiz); border-right: 1px solid rgba(157,178,206,.14); } .stage { flex: 1 1 auto; position: relative; min-width: 0; overflow: hidden; } /* o mundo tem coluna própria: o palco deixa de ser `fixed` sobre a janela e passa a ocupar o seu lado. É isto que a versão anterior não tinha. */ #atmosfera { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 94% 84% at 50% 44%, var(--horiz), var(--navy) 78%); } #palco { position: absolute; inset: 0; z-index: 0; overflow: hidden; } #palco canvas { position: absolute; inset: 0; display: block; cursor: grab; } #palco canvas:active { cursor: grabbing; } #palco.sem-webgl { display: flex; align-items: center; justify-content: center; } .globo-fallback { max-width: 42ch; text-align: center; color: var(--luzs); font-size: 14px; padding: 16px; } /* ── vidro líquido — a moldura flutuante ── */ .lg { background: var(--vidro); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--vidro-borda); border-radius: 18px; box-shadow: 0 18px 50px -22px rgba(0,0,0,.7), inset 0 1px 0 var(--vidro-claro); } .erro { position: fixed; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%); padding: 12px 14px; background: rgba(138,31,31,.92); color: #fff; border-radius: 10px; font-weight: 600; } /* ── A CABEÇA da conversa (dentro da coluna .chat) ── */ .rail-cabeca { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; } .lab-chip { align-self: flex-start; padding: 3px 9px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro-c); background: rgba(226,177,77,.10); border: 1px solid rgba(226,177,77,.28); border-radius: 100px; } .rail-titulo { margin: 2px 0 0; font-size: 17px; line-height: 1.2; /* UMA linha lógica — título curto, não header */ } /* ── O REPOUSO na conversa (spec §2): saudação · aparato a um gesto · quatro perguntas ── */ .v2-saudacao { flex: 0 0 auto; margin: 0; font-size: 15px; line-height: 1.55; color: var(--luz); } /* o aparato «Graus de certeza», fechado por defeito (mockup :59-63, :254) */ .v2-graus { flex: 0 0 auto; } .v2-graus > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); } .v2-graus > summary::-webkit-details-marker { display: none; } .v2-graus > summary .chev { transition: transform .2s; } .v2-graus[open] > summary { color: var(--luz); } .v2-graus[open] > summary .chev { transform: rotate(180deg); } .v2-graus .sobre-corpo { padding: 2px 2px 6px; } /* as quatro perguntas — perguntas INTEIRAS, alvo mínimo 44px (44, não 42: herda-se a forma, não o defeito) */ .v2-perguntas { flex: 0 0 auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .v2-pergunta { width: 100%; text-align: left; font: inherit; font-size: 13.5px; line-height: 1.45; min-height: 44px; color: var(--luz); background: rgba(19,35,63,.55); cursor: pointer; border: 1px solid rgba(157,178,206,.20); border-radius: 12px; padding: 11px 14px; } .v2-pergunta:hover { background: rgba(19,35,63,.85); border-color: rgba(157,178,206,.38); } /* área de MENSAGENS — ocupa o meio, cresce, e assenta o conteúdo EM BAIXO (a mais recente junto ao campo). Rola só quando há mensagens a mais (barra visível = pista honesta); vazia em repouso. */ /* A1 — a conversa assenta em baixo QUANDO CABE (o `margin-top:auto` no 1.º filho empurra-a para o fundo), e ROLA a partir do topo quando não cabe (a viagem ancora cada beat pelo princípio, não pelo fim como um chat). Sem `justify-content:flex-end`, que prendia tudo ao fundo e escondia o topo do beat novo no telemóvel. */ .ask-orbe-mensagens { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; display: flex; flex-direction: column; gap: 8px; } .ask-orbe-mensagens > :first-child { margin-top: auto; } .mensagens-vazio { margin: 0; color: var(--luzs); font-size: 13px; } .mensagens-vazio em { opacity: .85; } /* campo de escrita — EM BAIXO da coluna (estrutura de diálogo). Alvo mínimo 44px. */ #ask-orbe-form, .ask-orbe-barra { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; } .ask-orbe-input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 10px 14px; min-height: 44px; color: var(--luz); background: rgba(157,178,206,.08); border: 1px solid var(--vidro-borda); border-radius: 100px; } .ask-orbe-input::placeholder { color: var(--luzs); } .ask-orbe-input:disabled { opacity: .7; cursor: not-allowed; } .ask-orbe-submit { flex: 0 0 auto; width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 100px; background: rgba(226,177,77,.9); cursor: pointer; } .ask-orbe-submit:disabled { opacity: .5; cursor: not-allowed; } .ask-orbe-nota { flex: 0 0 auto; margin: 0; font-size: 12px; color: var(--luzs); } /* disclaimer sob o campo, como num chat */ /* ── controlos de vista — DENTRO do palco, baixo-centro (spec §1, mockup :179). Já não fixos à janela: vivem na coluna do mundo e não disputam banda com a conversa. ── */ .view-controls { position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 14px; max-width: calc(100% - 36px); transition: transform .28s ease; } /* o punho-seta (dec. Fundadora, 13-Set) — recolhe/mostra o painel. Ocupa a sua própria linha no topo do painel; ao recolher, o painel desliza para baixo e só a faixa do punho fica à vista. */ /* especificidade acima de `.view-controls button` (0,1,1) — senão o punho vestia-se de botão */ .view-controls .vista-toggle { order: -1; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; min-height: 0; margin: -2px 0 2px; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; color: var(--luz); } .view-controls .vista-toggle:hover { background: transparent; } .view-controls .vista-toggle > .vista-seta { width: 26px; height: 26px; box-sizing: border-box; padding: 4px; border-radius: 100px; background: rgba(157,178,206,.12); border: 1px solid var(--vidro-borda); transition: transform .28s ease; } .view-controls .vista-toggle:hover > .vista-seta { background: rgba(157,178,206,.22); } .view-controls.recolhido { transform: translateX(-50%) translateY(calc(100% - 34px)); } .view-controls.recolhido .vista-seta { transform: rotate(180deg); } .view-controls .lbl-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--luzs); } .view-controls button { font: inherit; font-size: 13px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--vidro-borda); background: rgba(157,178,206,.08); color: var(--luz); border-radius: 100px; cursor: pointer; } .view-controls button:hover { background: rgba(157,178,206,.18); } .view-controls button.on { background: rgba(226,177,77,.16); border-color: rgba(226,177,77,.4); } #ctl-zoom-in, #ctl-zoom-out { width: 44px; min-height: 44px; padding: 0; text-align: center; font-size: 15px; } .view-controls .sep { width: 1px; height: 20px; background: var(--vidro-borda); } /* pista discreta — dentro do palco, canto inferior direito */ .pista-toque { position: absolute; z-index: 3; bottom: 12px; right: 18px; margin: 0; font-size: 11px; color: var(--luzs); opacity: .7; pointer-events: none; max-width: 34ch; text-align: right; } /* ── PROSA LONGA fora do rail: conteúdo de PÁGINA (à direita do rail, para não colidir). Colapsado → main == 100vh (globo respira, sem scroll). Expandido → main cresce → a PÁGINA rola. ── */ /* CURA 1 (drag): a camada de página é transparente e cobre a área do globo — NÃO deve capturar o rato, senão intercepta o mousedown antes do canvas e o arrastar-para-rodar morre. pointer-events:none aqui, e :auto só no recolhível, devolve o arrastar ao globo sem tocar na roda (que continua a rolar a página). */ .pagina { position: relative; z-index: 1; min-height: 100vh; box-sizing: border-box; pointer-events: none; margin-left: calc(min(35vw, 340px) + 44px); margin-right: 22px; padding: 22px 0 120px; } .sobre-base { max-width: 62ch; padding: 4px 18px 6px; pointer-events: auto; } .sobre-base > summary { list-style: none; cursor: pointer; padding: 12px 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); display: flex; align-items: center; gap: 8px; } .sobre-base > summary::-webkit-details-marker { display: none; } .sobre-base > summary .chev { transition: transform .2s; } .sobre-base[open] > summary .chev { transform: rotate(180deg); } .sobre-corpo { padding: 4px 2px 14px; } .sobre-corpo h3 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--luzs); } .sobre-corpo p { margin: 4px 0 0; font-size: 13.5px; color: var(--luz); } .sobre-corpo strong { color: var(--luz); } .sub-desc { color: var(--luzs) !important; } .estado-render { margin-top: 14px !important; font-size: 12px !important; color: var(--luzs) !important; font-variant-numeric: tabular-nums; } .metodo-fim { margin-top: 16px !important; font-size: 12px !important; color: var(--luzs) !important; text-align: center; opacity: .7; } /* teclado — foco visível em tudo o que é accionável (o palco/canvas não prende foco) */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--luz); outline-offset: 2px; border-radius: 6px; } /* reduced-motion — o globo arranca PARADO (o JS não auto-roda: autoSpin=false, slerp/zoom saltam). O loop corre para a interacção manual, mas nada se move sozinho. O CSS zera animações/transições. */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ── ESTREITO/mobile (spec §7): o globo EM CIMA, a conversa em baixo — duas FAIXAS que não se sobrepõem. As três ALTA do telemóvel curam-se por vizinhança, nunca por z-index (mockup :230-233): os controlos vivem no palco (faixa de cima), a resposta no fio da conversa (faixa de baixo), e o aparato abre no palco — nunca cobre a resposta. ── */ @media (max-width: 820px) { .app { flex-direction: column; } /* o GLOBO em cima, a conversa em baixo (mockup :230-233). O `order` é obrigatório: em coluna, sem ele, a ordem do DOM punha a conversa em cima — o inverso do aprovado. */ .stage { order: 1; flex: 0 0 46dvh; min-height: 46dvh; } .chat { order: 2; width: auto; min-width: 0; flex: 1 1 auto; border-right: 0; border-top: 1px solid rgba(157,178,206,.14); } .pista-toque { display: none; } /* não disputa banda com o crédito; no toque a pista de rato não serve */ /* O painel VISTA sai do CENTRO para a LATERAL direita, em coluna e compacto (spec 0eeee79b): no globo pequeno do telemóvel, centrado comia-lhe o meio (a fricção da Fundadora). À direita, o centro — onde a escala assenta — fica livre. O globo é o herói. Começa ABERTO (escolha dela); o punho recolhe-o para FORA à direita, deixando só a sua faixa. */ .view-controls { left: auto; right: 8px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-end; flex-wrap: nowrap; gap: 6px; padding: 8px; max-width: 42vw; } .view-controls .lbl-sec, .view-controls .sep { display: none; } /* compacto: sem o rótulo «Vista» nem o separador */ .view-controls button { font-size: 12px; padding: 8px 12px; } /* alvo 44px pela min-height herdada; botão dimensiona-se ao texto (não à coluna) */ #ctl-zoom-in, #ctl-zoom-out { align-self: stretch; } /* os glifos ＋/− ficam largura de coluna */ .view-controls .vista-toggle { flex: 0 0 auto; } .view-controls.recolhido { transform: translateY(-50%); max-width: none; padding: 4px; } /* recolhe sem ficar off-canvas */ .view-controls.recolhido > :not(.vista-toggle) { display: none; } .view-controls.recolhido .vista-seta { transform: rotate(-90deg); } /* a seta aponta para trazer de volta */ body.viagem .stage { flex-basis: 38dvh; min-height: 38dvh; } body.viagem .chat { padding: 12px 14px; gap: 8px; } body.viagem .ask-orbe-mensagens { gap: 6px; } body.viagem .cv-entry { padding: 13px 14px; margin: 8px 0; } body.viagem .cv-prosa { font-size: 15px; line-height: 1.54; } body.viagem .cv-perg { font-size: 19px; line-height: 1.12; } body.viagem .cv-src { margin-top: 9px; padding-top: 8px; } body.viagem .viagem-barra { margin-top: 6px; gap: 8px; } body.viagem .viagem-seguinte { padding: 9px 16px; } body.viagem .viagem-sair { padding: 8px 12px; } } @media (max-width: 420px) and (max-height: 620px) { body.viagem .stage { flex-basis: 32dvh; min-height: 32dvh; } body.viagem .chat { padding: 10px 12px; gap: 7px; } body.viagem .ask-orbe-barra { gap: 6px; } body.viagem .cv-entry { padding: 11px 12px; } body.viagem .cv-prosa { font-size: 14.5px; line-height: 1.48; } body.viagem .cv-perg { font-size: 18px; } } /* ── COSTURA · a superfície onde os retidos se dizem (contrato, ponto 4) ────────── Sóbria de propósito: é registo, não ornamento. Alcançável por teclado (o
é nativo), e o texto nunca depende só de cor. */ /* O SCROLL INTERNO SAIU. Eu tinha posto `overflow-y:auto` aqui para o rail deixar de transbordar, e troquei um defeito por outro: no telemóvel o registo ficava atrás de um scroll de 81 px sem barra visível — 111 px escondidos, zero pontos à vista, um nome cortado a meio. A cura verdadeira é de contentor, não de CSS: o registo mudou-se para a página. Régua que fica: CHROME DE ALTURA FIXA SÓ RECEBE CONTEÚDO DE ALTURA FIXA. */ .costura-retidos { margin: .6rem 0 .8rem; font-size: .78rem; line-height: 1.5; color: var(--tinta-fraca, #9fb0dd); } /* O registo vive na `.pagina`, que tem `pointer-events:none` para não roubar o arrastar ao globo. Sem isto o `` dos retidos deixava de ser clicável — trocava-se um defeito de layout por um de alcance. */ #costura-registo { pointer-events: auto; max-width: 62ch; padding: 4px 18px 6px; } .costura-titulo { margin: 0 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--luzs); font-weight: 600; } .costura-retidos p { margin: .2rem 0; } .costura-retidos b { color: var(--tinta, #eaf0ff); } .costura-retidos .av { color: var(--ouro, #e2b45c); } .costura-retidos details { margin-top: .4rem; } .costura-retidos summary { cursor: pointer; padding: .18rem 0; } .costura-retidos summary:focus-visible { outline: 2px solid var(--ouro, #e2b45c); outline-offset: 2px; } .costura-retidos ul { margin: .3rem 0 0; padding-left: 1rem; } .costura-retidos li { margin: .35rem 0; } .costura-retidos .ids { display: block; opacity: .72; font-size: .92em; word-break: break-word; } .costura-retidos code { font-size: .92em; } .costura-retidos .nao-carregou { color: var(--ouro, #e2b45c); } /* R5 do contrato de desenho — as etiquetas, em texto real, alcançáveis sem hover. */ .costura-retidos .pousam { list-style: none; margin: .1rem 0 .35rem; padding: 0; } .costura-retidos .pousam li { margin: .32rem 0; } .costura-retidos .estado-do-grupo { margin: .5rem 0 0; opacity: .78; font-size: .92em; } /* PROIBIÇÃO Nº15 DO CONTRATO — oculta-se por RECORTE, NUNCA por `display:none` nem `visibility:hidden`. Os dois escondem do leitor de ecrã tanto como do olho: a forma (d) construída com qualquer deles daria o EXACTO OPOSTO do que a curou — o olho veria a cabeça uma vez e o ouvido perderia o estado por completo, ficando pior do que antes. É uma classe de defeito que, por definição, não se vê a olho nenhum. */ .costura-retidos .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Arrastar para rodar estava a SELECCIONAR o texto da interface (o Olho apanhou o painel inteiro em realce depois de um arrasto). Bloqueia-se onde se arrasta. ⚠️ EXCEPÇÃO deliberada: o `#costura-retidos` MANTÉM a selecção. É texto citável e é o único caminho para quem copia — bloqueá-lo ali seria acessibilidade a menos. */ body, #palco, #palco canvas, .view-controls, .pista-toque { -webkit-user-select: none; user-select: none; } /* a coluna da conversa é texto citável — selecciona-se. O arrastar-para-rodar vive no palco, que continua bloqueado; a conversa é irmã, não fica no caminho do gesto. */ .chat, .chat *, #costura-retidos, #costura-retidos * { -webkit-user-select: text; user-select: text; } /* PONTE-001 — as mensagens do «Perguntar ao Orbe». Sóbrias: é diálogo, não cartão. */ .ask-orbe-msg { margin: .5rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--luz); } .ask-orbe-msg p { margin: .2rem 0; } .ask-orbe-msg code { font-size: .92em; color: var(--luzs); } .ask-orbe-msg .ask-orbe-pergunta { color: var(--luzs); font-style: italic; } /* o grau (glifo + palavra do OrbeGrau) INLINE na resposta — sem isto o `.ep-glyph` da página-entidade renderiza a 328px (um disco branco a encher a coluna). Dimensiona-se ao texto. */ .ask-orbe-msg .ep-grau { display: inline-flex; align-items: center; gap: .3em; } .ask-orbe-msg .ep-glyph { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; } /* ── A SUPERFÍCIE DE PRECISÃO (PONTE-001 · ACTO 2a) ─────────────────────────── Nasce `hidden`: em repouso o Orbe é o globo. Só aparece quando o chat a chama. */ /* ⚠️ O `hidden` GANHA AO DISPLAY, e tem de ganhar sempre. Achado da retina da Fundadora, 11-Set-2026: o `#voo` tinha `hidden="true"` e desenhava-se na mesma, porque `display:flex` vence o `display:none` do agente do utilizador. A primeira coisa que o visitante via era um botão a convidá-lo a «↩ Voltar à vista» — de uma vista que ele nunca tinha deixado. É a doença deste arco na camada do desenho: uma declaração que sobrevive ao seu estado. E desta vez não era um comentário nem uma nota — era o que estava no ecrã. A regra é global de propósito: qualquer elemento desta página que se declare escondido fica escondido, e nenhum `display:` futuro o pode desmentir em silêncio. */ [hidden] { display: none !important; } /* O aparato convocado abre SOBRE o globo, mas DENTRO do palco (spec §1) — não fixo à janela: pertence à coluna do mundo, e nunca cobre a coluna da conversa. */ .voo { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 84px; top: auto; width: auto; max-height: calc(100% - 120px); overflow-y: auto; padding: 16px 18px 12px; border-radius: 18px; display: flex; flex-direction: column; gap: 10px; } .voo-palco { display: flex; justify-content: center; } .voo-palco canvas { display: block; } .voo-titulo { margin: 0; font-size: 1.05rem; color: var(--luz); } .voo-momento { margin: .1rem 0 .4rem; font-size: .95rem; color: var(--luz); } .voo-grau { margin: .3rem 0; display: flex; flex-direction: column; gap: .2rem; } .voo-coord { margin: .3rem 0; font-size: .82rem; color: var(--luzs); } .voo-sub { font-size: .76rem; color: var(--luzs); } .voo-ausente { margin: .3rem 0; font-size: .82rem; color: var(--ouro-c); } .voo-failclosed { margin: .3rem 0; font-size: .82rem; color: var(--warn-ink); } .voo-fontes { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .78rem; color: var(--luzs); } .voo-fontes li { margin: .15rem 0; } .voo-rodape { display: flex; justify-content: flex-end; } .voo-rodape .btn { font: inherit; font-size: 13px; min-height: 44px; padding: 8px 16px; cursor: pointer; color: var(--luz); background: rgba(157,178,206,.08); border: 1px solid var(--vidro-borda); border-radius: 100px; } .voo-rodape .btn:hover { background: rgba(157,178,206,.18); } /* O glifo do grau vem de grau.js e pinta-se com a cor herdada — nunca redefinida aqui. */ .voo .ep-grau { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--luz); } .voo .ep-glyph { width: 15px; height: 15px; flex: 0 0 auto; } @media (max-width: 820px) { .voo { inset: auto 0 0 0; width: auto; max-height: 78dvh; border-radius: 18px 18px 0 0; } } /* TEXTURA-001 — a atribuição fica À VISTA. Dentro do palco (é da textura do palco). */ .credito-textura { position: absolute; z-index: 3; left: 18px; bottom: 12px; margin: 0; font-size: 11px; color: var(--luzs); opacity: .72; pointer-events: none; letter-spacing: .01em; } .credito-textura b { color: var(--luz); font-weight: 600; } @media (max-width: 820px) { .credito-textura { left: 12px; bottom: 8px; font-size: 10px; } } /* ══════════════════════════════════════════════════════════════════════════════ ACTO 3 · A VIAGEM NARRADA (Fase 1) Os tokens da conversa (OrbeConversa) remapeados para a LÍNGUA DA CASA, na coluna opaca (spec dos beats, Designer). Zero toques no componente e na prosa; só o palco. Escopo `body.viagem` E `.chat`: a viagem TOMA a coluna, e a conversa de repouso VIVE nela — a figura-no-chat da oferta («oferecer não assumir») é a MESMA `cv-entry`, e a coluna de repouso partilha a paleta escura (os tokens `--luz/--surf/--ouro-c` são os mesmos), pelo que os valores são idênticos: estender o escopo não muda a pintura, só a torna alcançável fora da viagem (spec §2, «cv-entry na língua da casa»). ═════════════════════ */ body.viagem, .chat { --cv-title: var(--luz); --cv-text: var(--luzs); --cv-prosa: var(--luzs); --cv-muted: var(--luzs); --cv-faint: #7E92AC; --cv-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --cv-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --cv-link: #7AA8FF; /* --az: o nome-porta, distinto do corpo */ --cv-card-bg: var(--surf); /* #13233F — um degrau acima da coluna opaca */ --cv-card-border: rgba(157,178,206,.14); /* a borda que a .chat já usa */ --cv-line: rgba(157,178,206,.14); --cv-gold: var(--ouro-c); /* na coluna o ouro é destaque EDITORIAL, não grau */ --cv-nota-color: var(--ouro-c); --cv-chip-bg: rgba(157,178,206,.10); --cv-chip-dot: rgba(157,178,206,.55); /* ornamento neutro — NÃO um sinal de grau (vigia do Designer) */ --cv-door-hover: rgba(226,177,77,.16); --cv-av-bg: radial-gradient(circle at 50% 38%, #1d3354, #0e1d36); --cv-gold-tint: rgba(226,177,77,.12); --cv-gold-border: rgba(226,177,77,.4); /* dimensões (ritmo, agnósticas da superfície) — mantêm-se, com a prosa a 16/1.66 (Designer) */ --cv-prosa-size: 16px; --cv-prosa-lh: 1.66; --cv-prosa-mb: 13px; --cv-perg-size: 21px; --cv-perg-mb: 10px; --cv-eyebrow-mb: 7px; --cv-entry-pad: 17px 18px; --cv-entry-mb: 14px; } /* a PROSA da narração em serif (Cormorant), como a voz e a pergunta do mesmo bloco — a coerência pede-o (decisão do Designer). Regra de PALCO, não toca o componente `conversa.js`. */ body.viagem .cv-prosa { font-family: var(--cv-serif); } /* o selo do grau usa o GLIFO verdadeiro do OrbeGrau (não o ponto genérico) — currentColor neutro, ~14px. O DEV substitui o `.d` pelo glifo no palco; aqui só o tamanho. O Iconograma lê os seis. */ body.viagem .cv-selo .ep-glyph { width: 14px; height: 14px; flex: 0 0 auto; } /* a barra da viagem — «seguinte» (primário, cheio) + «↩ Sair da viagem» (secundário, sempre alcançável). Assenta em baixo da coluna (o fio cresce e empurra-a). Foco visível herda a régua global (`:focus-visible`), logo o teclado vê onde está. */ .viagem-barra { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .viagem-seguinte { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 11px 22px; cursor: pointer; color: #08101e; background: var(--ouro-c); border: 0; border-radius: 100px; } .viagem-seguinte:hover { filter: brightness(1.06); } .viagem-seguinte.fim { color: var(--luz); background: rgba(226,177,77,.14); border: 1px solid rgba(226,177,77,.5); } .viagem-sair { font: inherit; font-size: 13px; min-height: 44px; padding: 8px 14px; cursor: pointer; color: var(--luzs); background: transparent; border: 1px solid var(--vidro-borda); border-radius: 100px; } .viagem-sair:hover { color: var(--luz); background: rgba(157,178,206,.10); } /* A pergunta continua activa durante a travessia. A barra mantém o lugar conhecido e a resposta contextual entra no mesmo fio sem apagar a escala. */ body.viagem .ask-orbe-barra { margin-top: 8px; } .viagem-pergunta-contextual { border-left: 2px solid var(--vidro-borda); padding-left: 12px; } /* Imagem por escala, apenas no mobile e só depois do contrato fail-closed em viagem.js. Não há fallback decorativo: sem proveniência/carimbo, este nó nem nasce. */ .viagem-imagem-beat { margin: 12px 0 0; } .viagem-imagem-beat img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; } .viagem-imagem-beat figcaption { margin-top: 6px; color: var(--luzs); font-size: 12px; line-height: 1.45; } .viagem-frota-coda { margin: 14px 0 10px; padding: 10px 12px; border: 1px solid rgba(226,177,77,.25); border-radius: 12px; background: rgba(6,14,31,.24); color: var(--luzs); font-size: 12.5px; line-height: 1.45; } .viagem-frota-coda p { margin: 7px 0 0; } .viagem-frota-coda b { color: var(--luz); } .viagem-frota-fonte { color: var(--luzs); opacity: .78; } .viagem-frota-icones { display: flex; align-items: flex-end; gap: 7px; opacity: .72; } .viagem-frota-coda span { position: relative; display: inline-block; width: 26px; height: 18px; border-bottom: 5px solid var(--navy); } .viagem-frota-coda span::before, .viagem-frota-coda span::after { content: ""; position: absolute; bottom: 5px; width: 0; height: 0; border-bottom: 13px solid var(--luz); } .viagem-frota-coda span::before { left: 6px; border-left: 5px solid transparent; border-right: 5px solid transparent; } .viagem-frota-coda span::after { left: 15px; border-left: 4px solid transparent; border-right: 4px solid transparent; } .viagem-frota-coda .nau { width: 30px; height: 21px; } .viagem-frota-coda .nau::before { left: 4px; border-bottom-width: 16px; } .viagem-frota-coda .nau::after { left: 15px; border-bottom-width: 18px; } .viagem-frota-coda .gasta { transform: translateY(1px) rotate(-1.5deg); } .viagem-frota-coda .gasta::before { opacity: .82; clip-path: polygon(50% 0, 100% 100%, 18% 78%, 0 100%); } .viagem-frota-coda .gasta::after { opacity: .74; clip-path: polygon(50% 0, 100% 100%, 24% 70%, 0 100%); } .viagem-frota-coda .perdida { opacity: .22; filter: grayscale(1); } .viagem-frota-coda .perdida::before, .viagem-frota-coda .perdida::after { border-bottom-color: var(--luzs); } .viagem-frota-coda .perdida::before { transform: rotate(-8deg); } .viagem-frota-coda .perdida::after { transform: rotate(7deg); } .cv-tempo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0 12px; } .cv-tempo-passo { min-width: 0; padding: 7px 8px; border: 1px solid rgba(157,178,206,.22); border-radius: 10px; background: rgba(6,14,31,.18); color: var(--luzs); font-size: 11px; line-height: 1.25; } .cv-tempo-passo b { display: block; margin-top: 2px; color: var(--luz); font-size: 12px; font-weight: 650; } .cv-tempo-passo small { display: block; margin-top: 2px; color: var(--luzs); opacity: .76; } .cv-tempo-rotulo { text-transform: uppercase; letter-spacing: .08em; opacity: .72; } .cv-tempo-passo.quebrado { border-style: dashed; background: linear-gradient(135deg, rgba(6,14,31,.12), rgba(226,177,77,.08)); } /* ── ACTO 3 · A FIGURA NO CHAT (deriva da ficha) + as fontes com «ver» ───────────── Escopo `.chat`, não `body.viagem`: a figura-no-chat vive no MESMO stream (`#ask-orbe-response`, dentro da `.chat`) na viagem E na conversa de repouso (o chip «Quem foi» da oferta). Uma regra, os dois palcos — a mesma `cv-entry`, uma fonte só. */ .chat .viagem-figura .cv-perg { font-style: normal; } /* um nome lê-se direito, não em itálico */ .chat .fig-qual { font-size: 12px; color: var(--luzs); margin: -4px 0 8px; } .chat .fig-grau { margin: 6px 0; } .chat .fig-grau .ep-grau { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--luzs); } .chat .fig-grau .ep-glyph { width: 14px; height: 14px; flex: 0 0 auto; } .chat .fig-aberta { font-size: 12px; color: var(--ouro-c); } /* candidato → «pergunta em aberto», nunca cru */ .chat .fig-prova { margin: 8px 0 0; padding: 6px 0 6px 12px; border-left: 2px solid var(--vidro-borda); font-family: var(--cv-serif); font-style: italic; font-size: 14px; color: var(--luzs); line-height: 1.5; } /* o link «ver o documento» das fontes (coda + figura + a oferta) — a régua do ouro leva ao documento */ .chat .cv-src-link { color: #7AA8FF; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; } .chat .cv-src-link:hover { color: var(--luz); } .chat .cv-src-sep { opacity: .5; } /* ── A OFERTA da conversa (spec «oferecer não assumir» §2) — chips do que EXISTE ──────── Chips na língua da casa: pílulas alcançáveis por teclado (são