/* ========================================================================== Banner de consentimento de cookies (LGPD/GDPR) Visual portado do app (Components/CookieConsent/CookieConsentBanner), com a paleta do design Vértice. Como o banner aparece também nas páginas antigas (que não têm os tokens do Vértice no ), as cores são declaradas aqui no próprio escopo — nada depende de .vertice-chrome. ========================================================================== */ .vbb-cookie { --vbb-cookie-surface: #241e38; --vbb-cookie-foreground: #eceaf3; --vbb-cookie-muted: #9f96c5; --vbb-cookie-border: rgba(136, 124, 183, 0.28); --vbb-cookie-indigo: #887cb7; --vbb-cookie-violet: rgba(76, 64, 123, 0.4); --vbb-cookie-green: #94f896; --vbb-cookie-green-fg: #0b0c10; position: fixed; inset-inline: 0; bottom: 0; z-index: 999998; padding: 12px; font-family: "Geist", "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif; } .vbb-cookie[hidden] { display: none; } .vbb-cookie__panel { max-width: 896px; margin: 0 auto; overflow: hidden; border: 1px solid var(--vbb-cookie-border); border-radius: 16px; background: color-mix(in srgb, var(--vbb-cookie-surface) 96%, transparent); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6); color: var(--vbb-cookie-foreground); transform: translateY(16px); opacity: 0; transition: transform 0.32s ease, opacity 0.32s ease; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .vbb-cookie__panel { background: var(--vbb-cookie-surface); } } @supports (backdrop-filter: blur(12px)) { .vbb-cookie__panel { backdrop-filter: blur(12px); } } .vbb-cookie.is-in .vbb-cookie__panel { transform: translateY(0); opacity: 1; } /* --- Cabeçalho ------------------------------------------------------------ */ .vbb-cookie__header { display: flex; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--vbb-cookie-border); } .vbb-cookie__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--vbb-cookie-indigo); border-radius: 12px; background: var(--vbb-cookie-violet); color: var(--vbb-cookie-indigo); } .vbb-cookie__intro { min-width: 0; flex: 1 1 auto; } .vbb-cookie__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--vbb-cookie-foreground); } .vbb-cookie__desc { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--vbb-cookie-muted); } .vbb-cookie__link { font-weight: 500; color: var(--vbb-cookie-indigo); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; } .vbb-cookie__link:hover, .vbb-cookie__link:focus-visible { color: var(--vbb-cookie-green); } /* --- Preferências --------------------------------------------------------- */ .vbb-cookie__prefs { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--vbb-cookie-border); } .vbb-cookie__prefs[hidden] { display: none; } .vbb-cookie__pref { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--vbb-cookie-border); border-radius: 12px; background: rgba(255, 255, 255, 0.04); } .vbb-cookie__pref-text { min-width: 0; flex: 1 1 auto; } .vbb-cookie__pref-title { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--vbb-cookie-foreground); } .vbb-cookie__pref-note { margin: 2px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--vbb-cookie-muted); } .vbb-cookie__switch { position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background-color 0.2s ease; } .vbb-cookie__switch[aria-checked="true"] { background: var(--vbb-cookie-green); } .vbb-cookie__switch:disabled { cursor: not-allowed; opacity: 0.6; } .vbb-cookie__switch-knob { position: absolute; top: 2px; left: 2px; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .vbb-cookie__switch[aria-checked="true"] .vbb-cookie__switch-knob { transform: translateX(20px); } /* --- Ações ---------------------------------------------------------------- */ .vbb-cookie__actions { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .vbb-cookie__actions-end { display: flex; flex-direction: column; gap: 8px; } .vbb-cookie__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 16px; border-radius: 999px; font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } .vbb-cookie__btn[hidden] { display: none; } .vbb-cookie__btn:disabled { cursor: progress; opacity: 0.6; } .vbb-cookie__btn:focus-visible { outline: 2px solid var(--vbb-cookie-green); outline-offset: 2px; } .vbb-cookie__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: #d8d4e8; } .vbb-cookie__btn--ghost:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.1); } .vbb-cookie__btn--secondary { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; } .vbb-cookie__btn--secondary:hover { background: rgba(255, 255, 255, 0.15); } .vbb-cookie__btn--primary { border: 1px solid rgba(148, 248, 150, 0.5); background: var(--vbb-cookie-green); color: var(--vbb-cookie-green-fg); font-weight: 600; box-shadow: 0 10px 24px -12px rgba(148, 248, 150, 0.5); } .vbb-cookie__btn--primary:hover { filter: brightness(1.05); } /* --- Gatilho "Preferências de cookies" no rodapé -------------------------- */ .vbb-cookie-trigger { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; } .vbb-cookie-trigger:hover { opacity: 1; color: var(--light-green, #94f896); } /* --- A partir de sm ------------------------------------------------------- */ @media (min-width: 640px) { .vbb-cookie { padding: 20px; } .vbb-cookie__panel { border-radius: 20px; } .vbb-cookie__header { padding: 20px 24px; } .vbb-cookie__title { font-size: 1.125rem; } .vbb-cookie__prefs { padding: 16px 24px; } .vbb-cookie__actions { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 24px; } .vbb-cookie__actions-end { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } .vbb-cookie__btn { width: auto; } } @media (prefers-reduced-motion: reduce) { .vbb-cookie__panel { transform: none; transition: opacity 0.2s ease; } }