/* * Temas do site por produto (docs/ADR-011). * * O tema ATUAL do site (creme + vinho, claro/escuro conforme o sistema — os tokens de * :root em site.css) é o da Rosa 3D: sem atributo nenhum no . Cada um dos outros * produtos troca os mesmos tokens por uma paleta fixa, a MESMA do cartão que a pessoa * recebe (gift.css, .theme-*), e o site inteiro — cabeçalho, seções, formulário, * rodapé — passa a usá-la sem nenhuma regra por componente. * * Quem liga: , posto pelo baralho * (product-deck.js) ao escolher um produto e, nas demais páginas, pelo servidor ou pelo * último produto escolhido (partials/theme-head.php). * * Contrastes conferidos (WCAG, nos dois extremos de cada degradê): texto e texto * secundário ≥ 4,5:1 sobre o fundo e sobre --surface; texto do botão sobre --accent ≥ 4,5:1. * --surface é SÓLIDO de propósito: o baralho empilha cards, e uma superfície translúcida * deixaria o card de trás aparecer por baixo do da frente. * * `html:root[...]` (especificidade 0,2,1) vence o `:root:not([data-theme="light"])` do modo * escuro do sistema em site.css: estas paletas são fixas, não seguem o claro/escuro do SO. */ /* Aniversário — coral e rosa, texto vinho escuro. */ html:root[data-product="aniversario"] { color-scheme: light; --is-dark: 0; --page-bg: linear-gradient(170deg, #ff9a8b 0%, #ff6a88 100%); --bg: #ff828a; --bg-alt: #ffb3b3; --surface: #ffc7ca; --fg: #3a0d18; --muted: rgb(58 13 24 / 0.88); --accent: #3a0d18; --accent-dark: #260810; --accent-fg: #ffffff; } /* Natal — verde profundo, com brilho de menta no topo e dourado de destaque. */ html:root[data-product="natal"] { color-scheme: dark; --is-dark: 1; --page-bg: radial-gradient(90% 45% at 50% 0%, rgb(153 242 200 / 0.20), transparent 70%), #1f4037; --bg: #1f4037; --bg-alt: #244a40; --surface: #2c4b43; --fg: #ffffff; --muted: rgb(255 255 255 / 0.86); --accent: #ffe08a; --accent-dark: #ecc86a; --accent-fg: #1f4037; } /* Dia das Mães — rosa e creme pastéis, texto ameixa. */ html:root[data-product="maes"] { color-scheme: light; --is-dark: 0; --page-bg: linear-gradient(160deg, #f6d5f7 0%, #fbe9d7 100%); --bg: #f8dfe7; --bg-alt: #f3d3ec; --surface: #fdf3f6; --fg: #5a3450; --muted: rgb(90 52 80 / 0.80); --accent: #5a3450; --accent-dark: #43253b; --accent-fg: #ffffff; } /* Pedido de Desculpas — azul e roxo, texto branco (o degradê ganha uma camada escura por cima para o texto secundário passar do 4,5:1 na ponta mais clara). */ html:root[data-product="desculpas"] { color-scheme: dark; --is-dark: 1; --page-bg: linear-gradient(rgb(20 10 55 / 0.38), rgb(20 10 55 / 0.38)), linear-gradient(160deg, #667eea 0%, #764ba2 100%); --bg: #4c4290; --bg-alt: #554b99; --surface: #5e559b; --fg: #ffffff; --muted: rgb(255 255 255 / 0.92); --accent: #ffffff; --accent-dark: #e6e3ff; --accent-fg: #4a2f7d; }