:root{ --vermelho:#C80000; --vermelho-escuro:#9A0000; --azul:#0000C8; --azul-noite:#00006E; --amarelo:#F2EE0C; --asfalto:#111318; --fumo:#F5F6F8; /* fundo de seções alternadas */ --branco:#FFFFFF; /* fundo da página e do header */ --superficie:#FFFFFF; /* cards, caixas, inputs (nível elevado) */ --texto:#23262B; /* texto principal */ --texto-2:#33383F; /* texto secundário mais escuro (corpo de post) */ --muted:#555B63; /* texto secundário */ --faint:#8A9099; /* rótulos e metadados discretos */ --linha:#E7E9EE; /* bordas */ --display:'Chakra Petch',sans-serif; --corpo:'Chakra Petch','Outfit',sans-serif; } /* ---------- tema escuro (toggle no header, escolha salva em localStorage) ---------- Só remapeia os tokens: os componentes seguem lendo as mesmas variáveis. As seções já coloridas (hero azul, CTA vermelho, .escura, footer) permanecem como estão e viram os pontos de cor do tema escuro. */ :root[data-theme="dark"]{ --asfalto:#0E1014; /* banda mais profunda (.escura e footer) */ --fumo:#171A20; /* seções alternadas */ --branco:#14161B; /* página e header */ --superficie:#1E222A; /* cards elevados sobre a página */ --texto:#ECEEF1; --texto-2:#C6CBD2; --muted:#A6ACB5; --faint:#7C828C; --linha:#FFFFFF; /* borda branca no dark: contorno cinza some no escuro (regra de marca 22/07/2026) */ } *{margin:0;padding:0;box-sizing:border-box} /* background no html: o overscroll elastico do iOS revela a raiz; sem isso aparece uma faixa clara "sobrando" abaixo do rodape escuro */ html{scroll-behavior:smooth;background:#f6f7fa} :root[data-theme="dark"]{background:#0b0d11} :root[data-theme="light"]{background:#f6f7fa} body{font-family:var(--corpo);color:var(--texto);background:var(--branco);line-height:1.6;overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit} h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:1.1} /* ---------- raio animado (logo) ---------- */ .logo{display:flex;align-items:center} .logo img{height:52px;width:auto;max-width:none;flex:none} /* logo branca fica escondida por padrão (tema claro); aparece no tema escuro e sobre o vídeo do topo da home. A home ainda controla os dois via .sobre-video. */ .logo-claro{display:none} /* raio estático por padrão (páginas internas e home rolada); pisca só sobre o vídeo escuro do topo da home */ header.sobre-video:not(.rolado) .logo-raio{animation:raio-pisca 1s ease-in-out infinite} @keyframes raio-pisca{ 0%,40%,100%{filter:none;opacity:1} 46%{filter:brightness(2.6) drop-shadow(0 0 10px rgba(242,238,12,1));opacity:1} 50%{filter:brightness(.4);opacity:.5} 54%{filter:brightness(3) drop-shadow(0 0 18px rgba(255,255,255,1)) drop-shadow(0 0 30px rgba(242,238,12,.9));opacity:1} 58%{filter:brightness(.7);opacity:.7} 63%{filter:brightness(2.2) drop-shadow(0 0 12px rgba(242,238,12,1));opacity:1} 70%,100%{filter:none;opacity:1} } @media(prefers-reduced-motion:reduce){.logo-raio{animation:none}} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:50;background:var(--branco);box-shadow:0 2px 12px rgba(0,0,0,.08)} .nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.25rem} .nav img{height:52px;width:auto} .nav ul{display:flex;gap:1.7rem;list-style:none;align-items:center;flex-wrap:nowrap;white-space:nowrap} .nav ul a{font-family:'Racing Sans One',var(--display);font-weight:400;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;transition:color .15s} .nav ul a:hover,.nav ul a.ativo{color:var(--vermelho)} @media(min-width:1161px){ #menu > li:not(:last-child){position:relative} /* Divisor de bolinha, igual ao do app da loja (RSVP · PULSEIRAS · BATERIAS) */ #menu > li:not(:last-child):not(.tem-sub)::after{content:"";position:absolute;top:50%;right:-.85rem; transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:rgba(35,38,43,.4)} header.sobre-video:not(.rolado) #menu > li:not(:last-child):not(.tem-sub)::after{background:rgba(255,255,255,.75)} } .btn{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.04em; padding:.8rem 1.6rem;border-radius:10px;transition:transform .15s,box-shadow .15s;text-align:center} .btn:hover{transform:translateY(-2px)} .btn-vermelho{background:var(--vermelho);color:#fff;box-shadow:0 6px 18px rgba(200,0,0,.35)} .btn-vermelho:hover{background:var(--vermelho-escuro)} .btn-amarelo{background:var(--amarelo);color:#111;box-shadow:0 6px 18px rgba(180,175,0,.3)} .btn-vazado{border:2px solid #fff;color:#fff} .nav .btn{padding:.5rem 1rem;font-size:.8rem} .menu-toggle{display:none;background:none;border:1.5px solid currentColor;border-radius:8px; padding:.35rem .75rem;cursor:pointer;color:var(--texto); font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem; transition:color .15s} .menu-toggle:hover{color:var(--vermelho)} /* ---------- hero (home) ---------- */ .hero{background:linear-gradient(135deg,var(--azul-noite) 0%,var(--azul) 70%,#2929FF 100%);color:#fff;position:relative;overflow:hidden;padding:0} .hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px; background:linear-gradient(to top right,transparent 49.5%,rgba(242,238,12,.12) 50%);pointer-events:none} .hero-inner{max-width:1200px;margin:0 auto;padding:4rem 1.25rem 4.5rem;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center} .hero h1{font-size:clamp(2.2rem,5vw,3.6rem);font-style:italic} .hero h1 .destaque{color:var(--amarelo)} .hero p.sub{margin:1.2rem 0 1.6rem;font-size:1.15rem;max-width:34rem;color:#E8EAFF} .hero ul{list-style:none;margin:0 0 2rem;display:grid;gap:.5rem} .hero ul li{display:flex;gap:.6rem;align-items:baseline;font-weight:500} .hero ul li::before{content:"🏁";font-size:.9rem} .hero .ctas{display:flex;gap:1rem;flex-wrap:wrap} .hero-img{position:relative} .hero-img img{border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)} .badge-idade{position:absolute;top:-16px;right:-10px;background:var(--amarelo);color:#111;font-family:var(--display); font-weight:700;padding:.6rem 1rem;border-radius:12px;transform:rotate(4deg);box-shadow:0 8px 20px rgba(0,0,0,.3);font-size:.95rem} /* ---------- header transparente sobre o vídeo (home) ---------- */ header.sobre-video{position:fixed;top:0;left:0;right:0;background:transparent;box-shadow:none; transition:background .25s,box-shadow .25s} header.sobre-video .logo-escuro{display:none} header.sobre-video .logo-claro{display:block} header.sobre-video .menu-toggle{color:#fff} @media(min-width:1081px){ header.sobre-video:not(.rolado){background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 100%)} header.sobre-video .nav ul a:not(.btn){color:#fff} header.sobre-video .nav ul a:not(.btn):hover{color:var(--amarelo)} } header.sobre-video.rolado{background:var(--branco);box-shadow:0 2px 12px rgba(0,0,0,.08)} header.sobre-video.rolado .logo-claro{display:none} header.sobre-video.rolado .logo-escuro{display:block} header.sobre-video.rolado .menu-toggle{color:var(--texto)} @media(min-width:1081px){ header.sobre-video.rolado .nav ul a:not(.btn){color:var(--texto);text-shadow:none} header.sobre-video.rolado .nav ul a:not(.btn):hover{color:var(--vermelho)} } /* ---------- vídeo limpo (hero) ---------- */ .video-limpo{background:var(--azul-noite);line-height:0;padding:0} .video-limpo .hero-bg{display:block;width:100%;height:74vh;object-fit:cover} @media(max-width:768px){.video-limpo .hero-bg{height:auto;aspect-ratio:1/1}} /* hero de texto (abaixo do vídeo) */ .hero-texto .hero-inner{grid-template-columns:1fr;max-width:820px;padding:3.5rem 1.25rem 4rem} /* ---------- hero de páginas internas ---------- */ .page-hero{background:linear-gradient(135deg,var(--azul-noite) 0%,var(--azul) 70%,#2929FF 100%);color:#fff;position:relative;overflow:hidden;text-align:center;padding:3.5rem 1.25rem} .page-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:80px; background:linear-gradient(to top right,transparent 49.5%,rgba(242,238,12,.12) 50%);pointer-events:none} .page-hero h1{font-size:clamp(2rem,4.5vw,3rem);font-style:italic} .page-hero h1 .destaque{color:var(--amarelo)} .page-hero p{margin:1rem auto 0;max-width:44rem;font-size:1.1rem;color:#E8EAFF} .page-hero .ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem} /* ---------- seções ---------- */ section{padding:4.5rem 1.25rem} .wrap{max-width:1200px;margin:0 auto} .eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--vermelho)} h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.4rem 0 1rem} /* cards */ .cinza{background:var(--fumo)} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem} .card{background:var(--superficie);border-radius:16px;padding:1.8rem 1.4rem;box-shadow:0 6px 20px rgba(0,0,0,.06); border-top:5px solid var(--azul);transition:transform .15s} .card:hover{transform:translateY(-4px)} .card:nth-child(2){border-top-color:var(--vermelho)} .card:nth-child(3){border-top-color:var(--amarelo)} .card:nth-child(4){border-top-color:var(--azul)} .card .num{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--faint);letter-spacing:.1em} .card h3{font-size:1.05rem;margin:.5rem 0 .4rem} .card p{font-size:.92rem;color:var(--muted)} .card .icone{height:56px;width:56px;margin-bottom:.8rem} /* seção escura com imagem (padrão "pista" da home) */ .escura{background:var(--asfalto);color:#fff;position:relative} .escura .duas{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .escura .eyebrow{color:var(--amarelo)} .escura p{color:#C9CDD4;margin-bottom:1.2rem} .escura img{border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.5)} /* seção clara com imagem lado a lado */ .duas{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .duas img{border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.15)} .duas p{margin-bottom:1.2rem} /* regras / caixas com borda */ .regras-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem} .regra{background:var(--superficie);border:2px solid var(--linha);border-radius:16px;padding:1.8rem} .regra h3{font-size:1.05rem;color:var(--azul);display:flex;align-items:center;gap:.6rem} .regra h3 span{font-size:1.4rem} .regra ul{margin:.8rem 0 0 1.1rem;font-size:.95rem;color:var(--muted)} .regra ul li{margin-bottom:.35rem} /* CTA vermelho (padrão "festa" da home) */ .cta-vermelho{background:linear-gradient(120deg,var(--vermelho) 0%,var(--vermelho-escuro) 100%);color:#fff;text-align:center} .cta-vermelho h2{font-size:clamp(1.9rem,4vw,3rem);font-style:italic} .cta-vermelho p{max-width:40rem;margin:1rem auto 2rem;color:#FFE3E3;font-size:1.1rem} /* galeria de fotos */ .galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem} .galeria figure{background:var(--superficie);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08)} .galeria img{width:100%;height:240px;object-fit:cover} .galeria figcaption{padding:1rem 1.2rem;font-size:.92rem;color:var(--muted)} .galeria figcaption strong{font-family:var(--display);text-transform:uppercase;color:var(--texto);display:block;font-size:.95rem;margin-bottom:.2rem} /* FAQ accordion */ .faq-lista{max-width:820px;margin:2.5rem auto 0;display:grid;gap:1rem} .faq-lista details{background:var(--superficie);border:2px solid var(--linha);border-radius:16px;padding:0;overflow:hidden} .faq-lista details[open]{border-color:var(--azul)} .faq-lista summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1.2rem 1.5rem;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1rem} .faq-lista summary::-webkit-details-marker{display:none} .faq-lista summary::after{content:"+";font-size:1.5rem;color:var(--vermelho);flex-shrink:0;transition:transform .2s} .faq-lista details[open] summary::after{transform:rotate(45deg)} .faq-lista .resposta{padding:0 1.5rem 1.4rem;color:var(--muted)} .faq-lista .resposta p{margin-bottom:.6rem} /* depoimentos */ .depos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem} .depo{background:var(--superficie);border-radius:16px;padding:1.8rem 1.5rem;box-shadow:0 6px 20px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:.8rem} .depo .estrelas{color:#F5B301;font-size:1.05rem;letter-spacing:.1em} .depo p{font-size:.95rem;color:var(--texto-2);flex:1} .depo .autor{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.85rem;color:var(--texto)} .selo-google{display:inline-flex;align-items:center;gap:.6rem;background:var(--superficie);border:2px solid var(--linha);border-radius:999px;padding:.5rem 1.2rem;font-weight:600;margin-top:1rem} .selo-google .nota{font-family:var(--display);font-weight:700;font-size:1.15rem} .selo-google .estrelas{color:#F5B301} @media(max-width:900px){.depos{grid-template-columns:1fr}} /* passos (como funciona) */ .passos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;counter-reset:passo} .passo{background:var(--superficie);border-radius:16px;padding:1.6rem 1.3rem;box-shadow:0 6px 20px rgba(0,0,0,.06);counter-increment:passo} .passo::before{content:counter(passo);display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%; background:var(--vermelho);color:#fff;font-family:var(--display);font-weight:700;font-size:1.2rem;margin-bottom:.8rem} .passo p{font-size:.95rem;color:var(--texto-2)} @media(max-width:900px){.passos{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.passos{grid-template-columns:1fr}} /* lista de inclusos */ .inclusos{columns:2;column-gap:2.5rem;margin-top:1.5rem;list-style:none} .inclusos li{margin-bottom:.6rem;display:flex;gap:.5rem;break-inside:avoid} .inclusos li::before{content:"✅";flex-shrink:0} @media(max-width:700px){.inclusos{columns:1}} /* formulário de contato */ .form-contato{display:grid;gap:1rem;margin-top:1.5rem} .form-contato label{font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;font-family:var(--display)} .form-contato input,.form-contato textarea{width:100%;padding:.85rem 1rem;border:2px solid var(--linha);border-radius:10px; font-family:var(--corpo);font-size:1rem;color:var(--texto);background:var(--superficie);transition:border-color .15s} .form-contato input:focus,.form-contato textarea:focus{outline:none;border-color:var(--azul)} .form-contato textarea{min-height:120px;resize:vertical} .info-contato{display:grid;gap:1.4rem} .info-contato .bloco{background:var(--superficie);border:2px solid var(--linha);border-radius:16px;padding:1.6rem} .info-contato h3{font-size:1rem;color:var(--azul);margin-bottom:.5rem} .info-contato a{color:var(--vermelho);font-weight:600} .mapa{border:0;width:100%;height:340px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08);margin-top:2.5rem} /* texto corrido (privacidade) */ .prosa{max-width:820px;margin:0 auto} .prosa h2{font-size:1.4rem;margin:2.2rem 0 .6rem} .prosa p{margin-bottom:1rem;color:var(--texto-2)} .prosa a{color:var(--vermelho);word-break:break-all} /* blog: listagem */ .blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;margin-top:2.5rem} .blog-card{background:var(--superficie);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.08); display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .blog-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.13)} .blog-card img{width:100%;height:220px;object-fit:cover} .blog-card .conteudo{padding:1.6rem 1.7rem} .blog-card .tag{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em; font-size:.75rem;color:var(--vermelho);margin-bottom:.6rem;display:block} .blog-card h3{font-size:1.45rem;line-height:1.12;margin-bottom:.7rem} .blog-card p{font-size:.98rem;color:var(--muted)} .blog-card .ler{margin-top:1.1rem;display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:.84rem;color:var(--azul);letter-spacing:.03em} @media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-card h3{font-size:1.3rem}} /* blog: artigo */ .post{max-width:760px;margin:0 auto} .post .tag{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em; font-size:.78rem;color:var(--vermelho)} .post h1{font-size:clamp(1.8rem,4vw,2.6rem);font-style:italic;margin:.6rem 0 .8rem} .post .meta{font-size:.9rem;color:var(--faint);margin-bottom:1.8rem} .post .capa{border-radius:16px;margin-bottom:2rem;box-shadow:0 16px 40px rgba(0,0,0,.15)} .post p{margin-bottom:1.1rem;color:var(--texto-2);font-size:1.05rem;line-height:1.75} .post h2{font-size:1.5rem;margin:2.4rem 0 .8rem} .post h3{font-size:1.15rem;margin:1.8rem 0 .5rem;color:var(--azul)} .post ul{margin:0 0 1.2rem 1.3rem;color:var(--texto-2);font-size:1.05rem;line-height:1.7} .post ul li{margin-bottom:.5rem} .post a{color:var(--vermelho);font-weight:600} .post strong{color:var(--texto)} .post .destaque-box{background:var(--fumo);border-left:5px solid var(--amarelo);border-radius:12px; padding:1.4rem 1.6rem;margin:2rem 0} .post .destaque-box p{margin:0} .post .cta-post{background:linear-gradient(120deg,var(--vermelho) 0%,var(--vermelho-escuro) 100%); color:#fff;border-radius:16px;padding:2rem;text-align:center;margin:2.5rem 0} .post .cta-post h3{color:#fff;font-style:italic;font-size:1.4rem;margin:0 0 .5rem} .post .cta-post p{color:#FFE3E3;margin:0 0 1.2rem} .voltar-blog{display:inline-block;margin-top:2rem;font-weight:600;color:var(--azul)} /* footer */ footer{background:var(--asfalto);color:#C9CDD4;padding:3.5rem 1.25rem 2rem} .foot{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem} .foot img{height:44px;width:auto;margin-bottom:1rem} .foot h4{font-family:var(--display);text-transform:uppercase;color:#fff;margin-bottom:.8rem;font-size:.95rem;letter-spacing:.06em} .foot a:hover{color:var(--amarelo)} .foot p,.foot a{font-size:.95rem} .foot ul{list-style:none;display:grid;gap:.4rem} .copy{max-width:1200px;margin:2.5rem auto 0;border-top:1px solid var(--linha);padding-top:1.2rem;font-size:.82rem;color:#7B8087;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem} /* whatsapp flutuante */ .zap{position:fixed;right:1.2rem;bottom:1.2rem;z-index:60;background:#25D366;color:#fff;width:58px;height:58px; border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .15s} .zap:hover{transform:scale(1.08)} /* ---------- responsivo ---------- */ @media(max-width:1160px){ #menu{display:flex;position:absolute;top:calc(100% + 10px);left:auto;right:0;width:40%;min-width:150px;max-width:280px;background:rgba(255,255,255,.85); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);flex-direction:column; padding:.4rem 1.2rem;gap:0;border-radius:16px;box-shadow:0 12px 24px rgba(0,0,0,.12); opacity:0;visibility:hidden;pointer-events:none;transform:scaleY(.85) translateY(-10px);transform-origin:top right; transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s} #menu.aberto{opacity:1;visibility:visible;pointer-events:auto;transform:scaleY(1) translateY(0); transition:opacity .22s ease,transform .22s ease,visibility 0s linear 0s} #menu > li{border-bottom:1px solid rgba(35,38,43,.12)} #menu > li:last-child{border-bottom:none} #menu li a{display:block;padding:.75rem 0;color:var(--azul-noite)} .menu-toggle{display:block} } @media(max-width:900px){ .hero-inner,.duas,.escura .duas{grid-template-columns:1fr} .cards{grid-template-columns:repeat(2,1fr)} .galeria{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .cards,.regras-grid,.galeria{grid-template-columns:1fr} .foot{grid-template-columns:1fr} section{padding:3.2rem 1.25rem} } @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}} /* ============================================================ TEMA ESCURO: ajustes que os tokens não resolvem sozinhos (troca de logo, definição de bordas, dropdown mobile, acentos). Tudo escopado em [data-theme="dark"]: o tema claro fica intacto. ============================================================ */ /* botão de alternância de tema (injetado pelo site.js) */ .tema-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; flex:none;background:none;border:1.5px solid currentColor;border-radius:10px;cursor:pointer; color:var(--texto);font-size:1.05rem;line-height:1;transition:color .15s,border-color .15s,transform .15s} .tema-toggle:hover{color:var(--vermelho);transform:translateY(-1px)} header.sobre-video:not(.rolado) .tema-toggle{color:#fff} /* desktop: menu e toggle colados à direita, logo à esquerda */ @media(min-width:1161px){ .nav .logo{order:0} #menu{order:1;margin-left:auto} .nav .piloto-btn{order:2;margin-left:.85rem} .nav .tema-toggle{order:3;margin-left:1rem} /* menu do desktop usa a fonte do slogan (Chakra Petch, reta), sem o inclinado da Racing Sans One */ .nav ul a,.nav .sub-toggle{font-family:var(--display);font-weight:700;font-size:1.18rem} } /* mobile: tema + piloto + hambúrguer colados à direita (tema fica à esquerda do Piloto; o #menu vira dropdown absoluto) */ @media(max-width:1160px){ .nav .logo{order:0} .nav > .piloto-btn{display:none} .nav .tema-toggle{order:2;margin-left:auto} .nav .menu-toggle{order:3;margin-left:.55rem} } /* logo: no escuro o header fica escuro, então mostramos a versão branca */ :root[data-theme="dark"] .logo-escuro{display:none} :root[data-theme="dark"] .logo-claro{display:block} /* home: header rolado fica escuro no tema escuro -> logo branca vence a regra clara */ :root[data-theme="dark"] header.sobre-video.rolado .logo-escuro{display:none} :root[data-theme="dark"] header.sobre-video.rolado .logo-claro{display:block} /* a sombra some no fundo escuro: header e cards ganham uma linha sutil. Exclui o header transparente sobre o video (home no topo): la a linha atravessa o video e fica estranha; o estado rolado tem sua propria regra abaixo. */ :root[data-theme="dark"] header:not(.sobre-video), :root[data-theme="dark"] header.sobre-video.rolado{box-shadow:0 1px 0 var(--linha)} :root[data-theme="dark"] .card, :root[data-theme="dark"] .depo, :root[data-theme="dark"] .passo, :root[data-theme="dark"] .galeria figure, :root[data-theme="dark"] .blog-card{border:1px solid var(--linha)} /* divisores do menu desktop sobre header escuro */ @media(min-width:1161px){ /* Bolinha de 4px some com a opacidade que servia pra barra de 16px */ :root[data-theme="dark"] #menu > li:not(:last-child):not(.tem-sub)::after{background:rgba(255,255,255,.42)} } /* dropdown do menu no mobile */ @media(max-width:1160px){ :root[data-theme="dark"] #menu{background:rgba(20,22,27,.92)} :root[data-theme="dark"] #menu > li{border-bottom-color:rgba(255,255,255,.10)} :root[data-theme="dark"] #menu li a{color:var(--texto)} } /* acentos de marca viram texto legível sobre superfícies escuras */ :root[data-theme="dark"] .regra h3, :root[data-theme="dark"] .info-contato h3, :root[data-theme="dark"] .post h3, :root[data-theme="dark"] .blog-card .ler, :root[data-theme="dark"] .voltar-blog{color:#8097FF} :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .blog-card .tag, :root[data-theme="dark"] .post .tag, :root[data-theme="dark"] .info-contato a, :root[data-theme="dark"] .prosa a, :root[data-theme="dark"] .post a, :root[data-theme="dark"] .nav ul a:hover, :root[data-theme="dark"] .nav ul a.ativo{color:#FF6E6E} /* ============================================================ CLIMA DE PISTA (site inteiro): carbono no escuro, divisores de bandeira/chevron, LED sequencial e marcas de pneu. ============================================================ */ /* fundo carbono + brilhos vermelho/azul (so no tema escuro) */ :root[data-theme="dark"] body{ background: radial-gradient(1100px 560px at 84% -6%, rgba(200,0,0,.16), transparent 58%), radial-gradient(950px 520px at -4% 6%, rgba(30,90,255,.16), transparent 55%), #0b0d11; } :root[data-theme="dark"] body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5; background-image: linear-gradient(45deg, rgba(150,150,160,.05) 25%, transparent 25%, transparent 75%, rgba(150,150,160,.05) 75%), linear-gradient(45deg, rgba(150,150,160,.05) 25%, transparent 25%, transparent 75%, rgba(150,150,160,.05) 75%); background-size:24px 24px;background-position:0 0,12px 12px; } /* o header fica DE FORA desta lista: ele e sticky (top:0, z-index:50) e um position:relative aqui mataria o sticky no tema escuro */ :root[data-theme="dark"] main, :root[data-theme="dark"] section, :root[data-theme="dark"] footer, :root[data-theme="dark"] .grid-divider{position:relative;z-index:1} :root[data-theme="dark"] .cinza{background:rgba(20,23,29,.62)} :root[data-theme="dark"] .escura{background:rgba(9,11,15,.68); box-shadow:inset 0 1px 0 rgba(43,107,255,.4), inset 0 -1px 0 rgba(200,0,0,.3)} /* carbono prata e branco no tema claro */ :root[data-theme="light"] body{ background: radial-gradient(1100px 560px at 84% -6%, rgba(200,0,0,.045), transparent 58%), radial-gradient(950px 520px at -4% 6%, rgba(30,90,255,.045), transparent 55%), #f6f7fa; } :root[data-theme="light"] body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.75; background-image: linear-gradient(45deg, rgba(95,105,125,.055) 25%, transparent 25%, transparent 75%, rgba(95,105,125,.055) 75%), linear-gradient(45deg, rgba(95,105,125,.055) 25%, transparent 25%, transparent 75%, rgba(95,105,125,.055) 75%); background-size:24px 24px;background-position:0 0,12px 12px; } :root[data-theme="light"] main, :root[data-theme="light"] section, :root[data-theme="light"] footer, :root[data-theme="light"] .grid-divider{position:relative;z-index:1} :root[data-theme="light"] .cinza{background:rgba(238,241,246,.66)} /* divisor: bandeira quadriculada + chevrons LED pulsantes */ .grid-divider{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;padding:10px clamp(1rem,4vw,2.5rem);overflow:hidden} .grid-divider .flag{flex:none;width:48px;height:22px;border-radius:3px; background:conic-gradient(#e9e9ee 25%, #14151a 0 50%, #e9e9ee 0 75%, #14151a 0) 0 0/11px 11px; box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.25)} .grid-divider .chevs{flex:1;display:flex;gap:7px;align-items:center;overflow:hidden;height:16px} .grid-divider .chev{flex:none;width:12px;height:12px;border-right:3px solid;border-top:3px solid;transform:rotate(45deg)} .grid-divider .chev.r{border-color:var(--vermelho);filter:drop-shadow(0 0 5px rgba(200,0,0,.65))} .grid-divider .chev.b{border-color:#2b6bff;filter:drop-shadow(0 0 5px rgba(43,107,255,.65))} .grid-divider .lbl{flex:none;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--azul)} :root[data-theme="dark"] .grid-divider .lbl{color:#84a4ff} @keyframes chevpulse{0%,100%{opacity:.35}50%{opacity:1}} .grid-divider .chev{animation:chevpulse 2.4s ease-in-out infinite} .grid-divider .chev:nth-child(2){animation-delay:.2s} .grid-divider .chev:nth-child(3){animation-delay:.4s} .grid-divider .chev:nth-child(4){animation-delay:.6s} .grid-divider .chev:nth-child(5){animation-delay:.8s} .grid-divider .chev:nth-child(6){animation-delay:1s} /* marca de pneu (skid) decorativa: aplicar a classe .skid numa secao */ .skid{position:relative;overflow:hidden} .skid::after{content:"";position:absolute;pointer-events:none;z-index:0; width:300px;height:56px;bottom:6px;right:-24px;opacity:.10;transform:rotate(-5deg); background:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 15px); -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent); mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)} :root[data-theme="dark"] .skid::after{background:repeating-linear-gradient(90deg,#fff 0 7px,transparent 7px 15px);opacity:.07} @media(prefers-reduced-motion:reduce){ .grid-divider .chev{animation:none;opacity:.85} } /* sentinela da autocorrecao de cache: as paginas conferem esta regra */ #ek-css-guard{position:fixed;visibility:hidden} /* ============================================================ Área do Piloto (botão sempre visível na barra) + submenu "Mais" ============================================================ */ .piloto-btn{display:inline-flex;align-items:center;gap:.4rem;flex:none; font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em; font-size:.82rem;line-height:1;padding:.55rem 1rem;border-radius:10px; background:var(--vermelho);color:#fff;box-shadow:0 4px 14px rgba(200,0,0,.32); transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap} .piloto-btn:hover{transform:translateY(-1px);background:var(--vermelho-escuro);color:#fff} .piloto-ico{font-size:1rem;line-height:1} /* "Area do Piloto" vira item (botao vermelho) dentro do menu dropdown no mobile; no header da barra ela fica escondida abaixo de 1160px (ver bloco responsivo). */ .menu-piloto{display:none} @media(max-width:1160px){ #menu .menu-piloto{display:block;border-bottom:none;padding-top:.4rem} #menu .menu-piloto .piloto-btn{display:flex;justify-content:center;color:#fff; padding:.6rem .8rem;margin:.3rem 0 .1rem;font-size:.95rem;border-radius:10px; white-space:normal;text-align:center;line-height:1.15} } /* botão "Mais" imita os links do menu (é