/* ============================================================================ Datas pessoais — a festa do aniversário e o cartão de tempo de casa. Duas coisas vivem aqui, as duas ligadas a ``app/celebrations.py``: 1. **O tema de festa** (``data-celebration="aniversario"`` no ````). Repinta o acento da intranet por um dia, só para quem faz aniversário. As regras trazem ``[data-theme]`` junto de propósito: sem isso o bloco escuro do seasons.css (``:root[data-theme="dark"][data-skin="natal"]``, três pontos de especificidade) venceria a festa no tema escuro. Este arquivo é carregado depois do seasons.css, então empatar em especificidade basta para ganhar — mas empatar é obrigatório. O tempo de casa NÃO tem tema: é o cartão e mais nada. Quem quiser mudar isso acrescenta a chave em ``THEMED_KINDS`` (celebrations.py) e um bloco de cor aqui. 2. **O cartão fixado do feed** (``.social-celebration``), desenhado pelo ``feed-social.js``. Fica aqui, e não no feed-social.css, porque cartão e tema são a mesma ideia: se a festa sair, sai um arquivo só. Os desenhos vêm de ``image/celebration/`` e entram sempre como IMAGEM, nunca como máscara — ao contrário dos enfeites das temporadas, aqui as cores são o assunto. Ver o comentário dentro dos SVG. ========================================================================== */ /* ---------- 1. O tema de festa ---------- */ :root[data-celebration="aniversario"], :root[data-theme="light"][data-celebration="aniversario"] { --personal-accent: #d6266f; --personal-accent-rgb: 214, 38, 111; /* Tom que carrega texto: 6.7:1 em fundo branco (mesma régua das temporadas). */ --personal-accent-ink: #b01a58; } :root[data-theme="dark"][data-celebration="aniversario"] { --personal-accent: #fb7bb0; --personal-accent-rgb: 251, 123, 176; } /* O selo ao lado da marca e a camada de fundo recebem a classe ``season-art-aniversario`` (ver base.html e shell.html): a festa entra pela mesma porta das temporadas, com desenho próprio. */ .season-art-aniversario { --season-badge: url("../image/celebration/balloons.svg"); } /* Atmosfera do dia: o brilho da temporada mais uma chuva de confete miúdo. Confete em gradiente, e não em arquivo, porque são pontos — não vale um segundo download nem um canvas rodando o dia inteiro. */ .season-decor.season-art-aniversario { background: radial-gradient(circle at 14% 12%, rgba(223, 53, 121, .5) 0 2.5px, transparent 3px), radial-gradient(circle at 27% 31%, rgba(239, 160, 43, .5) 0 2px, transparent 2.5px), radial-gradient(circle at 41% 9%, rgba(49, 182, 214, .45) 0 2.5px, transparent 3px), radial-gradient(circle at 63% 24%, rgba(124, 77, 219, .4) 0 2px, transparent 2.5px), radial-gradient(circle at 82% 14%, rgba(239, 160, 43, .45) 0 2.5px, transparent 3px), radial-gradient(circle at 9% 58%, rgba(49, 182, 214, .35) 0 2px, transparent 2.5px), radial-gradient(circle at 34% 72%, rgba(223, 53, 121, .3) 0 2px, transparent 2.5px), radial-gradient(circle at 91% 63%, rgba(124, 77, 219, .32) 0 2.5px, transparent 3px), radial-gradient(680px 300px at 78% -6%, rgba(var(--personal-accent-rgb), .18), transparent 70%); } /* As silhuetas das temporadas viram balões. O atalho ``background`` também apaga a cor de fundo que o seasons.css usa para tingir a máscara — sem isso sobraria um retângulo cor-de-rosa no lugar do desenho. */ .season-decor.season-art-aniversario::before, .season-decor.season-art-aniversario::after { background: url("../image/celebration/balloons.svg") center / contain no-repeat; opacity: .34; } .season-decor.season-art-aniversario::after { opacity: .2; } /* ---------- 2. O cartão fixado do feed ---------- */ .social-celebration { position: relative; overflow: hidden; border-color: rgba(var(--personal-accent-rgb), .4); box-shadow: inset 3px 0 rgba(var(--personal-accent-rgb), .8), var(--shadow); } .social-celebration.is-aniversario { --celebration-art: url("../image/celebration/balloons.svg"); } .social-celebration.is-tempo-de-casa { --celebration-art: url("../image/celebration/medal.svg"); } /* A faixa ilustrada, no lugar da foto de uma publicação comum: é o que faz o cartão se anunciar antes de alguém ler uma palavra. */ .social-celebration-art { position: relative; height: 112px; background: radial-gradient(circle at 7% 26%, rgba(223, 53, 121, .7) 0 3.5px, transparent 4px), radial-gradient(circle at 14% 62%, rgba(239, 160, 43, .62) 0 2.5px, transparent 3px), radial-gradient(circle at 21% 18%, rgba(49, 182, 214, .62) 0 3px, transparent 3.5px), radial-gradient(circle at 27% 82%, rgba(124, 77, 219, .5) 0 2.5px, transparent 3px), radial-gradient(circle at 34% 40%, rgba(239, 160, 43, .58) 0 3.5px, transparent 4px), radial-gradient(circle at 41% 12%, rgba(223, 53, 121, .5) 0 2.5px, transparent 3px), radial-gradient(circle at 47% 70%, rgba(49, 182, 214, .52) 0 3px, transparent 3.5px), radial-gradient(circle at 54% 30%, rgba(124, 77, 219, .46) 0 2.5px, transparent 3px), radial-gradient(circle at 60% 86%, rgba(239, 160, 43, .46) 0 3px, transparent 3.5px), radial-gradient(circle at 66% 22%, rgba(223, 53, 121, .42) 0 2.5px, transparent 3px), radial-gradient(circle at 73% 58%, rgba(49, 182, 214, .4) 0 3px, transparent 3.5px), radial-gradient(circle at 92% 88%, rgba(124, 77, 219, .36) 0 2.5px, transparent 3px), linear-gradient(112deg, rgba(var(--personal-accent-rgb), .26), rgba(var(--personal-accent-rgb), .07) 58%, transparent 88%); } .social-celebration-art::after { content: ""; position: absolute; right: 20px; bottom: -8px; width: 104px; height: 104px; background: var(--celebration-art, none) center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(var(--personal-accent-rgb), .28)); } /* O número de anos é o assunto do cartão de tempo de casa — no aniversário não existe número nenhum para mostrar, e o elemento simplesmente não é criado. */ .social-celebration-years { position: absolute; left: 20px; bottom: 14px; display: flex; align-items: baseline; gap: 6px; color: var(--accent-strong); } .social-celebration-years b { font-size: 46px; font-weight: 850; line-height: 1; letter-spacing: -2px; } .social-celebration-years small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .social-celebration .social-post-main { padding: 16px 20px 20px; } .social-celebration-copy { margin-top: 14px; } .social-celebration-copy h2 { margin-top: 9px; color: var(--text); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; } .social-celebration-copy p { margin-top: 10px; color: var(--text); font-size: 14px; line-height: 1.6; max-width: 54ch; } /* O selo de evento vira selo de festa: segue o acento do cartão em vez do dourado da família de eventos. Assim o rosa do aniversário e o tom de quem completa tempo de casa não disputam com uma pílula de outra cor. */ .social-celebration .social-event-badge, :root[data-theme="dark"] .social-celebration .social-event-badge { color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .14); } /* "Só você vê esta publicação": a promessa mais importante do cartão, então ganha pílula em vez de virar mais uma linha de texto miúdo. */ .social-celebration-private { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 5px 10px; color: var(--accent-strong); background: rgba(var(--personal-accent-rgb), .13); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .social-celebration-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } .social-celebration-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); color: var(--muted-2); font-size: 12px; line-height: 1.5; } @media (max-width: 620px) { .social-celebration-art { height: 92px; } .social-celebration-art::after { width: 78px; height: 78px; right: 14px; } .social-celebration-years b { font-size: 36px; } .social-celebration-copy h2 { font-size: 18px; } .social-celebration-actions .btn { width: 100%; } } /* No escuro a faixa pastel estoura: o confete continua, o véu clareia menos. */ :root[data-theme="dark"] .social-celebration-art { background: radial-gradient(circle at 7% 26%, rgba(251, 123, 176, .8) 0 3.5px, transparent 4px), radial-gradient(circle at 14% 62%, rgba(239, 190, 100, .7) 0 2.5px, transparent 3px), radial-gradient(circle at 21% 18%, rgba(103, 214, 240, .7) 0 3px, transparent 3.5px), radial-gradient(circle at 27% 82%, rgba(163, 133, 244, .6) 0 2.5px, transparent 3px), radial-gradient(circle at 34% 40%, rgba(239, 190, 100, .66) 0 3.5px, transparent 4px), radial-gradient(circle at 41% 12%, rgba(251, 123, 176, .58) 0 2.5px, transparent 3px), radial-gradient(circle at 47% 70%, rgba(103, 214, 240, .6) 0 3px, transparent 3.5px), radial-gradient(circle at 54% 30%, rgba(163, 133, 244, .54) 0 2.5px, transparent 3px), radial-gradient(circle at 60% 86%, rgba(239, 190, 100, .54) 0 3px, transparent 3.5px), radial-gradient(circle at 66% 22%, rgba(251, 123, 176, .5) 0 2.5px, transparent 3px), radial-gradient(circle at 73% 58%, rgba(103, 214, 240, .48) 0 3px, transparent 3.5px), radial-gradient(circle at 92% 88%, rgba(163, 133, 244, .42) 0 2.5px, transparent 3px), linear-gradient(112deg, rgba(var(--personal-accent-rgb), .2), rgba(var(--personal-accent-rgb), .05) 58%, transparent 88%); }