/* ========================================================================= AKROS — TUDO ESCURO (da seção 2 em diante) · 07/10 Decisão do dono: depois da hero, o site inteiro em grafite quase preto, com UM acento (o azul de marca) e o mosaico da marca, sutil, nas bordas. Substitui o rodízio claro/escuro de bandas.css e as lavagens coloridas de atmosfera.css (aurora, grão, luzes azuis e ciano). Carrega por ÚLTIMO. Não encosta na hero nem no menu. ========================================================================= */ :root{ --gr-a:#0A0B0E; /* faixa ímpar */ --gr-b:#0D1828; /* faixa par: azul-noite. Era #0E1014, 4 pontos acima do grafite, e o dono não distinguia as seções (07/10): agora a seção se separa pela COR, sem traço */ --gr-card:#14171C; --gr-card-2:#1A1D23; --gr-fio:rgba(255,255,255,.07); --gr-fio-forte:rgba(255,255,255,.12); } /* ---- a tinta vira clara: quem usa os tokens troca sozinho ---- */ .pipeline,.bloco,.fim{ --ink:#F2F4F7; --ink-soft:#DDE2E8; --body:#A7B0BC; --muted:rgba(232,236,242,.62); --faint:rgba(232,236,242,.46); --ghost:rgba(232,236,242,.38); --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06); --accent-ink:#6CB8FF; --solid:var(--gr-card); --glass:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.05); --edge:rgba(255,255,255,.08); --emenda:var(--gr-fio); --brilho:rgba(255,255,255,.06); color:var(--body); } /* ---- o chão: grafite chapado, dois tons alternados e um fio na emenda ---- */ /* com a seção do piloto (07/10) entrando entre planos e dúvidas, o rodízio segue: dúvidas vira azul-noite e o fechamento vira grafite. 07/10, nova ordem: pipeline · perdas · diferenciais · estúdio · leads · implantação · lado a lado · planos · piloto · dúvidas · fecho. A implantação passa a azul-noite e a seção nova (diferenciais) entra no grafite. 07/10, noite: perdas · diferenciais · pipeline · estúdio · leads · implantação · lado a lado · planos · piloto · topo · dúvidas · fecho; diferenciais, leads, lado a lado e dúvidas viram papel claro (claro.css), e o resto alterna azul-noite / grafite sem repetir vizinho. */ /* 15/10, o dono: «No ar em 4 passos» logo depois do estúdio, e os dois «com o mesmo fundo escuro» do pipeline: estúdio e implantação saem do azul-noite e entram no grafite, com o mosaico na força do grafite. Em seguida, o mesmo para os planos («Escolha o grau de autonomia…») e o radar (radar.css). */ .pipeline,#estudio,#implanta,#planos,#diferenciais,#dossie,#comparativo,#piloto,.fim{background:var(--gr-a)} /* 20/10, o dono: «tem como destoar só um pouquinho o tom de fundo dessa seção? Escolha o grau de autonomia do seu Akros». Os planos ficam entre o converse e o comparativo e eram o mesmo grafite do converse. Um degrau frio acima do grafite, entre ele e o azul-noite: o #0E1014 de antes (4 pontos) o dono não distinguia; o azul-noite (#0D1828) ele tirou em 15/10. */ #top #planos{ /* 20/10, depois de ver: «deixe um pouco mais escuro». Era #0F1520 */ background:#0D1219; /* os cartões sobem um degrau acima do chão novo, na mesma família fria (no grafite #14171C eles quase sumiam: mesma luz do chão) */ --gr-card:#151B26; --gr-card-2:#1B2230; } #perdas,#faq{ background:var(--gr-b); /* os cartões da faixa azul-noite são da família dela, não grafite */ --gr-card:#132136; --gr-card-2:#192A42; } .bloco,.fim{box-shadow:inset 0 1px 0 var(--gr-fio)} .pipeline{ box-shadow: 0 -30px 80px -30px rgba(0,0,0,calc(.6 * (1 - var(--p,1)))), inset 0 1px 0 var(--gr-fio); } /* ---- textura: o mosaico da marca, em cristal, só nas bordas ---- Gerado pelo gerar_mosaico_logo.py, com a malha da marca: triângulos equiláteros (pedido do dono), as cinco cores dela e na mesma proporção. Do mosaico do Fantástico vem o cristal: ::before o mosaico (assets/mosaico-marca.svg): pastilhas com junta fina, uma luz só (de cima à esquerda) e um filete na aresta que a olha. O miolo fica liso (o texto mora ali); ele vive nas bordas. o piscar js/mosaico.js: pastilhas da mesma malha acendem uma por vez (o dono preferiu isso à faixa de luz varrendo). Só opacity, no compositor: animar a máscara redesenhava o SVG todo quadro, 17 → 70–100 ms por quadro (medido 07/10). A aurora (atmosfera.css) sai: as manchas azul e ciano eram a cor que sobrava. No fechamento o ::before era o halo da manchete (fechamento.css); o halo desce para o fundo da seção, e as duas camadas ficam iguais às outras. */ .pipeline::before,.bloco::before,.fim::before{ content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none; width:auto;height:auto;aspect-ratio:auto;transform:none;filter:none;animation:none; background:url("../assets/mosaico-marca.svg") center top/1920px 970px repeat; /* 08/10, do dono: «um pouquinho mais evidentes» — .12 → .15 (e o azul-noite .07 → .09, o fechamento .15 → .18: as proporções de antes ficam) */ opacity:.15; -webkit-mask-image:radial-gradient(74% 72% at 50% 50%,transparent 42%,#000 100%); mask-image:radial-gradient(74% 72% at 50% 50%,transparent 42%,#000 100%); } .pipeline::after,.bloco::after,.fim::after{display:none} /* o piscar: um triângulo por vez (js/mosaico.js). Cada pastilha tem o mesmo recorte da do SVG (recuada 0,8 px por aresta: a junta) e só anima opacity. */ .mos-pisca{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict} .mos-pisca i{ position:absolute;display:block;opacity:0;will-change:opacity; animation:mos-pisca 9s cubic-bezier(.4,0,.2,1) infinite; } .mos-pisca i.c{clip-path:polygon(50% 2.309%,98.268% 98.845%,1.732% 98.845%)} .mos-pisca i.b{clip-path:polygon(1.732% 1.155%,98.268% 1.155%,50% 97.691%)} /* acende rápido, apaga devagar, descansa o resto do ciclo */ @keyframes mos-pisca{ 0% {opacity:0} 4% {opacity:1} 15%,100%{opacity:0} } /* futuro.js marca a faixa fora da tela: ali as pastilhas somem de vez (sem camada nem relógio): só as faixas à vista têm pastilhas vivas */ .atm-fora .mos-pisca{display:none} /* fechamento: quase sem texto, a marca aparece mais; o halo vira fundo */ .fim::before{opacity:.18} /* nas faixas azul-noite o mosaico (que é azul) salta mais: lá ele fica em ~60% da força do grafite (pedido do dono, 07/10). --mos-forca chega ao js/mosaico.js e apaga junto o piscar */ #perdas,#faq{--mos-forca:.6} :is(#perdas,#faq)::before{opacity:.09} .fim{ background: radial-gradient(ellipse 440px 260px at 50% 34%,rgba(67,166,255,.15),rgba(67,166,255,0)), var(--gr-a); } @media (max-width:700px){ .pipeline::before,.bloco::before,.fim::before{background-size:1152px 582px} } /* 15/10, «continuidade e fluidez»: a malha é uma só na página. js/mosaico.js põe em --mos-y o quanto o topo da faixa está dentro do ladrilho, e as faixas escuras seguidas perdem o fio da emenda (mos-emenda). */ .pipeline::before,.bloco::before,.fim::before{background-position:center var(--mos-y,0px)} /* sem o fio ainda sobrava um risco claro de 1 px do aparelho na emenda (medido a 1,25x: +20 de brilho em toda a largura); a faixa de baixo encosta 2 px por cima da de cima e o risco some. */ :is(.pipeline,.bloco,.fim).mos-emenda{box-shadow:none;margin-top:-2px} /* e o esfumado do mosaico (miolo liso, bordas com pastilha) passa a ser UM para o bloco inteiro de faixas escuras seguidas, não um por faixa: a máscara tem a altura do bloco (--mos-run-h) e cada faixa mostra a parte dela (--mos-run-y). «Parecer que é uma seção só» (dono, 15/10). */ .pipeline::before,.bloco::before,.fim::before{ -webkit-mask-size:100% var(--mos-run-h,100%);mask-size:100% var(--mos-run-h,100%); -webkit-mask-position:0 var(--mos-run-y,0px);mask-position:0 var(--mos-run-y,0px); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } /* ========================================================================= O QUE A TINTA CLARA OBRIGA NAS PEÇAS Achado pela auditoria de contraste (07/10): peças com cor ESCRITA, que não passam pelos tokens. Cada regra aqui corrige uma peça que sumiu no escuro. ========================================================================= */ /* 7 · os seis cartões: eram brancos com texto escuro */ .cap__c{ background:var(--gr-card); border-color:rgba(255,255,255,.09); box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 18px 40px -26px rgba(0,0,0,.8); } .cap__c:hover{ border-color:rgba(10,128,226,.55); box-shadow:0 0 0 3px rgba(10,128,226,.10),0 22px 44px -26px rgba(0,0,0,.85); } .cap__ic{background:rgba(255,255,255,.05);color:var(--ink-soft)} .cap__c:hover .cap__ic{background:rgba(10,128,226,.16);color:#6CB8FF} /* 8 · a tampa da coluna Akros: era tinta escura com texto branco; vira o acento — é o único bloco sólido da seção */ .vs thead .vs__nos{background:var(--accent);color:#FFFFFF} .vs .vs__nos{background:rgba(10,128,226,.08);border-left-color:rgba(10,128,226,.30);border-right-color:rgba(10,128,226,.30)} .vs tbody .vs__nos{border-top-color:rgba(10,128,226,.22)} .vs tbody tr:last-child .vs__nos{border-bottom-color:rgba(10,128,226,.30)} .vs tbody tr:hover{background:rgba(255,255,255,.025)} .vs tbody tr:hover .vs__nos{background:rgba(10,128,226,.13)} /* 2 e 3 · o passo aberto da lista: era vidro branco */ :is(#pipeline,#estudio) .ps__i.is-now{background:var(--gr-card-2);box-shadow:none} :is(#pipeline,#estudio) .ps__n{color:color-mix(in srgb,var(--st) 62%,#FFFFFF)} /* legendas com tinta escrita */ .signals__src,.fonte,.fonte b{color:var(--faint)} /* marcas que eram tinta escura a 34–38% e sumiram no grafite */ .mk--nao{color:rgba(232,236,242,.30)} .faq__sinal{color:rgba(232,236,242,.45)} /* o azul-marinho que sobrava nos cartões e no rodapé vira grafite: o azul fica só no acento (borda e luz do cartão aceso, números, botões) */ .plano{ background:var(--gr-card); box-shadow:0 22px 44px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); } .ciclo{background:var(--gr-card)} .rodape{background:#07080A} /* 6 · a jornada: o verde (`--mint`) era o acento do palco verde. Sem o palco, o acento volta a ser o azul de marca. O verde que fica é o do WhatsApp, dentro das telas-réplica: é a cor do produto de outra empresa, não nossa. */ #journey{--mint:#6CB8FF} #journey .route-fill{background:linear-gradient(var(--mint),var(--accent))} #journey .reading-result,#journey .transcript-body strong,#journey .transcript-body dt{color:#9CCFFF} #journey .reading-progress{background:var(--mint)} #journey .edition{color:var(--faint)} #journey .speed-button[aria-pressed="true"]{background:var(--accent);color:#FFFFFF;border-color:var(--accent)} #journey .device-rim{border-color:rgba(108,184,255,.55);box-shadow:0 0 0 1px rgba(108,184,255,.16),0 0 21px rgba(108,184,255,.10)} #journey .focus-matte{background-color:transparent;background-image:radial-gradient(46% 48% at 50% 50%,rgba(5,6,8,.62) 0%,rgba(5,6,8,.58) 50%,rgba(5,6,8,.30) 78%,rgba(5,6,8,0) 100%)} #journey .ground-shadow{background:#000} /* ---------- o rótulo de cada seção, em dourado (07/10, pedido do dono) ---------- O único segundo tom do site: só no rótulo em versalete acima do título, de todas as seções. A hero não tem .sechead__eyebrow e fica como está. */ :root{--ouro:#D9B45F} #top .sechead__eyebrow,#top .fim__olho,#journey .eyebrow{color:var(--ouro)} #top .sechead__eyebrow i{background:var(--ouro)} #top .fim__olho{border-color:rgba(217,180,95,.34);background:rgba(217,180,95,.07)} #top .fim__olho i{background:var(--ouro);box-shadow:0 0 0 4px rgba(217,180,95,.15)} /* ---------- o título em dourado nas três escuras em sequência (19/10) ---------- Pedido do dono: «nessas 3 seções escuras, coloque títulos na cor dourada para separar elas e dar destaque para cada seção». São as três que caem uma depois da outra no mesmo grafite: a A.R.I.A. em operação (#pipeline), o estúdio e o «Vende e recebe». O ouro é o do rótulo (--ouro); o trecho em segue destacado pelo peso e pela itálica. */ #top #pipeline .sechead__title,#top #estudio .sechead__title,#top #vendas .sechead__title, #top #pipeline .sechead__title em,#top #estudio .sechead__title em,#top #vendas .sechead__title em{color:var(--ouro)}