/* ==========================================================================
GF-TEMA.CSS · TEMA VISUAL ÚNICO DA GREENFLEX SOLAR
--------------------------------------------------------------------------
Este arquivo controla o VISUAL de todas as páginas do site
(cores, fontes, cards de vidro, botões, selos, fundo "space").
>>> PARA MUDAR UMA COR EM TODO O SITE, MEXA SÓ NO BLOCO ":root" ABAIXO. <<<
Troque o valor entre os dois pontos e o ponto-e-vírgula. Ex.: --gf-laranja: #FF7A1A;
Depois de salvar, limpe o cache no painel da Hostinger.
Para uma página usar o tema, ela precisa ter, dentro do , esta linha:
e também as fontes do Google (Space Grotesk + Inter).
========================================================================== */
/* ====== 1. TOKENS: as "peças" do tema (cores, fontes, medidas) ====== */
:root{
/* Fundo escuro / space */
--gf-space-0:#04070F;
--gf-space-1:#070D1C;
--gf-space-2:#0B1730;
--gf-navy:#0B2545;
/* Vidro (glassmorphism) */
--gf-glass:rgba(146,176,224,.07);
--gf-glass-forte:rgba(146,176,224,.11);
--gf-glass-linha:rgba(160,190,240,.16);
/* Cores de destaque */
--gf-laranja:#FF7A1A;
--gf-laranja-2:#FF9C4A;
--gf-verde:#22C55E;
--gf-verde-2:#4ADE80;
/* Textos */
--gf-ink:#EAF1FB;
--gf-ink-suave:#AFC0DA;
--gf-ink-fraco:#6E82A6;
/* Fontes e medidas */
--gf-display:"Space Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
--gf-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
--gf-raio:22px;
--gf-raio-btn:11px;
}
/* ====== 2. BASE DA PÁGINA ====== */
.gf-page{
font-family:var(--gf-body);
color:var(--gf-ink);
background:
radial-gradient(1100px 620px at 82% -8%, rgba(255,122,26,.16), transparent 60%),
radial-gradient(900px 620px at 8% 6%, rgba(34,197,94,.10), transparent 58%),
linear-gradient(165deg, var(--gf-space-1) 0%, var(--gf-space-2) 46%, var(--gf-space-0) 100%);
line-height:1.6;
-webkit-font-smoothing:antialiased;
min-height:100%;
}
.gf-wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.gf-section{position:relative;padding:92px 0 104px;overflow:hidden;isolation:isolate;}
/* Fundo com grade "tech" + estrelinhas (aplique em qualquer .gf-section com a classe .gf-space-bg) */
.gf-space-bg::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(rgba(150,180,235,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(150,180,235,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 22%,#000 72%,transparent);
}
.gf-space-bg::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background-image:
radial-gradient(1.4px 1.4px at 12% 22%,rgba(255,255,255,.6),transparent),
radial-gradient(1.2px 1.2px at 74% 14%,rgba(255,255,255,.45),transparent),
radial-gradient(1.4px 1.4px at 42% 40%,rgba(255,255,255,.4),transparent),
radial-gradient(1.2px 1.2px at 88% 54%,rgba(255,255,255,.35),transparent),
radial-gradient(1.3px 1.3px at 26% 68%,rgba(255,255,255,.4),transparent),
radial-gradient(1.2px 1.2px at 62% 82%,rgba(255,255,255,.3),transparent);
}
/* ====== 3. SELO / BADGE com ponto pulsante ====== */
.gf-badge{
display:inline-flex;align-items:center;gap:10px;
background:var(--gf-glass);border:1px solid var(--gf-glass-linha);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
padding:9px 16px 9px 13px;border-radius:999px;
font-family:var(--gf-display);font-weight:600;font-size:.78rem;letter-spacing:.02em;
color:var(--gf-ink-suave);
}
.gf-dot{position:relative;width:9px;height:9px;flex-shrink:0;}
.gf-dot i{position:absolute;inset:0;border-radius:50%;background:var(--gf-verde-2);}
.gf-dot i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gf-verde-2);
animation:gfPulse 2s ease-out infinite;}
@keyframes gfPulse{0%{transform:scale(1);opacity:.7;}70%{transform:scale(3);opacity:0;}100%{transform:scale(3);opacity:0;}}
/* ====== 4. TÍTULOS ====== */
.gf-head{max-width:820px;}
.gf-head h1,.gf-head h2{
font-family:var(--gf-display);font-weight:700;color:#fff;
font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.05;letter-spacing:-.03em;text-wrap:balance;
}
.gf-head p{margin-top:18px;font-size:1.06rem;color:var(--gf-ink-suave);max-width:60ch;}
.gf-destaque{
font-style:normal;
background:linear-gradient(92deg,var(--gf-laranja),var(--gf-laranja-2));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ====== 5. BOTÕES ====== */
.gf-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--gf-display);font-weight:600;font-size:.9rem;
padding:12px 20px;border-radius:var(--gf-raio-btn);
border:1px solid var(--gf-glass-linha);color:#fff;background:var(--gf-glass-forte);
transition:gap .28s,background .28s,border-color .28s,filter .28s;cursor:pointer;
}
.gf-btn svg{transition:transform .28s;}
.gf-btn:hover{gap:15px;}
.gf-btn:hover svg{transform:translateX(3px);}
.gf-btn--laranja{
background:linear-gradient(94deg,var(--gf-laranja),var(--gf-laranja-2));
border-color:transparent;color:#231204;box-shadow:0 12px 26px -12px rgba(255,122,26,.7);
}
.gf-btn--laranja:hover{filter:brightness(1.05);}
.gf-btn--verde{
background:linear-gradient(94deg,var(--gf-verde),var(--gf-verde-2));
border-color:transparent;color:#04220F;box-shadow:0 12px 26px -12px rgba(34,197,94,.7);
}
/* ====== 6. GRADE DE CARDS ====== */
.gf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.gf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
/* ====== 7. CARD DE VIDRO ====== */
.gf-card{
display:flex;flex-direction:column;position:relative;
background:var(--gf-glass);border:1px solid var(--gf-glass-linha);
border-radius:var(--gf-raio);overflow:hidden;
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 24px 50px -30px rgba(0,0,0,.85);
transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .38s,box-shadow .38s,background .38s;
color:inherit;text-decoration:none;
--gf-edge:rgba(255,122,26,.55); /* cor do brilho da borda deste card */
}
.gf-card::before{
content:"";position:absolute;inset:0;border-radius:var(--gf-raio);padding:1px;pointer-events:none;
background:linear-gradient(140deg,transparent 30%,var(--gf-edge),transparent 72%);
-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;
}
.gf-card:hover,.gf-card:focus-visible{
transform:translateY(-10px);border-color:transparent;background:var(--gf-glass-forte);
box-shadow:0 40px 70px -32px rgba(0,0,0,.9),0 0 44px -10px var(--gf-edge);outline:none;
}
.gf-card:hover::before,.gf-card:focus-visible::before{opacity:1;}
.gf-card:focus-visible{box-shadow:0 0 0 3px var(--gf-edge),0 40px 70px -32px rgba(0,0,0,.9);}
.gf-card--verde{--gf-edge:rgba(34,197,94,.6);}
/* Mídia do card (imagem, desenho ou vídeo) */
.gf-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gf-space-2);}
.gf-media .gf-scene,.gf-media .gf-photo{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gf-card:hover .gf-scene,.gf-card:hover .gf-photo{transform:scale(1.09);}
.gf-media::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(6,11,26,.72));}
/* Etiqueta sobre a mídia (ex.: "Pronta Entrega") */
.gf-tag{
position:absolute;top:14px;left:14px;z-index:2;
display:inline-flex;align-items:center;gap:7px;
background:rgba(6,12,26,.55);border:1px solid var(--gf-glass-linha);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
color:#fff;font-family:var(--gf-display);font-weight:600;font-size:.72rem;
letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:999px;
}
.gf-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gf-edge);}
/* Corpo do card */
.gf-card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.gf-kicker{font-family:var(--gf-display);font-weight:600;font-size:.7rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--gf-laranja-2);margin-bottom:9px;}
.gf-card--verde .gf-kicker{color:var(--gf-verde-2);}
.gf-card-body h3{font-family:var(--gf-display);font-weight:700;font-size:1.34rem;letter-spacing:-.02em;
color:#fff;margin-bottom:11px;}
.gf-card-body p{color:var(--gf-ink-suave);font-size:.96rem;flex:1;}
.gf-card .gf-btn{margin-top:22px;align-self:flex-start;}
/* ==========================================================================
8. VÍDEO NO CARD (loja rodando, engenharia, etc. — sem som, em loop)
--------------------------------------------------------------------------
Basta trocar a classe "gf-media" por "gf-media gf-media--video"
e colocar UMA das duas opções abaixo dentro dela.
OPÇÃO A — YouTube (mais fácil, mas com marca leve do YouTube):
Pronta Entrega
(Troque ID_DO_VIDEO nos DOIS lugares. O ID é o que vem depois de "v=" no link do YouTube.)
OPÇÃO B — MP4 próprio na Hostinger (mais limpo, recomendado):
Pronta Entrega
========================================================================== */
.gf-media--video .gf-video-yt{
position:absolute;top:50%;left:50%;
width:100%;aspect-ratio:16/9;
transform:translate(-50%,-50%) scale(1.32); /* cobre as bordas e esconde a barra do YouTube */
border:0;pointer-events:none;
}
.gf-media--video .gf-video-mp4{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* selinho opcional "▶ vídeo" — use Vídeo */
.gf-tag--video::before{width:0;height:0;border:5px solid transparent;border-left-color:#fff;border-radius:0;margin-right:2px;background:none;}
/* ====== 9. RODAPÉ padrão do tema ====== */
.gf-footer{background:var(--gf-space-0);color:var(--gf-ink-fraco);padding:56px 0 30px;
border-top:1px solid var(--gf-glass-linha);}
.gf-footer a{color:var(--gf-ink-suave);text-decoration:none;transition:color .2s;}
.gf-footer a:hover{color:var(--gf-laranja-2);}
/* ====== 10. RESPONSIVO ====== */
@media (max-width:900px){
.gf-grid-3,.gf-grid-2{grid-template-columns:1fr;gap:20px;}
.gf-section{padding:66px 0 76px;}
.gf-wrap{padding:0 18px;}
.gf-media{aspect-ratio:16/9;}
}
/* ====== 11. Respeita quem prefere menos animação ====== */
@media (prefers-reduced-motion:reduce){
.gf-page *,.gf-card,.gf-card *{animation:none!important;transition:none!important;}
}
/* ====== 12. Foco de teclado visível (acessibilidade) ====== */
.gf-page a:focus-visible,.gf-page button:focus-visible{outline:3px solid var(--gf-laranja);outline-offset:3px;}