/* ════════════════════════════════════════════════════════════════════ FORJA · teste-de-clas.css · namespace .tc-* Travessia dos Clãs. Linkado direto no da página (como os CSS de Clã). Lê só tokens; zero hardcode de cor/espaçamento. ── Lei da luz: o Amarelo Acid e os Símbolos Sagrados só na luz. No resultado, só a VIRTUDE carrega o amarelo. Sombra usa vermelho. ════════════════════════════════════════════════════════════════════ */ /* ─── palco ─────────────────────────────────────────────────────────── */ .tc { position: relative; max-width: var(--codex-max); margin: 0 auto; padding: clamp(48px, 9vh, var(--sec-pad-y)) var(--codex-pad); min-height: 70vh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: calc(var(--rail-h, 72px) + 10px); } .tc-screen { position: relative; z-index: 1; width: 100%; } .tc-kicker { color: var(--fg-bronze); } /* ─── LIMIAR ────────────────────────────────────────────────────────── */ .tc-limiar .tc-screen { max-width: 52ch; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .tc-limiar .tc-titulo { /* manchete do teste, não da catedral: escala contida, sem estourar */ font-size: clamp(34px, 6vw, 64px); line-height: 1.02; margin: 14px 0 0; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; hyphens: none; } .tc-lead { margin-top: 26px; font-size: 19px; line-height: 1.65; color: var(--bege); font-style: normal; } .tc-nota { margin-top: 18px; color: var(--fg-bronze); } /* ─── CTA (botão de luz) ────────────────────────────────────────────── */ .tc-cta { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 34px; min-height: 52px; padding: 0 30px; background: var(--amarelo); color: var(--preto); border: 0; font-family: var(--voz-sagrada); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; } .tc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--amarelo-30); } .tc-cta:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 4px; } .tc-cta[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; } /* ─── CONSENTIMENTO ────────────────────────────────────────────────── */ .tc-consentimento .tc-screen { max-width: 62ch; } .tc-identificacao .tc-screen, .tc-email .tc-screen { max-width: 54ch; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; } .tc-consent { display: grid; grid-template-columns: 18px 1fr; gap: 13px; align-items: start; margin-top: 28px; padding: 18px 20px; background: var(--preto-2); border: 1px solid var(--cinzas); color: var(--bege); font-family: var(--voz-operacional); font-size: 17px; line-height: 1.5; cursor: pointer; } .tc-consent input { position: absolute; opacity: 0; pointer-events: none; } .tc-consent-box { width: 13px; height: 13px; margin-top: 5px; border: 1px solid var(--bronze); transform: rotate(45deg); transition: background 0.2s ease, border-color 0.2s ease; } .tc-consent:has(input:checked) { border-color: var(--bronze-claro); } .tc-consent:has(input:checked) .tc-consent-box { background: var(--amarelo); border-color: var(--amarelo); } .tc-consent:focus-within { outline: 2px solid var(--amarelo); outline-offset: 3px; } .tc-form { width: 100%; max-width: 42ch; margin-top: 30px; } .tc-field { display: block; text-align: left; } .tc-field-lb { display: block; margin-bottom: 10px; color: var(--fg-bronze); } .tc-input { width: 100%; min-height: 58px; padding: 0 18px; background: var(--preto-2); border: 1px solid var(--linha-bronze); color: var(--bege); font-family: var(--voz-operacional); font-size: 22px; line-height: 1.2; border-radius: var(--raio); outline: none; box-shadow: inset 0 0 0 1px var(--linha-fraca); } .tc-input:focus { border-color: var(--amarelo); box-shadow: 0 0 0 3px var(--amarelo-12), inset 0 0 0 1px var(--amarelo-30); } .tc-input::placeholder { color: var(--fg3); opacity: 0.5; } .tc-field-erro { min-height: 24px; margin: 10px 0 0; color: var(--bronze-claro); font-family: var(--voz-operacional); font-size: 15px; line-height: 1.45; } /* ─── progresso · barra de brasa que enche conforme avança ──────────── */ .tc-progress { width: 100%; margin-bottom: 30px; } .tc-bar { display: block; width: 100%; height: 3px; background: var(--preto-3); border: 1px solid var(--bronze-42); overflow: hidden; } .tc-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--amarelo)); box-shadow: 0 0 10px var(--amarelo-40); transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* ─── TRAVESSIA · escala Likert paginada (5 afirmações/página) ───────── */ .tc-trav { display: flex; flex-direction: column; align-items: stretch; } .tc-passo { color: var(--fg-bronze); margin-bottom: 28px; text-align: left; } .tc-itens { display: flex; flex-direction: column; width: 100%; max-width: 64ch; margin: 0 auto; } .tc-item { padding: 24px 0; border-bottom: 1px solid var(--bronze-42); } .tc-item:first-child { padding-top: 0; } .tc-item:last-child { border-bottom: 0; } .tc-af { margin: 0 0 18px; font-family: var(--voz-operacional); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.4; color: var(--bege); text-wrap: pretty; } /* régua de 7 graus · concordo (amarelo/luz) → discordo (vermelho/sombra) */ .tc-scale { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.8vw, 16px); flex-wrap: nowrap; } .tc-scale-lb { font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-bronze); white-space: nowrap; flex: 0 0 auto; } .tc-scale-lb.concordo { text-align: right; } .tc-scale-lb.discordo { text-align: left; } .tc-dot { flex: 0 0 auto; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } /* tamanho decresce até o centro (neutro), como no 16P */ .tc-dot.g3 { width: 34px; height: 34px; border: 2px solid; } .tc-dot.g2 { width: 28px; height: 28px; border: 2px solid; } .tc-dot.g1 { width: 23px; height: 23px; border: 1.5px solid; } .tc-dot.g0 { width: 19px; height: 19px; border: 1.5px solid; } /* polo concordo = amarelo (luz) · polo discordo = vermelho (sombra) · neutro = bronze */ .tc-dot.concordo { border-color: var(--amarelo-55); } .tc-dot.discordo { border-color: var(--vermelho-sinal, #E63946); opacity: 0.78; } .tc-dot.neutro { border-color: var(--bronze); } .tc-dot:hover { transform: scale(1.12); } .tc-dot.concordo:hover { border-color: var(--amarelo); } .tc-dot.discordo:hover { border-color: var(--vermelho-sinal, #E63946); opacity: 1; } .tc-dot:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } /* selecionado: preenche */ .tc-dot.on.concordo { background: var(--amarelo); border-color: var(--amarelo); box-shadow: 0 0 14px var(--amarelo-40); } .tc-dot.on.discordo { background: var(--vermelho-sinal, #E63946); border-color: var(--vermelho-sinal, #E63946); opacity: 1; } .tc-dot.on.neutro { background: var(--bronze); border-color: var(--bronze-claro); } .tc-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; } .tc-prox { margin-top: 0; } .tc-prox[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .tc-voltar { background: transparent; border: 0; color: var(--fg-bronze); font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; padding: 8px 0; } .tc-voltar:hover:not([disabled]) { color: var(--bege); } .tc-voltar[disabled] { opacity: 0.3; cursor: default; } .tc-voltar:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } /* ─── TÊMPERA (transição) ───────────────────────────────────────────── */ .tc-tempera { align-items: center; justify-content: center; text-align: center; } .tc-tempera-screen { position: relative; display: grid; place-items: center; min-height: 40vh; } .tc-forge-glow { position: absolute; width: clamp(200px, 40vw, 380px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--amarelo-40) 0%, var(--brasa, #8B0000) 45%, transparent 72%); filter: blur(14px); animation: tc-pulse 1.6s ease-in-out infinite; } .tc-tempera-txt { position: relative; font-family: var(--voz-sagrada); font-size: clamp(20px, 4vw, 30px); letter-spacing: 0.08em; color: var(--amarelo); } @keyframes tc-pulse { 0%, 100% { transform: scale(0.92); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } } /* ─── CAMADA 2 · desempate motivacional ─────────────────────────────── */ .tc-desempate .tc-screen { display: flex; flex-direction: column; align-items: center; text-align: center; } .tc-desempate-screen { max-width: 60ch; margin: 0 auto; } .tc-desempate .tc-cena { font-size: clamp(22px, 3.4vw, 34px); line-height: 1.22; margin: 14px 0 32px; max-width: 34ch; text-wrap: balance; } .tc-desempate .tc-opcoes { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 52ch; } .tc-desempate .tc-opcao { display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left; padding: 18px 22px; background: var(--preto-2); border: 1px solid var(--cinzas); color: var(--bege); font-family: var(--voz-operacional); font-size: 17px; line-height: 1.4; cursor: pointer; transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease; } .tc-desempate .tc-opcao-mk { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border: 1px solid var(--bronze); transform: rotate(45deg); transition: all 0.22s ease; } .tc-desempate .tc-opcao:hover { border-color: var(--bronze-claro); background: var(--preto-3); transform: translateX(3px); } .tc-desempate .tc-opcao:hover .tc-opcao-mk { border-color: var(--amarelo); background: var(--amarelo-30); } .tc-desempate .tc-opcao:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } /* ─── REVELAÇÃO ─────────────────────────────────────────────────────── */ .tc-res { max-width: 60ch; text-align: center; margin: 0 auto; } .tc-res-crest { position: relative; display: grid; place-items: center; margin: 18px auto 6px; width: clamp(150px, 30vw, 230px); } .tc-res-halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, var(--amarelo-30) 0%, transparent 65%); filter: blur(8px); } .tc-res-crest img { position: relative; width: 100%; height: auto; } .tc-res-prefixo { color: var(--fg-bronze); margin-top: 10px; } .tc-res-nome { font-size: clamp(40px, 8vw, 84px); line-height: 1; margin: 4px 0 0; letter-spacing: -0.04em; text-wrap: balance; overflow-wrap: break-word; hyphens: none; } .tc-res-natureza { margin: 12px auto 0; font-family: var(--voz-operacional); font-size: 18px; line-height: 1.35; color: var(--bege); } .tc-res-natureza b { font-weight: 600; color: var(--bege); } .tc-res-frase { margin-top: 18px; font-style: normal; font-size: 18px; color: var(--bege); } /* trio Luz / Sombra / Virtude */ .tc-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 100%; max-width: 52ch; margin: 34px auto; background: var(--bronze-42); border: 1px solid var(--bronze-42); } .tc-dado { background: var(--preto-2); padding: 22px 16px; display: flex; flex-direction: column; gap: 9px; } .tc-dado-lb { color: var(--fg-bronze); } .tc-dado-vl { font-family: var(--voz-sagrada); font-size: clamp(17px, 2.4vw, 23px); line-height: 1.15; color: var(--bege); overflow-wrap: anywhere; } /* lei da luz: só a Virtude carrega o amarelo sagrado */ .tc-dado-virtude .tc-dado-vl { color: var(--amarelo); } /* a Sombra recebe o vermelho/brasa, nunca o amarelo */ .tc-dado-sombra .tc-dado-vl { color: var(--bronze-claro); } .tc-res-dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 auto; max-width: 62ch; background: var(--cinzas); border: 1px solid var(--cinzas); } .tc-res-forja, .tc-res-queda { margin: 0; background: var(--preto-2); padding: 22px 24px; font-family: var(--voz-operacional); color: var(--fg2); font-size: 17px; line-height: 1.55; } .tc-dual-lb { display: block; margin-bottom: 9px; font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-bronze); } .tc-res-dual .tc-res-forja { margin: 0; } .tc-res-queda { color: var(--fg2); } .tc-res-fogo { margin: 32px auto 0; max-width: 48ch; padding: 22px 26px; border: 1px solid var(--bronze-42); background: var(--preto-2); } .tc-fogo-lb { color: var(--fg-bronze); display: block; margin-bottom: 8px; } .tc-res-fogo p { margin: 0; font-family: var(--voz-sagrada); font-size: clamp(17px, 3vw, 23px); line-height: 1.35; color: var(--bege); } .tc-conf-baixa { margin: 26px auto 0; max-width: 50ch; font-size: 15.5px; color: var(--fg2); border-top: 1px solid var(--bronze-42); padding-top: 18px; } .tc-res-acoes { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; margin-top: 38px; } .tc-refazer { background: transparent; border: 1px solid var(--cinzas); color: var(--fg-bronze); font-family: var(--voz-sagrada); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; min-height: 52px; padding: 0 24px; cursor: pointer; transition: border-color 0.22s ease, color 0.22s ease; } .tc-refazer:hover { border-color: var(--bronze-claro); color: var(--bege); } .tc-refazer:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 3px; } /* ─── responsivo ────────────────────────────────────────────────────── */ @media (max-width: 640px) { body[data-page="teste-dos-clas.html"] { background: radial-gradient(circle at 50% 18%, var(--amarelo-08), transparent 34vh), var(--preto); } body[data-page="teste-dos-clas.html"] main { overflow: clip; } .tc { isolation: isolate; min-height: 100svh; padding: 30px 22px max(34px, env(safe-area-inset-bottom)); justify-content: flex-start; } .tc::before { content: ""; position: absolute; inset: 0 -18px auto; height: min(58svh, 470px); pointer-events: none; background: radial-gradient(circle at 50% 10%, var(--amarelo-12), transparent 34%), radial-gradient(circle at 50% 44%, var(--brasa-14), transparent 58%); opacity: 0.72; z-index: 0; } .tc-limiar, .tc-consentimento, .tc-identificacao, .tc-email { justify-content: center; padding-bottom: max(52px, env(safe-area-inset-bottom)); } .tc-limiar .tc-screen, .tc-consentimento .tc-screen, .tc-identificacao .tc-screen, .tc-email .tc-screen { max-width: none; } .tc-limiar .tc-screen::before, .tc-consentimento .tc-screen::before, .tc-identificacao .tc-screen::before, .tc-email .tc-screen::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 0 26px; border: 1px solid var(--bronze-claro); background: linear-gradient(45deg, transparent 47%, var(--amarelo-40) 48%, var(--amarelo-40) 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, var(--bronze-42) 48%, var(--bronze-42) 52%, transparent 53%), var(--preto-2); box-shadow: 0 0 42px var(--amarelo-12); transform: rotate(45deg); } .tc-limiar .tc-screen::before { margin-left: 4px; } .tc-titulo, .tc-limiar .tc-titulo { font-size: clamp(38px, 12vw, 55px); line-height: 0.94; margin-top: 12px; letter-spacing: -0.018em; } .tc-lead { margin-top: 24px; font-size: 20px; line-height: 1.52; color: var(--fg1); } .tc-nota { max-width: 32ch; margin-top: 22px; line-height: 1.75; } .tc-cta, .tc-refazer { width: 100%; justify-content: center; min-height: 58px; } .tc-cta { margin-top: 32px; box-shadow: 0 16px 42px var(--amarelo-12); } .tc-consent { grid-template-columns: 20px 1fr; gap: 14px; margin-top: 26px; padding: 20px 18px; font-size: 18px; line-height: 1.44; background: linear-gradient(180deg, var(--amarelo-05), transparent 42%), var(--preto-2); box-shadow: inset 0 0 0 1px var(--linha-fraca); } .tc-consent-box { width: 15px; height: 15px; margin-top: 7px; } .tc-form { max-width: none; margin-top: 28px; } .tc-field-lb { text-align: center; } .tc-input { min-height: 64px; text-align: center; font-size: 24px; background: linear-gradient(180deg, var(--amarelo-05), transparent 48%), var(--preto-2); } .tc-email .tc-input { font-size: 19px; } .tc-field-erro { text-align: center; } .tc-travessia { padding-top: 20px; } .tc-travessia .tc-screen { align-items: stretch; text-align: left; } .tc-progress { position: sticky; top: calc(var(--rail-h, 72px) - 1px); z-index: 5; margin: -20px -22px 24px; padding: 16px 22px 14px; background: linear-gradient(180deg, var(--preto), var(--preto-2)); border-bottom: 1px solid var(--bronze-42); } .tc-conta { margin-bottom: 14px; text-align: center; } .tc-cena { max-width: none; margin-bottom: 26px; font-size: clamp(28px, 8.4vw, 38px); line-height: 1.04; text-align: center; } .tc-opcoes { gap: 10px; max-width: none; } .tc-opcao { min-height: 64px; padding: 17px 18px; gap: 14px; font-size: 17px; line-height: 1.36; background: linear-gradient(180deg, var(--amarelo-05), transparent), var(--preto-2); border-color: var(--linha-bronze); box-shadow: inset 0 0 0 1px var(--linha-fraca); } .tc-opcao-mk { width: 12px; height: 12px; margin-top: 5px; } .tc-opcao:hover { transform: none; } .tc-opcao:active { border-color: var(--amarelo); background: linear-gradient(180deg, var(--amarelo-08), transparent 70%), var(--preto-3); } .tc-nav { margin-top: 18px; text-align: center; } .tc-voltar { min-height: 48px; padding: 8px 18px; } .tc-tempera-screen { min-height: calc(100svh - var(--rail-h, 72px) - 80px); } .tc-forge-glow { width: min(70vw, 300px); } .tc-tempera-txt { max-width: 14ch; line-height: 1.18; } .tc-resultado { padding-top: 22px; } .tc-res { max-width: none; } .tc-res-crest { width: clamp(126px, 42vw, 172px); margin-top: 0; margin-bottom: 12px; } .tc-res-halo { inset: -18%; filter: blur(11px); } .tc-res-prefixo { max-width: 30ch; margin: 10px auto 0; line-height: 1.7; } .tc-res-nome { font-size: clamp(42px, 12.4vw, 58px); line-height: 0.92; letter-spacing: -0.018em; } .tc-res-natureza { margin-top: 10px; font-size: 17px; } .tc-res-frase { max-width: 29ch; margin: 18px auto 0; font-size: 18px; line-height: 1.5; } .tc-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; } .tc-dado-virtude { grid-column: 1 / -1; } .tc-dado { min-height: 96px; justify-content: center; padding: 16px 10px; } .tc-dado-vl { font-size: clamp(15px, 4.8vw, 19px); line-height: 1.18; overflow-wrap: anywhere; } .tc-res-dual { grid-template-columns: 1fr; max-width: none; margin-top: 0; background: transparent; border-color: var(--linha-fraca); } .tc-res-forja, .tc-res-queda { max-width: 31ch; margin: 0 auto; background: transparent; padding: 18px 0; font-size: 17.5px; line-height: 1.58; } .tc-res-forja + .tc-res-queda { border-top: 1px solid var(--linha-fraca); } .tc-res-fogo { margin-top: 28px; padding: 20px 18px; } .tc-res-fogo p { font-size: clamp(18px, 5vw, 22px); } .tc-conf-baixa { max-width: 31ch; font-size: 16px; line-height: 1.55; } .tc-res-acoes { position: relative; flex-direction: column; align-items: stretch; gap: 12px; margin: 34px -22px -34px; padding: 18px 22px max(20px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--preto) 24%); } body[data-page="teste-dos-clas.html"] footer { padding: 54px 18px 44px; } body[data-page="teste-dos-clas.html"] footer .footer-sigil { margin-bottom: 18px; } body[data-page="teste-dos-clas.html"] footer .frase { font-size: 15px; line-height: 1.48; margin-bottom: 20px; padding: 18px 16px; } body[data-page="teste-dos-clas.html"] .footer-map { margin: 26px auto 22px; padding: 20px 18px; } body[data-page="teste-dos-clas.html"] .footer-map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } body[data-page="teste-dos-clas.html"] .footer-map-group h2 { font-size: 10px; margin-bottom: 8px; } body[data-page="teste-dos-clas.html"] .footer-map-group a { min-height: 34px; font-size: 13px; } body[data-page="teste-dos-clas.html"] footer .meta-line { font-size: 10px; line-height: 1.7; } } /* ─── reduced motion ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tc-forge-glow { animation: none; } .tc-cta:hover, .tc-opcao:hover { transform: none; } }