/* ================================================================ Método Nota 1000 — Webapp Folha única (sem build step): tokens, reset, layout, componentes, leitor (blocos herdados do PDF) e motion. Herda a MESMA marca do ebook (03-entregavel/design/tokens.css e blocos.css) — quem comprou o PDF entra num app que parece a mesma coisa, não um SaaS genérico. Ver 04-webapp/DESIGN.md pro raciocínio completo por trás de cada decisão abaixo. ================================================================ */ /* ---------------------------------------------------------------- 1. Fontes — mesmas duas do ebook, auto-hospedadas em WOFF2 (subset latino), com font-display: swap. Preload da variável mais usada (Inter Regular, peso da interface) fica no de cada página. ---------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/Lora-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/Lora-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/Lora-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../fonts/Lora-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ---------------------------------------------------------------- 2. Tokens — paleta de 4 cores herdada do ebook (nunca uma 5ª cor arbitrária). Tudo derivado dela: espaçamento, raio, sombra, motion. ---------------------------------------------------------------- */ :root { /* -- as 4 cores da marca (idênticas a 03-entregavel/design/tokens.css) -- */ --color-primary: #1D2B53; --color-primary-rgb: 29, 43, 83; --color-accent: #F2994A; --color-accent-rgb: 242, 153, 74; --color-dark: #21242C; --color-dark-rgb: 33, 36, 44; --color-light: #F7F4EE; --color-light-rgb: 247, 244, 238; --color-white: #FFFFFF; --color-primary-04: rgba(var(--color-primary-rgb), 0.04); --color-primary-08: rgba(var(--color-primary-rgb), 0.08); --color-primary-15: rgba(var(--color-primary-rgb), 0.15); --color-primary-40: rgba(var(--color-primary-rgb), 0.40); --color-primary-70: rgba(var(--color-primary-rgb), 0.70); --color-accent-08: rgba(var(--color-accent-rgb), 0.08); --color-accent-12: rgba(var(--color-accent-rgb), 0.12); --color-accent-25: rgba(var(--color-accent-rgb), 0.25); --color-accent-50: rgba(var(--color-accent-rgb), 0.50); --color-dark-04: rgba(var(--color-dark-rgb), 0.04); --color-dark-08: rgba(var(--color-dark-rgb), 0.08); --color-dark-15: rgba(var(--color-dark-rgb), 0.15); --color-dark-60: rgba(var(--color-dark-rgb), 0.60); --color-dark-68: rgba(var(--color-dark-rgb), 0.68); /* -- papéis semânticos (mapeados nas 4 cores, sem introduzir hue nova pra UI comum; "erro real de formulário" é a única exceção — ver DESIGN.md §4) -- */ --cor-superficie: var(--color-white); --cor-fundo: var(--color-light); --cor-texto: var(--color-dark); --cor-texto-suave: var(--color-dark-68); --cor-borda: var(--color-dark-15); --cor-marca: var(--color-primary); --cor-destaque: var(--color-accent); --cor-sucesso: #2f6f4f; /* verde restrito a "concluído"/"liberado" — ver DESIGN.md */ --cor-sucesso-bg: rgba(47, 111, 79, 0.10); --cor-erro: #a6392f; /* vermelho restrito a formulário/estado de falha real */ --cor-erro-bg: rgba(166, 57, 47, 0.08); /* -- tipografia -- */ --fonte-corpo: "Lora", "Source Serif 4", Georgia, serif; --fonte-ui: "Inter", "Manrope", Arial, sans-serif; --texto-xs: 0.75rem; --texto-sm: 0.875rem; --texto-base: 1rem; --texto-md: 1.0625rem; --texto-lg: 1.25rem; --texto-xl: 1.5rem; --texto-xxl: 1.875rem; --altura-linha-corpo: 1.6; --altura-linha-titulo: 1.2; /* -- espaçamento (escala 4px) -- */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 2.5rem; --esp-8: 3rem; /* -- raio e sombra -- */ --raio-sm: 6px; --raio-md: 12px; --raio-lg: 18px; --raio-pill: 999px; --sombra-sm: 0 1px 2px rgba(var(--color-dark-rgb), 0.08); --sombra-md: 0 6px 20px rgba(var(--color-dark-rgb), 0.10); --sombra-cartao: 0 1px 3px rgba(var(--color-dark-rgb), 0.06), 0 1px 2px rgba(var(--color-dark-rgb), 0.08); /* -- toque / layout -- */ --altura-toque-min: 44px; --altura-nav-inferior: 64px; --largura-conteudo: 720px; --largura-app: 1120px; /* -- motion (zerado globalmente se prefers-reduced-motion, ver §7) -- */ --dur-rapida: 120ms; --dur-base: 220ms; --dur-lenta: 420ms; --easing-padrao: cubic-bezier(0.22, 0.61, 0.36, 1); --easing-saida: cubic-bezier(0.4, 0, 1, 1); --z-nav: 40; --z-topbar: 30; --z-overlay: 50; --z-toast: 60; color-scheme: light; } /* ---------------------------------------------------------------- 3. Reset e base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-ui); font-size: var(--texto-base); line-height: var(--altura-linha-corpo); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--fonte-ui); line-height: var(--altura-linha-titulo); margin: 0 0 var(--esp-3); color: var(--color-primary); font-weight: 700; } h1 { font-size: var(--texto-xxl); } h2 { font-size: var(--texto-xl); } h3 { font-size: var(--texto-lg); } p { margin: 0 0 var(--esp-4); } a { color: var(--color-primary); text-decoration-color: var(--color-accent); text-underline-offset: 3px; } ul, ol { padding-left: 1.3em; margin: 0 0 var(--esp-4); } li + li { margin-top: var(--esp-1); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } :focus-visible { outline: 2.5px solid var(--color-accent); outline-offset: 2px; border-radius: var(--raio-sm); } /* ---------------------------------------------------------------- 4. Layout do app-shell (mobile primeiro) ---------------------------------------------------------------- */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .app-main { flex: 1; width: 100%; max-width: var(--largura-app); margin: 0 auto; padding: var(--esp-5) var(--esp-4) calc(var(--altura-nav-inferior) + var(--esp-6)); } .app-main--leitura { max-width: var(--largura-conteudo); } /* topo (marca + logout) — some no mobile atrás da nav inferior, some no desktop vira a navegação principal */ .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); background: rgba(var(--color-light-rgb), 0.92); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--cor-borda); } .marca { display: flex; align-items: center; gap: var(--esp-2); font-family: var(--fonte-ui); font-weight: 700; color: var(--color-primary); text-decoration: none; font-size: var(--texto-md); } .marca__selo { width: 28px; height: 28px; border-radius: 8px; background: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; } .marca__selo svg { width: 16px; height: 16px; color: var(--color-accent); } .topbar__nav { display: none; align-items: center; gap: var(--esp-1); } .topbar__acoes { display: flex; align-items: center; gap: var(--esp-2); } /* navegação inferior fixa (mobile): 4 itens, área de toque >= 44px */ .nav-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: flex; background: var(--cor-superficie); border-top: 1px solid var(--cor-borda); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 12px rgba(var(--color-dark-rgb), 0.06); } .nav-inferior__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--altura-nav-inferior); min-width: var(--altura-toque-min); padding: var(--esp-1); color: var(--cor-texto-suave); text-decoration: none; font-size: var(--texto-xs); font-weight: 600; position: relative; transition: color var(--dur-rapida) var(--easing-padrao), transform var(--dur-rapida) var(--easing-padrao); } .nav-inferior__item svg { width: 22px; height: 22px; } .nav-inferior__item:active { transform: scale(0.94); } .nav-inferior__item[aria-current="page"] { color: var(--color-primary); } .nav-inferior__item[aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 22px; height: 3px; border-radius: var(--raio-pill); background: var(--color-accent); } @media (min-width: 900px) { .nav-inferior { display: none; } .app-main { padding-bottom: var(--esp-6); } .topbar__nav { display: flex; } .topbar__link { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-pill); color: var(--cor-texto-suave); text-decoration: none; font-weight: 600; font-size: var(--texto-sm); min-height: var(--altura-toque-min); transition: background var(--dur-rapida) var(--easing-padrao), color var(--dur-rapida) var(--easing-padrao); } .topbar__link svg { width: 18px; height: 18px; } .topbar__link:hover { background: var(--color-primary-08); color: var(--color-primary); } .topbar__link[aria-current="page"] { background: var(--color-primary); color: var(--color-white); } } /* ---------------------------------------------------------------- 5. Componentes ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--altura-toque-min); padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-pill); border: 1px solid transparent; font-weight: 700; font-size: var(--texto-sm); cursor: pointer; text-decoration: none; transition: transform var(--dur-rapida) var(--easing-padrao), box-shadow var(--dur-rapida) var(--easing-padrao), background var(--dur-base) var(--easing-padrao); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn--primario { background: var(--color-primary); color: var(--color-white); } .btn--primario:hover:not(:disabled) { box-shadow: var(--sombra-md); } .btn--destaque { background: var(--color-accent); color: var(--color-primary); } .btn--destaque:hover:not(:disabled) { box-shadow: var(--sombra-md); } .btn--secundario { background: transparent; color: var(--color-primary); border-color: var(--cor-borda); } .btn--secundario:hover:not(:disabled) { background: var(--color-primary-04); } .btn--fantasma { background: transparent; color: var(--cor-texto-suave); } .btn--fantasma:hover:not(:disabled) { background: var(--color-dark-04); } .btn--perigo { background: transparent; color: var(--cor-erro); border-color: rgba(166, 57, 47, 0.35); } .btn--perigo:hover:not(:disabled) { background: var(--cor-erro-bg); } .btn--bloco { width: 100%; } .btn--sm { min-height: 36px; padding: var(--esp-2) var(--esp-4); font-size: var(--texto-xs); } .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-cartao); padding: var(--esp-5); } .cartao + .cartao { margin-top: var(--esp-4); } .cartao--marca { background: var(--color-primary); color: var(--color-white); border: none; } .cartao--marca h1, .cartao--marca h2, .cartao--marca h3 { color: var(--color-white); } .cartao--marca .texto-suave { color: rgba(255,255,255,0.72); } .cartao--marca .chip--destaque { background: var(--color-accent); color: var(--color-primary); } .texto-suave { color: var(--cor-texto-suave); } .texto-sm { font-size: var(--texto-sm); } .texto-centro { text-align: center; } .pilha { display: flex; flex-direction: column; gap: var(--esp-4); } .pilha--sm { gap: var(--esp-2); } .linha { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; } .linha--entre { justify-content: space-between; } .grade-2 { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } @media (min-width: 640px) { .grade-2 { grid-template-columns: 1fr 1fr; } } .chip { display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pill); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.02em; background: var(--color-primary-08); color: var(--color-primary); } .chip--sucesso { background: var(--cor-sucesso-bg); color: var(--cor-sucesso); } .chip--destaque { background: var(--color-accent-12); color: #8a4c1f; } /* barra/anel de progresso — valor via custom property setada em JS (element.style.setProperty), nunca via atributo style="" hardcoded no HTML das páginas (ver DESIGN.md §6 sobre essa distinção) */ .progresso-barra { --valor: 0; height: 8px; border-radius: var(--raio-pill); background: var(--color-dark-08); overflow: hidden; } .progresso-barra__fill { height: 100%; width: 100%; transform: scaleX(calc(var(--valor) / 100)); transform-origin: left; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); border-radius: inherit; transition: transform var(--dur-lenta) var(--easing-padrao); } .progresso-anel { --valor: 0; width: 84px; height: 84px; position: relative; } .progresso-anel svg { transform: rotate(-90deg); } .progresso-anel circle { fill: none; stroke-width: 8; } /* Destaque da C5 (proposta de intervenção) na tela de resultado do corretor. "presente" reaproveita --cor-sucesso (item concluído no checklist, dentro do uso previsto em DESIGN.md); "ausente" é neutro (não é erro de formulário, é diagnóstico pedagógico), nunca --cor-erro. */ .destaque-c5__lista { display: grid; grid-template-columns: 1fr; gap: var(--esp-3); margin-top: var(--esp-3); } @media (min-width: 640px) { .destaque-c5__lista { grid-template-columns: 1fr 1fr; } } .destaque-c5__item { border-radius: var(--raio-md); border: 1px solid var(--cor-borda); padding: var(--esp-3); } .destaque-c5__item--presente { background: var(--cor-sucesso-bg); border-color: rgba(47, 111, 79, 0.25); } .destaque-c5__item--presente strong { color: var(--cor-sucesso); } .destaque-c5__item--ausente { background: var(--color-dark-04); border-style: dashed; } .destaque-c5__item--ausente strong { color: var(--cor-texto-suave); } .progresso-anel .trilha { stroke: var(--color-dark-08); } .progresso-anel .valor { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: calc(226.2 - (226.2 * var(--valor) / 100)); transition: stroke-dashoffset var(--dur-lenta) var(--easing-padrao); } .progresso-anel__label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: var(--texto-md); color: var(--color-primary); } /* estado trancado — cadeado + o que tem dentro + um botão só */ .trancado { border: 1px dashed var(--cor-borda); border-radius: var(--raio-lg); padding: var(--esp-5); text-align: center; background: var(--color-primary-04); } .trancado__icone { width: 44px; height: 44px; margin: 0 auto var(--esp-3); border-radius: 50%; background: var(--color-primary); color: var(--color-accent); display: grid; place-items: center; } .trancado__icone svg { width: 20px; height: 20px; } .trancado__preco { font-size: var(--texto-xl); font-weight: 700; color: var(--color-primary); margin: var(--esp-2) 0; } /* skeleton (carregando) — nunca "Carregando..." sozinho */ .skeleton { background: var(--color-dark-08); border-radius: var(--raio-sm); position: relative; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-100%); animation: brilho 1.5s infinite; } .skeleton--linha { height: 14px; margin-bottom: var(--esp-2); } .skeleton--titulo { height: 22px; width: 60%; margin-bottom: var(--esp-3); } .skeleton--cartao { height: 96px; border-radius: var(--raio-lg); } .skeleton--circulo { width: 84px; height: 84px; border-radius: 50%; } @keyframes brilho { 100% { transform: translateX(100%); } } /* estado vazio */ .vazio { text-align: center; padding: var(--esp-7) var(--esp-4); color: var(--cor-texto-suave); } .vazio__icone { width: 48px; height: 48px; margin: 0 auto var(--esp-3); color: var(--color-primary-40); } /* estado de erro */ .alerta { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-4); border-radius: var(--raio-md); border: 1px solid; } .alerta--erro { background: var(--cor-erro-bg); border-color: rgba(166,57,47,0.25); color: var(--cor-erro); } .alerta--sucesso { background: var(--cor-sucesso-bg); border-color: rgba(47,111,79,0.25); color: var(--cor-sucesso); } .alerta--info { background: var(--color-primary-08); border-color: var(--color-primary-15); color: var(--color-primary); } .alerta svg { width: 20px; height: 20px; flex-shrink: 0; } /* onboarding (3 passos) */ .onboarding-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-primary); display: flex; flex-direction: column; color: var(--color-white); padding: var(--esp-6) var(--esp-5); } .onboarding__passos { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--esp-5); max-width: 420px; margin: 0 auto; text-align: center; } .onboarding-overlay h2 { color: var(--color-white); } .onboarding-overlay .texto-suave { color: rgba(255,255,255,0.78); } .onboarding-overlay .btn--fantasma { color: rgba(255,255,255,0.75); } .onboarding-overlay .btn--fantasma:hover { background: rgba(255,255,255,0.10); } .onboarding__icone { width: 64px; height: 64px; margin: 0 auto; color: var(--color-accent); } .onboarding__pontos { display: flex; justify-content: center; gap: var(--esp-2); } .onboarding__ponto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background var(--dur-base) var(--easing-padrao), width var(--dur-base) var(--easing-padrao); } .onboarding__ponto[data-ativo="1"] { background: var(--color-accent); width: 22px; border-radius: var(--raio-pill); } .onboarding__rodape { display: flex; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-5); } /* formulários */ .campo { display: flex; flex-direction: column; gap: var(--esp-1); text-align: left; } .campo label { font-weight: 700; font-size: var(--texto-sm); color: var(--color-primary); } .campo input, .campo textarea, .campo select { min-height: var(--altura-toque-min); padding: var(--esp-3); border-radius: var(--raio-md); border: 1.5px solid var(--cor-borda); background: var(--cor-superficie); transition: border-color var(--dur-rapida) var(--easing-padrao); } .campo input:focus, .campo textarea:focus { border-color: var(--color-accent); outline: none; } .campo textarea { resize: vertical; min-height: 160px; font-family: var(--fonte-corpo); line-height: var(--altura-linha-corpo); } .campo__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-suave); } /* toasts */ .toast-area { position: fixed; bottom: calc(var(--altura-nav-inferior) + var(--esp-4)); left: var(--esp-4); right: var(--esp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--esp-2); pointer-events: none; } @media (min-width: 900px) { .toast-area { bottom: var(--esp-5); left: auto; right: var(--esp-5); width: 340px; } } .toast { pointer-events: auto; background: var(--color-primary); color: var(--color-white); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-md); box-shadow: var(--sombra-md); font-size: var(--texto-sm); animation: entra-toast var(--dur-base) var(--easing-padrao); } .toast--erro { background: var(--cor-erro); } .toast--sucesso { background: var(--cor-sucesso); } @keyframes entra-toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------------------------------- 6. Leitor — capítulos e os 5 blocos visuais herdados do PDF ---------------------------------------------------------------- */ .leitor-cabecalho { margin-bottom: var(--esp-5); } .kicker { display: inline-block; font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--esp-1); } .cartao--marca .kicker { color: var(--color-accent); } .texto-xl-num { font-family: var(--fonte-ui); font-size: var(--texto-xxl); font-weight: 700; color: var(--color-primary); margin: var(--esp-1) 0 0; } .capitulo-lista { display: flex; flex-direction: column; gap: var(--esp-3); } .capitulo-item { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--raio-md); border: 1px solid var(--cor-borda); background: var(--cor-superficie); text-decoration: none; color: inherit; transition: border-color var(--dur-rapida) var(--easing-padrao), transform var(--dur-rapida) var(--easing-padrao); } .capitulo-item:active { transform: scale(0.99); } .capitulo-item:hover { border-color: var(--color-primary-40); } .capitulo-item__num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--texto-sm); background: var(--color-primary-08); color: var(--color-primary); flex-shrink: 0; } .capitulo-item[data-concluido="1"] .capitulo-item__num { background: var(--cor-sucesso); color: var(--color-white); } .capitulo-item__corpo { flex: 1; min-width: 0; } .capitulo-item__titulo { font-weight: 700; margin-bottom: 2px; } .capitulo-item__resumo { font-size: var(--texto-sm); color: var(--cor-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .capitulo-item__seta { width: 18px; height: 18px; color: var(--cor-texto-suave); flex-shrink: 0; } .capitulo-item[data-bloqueado="1"] { opacity: 0.7; } .leitura { font-family: var(--fonte-corpo); font-size: var(--texto-md); line-height: var(--altura-linha-corpo); } .leitura h3 { font-family: var(--fonte-ui); font-size: var(--texto-lg); margin-top: var(--esp-6); } .leitura blockquote { margin: var(--esp-4) 0; padding: var(--esp-3) var(--esp-4); border-left: 3px solid var(--color-accent); background: var(--color-light); font-style: italic; color: var(--color-primary); } .leitura .lista-check { list-style: none; padding: 0; } .leitura .li-check { display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-1) 0; cursor: pointer; } .leitura .li-check__mark { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--color-primary-40); border-radius: 5px; display: grid; place-items: center; transition: background var(--dur-rapida) var(--easing-padrao), border-color var(--dur-rapida) var(--easing-padrao); } .leitura .li-check[data-feito="1"] .li-check__mark { background: var(--color-accent); border-color: var(--color-accent); } .leitura .li-check[data-feito="1"] .li-check__mark::after { content: "✓"; color: var(--color-primary); font-size: 13px; font-weight: 900; } .leitura .li-check[data-feito="1"] { color: var(--cor-texto-suave); text-decoration: line-through; text-decoration-color: var(--color-accent-50); } /* blocos (mesmo visual dos 5 tipos do PDF) */ .box { margin: var(--esp-5) 0; padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5); border-left: 3px solid var(--color-primary); background: var(--color-primary-04); border-radius: 0 var(--raio-md) var(--raio-md) 0; } .box__head { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-2); } .box__icon { width: 20px; height: 20px; flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: currentColor; } .box__icon[data-icon="aprender"] { -webkit-mask-image: url("../icons/blocos/aprender.svg"); mask-image: url("../icons/blocos/aprender.svg"); } .box__icon[data-icon="passo"] { -webkit-mask-image: url("../icons/blocos/passo.svg"); mask-image: url("../icons/blocos/passo.svg"); } .box__icon[data-icon="exemplo"] { -webkit-mask-image: url("../icons/blocos/exemplo.svg"); mask-image: url("../icons/blocos/exemplo.svg"); } .box__icon[data-icon="exercicio"] { -webkit-mask-image: url("../icons/blocos/exercicio.svg"); mask-image: url("../icons/blocos/exercicio.svg"); } .box__icon[data-icon="erro"] { -webkit-mask-image: url("../icons/blocos/erro.svg"); mask-image: url("../icons/blocos/erro.svg"); } .box__label { font-family: var(--fonte-ui); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .box p:last-child, .box ul:last-child, .box ol:last-child { margin-bottom: 0; } .box--aprender { border-left-color: var(--color-primary); background: var(--color-primary-04); } .box--aprender .box__icon, .box--aprender .box__label { color: var(--color-primary); } .box--passo { border-left-color: var(--color-accent); background: var(--color-accent-08); } .box--passo .box__icon { color: var(--color-accent); } .box--passo .box__label { color: #8a4c1f; } .box--exemplo { border-left-color: var(--color-primary); background: var(--color-light); } .box--exemplo .box__icon, .box--exemplo .box__label { color: var(--color-primary); } .box--exercicio { border-left-color: var(--color-accent); background: var(--color-accent-08); } .box--exercicio .box__icon { color: var(--color-accent); } .box--exercicio .box__label { color: #8a4c1f; } .box--erro { border-left-color: var(--color-dark); background: var(--color-dark-04); } .box--erro .box__icon, .box--erro .box__label { color: var(--color-dark); } .leitor-rodape { display: flex; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-7); padding-top: var(--esp-5); border-top: 1px solid var(--cor-borda); } .leitor-progresso-flutuante { margin: var(--esp-6) 0 var(--esp-5); } /* ---------------------------------------------------------------- 7. Motion com parcimônia — respeita prefers-reduced-motion ---------------------------------------------------------------- */ .entrada-pagina { animation: entra-pagina var(--dur-base) var(--easing-padrao); } @keyframes entra-pagina { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- 8. Gráfico de evolução (corretor) — SVG desenhado via JS, só o essencial de estilo aqui. ---------------------------------------------------------------- */ .grafico-evolucao { width: 100%; overflow-x: auto; } .grafico-evolucao svg { min-width: 480px; } .grafico-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-3); } .grafico-legenda__item { display: flex; align-items: center; gap: 6px; font-size: var(--texto-xs); font-weight: 700; } .grafico-legenda__cor { width: 10px; height: 10px; border-radius: 50%; } .grafico-legenda__cor.cor-c1 { background: var(--color-primary); } .grafico-legenda__cor.cor-c2 { background: var(--color-accent); } .grafico-legenda__cor.cor-c3 { background: var(--color-primary); opacity: 0.6; } .grafico-legenda__cor.cor-c4 { background: var(--color-accent); opacity: 0.6; } .grafico-legenda__cor.cor-c5 { background: var(--color-dark); } /* página de login (pública) */ .app-main--login { max-width: 460px; padding-top: var(--esp-8); padding-bottom: var(--esp-8); } .selo-grande { margin: 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary); color: var(--color-accent); display: grid; place-items: center; } .selo-grande svg { width: 28px; height: 28px; } .cartao--login { margin-top: var(--esp-6); } .area-resposta-login { margin-top: var(--esp-4); } .espaco-topo { margin-top: var(--esp-5); } /* utilidades */ .somente-leitor-tela { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .oculto { display: none !important; }