/* ========================================================================== Tema escuro da Emito Carregado DEPOIS de emito.css e ativo so quando . Sobrepoe apenas cor: o layout, os espacamentos e as correcoes da versao light continuam vindo do emito.css. Gerado a partir do delta entre emito.css e emito-dark.css (a folha da versao antiga do site). ========================================================================== */ /* Variaveis de cor do Webflow — a base do tema. */ :root[data-theme="dark"] { --_color---base-color--black: #090909; --_color---bg-color--bg-primary: #090909; --_color---bg-color--bg-secondary: #1a1a1a; --_color---bg-color--card-bg-01: #2a2a2a; --_color---text-color--text-primary: white; --background-color--background-error\: var(--base-color--pure-light\); --base--bg--badge-bg\: #1b162699; --base--bg--bg-primary\: #090909; --base--bg--bg-secondary\: #1a1a1a; --base--bg--bg-white\: var(--color--base--white\); --base--bg--bg\: #1e1e1e; --base--bg--brand\: var(--color--base--brand-color); --base--border--border-inverse-hover\: var(--color--neutral--500\); --base--border--border-inverse\: var(--color--neutral--700\); --base--text--text-inverse\: #ddc3a5; --base--text--text-primary\: white; --base--text--text-white-80\: #fffc; --base-color--bg-color\: #f6f6f6; --base-color--pure-light\: #fefefe; --color--base--black\: #090909; --color--base--transparent\: #0000; --color--base--white\: white; --color--black--100\: #0000001a; --color--black--400\: #0006; --color--brand--300\: #5a389d; --color--neutral--500\: #ccc; --color--neutral--700\: #595959; --color--white--50\: #ffffff0d; --container--desktop-sm\: 1140px; --font--family--heading\: Inter; --semantic--border--border-brand\: var(--color--brand--300\); --sizes--radius--2xl-16px\: 1rem; --sizes--radius--lg-10px\: .625rem; --sizes--radius--xs-4px\: .25rem; --sizes--space--10xl-56px\: 3.5rem; --sizes--space--11xl-64px\: 4rem; --sizes--space--12xl-72px\: 4.5rem; --sizes--space--13xl-80px\: 5rem; --sizes--space--14xl-96px\: 6rem; --sizes--space--2xl-14px\: .875rem; --sizes--space--3xl-16px\: 1rem; --sizes--space--4xl-20px\: 1.25rem; --sizes--space--5xl-24px\: 1.5rem; --sizes--space--6xl-28px\: 1.75rem; --sizes--space--7xl-32px\: 2rem; --sizes--space--8xl-40px\: 2.5rem; --sizes--space--9xl-48px\: 3rem; --sizes--space--lg-10px\: .625rem; --sizes--space--md-8px\: .5rem; --sizes--space--none\: 0px; --sizes--space--sm-6px\: .375rem; --sizes--space--xl-12px\: .75rem; --sizes--space--xs-4px\: .25rem; --text-color--text-error\: var(--base-color--bg-color\); --typography--size--2xl-17px\: 1.0625rem; --typography--size--6xl-24px\: 1.5rem; --typography--size--7xl-28px\: 1.75rem; --typography--size--md-14px\: .875rem; --typography--size--xl-16px\: 1rem; --typography--size--xs-12px\: .75rem; --typography--size--xxs-11px\: .6875rem; } /* Regras com cor fixa no CSS, que nao respondem as variaveis acima. */ :root[data-theme="dark"] .heading-h3 { background-image: linear-gradient(90deg, var(--_color---base-color--white) 21%, var(--_color---text-color--text-inverse)); } :root[data-theme="dark"] .text-size-md.text-color-80, :root[data-theme="dark"] .text-size-md.text-white-80 { color: var(--_color---text-color--text-white-80); } :root[data-theme="dark"] .heading-h1 { background-image: linear-gradient(260deg, var(--base--text--text-inverse\), #f5f8ee 0%, white 71%); } :root[data-theme="dark"] .heading-h2 { background-image: linear-gradient(90deg, var(--_color---base-color--white) 21%, var(--_color---text-color--text-inverse)); } :root[data-theme="dark"] .section.hero { background-image: url("../bg_hero_dark.avif"); } /* O SVG do topo/rodape tem as letras em #383838, que somem no fundo escuro. A troca vai por CSS (e nao pelo data-dark-src das outras imagens) para o logo ja nascer certo na primeira pintura, sem piscar. */ :root[data-theme="dark"] .brand-logo, :root[data-theme="dark"] .footer-logo { content: url("../emito-logo-horizontal-dark.svg"); } :root[data-theme="dark"] .pricing-scope { background-color: var(--base--bg--bg-primary, #090909); } :root[data-theme="dark"] .pricing-scope .pricing-card { background-color: var(--base--bg--bg-secondary, #1a1a1a); } :root[data-theme="dark"] .pricing-scope .pricing-card__top { border-bottom: 1px solid #2e2e2e; } :root[data-theme="dark"] .pricing-scope .selector-label { color: #888; } :root[data-theme="dark"] .pricing-scope .selector-input { color: white; background-color: #222; border: 1px solid #2e2e2e; } :root[data-theme="dark"] .pricing-scope .pills-row { border-top: 1px solid #2e2e2e; } :root[data-theme="dark"] .pricing-scope .pricing-pill { background-color: #222; border: 1px solid var(--color--base--brand-color, #95c122); color: var(--color--base--brand-color, #95c122); } :root[data-theme="dark"] .pricing-scope .price-currency { color: #888; } :root[data-theme="dark"] .pricing-scope .price-value { color: var(--color--base--brand-color, #95c122); } :root[data-theme="dark"] .pricing-scope .price-period { color: #888; } :root[data-theme="dark"] .nav-link:hover { border-color: var(--_color---base-color--white); } :root[data-theme="dark"] .nav-link.w--current { border-color: var(--_color---base-color--white); color: var(--_color---base-color--white); } :root[data-theme="dark"] .letter-speceing100.hero-badge-2 { color: var(--_color---base-color--white); } :root[data-theme="dark"] .bottom-blur-wrapper { background-image: linear-gradient(#09090900, #090909d1 68%, #090909); } :root[data-theme="dark"] .bottom-blur { background-image: linear-gradient(#12121200, #0b0711d1 50%, #0a0511f5); } :root[data-theme="dark"] .germ-icon-wrapper { background-color: #ffffff29; } :root[data-theme="dark"] .faq_item { background-color: var(--base--bg--bg-secondary\); } :root[data-theme="dark"] .faq-text { background-color: var(--_color---text-color--text-secondary); } :root[data-theme="dark"] .faq-para { color: var(--_color---text-color--grey-3); } :root[data-theme="dark"] .footer-line { background-image: radial-gradient(circle, #fffefe9c, #1a1a1a 77%); } :root[data-theme="dark"] .copyright-text { color: var(--_color---base-color--white); } :root[data-theme="dark"] .hero-bottom-line-wrap { background-image: linear-gradient(221deg, #1a1a1a 35%, #ffffff7d 50%, var(--base--bg--bg-secondary\) 63%); } :root[data-theme="dark"] .text-color-80 { color: var(--_color---text-color--text-white-80); } :root[data-theme="dark"] .hero-bottom-line-wrap-copy { background-image: linear-gradient(221deg, #1a1a1a 15%, #ffffff7d 50%, #1a1a1a 80%); } :root[data-theme="dark"] .cta-wrapper { background-image: url("../bg_cta_dark.webp"); } @media screen and (max-width: 767px) { :root[data-theme="dark"] .hero-bottom-line-wrap { background-image: linear-gradient(221deg, #1a1a1a00 35%, #ffffff54 50%, #1a1a1a61 63%); } :root[data-theme="dark"] .hero-bottom-line-wrap-copy { background-image: linear-gradient(221deg, #1a1a1a00 35%, #ffffff54 50%, #1a1a1a61 63%); } } @media screen and (max-width: 479px) { :root[data-theme="dark"] .hero-bottom-line.nav { background-image: linear-gradient(221deg, #1a1a1a, #ffffff7d 50%, var(--base--bg--bg-secondary\)); } } /* Transicao suave ao alternar (desligada para quem pede menos movimento). */ @media (prefers-reduced-motion: no-preference) { body, .section, .pricing-scope, .pricing-card, .faq_item { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } } /* ========================================================================== Botao de alternar tema (vale nos dois temas) ========================================================================== */ .theme-toggle { width: 40px; height: 40px; cursor: pointer; color: var(--_color---text-color--text-primary, #383838); background: none; border: 1px solid #0000001f; border-radius: 999px; flex: none; place-items: center; padding: 0; display: grid; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .theme-toggle:hover { border-color: var(--_color---base-color--brand-color, #95c122); background-color: #95c1221f; } .theme-toggle:focus-visible { outline: 2px solid var(--_color---base-color--brand-color, #95c122); outline-offset: 2px; } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; transition: opacity .2s ease, transform .2s ease; } /* No claro mostra o sol; no escuro, a lua. */ .theme-toggle__moon { opacity: 0; transform: rotate(-45deg) scale(.7); } .theme-toggle__sun { opacity: 1; transform: none; } :root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: none; } :root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(45deg) scale(.7); } :root[data-theme="dark"] .theme-toggle { color: var(--_color---base-color--white, #fff); border-color: #ffffff2e; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle svg { transition: none; } }