/**
* responsive-blocks.css — placeholder reservado para futuras regras
* GENÉRICAS (que se aplicariam a todos os blocos sem conflito de cascata).
*
* As regras responsivas per-bloco (col_sizes/order/width/padding por
* viewport) são emitidas pelo PageCssController em
* /css/page/{pageType}.css?v={revisionId} — um arquivo CSS dinâmico por
* página com selector específico por bloco. Garante:
* - Zero CSS no body do HTML (regras viajam por normal).
* - Cache forte (?v={rev} muda quando publica → browser refaz fetch).
* - Sem conflitos de specificity vs Tailwind (cada regra é scopada
* por ID, não por seletor genérico).
*
* Esse arquivo está aqui pra ser carregado uma única vez no e
* servir como ponto de extensão futura (ex: animações genéricas,
* estados :hover/:focus que dependem de CSS vars cross-block).
*/
/* ===== Hero com fundo em vídeo ===== */
/* Iframe (YouTube/Vimeo) cobrindo a seção no modo "cover": mantém 16:9 e
transborda o excedente (o pai tem overflow-hidden). */
.st-hero-bg-video .st-hero-bg-iframe {
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 177.78vh);
height: max(100%, 56.25vw);
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
/* Acessibilidade: com preferência por menos movimento, o vídeo some e o
poster/cor de fundo assume. */
@media (prefers-reduced-motion: reduce) {
.st-hero-bg-video video,
.st-hero-bg-video .st-hero-bg-iframe {
display: none;
}
}
/* Header/Footer por dispositivo: o renderer emite uma cópia por variante
efetiva (layout_variant__mobile/__tablet), cada uma num wrapper neutro.
display:contents mantém sticky/absolute funcionando como se o wrapper
não existisse; as regras display:none por breakpoint vêm no CSS
per-página (/css/page/*.css). */
.st-global-block-copy {
display: contents;
}
/* Espaçamento padrão de seção controlado pelo Tema global: os marcadores
st-sp-* acompanham as classes py-* dos blocos; sem tema configurado os
defaults abaixo são idênticos (py-8/14/20), então nada muda. O Tema emite
--st-section-py-* para redefinir globalmente cada nível. */
.st-sp-sm { padding-block: var(--st-section-py-sm, 2rem); }
.st-sp-md { padding-block: var(--st-section-py-md, 3.5rem); }
.st-sp-lg { padding-block: var(--st-section-py-lg, 5rem); }
/* Carrossel único (fase 11.2), consumido por st-carousel.js. Scroll-snap
nativo (sem lib externa); scrollbar escondida, navegação pelos botões/dots
gerados pelo JS ou por touch/trackpad direto na track. */
.st-carousel-track {
scrollbar-width: none;
-ms-overflow-style: none;
}
.st-carousel-track::-webkit-scrollbar {
display: none;
}
.st-carousel-dot.is-active {
background: var(--st-blue, #2563eb);
width: 20px;
border-radius: 999px;
}
.st-carousel-prev:disabled,
.st-carousel-next:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* Masonry (fase 11.3) — colunas CSS, hand-written p/ não depender do JIT do
Tailwind (classes dinâmicas em views PHP não são escaneadas). Cada item vira
bloco com break-inside:avoid. Contagem de colunas por breakpoint. */
.st-masonry-2,
.st-masonry-3,
.st-masonry-4 {
columns: 1;
column-gap: 1.5rem;
}
.st-masonry-2 > *,
.st-masonry-3 > *,
.st-masonry-4 > * {
break-inside: avoid;
margin-bottom: 1.5rem;
display: block;
width: 100%;
}
@media (min-width: 640px) {
.st-masonry-2 { columns: 2; }
.st-masonry-3 { columns: 2; }
.st-masonry-4 { columns: 2; }
}
@media (min-width: 1024px) {
.st-masonry-3 { columns: 3; }
.st-masonry-4 { columns: 4; }
}
/* Legenda sobreposta na imagem (caption_style=overlay) */
.st-gallery-figure--overlay { position: relative; }
.st-gallery-caption-overlay {
position: absolute;
inset-inline: 0;
bottom: 0;
margin: 0;
padding: 2rem 1rem 1rem;
color: #fff;
background: linear-gradient(to top, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0));
font-size: 0.875rem;
line-height: 1.5;
}
/* Legenda sobre imagem única (Hero/TextoImagem — image_caption_style=overlay).
Mesmo padrão do Gallery acima, mas com posição (topo/centro/base) e
escurecimento configuráveis. O tom do scrim fica em --st-caption-scrim,
definido uma única vez por nível (--scrim-light/medium/strong) e reusado
pelos 3 gradientes de posição — evita repetir hex por regra. */
.st-media-caption-frame--overlay { position: relative; }
.st-media-caption-overlay.st-media-caption-overlay {
/* Especificidade DOBRADA no lugar do `!important` que estava aqui (proibido
no projeto). A justificativa antiga não se sustentava: a regra de seleção do
editor (`#page-builder-root [data-builder-block-id].peb-block-selected`) mira
o BLOCO, não a legenda — comprovado no canvas, com o bloco selecionado a
legenda continua `absolute` mesmo sem nenhum reforço. A classe dobrada (0,2,0)
fica acima de qualquer utilitário de uma classe só (ex.: `.static`, `.relative`
do Tailwind), que é o único concorrente plausível. */
position: absolute;
inset-inline: 0;
margin: 0;
padding: 1rem;
color: #fff;
font-size: 0.875rem;
line-height: 1.5;
}
.st-media-caption-overlay--bottom {
top: auto;
bottom: 0;
padding-top: 2rem;
background: linear-gradient(to top, var(--st-caption-scrim), rgba(2, 6, 23, 0));
}
.st-media-caption-overlay--top {
top: 0;
bottom: auto;
padding-bottom: 2rem;
background: linear-gradient(to bottom, var(--st-caption-scrim), rgba(2, 6, 23, 0));
}
.st-media-caption-overlay--center {
top: 50%;
bottom: auto;
transform: translateY(-50%);
background: var(--st-caption-scrim);
text-align: center;
}
.st-media-caption-overlay--scrim-light { --st-caption-scrim: rgba(2, 6, 23, 0.45); }
.st-media-caption-overlay--scrim-medium { --st-caption-scrim: rgba(2, 6, 23, 0.72); }
.st-media-caption-overlay--scrim-strong { --st-caption-scrim: rgba(2, 6, 23, 0.88); }
/* ===== Banner altura "Tela cheia" (height=screen) =====
Regra vive AQUI porque banner-styles.css pertence a outra frente nesta
rodada (2026-07-12). 100svh (small viewport height) evita o "pulo" da
barra de endereço no mobile; 100vh fica como fallback para browsers
sem unidade svh. O img{height:100%} de banner-styles.css já cobre o
novo valor (seletor :not(.st-banner-height-auto)). */
.st-banner-height-screen .banner-media,
.st-banner-height-screen .banner-media picture {
height: 100vh;
height: 100svh;
}
/* ===== Overlay de fundo genérico dos blocos (st-bgov) =====
Rodada 2026-07-12 — escurecer/clarear/gradiente/textura entre o fundo
do bloco e o conteúdo. O esqueleto estático fica aqui; as CSS vars por
combinação (--st-bgov-bg/--st-bgov-op/...) vêm nas classes
.st-pb-bgov-* coletadas pelo BackgroundOverlayTrait no CSS per-página
(/css/page/{type}.css). isolation:isolate cria stacking context próprio:
o ::before em z-index:-1 pinta ACIMA do background do próprio bloco e
ABAIXO de todo o conteúdo.
E-2 (2026-07-13) — DUAS camadas empilháveis:
::before = camada BASE (tom OU textura, com opacidade própria);
::after = TOM EXTRA (--st-bgov-tint), pintado ACIMA da base, só quando
a classe marcadora .st-bgov-tint está presente (sem ela o
bloco não ganha ::after nenhum, para não brigar com pseudo-
elementos do próprio template).
O tom extra precisa de um pseudo PRÓPRIO porque a textura carrega alpha no
`opacity` do elemento — na mesma lista de backgrounds ele apagaria o tom
junto. Alpha do tom vai embutido no rgba (opacity fica 1). */
.st-bgov {
position: relative;
isolation: isolate;
}
.st-bgov::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: var(--st-bgov-bg, none);
opacity: var(--st-bgov-op, 1);
background-size: var(--st-bgov-size, auto);
background-repeat: var(--st-bgov-rep, repeat);
}
.st-bgov-tint::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background: var(--st-bgov-tint, none);
}
/* Variante para o BANNER: camadas sobre a mídia (.banner-media), sob os
cards/controles — o overlay de cards e os controles do rotator são
siblings POSTERIORES no DOM, então pintam acima dos dois pseudos. */
.st-banner-rotator.st-banner-bgov .banner-media {
position: relative;
}
.st-banner-rotator.st-banner-bgov .banner-media::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: var(--st-bgov-bg, none);
opacity: var(--st-bgov-op, 1);
background-size: var(--st-bgov-size, auto);
background-repeat: var(--st-bgov-rep, repeat);
}
.st-banner-rotator.st-banner-bgov-tint .banner-media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: var(--st-bgov-tint, none);
}
/* ===== Bloco Mapa: fachada estilizada do gate LGPD (Onda 1 M7) ============
Desenho de mapa 100% em CSS (quadras, avenidas, rio e parque via
gradientes) — SEM tile externo. Amostra aprovada: secoes2.html (.mapph).
O map-consent.js troca o conteúdo pelo iframe real após consentimento. */
.st-mapph {
position: relative;
overflow: hidden;
background-color: #e9edf1;
background-image:
/* avenida diagonal */
linear-gradient(115deg, transparent 46%, #f7f9fb 46%, #f7f9fb 52%, transparent 52%),
/* rio */
linear-gradient(24deg, transparent 63%, #cfe3f4 63%, #cfe3f4 72%, transparent 72%),
/* parque */
radial-gradient(140px 90px at 18% 24%, #d9ead9 0 60%, transparent 62%),
/* malha de ruas */
repeating-linear-gradient(0deg, transparent 0 44px, #f7f9fb 44px 50px),
repeating-linear-gradient(90deg, transparent 0 58px, #f7f9fb 58px 64px);
}
/* Véu central para o texto/botões da fachada ficarem legíveis sobre o desenho. */
.st-mapph::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(65% 75% at 50% 55%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.15) 100%);
pointer-events: none;
}
.st-mapph > * {
position: relative;
}
/* Pin central (mask herda a cor — nada de SVG inline). */
.st-mapph__pin {
display: inline-block;
width: 2.25rem;
height: 2.25rem;
background-color: var(--st-color-primary, #2563eb);
-webkit-mask-image: url("/assets/icons/map-pin.svg");
mask-image: url("/assets/icons/map-pin.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
filter: drop-shadow(0 6px 8px rgba(15, 23, 42, 0.25));
}
/* ==========================================================================
Blocos Notícias & Blog (Onda 2 — Girafales)
Marquee do letreiro (NewsTicker) e ícones em máscara que herdam currentColor.
Regras genéricas cross-block; sem style= inline no público.
========================================================================== */
/* Letreiro de plantão (NewsTicker) — marquee com pausa no hover/foco e respeito
a prefers-reduced-motion (rola horizontalmente em vez de animar). */
.st-ticker {
display: flex;
align-items: stretch;
overflow: hidden;
border-radius: 0.5rem;
}
.st-ticker__tag {
display: inline-flex;
align-items: center;
gap: 0.45em;
flex: none;
padding: 0.6rem 0.9rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
background: rgba(0, 0, 0, 0.22);
}
.st-ticker__mq {
flex: 1;
min-width: 0;
overflow: hidden;
display: flex;
align-items: center;
}
.st-ticker__track {
display: inline-flex;
align-items: center;
white-space: nowrap;
will-change: transform;
}
.st-ticker__set {
display: inline-flex;
align-items: center;
gap: 2.4rem;
flex: none;
padding-inline: 1.2rem;
}
.st-ticker__set a,
.st-ticker__set span {
font-size: 0.86rem;
font-weight: 600;
color: inherit;
}
.st-ticker__set a:hover {
text-decoration: underline;
}
.st-ticker__set b {
opacity: 0.82;
margin-right: 0.4em;
font-weight: 800;
}
.st-ticker__ic {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url("/assets/icons/zap.svg") center/contain no-repeat;
mask: url("/assets/icons/zap.svg") center/contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
.st-ticker__track {
animation: st-ticker-roll 34s linear infinite;
}
.st-ticker--normal .st-ticker__track {
animation-duration: 28s;
}
.st-ticker--fast .st-ticker__track {
animation-duration: 18s;
}
.st-ticker:hover .st-ticker__track,
.st-ticker:focus-within .st-ticker__track {
animation-play-state: paused;
}
}
@media (prefers-reduced-motion: reduce) {
.st-ticker__mq {
overflow-x: auto;
}
}
@keyframes st-ticker-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Ícones em máscara dos blocos de redação IA e grade social (herdam a cor). */
.st-ainews__ic,
.st-social__ic {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url("/assets/icons/sparkles.svg") center/contain no-repeat;
mask: url("/assets/icons/sparkles.svg") center/contain no-repeat;
}
/* Relativo ao próprio CSS: raiz-absoluto quebra em domínio próprio (defeito
14/24 da régua da Dina) — corrigido em 08/08 na entrada dos ícones novos. */
.st-social__ic {
-webkit-mask-image: url("../icons/instagram.svg");
mask-image: url("../icons/instagram.svg");
}
/* ============================================================================
BentoCovers (Onda 2 conversão, 2026-07-19) — legenda em overlay no rodapé da
capa. O arranjo (grade/spans) é feito por classes Tailwind na view; aqui só o
scrim da legenda. Sem !important: a especificidade da classe basta.
============================================================================ */
.st-bento-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 1.25rem 1rem 0.85rem;
color: #fff;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.3;
background: linear-gradient(to top, rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0));
pointer-events: none;
}
/* ============================================================================
Blocos Notícias & Blog — 2ª leva (Onda 4 — Seu Madruga, 2026-07-19)
WeatherQuotes / Scoreboard / AgendaList / Classifieds / EditionSummary.
Estrutura/decoração cross-block (idêntica por instância); cor/box/espaçamento
por instância vêm de classes Tailwind + per-block CSS. Sem !important; ícones
em máscara herdam currentColor. Namespaces st-wq / st-score / st-agenda /
st-classy / st-edindex.
============================================================================ */
/* Cabeçalho comum dos cards de painel (previsão/cotações/placar). */
.st-wq-card__head,
.st-score__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.9rem;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
padding-bottom: 0.6rem;
}
.st-wq-card__title,
.st-score__title {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-weight: 700;
font-size: 0.95rem;
}
.st-wq-card__head small,
.st-score__note {
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.6;
}
/* Ícone base (máscara currentColor). */
.st-wq-ic,
.st-wq-day__ic,
.st-wq-arrow,
.st-score__ic,
.st-agenda__ic {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
background-color: currentColor;
-webkit-mask: url("/assets/icons/circle.svg") center / contain no-repeat;
mask: url("/assets/icons/circle.svg") center / contain no-repeat;
}
.st-wq-ic--sun { -webkit-mask-image: url("/assets/icons/sun.svg"); mask-image: url("/assets/icons/sun.svg"); }
.st-wq-ic--chart { -webkit-mask-image: url("/assets/icons/chart-bar.svg"); mask-image: url("/assets/icons/chart-bar.svg"); }
.st-score__ic { -webkit-mask-image: url("/assets/icons/award.svg"); mask-image: url("/assets/icons/award.svg"); }
.st-agenda__ic { -webkit-mask-image: url("/assets/icons/clock.svg"); mask-image: url("/assets/icons/clock.svg"); }
/* WeatherQuotes — grade de dias da previsão. */
.st-wq-week {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
gap: 0.5rem;
text-align: center;
}
.st-wq-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.5rem 0.25rem;
border-radius: 0.6rem;
background: rgba(15, 23, 42, 0.04);
}
.st-wq-day__ic { font-size: 1.15rem; color: #d97706; }
.st-wq-day--rain .st-wq-day__ic { color: #0284c7; -webkit-mask-image: url("/assets/icons/droplet.svg"); mask-image: url("/assets/icons/droplet.svg"); }
.st-wq-day--night .st-wq-day__ic { color: #6366f1; -webkit-mask-image: url("/assets/icons/moon.svg"); mask-image: url("/assets/icons/moon.svg"); }
.st-wq-day--sun .st-wq-day__ic { -webkit-mask-image: url("/assets/icons/sun.svg"); mask-image: url("/assets/icons/sun.svg"); }
.st-wq-day__t { font-weight: 800; font-size: 1.05rem; }
.st-wq-day small { font-size: 0.7rem; opacity: 0.65; }
/* WeatherQuotes — lista de cotações. */
.st-wq-quotes { display: flex; flex-direction: column; }
.st-wq-quote {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.st-wq-quote:last-child { border-bottom: 0; }
.st-wq-quote b { font-weight: 700; }
.st-wq-quote__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.st-wq-quote__delta {
display: inline-flex;
align-items: center;
gap: 0.25em;
font-size: 0.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.st-wq-trend--up .st-wq-arrow { -webkit-mask-image: url("/assets/icons/arrow-up.svg"); mask-image: url("/assets/icons/arrow-up.svg"); }
.st-wq-trend--down .st-wq-arrow { -webkit-mask-image: url("/assets/icons/arrow-down.svg"); mask-image: url("/assets/icons/arrow-down.svg"); }
.st-wq-trend--flat .st-wq-arrow { display: none; }
/* Scoreboard — linhas de jogos. */
.st-score__ic { color: #d97706; }
.st-score__list { list-style: none; margin: 0; padding: 0.4rem 1.25rem 0.75rem; }
.st-score__head { padding: 1rem 1.25rem 0.6rem; margin-bottom: 0; }
.st-score__row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.st-score__row:last-child { border-bottom: 0; }
.st-score__team { font-weight: 600; }
.st-score__team--home { text-align: right; }
.st-score__team--away { text-align: left; }
.st-score__team.is-win { font-weight: 800; }
.st-score__result {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.st-score__result i { font-style: normal; opacity: 0.4; font-weight: 500; }
.st-score__status {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #dc2626;
white-space: nowrap;
}
/* AgendaList — eventos com data. */
.st-agenda { display: flex; flex-direction: column; gap: 0.75rem; }
.st-agenda__item { display: flex; align-items: center; gap: 1rem; }
.st-agenda__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: none;
width: 3.5rem;
padding: 0.4rem 0;
border-radius: 0.75rem;
background: rgba(15, 23, 42, 0.05);
line-height: 1;
}
.st-agenda__d { font-size: 1.4rem; font-weight: 800; }
.st-agenda__m { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.st-agenda__body { min-width: 0; flex: 1; }
.st-agenda__title { font-size: 1rem; font-weight: 700; margin: 0; }
.st-agenda__note {
display: flex;
align-items: center;
gap: 0.4em;
margin: 0.2rem 0 0;
font-size: 0.82rem;
opacity: 0.72;
}
.st-agenda__chip {
flex: none;
align-self: flex-start;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
background: rgba(15, 23, 42, 0.08);
}
/* Classifieds — cartão de anúncio. */
.st-classy__cat {
align-self: flex-start;
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
background: rgba(15, 23, 42, 0.07);
}
.st-classy__title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.st-classy__price { font-weight: 800; color: #059669; }
.st-classy__note { font-size: 0.8rem; opacity: 0.65; }
/* EditionSummary — índice numerado. */
.st-edindex__n {
flex: none;
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
color: var(--st-color-primary, #2563eb);
font-variant-numeric: tabular-nums;
}
.st-edindex__body { display: flex; flex-direction: column; min-width: 0; }
.st-edindex__title { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.st-edindex__label { font-size: 0.78rem; opacity: 0.6; }
/* ===== Rodapé: fundo e tinta seguem o TEMA do cliente ===================== */
/* Defeito 12 da tabela de fidelidade: as views do bloco Footer pintavam com
`bg-slate-950` do preset padrão e o `--color-footer_bg` do tema nunca era
lido. Aqui o fundo volta a ser a variável, com o slate de sempre como
fallback do `var()` — tenant sem tokens continua com o rodapé que tinha.
Quem decide QUAL classe de tinta entra é o PHP (footer_theme_helper.php):
escolher texto exige medir luminância, e CSS não faz essa conta.
Especificidade de propósito baixa (0,1,0): as cores por bloco do editor
(`.st-pb-block-bg-x.st-pb-block-bg-x`, 0,2,0) continuam ganhando de quem
mexeu na mão. Nada de !important. */
.st-footer-themed {
background-color: var(--color-footer_bg, #020617);
}
.st-footer-themed--ink-token { color: var(--color-footer_text, #ffffff); }
.st-footer-themed--ink-light { color: #ffffff; }
.st-footer-themed--ink-dark { color: #0f172a; }
/* Filete e superfícies do rodapé derivam da TINTA, não de branco fixo.
`border-current/10` não existe em Tailwind 3 (opacidade não se aplica a
currentColor, a classe simplesmente não é gerada) — era filete cinza do
preflight se passando por filete translúcido. A primeira declaração de cada
par é o fallback para quem não tem color-mix. */
.st-footer-rule {
border-color: rgba(148, 163, 184, 0.35);
border-color: color-mix(in srgb, currentColor 16%, transparent);
}
.st-footer-field {
border-color: rgba(148, 163, 184, 0.45);
border-color: color-mix(in srgb, currentColor 24%, transparent);
background-color: rgba(148, 163, 184, 0.12);
background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.st-footer-field:focus {
border-color: rgba(148, 163, 184, 0.8);
border-color: color-mix(in srgb, currentColor 55%, transparent);
}
/* Pílula de contorno da variante "colunas + CTA" — mesma origem do filete. */
.st-footer-outline {
border-color: rgba(148, 163, 184, 0.5);
border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.st-footer-outline:hover {
border-color: rgba(148, 163, 184, 0.85);
border-color: color-mix(in srgb, currentColor 60%, transparent);
}
/* Cartão de destaque do topo dessa variante: um degrau de contraste tirado da
tinta, para o bloco se destacar do fundo do rodapé nos dois sentidos. */
.st-footer-panel {
border-color: rgba(148, 163, 184, 0.35);
border-color: color-mix(in srgb, currentColor 14%, transparent);
background-color: rgba(148, 163, 184, 0.08);
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
/* Saída do bloco Mapa quando o endereço é COORDENADA (02/09/2026) ===========
Com `q=` o próprio Google desenha "Open in Maps" neste
canto do embed. Com `q=` ele não desenha nada, e o visitante
fica com um pin que não abre lugar nenhum. A pílula só existe nesse caso —
por isso pode ocupar o MESMO canto sem nunca disputar espaço com a do
Google. Cor da marca do site, como o pin da fachada. */
.st-map__open {
position: absolute;
top: 0.625rem;
left: 0.625rem;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.375rem;
border-radius: 0.375rem;
background-color: #fff;
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
line-height: 1.125rem;
font-weight: 600;
color: var(--st-color-primary, #2563eb);
text-decoration: none;
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}
.st-map__open:hover {
background-color: #f8fafc;
}
.st-map__open:focus-visible {
outline: 2px solid var(--st-color-primary, #2563eb);
outline-offset: 2px;
}
/* Ícone por máscara — nada de SVG inline; herda a cor do texto. */
.st-map__open::after {
content: "";
width: 0.875rem;
height: 0.875rem;
flex: none;
background-color: currentColor;
-webkit-mask-image: url("/assets/icons/link.svg");
mask-image: url("/assets/icons/link.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}