/* ========================================================================== Smart Localiza . v3 . camada sobria Carrega DEPOIS de main-final.css e style.css. Duas funcoes: 1) site inteiro: fontes novas, fundo liso, menu novo, cards sobrios, fim das pilulas e dos efeitos (regras !important de proposito: elas precisam vencer 29 mil linhas de seletores mais especificos) 2) home: componentes .v3-* das secoes refeitas Direcao em DIRECAO_V3.md na raiz do projeto. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens. A convencao do tema: = claro, atributo ausente (ou "dark") = escuro. -------------------------------------------------------------------------- */ :root { --v3-page: #FFFFFF; --v3-page-alt: #F5F6F8; --v3-card: #FFFFFF; --v3-line: #E4E7EB; --v3-line-strong: #C9D0D8; --v3-ink: #111827; --v3-ink-2: #4B5563; --v3-ink-3: #6B7280; /* Cinza fraco em CONTROLE (aba inativa), nao em legenda: o --v3-ink-3 sobre --v3-page-alt da 4,47:1 e reprova por pouco. Este da 4,91:1 sobre o cinza da secao e 5,31:1 sobre branco. */ --v3-ink-3-strong: #646C78; --v3-brand: #F16000; --v3-brand-hover: #D45400; /* Laranja escurecido para TEXTO pequeno: o #F16000 sobre branco da ~3,1:1 e reprova em texto corrido. Este da ~4,8:1. */ --v3-brand-text: #B84A00; --v3-brand-soft: rgba(241, 96, 0, .10); --v3-ok: #16A34A; --v3-shadow-menu: 0 12px 32px rgba(17, 24, 39, .10); /* Painel de monitoramento (secao de disponibilidade): SEGUE O TEMA (pedido do Joao; a versao sempre-escura foi rejeitada). No claro e um painel cinza-claro com miolo branco; no escuro, os valores escuros ficam no bloco :root:not([data-theme=light]) abaixo. */ --v3-panel-bg: #F5F6F8; --v3-panel-card: #FFFFFF; --v3-panel-line: #E4E7EB; --v3-panel-ink: #111827; --v3-panel-ink-dim: rgba(17, 24, 39, .62); --v3-panel-ink-mut: rgba(17, 24, 39, .45); /* Demo do produto (/conhecer-plataforma/): chrome ESCURO nos dois temas, porque nao e uma secao do site e sim uma captura de tela do app, que e escuro. Quase todos estes tokens valem igual nos dois temas; a excecao e --v3-demo-bg, que no escuro precisa se afastar de --v3-page-alt (os dois eram #14181D e a tela sumia dentro da secao). Ver bloco abaixo. --v3-demo-edge e a moldura da tela: no claro o proprio hairline basta, no escuro ele precisa de reforco. */ --v3-demo-bg: #14181D; --v3-demo-card: #1B2128; --v3-demo-line: #2A323B; --v3-demo-edge: var(--v3-demo-line); --v3-demo-ink: #E8EDF2; /* Contraste medido (branco E8EDF2 com alpha, composto no fundo): ink-2 .64 = 6,42:1 sobre --v3-demo-card e 6,79:1 sobre --v3-demo-bg; ink-3 .51 = 4,60:1 sobre --v3-demo-card e 4,77:1 sobre --v3-demo-bg. O .42 antigo dava 3,57:1 e reprovava em ~52 textos de 10 a 12,5px, inclusive nos botoes de sub-aba, que sao controle e nao decoracao. */ --v3-demo-ink-2: rgba(232, 237, 242, .64); --v3-demo-ink-3: rgba(232, 237, 242, .51); --v3-demo-ok: #22C55E; --v3-demo-warn: #F59E0B; --v3-demo-alert: #EF4444; /* Mapa dentro do demo: CLARO nos dois temas. Mapa de verdade e claro, e painel escuro com mapa claro dentro e a cara de uma plataforma real. A grade neon que estava aqui era o maior tique de IA da pagina. */ --v3-map-paper: #EDEEEA; --v3-map-block: #E2E4DF; --v3-map-block-2: #D8DBD4; --v3-map-park: #D3E3CE; --v3-map-water: #C1D9E8; --v3-map-road: #FFFFFF; --v3-map-road-2: #F8F6F1; --v3-map-casing: #D5D8D1; /* Rotulo escrito dentro do mapa. O #6E7176 antigo caia para 3,35:1 sobre o rio (--v3-map-water) e 3,40:1 sobre o contorno de quadra, e a mesma classe carrega "Cerca virtual, 400 m", que e informacao de produto. Este passa em todos os ladrilhos: 5,67:1 no papel, 5,16 na quadra, 4,72 na quadra 2, 4,93 no parque, 4,59 no contorno e 4,52 no rio. */ --v3-map-label: #5A5D62; /* Pino numerado do trajeto: laranja escurecido FIXO nos dois temas. Nao da para usar --v3-brand-text aqui porque ele clareia no tema escuro, e o numero e branco de 10px sobre um mapa que e claro sempre. Branco sobre este da 5,49:1; sobre o --v3-brand cheio daria 3,27:1 e reprovaria. */ --v3-map-pin: #A34200; /* Azul de SELECAO. Nao e cor de marca e nao entra em nada que se clique: marca "este e o item que casa com o que voce escolheu", que e estado, e por isso precisa de um tom que nao brigue com o laranja do botao. Hoje so a faixa acesa do card acima de mil veiculos usa. */ --v3-selecao: #3B82F6; --v3-selecao-halo: rgba(59, 130, 246, .22); --v3-display: "Archivo", "Arial Narrow", Arial, sans-serif; --v3-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --v3-mono: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* O resto do site le estas tres; trocar aqui troca as paginas internas. */ --sl-font-display: var(--v3-display); --sl-font-body: var(--v3-body); --sl-font-mono: var(--v3-mono); } :root:not([data-theme="light"]) { --v3-page: #0F1215; --v3-page-alt: #14181D; --v3-card: #171C22; --v3-line: #262D35; --v3-line-strong: #37404A; --v3-ink: #EDEFF2; --v3-ink-2: #AEB6C0; --v3-ink-3: #88919C; --v3-ink-3-strong: #88919C; /* no escuro o proprio ink-3 ja da 5,58:1 */ --v3-shadow-menu: 0 12px 32px rgba(0, 0, 0, .45); /* A tela do produto precisa se destacar da secao nos DOIS temas. No claro isso sai de graca (chrome escuro sobre secao clara); no escuro os dois valiam #14181D e a tela sumia. Aqui o fundo da tela desce e a moldura engrossa em cor: #414B57 contra a secao da 2,01:1, contra 1,37:1 do hairline padrao. */ --v3-demo-bg: #0B0F13; --v3-demo-edge: #414B57; --v3-brand-text: #FF9147; --v3-brand-soft: rgba(241, 96, 0, .16); --v3-panel-bg: #10151B; --v3-panel-card: #161D25; --v3-panel-line: #242D37; --v3-panel-ink: #E8EDF2; --v3-panel-ink-dim: rgba(232, 237, 242, .60); --v3-panel-ink-mut: rgba(232, 237, 242, .38); /* O halo azul precisa de mais corpo no escuro para aparecer igual. */ --v3-selecao-halo: rgba(59, 130, 246, .34); } /* -------------------------------------------------------------------------- 2. Base do site inteiro -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } /* Quem liga "reduzir movimento" no sistema nao quer a pagina deslizando a cada ancora do menu. O main-final.css declara o smooth duas vezes; esta guarda precisa vir depois, e vem, porque o v3.css carrega por ultimo. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body, [data-theme="light"] body { background: var(--v3-page) !important; background-image: none !important; color: var(--v3-ink); font-family: var(--v3-body); font-size: 16px; line-height: 1.6; } /* Grao e mesh de gradiente do fundo, e o pontilhado diagonal do tema claro. */ body::before, body::after, [data-theme="light"] body::before, [data-theme="light"] body::after { display: none !important; content: none !important; } h1, h2, h3, h4, .sl-display { font-family: var(--v3-display); color: var(--v3-ink); margin: 0; } h1, h2 { font-variation-settings: "wdth" 110, "wght" 700; letter-spacing: -.02em; } h3 { font-variation-settings: "wdth" 104, "wght" 650; letter-spacing: -.01em; } h4 { font-variation-settings: "wdth" 100, "wght" 600; } :focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; } .sl-wrap { max-width: 1200px; } /* Palavra em laranja dentro de titulo: agora herda a cor do titulo. */ .sl-gt, .sl-gt-grad, .sl-s-head .sl-gt, .sl-s-head .sl-gt-grad { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; animation: none !important; } /* Pilulas (eyebrow) em qualquer pagina. */ .sl-chip, .sl-bx-eyebrow, .sl-bxnum-eyebrow, .sl-personas-content__chip, .sl-page-hero .sl-chip { display: none !important; } /* Cabecalho de secao das paginas internas: esquerda, nao centro. */ /* Paginas internas continuam centralizadas (os blocos abaixo delas sao centralizados no main-final.css). So a home refeita usa cabecalho a esquerda. */ .sl-s-head { gap: .75rem; } .sl-s-head h2 { font-size: clamp(1.7rem, 2.6vw + .6rem, 2.5rem) !important; font-weight: 700 !important; line-height: 1.08; } .sl-s-head p { color: var(--v3-ink-2); font-size: 1.05rem; } /* Efeitos: revelacao com blur, letras fatiadas, blob do mouse, halos, orbs. */ .sl-reveal, .sl-reveal.is-in, .sl-reveal-children > *, .sl-char { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; will-change: auto !important; } .sl-char { display: inline; } .sl-cursor-blob, .sl-hero::before, .sl-hero::after, .sl-fpx-bg, .sl-fpx-orb, .sl-fpx-grid, .sl-aurora-bg, .sl-sav-teaser-grid, .sl-stack-map-grid, .sl-fpx-card-shine, .sl-bx-spot, .sl-fpx-card-num, .sl-fpx-card-arrow { display: none !important; } /* Botoes antigos (paginas internas): retos, sem brilho, sem ima do mouse. */ .sl-btn, .sl-btn-primary, .sl-btn-ghost, .sl-btn-lg, .sl-brand-lockup { transform: none !important; border-radius: 8px !important; box-shadow: none !important; font-family: var(--v3-body) !important; font-weight: 600 !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; } .sl-btn-primary::before, .sl-btn-primary::after { display: none !important; } .sl-btn-primary { background: var(--v3-brand) !important; color: #fff !important; } .sl-btn-primary:hover { background: var(--v3-brand-hover) !important; } .sl-btn-ghost { background: transparent !important; color: var(--v3-ink) !important; box-shadow: inset 0 0 0 1px var(--v3-line-strong) !important; } .sl-btn-ghost:hover { background: var(--v3-page-alt) !important; } /* Cards antigos (paginas internas): branco, borda, quieto. */ .sl-fpx-card, .sl-bx-card, .sl-sav-card, .sl-office-card, .sl-roi-card, .sl-fab-card, .sl-tudo-card, .sl-smartsms-card, .sl-personas-card, .sl-int-card, .sl-phone-card, .sl-hscroll-card, .sl-boleto-card, .sl-team-card, .sl-id-card, .sl-tier, .sl-pkg, .sl-principle, .sl-bento-cell, .sl-api-panel, .sl-sav-panel, .sl-pri, .sl-faq, .sl-persona-feat, .sl-persona-pain, .sl-server, .sl-sav-highlight { background: var(--v3-card) !important; background-image: none !important; border: 1px solid var(--v3-line) !important; border-radius: 10px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; animation: none !important; color: var(--v3-ink); } .sl-fpx-card:hover, .sl-bx-card:hover, .sl-sav-card:hover, .sl-office-card:hover, .sl-roi-card:hover, .sl-fab-card:hover, .sl-tudo-card:hover, .sl-smartsms-card:hover, .sl-personas-card:hover, .sl-int-card:hover, .sl-phone-card:hover, .sl-hscroll-card:hover, .sl-boleto-card:hover, .sl-team-card:hover, .sl-tier:hover, .sl-pkg:hover, .sl-principle:hover, .sl-bento-cell:hover, .sl-persona-feat:hover, .sl-persona-pain:hover, .sl-server:hover { border-color: var(--v3-line-strong) !important; box-shadow: none !important; transform: none !important; } .sl-fpx-card::before, .sl-fpx-card::after, .sl-bx-card::before, .sl-bx-card::after, .sl-sav-card::before, .sl-sav-card::after, .sl-office-card::before, .sl-office-card::after, .sl-roi-card::before, .sl-roi-card::after, .sl-fab-card::before, .sl-fab-card::after, .sl-tudo-card::before, .sl-tudo-card::after, .sl-smartsms-card::before, .sl-smartsms-card::after, .sl-personas-card::before, .sl-personas-card::after, .sl-int-card::before, .sl-int-card::after, .sl-tier::before, .sl-tier::after, .sl-bento-cell::before, .sl-bento-cell::after, .sl-server::before, .sl-server::after, .sl-sav-highlight::before, .sl-sav-highlight::after { display: none !important; } /* Icones com gradiente viram traco cinza; tags coloridas viram texto. */ .sl-fpx-card-icon, .sl-bx-icon { background: none !important; box-shadow: none !important; border: 0 !important; color: var(--v3-ink-3); } .sl-fpx-card-icon svg, .sl-bx-icon svg { stroke: var(--v3-ink-3) !important; } .sl-fpx-card-icon svg [fill], .sl-bx-icon svg [fill] { fill: var(--v3-ink-3) !important; } .sl-fpx-card-tag, .sl-bx-tag { background: none !important; border: 0 !important; padding: 0 !important; color: var(--v3-ink-3) !important; font-family: var(--v3-mono) !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; } /* Rodape: sem brilho laranja subindo do chao. */ .sl-footer { background: var(--v3-page-alt) !important; background-image: none !important; border-top: 1px solid var(--v3-line) !important; color: var(--v3-ink-2); } .sl-footer h4 { color: var(--v3-ink); font-size: 14px; margin-bottom: 12px; } .sl-footer a { color: var(--v3-ink-2); } .sl-footer a:hover { color: var(--v3-ink); } .sl-footer-bottom { border-top: 1px solid var(--v3-line); color: var(--v3-ink-3); font-size: 13px; } /* -------------------------------------------------------------------------- 3. Menu (site inteiro). Marcacao vem do walker em inc/menu-walker.php. Barra solida, 68px, borda fina embaixo. Igual parado ou rolado. -------------------------------------------------------------------------- */ .sl-header, .sl-header.is-scrolled, [data-theme="light"] .sl-header, [data-theme="light"] .sl-header.is-scrolled { position: sticky; top: 0; z-index: 50; padding: 0 !important; background: var(--v3-page) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--v3-line) !important; box-shadow: none !important; transition: none !important; } .sl-header-inner, .sl-header.is-scrolled .sl-header-inner, [data-theme="light"] .sl-header.is-scrolled .sl-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px !important; min-height: 68px; display: flex; align-items: center; gap: 28px; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important; } .sl-brand-lockup { display: flex; align-items: center; flex: none; gap: 10px; } .sl-brand-logo { height: 36px; width: auto; max-height: 36px; } [data-theme="light"] .sl-brand-logo--dark { display: none; } :root:not([data-theme="light"]) .sl-brand-logo--light { display: none; } .sl-brand-mark { width: 30px; } .sl-brand-name { font-family: var(--v3-display); font-variation-settings: "wdth" 106, "wght" 700; font-size: 17px; color: var(--v3-ink); } .sl-brand-tag { display: none; } .sl-nav { flex: 1; min-width: 0; display: flex; } .sl-nav-list, .sl-nav ul.sl-nav-static { display: flex; align-items: center; gap: 2px; width: 100%; list-style: none; margin: 0; padding: 0; } .sl-nav-item { position: relative; } .sl-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 0; border-radius: 6px; background: none; font-family: var(--v3-body); font-weight: 500; font-size: 15px; line-height: 1; color: var(--v3-ink-2); text-decoration: none; cursor: pointer; transition: color .15s ease, background-color .15s ease; } .sl-nav-link:hover { color: var(--v3-ink); background: var(--v3-page-alt); } .sl-nav-item.is-active > .sl-nav-link, .sl-nav-link[aria-current="page"] { color: var(--v3-ink); background: none; border-radius: 0; box-shadow: inset 0 -2px 0 var(--v3-brand); } .sl-nav-chevron { width: 12px; height: 12px; opacity: .55; } .sl-nav-cta-dot, .sl-nav-cta-arrow, .sl-nav-indicator, .sl-nav-magic { display: none !important; } /* "Area do cliente": botao CHEIO na cor da marca, encostado a direita da lista. Ate a v3.6.4 ele era de contorno no desktop e cheio so no rodape da gaveta do celular (.sl-mobile-drawer-cta). O Joao viu o do celular e pediu o mesmo nas outras telas. Mesma tinta e mesmo par de hover do .v3-btn--primary, que e o botao primario do site inteiro: um laranja so, com um comportamento so. O #fff literal no lugar de um token e de proposito e segue o .v3-btn--primary: os tokens de tinta viram com o tema, e o texto sobre o preenchimento laranja tem de continuar branco nos dois. A GEOMETRIA NAO MUDA, e isso nao e economia de esforco: o padding de 9px e quem define a altura do miolo do cabecalho, a casca esta travada em 69px logo no fim deste arquivo, e a barra grudenta das paginas de comando esta medida em top: 70px contra ela. Trocar 9px por 12px para "virar um botao de verdade" abriria um vao visivel naquela barra. */ .sl-nav-item--cta { margin-left: auto; } .sl-nav-item--cta > .sl-nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--v3-brand); border: 1px solid transparent; border-radius: 8px; color: #fff; box-shadow: none; } /* O icone herda a cor do botao (currentColor no SVG), entao nao precisa de regra de cor propria nem de variante por tema. flex: none para ele nunca encolher quando o rotulo for traduzido para uma palavra mais longa. */ .sl-nav-cta-icone { flex: none; } .sl-nav-item--cta > .sl-nav-link:hover { background: var(--v3-brand-hover); color: #fff; } /* Estando NA pagina da area do cliente: o sublinhado laranja que marca o item ativo dos outros links do menu ficaria laranja sobre laranja, invisivel. O estado ativo vira o tom mais escuro do proprio botao, o mesmo do hover, que le como "voce ja esta aqui" sem desenhar nada por cima. */ .sl-nav-item--cta.is-active > .sl-nav-link { box-shadow: none; /* O raio PRECISA ser redeclarado: a regra generica do item ativo, logo acima, zera o border-radius para o sublinhado laranja caber nos outros links do menu. Sem esta linha o botao virava um retangulo de canto vivo justamente na pagina da Area do Cliente. O que nao se declara nao entra na disputa, por mais especifico que o seletor seja. */ border-radius: 8px; background: var(--v3-brand-hover); color: #fff; } /* Dropdown: painel branco, borda, uma sombra so. Sem icones, sem barra de gradiente (a inline do functions.php foi removida). */ .sl-nav-dropdown { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 300px; padding: 8px; background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: 10px; box-shadow: var(--v3-shadow-menu); opacity: 0; visibility: hidden; transform: none !important; transition: opacity .15s ease, visibility .15s ease; overflow: visible !important; } .sl-nav-dropdown::before, .sl-nav-dropdown::after { display: none !important; } .sl-nav-item--has-dropdown:hover > .sl-nav-dropdown, .sl-nav-item--has-dropdown.is-open > .sl-nav-dropdown, .sl-nav-item--has-dropdown:focus-within > .sl-nav-dropdown, .sl-nav-link[aria-expanded="true"] + .sl-nav-dropdown, .sl-nav-dropdown.is-open { opacity: 1; visibility: visible; } .sl-nav-dropdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sl-nav-dropdown-item { display: block; padding: 10px 12px; border-radius: 6px; color: var(--v3-ink); text-decoration: none; transition: background-color .15s ease; } .sl-nav-dropdown-item:hover { background: var(--v3-page-alt); } .sl-nav-dropdown-icon { display: none !important; } .sl-nav-dropdown-text { display: flex; flex-direction: column; gap: 2px; } .sl-nav-dropdown-text strong { font-family: var(--v3-body); font-weight: 600; font-size: 15px; line-height: 1.3; } .sl-nav-dropdown-text small { font-family: var(--v3-body); font-size: 13px; line-height: 1.35; color: var(--v3-ink-3); } .sl-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } .sl-theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--v3-line); border-radius: 8px; background: none; color: var(--v3-ink-2); box-shadow: none !important; transform: none !important; } .sl-theme-toggle:hover { border-color: var(--v3-line-strong); color: var(--v3-ink); } [data-theme="light"] .sl-theme-toggle-moon { display: none; } :root:not([data-theme="light"]) .sl-theme-toggle-sun { display: none; } .sl-menu-toggle { display: none; width: 40px; height: 36px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--v3-line); border-radius: 8px; background: none; } .sl-menu-toggle span { display: block; height: 2px; width: 100%; background: var(--v3-ink); border-radius: 1px; } @media (max-width: 1000px) { .sl-nav { display: none; } .sl-menu-toggle { display: flex; } .sl-header-inner { gap: 12px; } } /* Gaveta mobile: fundo solido, links simples. */ .sl-mobile-drawer-panel { background: var(--v3-card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-left: 1px solid var(--v3-line); box-shadow: var(--v3-shadow-menu) !important; } .sl-mobile-drawer-overlay { background: rgba(17, 24, 39, .45) !important; backdrop-filter: none !important; } .sl-mobile-drawer-head { border-bottom: 1px solid var(--v3-line); } .sl-mobile-drawer-link { color: var(--v3-ink) !important; background: none !important; border: 0 !important; font-family: var(--v3-body); font-weight: 500; } .sl-mobile-drawer-link.is-active { color: var(--v3-brand) !important; } .sl-mobile-drawer-icon { display: none !important; } .sl-mobile-drawer-nav ul a { color: var(--v3-ink-2) !important; } .sl-mobile-drawer-group { animation: none !important; opacity: 1 !important; transform: none !important; } .sl-mobile-drawer-cta { background: var(--v3-brand) !important; color: #fff !important; border-radius: 8px !important; box-shadow: none !important; } .sl-mobile-drawer-theme { color: var(--v3-ink-2) !important; background: none !important; border: 1px solid var(--v3-line) !important; border-radius: 8px !important; } /* ---- gaveta mobile: grupos que abrem e fecham (v3.6.3) ---- Antes a gaveta despejava todos os sub-itens de uma vez: no celular do Joao isso era uma coluna longa, sem nada dizendo que "Precos" era um grupo e nao uma pagina. Agora o cabecalho do grupo e um botao com chevron, os grupos nascem fechados e so o grupo da pagina atual ja vem aberto. */ /* O cabecalho do grupo virou