/* * WPVS — Kadence Theme Compatibility * kadence-compat.css v1.0.0 * * CSS scoped corrections for when WPVS runs inside Kadence's header. * Loaded only when the Kadence theme is active. * * These rules override ONLY what's strictly necessary to: * 1. Prevent Kadence header CSS from breaking WPVS layout * 2. Ensure the modal renders above Kadence's sticky header * 3. Keep the trigger bar sized correctly inside header rows */ /* ── Header row context ───────────────────────────────────────────────────── */ /* Kadence wraps each header element in .header-desktop-items */ /* and each column in .header-column. We reset flex behaviour here. */ .header-desktop-items .wpvs, .kadence-column > .wpvs, .site-header .wpvs { display : flex; align-items : center; width : auto; /* don't stretch to full column width */ } /* ── Trigger bar — header sizing ──────────────────────────────────────────── */ /* Inside the header the bar should not grow beyond a comfortable width */ .site-header .wpvs-bar { max-width : 320px; min-width : 160px; /* Prevent Kadence's button reset from breaking our pill shape */ border : 1.5px solid var(--wpvs-bar-border, #223829); line-height: 1; } /* Kadence sometimes sets button font-size globally */ .site-header .wpvs-bar, .site-header .wpvs-bar__placeholder { font-size : 14px; } /* ── Z-index above sticky header ──────────────────────────────────────────── */ /* * Kadence's sticky header has z-index around 100-150. * Our modal is fixed with z-index 999999 (set in .wpvs custom property). * This rule ensures the fixed modal starts at the very top of the viewport, * even when the sticky header is present. */ .wpvs-modal { top : 0; /* always align to viewport top, not header bottom */ } /* * When Kadence header is transparent (hero sections), the modal backdrop * must still be fully opaque to avoid content bleed-through. */ .wpvs-modal:not([hidden]) { background-color : var(--wpvs-modal-bg, #ffffff); } /* ── Kadence "Transparent Header" mode ───────────────────────────────────── */ /* * When .transparent-header is on , Kadence overlays the header on top * of the hero image with position:absolute. Our trigger bar needs to be * visible against a potentially dark background. */ body.transparent-header .site-header .wpvs-bar { background : rgba(255, 255, 255, 0.18); border-color : rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.transparent-header .site-header .wpvs-bar__placeholder, body.transparent-header .site-header .wpvs-bar__icon { color : rgba(255, 255, 255, 0.88); } body.transparent-header .site-header .wpvs-bar:hover, body.transparent-header .site-header .wpvs-bar:focus-visible { background : rgba(255, 255, 255, 0.32); border-color : rgba(255, 255, 255, 0.9); } /* ── Kadence mobile header ────────────────────────────────────────────────── */ /* On mobile Kadence collapses the desktop header. Hide our trigger if Kadence hides the desktop header row. */ @media (max-width: 1024px) { .hide-on-mobile > .wpvs { display : none; } } /* * ── Mobile icon-only trigger — Kadence context ───────────────────────────── * * Dentro do header do Kadence o .wpvs-bar herda min-width:160px do seletor * .site-header .wpvs-bar declarado acima. No mobile esse valor impede o * colapso circular, por isso sobrescrevemos explicitamente. * * Também garantimos que o wrapper .wpvs não tente esticar ao ocupar a coluna * inteira do header no modo mobile. */ @media (max-width: 768px) { .site-header .wpvs-bar { width : 44px; height : 44px; min-width : 0; max-width : none; padding : 0; } /* Impede que o flex-container da coluna estique o botão */ .header-desktop-items .wpvs, .kadence-column > .wpvs, .site-header .wpvs { width : auto; flex : 0 0 auto; } /* Garante visibilidade do ícone sobre header transparente no mobile */ body.transparent-header .site-header .wpvs-bar { background : rgba(255, 255, 255, 0.22); border-color : rgba(255, 255, 255, 0.55); border-radius : 50%; } } /* ── Prevent Kadence