/* ============================================================================ Temporadas — uma campanha por mês (data-skin no ). Duas coisas vivem aqui: 1. **A cor de cada temporada**, no claro e no escuro. A temporada ganha do acento escolhido porque vem depois dele na cascata (o app.css declara os [data-accent] e este arquivo é carregado em seguida). O bloco escuro tem seletor mais específico ([data-theme][data-skin]), então vence os dois. O tom "ink" é a versão que carrega texto: escurecida até passar de 4.5:1 em fundo branco. Ele não muda no escuro — lá o texto usa o acento puro (--accent-strong), e o ink sobra para preencher botão com letra branca. 2. **O véu da barra lateral**, logo abaixo das cores: um degradê discreto na cor da temporada, que desce da marca e volta a aparecer de leve no pé da coluna. Uma regra só serve as doze campanhas, porque ela lê o acento já resolvido. 3. **O enfeite de cada temporada.** O desenho é declarado uma única vez, em .season-art-, e essa mesma classe serve os dois lugares que o mostram: a camada de fundo da página (.season-decor, que o app.js reetiqueta ao trocar de temporada) e a amostra do seletor no perfil. Os SVG entram como MÁSCARA, não como imagem: quem pinta é o acento da temporada, então o desenho acompanha o tema claro/escuro sem segunda via. As cores estão espelhadas em app/seasons.py (que alimenta o seletor) e o tests/test_seasons.py compara as duas listas para elas nunca se separarem. "nenhuma" não tem COR aqui de propósito: sem campanha, quem manda é o acento escolhido. Enfeite ela tem — a seta da marca, no fim do arquivo. ========================================================================== */ /* ---------- Janeiro · Ano Novo ---------- */ :root[data-skin="ano-novo"] { --personal-accent: #c99a2e; --personal-accent-rgb: 201,154,46; --personal-accent-ink: #8d6514; } :root[data-theme="dark"][data-skin="ano-novo"] { --personal-accent: #f2c94c; --personal-accent-rgb: 242,201,76; } /* ---------- Fevereiro · Carnaval ---------- */ :root[data-skin="carnaval"] { --personal-accent: #7c3aed; --personal-accent-rgb: 124,58,237; --personal-accent-ink: #6d28d9; } :root[data-theme="dark"][data-skin="carnaval"] { --personal-accent: #a78bfa; --personal-accent-rgb: 167,139,250; } /* ---------- Março · Dia Internacional da Mulher ---------- */ :root[data-skin="dia-da-mulher"] { --personal-accent: #c026d3; --personal-accent-rgb: 192,38,211; --personal-accent-ink: #a21caf; } :root[data-theme="dark"][data-skin="dia-da-mulher"] { --personal-accent: #e879f9; --personal-accent-rgb: 232,121,249; } /* ---------- Abril · Dia da Terra ---------- */ :root[data-skin="dia-da-terra"] { --personal-accent: #16a34a; --personal-accent-rgb: 22,163,74; --personal-accent-ink: #15803d; } :root[data-theme="dark"][data-skin="dia-da-terra"] { --personal-accent: #4ade80; --personal-accent-rgb: 74,222,128; } /* ---------- Maio · Dia das Mães ---------- */ :root[data-skin="dia-das-maes"] { --personal-accent: #db5a7a; --personal-accent-rgb: 219,90,122; --personal-accent-ink: #be3a61; } :root[data-theme="dark"][data-skin="dia-das-maes"] { --personal-accent: #fb7185; --personal-accent-rgb: 251,113,133; } /* ---------- Junho · Junho Vermelho (doação de sangue) ---------- */ :root[data-skin="junho-vermelho"] { --personal-accent: #c62828; --personal-accent-rgb: 198,40,40; --personal-accent-ink: #b31f1f; } :root[data-theme="dark"][data-skin="junho-vermelho"] { --personal-accent: #f87171; --personal-accent-rgb: 248,113,113; } /* ---------- Julho · Festa Julina ---------- */ :root[data-skin="festa-julina"] { --personal-accent: #d97706; --personal-accent-rgb: 217,119,6; --personal-accent-ink: #9a5407; } :root[data-theme="dark"][data-skin="festa-julina"] { --personal-accent: #fb923c; --personal-accent-rgb: 251,146,60; } /* ---------- Agosto · Dia dos Pais ---------- O --season-veil sobe porque esta campanha é azul: ver "Véu da temporada". */ :root[data-skin="dia-dos-pais"] { --personal-accent: #2563eb; --personal-accent-rgb: 37,99,235; --personal-accent-ink: #1d4ed8; --season-veil: .19; } :root[data-theme="dark"][data-skin="dia-dos-pais"] { --personal-accent: #60a5fa; --personal-accent-rgb: 96,165,250; --season-veil: .22; } /* ---------- Setembro · Setembro Amarelo ---------- */ :root[data-skin="setembro-amarelo"] { --personal-accent: #d6a900; --personal-accent-rgb: 214,169,0; --personal-accent-ink: #8a6d00; } :root[data-theme="dark"][data-skin="setembro-amarelo"] { --personal-accent: #facc15; --personal-accent-rgb: 250,204,21; } /* ---------- Outubro · Outubro Rosa ---------- */ :root[data-skin="outubro-rosa"] { --personal-accent: #d9467d; --personal-accent-rgb: 217,70,125; --personal-accent-ink: #be2e66; } :root[data-theme="dark"][data-skin="outubro-rosa"] { --personal-accent: #f472b6; --personal-accent-rgb: 244,114,182; } /* ---------- Novembro · Novembro Azul ---------- A mais azul das doze, e a que mais precisava do véu reforçado (ver abaixo). */ :root[data-skin="novembro-azul"] { --personal-accent: #1874c9; --personal-accent-rgb: 24,116,201; --personal-accent-ink: #1868b4; --season-veil: .22; } :root[data-theme="dark"][data-skin="novembro-azul"] { --personal-accent: #38bdf8; --personal-accent-rgb: 56,189,248; --season-veil: .23; } /* ---------- Dezembro · Natal ---------- */ :root[data-skin="natal"] { --personal-accent: #166534; --personal-accent-rgb: 22,101,52; --personal-accent-ink: #145a2e; } :root[data-theme="dark"][data-skin="natal"] { --personal-accent: #4ade80; --personal-accent-rgb: 74,222,128; } /* ---------- Véu da temporada na barra lateral ---------- A campanha só se anunciava no canto da tela (a marca d'água) e ao lado da marca (o selo). A coluna da esquerda, que está em toda página, ficava fora — e é justamente a maior superfície lisa da interface. O degradê é UMA regra para as doze temporadas: quem dá a cor é o ``--personal-accent-rgb`` já resolvido pelos blocos acima. Duas camadas, as duas fracas de propósito — a ideia é a coluna parecer levemente tingida, não pintada: * a de cima desce da marca e morre antes da metade, então o miolo da navegação continua no branco/cinza do tema (é lá que se lê texto); * a de baixo é uma poça no rodapé, atrás do saldo e do menu da conta, que dá profundidade à coluna sem encostar em texto nenhum. Vai no ``::before`` e não no ``background`` da barra porque o app.css pinta a ``.sidebar`` duas vezes (uma no geral, outra só no tema claro): sobrepor a propriedade apagaria a base de um dos dois. Como camada, o véu convive com qualquer base futura. O ``z-index: -1`` funciona porque a ``.sidebar`` é contexto de empilhamento próprio (``position: fixed`` + ``z-index: 40``): a camada sobe acima do fundo dela e fica atrás do conteúdo. A animação é de ENTRADA, uma vez só — o véu escorre de cima quando a página abre e para. Nada de laço infinito aqui: além de virar poluição numa área que se olha o tempo todo, o corte de movimento do app.css (``data-motion`` e ``prefers-reduced-motion``) acelera animação infinita em vez de parar; num disparo único ele faz a coisa certa, que é mostrar o estado final na hora. **A força é um número por temporada** (``--season-veil``, declarado ao lado da cor dela lá em cima; sem declaração vale o padrão do fallback aqui). Alfa igual para todas NÃO dá visibilidade igual, e o motivo não é a luminosidade da cor: é a vizinhança. O olho compara a coluna com a página ao lado, e a página da intranet é azulada nos dois temas (``--bg: #f4f7fb`` no claro, e no escuro a própria barra é um marinho, ``--surface: #0f1622``). Medido em ΔE76 (Lab) contra essa vizinhança, com o mesmo alfa .14, as campanhas ficam entre 11 e 15 — menos as duas azuis, que caem para 10,0 (Pais) e 7,7 (Novembro Azul): azul sobre azul não registra como cor nenhuma. Elas sobem o alfa até empatar com o grupo; as outras continuam no padrão, que já estava bom. As duas frações (.32 e .64) mantêm a proporção entre as três paradas, então mexer no número da temporada não desmonta o degradê. */ :root:not([data-skin="nenhuma"]) .sidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--personal-accent-rgb), var(--season-veil, .14)) 0, rgba(var(--personal-accent-rgb), calc(var(--season-veil, .14) * .32)) 26%, rgba(var(--personal-accent-rgb), 0) 58%), radial-gradient(130% 34% at 4% 100%, rgba(var(--personal-accent-rgb), calc(var(--season-veil, .14) * .64)), transparent 74%); animation: season-side-veil .9s cubic-bezier(.22, .61, .36, 1) both; } /* No escuro o mesmo alfa desaparece: o fundo é quase preto e o acento da temporada é a versão clara dele, que rende menos contra o preto. O fallback maior vale para quem não declarou nada; quem declarou tem a linha escura própria, senão herdaria o número do tema claro. */ :root[data-theme="dark"]:not([data-skin="nenhuma"]) .sidebar::before { background: linear-gradient(180deg, rgba(var(--personal-accent-rgb), var(--season-veil, .18)) 0, rgba(var(--personal-accent-rgb), calc(var(--season-veil, .18) * .32)) 26%, rgba(var(--personal-accent-rgb), 0) 58%), radial-gradient(130% 34% at 4% 100%, rgba(var(--personal-accent-rgb), calc(var(--season-veil, .18) * .64)), transparent 74%); } @keyframes season-side-veil { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } /* ---------- Registro dos enfeites ---------- Uma linha por temporada, com os dois desenhos dela: * ``--season-ornament`` é a silhueta, usada como MÁSCARA e tingida pela cor da temporada — serve a marca d'água do fundo, que precisa acompanhar o tema claro/escuro sem segunda via do arquivo. * ``--season-badge`` é a versão em cores, usada como IMAGEM — é o ícone ao lado da marca e a estampa da amostra no seletor, onde o desenho é o assunto. Quem consome só lê a variável: acrescentar uma temporada é acrescentar uma linha aqui e dois arquivos em ``static/image/seasons/``. */ .season-art-ano-novo { --season-ornament: url("../image/seasons/ano-novo.svg"); --season-badge: url("../image/seasons/color/ano-novo.svg"); } .season-art-carnaval { --season-ornament: url("../image/seasons/carnaval.svg"); --season-badge: url("../image/seasons/color/carnaval.svg"); } .season-art-dia-da-mulher { --season-ornament: url("../image/seasons/dia-da-mulher.svg"); --season-badge: url("../image/seasons/color/dia-da-mulher.svg"); } .season-art-dia-da-terra { --season-ornament: url("../image/seasons/dia-da-terra.svg"); --season-badge: url("../image/seasons/color/dia-da-terra.svg"); } .season-art-dia-das-maes { --season-ornament: url("../image/seasons/dia-das-maes.svg"); --season-badge: url("../image/seasons/color/dia-das-maes.svg"); } .season-art-junho-vermelho { --season-ornament: url("../image/seasons/junho-vermelho.svg"); --season-badge: url("../image/seasons/color/junho-vermelho.svg"); } .season-art-festa-julina { --season-ornament: url("../image/seasons/festa-julina.svg"); --season-badge: url("../image/seasons/color/festa-julina.svg"); } .season-art-dia-dos-pais { --season-ornament: url("../image/seasons/dia-dos-pais.svg"); --season-badge: url("../image/seasons/color/dia-dos-pais.svg"); } .season-art-setembro-amarelo { --season-ornament: url("../image/seasons/setembro-amarelo.svg"); --season-badge: url("../image/seasons/color/setembro-amarelo.svg"); } .season-art-outubro-rosa { --season-ornament: url("../image/seasons/outubro-rosa.svg"); --season-badge: url("../image/seasons/color/outubro-rosa.svg"); } .season-art-novembro-azul { --season-ornament: url("../image/seasons/novembro-azul.svg"); --season-badge: url("../image/seasons/color/novembro-azul.svg"); } .season-art-natal { --season-ornament: url("../image/seasons/natal.svg"); --season-badge: url("../image/seasons/color/natal.svg"); } /* ---------- Camada de fundo da página ---------- Fica atrás de tudo (z-index negativo, como o fundo da temporada já fazia) e não intercepta clique nenhum: é decoração, não interface. O brilho lê o acento já resolvido, então serve as treze temporadas com uma regra só. */ .season-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(680px 280px at 78% -6%, rgba(var(--personal-accent-rgb), .14), transparent 70%); } /* Sem temporada não há atmosfera: o tema volta a ser só o acento escolhido. */ .season-decor.season-art-nenhuma { background: none; } .season-decor::before, .season-decor::after { content: ""; position: absolute; background: var(--personal-accent); -webkit-mask-image: var(--season-ornament, none); mask-image: var(--season-ornament, none); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .season-decor::before { top: 92px; right: 30px; width: 156px; height: 156px; opacity: .16; } /* O segundo é o mesmo desenho, menor, espelhado e mais apagado — dá ritmo à página sem pedir um segundo arquivo por temporada. */ .season-decor::after { right: 188px; bottom: 44px; width: 88px; height: 88px; opacity: .1; transform: scaleX(-1) rotate(-7deg); } /* ---------- Padrão · a seta da marca ---------- Sem campanha o enfeite é a própria seta do logotipo, a mesma que Nossa História estampa: duas, pequenas e bem apagadas. Ela é a MARCA, não a cor de quem navega — por isso entra o azul medido no Icone.ico e não var(--personal-accent), exatamente como o .history-seta faz no app.css. A máscara pinta uma cor por camada, então os dois braços do desenho original viram um gradiente de cima para baixo: o ciano cai no braço de cima e o marinho no de baixo, que é como eles se dividem na seta. Também é o que conserta um velho defeito: "nenhuma" não declarava enfeite, e `mask-image: none` não recorta nada — em vez de desenho nenhum sobravam as duas caixas inteiras pintadas de acento no canto direito. */ .season-art-nenhuma { --season-ornament: url("../image/seta.svg"); } .season-decor.season-art-nenhuma::before, .season-decor.season-art-nenhuma::after { background: linear-gradient(170deg, #06a8e6, #0156a6); } /* No escuro o marinho puro encostaria no fundo e o braço de baixo sumiria — seta com pedaço faltando. Os dois tons sobem junto, como no .history-seta. */ :root[data-theme="dark"] .season-decor.season-art-nenhuma::before, :root[data-theme="dark"] .season-decor.season-art-nenhuma::after { background: linear-gradient(170deg, #2dbdf7, #2a6fc4); } /* As duas apontam para a direita, sem girar nem espelhar: é assim que a seta aparece no logotipo, e inclinada ela vira um traço que ninguém reconhece — a graça aqui é reconhecer a marca de canto de olho. Também ficam as duas na faixa livre da direita (a .main tem max-width: 1500px e é centrada), porque um card cortando a seta ao meio lê como desenho quebrado, não como marca d'água. São menores que os enfeites das campanhas: a silhueta é cheia e pesa mais. */ .season-decor.season-art-nenhuma::before { top: 96px; right: 24px; width: 108px; height: 108px; opacity: .13; transform: none; } .season-decor.season-art-nenhuma::after { right: 46px; bottom: 56px; width: 62px; height: 62px; opacity: .1; transform: none; } @media (max-width: 900px) { /* Em tela estreita o conteúdo ocupa tudo: o enfeite não teria onde aparecer e só pesaria no download. Fica a atmosfera. */ .season-decor::before, .season-decor::after { display: none; } } /* ---------- Selo ao lado da marca ---------- A camada de fundo só aparece onde a página deixa fundo à vista — em monitor largo, nas laterais. O selo, não: fica encostado no "Raviera Intranet", que existe em toda página e em toda tela. É o enfeite em cores, no tamanho de um ícone, e é por ele que a campanha do mês se apresenta. */ .brand-season { display: none; flex: none; width: 28px; height: 28px; margin-left: -2px; background: var(--season-badge, none) center / contain no-repeat; filter: drop-shadow(0 2px 5px rgba(var(--personal-accent-rgb), .3)); } /* Sem temporada, a marca fica exatamente como era — nem espaço reservado. */ .brand-season:not(.season-art-nenhuma) { display: block; }