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.
- package/README.md +3 -2
- package/bin/primocode.js +45 -18
- package/lib/act.js +16 -9
- package/lib/api.js +8 -1
- package/lib/catalogo.js +11 -3
- package/lib/claude-engine.js +25 -3
- package/lib/estudio/acervo-site.js +157 -0
- package/lib/estudio/assets.js +77 -3
- package/lib/estudio/cinema.js +399 -0
- package/lib/estudio/composicao.js +470 -0
- package/lib/estudio/edicao.js +450 -0
- package/lib/estudio/impacto.js +263 -0
- package/lib/estudio/index.js +854 -5
- package/lib/estudio/plano.js +5 -2
- package/lib/estudio/remotion.js +228 -23
- package/lib/estudio/slides.js +34 -30
- package/lib/local/cerebro.json +361 -180
- package/lib/local/entrada.js +18 -8
- package/lib/local/motor-cli.js +1 -1
- package/lib/offline.js +168 -0
- package/package.json +2 -3
- package/skills/design-de-verdade/SKILL.md +2 -0
- package/skills/motion-de-primeira/SKILL.md +1 -1
- package/skills/site-com-motion/SKILL.md +39 -0
- package/studio/narrar.py +111 -10
- package/studio/rostos.py +52 -0
- package/kits/acolhedor/index.html +0 -130
- package/kits/acolhedor/script.js +0 -25
- package/kits/acolhedor/style.css +0 -146
- package/kits/editorial/index.html +0 -115
- package/kits/editorial/script.js +0 -19
- package/kits/editorial/style.css +0 -112
- package/kits/landing/index.html +0 -162
- package/kits/landing/script.js +0 -199
- package/kits/landing/style.css +0 -219
- package/kits/premium/index.html +0 -83
- package/kits/premium/script.js +0 -11
- package/kits/premium/style.css +0 -87
- package/kits/vitrine/index.html +0 -108
- package/kits/vitrine/script.js +0 -20
- package/kits/vitrine/style.css +0 -117
- package/lib/kits.js +0 -206
package/kits/landing/index.html
DELETED
|
@@ -1,162 +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
|
-
<link href='https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap' rel='stylesheet'>
|
|
12
|
-
<link rel='stylesheet' href='style.css'>
|
|
13
|
-
<script src='script.js' defer></script>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<div class='progress' id='progress'></div>
|
|
17
|
-
<div class='cursor-glow' id='glow' aria-hidden='true'></div>
|
|
18
|
-
|
|
19
|
-
<!-- TROQUE: a inicial, o nome e os links (cada link aponta para o id de uma seção) -->
|
|
20
|
-
<nav class='nav' id='nav'>
|
|
21
|
-
<a href='#hero' class='brand'>
|
|
22
|
-
<span class='brand-mark'>S</span>
|
|
23
|
-
<span>Sua Marca</span>
|
|
24
|
-
</a>
|
|
25
|
-
<div class='nav-links'>
|
|
26
|
-
<a href='#modelo'>Como funciona</a>
|
|
27
|
-
<a href='#produtos'>O que fazemos</a>
|
|
28
|
-
<a href='#imersao'>Oferta</a>
|
|
29
|
-
<a href='#contato' class='btn btn-small magnetic'>Fale com a gente</a>
|
|
30
|
-
</div>
|
|
31
|
-
</nav>
|
|
32
|
-
|
|
33
|
-
<!-- TROQUE: a promessa. O <em> é a palavra que brilha: uma só. Os números contam sozinhos (data-count). -->
|
|
34
|
-
<header id='hero' class='hero'>
|
|
35
|
-
<canvas id='net' class='hero-canvas' aria-hidden='true'></canvas>
|
|
36
|
-
<div class='blob b1' aria-hidden='true'></div>
|
|
37
|
-
<div class='blob b2' aria-hidden='true'></div>
|
|
38
|
-
<div class='blob b3' aria-hidden='true'></div>
|
|
39
|
-
<div class='hero-inner'>
|
|
40
|
-
<p class='eyebrow reveal'><span class='dot'></span>O que você é · Cidade</p>
|
|
41
|
-
<h1 class='split'>A frase que <em>vende</em> o negócio.</h1>
|
|
42
|
-
<p class='lead reveal' style='--d:.7s'>Uma frase curta que explica para quem é e o que muda na vida de quem compra.</p>
|
|
43
|
-
<div class='hero-actions reveal' style='--d:.9s'>
|
|
44
|
-
<a href='#contato' class='btn magnetic'><span>A ação principal</span></a>
|
|
45
|
-
<a href='#modelo' class='btn btn-ghost magnetic'><span>Saiba mais</span></a>
|
|
46
|
-
</div>
|
|
47
|
-
<dl class='stats reveal' style='--d:1.1s'>
|
|
48
|
-
<div><dt><span data-count='10'>0</span> anos</dt><dd>de um fato que dá confiança</dd></div>
|
|
49
|
-
<div><dt><span data-count='500'>0</span>+</dt><dd>clientes atendidos</dd></div>
|
|
50
|
-
<div><dt><span data-count='4'>0</span>,9</dt><dd>de nota média</dd></div>
|
|
51
|
-
</dl>
|
|
52
|
-
</div>
|
|
53
|
-
<a href='#modelo' class='scroll-hint' aria-label='Rolar para baixo'><span></span></a>
|
|
54
|
-
</header>
|
|
55
|
-
|
|
56
|
-
<!-- TROQUE: 5 palavras-chave do negócio. A lista se repete DUAS vezes (é o que faz a faixa rodar sem emenda). -->
|
|
57
|
-
<div class='marquee' aria-hidden='true'>
|
|
58
|
-
<div class='marquee-track'>
|
|
59
|
-
<span>Palavra um</span><i>✦</i><span>Palavra dois</span><i>✦</i><span>Palavra três</span><i>✦</i><span>Palavra quatro</span><i>✦</i><span>Palavra cinco</span><i>✦</i>
|
|
60
|
-
<span>Palavra um</span><i>✦</i><span>Palavra dois</span><i>✦</i><span>Palavra três</span><i>✦</i><span>Palavra quatro</span><i>✦</i><span>Palavra cinco</span><i>✦</i>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<!-- TROQUE: os 3 diferenciais (ou os 3 passos de como funciona) -->
|
|
65
|
-
<section id='modelo' class='section'>
|
|
66
|
-
<p class='eyebrow reveal'>Como funciona</p>
|
|
67
|
-
<h2 class='reveal'>Por que escolher a <em>gente</em>.</h2>
|
|
68
|
-
<div class='cards'>
|
|
69
|
-
<article class='card tilt reveal' style='--d:.05s'>
|
|
70
|
-
<span class='card-tag tag-blue'>01</span>
|
|
71
|
-
<h3>O primeiro diferencial</h3>
|
|
72
|
-
<p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
|
|
73
|
-
</article>
|
|
74
|
-
<article class='card tilt reveal' style='--d:.15s'>
|
|
75
|
-
<span class='card-tag tag-orange'>02</span>
|
|
76
|
-
<h3>O segundo diferencial</h3>
|
|
77
|
-
<p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
|
|
78
|
-
</article>
|
|
79
|
-
<article class='card tilt reveal' style='--d:.25s'>
|
|
80
|
-
<span class='card-tag tag-cyan'>03</span>
|
|
81
|
-
<h3>O terceiro diferencial</h3>
|
|
82
|
-
<p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
|
|
83
|
-
</article>
|
|
84
|
-
</div>
|
|
85
|
-
</section>
|
|
86
|
-
|
|
87
|
-
<!-- TROQUE: o que o negócio oferece. O número no círculo é o destaque (data-count). -->
|
|
88
|
-
<section id='produtos' class='section section-dark'>
|
|
89
|
-
<div class='products'>
|
|
90
|
-
<div class='products-text'>
|
|
91
|
-
<p class='eyebrow reveal'>O que fazemos</p>
|
|
92
|
-
<h2 class='reveal'>Tudo o que você <em>precisa</em></h2>
|
|
93
|
-
<p class='section-lead reveal'>Uma frase sobre os produtos ou serviços, e onde ver todos.</p>
|
|
94
|
-
<a href='#contato' class='btn magnetic reveal'><span>Ver os serviços ↗</span></a>
|
|
95
|
-
</div>
|
|
96
|
-
<div class='orbit reveal' aria-hidden='true'>
|
|
97
|
-
<div class='orbit-core'><strong data-count='12'>0</strong><small>serviços</small></div>
|
|
98
|
-
<div class='ring r1'></div>
|
|
99
|
-
<div class='ring r2'></div>
|
|
100
|
-
<div class='ring r3'></div>
|
|
101
|
-
<div class='orbit-dots' id='orbitDots'></div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
</section>
|
|
105
|
-
|
|
106
|
-
<!-- TROQUE: a oferta principal (um plano, um evento, uma promoção) e as 3 etapas ou opções dela -->
|
|
107
|
-
<section id='imersao' class='section'>
|
|
108
|
-
<div class='split-box reveal'>
|
|
109
|
-
<div>
|
|
110
|
-
<p class='eyebrow'>A oferta</p>
|
|
111
|
-
<h2>A oferta em <em>uma linha</em>.</h2>
|
|
112
|
-
<p>O que a pessoa leva, quanto tempo leva, e por que agora.</p>
|
|
113
|
-
<div class='days'><span>Etapa 1</span><span>Etapa 2</span><span>Etapa 3</span></div>
|
|
114
|
-
</div>
|
|
115
|
-
<a href='#contato' class='btn magnetic'><span>Quero essa oferta</span></a>
|
|
116
|
-
</div>
|
|
117
|
-
</section>
|
|
118
|
-
|
|
119
|
-
<!-- TROQUE: a captura (lista de espera, newsletter, cupom). Os 3 itens dizem o que a pessoa recebe. -->
|
|
120
|
-
<section id='newsletter' class='section section-accent'>
|
|
121
|
-
<div class='accent-grid' aria-hidden='true'></div>
|
|
122
|
-
<div class='news'>
|
|
123
|
-
<div class='news-text'>
|
|
124
|
-
<p class='eyebrow reveal'>Novidades</p>
|
|
125
|
-
<h2 class='reveal'>O motivo para deixar o <em>e-mail</em>.</h2>
|
|
126
|
-
<p class='news-lead reveal' style='--d:.15s'>O que chega, com que frequência, e a promessa de não encher.</p>
|
|
127
|
-
<ol class='news-list'>
|
|
128
|
-
<li class='reveal' style='--d:.2s'><span class='news-num'>01</span><div><strong>O primeiro benefício</strong><p>Uma frase concreta.</p></div></li>
|
|
129
|
-
<li class='reveal' style='--d:.26s'><span class='news-num'>02</span><div><strong>O segundo benefício</strong><p>Uma frase concreta.</p></div></li>
|
|
130
|
-
<li class='reveal' style='--d:.32s'><span class='news-num'>03</span><div><strong>O terceiro benefício</strong><p>Uma frase concreta.</p></div></li>
|
|
131
|
-
</ol>
|
|
132
|
-
</div>
|
|
133
|
-
<form class='news-form reveal' style='--d:.3s' onsubmit="event.preventDefault(); this.querySelector('.form-ok').hidden = false; this.reset();">
|
|
134
|
-
<p class='news-form-title'>Quero receber</p>
|
|
135
|
-
<label class='field'><input type='email' name='email' placeholder=' ' required autocomplete='email'><span>Seu e-mail</span></label>
|
|
136
|
-
<button type='submit' class='btn btn-light magnetic'><span>Quero receber</span></button>
|
|
137
|
-
<p class='news-note'>Sem spam. Cancele quando quiser.</p>
|
|
138
|
-
<p class='form-ok' hidden>Anotado! (Demonstração: ainda não envia para lugar nenhum.)</p>
|
|
139
|
-
</form>
|
|
140
|
-
</div>
|
|
141
|
-
</section>
|
|
142
|
-
|
|
143
|
-
<!-- TROQUE: o convite final e a pergunta do último campo -->
|
|
144
|
-
<section id='contato' class='section'>
|
|
145
|
-
<p class='eyebrow reveal'>Contato</p>
|
|
146
|
-
<h2 class='reveal'>Fale com a <em>gente</em></h2>
|
|
147
|
-
<form class='reveal' onsubmit="event.preventDefault(); this.querySelector('.form-ok').hidden = false; this.reset();">
|
|
148
|
-
<label class='field'><input type='text' name='nome' placeholder=' ' required><span>Seu nome</span></label>
|
|
149
|
-
<label class='field'><input type='email' name='email' placeholder=' ' required><span>Seu e-mail</span></label>
|
|
150
|
-
<label class='field'><textarea name='mensagem' rows='4' placeholder=' ' required></textarea><span>Como podemos ajudar?</span></label>
|
|
151
|
-
<button type='submit' class='btn magnetic'><span>Enviar</span></button>
|
|
152
|
-
<p class='form-ok' hidden>Recebido! (Demonstração: o formulário ainda não envia para lugar nenhum.)</p>
|
|
153
|
-
</form>
|
|
154
|
-
</section>
|
|
155
|
-
|
|
156
|
-
<!-- TROQUE: ano, nome, cidade e o link -->
|
|
157
|
-
<footer class='footer'>
|
|
158
|
-
<p>© 2026 Sua Marca · Cidade</p>
|
|
159
|
-
<a href='#hero'>voltar ao topo</a>
|
|
160
|
-
</footer>
|
|
161
|
-
</body>
|
|
162
|
-
</html>
|
package/kits/landing/script.js
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
(function(){
|
|
2
|
-
var d=document, root=d.documentElement;
|
|
3
|
-
root.classList.add('js');
|
|
4
|
-
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
5
|
-
var fine=matchMedia('(hover: hover) and (pointer: fine)').matches;
|
|
6
|
-
|
|
7
|
-
// Título que sobe palavra por palavra
|
|
8
|
-
d.querySelectorAll('.split').forEach(function(el){
|
|
9
|
-
var i=0;
|
|
10
|
-
function wrap(content){
|
|
11
|
-
var w=d.createElement('span'); w.className='w';
|
|
12
|
-
var s=d.createElement('span'); s.style.setProperty('--i',i++);
|
|
13
|
-
s.appendChild(content); w.appendChild(s); return w;
|
|
14
|
-
}
|
|
15
|
-
Array.from(el.childNodes).forEach(function(n){
|
|
16
|
-
if(n.nodeType===3){
|
|
17
|
-
var frag=d.createDocumentFragment();
|
|
18
|
-
n.textContent.split(/(\s+)/).forEach(function(part){
|
|
19
|
-
if(!part) return;
|
|
20
|
-
if(/^\s+$/.test(part)){ frag.appendChild(d.createTextNode(' ')); return; }
|
|
21
|
-
frag.appendChild(wrap(d.createTextNode(part)));
|
|
22
|
-
});
|
|
23
|
-
n.replaceWith(frag);
|
|
24
|
-
} else if(n.nodeType===1){
|
|
25
|
-
var holder=d.createElement('span');
|
|
26
|
-
n.replaceWith(holder);
|
|
27
|
-
holder.replaceWith(wrap(n));
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
// Aparecer ao rolar
|
|
33
|
-
var io=new IntersectionObserver(function(es){
|
|
34
|
-
es.forEach(function(e){
|
|
35
|
-
if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
|
|
36
|
-
});
|
|
37
|
-
},{threshold:.15,rootMargin:'0px 0px -8% 0px'});
|
|
38
|
-
d.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
|
39
|
-
|
|
40
|
-
// Contadores
|
|
41
|
-
function count(el){
|
|
42
|
-
var to=+el.dataset.count, t0=null, dur=1600;
|
|
43
|
-
if(reduce){ el.textContent=to; return; }
|
|
44
|
-
function step(t){
|
|
45
|
-
if(!t0) t0=t;
|
|
46
|
-
var p=Math.min((t-t0)/dur,1);
|
|
47
|
-
el.textContent=Math.round(to*(1-Math.pow(1-p,3)));
|
|
48
|
-
if(p<1) requestAnimationFrame(step);
|
|
49
|
-
}
|
|
50
|
-
requestAnimationFrame(step);
|
|
51
|
-
}
|
|
52
|
-
var co=new IntersectionObserver(function(es){
|
|
53
|
-
es.forEach(function(e){
|
|
54
|
-
if(e.isIntersecting){ setTimeout(function(){ count(e.target); },400); co.unobserve(e.target); }
|
|
55
|
-
});
|
|
56
|
-
},{threshold:.5});
|
|
57
|
-
d.querySelectorAll('[data-count]').forEach(function(el){ co.observe(el); });
|
|
58
|
-
|
|
59
|
-
// Barra de progresso e nav que encolhe e se esconde
|
|
60
|
-
var nav=d.getElementById('nav'), bar=d.getElementById('progress'), last=0, ticking=false;
|
|
61
|
-
function onScroll(){
|
|
62
|
-
var y=scrollY, h=root.scrollHeight-innerHeight;
|
|
63
|
-
bar.style.setProperty('--p',h>0?y/h:0);
|
|
64
|
-
nav.classList.toggle('scrolled',y>40);
|
|
65
|
-
nav.classList.toggle('hidden',y>last&&y>500);
|
|
66
|
-
last=y; ticking=false;
|
|
67
|
-
}
|
|
68
|
-
addEventListener('scroll',function(){
|
|
69
|
-
if(!ticking){ ticking=true; requestAnimationFrame(onScroll); }
|
|
70
|
-
},{passive:true});
|
|
71
|
-
onScroll();
|
|
72
|
-
|
|
73
|
-
// Brilho que segue o cursor
|
|
74
|
-
var glow=d.getElementById('glow');
|
|
75
|
-
if(fine&&!reduce&&glow){
|
|
76
|
-
var gx=innerWidth/2, gy=innerHeight/2, tx=gx, ty=gy;
|
|
77
|
-
addEventListener('mousemove',function(e){ tx=e.clientX; ty=e.clientY; });
|
|
78
|
-
(function loop(){
|
|
79
|
-
gx+=(tx-gx)*.12; gy+=(ty-gy)*.12;
|
|
80
|
-
glow.style.setProperty('--gx',gx+'px');
|
|
81
|
-
glow.style.setProperty('--gy',gy+'px');
|
|
82
|
-
requestAnimationFrame(loop);
|
|
83
|
-
})();
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// Botões magnéticos
|
|
87
|
-
if(fine&&!reduce){
|
|
88
|
-
d.querySelectorAll('.magnetic').forEach(function(b){
|
|
89
|
-
var s=b.querySelector('span');
|
|
90
|
-
b.addEventListener('mousemove',function(e){
|
|
91
|
-
var r=b.getBoundingClientRect(), x=e.clientX-r.left-r.width/2, y=e.clientY-r.top-r.height/2;
|
|
92
|
-
b.style.transform='translate('+x*.25+'px,'+y*.35+'px)';
|
|
93
|
-
if(s) s.style.transform='translate('+x*.12+'px,'+y*.18+'px)';
|
|
94
|
-
});
|
|
95
|
-
b.addEventListener('mouseleave',function(){
|
|
96
|
-
b.style.transform='';
|
|
97
|
-
if(s) s.style.transform='';
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// Cards com inclinação 3D e luz que segue o mouse
|
|
103
|
-
d.querySelectorAll('.tilt').forEach(function(c){
|
|
104
|
-
c.addEventListener('mouseenter',function(){
|
|
105
|
-
c.style.transition='transform .15s ease-out,box-shadow .4s,opacity .9s,filter .9s';
|
|
106
|
-
});
|
|
107
|
-
c.addEventListener('mousemove',function(e){
|
|
108
|
-
var r=c.getBoundingClientRect(), px=(e.clientX-r.left)/r.width, py=(e.clientY-r.top)/r.height;
|
|
109
|
-
c.style.setProperty('--mx',px*100+'%');
|
|
110
|
-
c.style.setProperty('--my',py*100+'%');
|
|
111
|
-
if(fine&&!reduce){
|
|
112
|
-
c.style.setProperty('--ry',((px-.5)*14)+'deg');
|
|
113
|
-
c.style.setProperty('--rx',((.5-py)*14)+'deg');
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
c.addEventListener('mouseleave',function(){
|
|
117
|
-
c.style.transition='transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .4s,opacity .9s,filter .9s';
|
|
118
|
-
c.style.setProperty('--rx','0deg');
|
|
119
|
-
c.style.setProperty('--ry','0deg');
|
|
120
|
-
});
|
|
121
|
-
});
|
|
122
|
-
|
|
123
|
-
// Órbita: um ponto por produto no ar
|
|
124
|
-
var od=d.getElementById('orbitDots');
|
|
125
|
-
if(od){
|
|
126
|
-
var colors=['var(--cyan)','var(--orange)','#ffffff','#6f8cff'], rings=[.30,.42,.54], dots=[];
|
|
127
|
-
for(var k=0;k<9;k++){
|
|
128
|
-
var dot=d.createElement('i');
|
|
129
|
-
dot.style.setProperty('--a',(k*40+(k%3)*13)+'deg');
|
|
130
|
-
dot.style.setProperty('--c',colors[k%4]);
|
|
131
|
-
dot.dataset.f=rings[k%3];
|
|
132
|
-
od.appendChild(dot); dots.push(dot);
|
|
133
|
-
}
|
|
134
|
-
var sizeDots=function(){
|
|
135
|
-
var w=od.offsetWidth;
|
|
136
|
-
dots.forEach(function(i){ i.style.setProperty('--r',(w*i.dataset.f)+'px'); });
|
|
137
|
-
};
|
|
138
|
-
sizeDots();
|
|
139
|
-
addEventListener('resize',sizeDots);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
// Rede de partículas no hero
|
|
143
|
-
var cv=d.getElementById('net');
|
|
144
|
-
if(cv&&cv.getContext){
|
|
145
|
-
var ctx=cv.getContext('2d'), hero=cv.parentElement, W=0, H=0, pts=[], mouse={x:-9999,y:-9999}, visible=true, raf=0;
|
|
146
|
-
var resize=function(){
|
|
147
|
-
var dpr=Math.min(devicePixelRatio||1,2);
|
|
148
|
-
W=hero.offsetWidth; H=hero.offsetHeight;
|
|
149
|
-
cv.width=W*dpr; cv.height=H*dpr;
|
|
150
|
-
ctx.setTransform(dpr,0,0,dpr,0,0);
|
|
151
|
-
var n=Math.round(Math.min(90,W*H/16000));
|
|
152
|
-
pts=[];
|
|
153
|
-
for(var k=0;k<n;k++) pts.push({x:Math.random()*W,y:Math.random()*H,vx:(Math.random()-.5)*.35,vy:(Math.random()-.5)*.35,r:Math.random()*1.6+.6});
|
|
154
|
-
};
|
|
155
|
-
hero.addEventListener('mousemove',function(e){
|
|
156
|
-
var r=cv.getBoundingClientRect(); mouse.x=e.clientX-r.left; mouse.y=e.clientY-r.top;
|
|
157
|
-
});
|
|
158
|
-
hero.addEventListener('mouseleave',function(){ mouse.x=mouse.y=-9999; });
|
|
159
|
-
var frame=function(){
|
|
160
|
-
ctx.clearRect(0,0,W,H);
|
|
161
|
-
var i,j,p,q,dx,dy,dist;
|
|
162
|
-
for(i=0;i<pts.length;i++){
|
|
163
|
-
p=pts[i];
|
|
164
|
-
p.x+=p.vx; p.y+=p.vy;
|
|
165
|
-
if(p.x<0||p.x>W) p.vx*=-1;
|
|
166
|
-
if(p.y<0||p.y>H) p.vy*=-1;
|
|
167
|
-
dx=p.x-mouse.x; dy=p.y-mouse.y; dist=Math.sqrt(dx*dx+dy*dy)||1;
|
|
168
|
-
if(dist<150){
|
|
169
|
-
var f=(1-dist/150)*1.2;
|
|
170
|
-
p.x+=dx/dist*f; p.y+=dy/dist*f;
|
|
171
|
-
ctx.strokeStyle='rgba(249,115,22,'+((1-dist/150)*.5)+')';
|
|
172
|
-
ctx.lineWidth=1;
|
|
173
|
-
ctx.beginPath(); ctx.moveTo(p.x,p.y); ctx.lineTo(mouse.x,mouse.y); ctx.stroke();
|
|
174
|
-
}
|
|
175
|
-
for(j=i+1;j<pts.length;j++){
|
|
176
|
-
q=pts[j]; dx=p.x-q.x; dy=p.y-q.y;
|
|
177
|
-
var dd=dx*dx+dy*dy;
|
|
178
|
-
if(dd<16900){
|
|
179
|
-
ctx.strokeStyle='rgba(31,180,207,'+((1-Math.sqrt(dd)/130)*.3)+')';
|
|
180
|
-
ctx.lineWidth=.8;
|
|
181
|
-
ctx.beginPath(); ctx.moveTo(p.x,p.y); ctx.lineTo(q.x,q.y); ctx.stroke();
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
ctx.fillStyle='rgba(255,255,255,.75)';
|
|
185
|
-
ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
|
|
186
|
-
}
|
|
187
|
-
if(visible&&!reduce) raf=requestAnimationFrame(frame);
|
|
188
|
-
};
|
|
189
|
-
new IntersectionObserver(function(es){
|
|
190
|
-
visible=es[0].isIntersecting;
|
|
191
|
-
cancelAnimationFrame(raf);
|
|
192
|
-
if(visible) raf=requestAnimationFrame(frame);
|
|
193
|
-
}).observe(hero);
|
|
194
|
-
var rt;
|
|
195
|
-
addEventListener('resize',function(){ clearTimeout(rt); rt=setTimeout(function(){ resize(); if(reduce) frame(); },150); });
|
|
196
|
-
resize();
|
|
197
|
-
if(reduce) frame();
|
|
198
|
-
}
|
|
199
|
-
})();
|
package/kits/landing/style.css
DELETED
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
:root{
|
|
2
|
-
/* ── AS CORES DA MARCA ─────────────────────────────────────────────
|
|
3
|
-
Para mudar a cara da página inteira, troque SÓ estas três (e as
|
|
4
|
-
versões "-deep", um tom mais escuro de cada):
|
|
5
|
-
--blue a cor principal (fundo do topo, faixas)
|
|
6
|
-
--orange o destaque (botões, palavras em itálico)
|
|
7
|
-
--cyan a cor de apoio (detalhes, brilhos)
|
|
8
|
-
O resto do arquivo usa estas variáveis — não precisa mexer nele. */
|
|
9
|
-
--ink:#0b0b12;
|
|
10
|
-
--ink-2:#12121a;
|
|
11
|
-
--muted:#9ca3af;
|
|
12
|
-
--paper:#ffffff;
|
|
13
|
-
--soft:#f4f5f8;
|
|
14
|
-
--blue:#1e3fae;
|
|
15
|
-
--blue-deep:#0f2470;
|
|
16
|
-
--orange:#f97316;
|
|
17
|
-
--orange-deep:#b4470a;
|
|
18
|
-
--cyan:#1fb4cf;
|
|
19
|
-
--cyan-deep:#0b6f85;
|
|
20
|
-
--orange-light:#ffb36b;
|
|
21
|
-
--sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
|
|
22
|
-
--serif:'Instrument Serif',Georgia,serif;
|
|
23
|
-
--radius:18px;
|
|
24
|
-
--ease:cubic-bezier(.2,.8,.2,1);
|
|
25
|
-
}
|
|
26
|
-
*{margin:0;padding:0;box-sizing:border-box;}
|
|
27
|
-
html{scroll-behavior:smooth;}
|
|
28
|
-
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
|
|
29
|
-
img{display:block;}
|
|
30
|
-
a{color:inherit;}
|
|
31
|
-
h1,h2,h3{line-height:1.08;letter-spacing:-0.025em;font-weight:600;}
|
|
32
|
-
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;}
|
|
33
|
-
::selection{background:var(--orange);color:#fff;}
|
|
34
|
-
|
|
35
|
-
/* Barra de progresso e brilho do cursor */
|
|
36
|
-
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--cyan),var(--blue),var(--orange));z-index:100;}
|
|
37
|
-
.cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(249,115,22,.16),rgba(31,180,207,.08) 40%,transparent 70%);transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);transition:opacity .4s;mix-blend-mode:screen;}
|
|
38
|
-
|
|
39
|
-
/* Nav */
|
|
40
|
-
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 5vw;color:#fff;transition:padding .35s var(--ease),background .35s,backdrop-filter .35s,box-shadow .35s;}
|
|
41
|
-
.nav.scrolled{padding:12px 5vw;background:rgba(11,11,18,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06);}
|
|
42
|
-
.nav.hidden{transform:translateY(-100%);}
|
|
43
|
-
.nav{transition:transform .4s var(--ease),padding .35s var(--ease),background .35s;}
|
|
44
|
-
.brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;}
|
|
45
|
-
.brand img{transition:transform .6s var(--ease);}
|
|
46
|
-
.brand:hover img{transform:rotate(180deg) scale(1.1);}
|
|
47
|
-
.nav-links{display:flex;align-items:center;gap:28px;}
|
|
48
|
-
.nav-links a:not(.btn){position:relative;text-decoration:none;font-size:.95rem;opacity:.8;transition:opacity .2s;}
|
|
49
|
-
.nav-links a:not(.btn)::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
|
|
50
|
-
.nav-links a:not(.btn):hover{opacity:1;}
|
|
51
|
-
.nav-links a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left;}
|
|
52
|
-
|
|
53
|
-
/* Botões */
|
|
54
|
-
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:15px 28px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;font:600 1rem var(--sans);text-decoration:none;cursor:pointer;isolation:isolate;transition:box-shadow .3s,transform .25s var(--ease);will-change:transform;}
|
|
55
|
-
.btn span{position:relative;z-index:2;display:inline-block;transition:transform .25s var(--ease);}
|
|
56
|
-
.btn::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease);}
|
|
57
|
-
.btn:hover::before{transform:translateX(120%);}
|
|
58
|
-
.btn:hover{box-shadow:0 14px 34px -8px rgba(249,115,22,.6);}
|
|
59
|
-
.btn:active{transform:scale(.97);}
|
|
60
|
-
.btn-small{padding:9px 18px;font-size:.9rem;}
|
|
61
|
-
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);}
|
|
62
|
-
.btn-ghost:hover{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 14px 34px -10px rgba(31,180,207,.5);background:rgba(255,255,255,.1);}
|
|
63
|
-
|
|
64
|
-
/* Hero */
|
|
65
|
-
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:140px 5vw 110px;overflow:hidden;background:var(--ink);color:#fff;text-align:center;}
|
|
66
|
-
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.7;}
|
|
67
|
-
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;z-index:0;animation:float 18s ease-in-out infinite;}
|
|
68
|
-
.b1{width:560px;height:560px;left:-140px;top:-160px;background:var(--blue);}
|
|
69
|
-
.b2{width:440px;height:440px;right:-120px;top:18%;background:var(--cyan);opacity:.35;animation-delay:-6s;animation-duration:22s;}
|
|
70
|
-
.b3{width:380px;height:380px;left:38%;bottom:-220px;background:var(--orange);opacity:.3;animation-delay:-11s;animation-duration:26s;}
|
|
71
|
-
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(60px,40px) scale(1.12);}66%{transform:translate(-40px,70px) scale(.92);}}
|
|
72
|
-
.hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);}
|
|
73
|
-
.hero-inner{position:relative;z-index:2;}
|
|
74
|
-
.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:600;color:var(--cyan);margin-bottom:22px;}
|
|
75
|
-
.hero .eyebrow{padding:8px 16px;border:1px solid rgba(31,180,207,.35);border-radius:999px;background:rgba(31,180,207,.08);}
|
|
76
|
-
.dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(31,180,207,.7);animation:pulse 2s infinite;}
|
|
77
|
-
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(31,180,207,0);}100%{box-shadow:0 0 0 0 rgba(31,180,207,0);}}
|
|
78
|
-
.hero h1{font-size:clamp(2.8rem,8vw,6.6rem);max-width:13ch;margin:0 auto 26px;}
|
|
79
|
-
.hero h1 em,.section h2 em{background:linear-gradient(100deg,var(--orange),var(--orange-light) 30%,var(--cyan) 60%,var(--orange) 90%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite;padding-right:.08em;}
|
|
80
|
-
@keyframes shimmer{to{background-position:-250% 0;}}
|
|
81
|
-
.lead{font-size:clamp(1.1rem,2vw,1.35rem);color:#c9cdd6;max-width:40ch;margin:0 auto 40px;}
|
|
82
|
-
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
|
|
83
|
-
.stats{display:flex;justify-content:center;gap:clamp(32px,7vw,88px);flex-wrap:wrap;margin-top:80px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);}
|
|
84
|
-
.stats dt{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;}
|
|
85
|
-
.stats dd{color:var(--muted);font-size:.95rem;margin-top:8px;}
|
|
86
|
-
.scroll-hint{position:absolute;left:50%;bottom:28px;z-index:2;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.35);border-radius:14px;}
|
|
87
|
-
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wheel 1.8s var(--ease) infinite;}
|
|
88
|
-
@keyframes wheel{0%{opacity:0;transform:translateY(0);}30%{opacity:1;}100%{opacity:0;transform:translateY(14px);}}
|
|
89
|
-
|
|
90
|
-
/* Título que sobe palavra por palavra */
|
|
91
|
-
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;}
|
|
92
|
-
.split .w>span{display:inline-block;}
|
|
93
|
-
.js .split .w>span{transform:translateY(110%) rotate(4deg);animation:rise 1s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .09s);}
|
|
94
|
-
@keyframes rise{to{transform:translateY(0) rotate(0);}}
|
|
95
|
-
|
|
96
|
-
/* Aparecer ao rolar */
|
|
97
|
-
.js .reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s);}
|
|
98
|
-
.js .reveal.in{opacity:1;transform:none;filter:none;}
|
|
99
|
-
|
|
100
|
-
/* Faixa que corre */
|
|
101
|
-
.marquee{overflow:hidden;background:var(--orange);color:#fff;padding:18px 0;transform:rotate(-1.5deg) scale(1.04);margin:-24px 0;position:relative;z-index:3;box-shadow:0 20px 40px -20px rgba(249,115,22,.6);}
|
|
102
|
-
.marquee-track{display:flex;gap:36px;width:max-content;align-items:center;animation:marquee 26s linear infinite;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);white-space:nowrap;}
|
|
103
|
-
.marquee-track i{font-style:normal;font-size:1rem;opacity:.7;}
|
|
104
|
-
.marquee:hover .marquee-track{animation-play-state:paused;}
|
|
105
|
-
@keyframes marquee{to{transform:translateX(-50%);}}
|
|
106
|
-
|
|
107
|
-
/* Seções */
|
|
108
|
-
.section{position:relative;padding:130px 5vw;}
|
|
109
|
-
.section h2{font-size:clamp(2.2rem,5vw,3.8rem);max-width:18ch;margin-bottom:56px;}
|
|
110
|
-
.section-lead{font-size:1.15rem;color:var(--muted);margin:-32px 0 36px;max-width:42ch;}
|
|
111
|
-
.section-dark{background:var(--ink-2);color:#fff;overflow:hidden;}
|
|
112
|
-
.section-dark::before{content:'';position:absolute;width:700px;height:700px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(30,63,174,.45),transparent 65%);}
|
|
113
|
-
|
|
114
|
-
/* Cards com inclinação 3D */
|
|
115
|
-
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;perspective:1200px;}
|
|
116
|
-
.card{position:relative;background:var(--soft);border-radius:var(--radius);padding:38px 34px;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .4s;}
|
|
117
|
-
.js .card.reveal.in{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
|
|
118
|
-
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(249,115,22,.18),transparent 45%);opacity:0;transition:opacity .4s;}
|
|
119
|
-
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--orange),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;}
|
|
120
|
-
.card:hover{box-shadow:0 30px 60px -25px rgba(18,18,24,.35);}
|
|
121
|
-
.card:hover::before,.card:hover::after{opacity:1;}
|
|
122
|
-
.card>*{position:relative;transform:translateZ(30px);}
|
|
123
|
-
.card h3{font-size:1.45rem;margin:22px 0 12px;}
|
|
124
|
-
.card p{color:#4b5160;}
|
|
125
|
-
.card-tag{display:inline-block;padding:5px 14px;border-radius:999px;font-size:.8rem;font-weight:600;color:#fff;}
|
|
126
|
-
.tag-blue{background:linear-gradient(135deg,var(--blue),var(--blue-deep));}
|
|
127
|
-
.tag-orange{background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
|
|
128
|
-
.tag-cyan{background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));}
|
|
129
|
-
|
|
130
|
-
/* Produtos: órbita */
|
|
131
|
-
.products{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
|
|
132
|
-
.orbit{position:relative;width:min(440px,80vw);aspect-ratio:1;margin:0 auto;}
|
|
133
|
-
.orbit-core{position:absolute;inset:32%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,var(--orange),var(--orange-deep));box-shadow:0 0 80px rgba(249,115,22,.55),inset 0 -10px 30px rgba(0,0,0,.25);animation:breathe 4s ease-in-out infinite;z-index:2;}
|
|
134
|
-
.orbit-core strong{font-family:var(--serif);font-size:clamp(3rem,7vw,4.4rem);font-weight:400;line-height:1;}
|
|
135
|
-
.orbit-core small{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;opacity:.9;}
|
|
136
|
-
@keyframes breathe{50%{transform:scale(1.06);box-shadow:0 0 120px rgba(249,115,22,.7),inset 0 -10px 30px rgba(0,0,0,.25);}}
|
|
137
|
-
.ring{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.18);}
|
|
138
|
-
.r1{inset:20%;animation:spin 30s linear infinite;}
|
|
139
|
-
.r2{inset:8%;border-style:solid;border-color:rgba(31,180,207,.22);animation:spin 45s linear infinite reverse;}
|
|
140
|
-
.r3{inset:-4%;animation:spin 70s linear infinite;}
|
|
141
|
-
@keyframes spin{to{transform:rotate(360deg);}}
|
|
142
|
-
.orbit-dots{position:absolute;inset:0;animation:spin 40s linear infinite;}
|
|
143
|
-
.orbit-dots i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--c,var(--cyan));box-shadow:0 0 18px var(--c,var(--cyan));transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));}
|
|
144
|
-
|
|
145
|
-
/* Imersão */
|
|
146
|
-
.split-box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:64px;border-radius:28px;background:var(--soft);overflow:hidden;isolation:isolate;}
|
|
147
|
-
.split-box::before{content:'';position:absolute;inset:-2px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--ang,0deg),var(--blue),var(--cyan),var(--orange),var(--blue));animation:rotateAng 6s linear infinite;}
|
|
148
|
-
.split-box::after{content:'';position:absolute;inset:2px;z-index:-1;border-radius:26px;background:var(--soft);}
|
|
149
|
-
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false;}
|
|
150
|
-
@keyframes rotateAng{to{--ang:360deg;}}
|
|
151
|
-
.split-box h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:16px;}
|
|
152
|
-
.split-box p{max-width:52ch;color:#4b5160;}
|
|
153
|
-
.split-box .eyebrow{color:var(--orange-deep);}
|
|
154
|
-
.days{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
|
|
155
|
-
.days span{padding:8px 18px;border-radius:999px;background:#fff;border:1px solid #e3e5ec;font-weight:600;font-size:.9rem;transition:transform .3s var(--ease),background .3s,color .3s;}
|
|
156
|
-
.days span:hover{transform:translateY(-4px);background:var(--ink);color:#fff;}
|
|
157
|
-
.split-box.in .days span{animation:pop .6s var(--ease) backwards;}
|
|
158
|
-
.split-box.in .days span:nth-child(2){animation-delay:.12s;}
|
|
159
|
-
.split-box.in .days span:nth-child(3){animation-delay:.24s;}
|
|
160
|
-
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(10px);}}
|
|
161
|
-
|
|
162
|
-
/* Newsletter */
|
|
163
|
-
.section-accent{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;text-align:center;overflow:hidden;}
|
|
164
|
-
.section-accent h2{margin:0 auto 12px;position:relative;}
|
|
165
|
-
.section-accent p{position:relative;color:#c9d3f5;font-size:1.2rem;}
|
|
166
|
-
.section-accent h2 em{background:none;color:var(--orange-light);-webkit-text-fill-color:var(--orange-light);animation:none;}
|
|
167
|
-
.accent-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;transform:perspective(600px) rotateX(60deg);animation:gridMove 3s linear infinite;mask-image:linear-gradient(transparent,#000 60%);-webkit-mask-image:linear-gradient(transparent,#000 60%);}
|
|
168
|
-
@keyframes gridMove{to{background-position:0 48px;}}
|
|
169
|
-
.news{position:relative;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start;text-align:left;max-width:1200px;margin:0 auto;}
|
|
170
|
-
.section-accent .news h2{margin:0 0 16px;max-width:16ch;text-wrap:balance;}
|
|
171
|
-
.section-accent .news-lead{font-size:1.15rem;line-height:1.6;max-width:44ch;margin:0;}
|
|
172
|
-
.news-list{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:26px;}
|
|
173
|
-
.news-list li{display:flex;gap:20px;align-items:flex-start;}
|
|
174
|
-
.news-num{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem;color:var(--orange-light);min-width:2.4em;padding-top:2px;letter-spacing:.04em;}
|
|
175
|
-
.news-list strong{display:block;font-size:1.15rem;color:#fff;}
|
|
176
|
-
.section-accent .news-list p{font-size:1rem;line-height:1.55;margin:4px 0 0;max-width:40ch;}
|
|
177
|
-
.news-form{position:relative;max-width:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:32px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px rgba(5,12,40,.35);}
|
|
178
|
-
.section-accent .news-form-title{color:#fff;font-weight:600;font-size:1.25rem;margin:0 0 4px;}
|
|
179
|
-
.btn-light{background:#fff;color:var(--blue-deep);}
|
|
180
|
-
.btn-light:hover{background:var(--orange-light);color:var(--ink);}
|
|
181
|
-
.section-accent .news-note{font-size:.9rem;margin:0;color:#c9d3f5;}
|
|
182
|
-
.section-accent .news-form .form-ok{font-size:1rem;color:#fff;margin:0;}
|
|
183
|
-
@media (max-width:860px){.news{grid-template-columns:1fr;gap:40px;}.news-form{padding:24px;}}
|
|
184
|
-
|
|
185
|
-
/* Formulário */
|
|
186
|
-
#contato{background:var(--soft);}
|
|
187
|
-
form{max-width:620px;display:flex;flex-direction:column;gap:16px;}
|
|
188
|
-
.field{position:relative;display:block;}
|
|
189
|
-
.field input,.field textarea{width:100%;padding:24px 18px 10px;border:1px solid #d9dce3;border-radius:14px;font:1rem var(--sans);background:#fff;resize:vertical;transition:border-color .25s,box-shadow .25s;}
|
|
190
|
-
.field span{position:absolute;left:18px;top:17px;color:#7b8190;pointer-events:none;transition:transform .25s var(--ease),color .25s,font-size .25s;transform-origin:0 0;}
|
|
191
|
-
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,63,174,.12);}
|
|
192
|
-
.field input:focus+span,.field input:not(:placeholder-shown)+span,.field textarea:focus+span,.field textarea:not(:placeholder-shown)+span{transform:translateY(-10px) scale(.78);color:var(--blue);}
|
|
193
|
-
form .btn{align-self:flex-start;}
|
|
194
|
-
.form-ok{color:var(--cyan-deep);font-weight:600;animation:pop .5s var(--ease);}
|
|
195
|
-
|
|
196
|
-
/* Rodapé */
|
|
197
|
-
.footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:36px 5vw;background:var(--ink);color:var(--muted);font-size:.9rem;}
|
|
198
|
-
.footer a{text-decoration:none;transition:color .2s;}
|
|
199
|
-
.footer a:hover{color:#fff;}
|
|
200
|
-
|
|
201
|
-
/* Responsivo */
|
|
202
|
-
@media(max-width:860px){
|
|
203
|
-
.products{grid-template-columns:1fr;}
|
|
204
|
-
}
|
|
205
|
-
@media(max-width:720px){
|
|
206
|
-
.nav-links a:not(.btn){display:none;}
|
|
207
|
-
.hero{padding:120px 6vw 90px;}
|
|
208
|
-
.section{padding:90px 6vw;}
|
|
209
|
-
.split-box{padding:36px 28px;}
|
|
210
|
-
.cursor-glow{display:none;}
|
|
211
|
-
}
|
|
212
|
-
@media(hover:none){.cursor-glow{display:none;}}
|
|
213
|
-
@media(prefers-reduced-motion:reduce){
|
|
214
|
-
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
|
|
215
|
-
html{scroll-behavior:auto;}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
/* A marca sem imagem: a inicial num quadrado com as cores da marca. */
|
|
219
|
-
.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-weight:700;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--orange));}
|