/* ========================================================================== Anamnese nutricional — folha de estilo Portada do artboard do Claude Design (.superpowers/sdd/2026-09-11-anamnese-nutricional/artboard-original.dc.html). Nenhum valor aqui foi "melhorado" — são as mesmas cores, tipos, sombras e animações do design, só que movidos de style="" inline para classes reais. ========================================================================== */ /* --- Paleta e tipografia -------------------------------------------------- */ :root{ --g0:#005E16; --g1:#20991A; --g2:#009900; --g3:#009953; --g4:#33994D; --ink:#0d2612; --ink2:#3f5c47; --ink3:#4a6752; --line:#d7e6da; --field:#ffffff; --card:#ffffff; --canvas:#f2f7f2; --quiet:#eaf5ec; --erro:#b3261e; --fd:"Bricolage Grotesque",Georgia,serif; --fb:"Plus Jakarta Sans","Segoe UI",sans-serif; } /* --- Reset e base --------------------------------------------------------- O artboard aplicava font-family/color numa div embrulhando a página inteira; aqui não existe essa div, então isso vai direto pro body. */ html,body{margin:0;padding:0;background:var(--canvas)} body{font-family:var(--fb);color:var(--ink);min-height:100vh;padding-bottom:64px} *{-webkit-tap-highlight-color:transparent} a{color:var(--g0);text-decoration:underline;text-underline-offset:2px} a:hover{color:var(--g2)} ::placeholder{color:#7f9a88} /* O atributo hidden (usado pra trocar de etapa e pra revelar campos condicionais) precisa ganhar de qualquer display:grid/flex que uma classe dê ao mesmo elemento — sem isso o passo escondido continua ocupando espaço e aparecendo. */ [hidden]{display:none!important} /* --- Formas decorativas de fundo ------------------------------------------ Container fixo, atrás de tudo, sem capturar clique. Cada forma é um elemento solto — só a posição é comum entre elas. */ .formas{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0} .forma{position:absolute} .forma-1{top:-160px;right:-140px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(0,153,83,.18),rgba(0,153,83,0) 68%)} .forma-2{top:180px;left:-200px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle at 60% 40%,rgba(32,153,26,.15),rgba(32,153,26,0) 66%)} .forma-3{bottom:-220px;right:8%;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle at 50% 50%,rgba(0,94,22,.10),rgba(0,94,22,0) 65%)} .forma-4{top:60px;left:12%;width:240px;height:240px;border-radius:50%; border:1.5px solid rgba(0,94,22,.10)} .forma-5{top:34%;right:6%;width:150px;height:150px; border-radius:28% 72% 62% 38%/46% 34% 66% 54%;background:rgba(0,153,0,.07)} .forma-6{bottom:14%;left:5%;width:190px;height:190px; border-radius:64% 36% 44% 56%/38% 62% 38% 62%;background:rgba(51,153,77,.08)} .forma-marca{position:absolute;bottom:-70px;right:-70px;opacity:.05} /* --- Faixa (cabeçalho) ------------------------------------------------------ */ .faixa{ background:linear-gradient(100deg,var(--g0),var(--g1) 55%,var(--g3)); color:#fff;padding:16px 22px;display:flex;align-items:center;gap:14px; position:relative;z-index:2; } .faixa img{display:block;flex:none} .faixa span{font:600 15px var(--fb);letter-spacing:.02em} /* --- Envoltório central ----------------------------------------------------- */ .envolve{max-width:840px;margin:0 auto;padding:40px 20px 0;position:relative;z-index:1} /* --- Barra de progresso ------------------------------------------------------ */ .progresso{margin-bottom:28px} .progresso-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px} .progresso-titulo{font:600 12px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--g0)} .progresso-contagem{font:500 12px var(--fb);color:var(--ink3);font-variant-numeric:tabular-nums} .progresso-trilho{height:9px;border-radius:999px;background:#dfeae1;overflow:hidden} .progresso-barra{ display:block;height:100%; background:linear-gradient(90deg,var(--g0),var(--g2) 60%,var(--g3)); border-radius:11px;transition:width .35s cubic-bezier(.2,.7,.2,1); } /* --- Cartão (o formulário) --------------------------------------------------- A sombra é dupla de propósito: uma bem rasa pra dar profundidade de "papel", outra larga e desfocada pra flutuar sobre o fundo verde-claro. */ .cartao{ background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px; box-shadow:0 2px 4px rgba(0,94,22,.04),0 26px 50px -34px rgba(0,94,22,.45); } /* Cada etapa entra com a mesma animação de "subir e aparecer". */ [data-etapa]{animation:subir .34s cubic-bezier(.2,.7,.2,1) both} .cartao h1{ font-family:var(--fd);font-size:36px;line-height:1.08;font-weight:600; margin:0 0 10px;color:var(--ink); } .apoio{font:400 15px/1.55 var(--fb);color:var(--ink2);margin:0 0 30px;max-width:54ch;text-wrap:pretty} /* A tela final é centralizada e um pouco mais compacta — o próprio HTML já marca esse trecho com data-etapa="fim", então dá pra ajustar sem precisar de uma classe nova. */ section[data-etapa="fim"]{text-align:center;padding:20px 0} section[data-etapa="fim"] h1{font-size:34px} section[data-etapa="fim"] .apoio{margin:0 auto 26px;max-width:46ch;line-height:1.6} /* A notinha da escala de Bristol é menor que o texto de apoio normal; o rótulo com id fixo (#rot-bristol) dá o gancho certo pra isso sem precisar de outra classe. */ #rot-bristol + .apoio{font-size:13px;margin:0 0 10px} /* --- Tela de boas-vindas ----------------------------------------------------- Mesmo cartão, mesmo h1 e mesmo .apoio das etapas: é a mesma página, não um enxerto. Só a lista dos três pontos precisa de regra própria, no tratamento de cartão claro que as listas de sim/não já usam. */ /* A animação repete a de [data-etapa] de propósito: a abertura entra igual a uma etapa, mas NÃO é uma etapa — juntar as duas no mesmo seletor faria a abertura ser varrida pelos laços que escondem e mostram etapas. */ #boas-vindas{animation:subir .34s cubic-bezier(.2,.7,.2,1) both} .pontos{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;max-width:54ch} .pontos li{ position:relative;padding:14px 16px 14px 42px; background:var(--quiet);border:1px solid var(--line);border-radius:10px; font:400 15px/1.55 var(--fb);color:var(--ink2);text-wrap:pretty; } .pontos li::before{ content:"";position:absolute;left:18px;top:21px;width:8px;height:8px;border-radius:50%; background:linear-gradient(135deg,var(--g2),var(--g3)); } /* --- Campos de formulário ---------------------------------------------------- .campo e .linha empilham com o mesmo espaçamento vertical do design; a margem de cima soma com a margem de baixo do parágrafo de apoio (30px), então o primeiro campo de cada etapa não fica com respiro dobrado. */ .campo,.linha,.grupo,.pilha{margin-top:22px} .linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px} .linha > .campo{margin-top:0} /* Caixa de destaque (bloco de atividade física): no artboard esse grupo vem sempre à vista, dentro de uma caixa própria. A regra pende de uma classe, e não mais do data-quando: aquele atributo diz QUANDO esconder, e amarrar aparência a comportamento fazia a caixa sumir junto com a condição. */ .destaque{ padding:18px; border:1.5px solid var(--g4); border-radius:12px; background:#fff; } label{ display:block;font:600 11px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase; color:var(--ink3);margin-bottom:8px; } .rotulo{ display:block;font:600 11px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase; color:var(--ink3);margin-bottom:10px; } input,textarea{ width:100%;box-sizing:border-box;font:400 15px var(--fb);font-variant-numeric:tabular-nums; color:var(--ink);background:var(--field);border:1.5px solid var(--line);border-radius:8px; padding:12px 13px;transition:border-color .15s,box-shadow .15s; } textarea{font:400 15px/1.5 var(--fb);font-variant-numeric:normal;resize:vertical} input:focus-visible,textarea:focus-visible{ outline:none;border-color:var(--g2);box-shadow:0 0 0 3px rgba(0,153,0,.18); } /* --- Grupos com destaque (ex.: "Experiência com dieta") ---------------------- */ .grupo{padding:20px;border:1.5px solid var(--g4);border-radius:12px;background:#fff} .rotulo-grupo{ display:block;font:600 11px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase; color:var(--g0);margin-bottom:16px; } /* Dentro do grupo, a pergunta de sim/não vem em linha (rótulo à esquerda, botões à direita), igual ao design — só o .campo comum é empilhado. */ .grupo > .campo{ margin-top:0;margin-bottom:18px; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; } .grupo > .campo .rotulo{margin-bottom:0} .grupo > .pilha{margin-top:0} /* --- Grupos de escolha (radiogroup) ------------------------------------------ */ .opcoes{display:flex;flex-wrap:wrap;gap:8px} .opcao{ padding:10px 17px;border-radius:11px;border:1.5px solid var(--line);background:#fff; font:500 14px var(--fb);color:var(--ink);cursor:pointer; transition:all .16s cubic-bezier(.2,.7,.2,1); } .opcao:hover{background:var(--quiet);border-color:var(--g4)} .opcao:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,153,0,.25)} .opcao[aria-checked="true"]{ background:linear-gradient(135deg,var(--g2),var(--g3)); border-color:var(--g0); color:#fff; font-weight:600; box-shadow:0 6px 16px -8px rgba(0,94,22,.8); } /* --- Pilhas e grades de itens repetidos -------------------------------------- .pilha empilha em coluna única (listas dinâmicas: ambiental, meds, hábitos, preferências, refeições). .grade é o equivalente em grade responsiva pra quando os itens internos precisam de colunas lado a lado. */ .pilha{display:grid;gap:16px} .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px} /* Itens de lista dentro de uma .pilha já ganham espaçamento do gap do grid; sem isso, cada .campo/.linha/.grupo somaria seu próprio margin-top de 22px por cima do gap (a .pilha é grid, e grid não colapsa margens). */ .pilha > .campo,.pilha > .linha,.pilha > .grupo{margin-top:0} /* --- Itens gerados em runtime pelo app.js (site/app.js:gerarListas) ---------- O HTML só traz os sete contêineres [data-lista] vazios; quem enche com marcação é o app.js, repetindo as classes da Task 3 (.campo/.opcoes/.linha/ .grupo). O artboard dá um tratamento de cartão pra cada item — como esses itens não existiam ainda quando esta folha foi escrita, o cartão faltava. */ /* Sim/não (AMBIENTAL, HABITOS_SN): rótulo à esquerda, botões à direita, dentro de um cartão claro. */ [data-lista="ambiental"] > .campo, [data-lista="habitos"] > .campo{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:12px;padding:14px 16px; background:var(--quiet);border:1px solid var(--line);border-radius:10px; } /* Experiência com dieta (FACILIDADE): já mora dentro do .grupo com borda — aqui é só a linha rótulo/botões, sem cartão próprio (senão vira caixa dentro de caixa). */ [data-lista="facilidade"] > .campo{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; } /* Preferências alimentares: cartão maior, rótulo em verde escuro. */ [data-lista="prefs"] > .campo{ padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--quiet); } [data-lista="prefs"] > .campo > label{color:var(--g0);margin-bottom:4px} /* Linha de medicamento. */ [data-lista="meds"] > .linha{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;align-items:end;padding:16px; border:1px solid var(--line);border-radius:10px;background:var(--quiet); } /* Bloco de refeição do recordatório 24h. */ [data-lista="refeicoes"] > .grupo{ padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--quiet); } /* Botões da escala de Bristol: quadrados, não pílulas. */ [data-lista="bristol"] .opcao{ width:46px;height:46px;padding:0; font:600 15px var(--fb);font-variant-numeric:tabular-nums; } #btn-add-med{margin-top:16px} /* --- Navegação e botões ------------------------------------------------------- */ .navegacao{ display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:24px; border-top:1px solid var(--line); } .nav-dica{margin-left:auto;font:500 13px var(--fb);color:var(--ink3)} .botao-principal{ padding:13px 30px;border-radius:11px;border:none; background:linear-gradient(135deg,var(--g0),var(--g1) 60%,var(--g2)); color:#fff;font:700 15px var(--fb);cursor:pointer; box-shadow:0 10px 24px -12px rgba(0,94,22,.9); transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s; } .botao-principal:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,94,22,.95)} .botao-principal:active{transform:translateY(0)} .botao-principal:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,153,0,.35)} .botao-secundario{ padding:12px 20px;border-radius:11px;border:1.5px solid var(--line);background:#fff; font:600 14px var(--fb);color:var(--ink2);cursor:pointer; transition:all .16s cubic-bezier(.2,.7,.2,1); } .botao-secundario:hover{border-color:var(--g4);color:var(--g0);background:var(--quiet)} .botao-secundario:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,153,0,.25)} /* O artboard não trata os quatro botões secundários igual — "Voltar" é o padrão acima; os outros três têm cada um seu acento, pelo id (a classe é a mesma para os quatro). */ /* "+ Adicionar medicamento": tracejado, porque é ação de acrescentar, não de navegar. */ #btn-add-med{border:1.5px dashed var(--g4);color:var(--g0)} /* "Baixar respostas em CSV": ação principal da tela final, borda verde sólida. */ #btn-csv{border:1.5px solid var(--g4);color:var(--g0)} /* "Copiar linha para planilha": secundária de verdade, fica no tratamento neutro. */ #btn-copiar{border:1.5px solid var(--line);color:var(--ink)} .botao-texto{ margin-top:20px;padding:10px 18px;border-radius:11px;border:none;background:transparent; font:600 14px var(--fb);color:var(--g0);cursor:pointer; text-decoration:underline;text-underline-offset:3px; } .botao-texto:hover{color:var(--g2)} .botao-texto:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,153,0,.25)} /* --- Tela final --------------------------------------------------------------- */ .selo{ width:76px;height:76px;margin:0 auto 22px;border-radius:999px; background:linear-gradient(135deg,var(--g2),var(--g3)); display:flex;align-items:center;justify-content:center; animation:pop .45s cubic-bezier(.2,.7,.2,1) both; } .acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* display:flex vence a regra [hidden]{display:none} do navegador, então o esconder da tela final precisa ser dito aqui — senão o CSV continua à vista. */ .acoes[hidden]{display:none} /* --- Rodapé -------------------------------------------------------------------- */ .rodape{text-align:center;font:400 12px/1.5 var(--fb);color:var(--ink3);margin:20px 0 0} /* Limpar o rascunho é uma saída, não um caminho: fica do tamanho do rodapé e sublinhado, para quem procura achar e quem não procura não tropeçar. */ .botao-limpar{ padding:0;border:none;background:transparent;font:600 12px/1.5 var(--fb);color:var(--ink3); cursor:pointer;text-decoration:underline;text-underline-offset:3px; } .botao-limpar:hover{color:var(--g0)} .botao-limpar:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,153,0,.25)} /* --- Sem JavaScript -------------------------------------------------------------- O