/* =========================================================== TEMA ESCURO Ana Paula Lellis Werneck Camada de sobreposição. Não altera nada do style.css. Só entra em ação quando o está com data-tema="escuro", então o tema claro original continua sendo o padrão do arquivo principal e nada aqui vaza para ele. A cor do rodapé (petróleo profundo) vira a cor dominante do site inteiro; o turquesa deixa de ser detalhe e passa a ser o acento que carrega os cliques. COMO REMOVER TUDO: ver as instruções no bloco TEMA, no do index.html. =========================================================== */ html[data-tema="escuro"] { /* Fundos, do mais fundo para o mais alto */ --papel: #0B2F3A; /* chão da página */ --gelo: #0E3743; /* faixa alternada */ --nevoa: #164C5A; /* chip, pastilha, superfície macia */ --branco: #123B47; /* cartão */ /* Profundidades (frase, rodapé, cartão de contato) */ --noite: #0A2932; --noite-2: #06202A; --petroleo-escuro: #0F3B47; /* Acento: no escuro quem trabalha é o turquesa claro. --petroleo era o acento do tema claro, então recebe o valor luminoso e todos os links, ícones e detalhes seguem junto sem precisar de regra individual. */ --petroleo: #7FD3E4; --turquesa: #6DC7DA; --turquesa-claro: #A7DEE8; /* Texto */ --tinta: #ECF7FA; --texto: #A4C1CA; --texto-suave: #7B9AA4; /* Linhas: no escuro borda sólida endurece, luz baixa funciona melhor */ --linha: rgba(167, 222, 232, .13); --linha-forte: rgba(167, 222, 232, .24); /* Sombra precisa de preto real para existir sobre fundo escuro */ --sombra: 0 18px 50px -30px rgba(0, 0, 0, .75); --sombra-alta: 0 30px 70px -34px rgba(0, 0, 0, .85); } html[data-tema="escuro"] body { background: var(--papel); } /* ----------------------------------------------------------- Herói: o véu claro que abria o site vira véu profundo ----------------------------------------------------------- */ html[data-tema="escuro"] .hero-veu { background: linear-gradient(100deg, rgba(11, 47, 58, .985) 0%, rgba(11, 47, 58, .96) 34%, rgba(11, 47, 58, .88) 46%, rgba(11, 47, 58, .55) 57%, rgba(11, 47, 58, .14) 68%, rgba(11, 47, 58, 0) 78%), linear-gradient(to bottom, rgba(6, 32, 42, .55) 0%, rgba(6, 32, 42, 0) 20%), linear-gradient(to top, rgba(11, 47, 58, .96) 0%, rgba(11, 47, 58, 0) 28%); } /* a foto é clara demais para um fundo escuro: rebaixa sem apagar o rosto */ html[data-tema="escuro"] .hero-fundo img { filter: brightness(.82) saturate(.92); } html[data-tema="escuro"] .hero-onda { opacity: .2; } html[data-tema="escuro"] .grafismo { opacity: .16; } html[data-tema="escuro"] .selo-ic { background: rgba(167, 222, 232, .09); border-color: rgba(167, 222, 232, .18); box-shadow: none; } @media (max-width: 900px) { html[data-tema="escuro"] .hero-veu { background: linear-gradient(to bottom, rgba(11, 47, 58, .95) 0%, rgba(11, 47, 58, .89) 22%, rgba(11, 47, 58, .5) 36%, rgba(11, 47, 58, .12) 48%, rgba(11, 47, 58, 0) 60%); } html[data-tema="escuro"] .hero-selos { background: rgba(6, 32, 42, .55); border-color: rgba(167, 222, 232, .18); } html[data-tema="escuro"] .selo-ic { background: rgba(167, 222, 232, .12); } /* medido: o botão ocupa de 48,3% a 52,9% da altura do herói, e o véu mobile já está em .12 aos 48% e zera aos 60%. Ou seja, ele cai bem na faixa em que a foto passa quase limpa e precisa de placa opaca. */ html[data-tema="escuro"] .hero-acoes .btn--linha { background: rgba(6, 32, 42, .74); border-color: rgba(167, 222, 232, .5); color: #EAF6F9; box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .9); } } /* ----------------------------------------------------------- Cabeçalho e menu ----------------------------------------------------------- */ html[data-tema="escuro"] .cabecalho.solido { background: rgba(10, 41, 50, .82); box-shadow: 0 1px 0 rgba(167, 222, 232, .12), 0 10px 30px -24px rgba(0, 0, 0, .9); } /* logo é escuro sobre claro por natureza, no escuro precisa virar traço branco */ html[data-tema="escuro"] .marca img { filter: brightness(0) invert(1); opacity: .95; } html[data-tema="escuro"] .cred-marca { filter: brightness(0) invert(1); opacity: .6; } html[data-tema="escuro"] .menu-fundo { background: rgba(6, 32, 42, .6); } /* ----------------------------------------------------------- Botões ----------------------------------------------------------- */ html[data-tema="escuro"] .btn--primario { background: var(--turquesa); color: #06202A; box-shadow: 0 14px 32px -18px rgba(109, 199, 218, .8); } html[data-tema="escuro"] .btn--primario:hover { background: var(--turquesa-claro); box-shadow: 0 20px 40px -18px rgba(109, 199, 218, .9); } /* Precisa de chão próprio: ele fica sobre a foto do herói, não sobre fundo chapado. Vidro escuro em vez de véu claro, mesma função que o branco a 78% cumpria no tema claro. */ html[data-tema="escuro"] .btn--linha { background: rgba(6, 32, 42, .5); color: var(--turquesa-claro); border-color: rgba(167, 222, 232, .38); } html[data-tema="escuro"] .btn--linha:hover { background: rgba(6, 32, 42, .68); border-color: var(--turquesa); box-shadow: 0 16px 34px -24px rgba(0, 0, 0, .9); } /* dentro do cartão de contato, que já é escuro */ html[data-tema="escuro"] .btn--claro { background: var(--turquesa); color: #06202A; } html[data-tema="escuro"] .btn--claro:hover { background: var(--turquesa-claro); } html[data-tema="escuro"] .skip-link { background: var(--turquesa); color: #06202A; } /* ----------------------------------------------------------- Seções com gradiente que trazia branco fixo no código ----------------------------------------------------------- */ html[data-tema="escuro"] .servicos { background: linear-gradient(180deg, var(--gelo) 0%, rgba(14, 55, 67, .55) 60%, var(--papel) 100%); } /* a frase precisa continuar sendo o ponto mais fundo da página */ html[data-tema="escuro"] .frase { background: linear-gradient(150deg, #082530 0%, #05191F 100%); } /* ----------------------------------------------------------- Cartões ----------------------------------------------------------- */ html[data-tema="escuro"] .dor, html[data-tema="escuro"] .servico, html[data-tema="escuro"] .cartao-cred, html[data-tema="escuro"] .faq-item, html[data-tema="escuro"] .google-cartao, html[data-tema="escuro"] .menu-painel { background: var(--branco); } html[data-tema="escuro"] .dor:hover, html[data-tema="escuro"] .servico:hover, html[data-tema="escuro"] .cartao-cred:hover, html[data-tema="escuro"] .faq-item:hover, html[data-tema="escuro"] .faq-item[open] { border-color: rgba(109, 199, 218, .42); } html[data-tema="escuro"] .dor-ic, html[data-tema="escuro"] .cred-ic { background: rgba(167, 222, 232, .09); } html[data-tema="escuro"] .cartao-cred--nota { background: rgba(167, 222, 232, .06); } html[data-tema="escuro"] .crp { background: rgba(167, 222, 232, .12); } /* A faixa de contato usa var(--petroleo) no style.css, e aqui esse valor é o turquesa claro do acento. Sem esta regra ela abre num azul claro que destoa de tudo. Gradiente próprio, dois tons de petróleo profundo, para ela se destacar do fundo da página sem clarear. */ html[data-tema="escuro"] .contato-faixa { background: linear-gradient(150deg, #15505F 0%, #0A2932 100%); } /* mapa do Google entra branco e fura a página inteira */ html[data-tema="escuro"] .contato-mapa { background: var(--noite); } html[data-tema="escuro"] .contato-mapa iframe { filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95); } /* ----------------------------------------------------------- Fotos: no escuro elas gritam, precisa baixar um ponto ----------------------------------------------------------- */ html[data-tema="escuro"] .sobre-foto img, html[data-tema="escuro"] .espaco-foto img { filter: brightness(.9) saturate(.95); } html[data-tema="escuro"] .sobre-foto:hover img, html[data-tema="escuro"] .espaco-foto:hover img { filter: brightness(1) saturate(1); } html[data-tema="escuro"] .lightbox img { filter: none; }