/* ═══════════════════════════════════════════════════════════════ KAIZEN ENGENHARIA · v1 Sistema visual da marca: Natu (verde), Valor (dourado), Luxo (grafite), Latera e Areia. Dois temas: "areia" (padrão) e "natu". ═══════════════════════════════════════════════════════════════ */ /* ── 1. Tokens de marca ───────────────────────────────────────── */ :root { /* Constantes da identidade — verdes derivados de #123A29 por escala proporcional de RGB, o que preserva matiz e saturação da marca. */ --natu-950: #071009; --natu-900: #0b2419; --natu-850: #0e2e21; --natu-800: #123a29; /* KAIZEN NATU */ --natu-700: #174a34; --natu-600: #1c5a40; --natu-500: #226e4e; --valor-300: #f7e5c6; --valor-400: #efcf9c; /* KAIZEN VALOR */ --valor-500: #e4bb7b; --valor-600: #d4a559; --luxo: #212121; /* KAIZEN LUXO */ /* Verde oficial do WhatsApp. Fora da paleta da marca de propósito: aparece só no hover do botão flutuante, onde o reconhecimento vale mais. */ --whatsapp: #25d366; --latera: #d9d4cb; /* KAIZEN LATERA */ --areia-100: #f4efe8; --areia-200: #ede6dd; /* fundo institucional */ --areia-300: #e0d8cc; --areia-400: #cec5b7; /* Tipografia */ --display-font: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Métricas */ --shell: 1320px; --gutter: clamp(20px, 5vw, 56px); --header-h: 78px; --section-y: clamp(88px, 11vw, 172px); /* Raio da marca: três cantos curtos e um longo, como a forma de apoio do logotipo. A proporção 1:3 é a mesma do arquivo original. */ --r: 12px; --r-lg: 22px; --r-brand: var(--r-lg) var(--r-lg) var(--r-lg) calc(var(--r-lg) * 3); --r-brand-flip: var(--r-lg) var(--r-lg) calc(var(--r-lg) * 3) var(--r-lg); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Curva simétrica: acelera e desacelera igual na entrada e na saída do hover, para que desativar não pareça um corte seco. */ --ease-inout: cubic-bezier(0.45, 0, 0.25, 1); --hover: 420ms var(--ease-inout); --pattern-gold: url("../brand/kaizen-planta-dourado.svg"); --pattern-green: url("../brand/kaizen-planta-verde.svg"); /* ── Tema areia (claro), o padrão ── Fica no `:root` de propósito: o tema padrão do site é o padrão do cascade também. Se o atributo `data-theme` não for escrito no — script bloqueado, HTML servido de cache antigo —, a página abre em areia, e não no oposto do que foi decidido. */ color-scheme: light; --a-bg: #ede6dd; --a-bg2: #f4efe8; --a-bg3: #e0d8cc; --a-ink: #123a29; --a-soft: rgba(18, 58, 41, 0.72); --a-faint: rgba(18, 58, 41, 0.48); --a-line: rgba(18, 58, 41, 0.16); --a-line2: rgba(18, 58, 41, 0.34); --a-tint1: rgba(18, 58, 41, 0.11); --a-tint2: rgba(18, 58, 41, 0.19); --a-tint3: rgba(18, 58, 41, 0.27); --a-tint4: rgba(18, 58, 41, 0.35); --a-accent: #123a29; --a-on-accent: #f4efe8; --a-pattern: var(--pattern-green); --b-bg: #0e2e21; --b-bg2: #123a29; --b-bg3: #174a34; --b-ink: #f1ebe2; --b-soft: rgba(241, 235, 226, 0.7); --b-faint: rgba(241, 235, 226, 0.45); --b-line: rgba(241, 235, 226, 0.14); --b-line2: rgba(241, 235, 226, 0.3); --b-tint1: rgba(241, 235, 226, 0.1); --b-tint2: rgba(241, 235, 226, 0.17); --b-tint3: rgba(241, 235, 226, 0.24); --b-tint4: rgba(241, 235, 226, 0.31); --b-accent: #efcf9c; --b-on-accent: #0b2419; --b-pattern: var(--pattern-gold); --header-bg: rgba(237, 230, 221, 0.86); --shadow-lg: 0 34px 80px -50px rgba(18, 58, 41, 0.5); } /* `--tint1` a `--tint4`: quatro véus da tinta corrente sobre a própria faixa, para superfícies que precisam de peso sem virar bloco de cor. Os véus sobre fundo claro levam alfa um pouco maior que os de fundo escuro — a mesma opacidade rende menos distância percebida no claro, e sem o ajuste os quatro degraus encostariam uns nos outros. Tema natu (escuro): a única troca. O atributo é escrito no antes da pintura, então este bloco já vale na primeira carga de quem escolheu o escuro. */ html[data-theme="natu"] { color-scheme: dark; --a-bg: #0e2e21; --a-bg2: #123a29; --a-bg3: #174a34; --a-ink: #f1ebe2; --a-soft: rgba(241, 235, 226, 0.7); --a-faint: rgba(241, 235, 226, 0.45); --a-line: rgba(241, 235, 226, 0.14); --a-line2: rgba(241, 235, 226, 0.3); --a-tint1: rgba(241, 235, 226, 0.1); --a-tint2: rgba(241, 235, 226, 0.17); --a-tint3: rgba(241, 235, 226, 0.24); --a-tint4: rgba(241, 235, 226, 0.31); --a-accent: #efcf9c; --a-on-accent: #0b2419; --a-pattern: var(--pattern-gold); --b-bg: #ede6dd; --b-bg2: #f4efe8; --b-bg3: #e0d8cc; --b-ink: #123a29; --b-soft: rgba(18, 58, 41, 0.72); --b-faint: rgba(18, 58, 41, 0.48); --b-line: rgba(18, 58, 41, 0.16); --b-line2: rgba(18, 58, 41, 0.34); --b-tint1: rgba(18, 58, 41, 0.11); --b-tint2: rgba(18, 58, 41, 0.19); --b-tint3: rgba(18, 58, 41, 0.27); --b-tint4: rgba(18, 58, 41, 0.35); --b-accent: #123a29; --b-on-accent: #f4efe8; --b-pattern: var(--pattern-green); --header-bg: rgba(14, 46, 33, 0.82); --shadow-lg: 0 34px 80px -46px rgba(4, 14, 9, 0.9); } /* ── 2. Base ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--a-bg); color: var(--a-ink); font-family: var(--sans); font-size: 16px; line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background 460ms var(--ease), color 460ms var(--ease); } body.is-locked { overflow: hidden; } h1, h2, h3, h4, p, figure, dl, dd, fieldset, legend { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } fieldset { padding: 0; border: 0; min-width: 0; } a { color: inherit; text-decoration: none; } button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } address { font-style: normal; } ::selection { background: var(--valor-400); color: var(--natu-900); } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .skip-link { position: fixed; z-index: 999; top: 14px; left: 14px; padding: 12px 18px; border-radius: var(--r); background: var(--valor-400); color: var(--natu-900); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transform: translateY(-180%); transition: transform 260ms var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* ── 3. Camadas de tom ────────────────────────────────────────── */ .band { position: relative; background: var(--bg); color: var(--ink); transition: background 460ms var(--ease), color 460ms var(--ease); } .band-a { --bg: var(--a-bg); --bg2: var(--a-bg2); --bg3: var(--a-bg3); --ink: var(--a-ink); --soft: var(--a-soft); --faint: var(--a-faint); --line: var(--a-line); --line2: var(--a-line2); --tint1: var(--a-tint1); --tint2: var(--a-tint2); --tint3: var(--a-tint3); --tint4: var(--a-tint4); --accent: var(--a-accent); --on-accent: var(--a-on-accent); --pattern: var(--a-pattern); } .band-b { --bg: var(--b-bg); --bg2: var(--b-bg2); --bg3: var(--b-bg3); --ink: var(--b-ink); --soft: var(--b-soft); --faint: var(--b-faint); --line: var(--b-line); --line2: var(--b-line2); --tint1: var(--b-tint1); --tint2: var(--b-tint2); --tint3: var(--b-tint3); --tint4: var(--b-tint4); --accent: var(--b-accent); --on-accent: var(--b-on-accent); --pattern: var(--b-pattern); } /* Areia cheia, igual nos dois temas. Duas seções não entram na alternância: "Para quem" e o briefing. As duas são de conteúdo denso — uma grade de cartões e um formulário — e no tema claro viravam blocos escuros no meio de uma página clara. Aqui elas ficam sempre no papel, como já apareciam no natu. Os valores são os mesmos da faixa clara do sistema, escritos à mão em vez de referenciados por `--a-*` ou `--b-*`: essas duas variáveis trocam de lado conforme o tema, e é justamente disso que estas seções precisam escapar. */ .band-clara { --bg: #ede6dd; --bg2: #f4efe8; --bg3: #e0d8cc; --ink: #123a29; --soft: rgba(18, 58, 41, 0.72); --faint: rgba(18, 58, 41, 0.48); --line: rgba(18, 58, 41, 0.16); --line2: rgba(18, 58, 41, 0.34); --tint1: rgba(18, 58, 41, 0.11); --tint2: rgba(18, 58, 41, 0.19); --tint3: rgba(18, 58, 41, 0.27); --tint4: rgba(18, 58, 41, 0.35); --accent: #123a29; --on-accent: #f4efe8; --pattern: var(--pattern-green); } /* Dourado cheio, igual nos dois temas: é a segunda cor da identidade e marca o trecho mais concreto da página sem quebrar a alternância. */ .band-c { --bg: var(--valor-400); --bg2: #f2d7ac; --bg3: #e7c288; --ink: var(--natu-800); --soft: rgba(18, 58, 41, 0.76); --faint: rgba(18, 58, 41, 0.5); --line: rgba(18, 58, 41, 0.18); --line2: rgba(18, 58, 41, 0.36); --tint1: rgba(18, 58, 41, 0.11); --tint2: rgba(18, 58, 41, 0.19); --tint3: rgba(18, 58, 41, 0.27); --tint4: rgba(18, 58, 41, 0.35); --accent: var(--natu-800); --on-accent: var(--valor-300); --pattern: var(--pattern-green); } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } /* Textura de fundo: uma prancha técnica — grelha em três módulos (25/100/500), cotas, miras de registro e eixos tracejados. Todo traço que cruza a borda vai de 0 a 1000 e tem passo que divide 1000, então o `repeat` emenda a grelha e o tracejado sem costura. Vem por background-image: se o arquivo falhar, a seção continua correta — só perde o relevo. */ .texture, .hero-texture { position: absolute; inset: 0; background-image: var(--pattern); background-size: clamp(620px, 74vw, 1200px) auto; background-repeat: repeat; opacity: 0.056; pointer-events: none; } /* ── 4. Marca ─────────────────────────────────────────────────── */ .brand { display: inline-flex; align-items: center; gap: 13px; flex: none; margin-right: auto; } /* Assinatura monocromática: sem a pastilha grafite atrás do símbolo. Sobra a marca solta, no mesmo tom do logotipo — um bloco só de tinta, que troca junto com a faixa em vez de carregar um terceiro plano de fundo. */ .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; } /* Sem a pastilha, o símbolo ocupa a caixa inteira e herda a tinta corrente: é o mesmo valor de cor do logotipo ao lado, nos dois temas. */ .mark-brand { width: 100%; height: auto; color: currentColor; } .brand-text { display: grid; gap: 4px; } .brand-word { height: 19px; width: auto; color: currentColor; } .brand-text small { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--a-soft); padding-left: 1px; } .mark-hero { width: 100%; height: 100%; } /* ── 5. Tipografia utilitária ─────────────────────────────────── */ .kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); } .kicker-dot { width: 26px; height: 1px; background: currentColor; opacity: 0.6; } .display { font-family: var(--display-font); font-weight: 500; font-size: clamp(2.3rem, 4.9vw, 4.1rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; } .display em { font-style: normal; font-weight: 300; color: var(--soft); } .lead { max-width: 56ch; font-size: clamp(1rem, 1.35vw, 1.1rem); color: var(--soft); } .lead + .lead { margin-top: 18px; } .lead em { font-style: normal; font-weight: 600; color: var(--ink); } .section-head { padding-bottom: clamp(44px, 5vw, 76px); } .section-head .kicker { margin-bottom: 22px; } .section-head .lead { margin-top: 26px; } /* ── 6. Botões ────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 1px solid transparent; border-radius: 999px; font-family: var(--display-font); font-size: 14.5px; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background var(--hover), color var(--hover), border-color var(--hover), transform 320ms var(--ease-inout); } .btn span { transition: transform 320ms var(--ease-inout); } .btn:hover span { transform: translate(2px, -2px); } .btn-line:hover span { transform: translateY(2px); } .btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn-solid:hover { background: transparent; color: var(--ink); border-color: var(--line2); } .btn-line { border-color: var(--line2); color: var(--ink); } .btn-line:hover { background: var(--bg2); border-color: var(--ink); } .btn-lg { padding: 18px 32px; font-size: 15.5px; } /* ── 7. Barra de progresso ────────────────────────────────────── */ .progress { position: fixed; z-index: 120; inset: 0 0 auto; height: 2px; background: transparent; pointer-events: none; } .progress span { display: block; height: 100%; width: 0; background: var(--valor-400); transform-origin: left; transition: width 90ms linear; } /* ── 8. Cabeçalho ─────────────────────────────────────────────── */ .site-header { position: fixed; z-index: 100; inset: 0 0 auto; color: var(--a-ink); transition: background 380ms var(--ease), border-color 380ms var(--ease), backdrop-filter 380ms var(--ease), color 460ms var(--ease); border-bottom: 1px solid transparent; } .site-header.is-stuck { background: var(--header-bg); border-bottom-color: var(--a-line); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } /* O cabeçalho é fixo e atravessa a faixa dourada das entregas, onde o creme do tema perde o contraste. Ao encostar nela ele adota a paleta da própria faixa — tinta verde sobre dourado — em vez de carregar um bloco escuro por cima. Os tokens são redefinidos aqui, então tudo que já lê `--a-*` (menu, toggle, CTA, hambúrguer) acompanha sem regra extra. */ html.is-over-gold .site-header { --a-ink: var(--natu-800); --a-soft: rgba(18, 58, 41, 0.76); --a-faint: rgba(18, 58, 41, 0.5); --a-line: rgba(18, 58, 41, 0.2); --a-line2: rgba(18, 58, 41, 0.38); --a-accent: var(--natu-800); --a-on-accent: var(--valor-300); /* Creme, não ouro: a barra fixa fica um degrau acima da faixa em vez de repetir o mesmo amarelo. É o tom de repouso dos cartões da seção. */ --header-bg: rgba(246, 233, 212, 0.9); } /* Os três pontos que usam o dourado cru e sumiriam sobre a faixa. */ html.is-over-gold .site-header .main-nav a::after, html.is-over-gold .site-header .theme-toggle-track i, html.is-over-gold .progress span { background: var(--natu-800); } .header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); } .main-nav { display: flex; align-items: center; gap: 2px; } .main-nav a { position: relative; display: inline-flex; align-items: center; padding: 9px 13px; font-size: 13.5px; color: var(--a-soft); transition: color var(--hover); } .main-nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px; background: var(--valor-400); transform: scaleX(0); transform-origin: left; transition: transform 340ms var(--ease-inout); } .main-nav a:hover, .main-nav a.is-current { color: var(--a-ink); } .main-nav a:hover::after, .main-nav a.is-current::after { transform: scaleX(1); } /* O scrollspy também marca este link; a especificidade de duas classes vence `.main-nav a` e mantém as cores do botão em qualquer estado. */ .main-nav .nav-cta { display: none; } .main-nav .nav-cta::after { display: none; } .header-actions { display: flex; align-items: center; gap: 12px; flex: none; } .theme-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 8px; border: 1px solid var(--a-line); border-radius: 40px; color: var(--a-soft); transition: color 260ms var(--ease), border-color 260ms var(--ease); } .theme-toggle:hover { color: var(--a-ink); border-color: var(--a-line2); } .theme-toggle-track { position: relative; width: 30px; height: 16px; border-radius: 20px; background: var(--a-line); flex: none; } /* O cursor descansa à esquerda no tema padrão e corre para a direita quando o visitante troca. Antes era o contrário: o interruptor abria já na posição ligada, o que lia como se areia fosse a segunda opção. */ .theme-toggle-track i { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--natu-800); transition: transform 380ms var(--ease); } html[data-theme="natu"] .theme-toggle-track i { transform: translateX(14px); background: var(--valor-400); } .theme-toggle-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } .header-cta { padding: 12px 20px; font-size: 13.5px; --accent: var(--a-accent); --on-accent: var(--a-on-accent); --ink: var(--a-ink); --line2: var(--a-line2); --bg2: transparent; } /* Barras posicionadas em absoluto a partir do centro exato: garante que o fechado fique simétrico e que o aberto cruze num X, não num chevron. */ .menu-toggle { position: relative; display: none; width: 42px; height: 42px; border: 1px solid var(--a-line); border-radius: var(--r); transition: border-color var(--hover), background var(--hover); } .menu-toggle:hover { border-color: var(--a-line2); } .menu-toggle span { position: absolute; top: 50%; left: 50%; width: 17px; height: 1.5px; margin: -0.75px 0 0 -8.5px; background: var(--a-ink); transition: transform 380ms var(--ease-inout); } .menu-toggle span:first-child { transform: translateY(-4px); } .menu-toggle span:last-child { transform: translateY(4px); } .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); } /* ── 9. Hero ──────────────────────────────────────────────────── */ .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; padding-top: calc(var(--header-h) + clamp(44px, 8vh, 96px)); padding-bottom: clamp(56px, 8vh, 92px); overflow: hidden; } .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); } .hero-texture { /* Sobe um pouco em relação à base: sobre o verde fechado a linha rende menos do que sobre o dourado da faixa de entregas. */ opacity: 0.06; /* A grelha atravessa a seção e só se apaga rente à faixa de baixo, para não brigar com o marquee que fecha o hero. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%); } /* Centro da área livre à direita do texto. Como as sarjetas do shell entram dos dois lados, elas se cancelam na conta e sobra `50% + metade da coluna de texto` — o mesmo ponto em qualquer largura de tela. */ .hero-mark-layer { position: absolute; top: 50%; left: calc(50% + 440px); width: clamp(190px, 19vw, 270px); aspect-ratio: 1; transform: translate( calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)) ); transition: transform 900ms var(--ease-out); pointer-events: none; color: var(--accent); opacity: 0.22; } .hero-inner { position: relative; flex: 1; display: flex; align-items: center; } /* Largura fixa, e não max-width: como item flex a coluna encolhia até o texto mais largo, e a âncora da marca deixava de bater com a área livre. */ .hero-copy { width: min(100%, 880px); } .hero-title { margin: 24px 0 30px; font-family: var(--display-font); font-weight: 500; font-size: clamp(2.9rem, 8.4vw, 7.2rem); line-height: 0.88; letter-spacing: -0.045em; } .hero-title .line { display: block; } .hero-title .accent { font-weight: 300; color: var(--accent); } .hero-lead { max-width: 50ch; font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--soft); } .hero-lead em { font-style: normal; font-weight: 600; color: var(--ink); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* Índice das frentes: substitui o bloco de números por conteúdo verificável. */ /* ── 10. Faixa marquee ────────────────────────────────────────── */ /* Costura constante entre as faixas: grafite da marca nos dois temas, o que garante contraste estável e separa hero e conteúdo. */ .marquee { position: relative; display: flex; overflow: hidden; padding-block: 20px; background: var(--luxo); color: var(--latera); } .marquee-track { display: flex; align-items: center; gap: 30px; flex: none; min-width: max-content; animation: slide 52s linear infinite; } .marquee-track span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .marquee-track i { width: 5px; height: 5px; flex: none; border: 1px solid var(--valor-400); transform: rotate(45deg); } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── 12. Serviços · dossiê ────────────────────────────────────── */ .mini-dossier { padding-block: clamp(96px, 12vw, 180px); } .mini-dossier-layout { display: grid; gap: clamp(58px, 8vw, 120px); align-items: start; } .mini-dossier-head .kicker { margin-bottom: 22px; } .mini-dossier-head .display { font-size: clamp(2.4rem, 3.4vw, 3.3rem); text-wrap: initial; } .mini-dossier-head .display > span, .mini-dossier-head .display > em { display: block; } .mini-dossier-head .lead { margin-top: 30px; max-width: 41ch; } .mini-dossier-list { border-top: 1px solid var(--line); } .mini-dossier-list details { border-bottom: 1px solid var(--line); } .mini-dossier-list summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 18px; min-height: 80px; padding: 14px 4px; list-style: none; cursor: pointer; transition: color var(--hover), padding-inline var(--hover), background var(--hover); } .mini-dossier-list summary::-webkit-details-marker { display: none; } .mini-dossier-list summary:hover, .mini-dossier-list summary:focus-visible, .mini-dossier-list details[open] summary { padding-inline: 14px; background: var(--bg2); } .mini-dossier-list details.is-closing summary { background: var(--bg); } .mini-dossier-list summary strong { min-width: 0; font-family: var(--display-font); font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; } .mini-dossier-list summary i { position: relative; display: block; width: 22px; height: 22px; font-style: normal; } .mini-dossier-list summary i::before, .mini-dossier-list summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--hover); } .mini-dossier-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); } .mini-dossier-list details[open] summary i::after { transform: translate(-50%, -50%); } .mini-dossier-list details.is-closing summary i::after { transform: translate(-50%, -50%) rotate(90deg); } .mini-dossier-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 34px; align-items: end; padding: 28px 14px 34px; } .mini-dossier-body p { max-width: 54ch; color: var(--soft); font-size: 14px; } .mini-dossier-body a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--line2); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: gap var(--hover), background var(--hover), color var(--hover), border-color var(--hover); } .mini-dossier-body a:hover, .mini-dossier-body a:focus-visible { gap: 14px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); } @media (min-width: 1120px) { .mini-dossier-layout { grid-template-columns: minmax(0, 1fr) minmax(520px, 1.05fr); gap: clamp(60px, 6vw, 96px); } .mini-dossier-head { position: sticky; top: calc(var(--header-h) + 54px); } .mini-dossier-head .display > span, .mini-dossier-head .display > em { white-space: nowrap; } } @media (max-width: 560px) { .mini-dossier-list summary { grid-template-columns: minmax(0, 1fr) 22px; gap: 12px; min-height: 70px; } .mini-dossier-body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 8px 30px; } .mini-dossier-body a { justify-self: start; white-space: normal; } } /* ── 13. Para quem ────────────────────────────────────────────── */ /* Respiro menor que o das demais faixas: com os ícones maiores, a seção inteira precisa caber numa tela só. */ .audience { padding-block: clamp(52px, 5.6vw, 92px); } .audience .section-head { padding-bottom: clamp(20px, 2.2vw, 34px); } .audience-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .audience-grid li { position: relative; padding: clamp(24px, 2.1vw, 32px); background: var(--bg); overflow: hidden; transition: background var(--hover); } .audience-grid li::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-inout); } .audience-grid li:hover { background: var(--bg2); } .audience-grid li:hover::after { transform: scaleX(1); } .audience-grid i { display: block; margin: 8px 0 26px; font-size: 46px; line-height: 1; text-align: center; color: var(--accent); transition: transform var(--hover); } .audience-grid li:hover i { transform: translateY(-3px); } .audience-grid h3 { margin-bottom: 12px; font-family: var(--display-font); font-size: 1.34rem; font-weight: 500; letter-spacing: -0.024em; text-wrap: balance; } .audience-grid p { font-size: 14.5px; color: var(--soft); } /* ── 14. Quem somos · ciclo PDCA ──────────────────────────────── */ .method-alt-inner { display: grid; gap: clamp(44px, 5vw, 84px); align-items: start; } .method-alt-head .kicker { margin-bottom: 24px; } .method-alt-head .lead { margin-top: 26px; } .rail { position: relative; display: grid; } /* Percurso contínuo ligando as quatro etapas do ciclo. */ .rail::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 40px; width: 1px; background: var(--line2); } .rail > li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: clamp(20px, 2.4vw, 34px); padding-block: clamp(18px, 2.2vw, 26px); } .rail-node { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line2); border-radius: 15px 15px 15px 32px; background: var(--bg2); color: var(--ink); box-shadow: 0 0 0 6px var(--bg); transition: background var(--hover), color var(--hover), border-color var(--hover), box-shadow var(--hover), transform var(--hover); } .rail-node i { font-size: 24px; line-height: 1; } .rail-node i::before { vertical-align: 0; } /* No trilho do PDCA a letra ocupa o lugar do ícone. O tamanho é menor que o do glifo porque a caixa da fonte de display já vem com folga. */ .rail-node-letra { font-family: var(--display-font); font-size: 1.32rem; font-weight: 500; line-height: 1; letter-spacing: 0.01em; } /* O nó acende pelo ponteiro sobre a própria linha do trilho ou sobre o setor correspondente do desenho — os quatro seletores com `:has()` trazem o segundo caminho. Ficam aqui, e não no bloco do ciclo, para não repetir as cinco declarações do estado aceso em dois lugares. */ .rail > li:hover .rail-node, .about-cycle:has(.pdca-etapa:nth-of-type(1):hover) .pdca-steps > li:nth-child(1) .rail-node, .about-cycle:has(.pdca-etapa:nth-of-type(2):hover) .pdca-steps > li:nth-child(2) .rail-node, .about-cycle:has(.pdca-etapa:nth-of-type(3):hover) .pdca-steps > li:nth-child(3) .rail-node, .about-cycle:has(.pdca-etapa:nth-of-type(4):hover) .pdca-steps > li:nth-child(4) .rail-node { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px var(--bg), 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent); transform: translateY(-3px); } .rail-body h3 { margin: 0 0 10px; font-family: var(--display-font); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.028em; } .rail-body p { max-width: 46ch; font-size: 14.5px; color: var(--soft); } /* ── 14b. Quem somos · desenho do ciclo ───────────────────────── */ .about { overflow: hidden; } /* Os dois parágrafos do enunciado: o segundo é o objetivo da empresa e fica um pouco mais estreito para não competir com o primeiro. */ .about-head .lead + .lead { max-width: 48ch; } .about-head .display { max-width: 19ch; } .about-cycle { position: relative; display: grid; gap: clamp(48px, 6vw, 88px); align-items: center; } .pdca-figure { justify-self: center; width: min(100%, 430px); margin: 0; } .pdca-wheel { display: block; width: 100%; height: auto; } /* O anel é maciço, mas discreto: cada setor é um véu da tinta corrente sobre a própria faixa, e não um bloco de cor da marca. O filete de contorno é o que garante a borda mesmo no véu mais fraco — sem ele o setor do A quase encostaria no fundo. O peso cresce de A para P, de modo que a etapa que abre o ciclo seja a mais firme. */ .pdca-setor { fill: var(--pdca-tom); stroke: var(--line2); stroke-width: 1.2; transition: fill var(--hover), stroke var(--hover), stroke-width var(--hover); } .pdca-etapa:nth-of-type(1) { --pdca-tom: var(--tint4); } .pdca-etapa:nth-of-type(2) { --pdca-tom: var(--tint3); } .pdca-etapa:nth-of-type(3) { --pdca-tom: var(--tint2); } .pdca-etapa:nth-of-type(4) { --pdca-tom: var(--tint1); } /* Sozinha na fatia, a sigla fica no meio radial da faixa — o que o verbo dizia agora está no trilho ao lado, e só o `` do SVG guarda a correspondência para quem lê por leitor de tela. Tinta cheia: sobre o véu mais forte, um cinza intermediário perderia contraste. */ .pdca-sigla { fill: var(--ink); font-family: var(--display-font); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; text-anchor: middle; dominant-baseline: central; } /* O miolo cobre a borda interna dos setores, como no diagrama clássico: o anel some por baixo do círculo em vez de terminar num degrau. */ .pdca-miolo { fill: var(--bg); stroke: var(--line); stroke-width: 1; } /* Vínculo entre o trilho e o desenho, nos dois sentidos: o setor acende pelo ponteiro sobre ele mesmo (primeiro seletor) ou sobre a linha correspondente da lista (os quatro com `:has()`). O caminho da lista precisa de `:has()` porque a figura vem antes dela no DOM e não existe combinador de irmão anterior. O sinal principal é o contorno: os quatro véus têm forças diferentes, então subir um degrau da escala renderia um destaque forte no A e quase nenhum no P. Pelo mesmo motivo o preenchimento vem do acento diluído, e não de um `--tint`: é a única entrada que rende o mesmo nos quatro. Sem suporte a `color-mix` a declaração cai sozinha e sobra o contorno, que já basta para dizer qual setor é. */ .pdca-etapa:hover .pdca-setor, .about-cycle:has(.pdca-steps > li:nth-child(1):hover) .pdca-etapa:nth-of-type(1) .pdca-setor, .about-cycle:has(.pdca-steps > li:nth-child(2):hover) .pdca-etapa:nth-of-type(2) .pdca-setor, .about-cycle:has(.pdca-steps > li:nth-child(3):hover) .pdca-etapa:nth-of-type(3) .pdca-setor, .about-cycle:has(.pdca-steps > li:nth-child(4):hover) .pdca-etapa:nth-of-type(4) .pdca-setor { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2.2; } .pdca-centro-titulo { fill: var(--ink); font-family: var(--display-font); font-size: 38px; font-weight: 500; letter-spacing: -0.03em; text-anchor: middle; } .pdca-centro-nota { fill: var(--soft); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; text-anchor: middle; } /* O trilho das etapas dispensa o respiro de topo: dentro da grade do ciclo ele já está alinhado ao centro do desenho. */ .pdca-steps > li:first-child { padding-top: 0; } .pdca-steps > li:last-child { padding-bottom: 0; } @media (min-width: 980px) { .about-cycle { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } } /* Abaixo de 980px o desenho encolhe para não empurrar a lista para longe demais do primeiro item. */ @media (max-width: 979px) { .pdca-figure { width: min(100%, 340px); } } /* ── 14c. Missão · declaração ─────────────────────────────────── */ /* Única faixa centralizada do site. O desalinho com o resto da página é proposital: é uma frase só, e ela precisa parar a rolagem. */ .creed { overflow: hidden; padding-block: clamp(104px, 13vw, 190px); /* Quanto da tinta entra no miolo das letras em contorno. É o único número deste bloco que é gosto, e não regra: nada mais no desenho muda quando ele muda. */ --creed-veu: 16%; } .creed-inner { position: relative; display: grid; justify-items: center; text-align: center; } .creed-inner .kicker { margin-bottom: 34px; } .creed-line { max-width: 17ch; font-size: clamp(2.3rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; } /* A hierarquia da frase é invertida em relação ao resto do site: aqui a ênfase é a massa, e a abertura é que recua. Por isso o `em` desfaz o recuo que `.display em` aplica em toda página. */ .creed-line em { color: var(--ink); font-weight: 500; } /* Estado base da abertura, e o que fica de pé onde não houver contorno de texto: o mesmo tom apagado que a ênfase tinha antes. */ .creed-traco { color: var(--soft); } /* O contorno só entra onde existe. `-webkit-text-stroke` é a única forma disponível hoje, e sem ela o véu de 16% deixaria a abertura da frase quase invisível. Duas decisões sustentam o desenho aqui. O miolo é mistura de duas cores opacas, nunca um alfa: sobre fundo chapado as duas dão o mesmo tom, mas o alfa deixaria a grelha de prancha do fundo atravessar a letra — setas e cotas apareceriam dentro dos glifos. E `paint-order` manda o preenchimento cobrir a metade interna do traço, então só a metade de fora fica à vista: o contorno para de comer a forma, os vãos do "e" e do "a" continuam abertos e a Outfit chega inteira. Nesse véu o corpo do glifo fica abaixo de 3:1 contra a faixa. Quem sustenta a leitura é o contorno, e é por isso que ele fica em 85% da tinta — afinar os dois juntos custaria legibilidade de verdade. */ @supports (-webkit-text-stroke: 1px currentColor) { .creed-traco { color: color-mix(in srgb, var(--ink) var(--creed-veu), var(--bg)); /* Espessura em `em`: o corpo vai de 37px no celular a 74px no desktop, e um valor fixo fecharia os vãos na tela pequena. */ -webkit-text-stroke: 0.038em color-mix(in srgb, var(--ink) 85%, transparent); paint-order: stroke fill; } } .creed-note { margin-top: clamp(34px, 4vw, 50px); max-width: 58ch; } /* ── 15. Entregas · faixa dourada ─────────────────────────────── */ .deliver { overflow: hidden; } .deliver::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern); background-size: clamp(580px, 68vw, 1100px) auto; opacity: 0.052; pointer-events: none; } .deliver > .shell { position: relative; } .deliver-head .display { max-width: 16ch; } .deliver-grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 20px); } .deliver-grid li { padding: clamp(26px, 2.6vw, 34px); /* Ouro claro puro da paleta, sem areia na mistura: o cinza dela é que lavava o amarelo do cartão em repouso. */ background: var(--valor-300); border: 1px solid var(--line); border-radius: var(--r-brand); transition: background var(--hover), transform var(--hover), border-color var(--hover); } .deliver-grid li:nth-child(even) { border-radius: var(--r-brand-flip); } /* O hover escurece o cartão dentro da família do ouro: um passo de `--valor-500` sobre o creme, sem cinza no meio, que apagava o amarelo. A borda sai do verde — um anel de `--line2` endurecia o cartão — e acompanha num tom quente. */ .deliver-grid li:hover { background: color-mix(in srgb, var(--valor-500) 30%, var(--valor-300)); border-color: color-mix(in srgb, var(--valor-600) 55%, var(--areia-400)); transform: translateY(-4px); } .deliver-grid h3 { margin-bottom: 8px; transition: color var(--hover); font-family: var(--display-font); font-size: 1.28rem; font-weight: 500; letter-spacing: -0.024em; } .deliver-grid p { font-size: 14px; color: var(--soft); transition: color var(--hover); } /* ── 16. Briefing interativo ──────────────────────────────────── */ .diagnostic-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(44px, 5.5vw, 92px); align-items: start; } .diagnostic-copy .kicker { margin-bottom: 24px; } .diagnostic-copy .lead { margin-top: 26px; } .diagnostic-note { margin-top: 22px; padding-left: 16px; border-left: 2px solid var(--accent); font-family: var(--mono); font-size: 11px; line-height: 1.75; letter-spacing: 0.02em; color: var(--soft); } .diagnostic-tool { padding: clamp(26px, 3vw, 42px); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .dx-step + .dx-step { margin-top: 32px; } .dx-step legend { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); } .dx-step legend span { padding: 3px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; letter-spacing: 0.08em; } .dx-options { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; cursor: pointer; } .chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .chip span { display: block; padding: 10px 16px; border: 1px solid var(--line2); border-radius: 40px; font-size: 13px; color: var(--soft); transition: background var(--hover), color var(--hover), border-color var(--hover); } .chip-other span { background: var(--bg3); color: var(--ink); } .chip:hover span { color: var(--ink); border-color: var(--ink); } .chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; } .dx-other-field { display: none; margin-top: 16px; padding: 16px 18px; border-radius: var(--r); background: var(--bg); border-left: 2px solid var(--accent); } .dx-other-field.is-active, .dx-step:has([data-dx-other-choice]:checked) .dx-other-field { display: block; } .dx-other-field[hidden] { display: none; } .dx-other-field > label { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); } .dx-other-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line2); } .dx-other-control:focus-within { border-color: var(--ink); } .dx-other-control input { min-width: 0; min-height: 42px; padding: 8px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 14px/1.4 var(--sans); } .dx-other-control input::placeholder { color: var(--faint); } .dx-other-control:has(input[aria-invalid="true"]) { border-color: var(--accent); } .dx-other-count { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--soft); } .dx-other-error { margin-top: 8px; color: var(--ink); font-size: 11px; line-height: 1.45; } .dx-other-error:empty { display: none; } .dx-preview { margin-top: 34px; padding: 22px 24px; border-radius: var(--r); background: var(--bg); border: 1px dashed var(--line2); } .dx-preview-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; } .dx-preview-text { font-family: var(--display-font); font-size: clamp(1.05rem, 1.6vw, 1.24rem); font-weight: 300; line-height: 1.5; letter-spacing: -0.015em; color: var(--ink); } .dx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .dx-send { flex: 1 1 240px; } .dx-send[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; } /* ── 17. Contato ──────────────────────────────────────────────── */ .sequence { padding-block: clamp(64px, 8vw, 120px); } .sequence-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.8fr); align-items: start; gap: clamp(48px, 6vw, 96px); } .sequence-copy { position: sticky; top: calc(var(--header-h) + 40px); } .sequence-copy .kicker { margin-bottom: clamp(20px, 2.5vw, 30px); } .sequence-copy .display { max-width: none; font-size: clamp(2.1rem, 3.8vw, 3.5rem); line-height: 1; } .sequence-copy .display > span { display: block; } .sequence-copy .lead { max-width: 42ch; margin-top: clamp(22px, 2.5vw, 30px); } .sequence-list li { min-width: 0; } .sequence-list li + li { border-top: 1px solid var(--line); } .sequence-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: clamp(18px, 3vw, 30px); min-width: 0; padding-block: clamp(14px, 1.8vw, 20px); } a.sequence-item:focus-visible { outline-offset: 4px; } .sequence-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 13px 13px 13px 30px; background: var(--bg3); color: var(--accent); font-size: 19px; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; transition: background 460ms var(--ease), color 460ms var(--ease), transform var(--hover); } .sequence-icon::before { vertical-align: 0; } .sequence-content { min-width: 0; } .sequence-content small { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); } .sequence-value { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-family: var(--display-font); font-size: clamp(1rem, 1.6vw, 1.16rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.018em; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size var(--hover); } a.sequence-item:hover .sequence-value, a.sequence-item:focus-visible .sequence-value { background-size: 100% 1px; } a.sequence-item:hover .sequence-icon, a.sequence-item:focus-visible .sequence-icon { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); } /* ── 18. Rodapé ───────────────────────────────────────────────── */ .site-footer { padding-top: clamp(56px, 6vw, 88px); padding-bottom: 34px; border-top: 1px solid var(--line); } /* O dock é fixo e fica sobre o canto inferior direito em qualquer rolagem. No fim da página ele passava por cima do logotipo de quem assina, que é a última coisa à direita do rodapé. A reserva é lateral e não vertical: reservar altura obrigaria a limpar as duas teclas — 156px — e deixaria uma faixa morta no pé da página. De lado bastam 56px, porque a invasão real fica entre 20 e 35px em toda a faixa de larguras em que ela existe. Vai nos dois `shell` do rodapé para que o menu e o crédito continuem alinhados entre si; o custo é a coluna da direita recuar do limite da grade, e é um custo menor que o vão morto. Os dois limites têm motivo: abaixo de 561px a última linha empilha à esquerda e o dock não a alcança — medido, sobreposição zero. Acima de 1440px o `shell` para de crescer, sobra margem dos dois lados e o dock já cai fora do conteúdo sozinho. */ @media (min-width: 561px) and (max-width: 1440px) { .site-footer-main .shell { padding-right: calc(var(--gutter) + 56px); } } .footer-top { padding-bottom: clamp(38px, 4vw, 56px); } .footer-brand { margin-right: 0; } .footer-brand .brand-text small { color: var(--faint); } .footer-claim { font-family: var(--display-font); font-size: clamp(1.35rem, 2.5vw, 1.95rem); font-weight: 300; letter-spacing: -0.03em; color: var(--soft); } .footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; } .footer-nav a { display: inline-flex; align-items: center; font-size: 13.5px; color: var(--soft); transition: color var(--hover); } .footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); } .site-footer-main .footer-top { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(32px, 6vw, 46px); } .site-footer-main .footer-brand { justify-self: start; } .site-footer-main .footer-claim { justify-self: center; text-align: center; } .site-footer-main .footer-nav { justify-self: end; } .site-footer-main .footer-nav ul { display: grid; justify-items: start; gap: 0; } .site-footer-main .footer-nav a { min-height: 32px; } @media (min-width: 560px) and (max-width: 839px) { .site-footer-main .footer-top { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; } .site-footer-main .footer-brand { grid-column: 1; grid-row: 1; } .site-footer-main .footer-nav { grid-column: 2; grid-row: 1; } .site-footer-main .footer-claim { grid-column: 1 / -1; grid-row: 2; } } @media (min-width: 840px) { .site-footer-main .footer-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); } } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--soft); } .site-footer-main .footer-credit { --footer-credit-opacity: 0.42; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; white-space: nowrap; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0; color: var(--soft); } /* O logo do crédito é preto sólido e precisa inverter sobre faixa escura. O rodapé é `band-b`, que no tema padrão é a faixa escura — então a inversão é o caso base, e o natu é que desfaz. */ .site-footer-main .footer-credit-heart, .site-footer-main .footer-credit-logo { filter: brightness(0) saturate(100%) invert(1); opacity: var(--footer-credit-opacity); } html[data-theme="natu"] .site-footer-main .footer-credit-heart, html[data-theme="natu"] .site-footer-main .footer-credit-logo { filter: brightness(0) saturate(100%); } .site-footer-main .footer-credit-heart { display: inline-block; } .site-footer-main .footer-credit-link { display: inline-flex; align-items: center; min-height: 24px; border-radius: 6px; } .site-footer-main .footer-credit-link picture { display: flex; } .site-footer-main .footer-credit-logo { width: clamp(62px, 5.6vw, 74px); height: auto; transition: opacity 180ms var(--ease-inout), transform 180ms var(--ease-inout); } .site-footer-main .footer-credit-link:hover .footer-credit-logo, .site-footer-main .footer-credit-link:focus-visible .footer-credit-logo { opacity: 0.64; transform: translateY(-1px); } @media (max-width: 560px) { .site-footer-main .footer-bottom { align-items: flex-start; flex-direction: column; } .site-footer-main .footer-credit { justify-content: flex-start; } /* No celular tudo volta para a margem da marca: a frase deixa de ser centralizada e o menu para de flutuar encostado na direita. Ele ocupa a largura toda em duas colunas, separado por um fio, com alvo de toque de 44px — o mínimo confortável para o dedo. */ .site-footer-main .footer-claim { justify-self: start; text-align: left; } .site-footer-main .footer-nav { justify-self: stretch; } .site-footer-main .footer-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; padding-top: 22px; border-top: 1px solid var(--line); } .site-footer-main .footer-nav a { min-height: 44px; font-size: 14.5px; } } /* Sobra para o dock: como ele não se esconde mais no rodapé, o último parágrafo precisa terminar acima da coluna de botões. */ @media (max-width: 900px) { .site-footer-main { padding-bottom: 132px; } } /* ── 19. Dock flutuante ───────────────────────────────────────── */ .dock { position: fixed; z-index: 90; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); display: grid; gap: 10px; justify-items: center; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity 260ms var(--ease-inout), transform 260ms var(--ease-inout), visibility 0s; } .dock.is-ready { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* Raio uniforme: com o canto longo da marca, o centro geométrico e o centro percebido não coincidiam e o ícone parecia deslocado. */ .dock-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--a-line2); background: var(--a-bg2); color: var(--a-ink); box-shadow: var(--shadow-lg); transition: background var(--hover), color var(--hover), border-color var(--hover), transform 320ms var(--ease-inout); } .dock-btn:hover { transform: translateY(-2px); } .dock-top:hover { background: var(--a-bg3); border-color: var(--a-ink); } .dock-btn svg { width: 24px; height: 24px; } /* Anel verde: sobre a faixa de entregas o dourado do botão é o mesmo do fundo, e sem o contorno o WhatsApp desaparecia justo ali. */ /* Sobre o creme do tema padrão o dourado quase some, então o botão sai em verde com o glifo branco. O aro branco é o que destaca a tecla do fundo claro que ela sobrevoa — mesmo papel do aro claro que o botão de subir tem no natu. No natu a dupla se inverte: fundo dourado, glifo verde, e o aro sai porque ali o contraste já vem do próprio dourado contra a faixa. */ .dock-wa { background: var(--natu-800); border-width: 2px; border-color: #fff; color: #fff; } html[data-theme="natu"] .dock-wa { background: var(--valor-400); border-color: var(--natu-800); color: var(--natu-900); } /* No hover o botão assume o verde do WhatsApp: é o sinal que a pessoa reconhece, e sobre ele o glifo pede branco. Precisa dos dois seletores porque a regra do natu é mais específica que `.dock-wa:hover` sozinho. A borda fica de fora daqui: no tema padrão o aro branco atravessa o hover, senão o anel sumiria no meio da interação. */ .dock-wa:hover, html[data-theme="natu"] .dock-wa:hover { background: var(--whatsapp); color: #fff; } /* No natu não há aro a preservar, então a borda acompanha o verde. */ html[data-theme="natu"] .dock-wa:hover { border-color: var(--whatsapp); } .dock-top { opacity: 0; visibility: hidden; transform: translateY(10px); } .dock-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* ── 20. Revelações ───────────────────────────────────────────── */ /* A revelação usa animação, e não transição: a propriedade `transition` do elemento fica livre para os seus próprios estados de hover. Com `backwards` o elemento volta às suas regras assim que a animação termina. */ html.motion [data-reveal] { opacity: 0; will-change: opacity, transform; } html.motion [data-reveal].is-in { opacity: 1; will-change: auto; animation: reveal 820ms var(--ease-out) var(--d, 0ms) backwards; } @keyframes reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* A marca do hero é desenhada pelo contorno e só então preenchida. */ html.motion .mark-hero .mark-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 2.8s var(--ease-out) 200ms forwards; } html.motion .mark-hero .mark-fill { opacity: 0; animation: fill-in 1400ms var(--ease-out) 1500ms forwards; } @keyframes trace { to { stroke-dashoffset: 0; } } @keyframes fill-in { to { opacity: 1; } } /* O ciclo não se desenha mais etapa por etapa: com os setores cheios, o traçado progressivo virava um carrossel de blocos aparecendo. Sobra a entrada única de `[data-reveal]`, igual à de qualquer outro bloco. */ /* ── 21. Responsivo ───────────────────────────────────────────── */ /* Grades com contagem explícita de colunas. A regra vale para as duas, mas por motivos diferentes: as entregas são 6 e fecham em 2 ou 3 colunas; o público são 4 e fecha em 2 ou 4. Em `audience-grid` isso não é preferência e sim necessidade, porque ela é um bloco emendado — o vão de 1px deixa o fundo da grade aparecer como filete, e uma célula vazia na última linha viraria um retângulo cheio dessa cor. */ @media (min-width: 640px) { .audience-grid, .deliver-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .deliver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* O público só abre em quatro acima de 1060px: em 900px cada cartão cairia para ~210px e o texto passaria a quebrar em oito linhas. */ @media (min-width: 1060px) { .audience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 980px) { .method-alt-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } /* Mesma solução do dossiê de serviços: o enunciado fica colado no topo enquanto as quatro etapas correm, em vez de sumir na primeira rolagem. */ .method-alt-head { position: sticky; top: calc(var(--header-h) + 54px); } } @media (max-width: 1240px) { .header-cta { display: none; } .hero-mark-layer { left: 82%; width: clamp(190px, 22vw, 250px); opacity: 0.15; } } @media (max-width: 1120px) { .main-nav a { padding-inline: 10px; font-size: 13px; } } @media (max-width: 1040px) { .sequence-shell { grid-template-columns: minmax(0, 1fr); gap: clamp(42px, 7vw, 72px); } .sequence-copy { position: static; max-width: 700px; } } @media (max-width: 1023px) { .diagnostic-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 960px) { :root { --header-h: 68px; } .kicker-dot { display: none; } .menu-toggle { display: grid; } .theme-toggle-label { display: none; } .theme-toggle { padding: 7px 9px; } .main-nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 34px; background: var(--a-bg); border-bottom: 1px solid var(--a-line); transform: translateY(-14px); opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease), transform 420ms var(--ease), visibility 0s linear 400ms, background 460ms var(--ease); } .main-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--ease), transform 420ms var(--ease-out), visibility 0s; } .main-nav a { padding: 15px 0; font-family: var(--display-font); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.03em; border-bottom: 1px solid var(--a-line); } .main-nav a::after { display: none; } .main-nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; padding: 16px 26px; border: 1px solid var(--a-accent); border-radius: 999px; background: var(--a-accent); color: var(--a-on-accent); font-family: var(--display-font); font-size: 15px; font-weight: 500; letter-spacing: 0; } /* Respiro triplicado sob o cabeçalho: no celular o título encostava na barra e a home abria sem nenhuma pausa. */ .hero { min-height: auto; padding-top: calc(var(--header-h) + 120px); padding-bottom: 64px; } /* Sem área livre no celular, a marca caía por cima do título e do lead. Some no layout mobile em vez de virar marca-d'água. */ .hero-mark-layer { display: none; } } @media (max-width: 620px) { /* Em duas linhas o pré-título vira um bloco de texto competindo com o título, e não uma etiqueta. No celular ele sai. */ .hero .kicker { display: none; } /* Empilhados numa coluna só, título, lead e botões ficavam com o mesmo respiro que tinham lado a lado no desktop e liam como um bloco contínuo. A folga entre eles dobra para separar os três tempos da mensagem. */ .hero-title { margin-top: 0; margin-bottom: 44px; font-size: clamp(2.7rem, 13.5vw, 4.2rem); } .hero-actions { margin-top: 52px; } .hero-actions .btn { flex: 1 1 100%; } .dock-btn { width: 48px; height: 48px; } .dx-actions .btn { flex: 1 1 100%; } .marquee-track { gap: 20px; animation-duration: 38s; } .brand-word { height: 17px; } .brand-mark { width: 29px; height: 29px; } } /* ── 22. Movimento reduzido / impressão ───────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .marquee-track { animation: none; transform: none; } .hero-mark-layer { transition: none; } .mark-hero .mark-fill { opacity: 1; } .site-footer-main .footer-credit-logo { transition: none; } } @media print { .site-header, .dock, .progress, .marquee, .skip-link, .hero-mark-layer, .hero-texture, .footer-credit { display: none !important; } body { background: #fff; color: #000; } .band { --bg: #fff; --bg2: #fff; --bg3: #fff; --ink: #000; --soft: #333; --faint: #555; --line: rgba(0, 0, 0, 0.2); --line2: rgba(0, 0, 0, 0.45); --accent: #000; --on-accent: #fff; background: #fff !important; color: #000 !important; } .deliver::before { display: none !important; } /* Conteúdo fechado e elementos ainda não revelados precisam sair no papel. */ .mini-dossier-list details > .mini-dossier-body { display: grid !important; height: auto !important; padding: 28px 14px !important; overflow: visible !important; opacity: 1 !important; transform: none !important; } [data-reveal] { position: static !important; height: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } .mini-dossier-list summary i { display: none !important; } }