/* ================================================================ Lekto V3 — Execução de Avaliação (uma pergunta por vez). ---------------------------------------------------------------- Overlay full-bleed, sem chrome do app: o respondente vê uma pergunta e mais nada. A avaliação INTEIRA — capa, as perguntas e o fim — vive no fundo granular (gradiente imersivo + grão em overlay). Antes só a capa e o fim eram escuros e as perguntas voltavam ao branco: quem responde atravessava três ambientes numa sessão de doze minutos. Ver js/form-runner.js. ================================================================ */ .fmr { position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column; background: var(--lkt-gradient-immersive-radial); /* Os controles nativos acompanham: sem isto o popup do , o check da opção, o "Salvar e fechar". Sem isto seria corrigir uma cor de cada vez, em sessenta declarações, e a próxima regra escrita nasceria errada de novo. */ .fmr__regcard, .fmr__opt, .fmr__esc, .fmr__card { --theme-text-heading: var(--color-surface-deep); --theme-text-muted: var(--color-surface-dark); --theme-border-subtle: var(--color-surface-light); --theme-panel-border: var(--color-surface-light); --theme-surface-muted: var(--color-surface-pale); --fmr-papel: var(--color-surface-pale); --fmr-papel-alto: var(--color-surface-mist); /* O acento claro existia para vencer o roxo do degradê. Sobre branco os dois degraus COLAPSAM: o `-alto` no escuro era "superfície levantada, tinta um passo mais clara", e aqui as superfícies mal diferem (branco e o surface-mist acima). Fica o acento escuro nos dois — o cheio dá 4,5:1 raspando no número da escala, e raspar não é passar. */ --fmr-tinta: var(--color-accent-dark); --fmr-tinta-alto: var(--color-accent-dark); color: var(--theme-text-heading); } /* O grão vive ATRÁS do conteúdo (os irmãos são z-index: 1) e nunca sobre texto pequeno. Nas perguntas ele fica a meia força: presente o bastante para a superfície ser a mesma da capa, discreto o bastante para não competir com o que se lê. Cheio só nos momentos de marca. */ .fmr__grain { position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: var(--lkt-grain-strong); mix-blend-mode: overlay; transition: opacity var(--motion-dur-slow, .4s) ease; } .fmr.is-cover .fmr__grain { opacity: 1; } /* ---- barra de progresso ---- */ /* Uma regra só, agora que capa e perguntas são a mesma superfície. O preenchimento é branco, e não o acento: o --color-accent-pure sobre o degradê roxo quase não se distingue do trilho. */ .fmr__bar { position: relative; z-index: 1; height: 4px; background: var(--theme-surface-muted); flex-shrink: 0; } .fmr__barfill { display: block; height: 100%; width: 0; background: var(--color-essence-ivory); border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0; transition: width var(--motion-dur-slow, .4s) cubic-bezier(.22, 1, .36, 1); } /* ---- topo ---- */ .fmr__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; flex-shrink: 0; } .fmr__pos { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--theme-text-muted); } .fmr__close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--border-radius-circle, 50%); background: var(--theme-surface-muted); cursor: pointer; } .fmr__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; color: var(--theme-text-heading); } /* ---- palco ---- */ /* `safe center`, e não `center`: com o conteúdo mais alto que o palco, o centralizado empurra o topo para fora e a rolagem não alcança o que ficou acima — o enunciado sumia na pergunta de registros. `safe` centra enquanto cabe e alinha ao topo quando não cabe. */ .fmr__stage { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: safe center; justify-content: center; padding: 24px 24px 96px; } .fmr__q, .fmr__cover, .fmr__end { width: 100%; max-width: 640px; } /* A pergunta de registros é um espaço de trabalho, não um enunciado: o DECK usa o palco inteiro. Mas só ele — o cabeçalho, o escopo, o OK e a dica continuam na coluna de 640 centrada, exatamente onde caem nas outras seis perguntas. Antes a pergunta inteira abria para 1120px e o cabeçalho ia para a borda esquerda enquanto os cards ficavam no meio: o mesmo enunciado lido em dois eixos diferentes, que é o que fazia a tela parecer torta. O título encolhe por ORÇAMENTO VERTICAL, não por largura — é ele que come a altura de que os cards precisam. */ .fmr__q--amplo { max-width: none; } .fmr__q--amplo > .fmr__qhead, .fmr__q--amplo > .fmr__ok, .fmr__q--amplo > .fmr__hint--solo { width: 100%; max-width: 640px; margin-inline: auto; } /* O OK e a dica ganham de volta o recuo de 29px que o `margin-left` original dava e que o `margin-inline: auto` da linha acima precisou apagar para centrar a coluna. É o mesmo recuo do corpo das outras perguntas. */ .fmr__q--amplo > .fmr__ok, .fmr__q--amplo > .fmr__hint--solo { padding-left: 29px; } .fmr__q--amplo .fmr__qhead { margin-bottom: 16px; } .fmr__q--amplo .fmr__qtitle { font-size: 22px; } .fmr__q--amplo .fmr__qsub { margin-top: 5px; font-size: 14px; } .fmr__q--amplo .fmr__qbody { margin-left: 0; } .fmr__cover, .fmr__end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } /* fallback de entrada quando o GSAP não carregou */ @keyframes fmr-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .fmr__stage > .is-in { animation: fmr-in .3s cubic-bezier(.22, 1, .36, 1); } /* ---- capa e fim ---- */ .fmr__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--color-essence-ivory) 72%, transparent); } .fmr__covertitle { font-family: var(--font-display, inherit); font-size: 38px; font-weight: 800; line-height: 1.14; color: var(--color-essence-ivory); } .fmr__coversub { max-width: 46ch; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--color-essence-ivory) 82%, transparent); } .fmr__start { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 0 24px; font-size: 15.5px; font-weight: 800; color: var(--color-surface-deepest); border: 0; border-radius: var(--border-radius-pill); background: var(--color-essence-ivory); cursor: pointer; transition: transform var(--motion-dur-fast); } .fmr__start:hover { transform: translateY(-1px); } .fmr__start svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fmr__endic { display: grid; place-items: center; width: 62px; height: 62px; border-radius: var(--border-radius-circle, 50%); background: color-mix(in srgb, var(--color-essence-ivory) 14%, transparent); } .fmr__endic svg { width: 30px; height: 30px; fill: none; stroke: var(--color-essence-ivory); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ---- pergunta ---- */ .fmr__qhead { display: flex; gap: 14px; margin-bottom: 28px; } .fmr__qn { display: flex; align-items: center; gap: 2px; padding-top: 9px; font-size: 14px; font-weight: 700; color: var(--fmr-tinta); flex-shrink: 0; } .fmr__qn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fmr__qtitle { font-size: 27px; font-weight: 550; line-height: 1.28; color: var(--theme-text-heading); } .fmr__qtitle b, .fmr__qtitle strong { font-weight: 800; } /* NBSP no JS prende o asterisco à última palavra: sozinho numa linha ele lia como erro de layout. */ .fmr__req { color: var(--color-error-pure); } .fmr__qsub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--theme-text-muted); } .fmr__qbody { margin-left: 29px; } .fmr__q.is-falta .fmr__qbody { animation: fmr-shake .4s; } @keyframes fmr-shake { 10%, 90% { transform: translateX(-3px); } 30%, 70% { transform: translateX(5px); } 50% { transform: translateX(-5px); } } /* alternativas — a tecla-letra é o atalho, não decoração */ .fmr__opts { display: flex; flex-direction: column; gap: 10px; } .fmr__opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 14px; border: 1.5px solid var(--color-accent-pure); border-radius: var(--border-radius-sm); background: var(--fmr-claro); cursor: pointer; text-align: left; transition: background var(--motion-dur-fast), transform var(--motion-dur-fast); } .fmr__opt:hover { background: color-mix(in srgb, var(--color-accent-pure) 22%, var(--fmr-claro)); transform: translateX(2px); } .fmr__opt.is-sel { background: color-mix(in srgb, var(--color-accent-pure) 30%, var(--fmr-claro)); } .fmr__optkey { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; font-size: 12.5px; font-weight: 800; color: var(--fmr-tinta-alto); border: 1px solid color-mix(in srgb, var(--color-accent-pure) 60%, transparent); border-radius: var(--border-radius-nano); background: var(--fmr-papel-alto); } .fmr__optthumb { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--border-radius-nano); background: var(--theme-surface-muted); } .fmr__optthumb svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--theme-text-muted); } .fmr__opttxt { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--theme-text-heading); } .fmr__optcheck { flex-shrink: 0; opacity: 0; transition: opacity var(--motion-dur-fast); } .fmr__opt.is-sel .fmr__optcheck { opacity: 1; } .fmr__optcheck svg { width: 19px; height: 19px; fill: none; stroke: var(--fmr-tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Régua numa linha só (ver campoHTML em js/form-runner.js): `--fmr-esc-n` traz a contagem real, e as casas dividem a largura em vez de quebrar. */ .fmr__escala { display: grid; grid-template-columns: repeat(var(--fmr-esc-n, 11), minmax(0, 1fr)); gap: 8px; } .fmr__esc { display: grid; place-items: center; min-width: 0; height: 52px; font-size: 16px; font-weight: 700; color: var(--fmr-tinta); border: 1.5px solid var(--color-accent-pure); border-radius: var(--border-radius-sm); background: var(--fmr-claro); cursor: pointer; transition: background var(--motion-dur-fast), transform var(--motion-dur-fast); } .fmr__esc:hover { transform: translateY(-2px); } .fmr__esc.is-sel { background: var(--color-accent-pure); color: var(--color-essence-ivory); } .fmr__estrelas { display: flex; gap: 10px; } .fmr__estrela { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: var(--border-radius-sm); background: none; cursor: pointer; transition: transform var(--motion-dur-fast); } .fmr__estrela:hover { transform: scale(1.12); } .fmr__estrela svg { width: 38px; height: 38px; fill: none; stroke: var(--color-accent-pure); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .fmr__estrela.is-on svg { fill: var(--color-accent-pure); } .fmr__campo { width: 100%; max-width: 560px; font: inherit; font-size: 17px; color: var(--theme-text-heading); padding: 12px 2px; border: 0; border-bottom: 2px solid var(--theme-border-subtle); background: transparent; outline: none; resize: vertical; transition: border-color var(--motion-dur-fast); } .fmr__campo::placeholder { color: var(--theme-text-muted); } .fmr__campo:focus { border-bottom-color: var(--color-accent-pure); } .fmr__campo--data { max-width: 240px; } .fmr__upload { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; font-size: 15.5px; font-weight: 700; color: var(--fmr-tinta); border: 1.5px dashed var(--color-accent-pure); border-radius: var(--border-radius-sm); background: transparent; cursor: pointer; } .fmr__upload svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---- escolha com imagem: cards ---- */ .fmr__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; } .fmr__card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; border: 1.5px solid var(--color-accent-pure); border-radius: var(--border-radius-sm); background: var(--fmr-claro); cursor: pointer; transition: background var(--motion-dur-fast), transform var(--motion-dur-fast); } .fmr__card:hover { background: color-mix(in srgb, var(--color-accent-pure) 22%, var(--fmr-claro)); transform: translateY(-2px); } .fmr__card.is-sel { background: color-mix(in srgb, var(--color-accent-pure) 30%, var(--fmr-claro)); } .fmr__cardpic { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--theme-surface-muted); overflow: hidden; } .fmr__cardpic img { width: 100%; height: 100%; object-fit: cover; } .fmr__cardpic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--theme-text-muted); } .fmr__cardfoot { display: flex; align-items: center; gap: 9px; padding: 10px 11px; } .fmr__cardtxt { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--theme-text-heading); } .fmr__card.is-sel .fmr__optcheck { opacity: 1; } /* ---- lista vinda da atribuição ---- */ /* O recorte dito em voz alta antes das opções: sem ele a lista de sete nomes não explica por que são só sete, e é aí que se registra no aluno errado. */ .fmr__escopo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--fmr-tinta); } .fmr__escopo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* Vinte e oito alunos não cabem numa tela: a lista rola dentro de si, e a pergunta acima e o OK abaixo continuam onde estavam. */ .fmr__opts--lista { max-height: min(46vh, 400px); overflow-y: auto; padding-right: 4px; } .fmr__opts--lista .fmr__opt { min-height: 50px; } .fmr__optsub { flex-shrink: 0; font-size: 13px; color: var(--theme-text-muted); } /* Passando de doze não há letra para mostrar; o espaço fica, para os nomes não dançarem de um item para o outro. */ .fmr__optkey--vazia { border-color: transparent; background: transparent; } .fmr__vazio { display: flex; align-items: center; gap: 10px; max-width: 520px; font-size: 15px; color: var(--theme-text-muted); } .fmr__vazio svg { flex-shrink: 0; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ---- registros múltiplos ---- */ /* ---- registros múltiplos: carrossel coverflow ---- O registro em foco é formulário; os vizinhos são relance. A geometria vem do GSAP (js/form-runner.js, tabela COVER) e não daqui: é uma transformação por card, animada, e mantê-la num lugar só evita CSS e JS discordando sobre onde o card está. Aqui fica o que é forma, não posição. */ .fmr__carrossel { position: relative; width: 100%; /* Folga suficiente para o card em foco (≈380px) respirar, sem empurrar o enunciado e o botão de somar para fora do palco. */ min-height: clamp(320px, 46vh, 520px); display: flex; align-items: center; justify-content: center; perspective: 1400px; } .fmr__regcard { position: absolute; top: 50%; left: 50%; width: min(560px, 46vw, 88vw); margin: 0; /* a centralização é do GSAP (xPercent/yPercent em aplicarCoverflow); aqui só o fallback para o quadro anterior ao script assumir */ transform: translate(-50%, -50%); padding: 20px 22px; text-align: left; border: 1.5px solid var(--theme-border-subtle); border-radius: var(--border-radius-sm-plus); /* O fio de luz interno no topo saiu com o card escuro: sobre superfície quase branca ele não existe. Quem separa do palco agora é a própria claridade. */ background: var(--fmr-claro); } /* O card em foco é o único plano de trabalho: some com a sombra de camada e ganha a borda de destaque, para a diferença entre "editável" e "de relance" não depender só do tamanho. */ .fmr__regcard.is-foco { border-color: color-mix(in srgb, var(--color-accent-pure) 70%, transparent); background: var(--fmr-claro-alto); /* A sombra projetada FICA, ao contrário do que valia no escuro: card claro sobre palco escuro é justamente onde ela separa. */ box-shadow: 0 24px 48px -12px var(--color-opacity-superintense); max-height: min(72vh, 560px); overflow-y: auto; } /* Rodapé do card aberto. A linha de cima separa a ação do conteúdo, e o botão é pequeno de propósito: ele fecha o card, não envia a avaliação. */ .fmr__regfoot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--theme-border-subtle); } .fmr__regfechar { min-height: 38px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 800; color: var(--fmr-tinta-alto); border: 1.5px solid color-mix(in srgb, var(--color-accent-pure) 55%, transparent); border-radius: var(--border-radius-sm); background: transparent; cursor: pointer; transition: background var(--motion-dur-fast), border-color var(--motion-dur-fast); } .fmr__regfechar:hover { background: color-mix(in srgb, var(--color-accent-pure) 24%, transparent); border-color: var(--color-accent-pure); } .fmr__regfechar:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; } /* ALTURA FIXA no deck. Um baralho tem cartas do mesmo tamanho: com a altura vindo do conteúdo, um registro de duas linhas ficava mais baixo que os vizinhos e deixava aparecer a metade vazia da carta de trás — um retângulo sem nada no meio do leque. */ .fmr__regcard--relance { height: 238px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .fmr__regcard--relance:hover { border-color: var(--color-accent-soft); } .fmr__regcard--relance:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 3px; } /* O conteúdo encosta no lado que fica À VISTA. Sem isso, o card da direita mostrava o fim da frase — a faixa visível dele é a borda direita, e o texto começava lá atrás, escondido pelo card em foco. */ .fmr__regcard--esq { align-items: flex-start; text-align: left; } .fmr__regcard--dir { align-items: flex-end; text-align: right; } .fmr__regcard--dir .fmr__regchips { justify-content: flex-end; } .fmr__regcard--dir .fmr__regthumbs { justify-content: flex-end; } /* E o conteúdo se estreita até a faixa que sobra à vista (--relance-w, medida em js/form-runner.js). Encostar no lado certo não bastava: as linhas ainda tinham a largura do card inteiro e continuavam por baixo do card em foco. O piso de 96px é tipográfico — abaixo disso um chip deixa de ser legível, e aí é melhor o card sumir (FAIXA_MIN cuida disso) do que virar tarja. */ .fmr__regcard--relance > * { max-width: max(96px, var(--relance-w, 100%)); } .fmr__regtop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .fmr__regn { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--fmr-tinta-alto); border-radius: var(--border-radius-nano); background: var(--fmr-papel-alto); font-variant-numeric: tabular-nums; } /* ---- o card em foco: a observação manda ---- O campo grande não usa o sublinhado de 2px do .fmr__campo: numa caixa de várias linhas ele lê como input gigante. Superfície própria e anel de foco separam melhor — e é o que faz o campo parecer o lugar de trabalho, e não mais um campo entre outros. */ .fmr__campo--obs { display: block; width: 100%; max-width: none; font-size: 19px; line-height: 1.5; font-weight: 500; min-height: 4.6em; max-height: min(38vh, 320px); margin: 0; padding: 12px 14px; border: 0; border-radius: var(--border-radius-sm); background: color-mix(in srgb, var(--color-accent-pure) 6%, transparent); /* a alça de arrastar brigaria com a altura automática (autoAltura, em js/form-runner.js): a próxima tecla desfaria o que a mão fez */ resize: none; overflow-y: auto; } .fmr__campo--obs:focus { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-bottom-color: transparent; } /* ---- os seletores: secundários, pequenos e DEPOIS ---- auto-fit resolve de uma a cinco listas sem media query: uma ocupa a linha, duas dividem, três a cinco quebram sozinhas. */ .fmr__regrel { margin-top: 16px; } .fmr__rellbl { display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-text-muted); } .fmr__regsels { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* `min-width: 0` não é enfeite: