/* ========================================================================= Anime United — main.css Carregado de forma não bloqueante. Mobile-first. Tokens de cor/geometria vivem em assets/css/critical.css (:root e :root[data-theme="dark"]), que é inlinado no . ========================================================================= */ /* ---------- Tipografia base ---------- */ h1,h2,h3,h4{font-family:'Clash Display',Inter,sans-serif;color:var(--au-heading);line-height:1.15;letter-spacing:-.02em} p{margin:0 0 1rem} a:hover{color:var(--au-link-hover)} :focus-visible{outline:3px solid var(--au-focus);outline-offset:2px;border-radius:4px} /* ---------- Layout ---------- */ .au-container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)} .au-main{min-height:50vh} .au-layout{display:grid;gap:2rem;padding-block:2rem} .au-layout__content{min-width:0} @media(min-width:1024px){.au-layout--sidebar{grid-template-columns:minmax(0,1fr) 340px}} .au-section{max-width:1280px;margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem)} .au-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem} .au-section__title{font-size:clamp(1.5rem,1.2rem+1.2vw,2rem);margin:0} .au-section__title--brand{background:linear-gradient(135deg,#5FAEFF,#0072FF);-webkit-background-clip:text;background-clip:text;color:transparent} .au-section__link{font-weight:600;font-size:.9rem;white-space:nowrap} /* ---------- Botões ---------- */ a.au-btn--ghost,.au-btn--ghost{background:transparent;color:var(--au-accent-3);border:1px solid rgba(137,199,255,.35)} .au-btn--ghost:hover{background:rgba(137,199,255,.12)} .au-btn--sm{padding:.5em 1em;font-size:.82rem} .au-btn--block{display:flex;width:100%} /* ---------- Pills ---------- */ .au-pill--solid{background:#0072FF;color:#fff} /* ---------- Header / Nav ---------- */ .au-nav__list{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0} .au-nav__list a{color:#E8EEF7;font-weight:500;font-size:.95rem;padding:.5rem 0;position:relative} .au-nav__list a:hover,.au-nav__list a:focus-visible{color:var(--au-brand)} .au-nav__list .current-menu-item>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#0072FF;border-radius:2px} @media(max-width:1023px){ .au-nav{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--au-surface);transform:translateX(100%);transition:transform .3s var(--au-ease);padding:5rem 1.5rem 2rem;z-index:99;box-shadow:var(--au-shadow)} .au-nav.is-open{transform:translateX(0)} .au-nav__list{flex-direction:column;gap:.5rem} .au-nav__list a{display:block;padding:.75rem;border-radius:var(--au-radius-sm)} .au-burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)} .au-burger.is-open span:nth-child(2){opacity:0} .au-burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} } .au-header__cta{white-space:nowrap} @media(max-width:479px){.au-header__cta{display:none}} /* ---------- Busca AJAX ---------- */ /* gap:0 é obrigatório, não estético: o campo e o botão são desenhados para se encostar (o input tem border-right:none e raio pill 0 0 pill; o botão, o espelho disso). Qualquer gap abre a borda direita do input. A versão mobile abaixo já usava 0 — o desktop tinha ficado com .4rem. A altura vai explícita nos dois porque os paddings verticais divergiam (.55rem no campo, .49rem no botão), o que criava um degrau na emenda. */ .au-search{position:relative;display:flex;align-items:center;gap:0} .au-search__field{display:flex} .au-search__input{background:var(--au-field);border:var(--au-border);border-radius:var(--au-pill) 0 0 var(--au-pill);color:var(--au-text);padding:0 1rem;height:38px;width:min(42vw,240px);font-size:.9rem;border-right:none} .au-search__input::placeholder{color:var(--au-text-4)} @media(max-width:767px){.au-search__input{width:140px}} .au-search__submit{background:var(--au-field);border:var(--au-border);border-radius:0 var(--au-pill) var(--au-pill) 0;color:#0072FF;padding:0 .9rem;height:38px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;font-size:0;flex-shrink:0} .au-search__submit:hover{background:#f5f9ff;color:#0A2A66} .au-search__submit:active{transform:scale(.96)} .au-search__submit svg{width:18px;height:18px;display:block} .au-search__results{position:absolute;top:calc(100% + .5rem);right:0;width:min(90vw,360px);background:var(--au-surface);border:var(--au-border);border-radius:var(--au-radius-md);box-shadow:var(--au-shadow);overflow:hidden;z-index:120} .au-search__results a{display:flex;gap:.75rem;align-items:center;padding:.6rem .9rem;color:#E8EEF7} .au-search__results a:hover,.au-search__results a.is-active{background:rgba(0,114,255,.18)} .au-search__results img{width:44px;height:44px;border-radius:8px;object-fit:cover} .au-search__results .au-res__type{font-size:.72rem;color:#89C7FF;display:block} /* ---------- Hero (parte complementar fora do critical) ---------- */ .au-hero__excerpt{color:#B6C4D6;margin-bottom:1.25rem} .au-hero__highlight-tag{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;opacity:.9} .au-hero__highlight-media img{aspect-ratio:1;object-fit:cover;border-radius:var(--au-radius-md);margin:.75rem 0} .au-hero__highlight-title{font-size:1.25rem;margin:.25rem 0} .au-hero__stats{display:flex;gap:1.25rem;list-style:none;padding:0;margin:1rem 0;font-weight:600} .au-hero__stats li{display:flex;align-items:center;gap:.35rem} .au-hero__podcast{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.2)} .au-hero__podcast-label{font-size:.75rem;text-transform:uppercase;opacity:.85;margin:0} .au-hero__podcast-link{color:#fff;font-weight:600} /* ---------- Cards (genérico) ---------- */ .au-thumb,.au-thumb-placeholder{width:100%;border-radius:var(--au-radius-md);background:var(--au-surface-2)} .au-thumb-placeholder{aspect-ratio:16/10} .au-grid{display:grid;gap:1.5rem} .au-grid--cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .au-grid--anime{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))} .au-post-card{background:var(--au-surface);border-radius:var(--au-radius-lg);overflow:hidden;border:var(--au-border);transition:transform .25s var(--au-ease),box-shadow .25s;display:flex;flex-direction:column} .au-post-card:hover{transform:translateY(-4px);box-shadow:var(--au-shadow)} .au-post-card__media{flex-shrink:0} .au-post-card__media img{aspect-ratio:16/12;object-fit:cover;border-radius:0;display:block;width:100%;max-height:160px} .au-post-card__body{padding:.75rem .9rem;display:flex;flex-direction:column;gap:.4rem} .au-post-card__title{font-size:.9rem;margin:0;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-post-card__title a{color:#fff} .au-post-card__excerpt{color:#B6C4D6;font-size:.78rem;margin:0;display:none} .au-post-card__foot{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;color:#B6C4D6;margin-top:.3rem} /* Article card — overlay style */ .au-article-card{position:relative;border-radius:var(--au-radius-sm);overflow:hidden;aspect-ratio:5/9;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .25s var(--au-ease)} .au-article-card:hover{transform:translateY(-4px)} .au-article-card__media{position:absolute;inset:0;z-index:0;display:block} .au-article-card__media img{width:100%;height:40%;object-fit:cover} .au-article-card__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#000 59%,rgba(0,0,0,.4) 64%,rgba(0,0,0,.1) 65%,transparent 100%)} .au-article-card__body{position:relative;z-index:2;padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem} .au-article-card__title{font-size:.95rem;margin:0;line-height:1.25} .au-article-card__title a{color:#fff!important} .au-article-card__excerpt{color:#fff!important;font-size:.78rem;margin:0;opacity:.88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-article-card__more{color:#89C7FF;font-size:.75rem;font-weight:700;text-decoration:none;margin-top:.1rem} .au-article-card__more:hover{color:#fff} /* ---------- Bloco Artigos — uma linha por artigo ---------- Cada card vira uma faixa: miniatura à esquerda, e à direita a categoria, o título, o resumo e o "Ler mais" empilhados. Isso desmonta o card-overlay declarado acima: a mídia deixa de ser absoluta, o scrim some e o corpo volta ao fluxo normal. Como o texto não está mais sobre a imagem, as cores brancas (que lá em cima usam !important) precisam ser reescritas aqui — daí o !important no excerpt. ATENÇÃO: .au-articles__grid é compartilhado por "Últimos Artigos" e "Primeiras Impressões". Para deixar só o primeiro em linhas, troque o seletor abaixo por .au-articles:not(.au-primeiras-impressoes) .au-articles__grid */ .au-articles__grid{display:grid;gap:0;grid-template-columns:1fr} .au-articles__grid .au-article-card{ position:relative; aspect-ratio:auto; display:grid; grid-template-columns:clamp(110px,20%,180px) minmax(0,1fr); gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--au-hairline); border-radius:0; overflow:visible; } .au-articles__grid .au-article-card:last-child{border-bottom:0} /* O card inteiro não desloca mais no hover — só a miniatura reage. */ .au-articles__grid .au-article-card:hover{transform:none} .au-articles__grid .au-article-card__media{ position:static; inset:auto; z-index:auto; border-radius:var(--au-radius-sm); overflow:hidden; background:var(--au-soft); transition:transform .25s var(--au-ease); } .au-articles__grid .au-article-card:hover .au-article-card__media{transform:translateY(-2px)} .au-articles__grid .au-article-card__media img, .au-articles__grid .au-article-card__media .au-thumb-placeholder{ width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0; } /* Sem imagem sobreposta, o degradê perde a função. */ .au-articles__grid .au-article-card__scrim{display:none} .au-articles__grid .au-article-card__body{ position:static; z-index:auto; padding:0; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; min-width:0; } .au-articles__grid .au-article-card__title{font-size:1rem;line-height:1.3} .au-articles__grid .au-article-card__excerpt{ color:var(--au-text-3)!important; font-size:.82rem; opacity:1; -webkit-line-clamp:2; } .au-articles__grid .au-article-card__more{color:var(--au-accent-ui)} .au-articles__grid .au-article-card__more:hover{color:var(--au-link-hover)} /* Em telas estreitas a miniatura encolhe, mas o formato de linha se mantém. */ @media(max-width:520px){ .au-articles__grid .au-article-card{grid-template-columns:96px minmax(0,1fr);gap:.75rem} .au-articles__grid .au-article-card__title{font-size:.9rem} .au-articles__grid .au-article-card__excerpt{-webkit-line-clamp:2;font-size:.78rem} } /* ---------- Notícias em Destaque (compacto: 1 grande + 4 menores) ---------- */ .au-news__inner,.au-mal__inner,.au-unitedcast__inner,.au-articles__inner{background:var(--au-card);border:var(--au-border);border-radius:var(--au-radius-lg);padding:clamp(1rem,2.5vw,1.5rem)} .au-news__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem} .au-news__heading{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;margin:0} .au-news__all{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#5FAEFF;white-space:nowrap} .au-news__grid{display:grid;gap:1.25rem} @media(min-width:860px){.au-news__grid{grid-template-columns:1fr 1.1fr;align-items:stretch}} /* Card grande (esquerda) — texto sobreposto na imagem */ .au-news__main{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--au-radius-md);overflow:hidden;min-height:300px;aspect-ratio:4/3.4} .au-news__main-media{position:absolute;inset:0;z-index:0;display:block} .au-news__main-media img{width:100%;height:100%;object-fit:cover} .au-news__badge{position:absolute;top:.7rem;left:.7rem;z-index:2;background:#399DDC;color:#fff;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.3em .75em;border-radius:var(--au-pill)} .au-news__main-body{position:relative;z-index:1;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;background:rgba(0,0,0,.8)} .au-news__main-title{font-size:clamp(1.15rem,.9rem+.8vw,1.5rem);margin:0;line-height:1.18} .au-news__main-title a{color:#fff} .au-news__main-excerpt{font-size:.85rem;color:#fff;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-news__main-body .au-news__meta{color:#fff} .au-news__main-body .au-news__cat{color:#fff} /* Rede de segurança para links soltos sobre o degradê escuro. O título fica de fora: com .au-news__main-title dentro do :not(), esta regra (0-3-1) deixa de vencer a que pinta o título de laranja mais abaixo (0-2-1). O outro link do bloco, .au-news__cat, já tem regra própria acima. */ .au-news__main-body a:not(.au-btn):not(.au-logo):not(.au-news__main-title a){color:#fff} /* Lista de 3 menores (direita), alinhada ao topo e à base do card grande */ .au-news__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:.4rem;height:100%} .au-news__item{display:grid;grid-template-columns:118px 1fr;gap:.9rem;align-items:center;padding-bottom:.6rem;border-bottom:1px solid var(--au-hairline)} .au-news__item:last-child{border-bottom:0;padding-bottom:0} .au-news__item-media img{width:118px;aspect-ratio:16/10;object-fit:cover;border-radius:var(--au-radius-sm)} .au-news__item-body{min-width:0} .au-news__item-title{font-size:.92rem;margin:0 0 .3rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:520px){.au-news__item{grid-template-columns:96px 1fr}.au-news__item-media img{width:96px}} /* Meta data · categoria */ .au-news__meta{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:#B6C4D6;margin:0;text-transform:uppercase;letter-spacing:.02em} .au-news__sep{opacity:.6} .au-news__cat{color:#5FAEFF;font-weight:700} /* ---------- UnitedCast ---------- */ .au-unitedcast__grid{display:grid;gap:1.5rem} @media(min-width:960px){.au-unitedcast__grid{grid-template-columns:1fr minmax(260px,300px)}} .au-cast-main{display:grid;gap:1.25rem;align-items:start} @media(min-width:560px){.au-cast-main{grid-template-columns:200px 1fr}} .au-cast-main__cover-col{display:flex;flex-direction:column;gap:.75rem} .au-cast-main__cover-col img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--au-radius-md)} .au-cast-main__body{display:flex;flex-direction:column;gap:.6rem} .au-cast-main__badge{display:inline-block;background:#399DDC;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.3em .8em;border-radius:var(--au-pill);width:fit-content} .au-cast-main__title{font-size:1.25rem;margin:0;line-height:1.2} .au-cast-main__title a{color:var(--au-text)} .au-cast-main__excerpt{color:var(--au-text-3);font-size:.88rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .au-cast-main__actions{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap} .au-cast-main__cta{display:inline-flex;align-items:center;gap:.4rem;padding:.55em 1em;font-size:.82rem;white-space:nowrap} .au-cast-main__platforms{display:flex;gap:.5rem} .au-platform{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;text-decoration:none;transition:opacity .2s;flex-shrink:0} .au-platform:hover{opacity:.82} .au-platform svg{width:17px;height:17px;fill:#fff} .au-platform--spotify{background:#1DB954} .au-platform--apple{background:#9933CC} .au-platform--google{background:#4285F4} .au-cast-list{border-left:1px solid var(--au-hairline);padding-left:1.25rem;display:flex;flex-direction:column;gap:0} .au-cast-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;flex:1} .au-cast-list__item{display:grid;grid-template-columns:36px 1fr;gap:.65rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--au-hairline)} .au-cast-list__item:last-child{border-bottom:0} .au-cast-list__play{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#399DDC;color:#fff!important;font-size:.65rem;text-decoration:none;flex-shrink:0;transition:background .2s} .au-cast-list__play:hover{background:#0A2A66} .au-cast-list__body{min-width:0;display:flex;flex-direction:column;gap:.15rem} .au-cast-list__body a{display:block;color:var(--au-text);font-size:.85rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-cast-list__dur{font-size:.7rem;color:var(--au-text-3);white-space:nowrap} .au-cast-list__all{display:block;text-align:center;margin-top:.9rem;font-size:.82rem;font-weight:700;color:#0072FF;text-decoration:none;letter-spacing:.02em} .au-cast-list__all:hover{color:#0A2A66} /* ---------- Player HTML5 ---------- */ .au-player{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem} .au-player__bar{display:flex;align-items:center;gap:.75rem;background:rgba(7,27,61,.6);border-radius:var(--au-pill);padding:.4rem .4rem .4rem .5rem} .au-player__toggle{width:44px;height:44px;border-radius:50%;border:0;background:#0072FF;color:#fff;cursor:pointer;font-size:1rem;display:grid;place-items:center;flex:none} .au-player__progress{flex:1;display:flex;flex-direction:column;gap:.2rem;padding-right:.75rem} .au-player__seek{width:100%;accent-color:#0072FF;cursor:pointer} .au-player__time{font-size:.72rem;color:#B6C4D6;font-variant-numeric:tabular-nums} .au-player__links{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0} .au-player__platform{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .9rem;border-radius:var(--au-pill);font-size:.8rem;font-weight:600;background:rgba(137,199,255,.1);color:#89C7FF} .au-player__platform:hover{background:rgba(137,199,255,.2)} /* ---------- Página Podcast (lista de episódios) ---------- */ .au-podcast-episodes{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem} .au-podcast-episodes__item{padding-bottom:1.5rem;border-bottom:1px solid var(--au-hairline)} .au-podcast-episodes__item:last-child{border-bottom:0;padding-bottom:0} .au-podcast-episodes__title{margin:0 0 .3rem;font-size:1.1rem;font-weight:700} .au-podcast-episodes__date{margin:0;font-size:.8rem;color:var(--au-text-4)} .au-podcast-episodes__excerpt{margin:.5rem 0 0;color:var(--au-text-2);line-height:1.6} /* ---------- Guia da Temporada ---------- */ .au-season__filters{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.75rem;margin-bottom:1.25rem;scrollbar-width:thin} .au-chip{flex:none;background:var(--au-chip-bg);border:var(--au-border);color:#E8EEF7;padding:.5rem 1.1rem;border-radius:var(--au-pill);font-size:.85rem;font-weight:600;cursor:pointer;transition:.2s} .au-chip:hover{background:rgba(0,114,255,.18)} .au-chip.is-active{background:#0072FF;color:#fff;border-color:transparent} .au-season__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:1.25rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scrollbar-width:thin} .au-season__track>*{scroll-snap-align:start} @media(min-width:768px){.au-season__track{grid-auto-columns:minmax(220px,1fr)}} .au-anime-card{background:var(--au-surface);border-radius:var(--au-radius-lg);overflow:hidden;border:var(--au-border);transition:transform .25s var(--au-ease)} .au-anime-card:hover{transform:translateY(-4px)} .au-anime-card__media{position:relative;display:block} .au-anime-card__media img{aspect-ratio:3/4;object-fit:cover} .au-anime-card__score{position:absolute;top:.6rem;left:.6rem;background:rgba(7,27,61,.85);color:#FFD45F;font-weight:700;font-size:.8rem;padding:.25rem .55rem;border-radius:var(--au-pill)} .au-anime-card__body{padding:.85rem} .au-anime-card__title{font-size:1rem;margin:0 0 .4rem} .au-anime-card__title a{color:#fff} .au-anime-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.72rem} .au-anime-card__status{padding:.15rem .5rem;border-radius:var(--au-pill);background:rgba(255,255,255,.08)} .au-anime-card__status--em_exibicao{background:rgba(0,200,120,.18);color:#7CF0B8} /* ---------- Sidebar / Widgets ---------- */ .au-sidebar{display:flex;flex-direction:column;gap:1rem} .au-widget{background:var(--au-surface);border:var(--au-border);border-radius:var(--au-radius-lg);padding:1.25rem} .au-widget__title{font-size:1.05rem;margin:0 0 1rem;position:relative;padding-left:.85rem} .au-widget__title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:2px;background:linear-gradient(#5FAEFF,#0072FF)} .au-widget-cast__cover{display:block;margin-bottom:.75rem} .au-widget-cast__cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--au-radius-md)} .au-widget-cast__title{font-size:1rem;margin:0 0 .5rem} .au-widget-cast__title a{color:var(--au-text)} .au-widget-cast__excerpt{font-size:.82rem;color:var(--au-text-3);margin:0 0 .75rem;line-height:1.5} /* Publicidade */ .au-ad{display:flex;align-items:center;justify-content:center;overflow:hidden} .au-ad--top-single,.au-ad--top-page{margin-bottom:2rem;min-height:90px} .au-ad--before-comments{margin:2rem auto;min-height:300px;width:250px} .au-ad--middle-home{margin:2rem 0;min-height:90px} /* Top banner ad - sticky positioning, disappears on scroll */ .au-ad-background-banner{position:sticky;top:0;left:0;right:0;width:100%;height:400px;z-index:99;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)} .au-ad-background-banner img,.au-ad-background-banner iframe{width:100%;height:100%;object-fit:cover} .au-ad-widget{margin-bottom:1.5rem;min-height:600px} .au-ad-widget__title{margin:0 0 .75rem;font-size:.95rem;font-weight:700} /* Redes Sociais */ .au-redes-sociais__text{margin:0 0 1rem;font-size:.85rem;font-weight:500;color:var(--au-text);line-height:1.4} .au-redes-sociais__links{display:flex;gap:.6rem;flex-wrap:wrap} .au-redes-sociais__link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid #0072FF;color:#0072FF;transition:all .2s var(--au-ease)} .au-redes-sociais__link svg{width:20px;height:20px;color:#0072FF} .au-redes-sociais__link--tiktok:hover{background:#000;border-color:#000;color:#fff} .au-redes-sociais__link--tiktok:hover svg{color:#fff} .au-redes-sociais__link--twitter:hover{background:#fff;border-color:#0072FF;color:#0072FF} .au-redes-sociais__link--twitter:hover svg{color:#0072FF} /* Ícone preto em repouso. Fica antes das regras de :hover porque tem a mesma especificidade da base (.au-redes-sociais__link svg) e menos que o hover — assim vence o azul padrão sem atrapalhar o branco sobre o degradê. */ .au-redes-sociais__link--instagram svg{color:#000} .au-redes-sociais__link--instagram:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:#cc2366;color:#fff} .au-redes-sociais__link--instagram:hover svg{color:#fff} .au-redes-sociais__link--facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff} .au-redes-sociais__link--facebook:hover svg{color:#fff} .au-redes-sociais__link--youtube:hover{background:#FF0000;border-color:#FF0000;color:#fff} .au-redes-sociais__link--youtube:hover svg{color:#fff} .au-redes-sociais__link--rss:hover{background:#FF7D4D;border-color:#FF7D4D;color:#fff} .au-redes-sociais__link--rss:hover svg{color:#fff} .au-widget-cast__actions{display:flex;flex-direction:column;gap:1rem;margin-top:.75rem} .au-widget-cast__also{margin:0;font-size:.78rem;font-weight:600;color:var(--au-text-3);text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.75rem;width:fit-content} .au-widget-cast__also+.au-cast-main__platforms{display:inline-flex;gap:.5rem;align-items:center;margin:-1rem 0 0 0} /* Tendências */ .au-trends{list-style:none;margin:0;padding:0;counter-reset:t;display:flex;flex-direction:column;gap:.9rem} .au-trends__item{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center} .au-trends__rank{font-family:'Clash Display',sans-serif;font-size:1.4rem;font-weight:700;color:#5FAEFF;width:1.5ch;text-align:center} .au-trends__body a{color:#E8EEF7;font-size:.88rem;font-weight:500;display:block;margin-bottom:.35rem} .au-trends__bar{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#0072FF,#89C7FF);width:var(--au-pct);transition:width .6s var(--au-ease)} /* Enquete */ .au-poll__question{font-weight:600;color:#fff;margin-bottom:1rem} .au-poll__form{display:flex;flex-direction:column;gap:.6rem} .au-poll__option{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem .9rem;border-radius:var(--au-radius-md);border:var(--au-border);background:var(--au-chip-bg);color:#E8EEF7;cursor:pointer;overflow:hidden;font-size:.88rem;text-align:left} .au-poll__option:hover{border-color:#399DDC} /* Preenchimento translúcido, não sólido. Com o #0072FF opaco anterior, uma opção em 100% cobria a linha inteira e o rótulo (var(--au-text), quase preto no tema claro) sumia dentro do azul. Translúcido mantém o texto legível em qualquer percentual e sem precisar inverter a cor do label. */ .au-poll__meter{position:absolute;inset:0 auto 0 0;width:var(--au-pct,0%);background:rgba(57,157,220,.22);transition:width .6s var(--au-ease);z-index:0} .au-poll__label,.au-poll__pct{position:relative;z-index:1} .au-poll__pct{font-weight:700;font-variant-numeric:tabular-nums;opacity:1} .au-poll__total{margin:.75rem 0 0;font-size:.78rem;color:#B6C4D6} /* Calendário (CPT episodio) */ .au-calendar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .au-calendar__item{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;padding:.7rem 0;border-bottom:1px solid rgba(137,199,255,.1)} .au-calendar__item:last-child{border-bottom:0} .au-calendar__date{font-weight:700;color:#89C7FF;font-size:.95rem;text-align:center;line-height:1.1} .au-calendar__date small{display:block;font-weight:400;color:#B6C4D6;font-size:.7rem} .au-calendar__item a{color:#E8EEF7;font-size:.88rem} /* Calendário MAL semanal */ .au-cal-mal__subtitle{margin:0 0 .75rem;font-size:.7rem;color:var(--au-text-4);font-weight:500;text-transform:uppercase;letter-spacing:.03em} .au-cal-mal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .au-cal-mal__item{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--au-hairline)} .au-cal-mal__item:last-child{border-bottom:0} .au-cal-mal__item--today .au-cal-mal__dow{color:#0072FF} .au-cal-mal__date{display:flex;flex-direction:column;align-items:flex-start;flex:none} .au-cal-mal__dow{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--au-text-3);line-height:1} .au-cal-mal__day{font-size:.7rem;color:var(--au-text-4);line-height:1.3;white-space:nowrap} .au-cal-mal__title{font-size:.82rem;font-weight:600;color:var(--au-text);text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .au-cal-mal__title:hover{color:#0072FF} .au-cal-mal__time{font-size:.78rem;font-weight:700;color:var(--au-text);font-variant-numeric:tabular-nums;white-space:nowrap} .au-cal-mal__cta{display:block;text-align:center;margin-top:.85rem;padding:.6rem;border:1px solid var(--au-border-c);border-radius:var(--au-radius-md);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--au-text);text-decoration:none;transition:background .2s,border-color .2s} .au-cal-mal__cta:hover{background:rgba(0,114,255,.06);border-color:#0072FF;color:#0072FF} /* ---------- Single / Prose ---------- */ .au-layout__content.au-single{background:var(--au-card);border-radius:20px;padding:clamp(1.25rem,4vw,1.875rem)} .au-single__comments{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(6,18,43,.1)} .au-single__head{margin:1rem 0 1.5rem} .au-single__title{font-size:clamp(1.75rem,1.4rem+2vw,2.75rem);margin:.5rem 0} .au-single__meta{display:flex;gap:1rem;color:#B6C4D6;font-size:.88rem} .au-single__media{margin:0 0 1.5rem} .au-single__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--au-radius-lg)} .au-prose{max-width:760px;font-size:1.05rem} .au-prose img{border-radius:var(--au-radius-md);margin:1.5rem 0} .au-prose h2{margin:2rem 0 .75rem} .au-prose a{text-decoration:underline} .au-anime-facts{background:var(--au-surface);border-radius:var(--au-radius-lg);padding:1.25rem;margin:1.5rem 0} .au-anime-facts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin:0} .au-anime-facts dt{font-size:.72rem;text-transform:uppercase;color:#89C7FF;letter-spacing:.04em} .au-anime-facts dd{margin:.2rem 0 0;font-weight:600;color:#fff} /* ---------- Breadcrumbs ---------- */ .au-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 1rem;padding:0;font-size:.8rem;color:#B6C4D6} .au-breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.4rem;opacity:.5} .au-breadcrumbs a{color:#89C7FF} /* ---------- Páginas / 404 ---------- */ .au-page-head{margin-bottom:1.5rem} .au-page-title{font-size:clamp(1.6rem,1.3rem+1.5vw,2.4rem)} .au-empty{color:#B6C4D6;padding:2rem 0} .au-404{text-align:center;padding:clamp(3rem,10vw,6rem) 1rem} .au-404__code{font-family:'Clash Display',sans-serif;font-size:clamp(4rem,15vw,9rem);font-weight:700;background:linear-gradient(135deg,#5FAEFF,#0072FF);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0;line-height:1} .au-404__inner{max-width:460px;margin-inline:auto;display:flex;flex-direction:column;gap:1rem;align-items:center} /* ---------- Scroll infinito dos arquivos ---------- */ .au-more{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:2rem} .au-more[hidden]{display:none} .au-more__btn{min-width:200px} .au-more__btn[disabled]{opacity:.6;cursor:default} .au-more__status{margin:0;font-size:.82rem;color:var(--au-text-2);min-height:1.2em;text-align:center} /* No mobile o bloco vive dentro do .au-m-list, que já tem padding lateral. */ .au-m-list .au-more{margin-block:1.25rem} /* ---------- Paginação ---------- */ .wp-block-query-pagination,.pagination,.nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:2rem} .nav-links .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 .6rem;border-radius:var(--au-radius-sm);background:var(--au-surface);color:#E8EEF7;border:var(--au-border)} .nav-links .page-numbers.current{background:#0072FF;color:#fff} /* ---------- Rodapé ---------- */ .au-footer{margin-top:3rem;background:transparent;border-top:1px solid var(--au-border-c)} .au-footer__inner{max-width:1280px;margin-inline:auto;padding:3rem clamp(1rem,4vw,2rem);display:grid;gap:3rem;grid-template-columns:auto 1fr} .au-footer__brand{display:flex;flex-direction:column;gap:1rem;max-width:280px} .au-footer__logo{display:inline-block;max-width:160px} .au-footer__logo img{max-width:100%;height:auto} .au-footer__tagline{color:#fff;margin:0;font-size:.9rem;line-height:1.5} .au-footer__social{display:flex;gap:.75rem;list-style:none;padding:0;margin:0;flex-wrap:wrap} .au-footer__social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:var(--au-hairline);color:var(--au-text);transition:all .2s} .au-footer__social-link svg{width:18px;height:18px} .au-footer__social-link--tiktok:hover{background:#000;color:#fff} .au-footer__social-link--twitter:hover{background:#fff;color:#06122B} .au-footer__social-link--instagram:hover{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff} .au-footer__social-link--facebook:hover{background:#1877F2;color:#fff} .au-footer__social-link--youtube:hover{background:#FF0000;color:#fff} .au-footer__social-link--rss:hover{background:#FF7D4D;color:#fff} .au-footer__content{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .au-footer__nav-title{font-weight:700;font-size:.95rem;margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.05em;color:#fff} .au-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .au-footer__menu a{color:#000;font-size:.9rem;text-decoration:none} .au-footer__menu a:hover{color:#fc8106} .au-footer__bottom{border-top:var(--au-border);padding:1.25rem;text-align:center;color:#B6C4D6;font-size:.82rem} /* ---------- Home: grid (conteúdo + sidebar) com sidebar sobre o hero ---------- */ .au-home__grid{position:relative;max-width:1280px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);padding-block:2rem;display:grid;gap:1rem} @media(min-width:1024px){.au-home__grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}} .au-home__main{min-width:0;display:flex;flex-direction:column;gap:1rem} .au-home__content{min-width:0;display:flex;flex-direction:column;gap:1rem} .au-home__content > .au-section{max-width:none;margin:0;padding:0} /* ---------- Hero (formato destaque da semana) ---------- */ .au-hero{position:relative;display:grid;gap:1rem;background:#000;border-radius:20px} @media(min-width:760px){.au-hero{grid-template-columns:minmax(0,1fr) clamp(220px,27%,300px)}} .au-hero__main{position:relative;border-radius:var(--au-radius-lg) 0 0 var(--au-radius-lg);overflow:hidden;background:#000;min-height:300px;isolation:isolate} .au-hero__slide{position:relative;min-height:300px;display:flex;align-items:center} .au-hero__slide[hidden]{display:none} .au-hero__art{position:absolute;inset:0;z-index:0} .au-hero__art img{width:100%;height:100%;object-fit:contain;object-position:center} .au-hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,#0A2A66 26%,rgba(10,42,102,.6) 52%,rgba(10,42,102,0) 80%)} .au-hero__content{position:relative;z-index:1;padding:clamp(1.5rem,3vw,2.4rem);max-width:min(560px,80%)} .au-hero__badge{display:inline-block;background:#399DDC;color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.4em .85em;border-radius:var(--au-pill);margin-bottom:1rem} .au-hero__title{font-size:clamp(1.7rem,1.1rem+2.4vw,3rem);line-height:1.05;margin:0 0 .7rem;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.05em * 3)} .au-hero .au-hero__content .au-hero__title a{color:#fff} .au-hero__desc{color:#dbe6f7;margin:0 0 1.1rem;max-width:36ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;min-height:calc(1.5em * 4)} .au-hero__stats{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0 0 1.3rem;padding:0;color:#cdd8e8;font-size:.85rem;font-weight:600} .au-hero__stats li{display:flex;align-items:center;gap:.4rem} .au-hero__stat-ico{color:#89C7FF} .au-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap} .au-hero__dots{position:absolute;left:0;right:0;bottom:1rem;z-index:3;display:flex;justify-content:center;gap:.5rem} .au-hero__dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s} .au-hero__dot.is-active{background:#fff;width:24px;border-radius:999px} .au-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(7,27,61,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s} .au-hero__arrow:hover{background:#0072FF} .au-hero__arrow--prev{left:10px}.au-hero__arrow--next{right:10px} .au-mal__arrow--prev,.au-mal__arrow--next{color:#FF7D4D} /* Lista de 3 destaques à direita do hero (cards escuros, casando com o hero) */ .au-hero__side{display:flex;flex-direction:column;gap:.4rem;justify-content:center;margin-right:10px;padding-block:.6rem} .au-hero__more{display:grid;grid-template-columns:84px 1fr;grid-template-rows:auto auto;gap:.4rem .7rem;background:none;border:none;border-bottom:1px solid rgba(137,199,255,.15);border-radius:0;padding:.3rem 0;transition:transform .2s var(--au-ease)} .au-hero__more:hover{transform:translateY(-2px)} .au-hero__more-media{grid-column:1;grid-row:1} .au-hero__more-media img{width:84px;aspect-ratio:16/11;object-fit:cover;border-radius:var(--au-radius-sm)} .au-hero__more-title{grid-column:2;grid-row:1;font-size:.78rem;font-weight:700;color:#fff;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;align-self:center} .au-hero__more-excerpt{grid-column:1/-1;grid-row:2;font-size:.7rem;color:#B6C4D6;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(max-width:680px){.au-hero__content{max-width:100%}.au-hero__scrim{background:linear-gradient(90deg,#0A2A66 48%,rgba(10,42,102,.5) 100%)}} /* ---------- Slider de animes da temporada (MAL) ---------- */ .au-mal__season{font-size:inherit;font-weight:inherit;color:inherit;white-space:nowrap} .au-mal__slider{position:relative;display:flex;align-items:center;gap:.5rem} .au-mal__viewport{overflow:hidden;flex:1;min-width:0} .au-mal__track{display:flex;gap:1rem;list-style:none;margin:0;padding:0;transition:transform .4s var(--au-ease)} .au-mal__card{flex:0 0 calc((100% - 4rem)/5);min-width:0} @media(max-width:1024px){.au-mal__card{flex-basis:calc((100% - 3rem)/4)}} @media(max-width:768px){.au-mal__card{flex-basis:calc((100% - 2rem)/3)}} @media(max-width:520px){.au-mal__card{flex-basis:calc((100% - 1rem)/2)}} .au-mal__card a{display:block;color:#E8EEF7} .au-mal__media{position:relative;display:block;border-radius:var(--au-radius-md);overflow:hidden} .au-mal__media img{width:100%;height:200px;object-fit:cover;display:block} .au-mal__score{position:absolute;top:.4rem;left:.4rem;background:rgba(7,27,61,.85);color:#FFD45F;font-weight:700;font-size:.72rem;padding:.2rem .5rem;border-radius:var(--au-pill)} .au-mal__info{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .1rem 0} .au-mal__name{font-size:.82rem;font-weight:600;color:#fff;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical} .au-mal__type{font-size:.68rem;color:#FF7D4D;font-weight:600} .au-mal__arrow{flex:none;width:40px;height:40px;border-radius:50%;border:var(--au-border);background:var(--au-surface);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s} .au-mal__arrow:hover{background:#0072FF} .au-mal__arrow[hidden]{visibility:hidden} /* ---------- Widget: Em Alta Agora (ranking vertical Top N) ---------- */ .au-emalta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem} .au-emalta__item{display:flex;flex-direction:column;gap:.4rem} .au-emalta__row{display:flex;align-items:center;gap:.6rem} /* Numeração sem caixa: só o número em laranja, nos dois temas. O place-items:center saiu junto com o fundo — o alinhamento vertical já vem do align-items:center do .au-emalta__row. */ .au-emalta__rank{flex:none;width:24px;color:var(--au-rank);font-weight:700;font-size:.95rem;text-align:center;font-variant-numeric:tabular-nums} .au-emalta__thumb{flex:none;display:block;width:40px;height:40px;border-radius:8px;overflow:hidden} .au-emalta__thumb img{width:100%;height:100%;object-fit:cover;display:block} .au-emalta__name{flex:1;min-width:0;color:var(--au-text);font-weight:600;font-size:.86rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical} .au-emalta__pct{flex:none;color:#0072FF;font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums} .au-emalta__bar{display:block;height:6px;border-radius:3px;background:var(--au-hairline);overflow:hidden} .au-emalta__bar::before{content:"";display:block;height:100%;width:var(--au-pct,0%);border-radius:3px;background:linear-gradient(90deg,#0072FF,#5FAEFF);transition:width .6s var(--au-ease)} /* ========================================================================= AJUSTES DE LEGIBILIDADE (base = tema claro) Regras que dependem do contraste com a superfície. Escritas em tokens sempre que possível; o bloco "TEMA ESCURO" no fim do arquivo corrige as poucas que não têm equivalente direto. ========================================================================= */ /* Texto sobre o fundo do body */ .au-section__link{color:var(--au-accent-ui)} .au-section__head .au-mal__season{color:var(--au-heading)} .au-section__link:hover{color:#0A2A66} .au-breadcrumbs ol{color:var(--au-text-2)} .au-breadcrumbs a{color:var(--au-accent-ui)} .au-page-desc,.au-empty,.au-single__meta{color:var(--au-text-2)} .au-single__meta span,.au-single__meta time{color:var(--au-text-2)} /* Cards agora são claros: textos escuros */ .au-post-card__title a, .au-news__main-title a,.au-news__item-title a,.au-news__heading, .au-anime-card__title a,.au-cast-main__title a,.au-cast-list__title, .au-cast-list__body a,.au-mal__name,.au-widget-cast__title, .au-widget__title,.au-poll__question,.au-anime-facts dd{color:var(--au-text)} .au-post-card__excerpt,.au-post-card__foot, .au-cast-main__excerpt,.au-cast-list__dur,.au-poll__total, .au-news__item time,.au-cast-list__body,.au-search__results .au-res__type{color:var(--au-text-3)} .au-trends__body a,.au-poll__option,.au-calendar__item a,.au-search__results a, .nav-links .page-numbers{color:var(--au-text)} .au-cast-list__num,.au-anime-facts dt,.au-trends__rank,.au-mal__arrow{color:var(--au-accent-ui)} /* Status do anime sobre card claro */ .au-anime-card__status{background:var(--au-chip-bg);color:var(--au-text-2)} .au-anime-card__status--em_exibicao{background:rgba(0,160,90,.14);color:#0a7a45} /* Acentos azuis que ficavam fracos no card branco */ .au-news__all,.au-news__cat,.au-calendar__date{color:#399DDC} .au-news__meta,.au-calendar__date small{color:var(--au-meta)} /* Hover da seta do slider de animes (fundo vira azul) */ .au-mal__arrow:hover{color:#fff} /* Menu mobile (painel agora claro) */ @media(max-width:1023px){.au-nav__list a{color:var(--au-text)}} /* Foco visível */ :focus-visible{outline-color:var(--au-focus)} /* ---------- Rodapé (limpo, estilos já em cima) ---------- */ .au-footer{color:var(--au-text)} .au-footer__bottom{border-top:1px solid var(--au-border-c);color:var(--au-text-2)} /* ---------- Todos os links em laranja da marca ---------- Exceções: botões (.au-btn) e o logo, que têm cor própria por contraste. O :not() dá especificidade suficiente para sobrepor as cores de título. */ /* a:not(.au-btn):not(.au-logo){color:#fc8106} */ /* a:not(.au-btn):not(.au-logo):hover{color:#d96a00} */ /* Títulos/links em laranja (desktop) */ .au-hero .au-hero__content .au-hero__title a, .au-news__main-body .au-news__main-title a, .au-news__item-title a, .au-cast-main__title a, .au-widget-cast__title a, .au-cast-list__body a{color:#fc8106} .au-hero__more-title{color:#fc8106} .au-article-card__title a{color:#fc8106!important} /* ---------- Acessibilidade: reduzir movimento ---------- */ @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ========================================================================= MOBILE LAYOUT (up to 767px) ========================================================================= */ /* A marca mobile é servida por wp_is_mobile() em QUALQUER orientação, mas o CSS mobile precisa valer também no celular deitado (landscape) — onde a largura passa de 767px. A 2ª condição (landscape + altura curta) casa telefone deitado sem atingir desktop (que tem viewport alto). */ @media(max-width:767px),(orientation:landscape) and (max-height:600px){ .au-section--mobile{padding:1.5rem 1rem} /* Fundo do body neutro no mobile; o azul #399ddc fica só no header e na marca do rodapé (.au-footer__brand). */ html,body{background:var(--au-page-bg)} /* Comentários (Disqus): respiro lateral no mobile. O #thread__wrapper fica dentro do iframe (cross-origin, não estilizável); a margem vai no #disqus_thread, que é o container na página que hospeda o iframe. */ #disqus_thread{margin-inline:15px} /* Thumbnails sem cantos arredondados no mobile */ .au-thumb,.au-thumb-placeholder{border-radius:0} /* Imagens, legendas e embeds do conteúdo não estouram a largura (centrados). O style="width:745px" inline nas
do WordPress é vencido por max-width:100%!important, senão a caixa da legenda estoura a lateral. */ .au-prose img{max-width:100%;height:auto;display:block;margin:1.5rem auto} .au-prose figure,.au-prose .wp-caption{max-width:100%!important;height:auto;margin-left:auto;margin-right:auto} .au-prose figure img,.au-prose .wp-caption img{margin:0 auto} .au-prose figcaption,.au-prose .wp-caption-text{margin:.4rem 0 0;font-size:.8rem;color:var(--au-text-3);text-align:center} .au-prose iframe,.au-prose video,.au-prose embed,.au-prose object{max-width:100%} /* Mobile Topbar */ .ph-topbar{height:56px;background:var(--au-chrome);border-bottom:1px solid var(--au-hairline);display:flex;align-items:center;justify-content:space-between;padding:0 14px;flex-shrink:0} .ph-topbar img{height:26px;width:auto;object-fit:contain} /* Painel de busca, aberto pela topbar ou pela aba do rodapé. Antes era display:none → flex: a caixa aparecia de uma vez e empurrava a página inteira num salto. Agora ela cresce de 0 até a altura do campo. [hidden] continua sendo o estado inicial (sem JS o botão não faz nada, então o painel não pode aparecer); o JS tira o hidden e só então aplica .is-open, para o navegador ter um estado inicial de onde animar. .is-done é aplicado no fim da transição: enquanto a caixa cresce ela precisa recortar o conteúdo, mas depois não — senão o dropdown de resultados, que é position:absolute, sairia cortado. */ .au-search--mobile{display:flex;align-items:center;gap:0;padding:0 1rem;max-height:0;opacity:0;overflow:hidden;background:var(--au-card);border-bottom:1px solid var(--au-hairline);transition:max-height .26s var(--au-ease),padding .26s var(--au-ease),opacity .18s linear} .au-search--mobile[hidden]{display:none} .au-search--mobile.is-open{max-height:64px;padding-block:.6rem;opacity:1} .au-search--mobile.is-done{overflow:visible} .au-search--mobile .au-search__input{width:100%} .au-search--mobile .au-search__field{flex:1} /* Mobile Tabs — fixa no rodapé da viewport */ .ph-tabs{position:fixed;left:0;right:0;bottom:0;z-index:100;height:56px;background:var(--au-card);border-top:1px solid rgba(6,18,43,.1);display:flex;align-items:stretch;flex-shrink:0} .ph-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;border:none;background:none;padding:0;font-size:9.5px;color:var(--au-text-4);transition:.2s;text-decoration:none} .ph-tab:active{background:rgba(0,114,255,.08)} .ph-tab.is-active{color:var(--au-brand);font-weight:600} .ph-tab span{font-size:9.5px} /* Compensa a altura fixa do .ph-tabs para o conteúdo não ficar escondido atrás dele */ body.au-has-tabs-mobile .au-footer{margin-bottom:56px} /* Hero Slider Mobile — imagem separada do texto (banner rotativo). Reaproveitado por qualquer seção "duplicada do Hero" (ex.: Primeiras Impressões). */ .au-hero-slider-mobile{background:var(--au-card);margin-bottom:8px} .au-hero-slider-mobile__container{position:relative;overflow:hidden;aspect-ratio:390/215} .au-hero-slider-mobile__track{display:flex;height:100%;transition:transform .6s var(--au-ease)} .au-hero-slider-mobile__slide{flex:0 0 100%;position:relative;height:100%} .au-hero-slider-mobile__media{position:absolute;inset:0} .au-hero-slider-mobile__media img{width:100%;height:100%;object-fit:cover} .au-hero-slider-mobile__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:32px;height:32px;border-radius:50%;border:0;background:rgba(7,27,61,.5);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s} .au-hero-slider-mobile__arrow:hover{background:#0072FF} .au-hero-slider-mobile__arrow--prev{left:10px} .au-hero-slider-mobile__arrow--next{right:10px} .au-hero-slider-mobile__indicators{display:flex;justify-content:center;gap:6px;padding:10px 0 0} .au-hero-slider-mobile__dot{width:5px;height:5px;border-radius:3px;background:var(--au-border-c);border:0;cursor:pointer;padding:0;transition:.2s} .au-hero-slider-mobile__dot.is-active{background:#0072FF;width:18px;border-radius:3px} .au-hero-slider-mobile__body{padding:12px 16px 18px} .au-hero-slider-mobile__body[hidden]{display:none} .au-hero-slider-mobile__body .au-pill{display:inline-block;background:#399DDC;color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:999px;margin-bottom:8px} .au-hero-slider-mobile__title{margin:0 0 7px;font-size:1.125rem;font-weight:700;color:var(--au-title);line-height:1.2;letter-spacing:-.02em} .au-hero-slider-mobile__excerpt{margin:0 0 12px;font-size:.8125rem;color:var(--au-text-3);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Botão de ação ("Ver matéria"): laranja, igual ao .au-btn--primary do desktop. */ .au-hero-slider-mobile__link{display:inline-flex;align-items:center;gap:5px;background:var(--au-cta);color:var(--au-cta-ink);font-size:.8125rem;font-weight:600;padding:9px 18px;border-radius:999px;text-decoration:none} /* Destaque Mobile (Últimas Notícias) */ .au-destaque-mobile{padding-top:0} .au-destaque-mobile__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .au-destaque-mobile .au-section__title{margin:0;font-size:13px;font-weight:700;color:var(--au-text);text-transform:uppercase;letter-spacing:.05em} /* Link de topo de seção: azul, como no desktop (.au-section__link). Estava laranja aqui e no UnitedCast, mas azul em Primeiras Impressões. */ .au-destaque-mobile__head-link{font-size:12px;font-weight:700;color:var(--au-accent-ui);text-decoration:none} .au-destaque-mobile__cards{display:flex;flex-direction:column;gap:.8rem} .au-destaque-mobile__card{display:grid;grid-template-columns:100px 1fr;grid-template-areas:". pill" "image body";column-gap:.8rem;row-gap:.3rem;align-items:start;background:var(--au-surface);border-radius:var(--au-radius-md);padding:.7rem;border:var(--au-border);transition:transform .2s} /* O pill precisa ter a largura do texto, como no hero slider. Item de grid tem justify-self:stretch por padrão (e o align-self:flex-start herdado do .au-pill só age no eixo de bloco), por isso ele esticava pela coluna. width:fit-content garante o encolhimento em qualquer contexto. */ .au-destaque-mobile__card>.au-pill{grid-area:pill;justify-self:start;width:fit-content;max-width:100%;font-size:10px;letter-spacing:.06em;padding:3px 10px} .au-destaque-mobile__card:active{transform:scale(.98)} .au-destaque-mobile__image{grid-area:image;display:block;border-radius:var(--au-radius-sm);overflow:hidden;flex-shrink:0} .au-destaque-mobile__image img{width:100px;aspect-ratio:16/10;object-fit:cover} .au-destaque-mobile__body{grid-area:body;min-width:0;display:flex;flex-direction:column;gap:.3rem} .au-destaque-mobile__title{font-size:.9rem;margin:0;font-weight:600;line-height:1.25;color:var(--au-title)} .au-destaque-mobile__title a{color:var(--au-title);text-decoration:none} .au-destaque-mobile__excerpt{font-size:.75rem;color:var(--au-text-3);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-destaque-mobile__link{font-size:.7rem;color:#0072FF;font-weight:700;text-decoration:none} /* Primeiras Impressões Mobile — duplicado do componente Hero (banner rotativo) */ .au-impressoes-mobile{background:var(--au-card);margin-bottom:8px} .au-impressoes-mobile__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px} .au-impressoes-mobile__head-title{margin:0;font-size:13px;font-weight:700;color:var(--au-text);text-transform:uppercase;letter-spacing:.05em} .au-impressoes-mobile__head-link{font-size:12px;font-weight:700;color:var(--au-accent-ui);text-decoration:none} .au-impressoes-mobile .au-hero-slider-mobile{margin-bottom:0} /* Artigos Mobile */ .au-artigos-mobile__cards{display:flex;flex-direction:column;gap:.8rem} .au-artigos-mobile__card{display:grid;grid-template-columns:100px 1fr;gap:.8rem;align-items:start;background:var(--au-surface);border-radius:var(--au-radius-md);padding:.7rem;border:var(--au-border);transition:transform .2s} .au-artigos-mobile__card:active{transform:scale(.98)} .au-artigos-mobile__image{display:block;border-radius:var(--au-radius-sm);overflow:hidden;flex-shrink:0} .au-artigos-mobile__image img{width:100px;aspect-ratio:16/10;object-fit:cover} .au-artigos-mobile__body{min-width:0;display:flex;flex-direction:column;gap:.3rem} .au-artigos-mobile__title{font-size:.9rem;margin:0;font-weight:600;line-height:1.25;color:var(--au-text)} .au-artigos-mobile__title a{color:var(--au-text);text-decoration:none} .au-artigos-mobile__excerpt{font-size:.75rem;color:var(--au-text-3);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-artigos-mobile__link{font-size:.7rem;color:#0072FF;font-weight:700;text-decoration:none} /* UnitedCast Mobile — prévia do episódio mais recente + últimos (seção própria, vertical) */ .au-unitedcast-mobile{background:var(--au-card);margin-bottom:8px;padding:14px 16px 16px} .au-unitedcast-mobile__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .au-unitedcast-mobile__head-title{margin:0;font-size:13px;font-weight:700;color:var(--au-text);text-transform:uppercase;letter-spacing:.05em} .au-unitedcast-mobile__head-link{font-size:12px;font-weight:700;color:var(--au-accent-ui);text-decoration:none} .au-unitedcast-mobile__latest{display:grid;grid-template-columns:88px 1fr;gap:12px;margin-bottom:14px;align-items:start} .au-unitedcast-mobile__cover{width:88px;height:88px;background:linear-gradient(135deg,#2a0a4e,#7c4dff);border-radius:10px;overflow:hidden;flex-shrink:0} .au-unitedcast-mobile__cover img{width:100%;height:100%;object-fit:cover;display:block} .au-unitedcast-mobile__badge{display:inline-block;background:#399DDC;color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;margin-bottom:6px} .au-unitedcast-mobile__latest-title{margin:0 0 5px;font-size:13px;font-weight:700;color:var(--au-title);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-unitedcast-mobile__latest-excerpt{margin:0 0 9px;font-size:.71875rem;color:var(--au-text-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-unitedcast-mobile__actions{display:flex;gap:6px;align-items:center} /* Botão de ação ("Ouvir agora"): laranja. Os botões de play redondos logo abaixo continuam azuis — são controles, não CTAs (mesma regra do desktop). */ .au-unitedcast-mobile__listen{display:inline-flex;align-items:center;gap:4px;background:var(--au-cta);color:var(--au-cta-ink);font-size:11px;font-weight:600;padding:7px 14px;border-radius:999px;text-decoration:none} .au-unitedcast-mobile__platform{width:28px;height:28px;background:#1DB954;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .au-unitedcast-mobile__platform--apple{background:#9933CC} .au-unitedcast-mobile__platform--google{background:#4285F4} .au-unitedcast-mobile__list{border-top:1px solid var(--au-hairline);padding-top:10px;display:flex;flex-direction:column;gap:0} .au-unitedcast-mobile__row{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--au-hairline);text-decoration:none} .au-unitedcast-mobile__row:last-child{border-bottom:0} .au-unitedcast-mobile__play{width:32px;height:32px;background:#0072FF;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:700} .au-unitedcast-mobile__row-body{min-width:0} .au-unitedcast-mobile__row-title{display:block;font-size:12px;font-weight:600;color:var(--au-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .au-unitedcast-mobile__row-duration{display:block;font-size:10px;color:var(--au-text-4)} /* Força mobile layout e oculta desktop em mobile */ .au-hero-slider-mobile, .au-destaque-mobile, .au-impressoes-mobile, .au-artigos-mobile, .au-unitedcast-mobile{display:block} /* Hero desktop (template-parts/home/hero.php): lista de "outros destaques" ao lado não deve aparecer em telas estreitas — a home mobile usa seu próprio hero-slider (template-parts/mobile/hero-slider.php). */ .au-hero__side{display:none} /* Garante que só o slide ativo do hero desktop apareça em telas estreitas, independente do estado do JS (home.js só roda com layout desktop). */ .au-hero__slide{display:none} .au-hero__slide:not([hidden]){display:flex} /* Rede de segurança: se por algum motivo o desktop (front-page.php, single.php, archive.php etc.) acabar sendo servido numa tela de celular (ex.: "solicitar site para desktop" no Safari, wp_is_mobile() não detectar o aparelho), nenhum conteúdo desktop deve aparecer — os templates *-mobile.php já cobrem toda a experiência. Isso evita ter que corrigir seção desktop por seção desktop (au-news__main, au-hero__side, au-hero__slide etc.) toda vez que uma aparece quebrada no celular. */ .au-home__main:not(.au-home__main--mobile){display:none} .au-sidebar{display:none} /* Footer: empilhado em linhas no mobile (o rodapé aparece em todas as páginas, inclusive mobile — não tem template *-mobile próprio). au-footer__brand na primeira linha; Navegação/Categorias/Mais continuam lado a lado em 3 colunas na linha de baixo. */ .au-footer{background:#399ddc} .au-footer__inner{grid-template-columns:1fr;padding-top:1rem} .au-footer__brand{max-width:100%} .au-footer__content{gap:1rem} } /* Celular deitado (landscape): a marca é sempre a mobile (wp_is_mobile), então o conteúdo esticaria por toda a largura da tela deitada. Aqui a coluna é centralizada e limitada, aproximando a leitura do desktop. */ @media(orientation:landscape) and (max-height:600px){ /* Home + páginas internas (single, archive, search, podcast) + 404. */ .au-home__main--mobile, .au-m-page, .au-m-404{max-width:720px;width:100%;margin-inline:auto} /* Heróis não podem tomar a viewport inteira num ecrã baixo: o aspect-ratio original (16/9 e 390/215) daria ~450px de altura em 375px de tela. O object-fit:cover das imagens recorta sem distorcer. O width:100% é obrigatório: sem largura explícita o navegador deriva a largura do aspect-ratio com a altura limitada e a caixa encolhe/encosta à esquerda. */ .au-hero-slider-mobile__container, .au-m-hero{width:100%;max-height:50vh;margin-inline:auto} } /* ========================================================================= TEMA ESCURO — mockup "Anime United - Home Dark" (Claude Design) A paleta vem dos tokens em critical.css (:root[data-theme="dark"]). Aqui ficam só os ajustes que não saem de um token: contrastes que se invertem, superfícies de seção e a hierarquia de cor dos títulos. ========================================================================= */ /* --- Superfícies de seção: borda azulada tênue, como no mockup --- */ :root[data-theme="dark"] .au-news__inner,:root[data-theme="dark"] .au-mal__inner,:root[data-theme="dark"] .au-unitedcast__inner,:root[data-theme="dark"] .au-articles__inner, :root[data-theme="dark"] .au-widget,:root[data-theme="dark"] .au-layout__content.au-single,:root[data-theme="dark"] .au-anime-facts{border-color:var(--au-hairline)} :root[data-theme="dark"] .au-anime-card,:root[data-theme="dark"] .au-post-card{background:var(--au-surface-2);border-color:var(--au-hairline)} /* --- Enquete: o azul translúcido precisa clarear sobre o card escuro --- */ :root[data-theme="dark"] .au-poll__meter{background:rgba(137,199,255,.20)} :root[data-theme="dark"] .au-poll__option:hover{border-color:var(--au-accent-3)} /* --- Busca: campo translúcido sobre o chrome escuro --- */ :root[data-theme="dark"] .au-search__input::placeholder{color:var(--au-text-4)} :root[data-theme="dark"] .au-search__submit{color:var(--au-accent-3)} :root[data-theme="dark"] .au-search__submit:hover{background:rgba(137,199,255,.14);color:#fff} /* --- Títulos: no escuro o laranja da marca cede lugar ao branco --- (o laranja continua reservado à assinatura e aos títulos do rodapé) */ :root[data-theme="dark"] .au-hero .au-hero__content .au-hero__title a, :root[data-theme="dark"] .au-news__main-body .au-news__main-title a, :root[data-theme="dark"] .au-news__item-title a, :root[data-theme="dark"] .au-cast-main__title a, :root[data-theme="dark"] .au-widget-cast__title a, :root[data-theme="dark"] .au-cast-list__body a, :root[data-theme="dark"] .au-hero__more-title, :root[data-theme="dark"] .au-post-card__title a, :root[data-theme="dark"] .au-anime-card__title a, :root[data-theme="dark"] .au-mal__name{color:var(--au-heading)} :root[data-theme="dark"] .au-article-card__title a{color:#fff!important} :root[data-theme="dark"] .au-news__item-title a:hover,:root[data-theme="dark"] .au-cast-list__body a:hover, :root[data-theme="dark"] .au-post-card__title a:hover,:root[data-theme="dark"] .au-anime-card__title a:hover{color:var(--au-accent-3)} /* --- "Verão 2026" e afins ganham o azul claro do mockup --- */ :root[data-theme="dark"] .au-section__head .au-mal__season{color:var(--au-accent-2)} :root[data-theme="dark"] .au-section__link:hover{color:var(--au-accent-3)} :root[data-theme="dark"] .au-mal__arrow:hover{color:#fff} /* --- Status "em exibição" sobre card escuro --- */ :root[data-theme="dark"] .au-anime-card__status--em_exibicao{background:rgba(0,200,120,.18);color:#7CF0B8} /* --- Rodapé --- */ :root[data-theme="dark"] .au-footer{background:var(--au-chrome);border-top-color:var(--au-hairline)} :root[data-theme="dark"] .au-footer__social-link:not(:hover){background:rgba(137,199,255,.08);color:var(--au-accent-3)} :root[data-theme="dark"] .au-footer__menu a{color:#fff} :root[data-theme="dark"] .au-footer__menu a:hover{color:#0072FF} /* --- Paginação --- */ :root[data-theme="dark"] .nav-links .page-numbers{background:var(--au-surface-2)} /* --- Calendário MAL --- */ :root[data-theme="dark"] .au-cal-mal__item--today .au-cal-mal__dow{color:var(--au-accent-2)} :root[data-theme="dark"] .au-cal-mal__title:hover{color:var(--au-accent-3)} :root[data-theme="dark"] .au-cal-mal__cta:hover{background:rgba(0,114,255,.16);border-color:var(--au-accent);color:#fff} /* --- Em Alta (widget) --- */ /* A numeração usa --au-rank, que é o mesmo laranja nos dois temas: sem caixa de fundo, não há mais nada para corrigir aqui. */ :root[data-theme="dark"] .au-emalta__name{color:var(--au-text)} :root[data-theme="dark"] .au-emalta__pct{color:var(--au-accent-2)} /* --- Redes sociais (sidebar) --- */ :root[data-theme="dark"] .au-redes-sociais__link{border-color:var(--au-accent-3);color:var(--au-accent-3)} :root[data-theme="dark"] .au-redes-sociais__link svg{color:var(--au-accent-3)} /* No escuro o widget é #0E2147, onde preto dá 1,3:1 e o ícone sumiria; aqui ele vira o branco-azulado do texto. O :not(:hover) preserva o branco sobre o degradê (mesmo padrão do .au-footer__social-link acima). */ :root[data-theme="dark"] .au-redes-sociais__link--instagram:not(:hover) svg{color:var(--au-text)} :root[data-theme="dark"] .au-redes-sociais__link--twitter:hover{background:#fff;border-color:#fff;color:#06122B} :root[data-theme="dark"] .au-redes-sociais__link--twitter:hover svg{color:#06122B} /* --- Prosa / conteúdo do post --- */ :root[data-theme="dark"] .au-prose figcaption,:root[data-theme="dark"] .au-prose .wp-caption-text{color:var(--au-text-3)} :root[data-theme="dark"] .au-single__comments{border-top-color:var(--au-hairline)} /* Mobile: mesmas inversões de título dentro das seções próprias do celular. */ @media(max-width:767px),(orientation:landscape) and (max-height:600px){ :root[data-theme="dark"] .ph-topbar{border-bottom-color:var(--au-hairline)} :root[data-theme="dark"] .ph-tabs{background:var(--au-chrome);border-top-color:var(--au-hairline)} :root[data-theme="dark"] .ph-tab{color:var(--au-text-4)} :root[data-theme="dark"] .ph-tab.is-active{color:var(--au-brand)} :root[data-theme="dark"] .ph-tab:active{background:rgba(137,199,255,.10)} :root[data-theme="dark"] .au-destaque-mobile .au-section__title, :root[data-theme="dark"] .au-impressoes-mobile__head-title, :root[data-theme="dark"] .au-unitedcast-mobile__head-title{color:var(--au-heading)} :root[data-theme="dark"] .au-destaque-mobile__head-link, :root[data-theme="dark"] .au-impressoes-mobile__head-link, :root[data-theme="dark"] .au-unitedcast-mobile__head-link{color:var(--au-accent-2)} :root[data-theme="dark"] .au-destaque-mobile__card,:root[data-theme="dark"] .au-artigos-mobile__card{background:var(--au-surface-2);border-color:var(--au-hairline)} :root[data-theme="dark"] .au-hero-slider-mobile__dot{background:rgba(137,199,255,.25)} :root[data-theme="dark"] .au-hero-slider-mobile__excerpt, :root[data-theme="dark"] .au-destaque-mobile__excerpt, :root[data-theme="dark"] .au-artigos-mobile__excerpt, :root[data-theme="dark"] .au-unitedcast-mobile__latest-excerpt{color:var(--au-text-3)} :root[data-theme="dark"] .au-unitedcast-mobile__list{border-top-color:var(--au-hairline)} :root[data-theme="dark"] .au-unitedcast-mobile__row{border-bottom-color:var(--au-hairline)} :root[data-theme="dark"] .au-unitedcast-mobile__row-duration{color:var(--au-text-4)}} /* ========================================================================= PÁGINAS INTERNAS MOBILE (single, archive, search, 404, podcast) Estes templates nasceram do mockup com as cores escritas em `style=` inline, o que tornava o tema escuro impossível: estilo inline vence qualquer folha, então o fundo continuava claro enquanto o texto, que vem por herança, seguia o tema — texto branco sobre branco. Ficam FORA da media query de propósito: os templates *-mobile.php são escolhidos por wp_is_mobile() (User-Agent), não pela largura da viewport. Um aparelho com viewport larga receberia a marcação sem o estilo. ========================================================================= */ /* ---------- Casca comum ---------- */ .au-m-page{background:var(--au-page-bg);min-height:100vh} .au-m-page__content{padding:0;margin:0} .au-m-spacer{height:8px} .au-m-spacer--lg{height:12px} /* Cabeçalho de bloco com a barrinha azul à esquerda */ .au-m-blockhead{display:flex;align-items:center;gap:8px;margin-bottom:12px} .au-m-blockhead::before{content:"";width:4px;height:18px;border-radius:2px;background:linear-gradient(to bottom,var(--au-accent-2),var(--au-accent));flex:none} .au-m-blockhead__title{font-size:13px;font-weight:700;color:var(--au-heading)} .au-m-eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;color:var(--au-text-4);text-transform:uppercase;letter-spacing:.05em} .au-m-eyebrow--ink{color:var(--au-heading)} /* ---------- Hero do post (16:9) ---------- */ .au-m-hero{width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0a0a1a,#1a2a5a)} .au-m-hero img,.au-m-hero .au-thumb-placeholder{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;aspect-ratio:auto} /* ---------- single-mobile ---------- */ .au-m-article{background:var(--au-card);padding:14px 16px 0} .au-m-article__meta{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap} .au-m-article__date{font-size:11px;color:var(--au-text-4)} .au-m-article__title{margin:0 0 12px;font-size:21px;font-weight:700;color:var(--au-title);line-height:1.2;letter-spacing:-.02em} .au-m-byline{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--au-hairline);border-bottom:1px solid var(--au-hairline);margin-bottom:16px} .au-m-byline__avatar{width:32px;height:32px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--au-accent),var(--au-accent-2))} .au-m-byline__name{margin:0;font-size:12px;font-weight:600;color:var(--au-text)} .au-m-byline__read{margin:0;font-size:11px;color:var(--au-text-4)} .au-m-byline__save{margin-left:auto;width:32px;height:32px;background:var(--au-soft);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--au-text)} .au-m-byline__save svg{width:14px;height:14px;stroke:currentColor} .au-m-ad{background:var(--au-page-bg);height:90px;display:flex;align-items:center;justify-content:center;margin:16px 0;border-radius:8px} .au-m-ad span{font-size:11px;color:var(--au-text-4);font-weight:500} .au-m-related{border-top:1px solid var(--au-hairline);padding-top:14px;margin-top:4px;padding-bottom:16px} .au-m-related__list{display:flex;flex-direction:column;gap:10px} .au-m-related__item{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;text-decoration:none} .au-m-related__thumb{width:72px;height:48px;border-radius:8px;overflow:hidden;flex:none;background:var(--au-soft)} .au-m-related__thumb img,.au-m-related__thumb .au-thumb-placeholder{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto} .au-m-related__title{margin:0;font-size:12.5px;font-weight:600;color:var(--au-text);line-height:1.3} /* ---------- archive-mobile ---------- */ .au-m-filters{padding:10px 0 10px 16px;margin-bottom:8px;border-bottom:1px solid var(--au-hairline);background:var(--au-page-bg)} .au-m-filters__track{display:flex;gap:7px;overflow-x:auto;padding-right:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .au-m-filters__track::-webkit-scrollbar{display:none} .au-m-chip{flex:none;background:var(--au-soft);color:var(--au-text-3);font-size:12px;font-weight:500;padding:7px 16px;border-radius:var(--au-pill);border:var(--au-border);cursor:pointer;white-space:nowrap;text-decoration:none} a.au-m-chip{color:var(--au-text-3)} .au-m-chip.is-active,a.au-m-chip.is-active{background:var(--au-accent);color:#fff;border-color:transparent;font-weight:600} .au-m-list{background:var(--au-card);padding:4px 16px 8px} .au-m-lead{border-bottom:1px solid var(--au-hairline);padding:12px 0;display:block;text-decoration:none} .au-m-lead__media{width:100%;aspect-ratio:16/9;border-radius:10px;margin-bottom:10px;overflow:hidden;background:var(--au-soft)} .au-m-lead__media img,.au-m-lead__media .au-thumb-placeholder{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto} .au-m-lead__meta{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap} .au-m-lead__title{margin:0;font-size:15px;font-weight:700;color:var(--au-title);line-height:1.3} .au-m-row{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--au-hairline);align-items:center;text-decoration:none} .au-m-row__media{width:88px;height:58px;border-radius:8px;overflow:hidden;flex:none;background:var(--au-soft)} .au-m-row__media img,.au-m-row__media .au-thumb-placeholder{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto} .au-m-row__meta{display:flex;gap:5px;align-items:center;margin-bottom:4px;flex-wrap:wrap} /* Título da linha usa o mesmo token do card em destaque logo acima (.au-m-lead__title) e do resto das superfícies mobile. Antes o primeiro item da listagem era laranja e os seguintes quase pretos. */ .au-m-row__title{margin:0;font-size:13px;font-weight:600;color:var(--au-title);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Mesma pílula de categoria do card em destaque (.au-pill), em escala menor: os dois marcam a mesma coisa e apareciam lado a lado com desenhos diferentes — sólido azul no lead, tinta clara na linha. */ .au-m-tag{background:#399DDC;color:#fff;font-size:9.5px;font-weight:700;padding:1px 7px;border-radius:var(--au-pill);text-transform:uppercase;letter-spacing:.03em;text-decoration:none} a.au-m-tag:hover{background:#0A2A66;color:#fff} .au-m-tag--lg{font-size:10px;padding:2px 8px} .au-m-time{font-size:10.5px;color:var(--au-text-4)} .au-m-time--lg{font-size:11px} /* ---------- search-mobile ---------- */ .au-m-results{background:var(--au-card);padding:10px 16px 4px} .au-m-results__count{margin:0 0 12px;font-size:11.5px;color:var(--au-text-4)} .au-m-results__count strong{color:var(--au-brand)} .au-m-result{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--au-hairline);text-decoration:none} .au-m-result__media{width:52px;height:52px;border-radius:8px;overflow:hidden;flex:none;background:var(--au-soft)} .au-m-result__media img,.au-m-result__media .au-thumb-placeholder{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto} .au-m-result__type{font-size:10px;font-weight:700;color:var(--au-text-4);margin-bottom:2px;text-transform:uppercase} .au-m-result__title{margin:0;font-size:13px;font-weight:600;color:var(--au-text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-m-pagination{padding:12px 16px 8px} .au-m-empty{background:var(--au-card);padding:32px 16px;text-align:center} .au-m-empty__text{margin:0 0 16px;font-size:13.5px;color:var(--au-text-3);line-height:1.5} .au-m-tags{background:var(--au-card);margin-top:8px;padding:12px 16px 14px} .au-m-tags__list{display:flex;flex-wrap:wrap;gap:7px} /* ---------- 404-mobile ---------- */ .au-m-404{background:var(--au-card);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 32px 48px;text-align:center} .au-m-404__art{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px;position:relative;background:linear-gradient(135deg,var(--au-page-bg),var(--au-soft))} .au-m-404__art-body{width:80px;height:120px;background:linear-gradient(180deg,#c0d0e8,#a0b8d8);border-radius:40px 40px 0 0;opacity:.6} .au-m-404__art-dot{position:absolute;top:20px;right:30px;width:32px;height:32px;background:linear-gradient(135deg,var(--au-accent),var(--au-accent-2));border-radius:50%;opacity:.5} .au-m-404__art-dot--sm{top:auto;right:auto;bottom:24px;left:20px;width:20px;height:20px;background:var(--au-brand);opacity:.6} .au-m-404__code{font-size:72px;font-weight:700;line-height:1;letter-spacing:-.04em;margin-bottom:8px;background:linear-gradient(135deg,var(--au-accent-2),var(--au-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .au-m-404__title{margin:0 0 10px;font-size:20px;font-weight:700;color:var(--au-heading);line-height:1.2} .au-m-404__desc{margin:0 0 28px;font-size:14px;color:var(--au-text-3);line-height:1.6;max-width:260px} .au-m-404__actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:260px} .au-m-btn{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;padding:13px 24px;border-radius:12px;text-decoration:none} a.au-m-btn--primary{background:var(--au-cta);color:var(--au-cta-ink)} a.au-m-btn--soft{background:var(--au-soft);color:var(--au-text)} .au-m-404__more{margin-top:32px;text-align:left;width:100%} .au-m-404__links{display:flex;flex-direction:column} a.au-m-404__link{display:block;padding:10px 0;border-bottom:1px solid var(--au-hairline);font-size:13px;font-weight:600;color:var(--au-link);text-decoration:none} a.au-m-404__link:last-child{border-bottom:0} /* ---------- Widgets mobile (em alta, enquete, calendário, temporada) ---------- */ .au-m-widget{background:var(--au-card);margin-bottom:8px;padding:14px 16px 16px} .au-m-widget--flush{padding:0} .au-m-widget__head{padding:14px 16px 12px;border-bottom:1px solid var(--au-hairline)} .au-m-widget__head .au-m-blockhead{margin-bottom:0} .au-m-widget__body{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px} .au-m-widget__note{margin:0 0 12px;font-size:11px;color:var(--au-text-4)} .au-m-cta{display:block;text-align:center;padding:12px;margin-top:10px;border:var(--au-border);border-radius:10px;font-size:13px;font-weight:600;text-decoration:none} a.au-m-cta{color:var(--au-accent-ui)} /* Em Alta (ranking) */ .au-m-rank{display:flex;gap:10px;align-items:center;text-decoration:none} /* Paridade com .au-emalta__rank do desktop: número laranja, sem caixa. */ .au-m-rank__pos{width:22px;color:var(--au-rank);font-weight:700;font-size:13px;text-align:center;font-variant-numeric:tabular-nums;flex:none} .au-m-rank__thumb{width:36px;height:36px;border-radius:8px;flex:none;overflow:hidden;background:var(--au-soft)} .au-m-rank__thumb img{width:100%;height:100%;object-fit:cover} .au-m-rank__body{flex:1;min-width:0} .au-m-rank__title{margin:0 0 3px;font-size:12px;font-weight:600;color:var(--au-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .au-m-rank__bar{height:5px;background:var(--au-chip-bg);border-radius:3px;overflow:hidden} .au-m-rank__fill{height:100%;width:var(--au-pct,0%);background:linear-gradient(90deg,var(--au-accent),var(--au-accent-2));border-radius:3px} .au-m-rank__pct{font-size:11px;font-weight:700;color:var(--au-accent-ui);flex:none} /* Enquete */ .au-m-poll__question{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--au-text);line-height:1.4} .au-m-poll__options{display:flex;flex-direction:column;gap:8px;margin-bottom:10px} .au-m-poll__opt{position:relative;padding:10px 12px;border-radius:10px;border:var(--au-border);overflow:hidden;display:flex;justify-content:space-between;align-items:center;background:none;cursor:pointer;width:100%;text-align:left} /* Mesmo azul translúcido da enquete desktop (#399DDC), no lugar do #0072FF. Toda linha é pintada pela própria porcentagem, não só a líder: o medidor era cinza (--au-chip-bg) em quem não liderava, então dois empates em 50% apareciam com cores diferentes, como se tivessem valores diferentes. A líder agora se distingue por um tom mais forte e pela borda, não por ser a única colorida. */ .au-m-poll__opt.is-leader{border:1.5px solid #399DDC} .au-m-poll__meter{position:absolute;inset:0 auto 0 0;width:var(--au-pct,0%);background:rgba(57,157,220,.22);transition:width .6s var(--au-ease)} .au-m-poll__opt.is-leader .au-m-poll__meter{background:rgba(57,157,220,.38)} :root[data-theme="dark"] .au-m-poll__meter{background:rgba(137,199,255,.18)} :root[data-theme="dark"] .au-m-poll__opt.is-leader .au-m-poll__meter{background:rgba(137,199,255,.32)} .au-m-poll__label{font-size:12.5px;font-weight:600;color:var(--au-text);position:relative} .au-m-poll__pct{font-size:12px;font-weight:700;color:var(--au-text-3);position:relative} .au-m-poll__opt.is-leader .au-m-poll__pct{color:var(--au-accent-ui)} .au-m-poll__total{margin:0;font-size:11px;color:var(--au-text-4)} /* Calendário */ .au-m-cal__item{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--au-hairline);text-decoration:none} .au-m-cal__item:last-child{border-bottom:0} .au-m-cal__time{background:rgba(0,114,255,.12);color:var(--au-accent-ui);font-size:10px;font-weight:700;text-align:center;padding:4px 2px;border-radius:8px;line-height:1.2} .au-m-cal__title{font-size:12.5px;font-weight:600;color:var(--au-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Destaques da temporada (carrossel) */ .au-m-season{background:var(--au-card);margin-bottom:8px;padding:14px 0 16px 16px} .au-m-season__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-right:16px} .au-m-season__title{margin:0;font-size:13px;font-weight:700;color:var(--au-heading);text-transform:uppercase;letter-spacing:.05em} a.au-m-season__link{font-size:12px;font-weight:700;color:var(--au-accent-ui)} .au-m-season__track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding-right:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .au-m-season__track::-webkit-scrollbar{display:none} .au-m-season__card{flex:none;width:110px} .au-m-season__media{position:relative;width:110px;height:155px;border-radius:10px;margin-bottom:6px;overflow:hidden;background:linear-gradient(180deg,#0a1628,#0a3a6a)} .au-m-season__media img{width:100%;height:100%;object-fit:cover} .au-m-season__score{position:absolute;top:5px;left:5px;background:rgba(7,27,61,.85);color:#FFD45F;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--au-pill)} .au-m-season__name{margin:0;font-size:11px;font-weight:600;color:var(--au-text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .au-m-season__type{margin:2px 0 0;font-size:10px;color:var(--au-brand);font-weight:500} /* Redes sociais */ .au-m-social{background:var(--au-card);margin-bottom:8px;padding:16px;text-align:center} .au-m-social__text{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--au-text)} .au-m-social__links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap} .au-m-social__link{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff} .au-m-social__link svg{width:17px;height:17px} .au-m-social__link--tiktok,.au-m-social__link--twitter{background:#000} :root[data-theme="dark"] .au-m-social__link--tiktok, :root[data-theme="dark"] .au-m-social__link--twitter{background:rgba(255,255,255,.14)} .au-m-social__link--instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)} .au-m-social__link--facebook{background:#1877F2} .au-m-social__link--youtube{background:#FF0000} .au-m-social__link--rss{background:#FF7D4D} /* ---------- Player do podcast (mobile) ---------- */ .au-m-cast{background:var(--au-card);padding:20px 24px 0} .au-m-cast__cover-wrap{display:flex;justify-content:center;margin-bottom:20px} .au-m-cast__cover{width:210px;height:210px;background:linear-gradient(135deg,#2a0a4e 0%,#5a1a9e 50%,#7c4dff 100%);border-radius:16px;box-shadow:0 16px 40px rgba(124,77,255,.35),0 4px 12px rgba(0,0,0,.15);position:relative;overflow:hidden} .au-m-cast__cover-glow{position:absolute;top:20px;right:20px;width:70px;height:70px;background:rgba(255,255,255,.12);border-radius:50%} .au-m-cast__cover-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .au-m-cast__info{text-align:center;margin-bottom:20px} .au-m-cast__badge{display:inline-block;background:rgba(124,77,255,.16);color:#9b7dff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:var(--au-pill);margin-bottom:8px} .au-m-cast__title{margin:0 0 5px;font-size:17px;font-weight:700;color:var(--au-heading);line-height:1.25;letter-spacing:-.015em} .au-m-cast__sub{margin:0;font-size:13px;color:var(--au-text-4)} .au-m-cast__actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 4px} .au-m-cast__action{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--au-text-4)} .au-m-cast__action svg{stroke:currentColor;fill:none} .au-m-cast__action span{font-size:11px;color:var(--au-text-4)} .au-m-cast__speed{display:flex;align-items:center;gap:5px;background:rgba(124,77,255,.14);border:none;cursor:pointer;padding:6px 12px;border-radius:var(--au-pill)} .au-m-cast__speed span{font-size:12px;font-weight:700;color:#9b7dff} .au-m-cast__progress{margin-bottom:6px} .au-m-cast__track{height:4px;background:var(--au-chip-bg);border-radius:2px;position:relative;cursor:pointer} .au-m-cast__fill{height:100%;width:var(--au-pct,0%);background:linear-gradient(90deg,#7c4dff,var(--au-accent));border-radius:2px;position:relative} .au-m-cast__knob{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--au-heading);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.2)} .au-m-cast__times{display:flex;justify-content:space-between;margin-top:7px} .au-m-cast__times span{font-size:11px;color:var(--au-text-4)} .au-m-cast__controls{display:flex;align-items:center;justify-content:space-between;padding:4px 0 20px} .au-m-cast__btn[disabled],.au-m-cast__play[disabled],.au-m-cast__action[disabled],.au-m-cast__speed[disabled]{cursor:default;opacity:.45} .au-m-cast__btn{width:44px;height:44px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;color:var(--au-heading)} .au-m-cast__btn svg{fill:currentColor} .au-m-cast__btn--stroke svg{fill:none;stroke:currentColor} .au-m-cast__btn-num{position:absolute;font-size:8px;font-weight:700;color:var(--au-heading);bottom:4px;right:5px} .au-m-cast__play{width:64px;height:64px;background:var(--au-accent);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,114,255,.3)} .au-m-cast__play svg{fill:#fff} .au-m-cast__section{border-top:1px solid var(--au-hairline);padding-top:16px;margin-bottom:16px} .au-m-cast__platforms{display:flex;gap:8px} .au-m-cast__platform{display:flex;align-items:center;gap:7px;background:var(--au-soft);border-radius:10px;padding:9px 14px;text-decoration:none;flex:1;justify-content:center} .au-m-cast__platform span{font-size:12px;font-weight:600;color:var(--au-text)} .au-m-cast__platform-ico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .au-m-cast__platform-ico--spotify{background:#1DB954} .au-m-cast__platform-ico--apple{background:#9933CC} .au-m-cast__more{border-top:1px solid var(--au-hairline);padding-top:14px} .au-m-cast__ep{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--au-hairline);text-decoration:none} .au-m-cast__ep-art{width:40px;height:40px;background:linear-gradient(135deg,#3a1a6e,#7c4dff);border-radius:8px;flex:none} .au-m-cast__ep-title{margin:0;font-size:12.5px;font-weight:600;color:var(--au-text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .au-m-cast__ep-meta{font-size:10.5px;color:var(--au-text-4)} .au-m-cast__ep-play{width:32px;height:32px;background:var(--au-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .au-m-cast__ep-play svg{fill:var(--au-accent-ui)}