/* ============================================================ BLOG · HUB CATÓLICO Sistema visual herdado do brandbook v1.0 (Akrobat + Inter + Source Serif · mostarda patrimonial). Editorias = filhos. ============================================================ */ /* ---- acessibilidade: conteúdo só para leitor de tela ---- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---- AKROBAT (display patrimonial) ---- */ @font-face { font-family:'Akrobat'; src:url('/blog/assets/fonts/Akrobat-Black.otf') format('opentype'); font-weight:900; font-display:swap; } @font-face { font-family:'Akrobat'; src:url('/blog/assets/fonts/Akrobat-ExtraBold.otf') format('opentype'); font-weight:800; font-display:swap; } @font-face { font-family:'Akrobat'; src:url('/blog/assets/fonts/Akrobat-Bold.otf') format('opentype'); font-weight:700; font-display:swap; } @font-face { font-family:'Akrobat'; src:url('/blog/assets/fonts/Akrobat-SemiBold.otf') format('opentype'); font-weight:600; font-display:swap; } @font-face { font-family:'Akrobat'; src:url('/blog/assets/fonts/Akrobat-Regular.otf') format('opentype'); font-weight:400; font-display:swap; } :root { --hub-grafite:#1A1A1A; --hub-mostarda:#D4A017; --hub-branco:#FFFFFF; --hub-creme:#F5F0E8; --hub-taupe:#7A7066; --hub-pedra:#D0CCC4; --hub-mostarda-hover:#A77E0F; --hub-border-soft:rgba(26,26,26,0.10); --hub-border-strong:rgba(26,26,26,0.20); --hub-border-on-dark:rgba(255,255,255,0.10); --child-patrono:#C42020; --child-dpa:#C0312B; --child-selo:#2F4F4F; --hub-font-display:'Akrobat','Bebas Neue',impact,sans-serif; --hub-font-sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif; --hub-font-serif:'Source Serif 4','Source Serif Pro',Georgia,serif; --container:1180px; --container-narrow:720px; --ease-out:cubic-bezier(0.22,1,0.36,1); /* accent default = mostarda; sobrescrito por editoria */ --accent:var(--hub-mostarda); --accent-ink:var(--hub-grafite); } /* editoria themes (aplicado no ) */ body[data-editoria="patrono"]{ --accent:var(--child-patrono); --accent-ink:#fff; } body[data-editoria="dpa"]{ --accent:var(--child-dpa); --accent-ink:#fff; } body[data-editoria="espiritualidade"]{ --accent:var(--hub-mostarda); --accent-ink:var(--hub-grafite); } body[data-editoria="cultura"]{ --accent:var(--hub-mostarda); --accent-ink:var(--hub-grafite); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; scroll-padding-top:80px; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul,ol{ list-style:none; } body{ background:var(--hub-branco); color:var(--hub-grafite); font-family:var(--hub-font-sans); font-size:1.0625rem; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); } .container--narrow{ max-width:var(--container-narrow); } /* ---- TOPNAV ---- */ .topnav{ position:fixed; inset:0 0 auto 0; z-index:100; background:rgba(255,255,255,0.90); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--hub-border-soft); } .topnav__inner{ max-width:var(--container); margin-inline:auto; padding:0.9rem clamp(1.25rem,5vw,2.5rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; } .topnav__logo{ display:flex; align-items:center; gap:0.75rem; flex-shrink:0; } .topnav__logo-img{ height:30px; width:auto; } .topnav__sub{ font-size:0.6875rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--hub-mostarda); padding-left:0.75rem; border-left:1px solid var(--hub-border-soft); } .topnav__menu{ display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; } .topnav__menu a{ font-size:0.8125rem; font-weight:500; color:var(--hub-taupe); letter-spacing:0.02em; transition:color 200ms; white-space:nowrap; } .topnav__menu a:hover,.topnav__menu a.is-active{ color:var(--hub-grafite); } .topnav__menu a.is-active{ font-weight:600; } .topnav__burger{ display:none; width:30px; height:24px; flex-direction:column; justify-content:space-between; padding:4px 0; } .topnav__burger span{ display:block; height:2px; background:var(--hub-grafite); } /* ---- BLOG HERO ---- */ .bloghero{ padding:9rem 0 3rem; position:relative; } .bloghero::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0,rgba(212,160,23,0.07),transparent 60%); pointer-events:none; } .bloghero__kicker{ font-size:0.75rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; } .bloghero__title{ font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; line-height:1.05; letter-spacing:-0.02em; max-width:18ch; } .bloghero__title .em{ color:var(--accent); } .bloghero__sub{ font-size:1.125rem; color:var(--hub-taupe); max-width:60ch; margin-top:1.25rem; } /* editoria hero (página de editoria) */ .edhero{ padding:9rem 0 2.5rem; border-bottom:1px solid var(--hub-border-soft); position:relative; } .edhero__bar{ width:48px; height:4px; background:var(--accent); margin-bottom:1.5rem; } .edhero__kicker{ font-size:0.75rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:0.75rem; } .edhero__title{ font-family:var(--hub-font-display); font-weight:900; font-size:clamp(2.6rem,7vw,4.5rem); line-height:0.92; letter-spacing:0.01em; text-transform:uppercase; } .edhero__sub{ font-size:1.0625rem; color:var(--hub-taupe); max-width:58ch; margin-top:1.25rem; } .edhero__cross{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.5rem; font-size:0.8125rem; font-weight:600; letter-spacing:0.02em; color:var(--accent); } .edhero__cross::before{ content:'→'; } /* ---- FILTER CHIPS ---- */ .filters{ display:flex; gap:0.6rem; flex-wrap:wrap; padding:1.5rem 0 0; } .chip{ font-size:0.8125rem; font-weight:600; letter-spacing:0.02em; padding:0.45rem 0.95rem; border-radius:999px; border:1px solid var(--hub-border-strong); color:var(--hub-taupe); transition:all 180ms var(--ease-out); } .chip:hover{ border-color:var(--hub-grafite); color:var(--hub-grafite); } .chip.is-active{ background:var(--hub-grafite); color:#fff; border-color:var(--hub-grafite); } .chip[data-ed="patrono"].is-active{ background:var(--child-patrono); border-color:var(--child-patrono); } .chip[data-ed="dpa"].is-active{ background:var(--child-dpa); border-color:var(--child-dpa); } .chip[data-ed="espiritualidade"].is-active,.chip[data-ed="cultura"].is-active{ background:var(--hub-mostarda); border-color:var(--hub-mostarda); color:var(--hub-grafite); } /* ---- POST GRID ---- */ .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding:2.5rem 0 5rem; } .grid--2{ grid-template-columns:repeat(2,1fr); } .card{ display:flex; flex-direction:column; background:var(--hub-branco); border:1px solid var(--hub-border-soft); border-radius:6px; overflow:hidden; transition:transform 250ms var(--ease-out),box-shadow 250ms,border-color 200ms; } .card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(26,26,26,0.08); border-color:var(--hub-border-strong); } .card__thumb{ display:block; aspect-ratio:16/10; background-size:cover; background-position:center top; background-color:var(--hub-creme,#F5F0E8); border-bottom:3px solid var(--c-accent,var(--hub-mostarda)); transition:transform .5s var(--ease-out,ease); } .card:hover .card__thumb{ transform:scale(1.03); } .article__cover{ margin:0 0 2.25rem; } .article__cover img{ width:100%; height:auto; display:block; border-radius:14px; } .article__cover figcaption{ font-size:0.8rem; color:var(--hub-taupe); margin-top:0.6rem; text-align:center; } /* capa em formato HERO (post com imagem própria) — faixa mais baixa que o hero da home */ .article--hero{ padding-top:0; } .article__hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(300px,46vh,460px); background-size:cover; background-position:center 26%; margin:0 0 2.75rem; } .article__hero-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(to top, rgba(18,16,14,.94) 0%, rgba(18,16,14,.55) 44%, rgba(18,16,14,.32) 100%); } .article__hero-inner{ position:relative; z-index:1; padding:2.25rem 0 2.4rem; } .article__hero .article__back--hero{ display:inline-block; margin-bottom:1.1rem; color:rgba(255,255,255,.82); } .article__hero .article__back--hero:hover{ color:#fff; } .article__hero .article__ed{ color:#fff; opacity:.96; } .article__hero .article__title{ color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.5); margin-top:.4rem; } .article__hero .article__meta{ color:rgba(255,255,255,.86); } .article__hero .article__meta a, .article__hero .article__meta strong{ color:#fff; } .article__hero .article__dot{ background:rgba(255,255,255,.5); } .article__hero-credit{ position:absolute; right:1.1rem; bottom:.7rem; z-index:1; max-width:58%; text-align:right; font-size:.72rem; line-height:1.35; color:rgba(255,255,255,.66); text-shadow:0 1px 4px rgba(0,0,0,.6); } @media (max-width:640px){ .article__hero{ background-position:center 22%; } .article__hero-credit{ position:static; max-width:none; text-align:left; padding:.6rem 1.25rem 0; color:var(--hub-taupe); text-shadow:none; } } /* CTA de autorreferência no fim do artigo (TSD + verbete no Martirológio) */ .article__eco{ margin:3rem 0 0; padding-top:2rem; border-top:1px solid var(--hub-border-soft); } .article__eco-label{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hub-taupe); margin:0 0 1.1rem; } .article__eco-btns{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .btn-eco{ display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.2rem; border-radius:14px; text-decoration:none; color:#fff; transition:transform .25s var(--ease-out,ease),box-shadow .25s,filter .25s; } .btn-eco:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.16); filter:brightness(1.04); } .btn-eco--tsd{ background:#C42020; } .btn-eco--verbete{ background:var(--hub-mostarda,#D4A017); color:var(--hub-grafite,#1A1A1A); } .btn-eco__ic{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; } .btn-eco__ic svg{ width:24px; height:24px; } .btn-eco__yt{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:7px; padding:6px 7px; } .btn-eco__yt svg{ width:26px; height:auto; display:block; } .btn-eco__tx{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .btn-eco__k{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.9; } .btn-eco__l{ font-size:1.02rem; font-weight:700; margin-top:.15rem; } .article__eco-sub{ display:inline-block; margin-top:1rem; font-size:.9rem; font-weight:600; color:var(--hub-taupe); text-decoration:none; } .article__eco-sub:hover{ color:var(--hub-mostarda,#D4A017); } @media (max-width:560px){ .article__eco-btns{ grid-template-columns:1fr; } } .card__body{ padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; } .card__ed{ font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-accent,var(--hub-mostarda)); margin-bottom:0.75rem; } .card__title{ font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-0.01em; color:var(--hub-grafite); } .card:hover .card__title{ color:var(--c-accent,var(--hub-mostarda)); } .card__excerpt{ font-size:0.9375rem; color:var(--hub-taupe); line-height:1.6; margin-top:0.75rem; flex:1; } .card__meta{ display:flex; align-items:center; gap:0.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--hub-border-soft); font-size:0.8125rem; color:var(--hub-taupe); } .card__meta strong{ color:var(--hub-grafite); font-weight:600; } .card__dot{ width:3px; height:3px; border-radius:50%; background:var(--hub-pedra); } .featured{ display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; padding:1rem 0 0; } .feat{ background:var(--hub-grafite); color:#fff; border-radius:8px; padding:clamp(2rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:flex-end; min-height:380px; position:relative; overflow:hidden; } .feat::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--c-accent,#D4A017) 22%,transparent),transparent 55%); } .feat__ed{ font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-accent,var(--hub-mostarda)); margin-bottom:1rem; position:relative; z-index:2; } .feat__title{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; line-height:1.1; letter-spacing:-0.01em; position:relative; z-index:2; } .feat__excerpt{ color:var(--hub-pedra); margin-top:1rem; max-width:48ch; position:relative; z-index:2; } .feat__meta{ margin-top:1.5rem; font-size:0.8125rem; color:var(--hub-pedra); position:relative; z-index:2; } .feat__meta strong{ color:#fff; } .feat__side{ display:flex; flex-direction:column; gap:1rem; } /* ---- ARTICLE ---- */ .article{ padding:8rem 0 2rem; } .article__back{ font-size:0.8125rem; font-weight:600; color:var(--hub-taupe); letter-spacing:0.02em; } .article__back:hover{ color:var(--accent); } .article__head{ padding:1.5rem 0 2.25rem; border-bottom:1px solid var(--hub-border-soft); margin-bottom:2.5rem; } .article__ed{ display:inline-block; font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; } .article__title{ font-size:clamp(2rem,4.5vw,3rem); font-weight:700; line-height:1.08; letter-spacing:-0.02em; } .article__meta{ display:flex; align-items:center; gap:0.6rem; margin-top:1.5rem; font-size:0.9375rem; color:var(--hub-taupe); flex-wrap:wrap; } .article__meta strong{ color:var(--hub-grafite); font-weight:600; } .article__dot{ width:3px; height:3px; border-radius:50%; background:var(--hub-pedra); } .prose{ font-size:1.1875rem; line-height:1.78; color:#2b2b2b; } .prose > p:first-of-type{ font-size:1.3rem; line-height:1.6; color:var(--hub-grafite); } .prose p{ margin-bottom:1.4rem; } .prose h2{ font-family:var(--hub-font-sans); font-size:1.6rem; font-weight:700; letter-spacing:-0.01em; margin:2.5rem 0 1rem; line-height:1.2; } .prose h3{ font-size:1.3rem; font-weight:700; margin:2rem 0 0.75rem; } .prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .prose strong{ font-weight:700; color:var(--hub-grafite); } .prose em{ font-style:italic; } .prose ul,.prose ol{ margin:0 0 1.4rem 1.25rem; } .prose ul li{ list-style:disc; margin-bottom:0.4rem; } .prose ol li{ list-style:decimal; margin-bottom:0.4rem; } .prose blockquote{ font-family:var(--hub-font-serif); font-style:italic; font-size:1.35rem; line-height:1.5; margin:2rem 0; padding:0.25rem 0 0.25rem 1.5rem; border-left:3px solid var(--accent); color:var(--hub-grafite); } .prose img{ border-radius:6px; margin:2rem 0; } /* tags + author */ .article__foot{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--hub-border-soft); } .taglist{ display:flex; gap:0.5rem; flex-wrap:wrap; } .tag{ font-size:0.8125rem; font-weight:500; color:var(--hub-taupe); padding:0.35rem 0.75rem; background:var(--hub-creme); border:1px solid var(--hub-border-soft); border-radius:999px; transition:all 180ms; } .tag::before{ content:'#'; color:var(--accent); font-weight:700; } .tag:hover{ border-color:var(--accent); color:var(--hub-grafite); } .authorbox{ display:flex; align-items:flex-start; gap:1rem; margin-top:2rem; padding:1.5rem; background:var(--hub-creme); border:1px solid var(--hub-border-soft); border-left:3px solid var(--accent); border-radius:6px; } .authorbox__av{ width:46px; height:46px; border-radius:50%; background:var(--hub-grafite); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--hub-font-display); font-weight:900; font-size:1.25rem; flex-shrink:0; } .authorbox__name{ font-weight:700; color:var(--hub-grafite); } .authorbox__role{ font-size:0.8125rem; color:var(--hub-taupe); margin-top:0.15rem; } .archive-note{ font-family:var(--hub-font-serif); font-style:italic; font-size:0.9375rem; color:var(--hub-taupe); margin-top:1.5rem; padding:1rem 1.25rem; background:var(--hub-creme); border-radius:0 4px 4px 0; border-left:3px solid var(--hub-pedra); } /* related */ .related{ padding:3rem 0 5rem; } .related__label{ font-size:0.75rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; } /* section header */ .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2rem; } .sec-head__title{ font-size:1.5rem; font-weight:700; letter-spacing:-0.01em; } .sec-head__link{ font-size:0.8125rem; font-weight:600; color:var(--accent); } /* ---- FOOTER ---- */ .footer{ background:var(--hub-grafite); color:#fff; padding-block:clamp(3.5rem,6vw,5rem); border-top:3px solid var(--hub-mostarda); } .footer__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; padding-bottom:2rem; border-bottom:1px solid var(--hub-border-on-dark); margin-bottom:2rem; } .footer__logo{ height:48px; width:auto; } .footer__filhos{ display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--hub-pedra); flex-wrap:wrap; } .footer__filhos a:hover{ color:var(--hub-mostarda); } .footer__nav{ display:flex; gap:2.5rem; flex-wrap:wrap; margin-bottom:2rem; } .footer__col h4{ font-size:0.6875rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--hub-mostarda); margin-bottom:0.75rem; } .footer__col a{ display:block; font-size:0.875rem; color:var(--hub-pedra); padding:0.2rem 0; transition:color 180ms; } .footer__col a:hover{ color:#fff; } .footer__meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.75rem; color:var(--hub-pedra); padding-top:1.5rem; border-top:1px solid var(--hub-border-on-dark); } /* ---- empty state ---- */ .empty{ padding:4rem 0; text-align:center; color:var(--hub-taupe); } /* ---- RESPONSIVO ---- */ @media (max-width:960px){ .topnav__menu{ display:none; } .topnav__burger{ display:flex; } .topnav__menu.is-open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:1.25rem; gap:0.9rem; border-bottom:1px solid var(--hub-border-soft); } .grid,.grid--2{ grid-template-columns:1fr 1fr; } .featured{ grid-template-columns:1fr; } } @media (max-width:620px){ .topnav__sub{ display:none; } .grid,.grid--2{ grid-template-columns:1fr; } .prose{ font-size:1.0625rem; } } @media (prefers-reduced-motion:no-preference){ .card,.feat{ opacity:0; transform:translateY(16px); animation:rise 600ms var(--ease-out) forwards; } @keyframes rise{ to{ opacity:1; transform:none; } } } /* ============================================================ HERO CINEMATOGRÁFICO (home) — full-bleed rotativo + parallax ============================================================ */ .hero{ position:relative; height:100svh; min-height:600px; max-height:920px; overflow:hidden; background:#0a0908; } .hero__stage{ position:absolute; inset:0; z-index:1; } .hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1300ms var(--ease-out); } .hero__slide.is-active{ opacity:1; } .hero__parallax{ position:absolute; inset:-7%; will-change:transform; transition:transform 700ms var(--ease-out); } .hero__img{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04); } .hero__slide.is-active .hero__img{ animation:kenburns 9s linear forwards; } @keyframes kenburns{ from{transform:scale(1.04)} to{transform:scale(1.17)} } .hero__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to top, rgba(10,9,8,0.94) 2%, rgba(10,9,8,0.55) 32%, rgba(10,9,8,0.12) 60%, rgba(10,9,8,0.30) 100%); } .hero__scrim::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 18%, rgba(212,160,23,0.12), transparent 55%); } .hero__content{ position:absolute; inset:auto 0 0 0; z-index:3; padding-bottom:clamp(3.5rem,9vh,7rem); } .hero__caption{ will-change:transform,opacity; transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .hero__caption.is-swapping{ opacity:0; transform:translateY(22px); } .hero__ed{ display:inline-flex; align-items:center; gap:0.6rem; font-size:0.8125rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--hub-mostarda); margin-bottom:1.1rem; } .hero__ed::before{ content:''; width:26px; height:2px; background:currentColor; } .hero__title{ margin:0; max-width:16ch; } .hero__title a{ font-size:clamp(2.4rem,6.2vw,5.2rem); font-weight:700; line-height:0.98; letter-spacing:-0.025em; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,0.5); transition:color 200ms; display:inline; background-image:linear-gradient(var(--hub-mostarda),var(--hub-mostarda)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; } .hero__title a:hover{ background-size:100% 2px; } .hero__meta{ margin-top:1.4rem; font-size:0.9375rem; color:rgba(255,255,255,0.78); letter-spacing:0.01em; } .hero__meta strong{ color:#fff; font-weight:600; } .hero__nav{ display:flex; align-items:center; gap:0.7rem; margin-top:2.2rem; } .hero__dot{ width:34px; height:3px; border-radius:2px; background:rgba(255,255,255,0.28); overflow:hidden; position:relative; cursor:pointer; } .hero__dot::after{ content:''; position:absolute; inset:0; width:0; background:#fff; } .hero__dot.is-active::after{ width:100%; transition:width var(--dur,7000ms) linear; } .hero__dot:hover{ background:rgba(255,255,255,0.5); } .hero__cue{ position:absolute; right:clamp(1.25rem,5vw,2.5rem); bottom:clamp(2rem,5vh,3rem); z-index:3; font-size:0.6875rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.6); writing-mode:vertical-rl; display:flex; align-items:center; gap:0.8rem; } .hero__cue::after{ content:''; width:1px; height:46px; background:linear-gradient(rgba(255,255,255,0.6),transparent); animation:cuepulse 2.2s var(--ease-inout,ease) infinite; } @keyframes cuepulse{ 0%,100%{ transform:scaleY(0.5); transform-origin:top; opacity:0.4 } 50%{ transform:scaleY(1); opacity:1 } } @media (max-width:620px){ .hero{ min-height:520px; } .hero__cue{ display:none; } .hero__title{ max-width:none; } } @media (prefers-reduced-motion:reduce){ .hero__slide.is-active .hero__img{ animation:none; transform:scale(1.04); } .hero__parallax{ transition:none; } .hero__dot.is-active::after{ transition:none; width:100%; } .hero__cue::after{ animation:none; } } /* ---- CRÉDITOS ---- */ .footer__meta a{ color:var(--hub-pedra); transition:color 180ms; } .footer__meta a:hover{ color:var(--hub-mostarda); } .credits{ display:flex; flex-direction:column; gap:0.75rem; margin-top:2rem; } .credit{ display:flex; align-items:center; gap:1rem; padding:0.75rem; background:var(--hub-creme); border:1px solid var(--hub-border-soft); border-radius:6px; } .credit__thumb{ width:96px; height:54px; object-fit:cover; border-radius:3px; flex-shrink:0; } .credit__autor{ font-weight:600; color:var(--hub-grafite); border-bottom:1px solid var(--accent); } .credit__lic{ display:block; font-size:0.8125rem; color:var(--hub-taupe); margin-top:0.15rem; } /* hero inteiro clicável (cobre a área; título e dots ficam acima e seguem clicáveis) */ .hero__link{ position:absolute; inset:0; z-index:2; } .hero__content{ position:absolute; inset:auto 0 0 0; z-index:3; } .hero__content a, .hero__dot{ position:relative; z-index:4; }