/* ========================================================================== Vibbe Hub — design Vértice Portado de Claude Design ("Redesign Vibbe Hub com Vértice"). Dois escopos, ambos aplicados no : .vertice-chrome tokens, tipografia, componentes (vbb-*), header, menu e formulários. Páginas com layout próprio que só querem padronizar essas peças usam apenas esta classe. .vertice-page acrescenta o fundo e as cores do design à página inteira. Sempre acompanhada de .vertice-chrome. Ordem: tokens → base → componentes (vbb-*) → páginas (vh-*) → responsivo. ========================================================================== */ /* ========================================================================== 1. TOKENS — escuro é o padrão, .light é a variação ========================================================================== */ .vertice-chrome { /* --- Superfícies roxo-profundo --- */ --background: #1a1529; --foreground: #eceaf3; --card: #241e38; --card-foreground: #eceaf3; /* --- Roxo Vibbe como primária (Tropical Indigo no escuro) --- */ --primary: #887cb7; --primary-foreground: #1a1529; --secondary: #2e2747; --secondary-foreground: #eceaf3; --muted: #272140; --muted-foreground: #9f96c5; --accent: #312a4d; --accent-foreground: #eceaf3; --destructive: #f8285a; /* --- Bordas roxas translúcidas (assinatura Vibbe) --- */ --border: rgba(136, 124, 183, 0.22); --input: rgba(136, 124, 183, 0.28); /* Foco em verde neon — assinatura CONNECT */ --ring: #94f896; --brand: #ff6f1e; --brand-foreground: #ffffff; --success: #00a261; --warning: #c59a00; --warning-foreground: #27213f; --info: #883fff; --sidebar: #1b1630; /* --- Tipografia --- */ --font-sans: "Geist", "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", monospace; --text-4xs: 0.5625rem; --text-3xs: 0.625rem; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-xs-lh: 1rem; --text-2sm: 0.8125rem; --text-2sm-lh: 1.125rem; --text-sm: 0.875rem; --text-sm-lh: 1.25rem; --text-md: 0.9375rem; --text-base: 1rem; --text-base-lh: 1.5rem; --text-lg: 1.125rem; --text-lg-lh: 1.75rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* --- Raio, espaçamento, elevação --- */ --radius-sm: 0.5rem; --radius-md: 0.625rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* --- Cores fixas da marca (independem do tema) --- */ --ultra-violet: #4c407b; --tropical-indigo: #887cb7; --electric-purple: #a04ffb; --light-green: #94f896; --dark-purple: #27213f; --platinum: #e6e6e6; /* --- Neon: a assinatura verde em intensidades reutilizáveis --- Tudo deriva de --light-green, então Backstage e Connect, que trocam aquele token pela cor do produto, levam junto todos os detalhes desenhados aqui. */ --neon: var(--light-green); --neon-soft: color-mix(in srgb, var(--light-green) 40%, transparent); --neon-faint: color-mix(in srgb, var(--light-green) 12%, transparent); --neon-edge: color-mix(in srgb, var(--light-green) 55%, var(--border)); } /* Blocos claros dentro da página escura (Por que a Vibbe) */ .vertice-chrome .light { --background: #ffffff; --foreground: #27213f; --card: #efebf9; --card-foreground: #27213f; --primary: #4c407b; --primary-foreground: #ffffff; --secondary: #e9e3f6; --secondary-foreground: #4c407b; --muted: #f3effb; --muted-foreground: #6e6796; --accent: #e9e3f6; --accent-foreground: #4c407b; --border: rgba(136, 124, 183, 0.2); --input: #e4def2; --ring: #4c407b; --success: #17c653; --warning: #f6b100; --info: #7239ea; } /* ========================================================================== 2. BASE ========================================================================== */ .vertice-chrome, .vertice-chrome *, .vertice-chrome *::before, .vertice-chrome *::after { box-sizing: border-box; } /* Pinta o fundo atrás do body para o overscroll não revelar o branco/preto do UA. */ html:has(> body.vertice-page) { background: #1a1529; overflow-x: hidden; } /* * .vertice-chrome → tipografia e componentes do design. Usado tanto pelas * páginas 100% Vértice quanto por páginas de layout próprio * que só adotam o header/fonte/formulários (ex.: Materiais). * .vertice-page → além disso, a página inteira assume o fundo e as cores do * design. Sempre vem acompanhada de .vertice-chrome. */ .vertice-chrome { /* * !important porque o app.css do tema declara `body, html { font-family: * 'Outfit' !important }`. Sem isto a Geist não chega a ser aplicada — só a * Geist Mono, que os elementos declaram por conta própria. A classe (0,1,0) * vence o seletor de elemento (0,0,1) quando ambos são !important. */ font-family: var(--font-sans) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* O app.css do tema reserva 90px no body para o header fixo antigo. O header do Vértice flutua sobre o conteúdo, então essa reserva sai em toda página que o adota — é o que deixa a malha correr até o topo, sob o header. */ padding-top: 0; } .vertice-page { margin: 0; background: var(--background); color: var(--foreground); font-size: var(--text-2sm); line-height: var(--text-2sm-lh); overflow-x: hidden; } /* Só nas páginas 100% Vértice: numa página de layout próprio isto mudaria a entrelinha dos títulos dela. */ .vertice-page h1, .vertice-page h2, .vertice-page h3 { line-height: 1.18; } /* * O reset de link fica em .vertice-page porque `.vertice-chrome a` (0,1,1) * venceria as classes de cor do Tailwind (0,1,0) numa página de layout próprio. * Header e menu trazem o reset por conta própria. */ .vertice-page a, .vh-header a, .vh-menu a { color: inherit; text-decoration: none; } .vertice-page a:hover, .vh-header a:hover, .vh-menu a:hover { text-decoration: none; } .vertice-chrome ::selection { background: var(--light-green); color: var(--dark-purple); } .vertice-chrome button { font-family: inherit; } .vertice-chrome img, .vertice-chrome svg { max-width: 100%; } /* Ícones inline (substituem o do design) */ .vertice-chrome .vh-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } /* Foco visível — o design não trazia, mas navegação por teclado precisa */ .vertice-chrome :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Salto de âncora não fica escondido sob o header fixo */ .vertice-chrome [id] { scroll-margin-top: 96px; } .vh-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 3. COMPONENTES DO DESIGN SYSTEM (vbb-*) ========================================================================== */ /* ---- Button ---- */ .vertice-chrome .vbb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex-shrink: 0; cursor: pointer; white-space: nowrap; border-radius: var(--radius-full); border: 1px solid transparent; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1; transition: all 0.15s ease; outline: none; height: 2.25rem; padding: 0 1rem; text-decoration: none; } .vertice-chrome .vbb-btn:disabled { pointer-events: none; opacity: 0.5; } .vertice-chrome .vbb-btn--xs { height: 1.5rem; padding: 0 0.5rem; gap: var(--space-1); font-size: var(--text-xs); } .vertice-chrome .vbb-btn--sm { height: 2rem; padding: 0 0.75rem; gap: var(--space-1-5); } .vertice-chrome .vbb-btn--lg { height: 2.5rem; padding: 0 1.5rem; } .vertice-chrome .vbb-btn--default { background: var(--primary); color: var(--primary-foreground); } .vertice-chrome .vbb-btn--default:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); } .vertice-chrome .vbb-btn--secondary { background: var(--secondary); color: var(--secondary-foreground); } .vertice-chrome .vbb-btn--secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, transparent); } .vertice-chrome .vbb-btn--outline { background: var(--background); border-color: var(--input); box-shadow: var(--shadow-xs); color: var(--foreground); } .vertice-chrome .vbb-btn--outline:hover { background: var(--accent); color: var(--accent-foreground); } .vertice-chrome .vbb-btn--ghost { background: transparent; color: var(--foreground); } .vertice-chrome .vbb-btn--ghost:hover { background: var(--accent); color: var(--accent-foreground); } .vertice-chrome .vbb-btn--link { background: transparent; color: var(--primary); } .vertice-chrome .vbb-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; } /* CONNECT: verde neon sobre roxo — o CTA principal da marca */ .vertice-chrome .vbb-btn--connect { background: var(--light-green); border-color: var(--light-green); color: var(--dark-purple); box-shadow: var(--shadow-xs); } .vertice-chrome .vbb-btn--connect:hover { background: transparent; color: var(--light-green); } /* ---- Badge ---- */ .vertice-chrome .vbb-badge { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); width: fit-content; flex-shrink: 0; overflow: hidden; white-space: nowrap; border-radius: var(--radius-full); border: 1px solid transparent; padding: 0.125rem 0.5rem; font-size: var(--text-xs); font-weight: var(--font-medium); line-height: 1.2; } .vertice-chrome .vbb-badge--secondary { background: var(--secondary); color: var(--secondary-foreground); } .vertice-chrome .vbb-badge--outline { border-color: var(--border); color: var(--foreground); } .vertice-chrome .vbb-badge--success { background: var(--light-green); color: var(--dark-purple); } .vertice-chrome .vbb-badge--warning { background: var(--warning); color: var(--warning-foreground); } .vertice-chrome .vbb-badge--info { background: var(--info); color: #ffffff; } .vertice-chrome .vbb-badge--destructive { background: var(--destructive); color: #ffffff; } /* ---- Card ---- */ .vertice-chrome .vbb-card { display: flex; flex-direction: column; gap: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--border); padding: var(--space-6) 0; color: var(--card-foreground); background: var(--card); box-shadow: var(--shadow-sm); } .vertice-chrome .vbb-card--glass { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---- Separator ---- */ .vertice-chrome .vbb-separator { flex-shrink: 0; background: var(--border); } .vertice-chrome .vbb-separator[data-orientation="horizontal"] { height: 1px; width: 100%; } /* ---- Progress ---- */ .vertice-chrome .vbb-progress { position: relative; width: 100%; height: 0.5rem; overflow: hidden; border-radius: var(--radius-full); background: var(--muted); } .vertice-chrome .vbb-progress-bar { height: 100%; border-radius: var(--radius-full); /* Termina no neon: a barra mostra o progresso e a cor da marca no fim dele. */ background: linear-gradient(90deg, var(--primary), var(--neon)); transition: width 0.3s ease; } /* ========================================================================== 4. HOME (vh-*) ========================================================================== */ /* ---- Header fixo em pílula ---- */ .vh-header { position: fixed; top: 12px; left: 0; right: 0; z-index: 40; } /* Compensa a barra de admin do WP para não cobrir o header */ .admin-bar .vh-header { top: 46px; } .vh-header-inner { width: 90%; max-width: 1224px; margin: 0 auto; padding: 8px 8px 8px 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.1); background: color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); } .vh-nav-links { display: flex; align-items: center; gap: 32px; font-size: var(--text-sm); color: var(--muted-foreground); } .vh-link { color: var(--muted-foreground); transition: color 0.15s ease; } .vh-link:hover { color: var(--foreground) !important; } .vh-link[aria-current="page"] { color: var(--foreground); font-weight: var(--font-medium); position: relative; } /* Traço neon sob o item aberto — no header, não no rodapé, onde os mesmos links aparecem em lista. */ .vh-nav-links .vh-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--neon); box-shadow: 0 0 10px var(--neon-soft); } /* ---- Dropdown de Hubs ---- */ .vh-dropdown { position: relative; } .vh-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 16px; min-width: 250px; padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 50; } .vh-dropdown:hover .vh-dropdown-menu, .vh-dropdown:focus-within .vh-dropdown-menu { opacity: 1; visibility: visible; } .vh-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--muted-foreground); } .vh-dropdown-item .vh-icon { color: var(--muted-foreground); transition: color 0.15s ease; } .vh-dropdown-item:hover { background: var(--secondary); color: var(--foreground) !important; } .vh-dropdown-item:hover .vh-icon { color: var(--neon); } .vh-header-cta { display: flex; align-items: center; gap: 14px; } .vh-header-cta .vbb-btn { border-radius: var(--radius-xl) !important; } /* ---- Seletor de idioma ---- */ .vh-lang { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--foreground) 6%, transparent); } .vh-lang button { border: none; padding: 3px; cursor: pointer; width: 26px; height: 26px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0.45; transition: all 0.15s ease; } .vh-lang button[aria-pressed="true"] { background: var(--card); opacity: 1; } .vh-lang img { width: 20px; height: 20px; border-radius: 50%; display: block; } /* ---- Menu mobile ---- */ .vh-menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer; } .vh-menu { position: fixed; inset: 0; z-index: 60; display: none; background: color-mix(in srgb, var(--background) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px; overflow-y: auto; } .vh-menu[data-open="true"] { display: block; } .vh-menu-panel { max-width: 520px; margin: 0 auto; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px; } .vh-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 16px; } .vh-menu a { display: block; padding: 12px; border-radius: var(--radius-md); color: var(--foreground); font-size: var(--text-base); } .vh-menu a:hover { background: var(--secondary); } .vh-menu-sub a { padding-left: 28px; font-size: var(--text-sm); color: var(--muted-foreground); } .vh-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); } .vh-menu-actions .vbb-btn { height: 44px; width: 100%; } /* ---- Hero ---- */ .vh-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; } /* Grade de fundo + halo verde que segue o cursor */ .vh-hero-grid-bg, .vh-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: 44px 44px; } .vh-hero-grid-bg { background-image: linear-gradient(color-mix(in srgb, var(--foreground) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--foreground) 4%, transparent) 1px, transparent 1px); } .vh-hero-glow { background-image: linear-gradient(var(--light-green) 1px, transparent 1px), linear-gradient(90deg, var(--light-green) 1px, transparent 1px); opacity: 0.22; --vh-glow-x: 75%; --vh-glow-y: 20%; -webkit-mask-image: radial-gradient(circle 260px at var(--vh-glow-x) var(--vh-glow-y), black, transparent 70%); mask-image: radial-gradient(circle 260px at var(--vh-glow-x) var(--vh-glow-y), black, transparent 70%); } .vh-hero-inner { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; } .vh-hero-pad { padding: 200px 24px 140px; } .vh-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } /* Sem isto, o min-content do mockup (que tem linhas em nowrap) estoura a track do grid e alarga a página inteira. */ .vh-hero-grid > *, .vh-dash > * { min-width: 0; } .vh-dash-nowrap { white-space: nowrap; } .vh-hero-title { font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 20px; max-width: 560px; text-wrap: balance; } /* Destaques dentro dos títulos. Classes (e não style inline) porque o seletor de idioma reescreve esses títulos via innerHTML. */ .vertice-chrome .vh-em-green { font-style: normal; color: var(--light-green); } .vertice-chrome .vh-em-muted { font-style: normal; color: var(--muted-foreground); } .vh-kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); } /* * Ponto neon antes do rótulo: o mesmo sinal em todas as seções do site. * * Pseudo-elemento (e não markup) porque o seletor de idioma reescreve o texto * desses rótulos — o ponto não pode viver dentro do conteúdo. */ .vh-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; vertical-align: middle; background: var(--neon); box-shadow: 0 0 10px var(--neon-soft); } /* Variante viva, para o rótulo que abre uma página. */ .vh-kicker--neon::before { animation: vh-neon-pulse 2.8s ease-in-out infinite; } .vh-cta-primary .vbb-btn, .vh-cta-secondary .vbb-btn { height: 48px; padding: 0 24px; font-size: var(--text-md); } .vh-cta-primary .vbb-btn { font-weight: var(--font-semibold); } .vh-cta-secondary .vbb-btn { font-weight: var(--font-medium); border-width: 1.5px; border-color: color-mix(in srgb, var(--foreground) 30%, transparent); } /* ---- Chips flutuantes do mockup ---- */ .vh-float { transition: top 2.2s cubic-bezier(0.65, 0, 0.35, 1), right 2.2s cubic-bezier(0.65, 0, 0.35, 1), left 2.2s cubic-bezier(0.65, 0, 0.35, 1), bottom 2.2s cubic-bezier(0.65, 0, 0.35, 1); } .vh-float-content { animation: vh-chip-in 0.45s ease; min-height: 40px; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 18px; } .vh-float-content > div > div { white-space: nowrap; } /* ---- Marca d'água da seção "Por que a Vibbe" ---- */ .vh-hero-mark svg { position: absolute !important; top: 88px !important; right: 40px !important; height: 130px !important; width: auto !important; color: var(--ultra-violet) !important; opacity: 0.08 !important; } /* ---- Grids das seções ---- */ .vh-stats-grid, .vh-props-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .vh-stats-grid { max-width: 1200px; margin: 0 auto; padding: 24px; gap: 24px; } .vh-props-grid { gap: 40px; } .vh-story { display: grid; grid-template-columns: 1.1fr 0.9fr; } .vh-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } /* ---- Carrossel de benefícios ---- */ .vh-benefits { position: relative; } .vh-benefits-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; scroll-padding-left: 4px; scrollbar-width: none; } .vh-benefits-grid::-webkit-scrollbar { display: none; } .vh-benefit-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; flex: 0 0 320px; min-height: 460px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; transition: border-color 0.15s ease, transform 0.15s ease; } .vh-benefit-card:hover { border-color: var(--light-green); transform: translateY(-2px); } .vh-benefit-card:hover h3 { color: var(--light-green); } .vh-benefit-card h3 { transition: color 0.15s ease; } .vh-benefit-head { min-height: 128px; } .vh-benefit-panel { height: 260px; background: var(--secondary); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 18px; display: flex; flex-direction: column; } .vh-benefit-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); } .vh-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--foreground); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: background 0.15s ease, opacity 0.15s ease; } .vh-carousel-btn:hover { background: var(--secondary); } .vh-carousel-btn[disabled] { opacity: 0.35; cursor: default; } .vh-carousel-prev { left: -18px; } .vh-carousel-next { right: -18px; } .vh-bento-bar { transform-origin: bottom; } /* ---- Rodapé ---- */ .vh-social { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--foreground); transition: all 0.15s ease; } .vh-social:hover { background: var(--light-green) !important; color: var(--dark-purple) !important; border-color: var(--light-green) !important; } /* ========================================================================== 5. PÁGINAS INTERNAS (Hubs / Serviços, Quem Somos, Contato) ========================================================================== */ /* ---- Hero das páginas internas ---- */ .vh-page-hero { position: relative; overflow: hidden; padding: 168px 24px 72px; } /* Halo roxo no canto superior direito */ .vh-hero-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse at 75% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 55% ); } /* * Dissolve a grade no fundo da seção. * * --vh-fade-to permite que uma página com fundo próprio (Materiais) dissolva * na cor dela em vez da cor de fundo do design. */ .vh-hero-fade { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 55%, var(--vh-fade-to, var(--background)) 100%); } /* * Topo com a malha numa página de layout próprio: recria o respiro que o * padding do body dava, agora dentro da própria seção, e recorta as camadas. */ .vh-mesh-top { position: relative; overflow: hidden; padding-top: 152px; } @media (max-width: 900px) { .vh-mesh-top { padding-top: 120px; } } .vh-page-hero-inner { position: relative; z-index: 1; margin: 0 auto; } .vh-page-title { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 20px; text-wrap: balance; } .vh-section { max-width: 1100px; margin: 0 auto; padding: 0 24px 96px; } /* ---- Contato ---- */ .vh-contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; max-width: 1080px; } .vh-contact-item { display: flex; align-items: center; gap: 12px; } .vh-contact-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--secondary); display: flex; align-items: center; justify-content: center; color: var(--light-green); } /* * Contact Form 7. * * O conteúdo do formulário vive no banco (com utilitários do Tailwind herdados * do layout antigo), então as regras aqui usam !important para vencer aquelas * classes sem precisar reescrever o formulário no admin. */ /* * Card do formulário — mesmo vidro do card de contato. * * Em Materiais a caixa vem com bg-[#4c407b] / bg-[#27213f] do Tailwind (0,1,0); * o seletor aqui (0,2,0) vence sem precisar editar o template. * Não se aplica onde o card já é .vbb-card--glass (a página de Contato). */ .vertice-chrome .vh-form:not(.vbb-card) { border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* * Rótulo de campo. * * Prefixado com .vertice-chrome para vencer a regra equivalente do app.css * (`.materiais-template .materiais-form .wpcf7-form label`), que também é * !important e pinta o rótulo de verde e negrito. * * O :not() exclui os rótulos de cada opção de checkbox/radio — ali o