/* ═══════════════════════════════════════════════════════════════
Thiper Studio — Correções globais (mobile iOS/Android + padrão)
Carregado por ÚLTIMO no (layout.php) para garantir
prioridade sobre main.min.css e light-theme.css sem precisar
regenerar o arquivo minificado.
Conteúdo:
1. Logo — nunca distorcer/desalinhar ("torta")
2. Unidades dinâmicas (100dvh) — barra de URL iOS Safari
3. Safe-area insets (notch / barra inferior)
4. Toque (tap-highlight) e zoom de inputs no iOS
5. Proteção contra overflow horizontal
═══════════════════════════════════════════════════════════════ */
/* ── 1. LOGO — renderização consistente, sem distorção ───────── */
.site-branding {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
}
.site-branding picture {
display: flex;
align-items: center;
line-height: 0;
flex-shrink: 0;
}
/* Substitui `.site-branding img{height:100%;width:100%}` do main.min.css
que esticava/desalinhava o logo ("torta"): agora o logo mantém a
proporção e é limitado por max-height (vindo do inline/admin). */
#site-header .site-branding .site-logo-img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain;
flex-shrink: 0;
vertical-align: middle;
}
/* Header do blog: mantém a altura fixa do admin, mas nunca estica a largura */
#blog-site-header .site-branding .site-logo-img {
display: block;
width: auto !important;
max-width: 100% !important;
object-fit: contain;
flex-shrink: 0;
vertical-align: middle;
}
/* Só a logo de rolagem (tema claro scrolled) aparece; evita duas logos lado a lado */
.site-branding .site-logo-img.scroll-logo {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Desktop (≥769px): no tema claro o header fica claro ao rolar → troca para a logo escura.
A logo padrão sai do fluxo (display:none) para a logo de rolagem ocupar exatamente o
mesmo lugar — sem deslocamento lateral. */
@media (min-width: 769px) {
body.site-light .site-header.scrolled .site-branding .site-logo-img.scroll-logo {
display: block !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body.site-light .site-header.scrolled .site-branding .site-logo-img.default-logo {
display: none !important;
}
}
/* Mobile (≤768px): troca de logo ao rolar controlada pelo admin
(Identidade → Header Mobile → “Trocar logo ao rolar no mobile”).
Quando ativado, o ganha a classe .th-mobile-logo-swap. */
@media (max-width: 768px) {
/* #site-header iguala a especificidade da regra base (que tem o ID e
força height:auto !important) — sem isto o height:auto vence e a
scroll-logo fica no tamanho natural da imagem (pequena). */
body.th-mobile-logo-swap.site-light #site-header.site-header.scrolled .site-branding .site-logo-img.scroll-logo {
display: block !important;
opacity: 1 !important;
pointer-events: auto !important;
/* Altura mobile do estado rolado (admin: Tamanho → Mobile — Ao Rolar).
A variável é definida inline no próprio ![]()
(header-rendering.php),
então resolve sempre — sem depender de herança/cascade. Sem isto a
scroll-logo herda max-height de desktop e, com height:auto acima,
encolhe para o tamanho natural (pequena e desalinhada no topo). */
height: var(--th-scroll-h-mobile, 36px) !important;
max-height: var(--th-scroll-h-mobile, 36px) !important;
/* width:auto é essencial: o atributo HTML width="180" trava a
proporção e impede o navegador de redimensionar a altura. */
width: auto !important;
/* Centralização vertical: o header scrolled é mais baixo que o topo,
e a scroll-logo está em position:absolute (top:0 por padrão). */
top: 50% !important;
transform: translateY(-50%) !important;
/* Remove o max-width:100% da regra base img{}: como o container
(picture) colapsa para a largura da própria imagem, o 100% vira
um teto sobre a logo — com height:36px e width:auto a logo deve
renderizar 36x36 (quadrada), não 20x36. */
max-width: none !important;
}
/* Altura mínima do header rolado no tema claro+swap: garante que a
scroll-logo (ex.: 56px, igual ao blog) caiba centralizada sem ser
cortada no topo da viewport (era 53px de header com logo 36px).
A variável vem inline no (header-rendering.php). */
body.th-mobile-logo-swap.site-light #site-header.site-header.scrolled {
min-height: calc(var(--th-scroll-h-mobile, 56px) + 8px) !important;
}
body.th-mobile-logo-swap.site-light .site-header.scrolled .site-branding .site-logo-img.default-logo {
display: none !important;
}
/* Desativado: mantém a logo padrão (clara) visível também no tema claro */
body:not(.th-mobile-logo-swap).site-light .site-header.scrolled .site-branding .site-logo-img.default-logo {
display: block !important;
opacity: 1 !important;
}
body:not(.th-mobile-logo-swap).site-light .site-header.scrolled .site-branding .site-logo-img.scroll-logo {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* O logo do tipo "both" (imagem + texto) fica alinhado verticalmente */
.site-branding a {
align-items: center;
}
/* ── 2. UNIDADES DINÂMICAS (iOS Safari URL bar) ──────────────── */
@supports (height: 100dvh) {
.mobile-menu { height: 100dvh; }
.hero,
.hero-section { min-height: 100dvh; }
.thi-video-overlay { height: 100dvh; }
.thi-video-container { height: 90dvh; }
.thi-video-container:fullscreen { height: 100dvh; }
.tv-modal-overlay { height: 100dvh; }
}
/* ── 3. SAFE-AREA INSETS (notch / gestos) ────────────────────── */
.mobile-menu {
padding-bottom: env(safe-area-inset-bottom);
}
.mobile-menu-topbar {
padding-top: max(16px, env(safe-area-inset-top));
}
.thi-chat-widget {
bottom: max(24px, env(safe-area-inset-bottom));
}
@media (max-width: 480px) {
.thi-chat-bubble {
bottom: max(16px, env(safe-area-inset-bottom)) !important;
}
}
.thi-theme-toggle {
bottom: max(84px, calc(env(safe-area-inset-bottom) + 60px));
}
/* !important para vencer `bottom:80px !important` do chat-widget.css em ≤480px */
.scroll-top-btn {
bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}
@media (max-width: 480px) {
.scroll-top-btn {
bottom: max(80px, calc(env(safe-area-inset-bottom) + 56px)) !important;
}
}
/* ── 4. TOQUE & ZOOM DE INPUTS NO iOS ────────────────────────── */
a,
button,
input,
select,
textarea,
.mobile-link,
.header-social-link,
.thi-theme-toggle {
-webkit-tap-highlight-color: transparent;
}
/* iOS Safari dá zoom automático ao focar input com font-size < 16px.
Escopado a campos de texto reais (não afeta botões/checkboxes). */
@media (max-width: 768px) {
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
font-size: 16px !important;
}
}
/* ── 5. PROTEÇÃO CONTRA OVERFLOW HORIZONTAL ──────────────────── */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
img,
video,
iframe,
table,
pre {
max-width: 100%;
}
.hero-content,
.sobre-hero h1,
.sipat-hero h1,
.evento-hero h1 {
overflow-wrap: break-word;
}
/* ── 6. RENDERIZAÇÃO DE TEXTO (padrão, cross-device) ─────────── */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}