primocode 9.8.0-beta.8 → 9.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +3 -2
  2. package/bin/primocode.js +45 -18
  3. package/lib/act.js +16 -9
  4. package/lib/api.js +8 -1
  5. package/lib/catalogo.js +11 -3
  6. package/lib/claude-engine.js +25 -3
  7. package/lib/estudio/acervo-site.js +157 -0
  8. package/lib/estudio/assets.js +77 -3
  9. package/lib/estudio/cinema.js +399 -0
  10. package/lib/estudio/composicao.js +470 -0
  11. package/lib/estudio/edicao.js +450 -0
  12. package/lib/estudio/impacto.js +263 -0
  13. package/lib/estudio/index.js +854 -5
  14. package/lib/estudio/plano.js +5 -2
  15. package/lib/estudio/remotion.js +228 -23
  16. package/lib/estudio/slides.js +34 -30
  17. package/lib/local/cerebro.json +361 -180
  18. package/lib/local/entrada.js +18 -8
  19. package/lib/local/motor-cli.js +1 -1
  20. package/lib/offline.js +168 -0
  21. package/package.json +2 -3
  22. package/skills/design-de-verdade/SKILL.md +2 -0
  23. package/skills/motion-de-primeira/SKILL.md +1 -1
  24. package/skills/site-com-motion/SKILL.md +39 -0
  25. package/studio/narrar.py +111 -10
  26. package/studio/rostos.py +52 -0
  27. package/kits/acolhedor/index.html +0 -130
  28. package/kits/acolhedor/script.js +0 -25
  29. package/kits/acolhedor/style.css +0 -146
  30. package/kits/editorial/index.html +0 -115
  31. package/kits/editorial/script.js +0 -19
  32. package/kits/editorial/style.css +0 -112
  33. package/kits/landing/index.html +0 -162
  34. package/kits/landing/script.js +0 -199
  35. package/kits/landing/style.css +0 -219
  36. package/kits/premium/index.html +0 -83
  37. package/kits/premium/script.js +0 -11
  38. package/kits/premium/style.css +0 -87
  39. package/kits/vitrine/index.html +0 -108
  40. package/kits/vitrine/script.js +0 -20
  41. package/kits/vitrine/style.css +0 -117
  42. package/lib/kits.js +0 -206
