/* ========================================================= NORMA — Cookie consent banner New small component, its own file rather than a section inside enhancements.css: enhancements.css was created specifically to keep styles.css under the project's line-count guidance, and this component is substantial enough (banner, disclosure panel, three category rows, save action) to warrant the same treatment checkout.css/portal.css/ auth.css already get for their own page areas — a dedicated file kept out of the shared stylesheets, loaded only on pages that load js/cookie-consent.js. Reuses only tokens already declared in css/styles.css :root — no new colors, fonts, radii, spacing values or z-index tokens are introduced. See js/cookie-consent.js for the markup this styles and for the dependency this component has on cookies.html being updated before this is wired into any page. RETOKENED 25/09/2026 (PUBLIC-A). Every `--color-*`/`--space-*`/ `--radius-card` name below is now a Design System token (design-system/claude-design/tokens.css): `--surface`/`--ink`/ `--ink-muted`/`--line`/`--control-edge` for colour, `--space-N` (the 4px scale) for spacing, `--radius-lg` for the card radius (DS: "radius-lg (14) for cards, menus and alerts"). Both theme correctly, since these are tokens.css's own `[data-theme="dark"]` values, not the legacy remap chain. No value, only the name, changed: `--color-white`→`--surface`, `--color-hairline`→`--line`, `--color-control-edge`→`--control-edge`, `--color-onyx`→`--ink`, `--color-onyx-soft`→`--ink-muted`, `--space-xs`(5px)→`--space-4`, `--space-sm`(8px)→`--space-8`, `--space-md`(10px)→`--space-12`, `--space-base`(15px)→`--space-16`, `--space-lg`(20px)→`--space-20`, `--radius-card`(8px)→`--radius-lg`(14px, the DS card radius). Font sizes are left as literal px/rem: the DS type scale (README "Type") has no token for this component's sizes, only composed classes (.n-lead, .n-twotone…) that don't fit a checkbox list. ========================================================= */ /* --------------------------------------------------------- Container — fixed, bottom-centered, inset from the viewport edge on every side rather than edge-to-edge. z-index: 90 is a raw literal (the project has not yet built the --z-* custom property layer norma_DESIGN.md §6 documents — every shipped z-index today, e.g. .back-to-top at 40 and .site-header at 50, is a literal for the same reason) matching the value §6 reserves for --z-toast: "a transient notification stacked above everything but the skip link" (100), which is exactly this component's role. KNOWN INTERACTION, left for the wiring wave: .back-to-top (css/enhancements.css) is fixed at right/bottom: 20px, 48px disc, z-index: 40. While this banner is visible it paints above that disc (90 > 40) at viewport widths narrow enough that the two overlap. This is not fixed here — doing so from this file would mean reaching into another component's geometry to solve a problem that only exists while a decision is pending, and it resolves itself the moment the visitor decides (the banner unmounts from view). If it turns out to matter in practice once this is live, the fix belongs in back-to-top's own positioning, not here. --------------------------------------------------------- */ .cookie-consent { position: fixed; left: var(--space-20); right: var(--space-20); bottom: var(--space-20); z-index: 90; max-width: 640px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-16); } /* Confirmation-class entrance (norma_DESIGN.md §7): opacity + transform only, 200ms ease, same band and same two properties as .form-status/ .field-error/.delete-confirm/#challengeField in styles.css. `hidden` stays the mechanism the region's visibility (and screen readers) actually follow; `.is-shown` is additive and only what animates the settle-in, exactly as js/cookie-consent.js's show()/hide() pair expects. */ .cookie-consent { opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .cookie-consent.is-shown { opacity: 1; transform: none; } /* ATTENTION — same rule as styles.css's block for the four elements named above, and for the same reason: a reduced-motion block that only killed the transition would leave this banner parked at opacity: 0 forever for anyone with reduce-motion on, which means nobody using that setting could ever see or dismiss the cookie banner at all. This sets the visible end state explicitly (opacity: 1; transform: none), exactly as norma_DESIGN.md §7 requires — `hidden` still governs whether it is in the accessibility tree at all. */ @media (prefers-reduced-motion: reduce) { .cookie-consent { transition: none; } .cookie-consent.is-shown { opacity: 1; transform: none; } } .cookie-consent__text { font-size: 0.9375rem; line-height: 1.6; } .cookie-consent__text a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------- Categories panel — REDESIGNED 2026-09-03 (OWNER_TASKS.md item 9). Used to live inside a
/ that this file styled to look like the site's disclosure widgets (.faq-item's border/marker anatomy). "Personalizar" is now a real button in .cookie-consent__actions (js/cookie-consent.js toggles this panel's `hidden` directly), so this div needs its own contained-panel treatment instead of inheriting one from a
wrapper that no longer exists. Border still takes --color-control-edge, not --color-hairline, for the same WCAG 1.4.11 reason the old .cookie-consent__details did -- it is still the boundary of an interactive control (three checkboxes), not decoration. */ .cookie-consent__categories { border: 1px solid var(--control-edge); border-radius: var(--radius-lg); padding: var(--space-16); margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); } .cookie-consent__category { display: flex; align-items: flex-start; gap: var(--space-8); cursor: pointer; } /* The essential row's is `disabled`, which drops it out of the default cursor: pointer affordance visually as well — matches how a disabled .btn already reads on this site (opacity, no pointer feel). */ .cookie-consent__category:has(input:disabled) { cursor: default; } .cookie-consent__category input { /* 20px, not the browser default ~13px: this is the one native form control on the site with no surrounding .field/label geometry to anchor a touch target, so the box itself has to clear a reasonable tap size alongside its label text (the label wraps the input, so the full row -- not just the 20px box -- is the actual 44px+ target). */ width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink); } .cookie-consent__category small { display: block; color: var(--ink-muted); font-size: 0.8125rem; line-height: 1.5; margin-top: var(--space-4); } /* The save confirmation itself is announced through the sr-only live region js/cookie-consent.js appends to (a sibling of this whole banner, not a child of it — see that file's ensureAnnounceEl()), not through anything visible in this row: the banner closing immediately after any of the three actions is the sighted-user confirmation. */ .cookie-consent__save-row { margin-top: var(--space-20); } /* Three equal-weight buttons — Personalizar, Rejeitar, Aceitar, all btn-secondary (OWNER_TASKS.md item 9): none is btn-primary-filled, and flex: 1 on each makes "equal weight" a width fact, not just a shared class. This is the LGPD "reject as easy as accept" principle the old two-button row already applied, extended to all three actions since Personalizar is now a button beside them, not a disclosure above them. */ .cookie-consent__actions { display: flex; gap: var(--space-8); } .cookie-consent__actions .btn { flex: 1; text-align: center; } /* --------------------------------------------------------- BARRA FINA NO RODAPÉ, TELAS ESTREITAS — substituiu a "compactação" abaixo (OWNER_TASKS.md item 9, 2026-09-03). O QUE HAVIA: a "compactação" só cortava padding e conseguia 24px. O próprio comentário dizia por quê -- o parágrafo (5 linhas) e o acordeão "Personalizar" (~90px) eram os dois blocos grandes, e nenhum dos dois era encolhável só com CSS sem reescrever a apresentação inteira. Essa reescrita é esta secção. O QUE MUDOU DE VERDADE: 1. Copy cortada para uma frase de cada categoria -- 2 linhas a 375px, contra as 5 de antes. A explicação longa continua em /cookies, atrás do link "Saiba mais" que já existia. 2. "Personalizar" saiu do acordeão e virou o terceiro botão da fila -- o painel de categorias só existe no DOM aberto quando alguém toca nele (button + hidden, não
/ -- ver js/cookie-consent.js), então ele não ocupa altura nenhuma no estado padrão. 3. O cartão virou uma barra: encostada às três arestas (sem os insets de --space-lg dos outros breakpoints), cantos só no topo. RESULTADO MEDIDO a 375x812 (script Playwright, não estimativa): altura da barra (estado padrão, painel fechado) -> 95px (orçamento: <=96px) H1 inteiro -> visível, zero sobreposição .hero-sub ("Gestão de redes sociais...") -> visível, zero sobreposição NÃO RESOLVIDO, E DITO AQUI EM VEZ DE OMITIDO: o CTA "Falar no WhatsApp" NÃO fica inteiramente visível. Não é esta barra que falha -- é geometria que nem uma barra de altura zero resolveria: a 375x812, COM a barra escondida por completo, o CTA já termina em y=820.7, 8.7px ABAIXO do fundo da janela (812px). O H1 ficou mais alto neste mesmo commit-set (OWNER_TASKS.md item 1, "de Brasília para o Brasil" acrescentado), e é isso, não o desenho da barra, que empurrou o CTA para lá da dobra. Com a barra no ar (95px, começa em y=716.9), o CTA (764.7 a 820.7) fica inteiro dentro da faixa da barra -- cobrindo o que sobrava visível, não criando o problema. Ver OWNER_TASKS.md item 9 para os números completos e as opções reais (nenhuma cabe só em CSS). */ @media (max-width: 480px) { .cookie-consent { left: 0; right: 0; bottom: 0; max-width: none; margin-inline: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; padding: var(--space-4) var(--space-16); gap: var(--space-4); } .cookie-consent__text { font-size: 0.8125rem; line-height: 1.35; } .cookie-consent__actions .btn { padding-block: var(--space-4); } .cookie-consent__save-row { margin-top: var(--space-16); } } /* --------------------------------------------------------- Footer control — a