/* ============================================================================
SiteTURBO — st-notice.css (02/09/2026)
Estilo do bloco "Aviso em destaque" (NoticePopup): o modal de comunicado do
mockup aprovado do Eco Clube de Campo. Carregado só quando a página usa o
bloco (flag __st_notice_enabled). Comportamento em st-notice.js.
Regras da casa: sem !important; a cascata é resolvida por especificidade e
ordem. A animação de entrada desliga sob prefers-reduced-motion. O X usa
máscara CSS de /assets/icons/x.svg — ![]()
não herdaria a cor do cartão.
============================================================================ */
/* --- o véu de tela cheia --------------------------------------------------
O `display` do estado ABERTO mora num :where() de especificidade ZERO de
propósito. A visibilidade por dispositivo do editor chega como
`@media(...){[data-st-block-id="X"]{display:none}}`, que tem especificidade
0,1,0: com um `.st-notice{display:grid}` comum daria empate, e quem venceria
seria a ordem dos arquivos — ou seja, o "esconder no celular" funcionaria ou
não conforme a ordem de carregamento. Com :where(), esconder sempre vence.
O st-notice.js confirma isso medindo o display antes de dar o aviso por
exibido; ver `abrir()` lá. */
:where(.st-notice) {
display: grid;
}
.st-notice {
position: fixed;
inset: 0;
z-index: 340;
place-items: center;
padding-left: 1.25rem;
padding-right: 1.25rem;
background: rgba(7, 20, 32, 0.86);
overflow-y: auto;
}
.st-notice[hidden] {
display: none;
}
/* Trava a rolagem do fundo enquanto o aviso está aberto (o JS põe a classe no
). Sem isto, rolar dentro do modal arrasta a página atrás dele. */
.st-notice-lock {
overflow: hidden;
}
/* --- o cartão -------------------------------------------------------------
`theme` (bg/text) vem por classe Tailwind na view; aqui fica só a forma. */
.st-notice__box {
position: relative;
width: min(460px, 100%);
max-width: 100%;
border-radius: 1.25rem;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
text-align: center;
overflow: visible;
}
.st-notice[data-st-notice] .st-notice__box {
animation: st-notice-entrada 0.28s ease-out both;
}
@keyframes st-notice-entrada {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: none; }
}
/* --- o cartaz ------------------------------------------------------------- */
.st-notice__art {
display: block;
width: 100%;
height: auto;
border-radius: 1.25rem;
}
/* Só no editor: cartaz escolhido cuja mídia ainda não resolveu. */
.st-notice__art--placeholder {
min-height: 180px;
border-radius: 1.25rem;
background: repeating-linear-gradient(
45deg,
rgba(100, 116, 139, 0.12),
rgba(100, 116, 139, 0.12) 10px,
rgba(100, 116, 139, 0.05) 10px,
rgba(100, 116, 139, 0.05) 20px
);
}
/* --- o texto e a ação ----------------------------------------------------- */
.st-notice__body {
display: grid;
gap: 0.7rem;
justify-items: center;
padding: 1.25rem 1.4rem 1.5rem;
}
/* Cartaz + texto: o cartaz já tem canto arredondado embaixo, e o corpo logo
abaixo dele fica colado. Um respiro menor no topo resolve sem margem
negativa. */
.st-notice__art + .st-notice__body {
padding-top: 1rem;
}
.st-notice__title {
margin: 0;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.25;
}
.st-notice__text {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
opacity: 0.85;
}
.st-notice__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
margin-top: 0.25rem;
padding: 0 1.35rem;
border-radius: 0.7rem;
background: #2563eb;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
transition: background-color 0.15s ease;
}
.st-notice__btn:hover {
background: #1d4ed8;
}
/* --- o X -----------------------------------------------------------------
44px de área de toque (mínimo confortável no celular), fora do cartão para
não cobrir o cartaz — igual ao mockup aprovado. */
.st-notice__close {
position: absolute;
top: -0.9rem;
right: -0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: #fff;
color: #0f172a;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.st-notice__close--static {
cursor: default;
}
.st-notice__close:hover {
background: #f1f5f9;
}
.st-notice__close:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* Ícone por MÁSCARA: herda a cor do botão. ![]()
não herdaria e o X sairia
preto sobre fundo escuro em qualquer tema que não fosse o claro. */
.st-notice__close-icon {
display: block;
width: 1.15rem;
height: 1.15rem;
background-color: currentColor;
-webkit-mask: url("/assets/icons/x.svg") center/contain no-repeat;
mask: url("/assets/icons/x.svg") center/contain no-repeat;
}
/* Telas estreitas: o X fora do cartão sairia da tela. */
@media (max-width: 480px) {
.st-notice__close {
top: -0.6rem;
right: -0.6rem;
}
}
/* --- o cartaz ESTÁTICO do editor/preview ---------------------------------
No canvas o bloco não pode roubar a tela: ele fica no fluxo, centralizado,
para quem monta conseguir clicar e editar. */
.st-notice-preview {
display: grid;
justify-items: center;
gap: 0.9rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.st-notice__box--static {
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}
.st-notice-preview__dica {
max-width: 34rem;
margin: 0;
color: #64748b;
font-size: 0.85rem;
line-height: 1.5;
text-align: center;
}
/* --- movimento reduzido ---------------------------------------------------
Quem pediu menos movimento continua vendo o aviso; o que some é a entrada
animada. */
@media (prefers-reduced-motion: reduce) {
.st-notice[data-st-notice] .st-notice__box {
animation: none;
}
}