package/kits/acolhedor/index.html DELETED
@@ -1,130 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang='pt-BR'>
3
- <head>
4
- <meta charset='UTF-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6
- <!-- TROQUE: título e descrição com o nome do negócio e o bairro -->
7
- <title>Sua Marca, o que você faz no seu bairro</title>
8
- <meta name='description' content='Uma frase que diz o que o negócio faz, onde fica e para quem.'>
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <!-- TROQUE (se quiser): as fontes. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
12
- <link href='https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Nunito:wght@400;600;700&display=swap' rel='stylesheet'>
13
- <link rel='stylesheet' href='style.css'>
14
- <script src='script.js' defer></script>
15
- </head>
16
- <body>
17
- <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
18
-
19
- <!-- TROQUE: a inicial, o nome, os links e o número do WhatsApp (só dígitos, com 55 e DDD) -->
20
- <header class='topo'>
21
- <a href='#' class='marca'><span class='marca-selo' aria-hidden='true'>S</span>Sua Marca</a>
22
- <nav class='menu' aria-label='Principal'>
23
- <a href='#servicos'>Serviços</a>
24
- <a href='#horarios'>Horários</a>
25
- <a href='https://wa.me/5500000000000' class='botao botao-pequeno'>Chamar no WhatsApp</a>
26
- </nav>
27
- </header>
28
-
29
- <main id='conteudo'>
30
- <!-- TROQUE: o convite (fale como quem atende no balcão), o texto e o bairro. A ilustração é CSS: pode mudar a letra da placa. -->
31
- <section class='abertura'>
32
- <div class='abertura-texto'>
33
- <p class='aviso'><span class='bolinha' aria-hidden='true'></span><span id='statusHoje'>Veja o horário de hoje</span></p>
34
- <h1>Um convite simples, do jeito que você falaria no balcão.</h1>
35
- <p class='abertura-lead'>Uma ou duas frases sobre o que vocês fazem, para quem e o cuidado que faz a pessoa voltar. No Seu Bairro, em Sua Cidade.</p>
36
- <div class='acoes'>
37
- <a href='https://wa.me/5500000000000' class='botao'>Chamar no WhatsApp</a>
38
- <a href='#servicos' class='botao botao-claro'>Ver os serviços</a>
39
- </div>
40
- </div>
41
- <div class='vitrine' aria-hidden='true'>
42
- <div class='sol'></div>
43
- <div class='loja'>
44
- <div class='toldo'></div>
45
- <div class='porta'><span class='placa'>S</span></div>
46
- </div>
47
- <div class='planta'></div>
48
- <div class='nuvem'></div>
49
- </div>
50
- </section>
51
-
52
- <!-- TROQUE: os serviços e os preços (se não souber o preço, apague o <span class='preco'> daquela linha) -->
53
- <section id='servicos' class='secao'>
54
- <div class='quadro'>
55
- <h2>O que a gente faz</h2>
56
- <p class='quadro-lead'>Uma frase curta sobre os serviços, e que dá para combinar pelo WhatsApp.</p>
57
- <ul class='precos'>
58
- <li><span class='item'>Primeiro serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
59
- <li><span class='item'>Segundo serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
60
- <li><span class='item'>Terceiro serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
61
- <li><span class='item'>Quarto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
62
- <li><span class='item'>Quinto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
63
- <li><span class='item'>Sexto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
64
- </ul>
65
- </div>
66
- </section>
67
-
68
- <!-- TROQUE: três motivos para escolher vocês, com palavras do dia a dia -->
69
- <section class='secao motivos'>
70
- <h2>Por que o bairro volta</h2>
71
- <ul class='motivos-lista'>
72
- <li><span class='forma forma-a' aria-hidden='true'></span><h3>O primeiro motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
73
- <li><span class='forma forma-b' aria-hidden='true'></span><h3>O segundo motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
74
- <li><span class='forma forma-c' aria-hidden='true'></span><h3>O terceiro motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
75
- </ul>
76
- </section>
77
-
78
- <!-- TROQUE: duas falas de clientes (reais; se não tiver, apague a seção inteira) -->
79
- <section class='secao falas' aria-label='O que os clientes dizem'>
80
- <figure class='fala fala-1'>
81
- <blockquote>“O que um cliente contou sobre vocês, com as palavras dele.”</blockquote>
82
- <figcaption>Nome, do bairro</figcaption>
83
- </figure>
84
- <figure class='fala fala-2'>
85
- <blockquote>“Outra fala curta, de outra pessoa, sobre outro motivo.”</blockquote>
86
- <figcaption>Nome, cliente desde 2020</figcaption>
87
- </figure>
88
- </section>
89
-
90
- <!-- TROQUE: os horários (o texto E os data-abre/data-fecha, no formato 08:00; dia fechado fica sem data-abre) e o endereço -->
91
- <section id='horarios' class='secao onde'>
92
- <div class='onde-horas'>
93
- <h2>Quando estamos abertos</h2>
94
- <table id='tabelaHorarios' class='horas'>
95
- <tbody>
96
- <tr data-dia='1' data-abre='08:00' data-fecha='18:00'><th scope='row'>Segunda</th><td>8h às 18h</td></tr>
97
- <tr data-dia='2' data-abre='08:00' data-fecha='18:00'><th scope='row'>Terça</th><td>8h às 18h</td></tr>
98
- <tr data-dia='3' data-abre='08:00' data-fecha='18:00'><th scope='row'>Quarta</th><td>8h às 18h</td></tr>
99
- <tr data-dia='4' data-abre='08:00' data-fecha='18:00'><th scope='row'>Quinta</th><td>8h às 18h</td></tr>
100
- <tr data-dia='5' data-abre='08:00' data-fecha='18:00'><th scope='row'>Sexta</th><td>8h às 18h</td></tr>
101
- <tr data-dia='6' data-abre='08:00' data-fecha='13:00'><th scope='row'>Sábado</th><td>8h às 13h</td></tr>
102
- <tr data-dia='0'><th scope='row'>Domingo</th><td>Fechado</td></tr>
103
- </tbody>
104
- </table>
105
- </div>
106
- <div class='onde-endereco'>
107
- <h2>Como chegar</h2>
108
- <p class='endereco'>Rua Exemplo, 100<br>Seu Bairro, Sua Cidade</p>
109
- <p>Um ponto de referência que ajuda a achar: ao lado de algo que todo mundo conhece.</p>
110
- <a class='botao botao-claro' href='https://www.google.com/maps/search/?api=1&amp;query=Rua+Exemplo+100+Sua+Cidade'>Abrir no mapa</a>
111
- </div>
112
- </section>
113
-
114
- <!-- TROQUE: as dúvidas que o balcão mais ouve (3 a 5) -->
115
- <section class='secao duvidas'>
116
- <h2>Perguntas de sempre</h2>
117
- <details><summary>Uma pergunta que todo cliente faz?</summary><p>A resposta curta e direta.</p></details>
118
- <details><summary>Outra pergunta comum?</summary><p>A resposta curta e direta.</p></details>
119
- <details><summary>Mais uma pergunta?</summary><p>A resposta curta e direta.</p></details>
120
- </section>
121
- </main>
122
-
123
- <!-- TROQUE: o convite final, o nome, o ano e o Instagram -->
124
- <footer class='rodape'>
125
- <p class='rodape-convite'>Passa aqui, ou manda uma mensagem.</p>
126
- <a href='https://wa.me/5500000000000' class='botao'>Chamar no WhatsApp</a>
127
- <p class='rodape-fim'>© 2026 Sua Marca, Seu Bairro. <a href='https://instagram.com/'>@suamarca</a></p>
128
- </footer>
129
- </body>
130
- </html>
package/kits/acolhedor/script.js DELETED
@@ -1,25 +0,0 @@
1
- // Acolhedor: o que o cliente de bairro mais pergunta é "está aberto agora?".
2
- // O script lê a tabela de horários (data-abre / data-fecha) e responde
3
- // no topo da página, e pinta a linha de hoje. Sem animação decorativa.
4
- (function(){
5
- var tabela=document.getElementById('tabelaHorarios');
6
- var status=document.getElementById('statusHoje');
7
- if(!tabela||!status) return;
8
- var agora=new Date(), dia=agora.getDay();
9
- var minutos=agora.getHours()*60+agora.getMinutes();
10
- function emMinutos(hhmm){ var p=String(hhmm||'').split(':'); return (+p[0])*60+(+p[1]||0); }
11
- function falar(hhmm){ var p=String(hhmm).split(':'); return (+p[0])+'h'+(p[1]&&p[1]!=='00'?p[1]:''); }
12
- var linha=tabela.querySelector('tr[data-dia="'+dia+'"]');
13
- if(!linha) return;
14
- linha.classList.add('hoje');
15
- var abre=linha.getAttribute('data-abre'), fecha=linha.getAttribute('data-fecha');
16
- if(!abre||!fecha){ status.textContent='Hoje estamos fechados'; return; }
17
- if(minutos>=emMinutos(abre)&&minutos<emMinutos(fecha)){
18
- status.textContent='Aberto agora, até as '+falar(fecha);
19
- status.parentNode.classList.add('aberto');
20
- } else if(minutos<emMinutos(abre)){
21
- status.textContent='Hoje abrimos às '+falar(abre);
22
- } else {
23
- status.textContent='Já fechamos por hoje';
24
- }
25
- })();
package/kits/acolhedor/style.css DELETED
@@ -1,146 +0,0 @@
1
- :root{
2
- /* ── A MARCA ───────────────────────────────────────────────────────
3
- Para mudar a cara da página inteira, troque SÓ estas linhas:
4
- --primaria a cor da marca (loja da ilustração, botões, títulos)
5
- --destaque o sol, o sublinhado e o dia de hoje nos horários
6
- --apoio o toldo, as falas e os detalhes
7
- --fundo o fundo da página (sempre bem claro)
8
- --fonte-titulo / --fonte-texto as duas fontes (e o link do
9
- Google Fonts no index.html)
10
- O resto do arquivo usa estas variáveis: não precisa mexer nele. */
11
- --primaria:#2f7a5f;
12
- --destaque:#ffc247;
13
- --apoio:#f28b74;
14
- --fundo:#fff9f2;
15
- --fonte-titulo:'Fredoka',system-ui,sans-serif;
16
- --fonte-texto:'Nunito',system-ui,sans-serif;
17
-
18
- --tinta:#2b2a28;
19
- --suave:#62605b;
20
- --branco:#ffffff;
21
- --raio:28px;
22
- }
23
-
24
- /* Acolhedor: formas redondas, cor quente e a fala do balcão. A ilustração
25
- é feita de CSS para não depender de foto (e não pesar no celular). */
26
- *{margin:0;padding:0;box-sizing:border-box;}
27
- html{scroll-behavior:smooth;}
28
- body{font-family:var(--fonte-texto);font-size:1.08rem;line-height:1.6;color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
29
- a{color:inherit;}
30
- :focus-visible{outline:3px solid var(--primaria);outline-offset:3px;border-radius:8px;}
31
- h1,h2,h3{font-family:var(--fonte-titulo);font-weight:600;line-height:1.12;color:var(--primaria);}
32
- h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:18px;}
33
- .pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--branco);padding:8px 14px;border-radius:10px;z-index:10;}
34
- .pular:focus{left:8px;}
35
-
36
- .topo{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:22px 24px;}
37
- .marca{display:flex;white-space:nowrap;align-items:center;gap:10px;font-family:var(--fonte-titulo);font-weight:600;font-size:1.3rem;text-decoration:none;color:var(--primaria);}
38
- .marca-selo{display:grid;place-items:center;width:42px;height:42px;border-radius:50% 50% 50% 14px;background:var(--primaria);color:var(--branco);font-size:1.2rem;}
39
- .menu{display:flex;align-items:center;gap:26px;font-weight:700;}
40
- .menu a:not(.botao){text-decoration:none;}
41
- .menu a:not(.botao):hover{text-decoration:underline;text-decoration-color:var(--destaque);text-decoration-thickness:4px;text-underline-offset:6px;}
42
-
43
- .botao{display:inline-block;padding:14px 26px;border-radius:999px;background:var(--primaria);color:var(--branco);font:700 1.02rem var(--fonte-texto);text-decoration:none;border:2px solid var(--primaria);transition:transform .2s,box-shadow .2s;}
44
- .botao:hover{transform:translateY(-2px);box-shadow:0 6px 0 color-mix(in srgb,var(--primaria) 35%,transparent);}
45
- .botao-claro{background:var(--branco);color:var(--primaria);}
46
- .botao-pequeno{padding:9px 18px;font-size:.95rem;}
47
-
48
- /* Abertura: texto à esquerda, a "lojinha" desenhada à direita */
49
- .abertura{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1180px;margin:0 auto;padding:40px 24px 90px;}
50
- .aviso{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--branco);font-weight:700;font-size:.95rem;box-shadow:0 2px 0 rgba(0,0,0,.06);margin-bottom:22px;}
51
- .bolinha{width:10px;height:10px;border-radius:50%;background:var(--suave);}
52
- .aberto .bolinha{background:#2fa35a;}
53
- .abertura h1{font-size:clamp(2.4rem,5.2vw,4.1rem);max-width:15ch;margin-bottom:20px;}
54
- .abertura-lead{font-size:1.2rem;color:var(--suave);max-width:44ch;margin-bottom:30px;}
55
- .acoes{display:flex;flex-wrap:wrap;gap:14px;}
56
-
57
- .vitrine{position:relative;aspect-ratio:1/1;max-width:500px;width:100%;justify-self:center;}
58
- .sol{position:absolute;right:4%;top:2%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--destaque);}
59
- .nuvem{position:absolute;left:0;top:14%;width:32%;height:11%;border-radius:999px;background:var(--branco);box-shadow:30px -18px 0 -4px var(--branco);}
60
- .loja{position:absolute;left:12%;right:12%;bottom:6%;top:26%;border-radius:46% 46% 22px 22px / 30% 30% 22px 22px;background:var(--primaria);overflow:hidden;}
61
- /* O toldo: listras num bloco, e a franja de meias-luas embaixo, com as
62
- mesmas duas cores alternadas (duas camadas de gradiente defasadas). */
63
- .toldo{position:absolute;left:0;right:0;top:22%;height:13%;background:repeating-linear-gradient(90deg,var(--apoio) 0 12.5%,var(--branco) 12.5% 25%);}
64
- .toldo::after{content:'';position:absolute;left:0;right:0;top:100%;height:34%;
65
- background:radial-gradient(25% 100% at 25% 0,var(--apoio) 98%,transparent) 0 0/25% 100% repeat-x,
66
- radial-gradient(25% 100% at 75% 0,var(--branco) 98%,transparent) 0 0/25% 100% repeat-x;}
67
- .porta{position:absolute;left:34%;right:34%;bottom:0;height:44%;border-radius:999px 999px 0 0;background:var(--fundo);display:grid;place-items:start center;}
68
- .placa{margin-top:22%;display:grid;place-items:center;width:44%;aspect-ratio:1;border-radius:50%;background:var(--destaque);font-family:var(--fonte-titulo);font-weight:600;color:var(--tinta);font-size:clamp(.9rem,2vw,1.4rem);}
69
- .planta{position:absolute;left:4%;bottom:6%;width:18%;aspect-ratio:1/1.3;border-radius:50% 50% 12px 12px;background:var(--apoio);}
70
- .planta::after{content:'';position:absolute;left:18%;right:18%;bottom:-2px;height:34%;border-radius:6px;background:var(--tinta);opacity:.85;}
71
-
72
- .secao{max-width:1180px;margin:0 auto;padding:70px 24px;}
73
-
74
- /* Serviços: um quadro de preços, como o que fica na parede */
75
- .quadro{background:var(--branco);border-radius:var(--raio);padding:clamp(28px,5vw,56px);box-shadow:0 3px 0 rgba(0,0,0,.05);border:2px solid color-mix(in srgb,var(--primaria) 14%,transparent);}
76
- .quadro-lead{color:var(--suave);margin-bottom:26px;max-width:52ch;}
77
- .precos{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;}
78
- .precos li{display:flex;align-items:baseline;gap:10px;padding:14px 0;font-size:1.12rem;}
79
- .item{font-weight:700;}
80
- .pontos{flex:1;border-bottom:3px dotted color-mix(in srgb,var(--primaria) 40%,transparent);transform:translateY(-5px);}
81
- .preco{font-family:var(--fonte-titulo);font-weight:600;color:var(--primaria);white-space:nowrap;}
82
-
83
- /* Motivos: uma forma de cor diferente em cada, e não um card por item */
84
- .motivos-lista{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:10px;}
85
- .motivos-lista h3{font-size:1.35rem;margin:16px 0 6px;color:var(--tinta);}
86
- .motivos-lista p{color:var(--suave);max-width:32ch;}
87
- .forma{display:block;width:64px;height:64px;}
88
- .forma-a{border-radius:50%;background:var(--destaque);}
89
- .forma-b{border-radius:22px;background:var(--apoio);transform:rotate(12deg);}
90
- .forma-c{border-radius:50% 50% 50% 8px;background:var(--primaria);}
91
-
92
- /* Falas: balões de conversa */
93
- .falas{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
94
- .fala{position:relative;padding:30px 32px;border-radius:var(--raio);}
95
- .fala blockquote{font-family:var(--fonte-titulo);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;}
96
- .fala figcaption{margin-top:14px;font-weight:700;}
97
- .fala::after{content:'';position:absolute;bottom:-18px;width:36px;height:36px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%);}
98
- .fala-1{background:var(--destaque);color:var(--tinta);}
99
- .fala-1::after{left:48px;}
100
- .fala-2{background:var(--apoio);color:var(--tinta);margin-top:56px;}
101
- .fala-2::after{right:48px;clip-path:polygon(0 0,100% 0,100% 100%);}
102
-
103
- /* Horários e endereço */
104
- .onde{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
105
- .horas{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:1.08rem;}
106
- .horas th,.horas td{padding:10px 16px;text-align:left;background:var(--branco);}
107
- .horas th{border-radius:14px 0 0 14px;font-weight:700;}
108
- .horas td{border-radius:0 14px 14px 0;text-align:right;color:var(--suave);}
109
- .horas tr.hoje th,.horas tr.hoje td{background:var(--destaque);color:var(--tinta);}
110
- .endereco{font-family:var(--fonte-titulo);font-weight:500;font-size:1.5rem;line-height:1.3;margin-bottom:12px;}
111
- .onde-endereco p:not(.endereco){color:var(--suave);margin-bottom:22px;max-width:40ch;}
112
-
113
- /* Dúvidas */
114
- .duvidas{max-width:820px;}
115
- .duvidas details{background:var(--branco);border-radius:18px;margin-bottom:12px;padding:4px 22px;}
116
- .duvidas summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px;}
117
- .duvidas summary::-webkit-details-marker{display:none;}
118
- .duvidas summary::after{content:'+';font-family:var(--fonte-titulo);font-size:1.5rem;line-height:1;color:var(--primaria);}
119
- .duvidas details[open] summary::after{content:'–';}
120
- .duvidas details p{padding:0 0 16px;color:var(--suave);}
121
-
122
- /* Rodapé com a borda de cima em ondinha */
123
- .rodape{position:relative;margin-top:60px;background:var(--primaria);color:var(--branco);text-align:center;padding:70px 24px 40px;}
124
- .rodape::before{content:'';position:absolute;left:0;right:0;top:-23px;height:24px;background:radial-gradient(24px 24px at 24px 24px,var(--primaria) 98%,transparent) 0 0/48px 24px repeat-x;}
125
- .rodape-convite{font-family:var(--fonte-titulo);font-weight:600;font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:22px;}
126
- .rodape .botao{background:var(--destaque);border-color:var(--destaque);color:var(--tinta);}
127
- .rodape-fim{margin-top:34px;opacity:.85;font-size:.95rem;}
128
-
129
- @media (max-width:860px){
130
- .abertura{grid-template-columns:1fr;padding-bottom:50px;}
131
- .vitrine{max-width:360px;order:-1;}
132
- .precos{grid-template-columns:1fr;}
133
- .motivos-lista{grid-template-columns:1fr;gap:28px;}
134
- .falas,.onde{grid-template-columns:1fr;}
135
- .fala-2{margin-top:10px;}
136
- }
137
- @media (max-width:560px){
138
- .menu a:not(.botao){display:none;}
139
- .topo{padding:16px 20px;}
140
- .marca{font-size:1.1rem;}
141
- .marca-selo{width:36px;height:36px;}
142
- .botao-pequeno{padding:8px 14px;font-size:.88rem;}
143
- .secao{padding:50px 20px;}
144
- .vitrine{max-width:260px;}
145
- }
146
- @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}
package/kits/editorial/index.html DELETED
@@ -1,115 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang='pt-BR'>
3
- <head>
4
- <meta charset='UTF-8'>
5
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
6
- <!-- TROQUE: título e descrição com o nome e a promessa do negócio -->
7
- <title>Sua Marca, o que você faz numa frase</title>
8
- <meta name='description' content='Uma frase que diz o que o negócio faz e para quem.'>
9
- <link rel='preconnect' href='https://fonts.googleapis.com'>
10
- <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
11
- <!-- TROQUE (se quiser): as fontes. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
12
- <link href='https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&display=swap' rel='stylesheet'>
13
- <link rel='stylesheet' href='style.css'>
14
- <script src='script.js' defer></script>
15
- </head>
16
- <body>
17
- <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
18
-
19
- <!-- TROQUE: o nome e os links (cada link aponta para o id de uma seção) -->
20
- <header class='topo'>
21
- <a href='#' class='marca'>Sua Marca</a>
22
- <nav class='menu' aria-label='Principal'>
23
- <a href='#servicos'>O que fazemos</a>
24
- <a href='#sobre'>Quem somos</a>
25
- <a href='#contato' class='menu-acao'>Marcar uma conversa</a>
26
- </nav>
27
- </header>
28
-
29
- <main id='conteudo'>
30
- <!-- TROQUE: a promessa em uma frase forte (o título é o elemento que marca a página), o texto de apoio e o telefone -->
31
- <section class='abertura'>
32
- <h1>A frase que diz o que você faz, sem rodeio.</h1>
33
- <div class='abertura-base'>
34
- <p class='nota'>Em Sua Cidade desde 2012</p>
35
- <p class='abertura-texto'>Duas frases para quem chegou agora: para quem é o trabalho, o que muda depois dele, e por que confiar em vocês.</p>
36
- <div class='abertura-acao'>
37
- <a href='#contato' class='botao'>Marcar uma conversa</a>
38
- <a href='tel:+5500000000000' class='telefone'>(00) 0000-0000</a>
39
- </div>
40
- </div>
41
- </section>
42
-
43
- <!-- TROQUE: os serviços. Cada <li> é uma linha: o nome à esquerda, a explicação à direita. Pode ter 3 a 6. -->
44
- <section id='servicos' class='bloco'>
45
- <h2 class='bloco-titulo'>O que fazemos</h2>
46
- <ul class='lista'>
47
- <li>
48
- <h3>O primeiro serviço</h3>
49
- <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
50
- </li>
51
- <li>
52
- <h3>O segundo serviço</h3>
53
- <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
54
- </li>
55
- <li>
56
- <h3>O terceiro serviço</h3>
57
- <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
58
- </li>
59
- <li>
60
- <h3>O quarto serviço</h3>
61
- <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
62
- </li>
63
- </ul>
64
- </section>
65
-
66
- <!-- TROQUE: uma frase de cliente (real, se houver; se não houver, apague a seção inteira) -->
67
- <section class='citacao' aria-label='O que dizem'>
68
- <blockquote>
69
- <p>“Uma frase de cliente que conta o que mudou depois do trabalho, com as palavras dele.”</p>
70
- <footer>Nome do cliente, o que ele faz</footer>
71
- </blockquote>
72
- </section>
73
-
74
- <!-- TROQUE: a história do negócio em 2 ou 3 parágrafos curtos, e os fatos ao lado (só fatos que você sabe) -->
75
- <section id='sobre' class='bloco'>
76
- <h2 class='bloco-titulo'>Quem somos</h2>
77
- <div class='sobre'>
78
- <div class='sobre-texto'>
79
- <p>O primeiro parágrafo conta de onde o negócio veio e o que ele faz melhor que os outros. Frases curtas, na voz de quem atende.</p>
80
- <p>O segundo parágrafo diz como é trabalhar com vocês: o primeiro contato, o combinado, a entrega. Nada de palavra vazia.</p>
81
- </div>
82
- <dl class='fatos'>
83
- <div><dt>Onde</dt><dd>Rua Exemplo, 100, Sua Cidade</dd></div>
84
- <div><dt>Atende</dt><dd>Para quem é o trabalho</dd></div>
85
- <div><dt>Registro</dt><dd>Um dado que dá confiança</dd></div>
86
- </dl>
87
- </div>
88
- </section>
89
-
90
- <!-- TROQUE: o convite, os contatos e a pergunta do formulário -->
91
- <section id='contato' class='bloco contato'>
92
- <h2 class='bloco-titulo'>Vamos conversar</h2>
93
- <div class='contato-grade'>
94
- <div class='contato-texto'>
95
- <p class='contato-chamada'>Conte em poucas linhas o que você precisa. A resposta chega em até um dia útil.</p>
96
- <p><a href='mailto:contato@suamarca.com.br'>contato@suamarca.com.br</a><br><a href='tel:+5500000000000'>(00) 0000-0000</a></p>
97
- </div>
98
- <form id='formContato' class='form' novalidate>
99
- <label>Seu nome<input type='text' name='nome' required autocomplete='name'></label>
100
- <label>Seu e-mail<input type='email' name='email' required autocomplete='email'></label>
101
- <label>O que você precisa?<textarea name='mensagem' rows='4' required></textarea></label>
102
- <button type='submit' class='botao'>Enviar mensagem</button>
103
- <p id='formOk' class='form-ok' role='status' hidden>Recebido. (Demonstração: o formulário ainda não envia para lugar nenhum.)</p>
104
- </form>
105
- </div>
106
- </section>
107
- </main>
108
-
109
- <!-- TROQUE: ano, nome e cidade -->
110
- <footer class='rodape'>
111
- <p>© 2026 Sua Marca, Sua Cidade</p>
112
- <a href='#'>Voltar ao topo</a>
113
- </footer>
114
- </body>
115
- </html>
package/kits/editorial/script.js DELETED
@@ -1,19 +0,0 @@
1
- // Editorial: a página não se mexe sozinha (a força dela é o tipo parado).
2
- // O script só confirma o formulário, porque ainda não há servidor.
3
- (function(){
4
- var form=document.getElementById('formContato');
5
- var ok=document.getElementById('formOk');
6
- if(!form||!ok) return;
7
- form.addEventListener('submit',function(e){
8
- e.preventDefault();
9
- // Sem o novalidate o navegador mostraria balões em inglês em alguns sistemas;
10
- // aqui a checagem é a mesma, mas o foco vai para o primeiro campo vazio.
11
- if(!form.checkValidity()){
12
- var vazio=form.querySelector(':invalid');
13
- if(vazio) vazio.focus();
14
- return;
15
- }
16
- ok.hidden=false;
17
- form.reset();
18
- });
19
- })();
package/kits/editorial/style.css DELETED
@@ -1,112 +0,0 @@
1
- :root{
2
- /* ── A MARCA ───────────────────────────────────────────────────────
3
- Para mudar a cara da página inteira, troque SÓ estas linhas:
4
- --primaria a cor da marca (título, linhas grossas, links)
5
- --destaque o botão e a seleção de texto
6
- --apoio o fundo claro da citação
7
- --fonte-titulo / --fonte-texto as duas fontes (e o link do
8
- Google Fonts no index.html)
9
- O resto do arquivo usa estas variáveis: não precisa mexer nele. */
10
- --primaria:#1432c8;
11
- --destaque:#111111;
12
- --apoio:#e7ebfb;
13
- --fonte-titulo:'Archivo',system-ui,sans-serif;
14
- --fonte-texto:'Newsreader',Georgia,serif;
15
-
16
- --tinta:#141414;
17
- --cinza:#5e5e5e;
18
- --papel:#fcfcfb;
19
- --linha:#d9d9d6;
20
- --lado:clamp(20px,5vw,72px);
21
- }
22
-
23
- /* Editorial: a página é uma grade de 12 colunas e tudo encosta à esquerda.
24
- A hierarquia vem do TAMANHO do tipo e das linhas, não de caixas. */
25
- *{margin:0;padding:0;box-sizing:border-box;}
26
- html{scroll-behavior:smooth;}
27
- body{font-family:var(--fonte-texto);font-size:1.125rem;line-height:1.6;color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;}
28
- a{color:inherit;}
29
- ::selection{background:var(--destaque);color:var(--papel);}
30
- :focus-visible{outline:3px solid var(--primaria);outline-offset:3px;}
31
- h1,h2,h3{font-family:var(--fonte-titulo);font-weight:800;line-height:1;letter-spacing:-.02em;}
32
-
33
- .pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--papel);padding:8px 14px;z-index:10;}
34
- .pular:focus{left:8px;}
35
-
36
- /* Topo: uma linha fina, sem fundo de vidro nem sombra */
37
- .topo{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px var(--lado);border-bottom:1px solid var(--tinta);}
38
- .marca{font-family:var(--fonte-titulo);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;font-stretch:90%;}
39
- .menu{display:flex;gap:28px;font-family:var(--fonte-titulo);font-size:.98rem;}
40
- .menu a{text-decoration:none;}
41
- .menu a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;}
42
- .menu-acao{color:var(--primaria);font-weight:700;}
43
-
44
- /* Abertura: o título enorme e estreito é o único elemento que grita */
45
- .abertura{padding:clamp(48px,9vw,120px) var(--lado) clamp(40px,6vw,80px);border-bottom:6px solid var(--primaria);}
46
- .abertura h1{font-size:clamp(3rem,11vw,11.5rem);font-stretch:68%;font-weight:850;line-height:.88;letter-spacing:-.03em;max-width:15ch;color:var(--primaria);}
47
- .abertura-base{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(36px,5vw,64px);align-items:start;}
48
- .nota{grid-column:1/4;font-family:var(--fonte-titulo);font-size:.95rem;color:var(--cinza);padding-top:6px;border-top:1px solid var(--tinta);}
49
- .abertura-texto{grid-column:4/9;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;max-width:36ch;}
50
- .abertura-acao{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
51
- .telefone{font-family:var(--fonte-titulo);font-size:1.05rem;text-decoration:none;border-bottom:1px solid currentColor;}
52
-
53
- .botao{display:inline-block;padding:15px 26px;background:var(--destaque);color:var(--papel);font:700 1rem var(--fonte-titulo);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background .2s;}
54
- .botao:hover{background:var(--primaria);}
55
-
56
- /* Blocos: o título mora na coluna estreita da esquerda, o conteúdo na larga */
57
- .bloco{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(56px,8vw,112px) var(--lado);border-bottom:1px solid var(--linha);}
58
- .bloco-titulo{grid-column:1/4;font-size:clamp(1.5rem,2.2vw,2rem);font-stretch:85%;align-self:start;position:sticky;top:24px;}
59
- .lista,.sobre,.contato-grade{grid-column:4/13;}
60
-
61
- /* Serviços: linhas com filete, como índice de revista, e não cards */
62
- .lista{list-style:none;border-top:2px solid var(--tinta);}
63
- .lista li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:26px 0 30px;border-bottom:1px solid var(--linha);}
64
- .lista h3{font-size:clamp(1.35rem,2.3vw,2.1rem);font-stretch:80%;font-weight:750;}
65
- .lista p{color:#333;max-width:48ch;}
66
-
67
- /* Citação: o respiro no meio da página */
68
- .citacao{background:var(--apoio);padding:clamp(64px,9vw,128px) var(--lado);}
69
- .citacao blockquote{max-width:1100px;margin-left:calc((100% - 0px)/12*3);}
70
- .citacao p{font-style:italic;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.2;letter-spacing:-.01em;max-width:30ch;}
71
- .citacao footer{margin-top:24px;font-family:var(--fonte-titulo);font-size:1rem;color:var(--cinza);}
72
-
73
- /* Quem somos: texto em coluna de leitura, fatos numa lista seca ao lado */
74
- .sobre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;}
75
- .sobre-texto p{max-width:60ch;}
76
- .sobre-texto p+p{margin-top:1em;}
77
- .sobre-texto p:first-child::first-letter{float:left;font-family:var(--fonte-titulo);font-weight:850;font-stretch:70%;font-size:4.6em;line-height:.8;padding:6px 10px 0 0;color:var(--primaria);}
78
- .fatos{border-top:2px solid var(--tinta);}
79
- .fatos div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linha);}
80
- .fatos dt{font-family:var(--fonte-titulo);font-weight:700;font-size:.95rem;}
81
- .fatos dd{font-size:1.02rem;}
82
-
83
- /* Contato */
84
- .contato{border-bottom:0;}
85
- .contato-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;}
86
- .contato-chamada{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.35;margin-bottom:20px;max-width:26ch;}
87
- .contato-texto a{font-family:var(--fonte-titulo);text-underline-offset:4px;}
88
- .form{display:grid;gap:22px;}
89
- .form label{display:grid;gap:6px;font-family:var(--fonte-titulo);font-size:.95rem;font-weight:600;}
90
- .form input,.form textarea{font:inherit;font-family:var(--fonte-texto);font-size:1.1rem;font-weight:400;padding:10px 0;border:0;border-bottom:2px solid var(--tinta);background:transparent;color:var(--tinta);border-radius:0;resize:vertical;}
91
- .form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--primaria);}
92
- .form .botao{justify-self:start;}
93
- .form-ok{font-family:var(--fonte-titulo);color:var(--primaria);}
94
-
95
- .rodape{display:flex;justify-content:space-between;gap:20px;padding:26px var(--lado);border-top:6px solid var(--primaria);font-family:var(--fonte-titulo);font-size:.95rem;}
96
-
97
- /* Celular: a grade vira uma coluna, e o título do bloco sobe para cima */
98
- @media (max-width:900px){
99
- .abertura-base,.bloco{grid-template-columns:1fr;}
100
- .nota,.abertura-texto,.abertura-acao,.bloco-titulo,.lista,.sobre,.contato-grade{grid-column:auto;}
101
- .bloco-titulo{position:static;}
102
- .abertura-acao{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;}
103
- .sobre,.contato-grade{grid-template-columns:1fr;gap:36px;}
104
- .citacao blockquote{margin-left:0;}
105
- }
106
- @media (max-width:640px){
107
- .menu a:not(.menu-acao){display:none;}
108
- .lista li{grid-template-columns:1fr;gap:8px;}
109
- .abertura h1{font-size:clamp(2.9rem,15vw,5rem);}
110
- .rodape{flex-direction:column;}
111
- }
112
- @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}