/* * 19_tour.css — ONDA O · tour guiado e primeiros passos * ═══════════════════════════════════════════════════════════════════════════ * Número 19 para carregar DEPOIS de 10_componentes (botão, cartão, medidor) * e de 12_modal (a folha de baixo, cuja gramática o balão repete no celular), * e ANTES de 20_navegacao — nada aqui reescreve o menu. * * Duas coisas moram aqui: * · O TOUR: fundo, foco (o "holofote" sobre o alvo) e balão com seta. CSS * puro; quem calcula onde fica é `tour_controller.js`, por CSSOM (a CSP * recusa `style=` inline, não `element.style`). Só `transform`/`opacity` * animam — `top`/`left` mudam de valor a cada passo, e não em transição. * · OS PRIMEIROS PASSOS: o checklist que toma o lugar dos seis zeros no * painel do admin enquanto a conta está vazia. * * `prefers-reduced-motion` já zera toda animação e transição em 02_base.css. * O bloco no fim desta folha só tira o que sobraria SEM tempo — o * deslocamento inicial da entrada, que sem transição vira um salto. */ /* ═══ O TOUR ══════════════════════════════════════════════════════════════ */ /* A camada inteira. Fica no fim do , acima de tudo que não é o flash (o flash avisa "conta criada" e precisa passar por cima do tour). */ .tour-camada { position: fixed; inset: 0; z-index: var(--z-modal); pointer-events: none; } /* O fundo é TRANSPARENTE: quem escurece a página é a sombra do foco (abaixo). Ele existe para segurar o ponteiro — a página está `inert`, mas `inert` não impede a roda do mouse nem o toque de rolar, e isso é desejado. */ .tour-fundo { position: absolute; inset: 0; pointer-events: auto; } /* O holofote: uma caixa vazia sobre o alvo, com uma sombra do tamanho da tela. É o truque clássico e é o único que não briga com `z-index` de ancestral nenhum — o alvo continua onde está, no seu contexto de empilhamento, e é o que está EM VOLTA dele que escurece. */ .tour-foco { position: fixed; border-radius: var(--raio-3); box-shadow: 0 0 0 2px var(--cor-marca), 0 0 0 100vmax rgb(4 6 12 / 0.62); /* SEM transição de top/left/width/height (MARCA.md §2: só transform e opacity animam). O holofote salta para o alvo novo; quem entra animado é o balão. */ pointer-events: none; } /* O alvo em si: só uma folga de rolagem, para o `scrollIntoView` não colar o elemento no cabeçalho grudado. Abaixo de 64rem o menu do admin é uma fita grudada SOB o cabeçalho (3.5rem + 3.5rem): a folga sobe, senão o título do alvo fica atrás da fita. */ .tour-alvo { scroll-margin: 5rem 0 6rem } @media (max-width: 63.999rem) { .tour-alvo { scroll-margin-top: 9rem } } /* ── O balão ─────────────────────────────────────────────────────────── */ .tour-balao { position: fixed; /* 24rem, e não 22: é o que cabe "Pular o tour · Anterior · Próximo" numa linha só — em 22 o "Pular" ficava órfão em cima dos outros dois. */ width: min(24rem, calc(100vw - 2 * var(--esp-3))); padding: var(--esp-4) var(--esp-5) var(--esp-5); border: 1px solid var(--borda); border-radius: var(--raio-3); background: var(--fundo-elevado); color: var(--texto); box-shadow: var(--sombra-3); pointer-events: auto; outline: none; } .tour-balao:focus-visible { border-color: var(--cor-marca-tenue) } /* A entrada, reiniciada a cada passo pelo controller (`.tour-camada--trocando` sai e volta). Só transform/opacity. */ .tour-camada--trocando .tour-balao { animation: tour-balao-entra var(--tempo-normal) var(--curva-entrada) both; } @keyframes tour-balao-entra { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.98) } } /* A seta: um quadrado girado, com a mesma borda e o mesmo fundo do balão. O controller diz de que lado ela fica (`data-posicao` = onde o BALÃO está em relação ao alvo) e onde ao longo da borda (`left`/`top`). */ .tour-balao__seta { position: absolute; width: 14px; height: 14px; background: var(--fundo-elevado); border: 1px solid var(--borda); transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; } .tour-balao[data-posicao="baixo"] .tour-balao__seta { top: 0; border-right: 0; border-bottom: 0; } .tour-balao[data-posicao="cima"] .tour-balao__seta { top: 100%; border-left: 0; border-top: 0; } .tour-balao[data-posicao="direita"] .tour-balao__seta { left: 0; border-right: 0; border-top: 0; } .tour-balao[data-posicao="esquerda"] .tour-balao__seta { left: 100%; border-left: 0; border-bottom: 0; } /* Solto no canto (alvo grande demais para caber um balão ao lado): sem seta. */ .tour-balao[data-posicao="solto"] .tour-balao__seta { display: none } .tour-balao__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-2); } .tour-balao__passo { font-size: var(--texto-xs); font-weight: var(--peso-medio); letter-spacing: var(--espacamento-etiqueta); text-transform: uppercase; color: var(--cor-marca); } .tour-balao__fechar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; /* 44 px: era 36, abaixo do alvo de toque */ height: 2.75rem; margin: calc(-1 * var(--esp-3)) calc(-1 * var(--esp-3)) 0 0; border: 0; border-radius: var(--raio-redondo); background: transparent; color: var(--texto-tenue); cursor: pointer; transition: background var(--tempo-rapido) var(--curva-padrao), color var(--tempo-rapido) var(--curva-padrao); } .tour-balao__fechar:hover { background: var(--fundo-fundo); color: var(--texto) } .tour-balao__fechar:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px } .tour-balao__titulo { margin: 0 0 var(--esp-2); font-size: var(--texto-lg); font-weight: var(--peso-forte); letter-spacing: var(--espacamento-titulo); line-height: var(--altura-apertada); } .tour-balao__texto { margin: 0 0 var(--esp-4); font-size: var(--texto-sm); line-height: var(--altura-normal); color: var(--texto-suave); } .tour-balao__acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); } .tour-balao__navegar { display: inline-flex; gap: var(--esp-2); margin-left: auto } .tour-balao__acoes .botao { min-height: 2.5rem; white-space: nowrap; padding-inline: var(--esp-3) } .tour-balao__acoes [hidden] { display: none } /* ── No celular: folha de baixo, como o modal (MARCA.md §3) ──────────── */ @media (max-width: 39.999rem) { .tour-balao { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--raio-4) var(--raio-4) 0 0; border-bottom: 0; padding-bottom: calc(var(--esp-5) + env(safe-area-inset-bottom, 0px)); } .tour-balao__seta { display: none } .tour-camada--trocando .tour-balao { animation: tour-folha-sobe var(--tempo-lento) var(--curva-entrada) both; } @keyframes tour-folha-sobe { from { opacity: 0; transform: translate3d(0, 24px, 0) } } .tour-balao__acoes .botao { min-height: var(--alvo) } .tour-balao__navegar { flex: 1; justify-content: flex-end } } /* ── "Ver de novo": um link discreto no CABEÇALHO da tela, e não item de menu. O `.tour` mora nas ações do `.tela-cabecalho` (admin: `acoes:` do partial; aluno: filho direto), então aqui não há margem — o cabeçalho é quem alinha. */ .tour__rever { margin: 0 } .tour__rever-botao { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo); margin-inline: calc(-1 * var(--esp-3)); padding: 0 var(--esp-3); border: 0; background: transparent; color: var(--texto-tenue); font: inherit; font-size: var(--texto-sm); cursor: pointer; border-radius: var(--raio-2); transition: color var(--tempo-rapido) var(--curva-padrao); } .tour__rever-botao:hover { color: var(--cor-marca) } .tour__rever-botao:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px } /* ═══ OS PRIMEIROS PASSOS ═════════════════════════════════════════════════ Cinco cartões-linha na ordem que faz a conta funcionar. O passo ATUAL (o primeiro pendente) tem a cor da marca e o botão primário; os feitos recolhem; os seguintes esperam. Quando os cinco fecham, o bloco celebra — uma vez, com a curva elástica, que é a única do sistema para "deu certo". */ .primeiros-passos { margin-bottom: var(--esp-6); padding: var(--esp-5); border: 1px solid var(--cor-marca-tenue); border-radius: var(--raio-3); background: linear-gradient(135deg, var(--cor-marca-suave), transparent 55%), var(--fundo-cartao); box-shadow: var(--sombra-1); } .primeiros-passos__cabecalho { display: flex; flex-direction: column; gap: var(--esp-4); margin-bottom: var(--esp-5); } @media (min-width: 40rem) { .primeiros-passos__cabecalho { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .primeiros-passos__titulo { margin: 0 0 var(--esp-1); font-size: var(--texto-xl); letter-spacing: var(--espacamento-titulo); } .primeiros-passos__chamada { margin: 0; max-width: var(--largura-leitura); font-size: var(--texto-sm); color: var(--texto-suave); } .primeiros-passos__progresso { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-1); min-width: 9rem; } .primeiros-passos__contagem { font-size: var(--texto-2xl); font-weight: var(--peso-forte); line-height: 1; color: var(--cor-marca); } .primeiros-passos__progresso .medidor { width: 100% } .primeiros-passos__lista { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; } .passo { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-2) var(--esp-4); align-items: center; padding: var(--esp-4); border: 1px solid var(--borda-tenue); border-radius: var(--raio-2); background: var(--fundo-cartao); transition: border-color var(--tempo-rapido) var(--curva-padrao), background var(--tempo-rapido) var(--curva-padrao); } @media (min-width: 40rem) { .passo { grid-template-columns: auto 1fr auto } } .passo__marca { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--raio-redondo); border: 1px solid var(--borda-forte); color: var(--texto-tenue); font-weight: var(--peso-forte); font-size: var(--texto-sm); } .passo__corpo { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0 } .passo__titulo { font-weight: var(--peso-medio) } .passo__texto { font-size: var(--texto-sm); color: var(--texto-tenue) } .passo__acao { grid-column: 1 / -1; justify-self: start } @media (min-width: 40rem) { .passo__acao { grid-column: auto; justify-self: end } } /* O atual: é o que a pessoa faz agora. */ .passo--atual { border-color: var(--cor-marca-tenue); background: var(--fundo-elevado); } .passo--atual .passo__marca { border-color: var(--cor-marca); background: var(--cor-marca-forte); color: var(--cor-marca-contraste); } /* O feito: recolhe, mas fica — é a prova de que aconteceu. */ .passo--feito { background: transparent } .passo--feito .passo__marca { border-color: var(--cor-aprovado); background: var(--cor-aprovado-suave); color: var(--cor-aprovado); } .passo--feito .passo__titulo { color: var(--texto-suave) } .passo--feito .passo__texto { color: var(--texto-tenue) } /* O que ainda espera. */ .passo--pendente { opacity: 0.85 } /* ── A celebração: uma vez, discreta ──────────────────────────────────── A marca de cada passo pulsa em sequência com a curva elástica — o único lugar do sistema onde ultrapassar o destino significa "deu certo" (03_movimento.css). Sem confete, sem mascote: a régua é a mesma do resto. */ .primeiros-passos--celebrando { border-color: var(--cor-aprovado) } .primeiros-passos--celebrando .primeiros-passos__contagem { color: var(--cor-aprovado) } .primeiros-passos--celebrando .passo__marca { animation: passo-celebra var(--tempo-lento) var(--curva-elastica) both; animation-delay: calc(var(--tempo-rapido) * var(--passo-ordem, 0)); } .primeiros-passos--celebrando .passo:nth-child(1) .passo__marca { --passo-ordem: 1 } .primeiros-passos--celebrando .passo:nth-child(2) .passo__marca { --passo-ordem: 2 } .primeiros-passos--celebrando .passo:nth-child(3) .passo__marca { --passo-ordem: 3 } .primeiros-passos--celebrando .passo:nth-child(4) .passo__marca { --passo-ordem: 4 } .primeiros-passos--celebrando .passo:nth-child(5) .passo__marca { --passo-ordem: 5 } @keyframes passo-celebra { from { transform: scale(0.6); opacity: 0 } to { transform: none; opacity: 1 } } .primeiros-passos__fechar { margin: var(--esp-5) 0 0; text-align: right } /* ═══ MOVIMENTO REDUZIDO ══════════════════════════════════════════════════ 02_base.css já zera as durações. O que sobra é o estado INICIAL das animações `both`, que sem tempo viraria um quadro deslocado: aqui elas simplesmente não existem. */ @media (prefers-reduced-motion: reduce) { .tour-camada--trocando .tour-balao, .primeiros-passos--celebrando .passo__marca { animation: none } }