/* ============================================================= Blog Refinado — camada visual ------------------------------------------------------------- Tudo é escopado em .blogref (classe adicionada ao pelo functions.php). Nada aqui vaza para as páginas do Elementor. As cores e fontes vêm do Site Kit do Elementor. Se você trocar a paleta em Elementor > Configurações do site, o blog acompanha. Os valores após a vírgula são só o plano B. ============================================================= */ .blogref { /* --- Cores herdadas do kit --------------------------------- */ --bl-ink: var(--e-global-color-text, #1c1e21); --bl-ink-soft: color-mix(in srgb, var(--e-global-color-text, #1c1e21) 62%, transparent); --bl-ink-faint: color-mix(in srgb, var(--e-global-color-text, #1c1e21) 12%, transparent); --bl-accent: var(--e-global-color-accent, #2f6df6); --bl-heading: var(--e-global-color-primary, #101215); --bl-surface: color-mix(in srgb, var(--e-global-color-text, #1c1e21) 4%, transparent); /* --- Tipografia herdada do kit ----------------------------- */ --bl-font-display: var(--e-global-typography-primary-font-family, Georgia), serif; --bl-font-body: var(--e-global-typography-text-font-family, system-ui), sans-serif; --bl-font-util: var(--e-global-typography-accent-font-family, system-ui), sans-serif; /* --- Escala e ritmo ---------------------------------------- */ --bl-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --bl-step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --bl-step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem); --bl-step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem); --bl-step-4: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); --bl-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); --bl-block: clamp(3rem, 2rem + 4vw, 5.5rem); --bl-gutter: clamp(1.15rem, 4.5vw, 2.5rem); --bl-radius: 10px; --bl-measure: 68ch; --bl-wrap: 1180px; } /* ---- Container ------------------------------------------------ container-type: inline-size faz o layout responder à LARGURA REAL que o blog recebeu — não à largura da tela. Se você colocar o blog numa coluna estreita do Elementor, ele se adapta sozinho. ---------------------------------------------------------------- */ .blogref .blogref-main { container-type: inline-size; container-name: blog; width: 100%; max-width: var(--bl-wrap); margin-inline: auto; /* Respiro lateral fluido + área segura de aparelhos com notch. */ padding-inline: max(var(--bl-gutter), env(safe-area-inset-left)); padding-block: var(--bl-block); font-family: var(--bl-font-body); font-size: var(--bl-step-0); color: var(--bl-ink); overflow-wrap: break-word; } .blogref .blogref-main--single { max-width: 860px; } /* ---------- Cabeçalho de seção -------------------------------- */ .blogref .blogref-masthead { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); max-width: 44ch; } .blogref .blogref-masthead__title { font-family: var(--bl-font-display); font-size: var(--bl-step-4); line-height: 1.04; letter-spacing: -0.025em; color: var(--bl-heading); margin: 0.35rem 0 0; text-wrap: balance; } .blogref .blogref-masthead__intro { font-size: var(--bl-step-1); line-height: 1.55; color: var(--bl-ink-soft); margin: 0.9rem 0 0; } .blogref .blogref-masthead__count { font-family: var(--bl-font-util); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bl-ink-soft); margin: 1rem 0 0; } /* ---------- Eyebrow (categoria) ------------------------------- */ .blogref .blogref-eyebrow { display: inline-block; font-family: var(--bl-font-util); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-accent); text-decoration: none; margin-bottom: 0.6rem; } .blogref .blogref-eyebrow:hover { text-decoration: underline; } .blogref .blogref-eyebrow--static { color: var(--bl-ink-soft); } /* ---------- Trilho de categorias ------------------------------ */ .blogref .blogref-rail { margin-bottom: var(--bl-gap); border-block: 1px solid var(--bl-ink-faint); padding-block: 0.85rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .blogref .blogref-rail::-webkit-scrollbar { display: none; } .blogref .blogref-rail__list { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; width: max-content; } .blogref .blogref-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--bl-ink-faint); border-radius: 999px; background: none; font-family: var(--bl-font-util); font-size: 0.875rem; line-height: 1.2; color: var(--bl-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease; } .blogref .blogref-chip:hover { border-color: var(--bl-accent); color: var(--bl-accent); } .blogref .blogref-chip.is-current { background: var(--bl-heading); border-color: var(--bl-heading); color: #fff; } .blogref .blogref-chip__count { font-size: 0.6875rem; color: var(--bl-ink-soft); font-variant-numeric: tabular-nums; } .blogref .blogref-chip.is-current .blogref-chip__count { color: rgba(255, 255, 255, 0.7); } /* ---------- Embrulho dos shortcodes (uso no Elementor) ---------- */ /* Cada shortcode se embrulha em .blogref.nucleo-sc: carrega os tokens, o escopo visual e o contexto de container query mesmo em páginas montadas fora dos templates do blog. */ .nucleo-sc { container-type: inline-size; container-name: blog; width: 100%; font-family: var(--bl-font-body); font-size: var(--bl-step-0); color: var(--bl-ink); } /* ---------- Slot de publicidade (topo da home) ------------------ */ .blogref .blogref-pub { margin-bottom: var(--bl-gap); text-align: center; } .blogref .blogref-pub__rotulo { display: block; font-family: var(--bl-font-util); font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bl-ink-soft); margin-bottom: .45rem; } .blogref .blogref-pub__area { display: block; } .blogref .blogref-pub__area img { display: inline-block; max-width: 100%; height: auto; max-height: 280px; border-radius: var(--bl-radius); } /* ---------- Manchete em texto (formato portal) ------------------ */ .blogref .blogref-manchete { padding-bottom: var(--bl-gap); margin-bottom: var(--bl-gap); border-bottom: 1px solid var(--bl-ink-faint); } .blogref .blogref-manchete__titulo { font-family: var(--bl-font-display); font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.06; letter-spacing: -.025em; color: var(--bl-heading); margin: 0 0 .55rem; text-wrap: balance; } .blogref .blogref-manchete__titulo a { color: inherit; text-decoration: none; } .blogref .blogref-manchete__titulo a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; text-decoration-color: var(--bl-accent); } .blogref .blogref-manchete__linha-fina { font-size: var(--bl-step-1); line-height: 1.5; color: var(--bl-ink-soft); margin: 0 0 1rem; max-width: 60ch; } /* ---------- Capa editorial (home do blog) ---------------------- */ .blogref .blogref-capa { display: grid; gap: var(--bl-gap); margin-bottom: var(--bl-block); } @container blog (min-width: 920px) { .blogref .blogref-capa { grid-template-columns: 1fr 320px; align-items: start; } } .blogref .blogref-capa__principal { min-width: 0; } /* A marquinha de canto nas imagens — assinatura da capa */ .blogref .blogref-capa__media { position: relative; display: block; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-surface); } .blogref .blogref-capa__media::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 12px; background: var(--bl-accent); border-radius: 0 0 6px 0; z-index: 1; } .blogref .blogref-capa__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .blogref .blogref-capa__item:hover .blogref-capa__media img { transform: scale(1.03); } /* Destaque: imagem | manchete */ .blogref .blogref-capa__destaque { display: grid; gap: clamp(1.1rem, 1rem + 1.5vw, 2rem); padding-bottom: var(--bl-gap); margin-bottom: var(--bl-gap); border-bottom: 1px solid var(--bl-ink-faint); } @container blog (min-width: 680px) { .blogref .blogref-capa__destaque { grid-template-columns: 1.1fr 1fr; align-items: center; } } .blogref .blogref-capa__destaque .blogref-capa__media { aspect-ratio: 4 / 3; } .blogref .blogref-capa__titulo { font-family: var(--bl-font-display); font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.022em; color: var(--bl-heading); margin: 0 0 1rem; text-wrap: balance; } .blogref .blogref-capa__titulo a { color: inherit; text-decoration: none; } .blogref .blogref-capa__titulo a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--bl-accent); } /* Sublinks com o marcador de seta */ .blogref .blogref-sublinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .blogref .blogref-sublinks li { position: relative; padding-left: 1.05rem; } .blogref .blogref-sublinks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; background: var(--bl-accent); border-radius: 1.5px; } .blogref .blogref-sublinks--mini a { font-weight: 400; color: var(--bl-ink-soft); font-size: .875rem; } .blogref .blogref-sublinks a { color: var(--bl-ink); text-decoration: none; font-size: .9375rem; line-height: 1.45; font-weight: 500; } .blogref .blogref-sublinks a:hover { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 3px; } /* Fileira de três */ .blogref .blogref-capa__fileira { display: grid; gap: var(--bl-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .blogref .blogref-capa__item .blogref-capa__media { aspect-ratio: 3 / 2; margin-bottom: .8rem; } .blogref .blogref-capa__item-titulo { font-family: var(--bl-font-display); font-size: var(--bl-step-1); font-weight: 600; line-height: 1.22; letter-spacing: -.012em; margin: 0 0 .6rem; color: var(--bl-heading); text-wrap: balance; } .blogref .blogref-capa__item-titulo a { color: inherit; text-decoration: none; } .blogref .blogref-capa__item-titulo a:hover { color: var(--bl-accent); } .blogref .blogref-sublinks--um a { font-weight: 400; color: var(--bl-ink-soft); } /* Lateral */ .blogref .blogref-capa__lateral { display: grid; gap: var(--bl-gap); align-content: start; min-width: 0; } .blogref .blogref-spot__media { aspect-ratio: 16 / 10; margin-bottom: .8rem; } .blogref .blogref-spot__selo { position: absolute; top: .7rem; left: .7rem; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; background: var(--bl-heading); color: #fff; border-radius: 999px; font-family: var(--bl-font-util); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .blogref .blogref-spot__selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bl-accent); } /* Mini-carrossel da lateral: reusa a engrenagem do banner */ .blogref .blogref-banner--mini .blogref-banner__link { height: clamp(220px, 24cqw, 280px); } .blogref .blogref-banner--mini .blogref-banner__texto { padding: 1rem; } .blogref .blogref-banner--mini .blogref-banner__titulo { font-size: 1.05rem; line-height: 1.25; } .blogref .blogref-banner--mini .blogref-banner__controles { margin-top: .6rem; } .blogref .blogref-banner--mini { margin-bottom: 0; } /* ---------- Card horizontal da lateral -------------------------- */ .blogref .blogref-hcard { display: grid; grid-template-columns: 88px 1fr; gap: .85rem; align-items: center; } .blogref .blogref-hcard__thumb { display: block; overflow: hidden; border-radius: var(--bl-radius); aspect-ratio: 1; background: var(--bl-surface); } .blogref .blogref-hcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .blogref .blogref-hcard__titulo { font-family: var(--bl-font-display); font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; } .blogref .blogref-hcard__titulo a { color: var(--bl-heading); text-decoration: none; } .blogref .blogref-hcard__titulo a:hover { color: var(--bl-accent); } /* ---------- Faixa de colunistas --------------------------------- */ .blogref .blogref-colunistas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem var(--bl-gap); padding-block: 1.4rem; border-block: 1px solid var(--bl-ink-faint); margin-bottom: var(--bl-block); } .blogref .blogref-colunista { display: grid; grid-template-columns: 48px 1fr; gap: .8rem; align-items: center; text-decoration: none; min-height: 48px; } .blogref .blogref-colunista__foto { width: 48px; height: 48px; border-radius: 50%; } .blogref .blogref-colunista__info { display: grid; gap: .1rem; min-width: 0; } .blogref .blogref-colunista__info strong { color: var(--bl-accent); font-family: var(--bl-font-util); font-size: .875rem; font-weight: 700; } .blogref .blogref-colunista__info span { color: var(--bl-ink); font-size: .875rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .blogref .blogref-colunista:hover .blogref-colunista__info span { color: var(--bl-accent); } /* ---------- Masthead compacto na home (a manchete manda) -------- */ .blogref .blogref-masthead--compacto { margin-bottom: 1.2rem; } .blogref .blogref-masthead--compacto .blogref-masthead__title { font-size: var(--bl-step-2); } .blogref .blogref-masthead--compacto .blogref-masthead__intro { display: none; } /* ---------- Banner rotativo (home do blog) --------------------- */ .blogref .blogref-banner { position: relative; margin-bottom: var(--bl-block); } .blogref .blogref-banner__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--bl-radius); overscroll-behavior-x: contain; } .blogref .blogref-banner__trilho::-webkit-scrollbar { display: none; } .blogref .blogref-banner__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; } .blogref .blogref-banner__link { position: relative; display: block; height: clamp(320px, 30vw + 180px, 480px); text-decoration: none; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-surface); } .blogref .blogref-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .blogref .blogref-banner__img--vazia { background: linear-gradient(135deg, var(--bl-surface), color-mix(in srgb, var(--bl-heading) 18%, transparent)); } .blogref .blogref-banner__veu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .38) 45%, rgba(0, 0, 0, .05) 75%, transparent 100%); } .blogref .blogref-banner__texto { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: clamp(1.15rem, 1rem + 2vw, 2.25rem); max-width: 46rem; } .blogref .blogref-banner__cat { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); color: #fff; font-family: var(--bl-font-util); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .blogref .blogref-banner__titulo { font-family: var(--bl-font-display); font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .blogref .blogref-banner__link:hover .blogref-banner__titulo { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .blogref .blogref-banner__meta { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255, 255, 255, .82); font-family: var(--bl-font-util); font-size: .8125rem; } .blogref .blogref-banner__meta .blogref-dot { background: currentColor; } /* Controles */ .blogref .blogref-banner__controles { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .8rem; } .blogref .blogref-banner__seta { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--bl-ink-faint); border-radius: 50%; background: none; color: var(--bl-ink); cursor: pointer; transition: border-color .18s ease, color .18s ease; } .blogref .blogref-banner__seta:hover { border-color: var(--bl-accent); color: var(--bl-accent); } .blogref .blogref-banner__seta svg { width: 17px; height: 17px; } .blogref .blogref-banner__pontos { display: flex; gap: .45rem; } .blogref .blogref-banner__ponto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--bl-ink-faint); cursor: pointer; transition: width .25s ease, background-color .25s ease; } .blogref .blogref-banner__ponto.is-ativo { width: 22px; background: var(--bl-accent); } @media (pointer: coarse) { /* Alvo de 44px sem inflar o desenho do ponto */ .blogref .blogref-banner__ponto { position: relative; } .blogref .blogref-banner__ponto::after { content: ""; position: absolute; inset: -18px -12px; } .blogref .blogref-banner__seta { width: 44px; height: 44px; } } /* Em container estreito o banner encolhe com dignidade */ @container blog (max-width: 520px) { .blogref .blogref-banner__link { height: clamp(300px, 92cqw, 380px); } } /* ---------- Grid ---------------------------------------------- */ .blogref .blogref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 305px), 1fr)); gap: var(--bl-gap); } /* ---------- Card ---------------------------------------------- */ .blogref .blogref-card { margin: 0; } .blogref .blogref-card__media { display: block; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-surface); margin-bottom: 1.1rem; aspect-ratio: 3 / 2; } .blogref .blogref-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .blogref .blogref-card:hover .blogref-card__media img { transform: scale(1.035); } .blogref .blogref-card__title { font-family: var(--bl-font-display); font-size: var(--bl-step-2); line-height: 1.18; letter-spacing: -0.015em; color: var(--bl-heading); margin: 0 0 0.6rem; text-wrap: balance; } .blogref .blogref-card__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--bl-accent), var(--bl-accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s ease; } .blogref .blogref-card__title a:hover { background-size: 100% 1px; } .blogref .blogref-card__excerpt { color: var(--bl-ink-soft); line-height: 1.6; margin: 0 0 0.9rem; } /* Destaque: imagem e texto lado a lado */ .blogref .blogref-card--hero { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); align-items: center; padding-bottom: var(--bl-block); margin-bottom: var(--bl-block); border-bottom: 1px solid var(--bl-ink-faint); } /* O destaque vira duas colunas quando o CONTAINER tem espaço, não quando a tela tem. Funciona igual em sidebar, coluna ou full. */ @container blog (min-width: 780px) { .blogref .blogref-card--hero { grid-template-columns: 1.15fr 1fr; } .blogref .blogref-card--hero .blogref-card__media { margin-bottom: 0; aspect-ratio: 4 / 3; } .blogref .blogref-card--hero .blogref-card__title { font-size: var(--bl-step-3); } .blogref .blogref-card--hero .blogref-card__excerpt { font-size: var(--bl-step-1); } } /* ---------- Meta ---------------------------------------------- */ .blogref .blogref-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-family: var(--bl-font-util); font-size: 0.8125rem; color: var(--bl-ink-soft); } .blogref .blogref-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--bl-ink); } .blogref .blogref-avatar { border-radius: 50%; width: 28px; height: 28px; } .blogref .blogref-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; } /* ---------- Artigo -------------------------------------------- */ .blogref .blogref-article__header { margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem); } .blogref .blogref-crumbs { font-family: var(--bl-font-util); font-size: 0.8125rem; color: var(--bl-ink-soft); display: flex; gap: 0.5rem; margin-bottom: 1.1rem; } .blogref .blogref-crumbs a { color: inherit; text-decoration: none; } .blogref .blogref-crumbs a:hover { color: var(--bl-accent); } .blogref .blogref-article__title { font-family: var(--bl-font-display); font-size: var(--bl-step-4); line-height: 1.06; letter-spacing: -0.028em; color: var(--bl-heading); margin: 0 0 0.9rem; text-wrap: balance; } .blogref .blogref-article__standfirst { font-size: var(--bl-step-1); line-height: 1.55; color: var(--bl-ink-soft); margin: 0 0 1.4rem; max-width: 54ch; } .blogref .blogref-article__figure { margin: 0 0 clamp(1.75rem, 1rem + 3vw, 3rem); } .blogref .blogref-article__figure img { width: 100%; height: auto; display: block; border-radius: var(--bl-radius); } .blogref .blogref-article__figure figcaption { font-family: var(--bl-font-util); font-size: 0.8125rem; color: var(--bl-ink-soft); margin-top: 0.6rem; } /* ---------- Corpo do texto ------------------------------------ */ .blogref .blogref-prose { max-width: var(--bl-measure); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.72; } .blogref .blogref-prose > * + * { margin-top: 1.4em; } .blogref .blogref-prose h2, .blogref .blogref-prose h3, .blogref .blogref-prose h4 { font-family: var(--bl-font-display); color: var(--bl-heading); line-height: 1.22; letter-spacing: -0.015em; margin-top: 2.2em; margin-bottom: 0.6em; scroll-margin-top: 5rem; } .blogref .blogref-prose h2 { font-size: var(--bl-step-3); } .blogref .blogref-prose h3 { font-size: var(--bl-step-2); } .blogref .blogref-prose h4 { font-size: var(--bl-step-1); } .blogref .blogref-prose a { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .blogref .blogref-prose ul, .blogref .blogref-prose ol { padding-left: 1.3em; } .blogref .blogref-prose li + li { margin-top: 0.5em; } .blogref .blogref-prose blockquote { margin-inline: 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--bl-accent); font-family: var(--bl-font-display); font-size: var(--bl-step-1); line-height: 1.5; color: var(--bl-heading); } .blogref .blogref-prose blockquote p { margin: 0; } .blogref .blogref-prose img, .blogref .blogref-prose figure img, .blogref .blogref-prose iframe { max-width: 100%; height: auto; border-radius: var(--bl-radius); display: block; } .blogref .blogref-prose figcaption { font-family: var(--bl-font-util); font-size: 0.8125rem; color: var(--bl-ink-soft); margin-top: 0.6rem; } .blogref .blogref-prose hr { border: 0; height: 1px; background: var(--bl-ink-faint); margin-block: 2.5em; } .blogref .blogref-prose code { font-size: 0.9em; background: var(--bl-surface); padding: 0.15em 0.4em; border-radius: 4px; } .blogref .blogref-prose pre { background: var(--bl-surface); padding: 1.15rem; border-radius: var(--bl-radius); overflow-x: auto; font-size: 0.9rem; line-height: 1.6; } .blogref .blogref-prose pre code { background: none; padding: 0; } .blogref .blogref-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .blogref .blogref-prose th, .blogref .blogref-prose td { border-bottom: 1px solid var(--bl-ink-faint); padding: 0.7rem 0.6rem; text-align: left; } .blogref .blogref-prose th { font-family: var(--bl-font-util); font-weight: 600; } /* ---------- Tags, compartilhar, autor -------------------------- */ .blogref .blogref-tags, .blogref .blogref-share__links { display: flex; flex-wrap: wrap; gap: 0.5rem; } .blogref .blogref-tags { margin-top: 2.5rem; } .blogref .blogref-share { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--bl-ink-faint); } .blogref .blogref-share__label { font-family: var(--bl-font-util); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bl-ink-soft); } .blogref .blogref-author { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); background: var(--bl-surface); border-radius: var(--bl-radius); } .blogref .blogref-author__avatar { border-radius: 50%; flex-shrink: 0; } .blogref .blogref-author__name { font-family: var(--bl-font-display); font-size: var(--bl-step-1); margin: 0.15rem 0 0.5rem; color: var(--bl-heading); } .blogref .blogref-author__name a { color: inherit; text-decoration: none; } .blogref .blogref-author__name a:hover { color: var(--bl-accent); } .blogref .blogref-author__bio { margin: 0; color: var(--bl-ink-soft); line-height: 1.6; font-size: 0.9375rem; } /* ---------- Anterior / próximo -------------------------------- */ .blogref .blogref-adjacent { display: grid; gap: 1rem; margin-top: var(--bl-block); padding-top: 2rem; border-top: 1px solid var(--bl-ink-faint); } @container blog (min-width: 640px) { .blogref .blogref-adjacent { grid-template-columns: 1fr 1fr; } .blogref .blogref-adjacent__link--next { text-align: right; } } .blogref .blogref-adjacent__link { display: block; text-decoration: none; color: inherit; padding: 1.1rem 0; } .blogref .blogref-adjacent__title { display: block; font-family: var(--bl-font-display); font-size: var(--bl-step-1); line-height: 1.25; color: var(--bl-heading); margin-top: 0.35rem; } .blogref .blogref-adjacent__link:hover .blogref-adjacent__title { color: var(--bl-accent); } /* ---------- Relacionados -------------------------------------- */ .blogref .blogref-related { margin-top: var(--bl-block); padding-top: var(--bl-block); border-top: 1px solid var(--bl-ink-faint); } .blogref .blogref-related__title { font-family: var(--bl-font-display); font-size: var(--bl-step-2); color: var(--bl-heading); margin: 0 0 var(--bl-gap); } /* ---------- Barra de progresso -------------------------------- */ .blogref .blogref-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 9999; pointer-events: none; } .blogref .blogref-progress__bar { display: block; height: 100%; width: 0; background: var(--bl-accent); transition: width 0.08s linear; } /* ---------- Paginação ----------------------------------------- */ .blogref .blogref-pagination, .blogref .navigation.pagination { margin-top: var(--bl-block); padding-top: 2rem; border-top: 1px solid var(--bl-ink-faint); } .blogref .blogref-pagination .nav-links, .blogref .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-family: var(--bl-font-util); font-size: 0.9375rem; } .blogref .blogref-pagination .page-numbers, .blogref .navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding-inline: 0.7rem; border: 1px solid var(--bl-ink-faint); border-radius: 999px; color: var(--bl-ink); text-decoration: none; transition: border-color 0.18s ease, color 0.18s ease; } .blogref .blogref-pagination .page-numbers:hover, .blogref .navigation.pagination .page-numbers:hover { border-color: var(--bl-accent); color: var(--bl-accent); } .blogref .blogref-pagination .page-numbers.current, .blogref .navigation.pagination .page-numbers.current { background: var(--bl-heading); border-color: var(--bl-heading); color: #fff; } .blogref .blogref-pagination .page-numbers.dots, .blogref .navigation.pagination .page-numbers.dots { border-color: transparent; } /* ---------- Estado vazio -------------------------------------- */ .blogref .blogref-empty { padding-block: var(--bl-block); max-width: 46ch; } .blogref .blogref-empty h2 { font-family: var(--bl-font-display); font-size: var(--bl-step-2); color: var(--bl-heading); margin: 0 0 0.6rem; } .blogref .blogref-empty p { color: var(--bl-ink-soft); margin: 0; } /* ---------- Ergonomia de toque e telas estreitas --------------- */ /* Nada pode furar a largura da tela. Palavra longa, URL crua, embed teimoso — tudo contido. */ .blogref .blogref-main, .blogref .blogref-prose, .blogref .blogref-card__title, .blogref .blogref-article__title { overflow-wrap: break-word; word-break: break-word; } .blogref .blogref-prose > * { max-width: 100%; } /* Tabela em celular: rola dentro da própria caixa, sem empurrar a página. O functions.php embrulha as tabelas do editor nesta div. */ .blogref .blogref-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--bl-gutter) * -1); padding-inline: var(--bl-gutter); } .blogref .blogref-tablewrap table { min-width: 34rem; } /* Trilho de categorias: encaixa no item e sinaliza que há mais à direita. */ .blogref .blogref-rail { scroll-snap-type: x proximity; margin-inline: calc(var(--bl-gutter) * -1); padding-inline: var(--bl-gutter); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); } .blogref .blogref-rail__list > li { scroll-snap-align: start; } /* Dedo não é ponteiro: em telas de toque os alvos crescem para 44px. */ @media (pointer: coarse) { .blogref .blogref-chip { min-height: 44px; padding-inline: 1rem; } .blogref .blogref-pagination .page-numbers, .blogref .navigation.pagination .page-numbers { min-width: 44px; height: 44px; } .blogref .blogref-adjacent__link { padding-block: 1rem; } } .blogref a, .blogref button { -webkit-tap-highlight-color: transparent; } /* Caixa do autor empilha quando o container aperta. */ @container blog (max-width: 520px) { .blogref .blogref-author { flex-direction: column; gap: 1rem; } .blogref .blogref-share { align-items: flex-start; } } /* Barra de progresso respeita o notch. */ .blogref .blogref-progress { padding-top: env(safe-area-inset-top); } /* iOS dá zoom em campo com fonte < 16px. */ .blogref input[type="search"], .blogref input[type="text"], .blogref input[type="email"], .blogref textarea { font-size: max(16px, 1rem); } /* Media pesada não segura o primeiro render. */ .blogref .blogref-prose iframe, .blogref .blogref-prose video { max-width: 100%; } .blogref .blogref-related, .blogref .blogref-adjacent { content-visibility: auto; contain-intrinsic-size: auto 400px; } /* ---------- Acessibilidade e preferências --------------- */ .blogref a:focus-visible, .blogref button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .blogref *, .blogref *::before, .blogref *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .blogref .blogref-card:hover .blogref-card__media img { transform: none; } }