/* ========================================================================= AKROS — As faixas claras (07/10) Pedido do dono: «em algumas seções coloque esse cinza do Falcão Landing Page. Troque apenas onde combinar melhor». O cinza é o `--papel` da landing do Falcão (#F4F8FA), com os cartões BRANCOS e o fio #DCE5EC de lá. Onde, e por quê (as que eram claras no rodízio antigo de bandas.css): diferenciais CLARO seis cartões: é o desenho do Falcão (cartão branco sobre papel); a miniatura escura vira a «foto» leads CLARO a tela real da plataforma (pedido do dono, 07/10): a janela clara sobre o papel, como era no rodízio comparativo CLARO a tabela é fio de cabelo: no escuro o fio some dúvidas CLARO parede de texto: o claro é o chão que lê melhor piloto CLARO 08/10, pedido do dono com a foto da seção: «coloque esta seção com o fundo cinza padrão» O resto segue grafite / azul-noite (escuro.css). Nenhum par vizinho repete tom: perdas (azul) · DIFERENCIAIS · pipeline (grafite) · estúdio (azul) · LEADS · implantação (azul) · COMPARATIVO · planos (azul) · PILOTO · foto do topo · DÚVIDAS · fecho (grafite). A seção marcada com `.claro` devolve a tinta escura (os tokens de tokens.css) e sai do mosaico (::before e o piscar do js/mosaico.js): o mosaico é cristal azul feito para o escuro; no papel ele vira sujeira. Carrega DEPOIS de escuro.css e diferenciais.css. O escuro pinta o chão por ID (#faq, #comparativo…): por isso a âncora aqui é `#top`. ========================================================================= */ #top .bloco.claro{ --ink:#0A1F45; --ink-soft:#16325A; --body:#38485F; /* as duas tintas fracas sobem um degrau em relação a tokens.css: no papel #F4F8FA o .44 dava 2,7:1 no rótulo miúdo; .62 passa de 4,5:1 */ --muted:rgba(10,31,69,.70); --faint:rgba(10,31,69,.62); --ghost:rgba(10,31,69,.34); --line:#DCE5EC; --line-soft:rgba(10,31,69,.07); --accent-ink:#063A82; --solid:#FFFFFF; --glass:rgba(255,255,255,.34); --glass-2:rgba(255,255,255,.52); --edge:rgba(255,255,255,.62); --emenda:rgba(18,46,76,.06); --brilho:rgba(255,255,255,.92); --gr-card:#FFFFFF; color:var(--body); background:#F4F8FA; box-shadow:none; } #top .bloco.claro::before{display:none} #top .bloco.claro .mos-pisca{display:none} /* o rótulo dourado: o #D9B45F do escuro dá 1,9:1 no papel; o dourado de texto do Falcão (--ouro-texto, #956609) passa de 4,5:1 */ #top .claro .sechead__eyebrow{color:#956609} #top .claro .sechead__eyebrow i{background:#956609} /* ---- diferenciais: cartão branco com o fio do Falcão ---- */ #diferenciais.claro .difc{ background:#FFFFFF; border-color:#DCE5EC; box-shadow:0 1px 2px rgba(16,40,70,.04),0 18px 40px -30px rgba(16,40,70,.22); } #diferenciais.claro .difc:hover{ border-color:#BFCDD8; box-shadow:0 1px 2px rgba(16,40,70,.05),0 26px 48px -28px rgba(16,40,70,.30); } #diferenciais.claro .difc__n{ color:#0A56C8;background:rgba(10,128,226,.06);border-color:rgba(10,128,226,.55); } /* ---- comparativo: o que escuro.css escreveu para a noite ---- */ #comparativo.claro .vs tbody tr:hover{background:rgba(10,128,226,.03)} #comparativo.claro .mk--nao{color:rgba(10,31,69,.34)} /* a tampa da coluna Akros: branco sobre o #0A80E2 dava 4,0:1 no rótulo de 10,5 px; o azul fundo da marca (--accent-lo) passa de 6:1 */ #comparativo.claro .vs thead .vs__nos{background:var(--accent-lo,#0A56C8)} /* 19/10: o comparativo passou para logo antes das dúvidas, que são o papel #F4F8FA; no mesmo cinza as duas viravam uma faixa só. Ele fica no branco, como as perdas e os 5 passos. */ #top #comparativo.claro{background:#FFFFFF} /* ---- dúvidas ---- */ #faq.claro .faq__sinal{color:rgba(10,31,69,.45)} /* ---- piloto (08/10) ---- piloto.css e organico.css escreveram a seção para a noite: título e cartões em branco, contorno vivo e luz azul de fundo. No papel o título volta à tinta, o cartão vira o branco do Falcão (o mesmo dos diferenciais), o contorno vivo e a luz de trás saem (no claro a luz azul vira mancha, e o dono recusou fundo colorido) e o botão de contorno ganha tinta escura, senão some no papel. */ #piloto.claro .sechead__title{color:var(--ink)} #piloto.claro .sechead__title em{color:#0A56C8} #piloto.claro .sechead__sub{color:var(--body)} #piloto.claro .sechead__sub b{color:var(--ink)} #piloto.claro .piloto__cartoes::before{display:none} #piloto.claro .piloto__c{ background:#FFFFFF;border-color:#E3EAF0; box-shadow:0 1px 2px rgba(16,40,70,.04),0 26px 52px -36px rgba(16,40,70,.26); } #piloto.claro .piloto__c::before{display:none} #piloto.claro .piloto__c:hover{ border-color:#CFDCE7; box-shadow:0 1px 2px rgba(16,40,70,.05),0 34px 60px -34px rgba(16,40,70,.32); } #piloto.claro .piloto__c > .spot{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.05),transparent 72%)} #piloto.claro .piloto__c > .spot::after{background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%),rgba(10,128,226,.55),rgba(10,128,226,0) 72%)} #piloto.claro .piloto__ic{ color:#0A56C8;background:rgba(10,128,226,.08); box-shadow:inset 0 0 0 1px rgba(10,128,226,.22); } #piloto.claro .piloto__ct{color:var(--ink)} #piloto.claro .piloto__cp{color:var(--body)} #piloto.claro .piloto__cp b{color:var(--ink)} #piloto.claro .plano__cta--linha{color:var(--ink);background:#FFFFFF;border-color:#C9D6E2} #piloto.claro .plano__cta--linha:hover{color:#063A82;background:#FFFFFF;border-color:#0A80E2} /* ---- perdas (15/10, teste) ---- Pedido do dono, com a foto da seção: «coloque tons claros no fundo dessa seção, pra gente ver como fica». perdas.css escreveu tudo em branco sobre azul-noite; aqui a tinta volta ao escuro e o cartão vira o branco do Falcão. A unidade e a janela de 5 min ficam no azul da marca; texto miúdo no azul fundo (#0A56C8, 6,6:1), porque o #0A80E2 dá 4,0:1 no branco. */ /* o chão: depois, «gostei, mas coloque tons de cores de fundo que combinem. Mantenha a textura da seção de baixo». O degradê azulado (#F7FAFC→#E9F0F6) brigava com o cinza neutro do grão dos diferenciais. Agora é o mesmo cinza, sem grão: clareia no alto e desce até a MÉDIA do grão (rgb 239,243,245, medida na tela a 1,25x), e a emenda fica só na textura. Em seguida, com a foto de um cartão cinza-quente sobre branco: «coloque essas duas cores pra ver». O branco é o chão daqui e o #F6F6F4 é o chão dos diferenciais (com o grão, textura-teste.*). O degradê de antes era #F9FBFC → #F4F7F9 → #EFF3F5. Depois, «coloca o card nesse tom que tava, só que um pouco mais claro»: o cartão é o #F6F6F4 um degrau acima (#F9F9F7), com o fio e a sombra que ele aprovou no branco. */ #top #perdas.claro{background:#FFFFFF} #perdas.claro .sechead__title{color:var(--ink)} #perdas.claro .sechead__sub{color:var(--body)} #perdas.claro .sechead__sub b{color:var(--ink)} #perdas.claro .perda, #perdas.claro .perdas__canal{ background:#F9F9F7; box-shadow: inset 0 0 0 1px #DCE5EC, 0 1px 2px rgba(16,40,70,.04), 0 18px 40px -30px rgba(16,40,70,.22); } #perdas.claro .perda__n{color:var(--ink)} #perdas.claro .perda__n i{color:#0A80E2} #perdas.claro .perda__t{color:var(--body)} #perdas.claro .perda__t b{color:var(--ink)} #perdas.claro .perda__src{color:var(--faint)} #perdas.claro .perda__src a{color:var(--muted);text-decoration-color:rgba(10,31,69,.22)} #perdas.claro .perda__src a:hover{color:#0A56C8;text-decoration-color:rgba(10,86,200,.5)} #perdas.claro .perda__rot{color:var(--muted)} #perdas.claro .perda__rot span + span{color:var(--faint)} #perdas.claro .duelo__lado + .duelo__lado{box-shadow:inset 1px 0 0 #DCE5EC} #perdas.claro .duelo__lado--janela .perda__n span, #perdas.claro .duelo__lado--janela .perda__n i{color:#0A80E2} #perdas.claro .duelo small{color:var(--body)} #perdas.claro .regua__trilho{background:rgba(10,31,69,.08)} #perdas.claro .regua__trilho::after{background:linear-gradient(rgba(10,31,69,.28),rgba(10,31,69,.28)) 57.143% 50% / 1px 8px no-repeat} #perdas.claro .regua__perdido{ background:linear-gradient(90deg,rgba(10,128,226,.9) 0%,rgba(10,128,226,.45) 6%,rgba(10,128,226,.18) 25%,rgba(10,31,69,.1) 60%,rgba(10,31,69,.08) 100%); } #perdas.claro .regua__janela{background:#0A80E2} #perdas.claro .regua__marcas{color:var(--faint)} #perdas.claro .regua__marcas .is-janela{color:#0A56C8} #perdas.claro .perda--mestre .perda__t{color:var(--body)} #perdas.claro .perdas__canal p{color:var(--body)} #perdas.claro .perdas__canal p b{color:var(--ink)} #perdas.claro .perdas__canal small{color:var(--faint)} /* a luz diagonal: branco no branco some; no papel ela vira um brilho azul */ #perdas.claro .perda::before, #perdas.claro .perdas__canal::before{ background-image:linear-gradient(135deg, transparent 32%, rgba(10,128,226,.04) 43%, rgba(10,128,226,.09) 50%, rgba(10,128,226,.04) 57%, transparent 68%); }