/* ============================================================ Evolv Theme — Base Tokens da marca + layout de página. Estilos ESPECÍFICOS de blocos ficam em blocks//style.css (carregados condicionalmente via block.json). ============================================================ */ :root { /* --- Paleta da marca --- */ --color-primary: #4B32AF; --color-primary-dk: #3A2794; --color-primary-light: #C9BEFF; --color-primary-bg: #E6DEFF; --color-cyan: #5CE0E5; --color-cyan-dk: #41C6CB; --color-blue-accent: #0D93E0; /* Neutros (slate) */ --color-slate-900: #0F172A; --color-slate-700: #334155; --color-slate-500: #64748B; --color-slate-300: #CBD5E1; --color-slate-200: #E2E8F0; --color-slate-100: #F1F5F9; --color-slate-50: #F8FAFC; --color-white: #FFFFFF; --color-dark: var(--color-slate-900); --color-muted: var(--color-slate-500); /* --- Tipografia --- */ --font-headline: 'Segoe UI Variable Display', 'Segoe UI Variable Text', 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-label: 'Space Grotesk', 'Inter', sans-serif; /* --- Layout --- */ --container-max: 1280px; --container-pad: clamp(16px, 4vw, 32px); --section-pad-y: clamp(64px, 8vw, 96px); /* --- Formas --- */ --radius-sm: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-2xl: 2rem; /* 32px */ --radius-full: 9999px; /* --- Sombras (tons tingidos, nunca preto) --- */ --shadow-sm: 0 4px 16px rgba(75, 50, 175, 0.04); --shadow-md: 0 12px 32px rgba(75, 50, 175, 0.06); --shadow-lg: 0 24px 48px rgba(75, 50, 175, 0.08); --shadow-xl: 0 32px 64px rgba(75, 50, 175, 0.10); /* --- Gradientes --- */ --grad-brand: linear-gradient(90deg, #4B32AF 0%, #4B32AF 34%, #3A2794 58%, #0D93E0 82%, #5CE0E5 100%); --grad-primary-soft: linear-gradient(135deg, rgba(75,50,175,0.05) 0%, rgba(92,224,229,0.08) 100%); } /* ---------- Reset leve ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* F7.6 (pós-M8) — `overflow-x: hidden` foi REMOVIDO daqui e do porque quebra `position: sticky` em TODOS os descendentes (gotcha CSS: qualquer ancestral com overflow != visible invalida o sticky). O overflow horizontal original (skip-link com left: -9999px) foi resolvido em M7 com `clip-path: inset(50%)` no próprio skip-link — o guard global virou dead code. Isso restaura o header sticky + sidebar sticky do single post. */ } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-dark); background: var(--color-white); -webkit-font-smoothing: antialiased; text-rendering: auto; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--color-primary-dk); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); margin: 0 0 0.5em; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; font-kerning: normal; font-synthesis: none; color: var(--color-slate-900); } h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.875rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); } p { margin: 0 0 1rem; } /* Material Symbols defaults */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-feature-settings: 'liga'; text-transform: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; vertical-align: middle; } /* ---------- Container ---------- */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } .container--narrow { max-width: 720px; } /* ---------- Text gradient brand ---------- */ .text-gradient { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ---------- Buttons ---------- */ .evolv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none; white-space: nowrap; } .evolv-btn:hover { text-decoration: none; transform: translateY(-1px); } .evolv-btn:active { transform: scale(.97); } .evolv-btn--primary { background: var(--color-cyan); color: var(--color-primary); } .evolv-btn--primary:hover { background: var(--color-cyan-dk); color: var(--color-primary); box-shadow: 0 12px 32px rgba(92, 224, 229, 0.25); } .evolv-btn--secondary { background: var(--color-white); color: var(--color-slate-700); border-color: var(--color-slate-200); } .evolv-btn--secondary:hover { background: var(--color-slate-50); border-color: var(--color-slate-300); color: var(--color-slate-900); } .evolv-btn--purple { background: var(--color-primary); color: var(--color-white); } .evolv-btn--purple:hover { background: var(--color-primary-dk); box-shadow: 0 12px 32px rgba(75, 50, 175, 0.25); color: var(--color-white); } /* ---------- Seção wrapper ---------- */ .evolv-section { padding: var(--section-pad-y) 0; } .evolv-section--dark { background: var(--color-slate-900); color: var(--color-white); } .evolv-section--dark h1, .evolv-section--dark h2, .evolv-section--dark h3 { color: var(--color-white); } /* F12.4 — Gutenberg `wp-block-group` com inline background primary/slate-900: força foreground branco em todos os descendentes (WCAG AA). Corrige conteúdo legacy migrado do Astra que usa `has-ast-global-color-N-color` em texto dentro de containers com bg escuro. */ [class*="wp-block-group"][style*="background-color"][style*="4b32af"], [class*="wp-block-group"][style*="background-color"][style*="4B32AF"], [class*="wp-block-group"][style*="background-color"][style*="0f172a"], [class*="wp-block-group"][style*="background-color"][style*="0F172A"] { color: var(--color-white); } [class*="wp-block-group"][style*="background-color"][style*="4b32af"] :where(p, span, strong, em, li, blockquote, h1, h2, h3, h4, h5, h6), [class*="wp-block-group"][style*="background-color"][style*="4B32AF"] :where(p, span, strong, em, li, blockquote, h1, h2, h3, h4, h5, h6), [class*="wp-block-group"][style*="background-color"][style*="0f172a"] :where(p, span, strong, em, li, blockquote, h1, h2, h3, h4, h5, h6), [class*="wp-block-group"][style*="background-color"][style*="0F172A"] :where(p, span, strong, em, li, blockquote, h1, h2, h3, h4, h5, h6) { color: inherit !important; } [class*="wp-block-group"][style*="background-color"][style*="4b32af"] a, [class*="wp-block-group"][style*="background-color"][style*="4B32AF"] a, [class*="wp-block-group"][style*="background-color"][style*="0f172a"] a, [class*="wp-block-group"][style*="background-color"][style*="0F172A"] a { color: var(--color-cyan) !important; } .evolv-section--purple { background: var(--color-primary); color: var(--color-white); } .evolv-section--purple h1, .evolv-section--purple h2, .evolv-section--purple h3 { color: var(--color-white); } .evolv-section--slate { background: var(--color-slate-50); } .evolv-section__eyebrow { display: inline-block; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; margin-bottom: 16px; } .evolv-section__title { margin: 0 0 16px; letter-spacing: -0.01em; } .evolv-section__subtitle { color: var(--color-slate-500); font-size: 1.125rem; margin: 0; } /* ============================================================ Single Post (Notícias & Insights) — layout editorial light ============================================================ */ .evolv-post { display: block; } .evolv-post__hero { position: relative; padding: clamp(96px, 12vw, 140px) 0 clamp(56px, 7vw, 80px); background: var(--color-slate-50); overflow: hidden; isolation: isolate; min-height: 540px; } /* Imagem ocupando apenas o lado direito (~2/3 da largura), em fade suave */ .evolv-post__hero-bg { position: absolute; top: 0; right: 0; width: 66%; height: 100%; background-size: cover; background-position: center; opacity: 0.55; z-index: -2; filter: saturate(0.9); } /* Gradient de fade: slate-50 sólido à esquerda → transparente no canto direito */ .evolv-post__hero-grad { position: absolute; inset: 0; background: linear-gradient(to left, transparent 0%, var(--color-slate-50) 55%), linear-gradient(180deg, transparent 60%, var(--color-slate-50) 100%); z-index: -1; } .evolv-post__hero-inner { position: relative; } /* Conteúdo do hero ocupa ~60% da largura (texto esquerda, imagem respirando à direita) */ .evolv-post__hero-inner > *:not(.evolv-post__breadcrumb) { max-width: 62%; } @media (max-width: 900px) { .evolv-post__hero-inner > *:not(.evolv-post__breadcrumb) { max-width: 100%; } .evolv-post__hero-bg { opacity: 0.3; width: 100%; } } .evolv-post__breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-slate-500); margin-bottom: 24px; font-weight: 600; } .evolv-post__breadcrumb a { color: var(--color-slate-500); text-decoration: none; } .evolv-post__breadcrumb a:hover { color: var(--color-primary); } .evolv-post__breadcrumb span { color: var(--color-slate-300); } .evolv-post__cat { display: inline-block; padding: 5px 14px; border-radius: var(--radius-full); background: rgba(75, 50, 175, 0.1); color: var(--color-primary); font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; text-decoration: none; } .evolv-post__cat:hover { background: var(--color-primary); color: var(--color-white); } .evolv-post__title { margin: 0 0 20px; max-width: 24ch; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--color-slate-900); } .evolv-post__excerpt { margin: 0 0 40px; max-width: 60ch; color: var(--color-slate-500); font-size: 1.125rem; line-height: 1.6; } .evolv-post__excerpt p { margin: 0; } .evolv-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--color-slate-200); } .evolv-post__meta-author { display: flex; align-items: center; gap: 12px; } .evolv-post__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-white); box-shadow: var(--shadow-sm); } .evolv-post__meta-name { margin: 0; font-size: 0.9375rem; font-weight: 700; color: var(--color-slate-900); letter-spacing: -0.005em; } .evolv-post__meta-role { margin: 0; font-family: var(--font-label); font-size: 0.7rem; color: var(--color-slate-500); letter-spacing: 0.08em; text-transform: uppercase; } .evolv-post__meta-sep { width: 1px; height: 32px; background: var(--color-slate-200); } .evolv-post__meta-cell { display: flex; flex-direction: column; gap: 2px; } .evolv-post__meta-label { font-family: var(--font-label); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-slate-500); font-weight: 700; } .evolv-post__meta-cell > time, .evolv-post__meta-cell > span:not(.evolv-post__meta-label) { font-size: 0.875rem; font-weight: 700; color: var(--color-slate-900); } .evolv-post__meta-cell--service span:not(.evolv-post__meta-label) { color: #0F5F61; } /* Body 12-col */ .evolv-post__body { background: var(--color-slate-50); padding: clamp(48px, 6vw, 80px) 0; } .evolv-post__grid { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(32px, 4vw, 64px); align-items: start; } @media (max-width: 960px) { .evolv-post__grid { grid-template-columns: 1fr; } } /* Sidebar */ .evolv-post__sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 960px) { .evolv-post__sidebar { position: static; } } .evolv-post__toc { background: var(--color-white); border: 1px solid var(--color-slate-100); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .evolv-post__toc-label { margin: 0 0 16px; font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; } .evolv-post__toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .evolv-post__toc li a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-slate-500); font-size: 0.875rem; line-height: 1.4; text-decoration: none; border-left: 2px solid transparent; transition: color .2s ease, background .2s ease, border-color .2s ease; } .evolv-post__toc li a:hover { color: var(--color-primary); background: var(--color-slate-50); } .evolv-post__toc li a.is-active { color: var(--color-primary); background: rgba(75, 50, 175, 0.06); border-left-color: var(--color-primary); font-weight: 600; } .evolv-post__toc-empty { color: var(--color-slate-300); font-size: 0.875rem; padding: 8px 10px; } /* Sidebar CTA: primary sólido, shadow pesada (estilo do design) */ .evolv-post__sidebar-cta { position: relative; overflow: hidden; background: var(--color-primary); color: var(--color-white); padding: 28px 24px; border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(75, 50, 175, 0.22); } .evolv-post__sidebar-cta-icon { font-size: 28px !important; color: var(--color-cyan); margin-bottom: 14px; display: block; } .evolv-post__sidebar-cta-title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-white); } .evolv-post__sidebar-cta-desc { margin: 0 0 20px; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); } .evolv-post__sidebar-cta-btn { display: inline-flex; justify-content: center; width: 100%; padding: 14px 16px; background: var(--color-cyan); color: var(--color-primary); border-radius: var(--radius-md); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: none; transition: transform .2s ease, filter .2s ease; } .evolv-post__sidebar-cta-btn:hover { transform: scale(1.02); filter: brightness(0.96); color: var(--color-primary); text-decoration: none; } /* Main — flow editorial (canvas + author + final-cta + related) alinhado à sidebar sticky */ .evolv-post__main { min-width: 0; display: flex; flex-direction: column; gap: 56px; } /* Author bio inline (dentro do col-9) */ .evolv-post__author-inline .evolv-post__author-card { display: flex; gap: 28px; padding: 32px; background: var(--color-white); border: 1px solid var(--color-slate-100); border-radius: var(--radius-2xl); align-items: flex-start; box-shadow: var(--shadow-sm); } @media (max-width: 600px) { .evolv-post__author-inline .evolv-post__author-card { flex-direction: column; text-align: center; align-items: center; gap: 20px; padding: 28px; } } /* Blocos reutilizados dentro do main col-9 — neutralizar padding da container de section */ .evolv-post__main .evolv-cta, .evolv-post__main .evolv-insights, .evolv-post__main .evolv-section { padding: 0; } .evolv-post__main .evolv-cta > .container, .evolv-post__main .evolv-insights > .container { padding: 0; } .evolv-post__main .evolv-cta__card { padding: clamp(32px, 4vw, 56px); border-radius: var(--radius-2xl); } .evolv-post__main .evolv-insights__head { margin-bottom: 32px; } .evolv-post__main .evolv-insights__head > div > .evolv-insights__title { font-size: 1.5rem; } .evolv-post__canvas { background: var(--color-white); padding: clamp(36px, 6vw, 72px); border-radius: 2rem; /* design usa rounded-3xl ≈ 24px+ */ box-shadow: 0 50px 100px -20px rgba(15, 23, 42, 0.15), 0 30px 60px -30px rgba(75, 50, 175, 0.12); /* shadow-2xl estilo do design */ font-size: 1.0625rem; line-height: 1.75; color: var(--color-slate-700); } .evolv-post__canvas > * + * { margin-top: 1.25em; } .evolv-post__canvas h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-slate-900); margin-top: 2em; margin-bottom: 0.5em; letter-spacing: -0.02em; scroll-margin-top: 88px; } .evolv-post__canvas h2:first-child { margin-top: 0; } .evolv-post__canvas h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); color: var(--color-slate-900); margin-top: 1.6em; margin-bottom: 0.4em; letter-spacing: -0.01em; scroll-margin-top: 88px; } .evolv-post__canvas p { margin: 0 0 1.25em; } .evolv-post__canvas a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .evolv-post__canvas a:hover { color: var(--color-primary-dk); } .evolv-post__canvas strong { color: var(--color-slate-900); } .evolv-post__canvas img { border-radius: var(--radius-lg); margin: 1.5em 0; max-width: 100%; height: auto; } .evolv-post__canvas blockquote { margin: 1.5em 0; padding: 20px 24px; border-left: 4px solid var(--color-primary); background: var(--color-slate-50); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: 1.125rem; line-height: 1.6; color: var(--color-slate-700); font-style: italic; } .evolv-post__canvas ul, .evolv-post__canvas ol { padding-left: 1.5em; margin: 0 0 1.25em; } .evolv-post__canvas li { margin-bottom: 0.5em; } .evolv-post__canvas code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; background: var(--color-slate-100); padding: 2px 6px; border-radius: 4px; color: var(--color-slate-900); } .evolv-post__canvas pre { background: var(--color-slate-900); color: #E2E8F0; padding: 20px; border-radius: var(--radius-lg); overflow-x: auto; font-size: 0.875rem; line-height: 1.5; } .evolv-post__canvas pre code { background: transparent; color: inherit; padding: 0; } /* Author bio */ .evolv-post__author { background: var(--color-white); padding: clamp(48px, 6vw, 72px) 0; } .evolv-post__author-card { display: flex; gap: 32px; padding: 32px; background: var(--color-slate-50); border: 1px solid var(--color-slate-100); border-radius: var(--radius-2xl); align-items: flex-start; } @media (max-width: 600px) { .evolv-post__author-card { flex-direction: column; text-align: center; align-items: center; gap: 20px; padding: 28px; } } .evolv-post__author-avatar { width: 120px; height: 120px; border-radius: var(--radius-xl); object-fit: cover; flex-shrink: 0; } .evolv-post__author-body { flex: 1; min-width: 0; } .evolv-post__author-name { margin: 0 0 4px; font-size: 1.5rem; color: var(--color-slate-900); letter-spacing: -0.02em; } .evolv-post__author-role { margin: 0 0 16px; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); font-weight: 700; } .evolv-post__author-bio { margin: 0; color: var(--color-slate-500); line-height: 1.65; font-size: 0.9375rem; } /* ============================================================ Single Post — legado (.evolv-single__*) — ainda usado por retrocompat ============================================================ */ .evolv-single__hero { background: var(--color-slate-50); padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 4vw, 56px); } .evolv-single__breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-slate-500); margin-bottom: 24px; } .evolv-single__breadcrumb a { color: var(--color-slate-500); } .evolv-single__breadcrumb a:hover { color: var(--color-primary); } .evolv-single__breadcrumb span { color: var(--color-slate-300); } .evolv-single__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .evolv-single__cat, .evolv-single__service { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; text-decoration: none; } .evolv-single__cat { background: rgba(75, 50, 175, 0.1); color: var(--color-primary); } .evolv-single__cat:hover { background: var(--color-primary); color: var(--color-white); } .evolv-single__service { background: rgba(92, 224, 229, 0.2); color: #0F5F61; } .evolv-single__title { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--color-slate-900); margin: 0 0 32px; max-width: 20ch; } .evolv-single__meta { display: flex; align-items: center; gap: 14px; padding-top: 8px; } .evolv-single__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-white); box-shadow: var(--shadow-sm); } .evolv-single__meta-body { display: flex; flex-direction: column; gap: 2px; } .evolv-single__meta-body strong { font-size: 0.9375rem; color: var(--color-slate-900); font-weight: 700; letter-spacing: -0.005em; } .evolv-single__meta-line { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-slate-500); letter-spacing: 0.04em; display: inline-flex; gap: 8px; align-items: center; } .evolv-single__featured { margin-top: 48px; } .evolv-single__featured-img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: block; } /* Conteúdo do post — tipografia editorial */ .evolv-single__content-wrap { background: var(--color-white); padding: clamp(56px, 8vw, 96px) 0; } .evolv-single__content { font-size: 1.0625rem; line-height: 1.75; color: var(--color-slate-700); } .evolv-single__content > * + * { margin-top: 1.25em; } .evolv-single__content h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-slate-900); margin-top: 2em; margin-bottom: 0.5em; letter-spacing: -0.02em; } .evolv-single__content h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); color: var(--color-slate-900); margin-top: 1.6em; margin-bottom: 0.4em; letter-spacing: -0.01em; } .evolv-single__content p { margin: 0 0 1.25em; } .evolv-single__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .evolv-single__content a:hover { color: var(--color-primary-dk); } .evolv-single__content img { border-radius: var(--radius-lg); margin: 1.5em 0; } .evolv-single__content blockquote { margin: 1.5em 0; padding: 20px 24px; border-left: 4px solid var(--color-primary); background: var(--color-slate-50); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-size: 1.125rem; line-height: 1.6; color: var(--color-slate-700); font-style: italic; } .evolv-single__content ul, .evolv-single__content ol { padding-left: 1.5em; margin: 0 0 1.25em; } .evolv-single__content li { margin-bottom: 0.5em; } .evolv-single__content code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.9em; background: var(--color-slate-100); padding: 2px 6px; border-radius: 4px; } /* ============================================================ Site Header Glass-nav fixa no topo + mega menu de Soluções + mobile toggle ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-primary); /* Sutil textura pra não ficar plano */ background-image: linear-gradient(135deg, var(--color-primary) 0%, #3A2794 100%), radial-gradient(circle at 90% 50%, rgba(92, 224, 229, 0.08), transparent 60%); background-blend-mode: normal; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-white); } .site-header__inner { position: relative; /* contexto pra posicionar o mega menu */ max-width: var(--container-max); margin: 0 auto; padding: 14px var(--container-pad); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__brand { font-family: var(--font-headline); font-weight: 900; font-size: 1.5rem; letter-spacing: -0.04em; color: var(--color-white); text-decoration: none; flex-shrink: 0; display: inline-flex; align-items: center; } .site-header__brand:hover { color: var(--color-cyan); } /* Quando o Custom Logo (imagem) do WP é usado */ .site-header__brand img, .site-header .custom-logo { display: block; width: auto; height: 36px; max-height: 40px; object-fit: contain; } .custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; } /* ---------- Área de ações (Entrar + CTA) ---------- */ .site-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .site-header__login { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-full); color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: color .2s ease, background .2s ease; } .site-header__login:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.1); } .site-header__login .material-symbols-outlined { font-size: 18px !important; } /* ---------- CTA (botão ciano no topo direito) ---------- */ .site-header__cta { display: inline-flex; align-items: center; background: var(--color-cyan); color: var(--color-primary); padding: 10px 22px; border-radius: var(--radius-full); font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; transition: filter .2s ease, transform .15s ease, box-shadow .2s ease; text-decoration: none; flex-shrink: 0; } .site-header__cta:hover { filter: brightness(.96); color: var(--color-primary); box-shadow: 0 8px 20px rgba(92, 224, 229, 0.25); } .site-header__cta:active { transform: scale(.96); } /* ---------- Nav ---------- */ .site-nav { margin-left: auto; } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; } .site-nav__item { position: static; } /* mega menu é absolute ao header, não ao

*/ .site-nav__link { display: inline-flex; align-items: center; gap: 2px; padding: 18px 0; color: rgba(255, 255, 255, 0.82); font-weight: 500; font-size: 0.9375rem; text-decoration: none; letter-spacing: -0.005em; transition: color .2s ease; background: transparent; border: 0; cursor: pointer; font-family: inherit; } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--color-cyan); } .site-nav__caret { font-size: 20px !important; margin-left: 2px; transition: transform .2s ease; } /* ---------- Mega Menu ---------- */ .mega-menu { position: absolute; /* Sobe 14px (= padding-bottom do .site-header__inner) para eliminar o gap morto entre o link e o card visível. O padding-top preserva o espaço do card. */ top: calc(100% - 14px); left: 0; right: 0; padding: 28px var(--container-pad) 16px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .22s ease, visibility .22s ease, transform .22s ease; z-index: 60; pointer-events: none; } /* Abre no hover do

OU no foco dentro OU via data-attr (JS) */ .site-nav__item--has-mega:hover .mega-menu, .site-nav__item--has-mega:focus-within .mega-menu, .site-nav__item--open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Rotaciona o caret quando abre */ .site-nav__item--has-mega:hover .site-nav__caret, .site-nav__item--has-mega:focus-within .site-nav__caret, .site-nav__item--open .site-nav__caret { transform: rotate(180deg); } .mega-menu__inner { max-width: var(--container-max); margin: 0 auto; background: linear-gradient(135deg, var(--color-primary) 0%, #3A2794 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); box-shadow: 0 24px 64px rgba(75, 50, 175, 0.35); padding: 28px; display: grid; grid-template-columns: 2.2fr 1fr; gap: 24px; align-items: stretch; color: var(--color-white); position: relative; overflow: hidden; } /* Textura sutil no fundo roxo */ .mega-menu__inner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } .mega-menu__left { display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; } .mega-menu__eyebrow { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-cyan); font-weight: 700; } .mega-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 12px; } .home .mega-menu__grid { grid-template-rows: auto 1fr 1fr; } /* Limpeza Inteligente (1º card) ocupa coluna inteira; demais formam 2x2 ao lado */ .mega-menu__grid > :first-child { grid-column: 1; grid-row: 1 / -1; } .mega-menu__group-title { grid-column: 2 / -1; align-self: end; padding: 0 2px 2px; color: var(--color-cyan); font-family: var(--font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; } /* Card de solução (glassy sobre o roxo) */ .mega-menu__card { position: relative; padding: 18px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: background .2s ease, border-color .2s ease, transform .2s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mega-menu__card:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(92, 224, 229, 0.5); transform: translateY(-2px); text-decoration: none; color: inherit; } .mega-menu__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); color: var(--color-cyan); border-radius: var(--radius-md); flex-shrink: 0; font-size: 20px !important; line-height: 1; } .mega-menu__card:hover .mega-menu__icon { background: var(--color-cyan); color: var(--color-primary); } .mega-menu__title { margin: 0; font-size: 0.9375rem; color: var(--color-white); font-weight: 700; letter-spacing: -0.005em; } .mega-menu__desc { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); } .mega-menu__arrow { position: absolute; right: 16px; bottom: 16px; color: var(--color-cyan); opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; } .mega-menu__arrow .material-symbols-outlined { font-size: 22px !important; } .mega-menu__card:hover .mega-menu__arrow { opacity: 1; transform: translateX(0); } /* CTA card (direita) — branco pra contrastar com o roxo */ .mega-menu__cta { position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius-lg); background: var(--color-white); color: var(--color-slate-900); display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; z-index: 1; } .mega-menu__cta-glow { position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: var(--color-cyan); filter: blur(50px); opacity: 0.25; pointer-events: none; } .mega-menu__cta-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 28px !important; line-height: 1; color: var(--color-primary); position: relative; z-index: 1; } .mega-menu__cta-title { margin: 0; color: var(--color-slate-900); font-size: 1.125rem; letter-spacing: -0.01em; position: relative; z-index: 1; } .mega-menu__cta-desc { margin: 0; color: var(--color-slate-500); font-size: 0.875rem; line-height: 1.5; position: relative; z-index: 1; flex: 1; } .mega-menu__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--color-cyan); color: var(--color-primary); padding: 12px 20px; border-radius: var(--radius-full); font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; text-decoration: none; transition: filter .2s ease, transform .15s ease, box-shadow .2s ease; margin-top: auto; position: relative; z-index: 1; } .mega-menu__cta-btn:hover { filter: brightness(0.96); box-shadow: 0 10px 24px rgba(92, 224, 229, 0.35); color: var(--color-primary); text-decoration: none; } .mega-menu__cta-btn .material-symbols-outlined { font-size: 16px !important; transition: transform .2s ease; } .mega-menu__cta-btn:hover .material-symbols-outlined { transform: translateX(3px); } /* ---------- Toggle mobile ---------- */ .site-header__toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; color: var(--color-white); align-items: center; justify-content: center; } .site-header__toggle .material-symbols-outlined { font-size: 28px; } .site-header__toggle-close { display: none; } .site-header[data-evolv-nav-open] .site-header__toggle-open { display: none; } .site-header[data-evolv-nav-open] .site-header__toggle-close { display: inline; } /* ---------- Responsivo ---------- */ @media (max-width: 960px) { .site-header__inner { padding: 12px var(--container-pad); } .site-header__toggle { display: inline-flex; } .site-header__cta { display: none; } /* CTA vai pra dentro do menu mobile */ /* "Entrar" fica só como ícone no mobile, visível ao lado do hamburger */ .site-header__login { padding: 8px; } .site-header__login-label { display: none; } .site-nav { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%); padding: 24px var(--container-pad) 40px; margin-left: 0; transform: translateY(-8px); opacity: 0; visibility: hidden; overflow-y: auto; transition: opacity .25s ease, visibility .25s ease, transform .25s ease; border-top: 1px solid rgba(255, 255, 255, 0.08); } .site-header[data-evolv-nav-open] .site-nav { transform: translateY(0); opacity: 1; visibility: visible; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 4px; } /* Painel roxo no mobile — mesmo esquema de cores do desktop */ .site-nav__link { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); justify-content: space-between; color: rgba(255, 255, 255, 0.92); } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--color-cyan); } .site-nav__item { position: relative; } /* Mega menu em mobile: sem posicionamento absoluto, abre em acordeão */ .mega-menu { position: static; padding: 0; transform: none; pointer-events: auto; max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transition: max-height .3s ease; } .site-nav__item--open .mega-menu { max-height: 2000px; } .mega-menu__inner { grid-template-columns: 1fr; box-shadow: none; border: 0; background: transparent; padding: 12px 0 20px; } .mega-menu__grid { grid-template-columns: 1fr; grid-template-rows: none; } .mega-menu__grid > :first-child { grid-column: auto; grid-row: auto; } .mega-menu__group-title { grid-column: auto; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); } } @media (max-width: 500px) { .mega-menu__cta { padding: 20px; } } /* ============================================================ Site Footer — bg roxo, 4 cols + bottom bar ============================================================ */ .site-footer { position: relative; margin-top: 0; background: linear-gradient(180deg, var(--color-primary) 0%, #2E1F7A 100%); color: rgba(255, 255, 255, 0.75); overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Textura de pontos sutil */ .site-footer::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; opacity: 0.6; } /* Glow decorativo ciano no canto inferior direito */ .site-footer__glow { position: absolute; bottom: -120px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: var(--color-cyan); filter: blur(140px); opacity: 0.12; pointer-events: none; } @media (max-width: 480px) { .home .site-footer__glow { right: 0; width: 100vw; } } .site-footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding: 72px var(--container-pad) 48px; max-width: var(--container-max); margin: 0 auto; } @media (max-width: 1100px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } } /* Coluna da marca */ .site-footer__brand-col { max-width: 420px; } .site-footer__brand { display: inline-block; font-family: var(--font-headline); font-weight: 900; font-size: 1.75rem; letter-spacing: -0.04em; color: var(--color-white); margin-bottom: 24px; text-decoration: none; transition: opacity .2s ease; } .site-footer__brand:hover { color: var(--color-cyan); opacity: 0.92; } /* Variante logo como imagem */ .site-footer__brand--logo { padding: 0; } .site-footer__brand-img { display: block; width: auto; height: 44px; max-width: 220px; object-fit: contain; } .site-footer__about { margin: 0 0 24px; line-height: 1.65; color: rgba(255, 255, 255, 0.68); font-size: 0.9375rem; max-width: 420px; } .site-footer__socials { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; } .site-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); transition: background .2s ease, color .2s ease, transform .2s ease; } .site-footer__socials a:hover { background: var(--color-cyan); color: var(--color-primary); transform: translateY(-2px); } .site-footer__socials .material-symbols-outlined { font-size: 20px !important; } .site-footer__social-svg { width: 18px; height: 18px; display: block; fill: currentColor; transition: transform .2s ease; } /* Título da coluna */ .site-footer__col-title { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-cyan); font-weight: 700; margin: 0 0 20px; } /* Lista de links */ .site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer__links a { color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; text-decoration: none; transition: color .2s ease, padding-left .2s ease; display: inline-block; } .site-footer__links a:hover { color: var(--color-cyan); padding-left: 4px; } /* Bottom bar */ .site-footer__bar { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 24px var(--container-pad) 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; } .site-footer__copy { margin: 0; color: rgba(255, 255, 255, 0.5); font-weight: 500; } .site-footer__pulse { display: flex; align-items: center; gap: 8px; color: var(--color-cyan); font-weight: 700; } .site-footer__pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-cyan); animation: evolv-pulse 2s infinite; box-shadow: 0 0 12px rgba(92, 224, 229, 0.6); } @keyframes evolv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.85); } } /* ========================================================================== Acessibilidade global (WCAG 2.2) ========================================================================== */ /* Skip link — "Pular para o conteúdo" (WCAG 2.4.1 Bypass Blocks, Level A). Técnica moderna com clip-path para não causar overflow horizontal (F7.6 — `left: -9999px` forçava scrollX em viewports < 9999px). */ .skip-link { position: absolute; top: 0; left: 0; z-index: 10000; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; background: var(--color-primary); color: var(--color-white); padding: 12px 20px; font-family: var(--font-label); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; border-radius: 0 0 8px 0; } .skip-link:focus, .skip-link:focus-visible { width: auto; height: auto; clip-path: none; overflow: visible; } /* Focus-visible global (WCAG 2.4.7 Focus Visible, 2.4.13 Focus Appearance). Ring de alto contraste em cyan sobre qualquer background. Só ativa em foco via teclado, não afeta cliques do mouse. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--color-cyan); outline-offset: 2px; border-radius: 4px; }