/* * Design system do guapamag-theme — aplicado em 04/07/2026 a partir do * protótipo aprovado pelo André (prototipo-design-ensaio-2026.html). * * Direção: base visual do guapamag.tv (fundo quase preto, gradiente * rosa->roxo) com uma leitura mais "revista" pro ensaio de fotos — serif * (Fraunces) nos títulos/nome da modelo contra sans-serif no resto. * Cards com hover sutil, paywall com fundo radial + blur. * * Fontes atualizadas em 06/07/2026 (pedido do André: "combinar com o novo * tema"): Fraunces continua no display/títulos (já tinha timbre editorial * certo pra marca), mas trocamos Inter -> Plus Jakarta Sans no texto/UI — * mesma categoria (geométrica, boa legibilidade em telas pequenas), só que * mais quente/autoral que o Inter (que tende a "SaaS corporativo" demais * pra um site de revista sensual). Dupla Fraunces + Plus Jakarta Sans é * uma combinação usada com frequência justamente por casar bem. * * Fontes carregadas via Google Fonts em inc/enqueue.php. */ :root { --bg: #09090b; --bg-elevated: #141417; --bg-card: #17171b; --border: #26262b; --border-strong: #3a3a41; --text: #f2f1ee; --text-dim: #9b9aa3; --text-faint: #67666f; --accent-1: #ec2f81; --accent-2: #8b2fec; --accent-grad: linear-gradient(135deg, var(--accent-1), var(--accent-2)); --checkout-cta: #1fb865; --checkout-cta-hover: #17a058; --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --font-serif: 'Fraunces', Georgia, serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } * , *::before, *::after { box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Achado em 07/07/2026 (relato do André: no mobile dava pra arrastar a tela de /finalizar-compra pro lado). `overflow-x: hidden` já existia só no (linha ~56) — em mobile Safari/Chrome o gesto de arrastar (touch-pan) pode ainda vazar pelo mesmo com o contido, então duplicar aqui é o jeito robusto de travar o scroll horizontal independente de qual elemento específico esteja 1-2px mais largo que a viewport. */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } html { overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* =================================================================== Botões / pills genéricos =================================================================== */ .btn { display: inline-block; background: var(--accent-grad); color: #fff; font-weight: 600; font-size: 14px; padding: 12px 28px; border-radius: 999px; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; } .btn:hover { opacity: 0.88; color: #fff; } /* Variante "ghost" (contorno, fundo transparente) — ação secundária ao lado de um .btn sólido (ex: "Fazer login" + "Assinar" no CTA de comentário pra visitante deslogado, ver comments.php). */ .btn--ghost { background: transparent; color: var(--accent-1); border: 1.5px solid var(--accent-1); padding: 10.5px 26px; } .btn--ghost:hover { background: var(--accent-1); color: #fff; opacity: 1; } /* "Carregar mais" — Arquivo de Ensaios / Arquivo de Vídeos (substitui a paginação numerada, ver template-parts/load-more.php). */ .load-more { display: flex; justify-content: center; margin: 32px 0; } .load-more__btn { border: none; cursor: pointer; font-family: inherit; } .load-more__btn:disabled { opacity: 0.6; cursor: default; } /* =================================================================== Header / Footer =================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(9, 9, 11, 0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; gap: 24px; padding: 16px 20px; } .site-header__logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .site-header__logo-icon { display: block; width: 24px; height: 38px; } /* Cor trocada de gradiente rosa/roxo pra branco sólido — pedido do André em 09/07/2026. */ .site-header__logo-text { font-family: var(--font-serif); font-weight: 600; font-size: 22px; letter-spacing: -0.3px; color: #fff; } .site-header__nav ul { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .site-header__nav li { list-style: none; position: relative; } .site-header__nav a { position: relative; display: inline-block; font-size: 14px; font-weight: 500; color: var(--text-dim); padding: 4px 0; transition: color 0.2s; } .site-header__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-grad); transition: right 0.25s ease; } .site-header__nav a:hover { color: var(--text); } .site-header__nav a:hover::after { right: 0; } .site-header__nav li.current-menu-item > a, .site-header__nav li.current_page_item > a { color: var(--text); } .site-header__nav li.current-menu-item > a::after, .site-header__nav li.current_page_item > a::after { right: 0; } /* Submenus (dropdowns) — o WP sempre imprime os filhos no HTML; sem isso eles ficam soltos, expandidos, empurrando o layout pra baixo (era o "menu antigo" bugado que aparecia acima do Hero). */ .site-header__nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin-top: 8px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 200; flex-direction: column; gap: 0; } .site-header__nav li:hover > .sub-menu, .site-header__nav li:focus-within > .sub-menu { display: flex; } /* "Ponte" invisível cobrindo o gap do margin-top — sem isso, o mouse perde o :hover do

ao descer até o dropdown e o menu some antes de dar tempo de clicar. */ .site-header__nav li.menu-item-has-children::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } .site-header__nav .sub-menu li { width: 100%; } .site-header__nav .sub-menu a { display: block; width: 100%; padding: 8px 10px; font-size: 13px; white-space: nowrap; border-radius: 6px; } .site-header__nav .sub-menu a::after { display: none; } .site-header__nav .sub-menu a:hover { background: var(--bg-elevated); } .site-header__nav .menu-item-has-children > a::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; } /* --- Área de conta (à direita do header) --- "Sobre a Revista" institucional + Login/Assinar (visitante) ou avatar/nome real + dropdown de conta (logado). Ver inc/nav-header.php. */ .site-header__account { display: flex; align-items: center; gap: 18px; margin-left: auto; flex-shrink: 0; } .site-header__account-item { position: relative; font-size: 14px; font-weight: 500; color: var(--text-dim); transition: color 0.2s; } a.site-header__account-item:hover { color: var(--text); } .site-header__account-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; } .site-header__account-item:hover, .site-header__account-item:focus-within { color: var(--text); } .site-header__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); } .site-header__account .sub-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 200px; margin-top: 10px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); z-index: 200; list-style: none; flex-direction: column; gap: 0; } .site-header__account-item:hover .sub-menu, .site-header__account-item:focus-within .sub-menu { display: flex; } /* Mesma "ponte" invisível do menu principal — cobre o gap do margin-top pra não fechar o dropdown no caminho até ele. */ .site-header__account-item.has-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } .site-header__account .sub-menu a { display: block; padding: 8px 10px; font-size: 13px; white-space: nowrap; border-radius: 6px; color: var(--text-dim); } .site-header__account .sub-menu a:hover { background: var(--bg-elevated); color: var(--text); } .btn--small { padding: 8px 20px; font-size: 13px; } /* =================================================================== Busca por modelo/tag — barra inline (09/07/2026, pedido do André: "ao invés de só a lupa eu quero uma pequena barra de busca no Desktop"). Substituiu o botão de lupa + overlay em tela cheia por um campo pequeno sempre visível no header, com um dropdown ancorado embaixo dele (mesma ideia do YouTube/Pinterest). ATUALIZADO em 09/07/2026 (mesmo dia, 2º pedido): fica visível no mobile TAMBÉM agora (antes só aparecia no desktop, o mobile tinha uma cópia numa "quickbar" separada abaixo do header — removida). No mobile ela encolhe e sobra ao lado do logotipo (nav/conta somem via @media lá embaixo, então só resta logo + busca + hambúrguer). Os botões de atalho (Ensaios/Vídeos/Modelos) que moravam na quickbar saíram do header de vez — agora é template-parts/quick-links.php, abaixo do hero da Home (ver .home-quicklinks mais abaixo). =================================================================== */ .site-header__search { position: relative; flex-shrink: 0; width: 200px; } .site-header__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .site-header__search-input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 14px 8px 34px; color: var(--text); font-family: var(--font-sans); font-size: 13px; transition: border-color 0.2s, width 0.2s; } .site-header__search-input::placeholder { color: var(--text-faint); } .site-header__search-input:focus { outline: none; border-color: var(--accent-1); } .site-header__search:focus-within { width: 250px; } .site-header__search-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; max-height: 60vh; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 8px; z-index: 200; /* Largura fixa da barra (200/250px) não cabe nome+contador do resultado — o dropdown se estica além da barra pra não quebrar feio (mas nunca mais estreito que ela, ver min-width: 100%). */ width: max-content; min-width: 100%; max-width: 320px; } .site-header__search.is-open .site-header__search-dropdown { display: block; } .site-header__search-group + .site-header__search-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .site-header__search-group-title { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); padding: 6px 10px; } .site-header__search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: var(--radius-sm); color: var(--text); } .site-header__search-result:hover { background: var(--bg-card); } .site-header__search-result-name { font-weight: 500; font-size: 14px; } .site-header__search-result-count { font-size: 12px; color: var(--text-faint); flex-shrink: 0; } .site-header__search-empty { padding: 14px 10px; color: var(--text-dim); font-size: 14px; } /* =================================================================== Atalhos "Ensaios/Vídeos/Modelos" abaixo do hero da Home (09/07/2026, pedido do André: "os botoes ficam abaixo do destaque... no Desktop também") — ver template-parts/quick-links.php. Antes moravam no header (só no mobile); agora é uma seção fixa da Home, visível em qualquer largura de tela. =================================================================== */ .home-quicklinks { display: flex; justify-content: center; gap: 10px; padding: 16px 20px 0; } /* CORRIGIDO em 09/07/2026 (feedback do André: "Achei os botoes muito grandes no desktop. Não combinou") — flex:1 esticava cada botão pra ocupar 1/3 do container inteiro (~1300px), virando pílulas enormes. Agora é largura de conteúdo (inline), grupo centralizado, tamanho mais discreto — mais parecido com um filtro/atalho do que um CTA. */ .home-quicklinks__link { flex: 0 0 auto; text-align: center; padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--text-dim); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; transition: color 0.2s, border-color 0.2s; } .home-quicklinks__link:hover { color: var(--text); border-color: var(--border-strong); } @media (max-width: 700px) { .home-quicklinks { padding: 12px 20px 0; } /* No mobile volta a esticar (flex:1) — 3 pílulas ocupando a largura toda cabe bem numa tela estreita, diferente do desktop onde isso ficava enorme. */ .home-quicklinks__link { flex: 1 1 0; padding: 10px 12px; font-size: 13px; } } /* =================================================================== Menu mobile (≤700px) — gaveta lateral (hambúrguer) =================================================================== No desktop, .site-header__nav e .site-header__account aparecem normalmente e .site-header__burger/.mobile-drawer ficam ocultos. No mobile é o oposto: só logo + hambúrguer no header, e todo o conteúdo (nav + conta) mora dentro da gaveta. Ver inc/nav-header.php (guapamag_render_mobile_drawer). */ .site-header__burger { display: none; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: transparent; border: none; cursor: pointer; margin-left: auto; } .site-header__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.25s ease, opacity 0.25s ease; } .mobile-drawer { display: none; } @media (max-width: 700px) { .site-header__nav, .site-header__account { display: none; } .site-header__burger { display: flex; } .site-header__inner { justify-content: space-between; } /* Busca fica visível no mobile (09/07/2026, pedido do André: "a barra de busca tem que ser menor e do lado do logotipo + guapamag") — nav/conta somem acima, então só sobra logo + busca + hambúrguer nessa linha. Encolhe bastante pra caber do lado do wordmark sem espremer o hambúrguer. */ .site-header__search { width: 34vw; max-width: 130px; min-width: 90px; } .site-header__search:focus-within { width: 34vw; max-width: 160px; } .site-header__search-input { padding: 7px 10px 7px 30px; font-size: 12px; } .site-header__search-icon { left: 10px; width: 14px; height: 14px; } /* Estado aberto: hambúrguer vira "X". */ .site-header.is-menu-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-menu-open .site-header__burger span:nth-child(2) { opacity: 0; } .site-header.is-menu-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-drawer { display: block; position: fixed; inset: 0; z-index: 999; visibility: hidden; pointer-events: none; } .mobile-drawer__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 5, 0.6); opacity: 0; transition: opacity 0.25s ease; } .mobile-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(82vw, 340px); background: var(--bg-elevated); border-left: 1px solid var(--border); padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } /* Combinador de irmão (~), não mais descendente: a gaveta (.mobile-drawer) saiu de dentro do

em 05/07/2026 (ver header.php) por causa do bug do backdrop-filter/containing block. */ .site-header.is-menu-open ~ .mobile-drawer { visibility: visible; pointer-events: auto; } .site-header.is-menu-open ~ .mobile-drawer .mobile-drawer__backdrop { opacity: 1; } .site-header.is-menu-open ~ .mobile-drawer .mobile-drawer__panel { transform: translateX(0); } .mobile-drawer__close { display: block; margin-left: auto; width: 32px; height: 32px; background: transparent; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; cursor: pointer; } .mobile-drawer__section { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); } .mobile-drawer__section:first-of-type { border-top: none; padding-top: 0; } .mobile-drawer__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px; } /* CTA "Assinar" pra quem já tem conta mas não é assinante ativo — ver inc/nav-header.php, pedido do André em 06/07/2026. */ .mobile-drawer__cta { display: block; text-align: center; margin-bottom: 14px; } .mobile-drawer nav ul { list-style: none; margin: 0; padding: 0; } .mobile-drawer nav a, .mobile-drawer__link { display: block; padding: 11px 0; font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--border); } .mobile-drawer nav li:last-child > a { border-bottom: none; } .mobile-drawer .sub-menu { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; } .mobile-drawer .sub-menu a { font-size: 14px; color: var(--text-dim); padding: 9px 0; } .mobile-drawer__user { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; } .mobile-drawer .btn { display: block; text-align: center; margin-top: 14px; } } .site-footer { background: var(--bg-elevated); border-top: 1px solid var(--border); margin-top: 48px; } .site-footer__inner { padding: 28px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .site-footer__nav ul { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; } .site-footer__nav li { list-style: none; } .site-footer__nav a { font-size: 13px; color: var(--text-faint); transition: color 0.2s; } .site-footer__nav a:hover { color: var(--text-dim); } .site-footer__nav li.current-menu-item > a, .site-footer__nav li.current_page_item > a { color: var(--text-dim); } .site-footer__copy { font-size: 12px; color: var(--text-faint); } /* =================================================================== Hero da home (3 variantes — front-page.php escolhe via Customizer) =================================================================== */ .hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; background-color: var(--bg-card); background-size: cover; background-position: center; overflow: hidden; margin-bottom: 40px; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 4, 5, 0.85) 0%, rgba(4, 4, 5, 0.35) 45%, rgba(4, 4, 5, 0.05) 75%); z-index: 1; } .hero__inner { position: relative; z-index: 2; padding-bottom: 52px; max-width: 720px; margin: 0 auto; text-align: center; } .hero__tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; } .hero__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px, 6vw, 58px); line-height: 1.05; letter-spacing: -0.5px; margin: 0 0 12px; } .hero__modelo { color: var(--text-dim); font-size: 15px; margin-bottom: 22px; } /* --- Variante: vídeo de fundo --- */ .hero__video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; } .hero__video-frame { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 178%; min-height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; } /* --- Variante: carrossel --- */ .hero--carrossel .hero__slides { position: relative; width: 100%; min-height: 560px; } .hero__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; background-size: cover; background-position: center; opacity: 0; z-index: 0; transition: opacity 0.6s ease; } .hero__slide.is-active { opacity: 1; z-index: 1; } .hero__dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 8px; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: none; padding: 0; cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .hero__dot:hover { background: rgba(255, 255, 255, 0.6); } .hero__dot.is-active { background: var(--accent-1); transform: scale(1.2); } @media (max-width: 700px) { .hero, .hero--carrossel .hero__slides { min-height: 420px; } .hero__inner { padding-bottom: 32px; } } /* =================================================================== Ensaio single (single-portfolio_item.php) =================================================================== */ .ensaio-single { padding: 28px 20px 56px; } .ensaio-single__cover { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; border: 1px solid var(--border); } .ensaio-single__cover img { width: 100%; height: auto; display: block; } .ensaio-single__header { max-width: 900px; margin: 0 auto 32px; } .ensaio-single__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .ensaio-single__tag { display: inline-block; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; padding: 5px 13px; border-radius: 999px; transition: border-color 0.2s, color 0.2s; } .ensaio-single__tag:hover { border-color: var(--border-strong); color: var(--text); } .ensaio-single__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -0.4px; margin: 0 0 12px; } .ensaio-single__desc { color: var(--text-dim); font-size: 15px; margin-bottom: 14px; max-width: 640px; } .ensaio-single__models { margin-bottom: 16px; } .ensaio-single__models a { color: var(--accent-1); font-size: 14px; font-weight: 500; } .ensaio-single__models a:hover { text-decoration: underline; } .ensaio-single__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text-faint); font-size: 13px; } .ensaio-single__curtir { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .ensaio-single__curtir:hover { border-color: var(--accent-1); color: var(--text); } .ensaio-single__liked { color: var(--accent-1); font-weight: 600; } .ensaio-single__content { max-width: 900px; margin: 0 auto; } /* "Acessar perfil da modelo" + ícones — movido pro final do ensaio (depois da galeria, antes dos comentários) em 08/07/2026, pedido do André. Reaproveita .ensaio-single__models/__meta (mesma aparência de quando ficavam no header). */ .ensaio-single__footer-meta { max-width: 900px; margin: 28px auto 0; } /* Teaser do guapamag.tv (Bunny), embutido no topo do ensaio pra Visitante/Cliente — pedido do André em 08/07/2026. */ .ensaio-single__teaser-tv { max-width: 900px; margin: 0 auto 24px; } .ensaio-single__teaser-tv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-elevated); border-radius: var(--radius-md); overflow: hidden; } .ensaio-single__teaser-tv-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .ensaio-single__galeria { /* Trocado de flex-column pra block "puro" em 05/07/2026: o vídeo vertical agora flutua (float) ao lado da galeria (efeito "masonry", pedido do André pra não ocupar a tela toda antes das fotos) — isso só funciona em fluxo normal de bloco, não dentro de flex/grid. overflow:hidden aqui contém a altura do float (senão o container "colava" achatado, ignorando a altura do vídeo flutuante). */ overflow: hidden; margin-bottom: 28px; } .ensaio-single__texto { color: var(--text-dim); font-size: 15px; line-height: 1.8; margin-bottom: 28px; } .ensaio-single__bastidor-link { /* Sempre abaixo do vídeo vertical flutuante, nunca espremido do lado dele — independente de quantas fotos a galeria tiver. */ clear: both; } .ensaio-single__bastidor-link a { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-size: 14px; padding: 12px 20px; border-radius: var(--radius-md); transition: border-color 0.2s; } .ensaio-single__bastidor-link a:hover { border-color: var(--accent-1); } .ensaio-single__footer { max-width: 900px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--border); } .ensaio-single__curtidas-footer { display: flex; align-items: center; gap: 12px; } .curtir_ensaio { font-size: 14px; color: var(--text-dim); } .curtir_cheio { color: var(--accent-1); font-weight: 600; } .ensaio-single__interview { max-width: 900px; margin: 40px auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; } .ensaio-single__interview h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 8px; } .ensaio-single__interview h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin-bottom: 12px; } .ensaio-single__interview-texto { color: var(--text-dim); font-size: 15px; line-height: 1.8; margin-bottom: 18px; } /* =================================================================== Vídeo embutido (template-parts/video-embed.php) =================================================================== */ .ensaio-single__video { position: relative; aspect-ratio: 16 / 9; background-color: var(--bg-card); background-size: cover; background-position: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); cursor: pointer; margin-bottom: 24px; /* antes vinha do gap do flex, removido acima */ } /* Garante que um 2º vídeo (ex: prévia do bastidor pro Cliente) sempre desça pra baixo do vídeo vertical flutuante, em vez de tentar encaixar do lado — só a variante --vertical abaixo deve flutuar. */ .ensaio-single__video:not(.ensaio-single__video--vertical) { clear: both; } .ensaio-single__video::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 40%); } .ensaio-single__video::after { content: ''; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat; border: 1px solid rgba(255, 255, 255, 0.3); transition: transform 0.2s, background-color 0.2s; } .ensaio-single__video:hover::after { transform: translate(-50%, -50%) scale(1.08); background-color: rgba(255, 255, 255, 0.2); } /* Vídeo vertical (clip gravado no celular) vinculado ao ensaio — sem isso a thumbnail (background-size:cover num box 16:9) cortava a imagem de um jeito estranho, como se fosse um vídeo horizontal. Mesma ideia do .video-card--vertical / .video-player-modal__box--vertical. */ .ensaio-single__video--vertical { /* Pedido do André em 05/07/2026: vídeo vertical de ponta a ponta ocupava a tela toda antes de chegar na galeria — troca por um layout "masonry", flutuando à esquerda com a galeria de fotos encaixando ao lado (a galeria é display:grid, que já se comporta como um bloco novo e "abraça" o float automaticamente). ACHADO (mesmo dia): dimensionar por %-da-largura-da-tela escala mal pra 9:16 — no mobile isso ainda virava um bloco gigante (360x640px, quase a tela toda). Travar por ALTURA fixa em vez de largura resolve: a largura sai sozinha da proporção (~146px) e o tamanho fica igual em qualquer aparelho, sem precisar de uma regra diferente pro mobile. */ float: left; height: 260px; width: auto; aspect-ratio: 9 / 16; margin: 0 20px 20px 0; } .ensaio-single__video-label { position: absolute; top: 14px; left: 14px; z-index: 1; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; padding: 6px 14px; border-radius: 999px; } /* =================================================================== Galeria de fotos (template-parts/galeria.php) =================================================================== */ .guapamag-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 24px; /* espaço antes do link de bastidor, ver .ensaio-single__bastidor-link */ } /* --------------------------------------------------------------------- Modo "columns" (vídeo VERTICAL mesclado na galeria) — ver template-parts/galeria.php "extra_first_item"/"layout". TENTATIVA 1 (05/07/2026, revertida): "columns" (multi-coluna CSS) tinha o mesmo problema do .video-grid--mixed — preenche cima-a-baixo numa coluna inteira antes de passar pra próxima ("column-major"), então a foto do lado do vídeo não era a 1ª da galeria, e sim lá do meio (onde a 1ª coluna "estourou" pra 2ª). O André pediu ordem de LEITURA (esquerda->direita, cima->baixo) — isso só existe em grid de verdade. TENTATIVA 2 (atual): volta a ser grid (mesma grade de sempre, mesmas colunas responsivas — "auto-fill, minmax(160px,1fr)" da regra base acima, sem mudar nada disso), só ligando grid-auto-flow:dense. Com dense, o algoritmo de auto-posicionamento das fotos varre em ordem de leitura e só pula a célula que o vídeo já ocupa — ordem correta garantida, e continua a mesma contagem de colunas de antes em cada tamanho de tela (2 no mobile porque é o que cabe, mais no desktop). */ .guapamag-galeria--columns { grid-auto-flow: row dense; /* Fixo em 2 no mobile (era auto-fill/responsivo, mas cada largura de tela dá uma contagem diferente de "quantas fotos dividem a linha do vídeo" — precisa saber o número exato pra combinar a altura delas com a do vídeo, ver regras de aspect-ratio abaixo). */ grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .guapamag-galeria--columns { /* Testado com o auto-fill (5 colunas numa tela larga): sobrava espaço em branco embaixo de VÁRIAS fotos da linha do vídeo (só a 1ª tinha a altura combinada). André pediu pra testar 4 fixas — com menos fotos dividindo a linha do vídeo, dá pra combinar a altura de TODAS elas (ver regra de nth-child abaixo), fechando a linha sem sobra nenhuma, em vez de só a primeira. */ grid-template-columns: repeat(4, 1fr); } } /* Vídeo ocupa a 1ª coluna, só 1 linha (não span 2 — isso sobrava uma faixa enorme em branco embaixo dele, reportado pelo André em 05/07/2026: 2 linhas de foto 3:4 são mais altas do que o vídeo 9:16 precisa). Sem float: aqui ele é só mais uma célula do grid. */ .guapamag-galeria--columns .ensaio-single__video--vertical { grid-column: 1; float: none; width: 100%; height: auto; aspect-ratio: 9 / 16; } /* As fotos que dividem a MESMA linha do vídeo ganham a mesma proporção 9:16 dele em vez do 3:4 padrão — como todas têm a mesma largura de coluna, ficam com a mesma altura exata e a linha fecha sem sobrar espaço embaixo de nenhuma. No mobile (2 colunas) só a 1ª foto divide a linha com o vídeo; no desktop (4 colunas) são as 3 primeiras. As fotos das linhas de baixo continuam no 3:4 normal. */ .guapamag-galeria--columns .ensaio-single__video--vertical ~ .guapamag-galeria__item:nth-child(-n+2) { aspect-ratio: 9 / 16; } @media (min-width: 700px) { .guapamag-galeria--columns .ensaio-single__video--vertical ~ .guapamag-galeria__item:nth-child(-n+4) { aspect-ratio: 9 / 16; } } .guapamag-galeria__item { display: block; position: relative; aspect-ratio: 3 / 4; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; cursor: pointer; line-height: 0; transition: border-color 0.2s; } .guapamag-galeria__item:hover { border-color: var(--border-strong); } .guapamag-galeria__thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .guapamag-galeria__item:hover .guapamag-galeria__thumb { transform: scale(1.04); } /* =================================================================== Paywall (template-parts/paywall-notice.php) =================================================================== */ .paywall-notice { position: relative; text-align: center; border-radius: var(--radius-lg); padding: 44px 32px; overflow: hidden; background: radial-gradient(120% 140% at 50% 0%, #2a1230 0%, #14090f 55%, #0c0710 100%); border: 1px solid #33132f; margin-bottom: 28px; } .paywall-notice__title { font-family: var(--font-serif); font-weight: 500; font-size: 26px; margin-bottom: 10px; } .paywall-notice__text { color: var(--text-dim); font-size: 14px; max-width: 440px; margin: 0 auto 22px; } .paywall-notice .btn { font-size: 15px; padding: 14px 32px; } .paywall-notice__login { margin-top: 16px; font-size: 13px; color: var(--text-faint); } .paywall-notice__login a { color: var(--text-dim); text-decoration: underline; } .paywall-notice__login a:hover { color: var(--text); } /* =================================================================== Cards de ensaio (home / relacionados / série) =================================================================== */ .home-section { max-width: 1200px; margin: 0 auto; padding: 8px 20px 40px; } /* CORRIGIDO em 05/07/2026 (pedido do André): faltava layout aqui — o título e o link "Ver todos" ficavam empilhados, com o link no estilo padrão do navegador (azul, sublinhado), destoando do resto do tema escuro. Título à esquerda, link à direita, quebrando embaixo no mobile — mesmo padrão que já existia só na variante do bastidor. */ .home-section__header { margin-bottom: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .home-section__title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; } .home-section__link { font-size: 14px; font-weight: 500; color: var(--accent-1); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .home-section__link:hover { color: var(--accent-2); text-decoration: underline; } /* "Ver todos" movido pra DEPOIS da seção (ensaios/vídeos/bastidores) — pedido do André em 08/07/2026 (antes ficava no header, ao lado do título). Centralizado em 09/07/2026 (era alinhado à esquerda). */ .home-section__footer { margin-top: 18px; text-align: center; } /* Banner "veja mais da modelo" no fim do bastidor (pedido do André em 06/07/2026) — título + link "Ver perfil completo" lado a lado. */ .bastidor-modelo-banner .home-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .bastidor-modelo-banner__perfil { font-size: 14px; font-weight: 500; color: var(--accent-1); white-space: nowrap; } .bastidor-modelo-banner__perfil:hover { text-decoration: underline; } .bastidor-single__header { margin-bottom: 20px; } .bastidor-single__title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; margin: 0 0 6px; } .bastidor-single__models a { color: var(--accent-1); font-weight: 500; } .bastidor-single__content { margin-top: 20px; } .ensaios-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } .ensaio-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s, border-color 0.2s; } .ensaio-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } .ensaio-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-elevated); } .ensaio-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .ensaio-card:hover .ensaio-card__media img { transform: scale(1.04); } .ensaio-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 55%); pointer-events: none; } .ensaio-card__body { padding: 14px 16px 16px; } .ensaio-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .ensaio-card__tag { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-dim); } /* Tags menores no mobile — pedido do André em 08/07/2026 (card ficava apertado com o tamanho normal em telas pequenas). */ @media (max-width: 480px) { .ensaio-card__tag { font-size: 8px; padding: 2px 7px; } } .ensaio-card__title { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ensaio-card__meta { display: flex; gap: 12px; color: var(--text-faint); font-size: 12px; } /* =================================================================== Card de Bastidor na Home — antes reaproveitava o .ensaio-card (feito pra imagem destacada + tags de ensaio, que bastidor não tem). Pedido do André em 06/07/2026: "mudar o formato dos cards de Bastidores para combinar mais com o layout". Estrutura igual ao .ensaio-card (mesmo grid .ensaios-grid--4col), com um selo "Bastidor" no lugar das tags e ícone de play quando o bastidor tem vídeo. =================================================================== */ .bastidor-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s, border-color 0.2s; } .bastidor-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } .bastidor-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-elevated); } .bastidor-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .bastidor-card:hover .bastidor-card__img { transform: scale(1.04); } /* Blur pra quem não é assinante ativo (ver template-parts/bastidor-card.php) — scale(1.12) evita a borda nítida que o blur deixa nas quinas da imagem. */ .bastidor-card__img--blur { filter: blur(20px) saturate(1.15); transform: scale(1.12); } .bastidor-card:hover .bastidor-card__img--blur { transform: scale(1.16); } .bastidor-card__lock { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center / 18px no-repeat; backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.3); } .bastidor-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 55%); pointer-events: none; } .bastidor-card__badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); } .bastidor-card__play { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.2s; } .bastidor-card:hover .bastidor-card__play { opacity: 1; } .bastidor-card__body { padding: 14px 16px 16px; } .bastidor-card__title { font-size: 15px; font-weight: 600; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bastidor-card__modelo { display: block; font-size: 12px; font-weight: 500; color: var(--accent-1); margin-bottom: 8px; } .bastidor-card__meta { display: flex; gap: 12px; color: var(--text-faint); font-size: 12px; } /* =================================================================== Blog (Entrevista/Notícia/Coluna/Eventos) — pedido do André em 06/07/2026, ver page-templates/template-blog.php, category.php e inc/data/blog.php. Card em paisagem (16:9), diferente do ensaio-card em retrato — foto editorial de blog costuma ser horizontal. =================================================================== */ .blog-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); } .blog-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s, border-color 0.2s; } .blog-card:hover { transform: translateY(-3px); border-color: var(--border-strong); } .blog-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-elevated); } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card__badge { position: absolute; top: 10px; left: 10px; background: var(--accent-1); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .blog-card__body { padding: 16px 18px 18px; } .blog-card__date { display: block; font-size: 12px; color: var(--text-faint); margin-bottom: 6px; } .blog-card__title { font-size: 17px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-card__excerpt { font-size: 13px; line-height: 1.5; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; gap: 16px; } } /* "Do blog" na Home — cards pequenos estilo jornal digital (lista de últimas notícias), ver front-page.php e template-parts/blog-mini-card.php. */ .blog-mini-grid { display: grid; gap: 20px 24px; grid-template-columns: repeat(3, 1fr); } .blog-mini-card { display: flex; gap: 12px; align-items: flex-start; } .blog-mini-card__media { flex: 0 0 auto; display: block; width: 84px; height: 84px; border-radius: var(--radius-sm, 8px); overflow: hidden; background: var(--bg-elevated); } .blog-mini-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-mini-card__body { min-width: 0; } .blog-mini-card__cat { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent-1); margin-bottom: 4px; } .blog-mini-card__title { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blog-mini-card__title a { color: var(--text); text-decoration: none; } .blog-mini-card__title a:hover { color: var(--accent-1); } .blog-mini-card__date { font-size: 11px; color: var(--text-faint); } @media (max-width: 900px) { .blog-mini-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-mini-grid { grid-template-columns: 1fr; gap: 14px; } } /* =================================================================== Banners de publicidade/assinatura — pedido do André em 06/07/2026, ver template-parts/ad-banner.php e os 3 slots registrados em inc/setup.php (Home meio de página, fim de ensaio/vídeo, rodapé sitewide). ".ad-banner--fallback" é o banner "Assine a Guapamag" automático (só aparece pra quem não é assinante) enquanto nenhum anúncio de verdade foi configurado no slot via Aparência > Widgets. =================================================================== */ .ad-banner { margin: 32px auto; } .ad-banner--fallback .ad-banner__link { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 28px; border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(236, 47, 129, 0.18), rgba(236, 47, 129, 0.05)); border: 1px solid rgba(236, 47, 129, 0.35); text-decoration: none; } .ad-banner__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-1); margin-bottom: 4px; } .ad-banner__title { display: block; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; } .ad-banner__cta { flex: 0 0 auto; white-space: nowrap; } .ad-banner--wide { margin: 0 auto 24px; } @media (max-width: 600px) { .ad-banner--fallback .ad-banner__link { padding: 18px 20px; } .ad-banner__title { font-size: 14px; } } /* =================================================================== Banner do grupo do Telegram — pedido do André em 06/07/2026, ver template-parts/telegram-banner.php (substitui a versão anterior quebrada, que apontava pra uma imagem inexistente). =================================================================== */ .telegram-banner { margin: 32px auto; } .telegram-banner__link { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 26px; border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(41, 169, 234, 0.16), rgba(41, 169, 234, 0.04)); border: 1px solid rgba(41, 169, 234, 0.4); text-decoration: none; } .telegram-banner__icon { flex: 0 0 auto; width: 44px; height: 44px; display: block; } .telegram-banner__icon svg { width: 100%; height: 100%; display: block; } .telegram-banner__text { flex: 1 1 240px; min-width: 0; } .telegram-banner__title { display: block; font-size: 16px; font-weight: 600; color: var(--text); } .telegram-banner__subtitle { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; } .telegram-banner__cta { flex: 0 0 auto; white-space: nowrap; background: #29A9EA; border-color: #29A9EA; } @media (max-width: 600px) { .telegram-banner__link { padding: 16px 18px; gap: 14px; } .telegram-banner__icon { width: 36px; height: 36px; } .telegram-banner__title { font-size: 14px; } .telegram-banner__subtitle { font-size: 12px; } } /* =================================================================== Packs avulsos + tokens — pedido do André em 06/07/2026, ver page-templates/template-packs.php, template-comprar-tokens.php, template-parts/pack-card.php. =================================================================== */ .packs-saldo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 28px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); } .packs-saldo__label { font-size: 13px; color: var(--text-dim); } .packs-saldo__valor { font-size: 18px; font-weight: 700; color: var(--accent-1); margin-right: auto; } .packs-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); } .pack-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .pack-card__media { position: relative; aspect-ratio: 3 / 4; background: var(--bg-elevated); } .pack-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pack-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%); pointer-events: none; } .pack-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pack-card__modelo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--accent-1); } .pack-card__title { font-size: 15px; font-weight: 600; line-height: 1.35; } .pack-card__excerpt { font-size: 12px; color: var(--text-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pack-card__footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pack-card__preco { font-size: 13px; font-weight: 600; color: var(--text-dim); } .pack-card__btn { flex: 0 0 auto; } .pack-card__btn--baixar { width: 100%; text-align: center; } .tokens-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin: 28px 0; } .token-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 28px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); } .token-card__qtd { font-size: 32px; font-weight: 700; color: var(--accent-1); } .token-card__qtd-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin-bottom: 8px; } .token-card__preco { font-size: 16px; font-weight: 600; margin-bottom: 14px; } .tokens-nota { font-size: 13px; color: var(--text-faint); margin-top: 8px; } @media (max-width: 900px) { .packs-grid { grid-template-columns: repeat(2, 1fr); } .tokens-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .packs-grid { grid-template-columns: 1fr; } } /* =================================================================== Minha Conta — pedido do André em 06/07/2026: "Crie a nova estrutura da /minha-conta". A página em si continua sendo o shortcode nativo do WooCommerce ([woocommerce_my_account], ver inc/woocommerce-account.php pro conteúdo novo injetado nela) — aqui é o tema visual, que antes vinha 100% no padrão claro do WooCommerce, destoando do resto do site escuro. =================================================================== */ .woocommerce-account .woocommerce { max-width: 1100px; margin: 0 auto; padding: 0 20px; color: var(--text); } .woocommerce-MyAccount-navigation { margin-bottom: 24px; } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); padding-bottom: 14px; } .woocommerce-MyAccount-navigation li a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; } .woocommerce-MyAccount-navigation li a:hover { color: var(--text); border-color: var(--border-strong); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--accent-1); border-color: var(--accent-1); color: #fff; } .woocommerce-MyAccount-content { color: var(--text-dim); } .woocommerce-MyAccount-content a { color: var(--accent-1); } .woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; } .woocommerce-account table.shop_table th { color: var(--text-faint); font-weight: 600; } .woocommerce-account form .form-row label { color: var(--text-dim); font-size: 13px; } .woocommerce-account form .form-row input, .woocommerce-account form .form-row select, .woocommerce-account form .form-row textarea { width: 100%; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; } .woocommerce-account .button, .woocommerce-account button.button, .woocommerce-account input.button { display: inline-block; background: var(--accent-grad); color: #fff; font-weight: 600; font-size: 14px; padding: 12px 28px; border-radius: 999px; border: none; cursor: pointer; } /* Tela de login/cadastro (deslogado) — pedido do André em 09/07/2026: "os botões e a cor você fez, mas o resto continuou o padrão do WordPress". Achado: o CSS de Minha Conta até aqui só cobria o painel de quem JÁ está logado (.woocommerce-MyAccount-*) — o formulário de login/cadastro em si (#customer_login, gerado pelo template nativo myaccount/form-login.php do WooCommerce) nunca tinha sido tocado. Usa o ID #customer_login de propósito nos seletores abaixo: o CSS estrutural do próprio WooCommerce (woocommerce-layout.css, sempre carregado) estiliza os campos com uma classe a mais (.input-text), ganhando em especificidade de qualquer regra só com classe — só um seletor com ID garante vencer isso sem precisar de !important. */ #customer_login { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; } #customer_login .u-column1, #customer_login .u-column2 { flex: 1 1 320px; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; } #customer_login h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; margin: 0 0 20px; color: var(--text); } #customer_login .form-row { margin-bottom: 16px; } #customer_login label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-dim); } #customer_login input[type="text"], #customer_login input[type="email"], #customer_login input[type="password"] { width: 100%; padding: 11px 14px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); font-family: var(--font-sans); font-size: 14px; } #customer_login input[type="text"]:focus, #customer_login input[type="email"]:focus, #customer_login input[type="password"]:focus { outline: none; border-color: var(--accent-1); } #customer_login .woocommerce-form-login__rememberme, #customer_login .woocommerce-form-register__generate-password { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; margin-bottom: 16px; } #customer_login input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-1); } #customer_login .woocommerce-LostPassword { margin-top: 14px; font-size: 13px; } #customer_login .woocommerce-LostPassword a, #customer_login .woocommerce-privacy-policy-text a { color: var(--accent-1); } #customer_login .woocommerce-privacy-policy-text { color: var(--text-faint); font-size: 12px; line-height: 1.5; margin: 4px 0 18px; } #customer_login .woocommerce-form-register__submit, #customer_login .woocommerce-form-login__submit { margin-top: 4px; } @media (max-width: 700px) { #customer_login { gap: 16px; } #customer_login .u-column1, #customer_login .u-column2 { flex-basis: 100%; padding: 22px 18px; } } /* =================================================================== page.php (fallback genérico) — achado junto do /minha-conta: nunca tinha CSS nenhum, então o h1 saía no serifado padrão do navegador em vez do Fraunces do resto do tema. Afeta qualquer Page sem template próprio (Minha Conta, Sobre a Revista, Inscrição Fotógrafos/Modelos). =================================================================== */ .page-default { padding: 40px 0 60px; } .page-default__cover { margin-bottom: 24px; border-radius: var(--radius-md); overflow: hidden; } .page-default__cover img { width: 100%; height: auto; display: block; } .page-default__title { font-family: var(--font-serif); font-size: clamp(24px, 4vw, 34px); font-weight: 600; margin: 0 0 24px; color: var(--text); } .page-default__content { color: var(--text-dim); line-height: 1.7; } .page-default__content a { color: var(--accent-1); } /* Resumo no topo do Painel (Dashboard) — ver guapamag_render_conta_resumo() em inc/woocommerce-account.php. */ .conta-resumo { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 28px; } .conta-resumo__item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); } .conta-resumo__label { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; } .conta-resumo__valor { font-size: 18px; font-weight: 700; color: var(--text-dim); } .conta-resumo__valor.is-assinante { color: var(--accent-1); } .conta-resumo__links { grid-column: 1 / -1; display: flex; gap: 18px; font-size: 13px; } .conta-tokens__lista { list-style: none; margin: 0; padding: 0; } .conta-tokens__lista li { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; } @media (max-width: 700px) { .conta-resumo { grid-template-columns: 1fr; } } /* =================================================================== Landing de Modelo (SEO) — pedido do André em 06/07/2026, ver page-templates/template-modelo-landing.php. =================================================================== */ .modelo-landing__hero { display: flex; gap: 32px; align-items: center; padding: 40px 0; flex-wrap: wrap; } .modelo-landing__hero-photo { flex: 0 0 auto; width: 220px; height: 280px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); } .modelo-landing__hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .modelo-landing__hero-texto { flex: 1 1 320px; } .modelo-landing__title { font-size: 32px; line-height: 1.2; margin-bottom: 12px; } .modelo-landing__bio { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: 10px; } .modelo-landing__local { color: var(--text-faint); font-size: 14px; margin-bottom: 18px; } .modelo-landing__cta { display: inline-block; } .modelo-landing__teaser, .modelo-landing__sobre { padding: 32px 0; border-top: 1px solid var(--border); } .modelo-landing__teaser h2, .modelo-landing__sobre h2 { font-size: 22px; margin-bottom: 18px; } .modelo-landing__sobre p { color: var(--text-dim); line-height: 1.7; margin-bottom: 18px; max-width: 760px; } .modelo-landing__cta-final { text-align: center; padding: 48px 24px; margin: 24px 0; border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(236, 47, 129, 0.18), rgba(236, 47, 129, 0.05)); border: 1px solid rgba(236, 47, 129, 0.35); } .modelo-landing__cta-final h2 { font-size: 24px; margin-bottom: 10px; } .modelo-landing__cta-final p { color: var(--text-dim); margin-bottom: 20px; } @media (max-width: 700px) { .modelo-landing__hero { flex-direction: column; align-items: flex-start; } .modelo-landing__hero-photo { width: 100%; height: 320px; } .modelo-landing__title { font-size: 24px; } } /* =================================================================== Barra de filtro por tag (Ensaios/Vídeos) — padrão guapamag.tv, 05/07/2026: substituiu o header antigo (título da página + descrição) no topo das páginas de arquivo. Pills lado a lado, scroll horizontal no mobile, clicar recarrega a página filtrada (?tag=slug). =================================================================== */ .tag-filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 20px; margin-bottom: 24px; border-bottom: 1px solid var(--border); scrollbar-width: none; } .tag-filter-bar::-webkit-scrollbar { display: none; } .tag-filter-bar__tag { flex: 0 0 auto; padding: 7px 16px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background 0.2s, border-color 0.2s, color 0.2s; } .tag-filter-bar__tag:hover { border-color: var(--border-strong); color: var(--text); } .tag-filter-bar__tag.is-active { background: var(--accent-1); border-color: var(--accent-1); color: #fff; } /* =================================================================== Grid de vídeos "masonry" (mesmo padrão do guapamag.tv, aqui usando os vídeos do Cloudflare Stream do guapamag.com) — home "Vídeos Novos" e page-videos.php (Arquivo de Vídeos). =================================================================== */ /* REESCRITO em 08/07/2026 (6ª tentativa, referência: Pinterest). A 5ª tentativa (CSS `columns`, todo card 100% da largura da coluna) resolveu o espaço em branco do lado do vertical, MAS criou um bug diferente no Arquivo de Vídeos — André: "ao clicar em carregar mais, ele muda todos os vídeos anteriores exibidos na tela". Causa raiz: `columns` do CSS balanceia as colunas de novo TODA VEZ que o conteúdo muda — ao entrar vídeo novo no fim do HTML, o navegador redistribui TODOS os cards (inclusive os que já estavam visíveis) pelas colunas de novo, então cards que já estavam na coluna 1 podem pular pra coluna 3, etc. Isso é uma limitação conhecida do `columns` do CSS: ele não é "append-safe". Por isso trocou pra masonry montado via JS de verdade (ver guapamagMontarMasonry() em assets/js/theme.js): PHP continua só imprimindo os cards em sequência dentro de `.video-grid--mixed` (aqui e no "Carregar mais"), e o JS que divide em N colunas (flex row de `.video-grid__col`), colocando cada card na coluna MAIS BAIXA no momento — cards já distribuídos nunca são tocados de novo, só os novos (do carregar mais) entram nas colunas, sem mexer no que já estava lá. */ .video-grid--mixed { display: flex; align-items: flex-start; gap: 14px; } .video-grid__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 0; } .video-card { display: block; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: transform 0.2s, border-color 0.2s; } .video-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .video-card__thumb { position: relative; /* Pedido do André em 08/07/2026 (1ª rodada: "os horizontais podem ficar um pouco maiores" — foi pra 4:3; 2ª rodada: "ainda maior, igual em qualquer tela" — foi pra 1:1 quadrado; 3ª rodada: "gostei do quadrado, mas mescla com o horizontal — três formatos no masonry: vertical, horizontal e quadrado"). Esse é o formato HORIZONTAL "puro" — mais largo que alto — que fica ao lado do quadrado (.video-card--square, só pra quem NÃO é vertical, ver template-parts/video-card.php) pra dar variedade ao masonry, como o André pediu. */ aspect-ratio: 4 / 3; background-color: var(--bg-elevated); background-size: cover; background-position: center; } /* Thumb real da (09/07/2026, ver template-parts/video-card.php) — preenche o mesmo box que antes era o background-image do próprio .video-card__thumb, agora com lazy-loading nativo de verdade. */ .video-card__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .video-card--square .video-card__thumb { aspect-ratio: 1 / 1; } /* Vertical: André confirmou que o 3:4 do desktop já "está bom" e pediu pra usar o MESMO tamanho no mobile (em vez do 9:16 que tinha antes lá) — por isso agora é uma regra só, sem diferença por breakpoint. */ .video-card--vertical .video-card__thumb { aspect-ratio: 3 / 4; } .video-card__thumb::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.2s; } .video-card:hover .video-card__thumb::after { opacity: 1; } /* Paywall na thumbnail de vídeo específico (08/07/2026, ver inc/admin-video-thumb-gate.php) — sem background-image nenhum (só a cor de fundo escura do card), com um aviso central no lugar. */ .video-card__thumb--gated, .video-single__hero--gated { display: flex; align-items: center; justify-content: center; } .video-card__gate { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; color: var(--text-faint); } .video-card__gate-icon { font-size: 26px; line-height: 1; } .video-card__gate-text { font-size: 12px; font-weight: 600; } .video-card__gate--single .video-card__gate-icon { font-size: 40px; } /* Texto branco só no aviso DENTRO DO MODAL (pedido do André 09/07/2026) — o gate pequeno nos cards de vídeo continua discreto (--text-faint), só o aviso do modal, que agora é uma caixa de destaque própria, ganha mais contraste. */ .video-card__gate--single .video-card__gate-text { font-size: 15px; color: #fff; } .video-card__clip-badge { position: absolute; top: 8px; left: 8px; background: var(--accent-1); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 8px; border-radius: 999px; } .video-card__title { padding: 10px 12px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Views do vídeo (proxy via ensaio vinculado — 05/07/2026) */ .video-card__meta { display: flex; gap: 12px; padding: 0 12px 10px; color: var(--text-faint); font-size: 12px; } .video-single__meta { display: flex; align-items: center; gap: 16px; color: var(--text-faint); font-size: 13px; margin: 0 0 16px; } @media (max-width: 900px) { .video-grid--mixed { gap: 10px; } .video-grid__col { gap: 10px; } } @media (max-width: 480px) { .video-grid--mixed { gap: 8px; } .video-grid__col { gap: 8px; } .video-card__title { font-size: 12px; padding: 8px 10px 10px; } } /* =================================================================== Modal de vídeo / Lightbox — mecânica preservada, visual atualizado =================================================================== */ .video-player-modal, .guapamag-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(4, 4, 5, 0.94); backdrop-filter: blur(6px); } .video-player-modal.is-active, .guapamag-lightbox.is-active { display: flex; align-items: center; justify-content: center; } /* Vídeo + "Próximos vídeos" lado a lado no desktop (padrão YouTube/ Vimeo) — vira empilhado (vídeo em cima, lista embaixo, rolando na horizontal) no mobile. Ver media query mais abaixo. */ .video-player-modal__inner { display: flex; align-items: flex-start; gap: 16px; width: 92%; max-width: 1100px; max-height: 90vh; } .video-player-modal__box { position: relative; flex: 1 1 auto; min-width: 0; max-width: 780px; aspect-ratio: 16 / 9; background: #000; /* era transparente/branco enquanto o player carregava */ border-radius: var(--radius-md); overflow: hidden; } .video-player-modal__frame { background: #000; border: none; /*