/* ========================================================================= NAVE — sistema de design compartilhado ========================================================================= DUAS CAMADAS DE TOKEN, e a distinção importa: 1) PALETA — as cores da marca. Constantes, nunca usadas direto em componente. 2) SEMÂNTICOS — fundo, texto, superfície, borda. É o que os componentes consomem. Trocá-los inverte a página inteira. Por isso a NAVE pode ser escura e as naves claras sem duplicar uma linha: → home da NAVE → Nave Mãe, Pet, Casa, Tech E o acento é de quem: dourado é da marca-mãe (ouro = valor, que é o negócio), coral é da Nave Mãe, verde do Pet, âmbar da Casa, azul do Tech. A mãe não veste a cor da filha. MOBILE FIRST: o estilo base é o do celular. Media query só ADICIONA. ========================================================================= */ :root{ /* ---------- paleta ---------- */ --navy-abismo:#0e1729; --navy:#16223a; --navy-2:#1e2c4a; --navy-3:#2b3d60; --creme:#fdf6ee; --creme-2:#f7ebdd; --papel:#fffdfa; --tinta:#1a2438; --tinta-2:#54637d; --tinta-3:#8a97ab; --clara:#e9f0fb; --clara-2:#a8bad6; --clara-3:#7688a6; --zap:#25a35a; --zap-2:#1d8a4b; --zap-luz:#5fd694; /* ---------- semânticos: claro é o padrão ---------- */ --fundo:var(--creme); --fundo-alt:var(--creme-2); --superficie:var(--papel); --texto:var(--tinta); --texto-2:var(--tinta-2); --texto-3:var(--tinta-3); --borda:rgba(26,39,64,.1); --borda-forte:rgba(26,39,64,.2); --veu-topo:rgba(253,246,238,.84); /* ---------- acento: coral é o padrão (Nave Mãe) ---------- */ --acento:#c4645f; --acento-luz:#e8a09c; --acento-veu:#faeae7; --r-sm:12px; --r-md:18px; --r-lg:26px; --s1:0 1px 2px rgba(14,23,41,.06),0 4px 12px rgba(14,23,41,.06); --s2:0 2px 4px rgba(14,23,41,.06),0 14px 32px rgba(14,23,41,.1); --s3:0 4px 8px rgba(14,23,41,.07),0 28px 64px rgba(14,23,41,.16); } /* ===== A NAVE é escura. Só os semânticos mudam; nada de componente. ===== */ body.escura{ --fundo:var(--navy-abismo); --fundo-alt:var(--navy); --superficie:#1b2942; --texto:var(--clara); --texto-2:var(--clara-2); --texto-3:var(--clara-3); --borda:rgba(255,255,255,.12); --borda-forte:rgba(255,255,255,.24); --veu-topo:rgba(14,23,41,.82); --acento:#f0b45a; --acento-luz:#ffd28a; --acento-veu:rgba(240,180,90,.14); --s1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.3); --s2:0 2px 6px rgba(0,0,0,.34),0 16px 36px rgba(0,0,0,.4); --s3:0 6px 12px rgba(0,0,0,.38),0 32px 70px rgba(0,0,0,.5); } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0;background:var(--fundo);color:var(--texto); font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden;padding-bottom:84px; } img{max-width:100%;height:auto;display:block;} a{color:var(--acento);} h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.13; letter-spacing:-.018em;margin:0 0 .5em;text-wrap:balance;color:var(--texto); font-variation-settings:"SOFT" 40;} h1{font-size:clamp(2.05rem,8vw,4rem);letter-spacing:-.032em;} h2{font-size:clamp(1.65rem,5.4vw,2.7rem);letter-spacing:-.026em;} h3{font-size:1.06rem;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700; letter-spacing:-.008em;} p{margin:0 0 1.1em;} .wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px;} @media(min-width:760px){.wrap{padding:0 32px;}} .pular{position:absolute;left:-9999px;background:var(--acento);color:#101a2e; padding:14px 20px;border-radius:0 0 12px 0;font-weight:800;z-index:200;} .pular:focus{left:0;} :focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:8px;} /* ------------------------------------------------------------- botões */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:1rem;text-decoration:none;border-radius:999px; padding:16px 26px;min-height:52px;white-space:nowrap; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s; } /* Verde diz "isto abre o WhatsApp". Dourado diz "isto é uma ação da NAVE". A cor carrega significado, não decoração. */ .btn-zap{background:var(--zap);color:#fff; box-shadow:0 4px 14px rgba(37,163,90,.32),0 1px 2px rgba(37,163,90,.2);} .btn-acento{background:var(--acento);color:#101a2e; box-shadow:0 4px 16px color-mix(in srgb,var(--acento) 40%,transparent);} .btn-linha{background:var(--superficie);color:var(--texto); box-shadow:inset 0 0 0 1.5px var(--borda),var(--s1);} .btn:active{transform:scale(.97);} @media(hover:hover){ .btn:hover{transform:translateY(-2px);} .btn-zap:hover{background:var(--zap-2);box-shadow:0 8px 24px rgba(37,163,90,.4);} .btn-acento:hover{box-shadow:0 8px 26px color-mix(in srgb,var(--acento) 52%,transparent);} .btn-linha:hover{box-shadow:inset 0 0 0 1.5px var(--borda-forte),var(--s2);} } /* --------------------------------------------------------------- topo */ .topo{position:sticky;top:0;z-index:100; background:var(--veu-topo);backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--borda);} .topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;} .marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);} .marca img{width:38px;height:38px;border-radius:50%;box-shadow:var(--s1);flex:none;} /* O símbolo da frota nas naves-filhas. `currentColor` é o que faz a mesma marca vestir o acento de cada nave sem um arquivo por vertical. */ .marca .simbolo{width:38px;height:38px;flex:none;color:var(--acento);} footer .marca .simbolo{width:34px;height:34px;} .marca .nm{font-family:Fraunces,serif;font-size:1.16rem;font-weight:600; letter-spacing:-.02em;display:block;line-height:1.1;} .marca .sb{font-size:.6rem;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--acento);} .topo nav{display:flex;align-items:center;gap:24px;} .topo nav a:not(.btn){color:var(--texto-2);text-decoration:none;font-weight:600;font-size:.92rem;} .topo nav a:not(.btn):hover{color:var(--acento);} .topo .btn{padding:11px 20px;min-height:44px;font-size:.9rem;} .dk{display:none;} @media(min-width:900px){.dk{display:inline-flex;}} /* =========================================================== 360NAVE == O LOCKUP: pincel + grau + tipografia. ========================================================================= O "360" é o traço de pincel do logotipo, entregue como MÁSCARA e não como imagem colorida. Por isso a cor vem do CSS: um arquivo de 47 KB serve a frota inteira — dourado na marca-mãe, coral na Nave Mãe, e assim por diante. Imagem colorida exigiria uma exportação por vertical a cada ajuste, e a camada de tokens semânticos não conseguiria tocá-la. O `°` NÃO vem dentro da máscara, de propósito: ele é o símbolo reduzido da marca (o anel em `simbolo.svg`), e precisa ser o mesmo desenho no favicon, no ícone do grupo e aqui. Se viesse do pincel, seriam dois desenhos diferentes do mesmo elemento. Composição "colada": o grau encaixa no ombro do zero e faz a ponte entre as duas metades. Sem isso o lockup lê como "360" + espaço + "NAVE" em vez de uma palavra só — e 360NAVE é uma palavra só, que é justamente o motivo de estar livre em todos os canais. TAMANHO: uma variável só. `--lk` é a largura do pincel; todo o resto é proporcional a ela. Assim navbar, rodapé e capa são o MESMO desenho em escalas diferentes, e não três composições que se parecem. ⚠️ A largura TOTAL do lockup é ~3x o `--lk`: o pincel vale 1, o grau ~0,3 e o "NAVE." em Fraunces ~1,75. Dimensionar `--lk` pela viewport sem contar isso estoura a tela — foi o que aconteceu na primeira versão. */ .lockup{ --lk:46px; display:flex;align-items:center;gap:0; text-decoration:none;color:var(--texto); } .lockup .pincel{ -webkit-mask-image:url("360-pincel.png"); mask-image:url("360-pincel.png"); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; background:var(--acento); width:var(--lk);aspect-ratio:215/110;flex:none; } /* O grau encaixado no ombro do zero: é ele que trava as duas metades. */ .lockup .grau{ width:calc(var(--lk) * .2);height:calc(var(--lk) * .2); border:calc(var(--lk) * .055) solid var(--acento);border-radius:50%; flex:none;align-self:flex-start; margin:calc(var(--lk) * .07) 0 0 calc(var(--lk) * .09); } .lockup .palavra{ font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.02em; line-height:.9;color:var(--texto); font-size:calc(var(--lk) * .56);margin-left:calc(var(--lk) * .05); } .lockup .palavra i{font-style:normal;color:var(--acento);} /* O rodapé é navy nas DUAS páginas (`footer{background:var(--navy-abismo)}`), mesmo na Nave Mãe, que é clara. Sem isto o `NAVE.` herdaria --texto, que lá é tinta escura — texto escuro sobre fundo escuro. O pincel não sofre: ele usa --acento, que tem contraste nos dois casos. O ponto final vira dourado no rodapé da Nave Mãe de propósito: ali quem assina é a marca-mãe, não a filha. */ footer .lockup{--lk:52px;} footer .lockup .palavra{color:var(--clara);} footer .lockup .pincel{background:var(--ouro-marca,#f0b45a);} footer .lockup .grau{border-color:var(--ouro-marca,#f0b45a);} footer .lockup .palavra i{color:var(--ouro-marca,#f0b45a);} /* Capa: o lockup É o título da primeira dobra. A razão MEDIDA entre `--lk` e a largura total é 3,19 — não 3,05, que era estimativa minha. Com 27vw o conjunto ocupava 100% da largura útil: não estourava, mas encostava nas duas bordas, e sem respiro a leitura é a de texto cortado. 21vw deixa ~79% de ocupação, que é onde ele respira. Conferido em 320, 390, 430 e 1280px com a Fraunces já carregada. */ .lockup.capa-marca{--lk:min(88px,21vw);margin:0 0 14px;} @media(min-width:900px){.lockup.capa-marca{--lk:108px;}} /* Mantido só onde a caricatura é NARRATIVA, não identidade: a 38px o rosto não se lê e a marca vira mancha. Lugar dela é grande, na seção de origem. */ .marca-fav{ width:38px;height:38px;flex:none;object-fit:contain; filter:drop-shadow(0 2px 7px rgba(0,0,0,.35)); } footer .marca-fav{width:34px;height:34px;} /* Mantido: as naves ainda usam o orbe quando não têm logotipo próprio. */ .orbe-marca{ display:block;width:34px;height:34px;border-radius:50%;flex:none;position:relative; background:radial-gradient(circle at 34% 30%,var(--acento-luz),color-mix(in srgb,var(--acento) 68%,#0a1120)); box-shadow:0 0 0 4px color-mix(in srgb,var(--acento-luz) 18%,transparent), 0 4px 14px color-mix(in srgb,var(--acento) 40%,transparent); } .orbe-marca::after{content:"";position:absolute;inset:-7px;border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--acento-luz) 46%,transparent); border-right-color:transparent;border-top-color:transparent;} /* ------------------------------------------------------------- ondas */ .onda{display:block;width:100%;height:auto;margin-top:-1px;} /* ------------------------------------------------------------ seções */ section{padding:56px 0;} @media(min-width:760px){section{padding:88px 0;}} .cabeca{max-width:58ch;margin-bottom:34px;} .cabeca.meio{margin-inline:auto;text-align:center;} .olho{font-size:.73rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--acento);display:block;margin-bottom:12px;} .cabeca p{color:var(--texto-2);font-size:1.03rem;margin:0;} .alt{background:var(--fundo-alt);} /* ------------------------------------------------------------- cartas */ .grade{display:grid;gap:14px;} @media(min-width:620px){.grade{grid-template-columns:repeat(2,1fr);gap:18px;}} @media(min-width:1000px){.grade.q4{grid-template-columns:repeat(4,1fr);}} .carta{background:var(--superficie);border-radius:var(--r-md);padding:24px 22px; box-shadow:var(--s1);border:1px solid var(--borda);position:relative;overflow:hidden; transition:transform .25s,box-shadow .25s;} .carta::after{content:"";position:absolute;inset:0 0 auto;height:3px; background:linear-gradient(90deg,var(--acento),var(--acento-luz)); opacity:0;transition:opacity .25s;} @media(hover:hover){.carta:hover{transform:translateY(-4px);box-shadow:var(--s2);} .carta:hover::after{opacity:1;}} .carta .n{font-family:Fraunces,serif;font-size:2.2rem;font-weight:700;line-height:1; color:var(--acento);opacity:.62;margin-bottom:12px;letter-spacing:-.04em;} .carta p{color:var(--texto-2);font-size:.93rem;margin:0;} /* -------------------------------- bloco escuro dentro de página clara */ /* Usado pelas naves (que são claras) para a seção de princípios. Na home, que já é escura, ele fica um degrau acima do fundo. */ .escuro{background:var(--navy);color:var(--clara);position:relative;overflow:hidden;} body.escura .escuro{background:var(--navy-2);} .escuro h2,.escuro h3{color:var(--clara);} .escuro .cabeca p{color:var(--clara-2);} .escuro::before{content:"";position:absolute;width:620px;height:620px; top:-290px;left:-230px;pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--acento) 18%,transparent),transparent 66%);} .escuro .wrap{position:relative;z-index:1;} .itens{display:grid;gap:26px;} @media(min-width:760px){.itens{grid-template-columns:repeat(2,1fr);gap:34px 42px;}} .item{padding-left:20px;border-left:2px solid color-mix(in srgb,var(--acento) 55%,transparent);} .item h3{margin-bottom:.42em;} .item p{color:var(--clara-2);font-size:.94rem;margin:0;} /* ---------------------------------------------------------------- faq */ details{background:var(--superficie);border-radius:var(--r-sm); border:1px solid var(--borda);box-shadow:var(--s1); margin-bottom:10px;overflow:hidden;transition:box-shadow .2s;} details[open]{box-shadow:var(--s2);} summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:700; font-size:.98rem;color:var(--texto); display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;} summary::-webkit-details-marker{display:none;} summary::after{content:"";flex:none;width:11px;height:11px; border-right:2.5px solid var(--acento);border-bottom:2.5px solid var(--acento); transform:rotate(45deg) translateY(-3px);transition:transform .25s;} details[open] summary::after{transform:rotate(-135deg) translateY(-3px);} details .corpo{padding:0 20px 20px;color:var(--texto-2);font-size:.94rem;} details .corpo p:last-child{margin:0;} /* -------------------------------------------------------------- fecho */ .fecho{text-align:center;background:var(--fundo-alt);position:relative;overflow:hidden;} .fecho::before{content:"";position:absolute;width:540px;height:540px; top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--acento) 28%,transparent),transparent 66%);} .fecho .wrap{position:relative;z-index:1;max-width:620px;} .fecho p{color:var(--texto-2);margin-bottom:26px;} /* ------------------------------------------------------------- rodapé */ footer{background:var(--navy-abismo);color:var(--clara-3);padding:46px 0 34px;font-size:.86rem;} footer .marca{color:var(--clara);} footer .marca .sb{color:var(--acento);} footer .cima{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between; align-items:center;margin-bottom:28px;} footer .naves{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:26px;} footer .naves a{color:var(--clara-2);text-decoration:none;font-weight:600;} footer .naves a:hover{color:var(--acento);} footer .aviso{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;max-width:76ch;} footer .aviso p{margin:0 0 .8em;} footer a{color:var(--clara-2);} /* --------------------------------------------- barra fixa só no celular */ .cta-fixo{position:fixed;left:0;right:0;bottom:0;z-index:150; background:var(--veu-topo);backdrop-filter:blur(14px); border-top:1px solid var(--borda); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(14,23,41,.14);} .cta-fixo .btn{width:100%;} @media(min-width:900px){.cta-fixo{display:none;}body{padding-bottom:0;}} /* -------------------------------------------------- revelação em scroll */ .rev{opacity:0;transform:translateY(22px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);} .rev.vis{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important;transition:none!important;} .rev{opacity:1;transform:none;} }