/* * Padaria Giulia — cookie consent visual overrides + FAB-collision rules. * * The plugin renders its own DOM (#cc-main and .cm) under . We * keep the plugin's structure intact and only override colors / sizing * so the Accept button does NOT visually dominate the Reject button * (LGPD/ANPD equal-prominence requirement). */ /* Bakery palette pinned to the plugin's CSS variables. The hex values mirror the @theme tokens in app.css — we duplicate here because the plugin reads its own custom-property names. */ #cc-main { --cc-btn-primary-bg: var(--color-primary, #C62828); --cc-btn-primary-hover-bg: var(--color-primary-hover, #A91E1E); --cc-btn-secondary-bg: transparent; --cc-btn-secondary-border-color: var(--color-primary, #C62828); --cc-btn-secondary-color: var(--color-primary, #C62828); --cc-bg: var(--color-surface, #FFFFFF); --cc-primary-color: var(--color-text-main, #2D2422); --cc-secondary-color: var(--color-text-muted, #8D7B77); } /* Equal-prominence + site-standard sizing. Applies to all viewports. font-size/padding match app.css btn-primary so consent buttons have the same height as every other button on the site. Uses min-height (not fixed height) so longer labels in the preferences modal can wrap to two lines without being clipped. */ #cc-main .pm__btn, #cc-main .cm__btn { border: 2px solid var(--color-primary, #C62828) !important; background: var(--color-surface, #FFFFFF) !important; color: var(--color-text-main, #2D2422) !important; font-weight: 700 !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 0.75rem 1.5rem !important; line-height: 1.25rem !important; min-height: 3rem !important; height: auto !important; text-align: center !important; box-sizing: border-box !important; margin: 0 !important; } /* Preferences modal has 3 buttons in one row with longer Portuguese labels ("Recusar não essenciais", "Salvar preferências"). Tighten horizontal padding, font-size and letter-spacing so each label fits on a single line at typical modal widths. */ #cc-main .pm__btn { padding: 0.625rem 0.75rem !important; font-size: 0.75rem !important; letter-spacing: 0.025em !important; } /* Plugin renders the 3 preferences buttons in two .pm__btn-group children of .pm__footer, with justify-content:space-between — that pushes "Salvar preferências" to the far edge, leaving a large empty gap. Distribute the three buttons evenly across the footer instead. */ #cc-main .pm__footer { justify-content: space-evenly !important; gap: 0.5rem !important; } #cc-main .pm__footer .pm__btn-group + .pm__btn-group { margin-left: 0 !important; margin-right: 0 !important; } #cc-main .pm__footer .pm__btn-group { gap: 0.5rem !important; } #cc-main .pm__btn:hover, #cc-main .cm__btn:hover { background: var(--color-primary, #C62828); color: #FFFFFF; } /* Gap between Aceitar and Recusar: margin-left on the second button is more reliable than gap because it doesn't depend on the container's display model (grid vs flex). Our "margin: 0 !important" on .cm__btn kills the library's built-in margin-left:.375rem, so we restore it here with a larger value. Applied on all viewports since the buttons are always in a row inside their group (grid-auto-flow:column on desktop, flex-row on mobile). */ #cc-main .cm .cm__btn-group .cm__btn + .cm__btn { margin-left: 0.75rem !important; } /* Mobile button layout: Aceitar + Recusar side-by-side, Personalizar below. The plugin puts Aceitar and Recusar as siblings inside a SINGLE .cm__btn-group (nth-child 1), and Personalizar in its own group (nth-child 2). The library's mobile CSS stacks buttons column; we override only the first group to be row so they sit side-by-side. */ @media (max-width: 640px) { #cc-main .cm--bar .cm__btn-group:nth-child(1) { flex-direction: row !important; margin-bottom: 0 !important; } /* Library adds margin-top:.375rem to a button that follows another button (.cm__btn+.cm__btn). In a row flex that shifts the second button down. Override here where specificity is higher than the library's rule. */ #cc-main .cm--bar .cm__btn-group:nth-child(1) .cm__btn+.cm__btn { margin-top: 0 !important; } } /* iOS safe-area: keep the banner above the home-indicator strip. */ .cm { padding-bottom: max(env(safe-area-inset-bottom), 12px); } /* Visually hide the consent modal title — it exists only to give the dialog an accessible name (aria-labelledby); the visible content is the description text. Mirrors Tailwind's `sr-only` utility. */ #cc-main .cm__title { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* * FAB-collision rule. While the consent banner OR preferences modal is * visible, the WhatsApp FAB slides up so the banner doesn't occlude it. The * Stimulus controller toggles body.consent-visible based on the plugin's * onModalShow/onModalHide callbacks. * * Default (no body class): the FAB sits at the project's standard * bottom-20 / md:bottom-24 offset, unchanged. * * NOTE: the back-to-top button is NOT coordinated here. Since d4db9e6 it is * a `sticky bottom-0` element inside

(not `position: fixed`), so the * old fixed-offset push no longer applies. On a first visit it can sit behind * the consent bar after scrolling — a minor, transient cosmetic edge case. */ body.consent-visible .whatsapp-fab { bottom: calc(20px + 240px); } @media (min-width: 768px) { body.consent-visible .whatsapp-fab { bottom: calc(24px + 200px); } }