/* ============================================================ GERSON ROSA IMÓVEIS — Design System Assinatura: o site muda de cor conforme o modo de negócio. Temporada → Rosé | Anual → Mar | Venda → Latão ============================================================ */ /* As fontes entram por no de cada página. Um @import aqui só começaria a baixar depois que este arquivo terminasse de chegar. */ :root { --tinta: #1C2126; --grafite:#5A6068; --areia: #F8F5F0; --branco: #FFFFFF; --linha: #E9E4DD; --rosa: #A93B55; /* temporada */ --mar: #0F4C5C; /* anual */ --latao: #8F6B1F; /* venda */ --acento: var(--rosa); --acento-suave: #F6E9ED; --fonte-display: 'Fraunces', Georgia, serif; --fonte-corpo: 'Plus Jakarta Sans', system-ui, sans-serif; --raio: 16px; --raio-g: 24px; --sombra: 0 6px 24px rgba(28,33,38,.08); --sombra-alta: 0 18px 48px rgba(28,33,38,.16); } body[data-modo="anual"] { --acento: var(--mar); --acento-suave: #E8F0F2; } body[data-modo="venda"] { --acento: var(--latao); --acento-suave: #F4EEDF; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--fonte-corpo); color: var(--tinta); background: var(--branco); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 15px; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .topo { position: sticky; top: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--linha); } .topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .logo { display: flex; align-items: baseline; gap: 8px; } .logo-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; } .logo-nome em { font-style: normal; color: var(--acento); transition: color .3s; } .logo-creci { font-size: 11px; color: var(--grafite); letter-spacing: .08em; text-transform: uppercase; } .topo-acoes { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; } .topo-acoes a:hover { color: var(--acento); } .btn-whats { display: inline-flex; align-items: center; gap: 8px; background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform .15s, background .3s; } .btn-whats:hover { background: var(--acento); transform: translateY(-1px); } /* ---------- Seletor de modo (assinatura) ---------- */ .modos { display: flex; justify-content: center; gap: 6px; padding: 18px 0 6px; } .modo-btn { border: 1px solid var(--linha); background: var(--branco); padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--grafite); display: flex; align-items: center; gap: 8px; transition: all .2s; } .modo-btn .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--linha); transition: background .2s; } .modo-btn[data-cor="temporada"] .ponto { background: var(--rosa); } .modo-btn[data-cor="anual"] .ponto { background: var(--mar); } .modo-btn[data-cor="venda"] .ponto { background: var(--latao); } .modo-btn:hover { border-color: var(--tinta); color: var(--tinta); } .modo-btn.ativo { background: var(--tinta); color: #fff; border-color: var(--tinta); } /* ---------- Pílula de busca ---------- */ .busca { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; align-items: stretch; background: var(--branco); border: 1px solid var(--linha); border-radius: 999px; box-shadow: var(--sombra); margin: 14px auto 26px; max-width: 760px; overflow: hidden; } .busca-campo { padding: 12px 22px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: center; } .busca-campo:last-of-type { border-right: none; } .busca-campo label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); } .busca-campo select, .busca-campo input { border: none; outline: none; background: transparent; font-size: 14px; color: var(--grafite); padding-top: 2px; width: 100%; } .busca-btn { margin: 7px; border: none; border-radius: 999px; background: var(--acento); color: #fff; width: 48px; display: grid; place-items: center; font-size: 18px; transition: background .3s, transform .15s; } .busca-btn:hover { transform: scale(1.05); } /* ---------- Grid de cards ---------- */ .secao-titulo { font-family: var(--fonte-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 34px 0 18px; } .secao-titulo em { font-style: normal; color: var(--acento); } .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; padding-bottom: 30px; } .card { position: relative; } .card-foto { position: relative; border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 20/19; background: var(--areia); } .card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .card:hover .card-foto img { transform: scale(1.05); } .card-selo { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.95); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; } .card-tipo { position: absolute; bottom: 12px; left: 12px; background: var(--tinta); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .card-info { padding: 12px 4px 0; } .card-linha1 { display: flex; justify-content: space-between; gap: 10px; } .card-titulo { font-weight: 700; font-size: 15px; line-height: 1.35; } .card-nota { font-size: 14px; white-space: nowrap; color: var(--tinta); } .card-local, .card-detalhe { font-size: 13.5px; color: var(--grafite); margin-top: 3px; } .card-preco { margin-top: 7px; font-size: 15px; } .card-preco strong { font-weight: 800; } .card-preco span { color: var(--grafite); font-weight: 500; } .vazio { text-align: center; color: var(--grafite); padding: 60px 20px; font-size: 15px; } /* ---------- Página do imóvel ---------- */ .pagina-imovel { padding: 26px 0 80px; } .imovel-titulo { font-family: var(--fonte-display); font-weight: 600; font-size: 30px; letter-spacing: -.01em; margin-bottom: 6px; } .imovel-sub { font-size: 14.5px; color: var(--grafite); margin-bottom: 18px; } .imovel-sub strong { color: var(--tinta); } .galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 190px 190px; gap: 10px; border-radius: var(--raio-g); overflow: hidden; } .galeria img { width: 100%; height: 100%; object-fit: cover; transition: filter .2s; } /* Só vira ponteiro quando há galeria por cômodo para abrir. */ .galeria-clicavel img { cursor: pointer; } .galeria-clicavel img:hover { filter: brightness(.92); } .galeria img:first-child { grid-row: span 2; } .galeria-wrap { position: relative; } .btn-ver-todas-fotos { position: absolute; bottom: 16px; right: 16px; background: var(--branco); border: 1px solid var(--tinta); border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; color: var(--tinta); box-shadow: var(--sombra); transition: transform .15s; } .btn-ver-todas-fotos:hover { transform: translateY(-1px); } .galeria-modal-fundo { align-items: flex-start; padding: 0; } .galeria-modal { max-width: 900px; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; padding: 0; display: flex; flex-direction: column; } .galeria-modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--linha); flex-shrink: 0; } .galeria-modal-topo h3 { font-family: var(--fonte-display); font-size: 21px; } .galeria-modal-fechar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); background: var(--branco); font-size: 15px; } .galeria-modal-corpo { padding: 24px 28px 60px; overflow-y: auto; flex: 1; } .galeria-categoria { margin-bottom: 36px; } .galeria-categoria h4 { font-size: 17px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .galeria-categoria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .galeria-categoria-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; } .imovel-corpo { display: grid; grid-template-columns: 1fr 380px; gap: 56px; margin-top: 34px; align-items: start; } .imovel-bloco { border-bottom: 1px solid var(--linha); padding: 26px 0; } .imovel-bloco h2 { font-family: var(--fonte-display); font-weight: 600; font-size: 21px; margin-bottom: 14px; } .imovel-desc { font-size: 15.5px; line-height: 1.7; color: #3A4047; } .specs { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: var(--grafite); } .comods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14.5px; } .comods li { list-style: none; display: flex; gap: 10px; align-items: center; } .comods li::before { content: "✓"; color: var(--acento); font-weight: 800; } .anfitriao { display: flex; gap: 16px; align-items: center; background: var(--areia); border-radius: var(--raio-g); padding: 20px 22px; } .anfitriao-foto { width: 58px; height: 58px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-family: var(--fonte-display); font-size: 24px; font-weight: 700; } .anfitriao b { font-size: 16px; } .anfitriao p { font-size: 13.5px; color: var(--grafite); margin-top: 2px; } /* ---------- Box de reserva ---------- */ .box-reserva { position: sticky; top: 90px; border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); padding: 24px; background: var(--branco); } .box-preco { font-size: 15px; margin-bottom: 16px; } .box-preco strong { font-size: 24px; font-weight: 800; } .box-preco span { color: var(--grafite); } .box-datas { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; margin-bottom: 12px; font-size: 13px; } .box-datas > div { padding: 10px 14px; } .box-datas > div:first-child { border-right: 1px solid var(--linha); } .box-datas label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; display: block; } .box-datas output { color: var(--grafite); } .box-select { width: 100%; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; outline: none; } .btn-principal { width: 100%; border: none; border-radius: 14px; background: var(--acento); color: #fff; padding: 15px; font-size: 16px; font-weight: 800; transition: filter .2s, transform .15s, background .3s; } .btn-principal:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-principal:disabled { opacity: .45; cursor: not-allowed; transform: none; } .box-nota { text-align: center; font-size: 12.5px; color: var(--grafite); margin-top: 10px; } .box-calc { margin-top: 16px; font-size: 14px; display: grid; gap: 8px; } .box-calc div { display: flex; justify-content: space-between; color: var(--grafite); } .box-calc .total { border-top: 1px solid var(--linha); padding-top: 10px; color: var(--tinta); font-weight: 800; } /* ---------- Calendário ---------- */ .calendarios { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .cal { user-select: none; } .cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cal-cab b { font-size: 15px; text-transform: capitalize; } .cal-nav { border: 1px solid var(--linha); background: #fff; border-radius: 50%; width: 30px; height: 30px; font-size: 14px; } .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .cal-grade .dow { font-size: 11px; font-weight: 700; color: var(--grafite); padding: 6px 0; } .cal-dia { border: none; background: none; border-radius: 50%; aspect-ratio: 1; font-size: 13.5px; font-weight: 600; color: var(--tinta); transition: background .12s; } .cal-dia:hover:not(:disabled) { background: var(--areia); } .cal-dia:disabled { color: #C9C4BC; text-decoration: line-through; cursor: not-allowed; } .cal-dia.selecionado { background: var(--tinta); color: #fff; } .cal-dia.entre { background: var(--acento-suave); border-radius: 0; } .cal-legenda { display: flex; gap: 18px; font-size: 12.5px; color: var(--grafite); margin-top: 14px; } /* ---------- Modal ---------- */ .modal-fundo { position: fixed; inset: 0; background: rgba(28,33,38,.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-fundo.aberto { display: flex; } .modal { background: #fff; border-radius: var(--raio-g); max-width: 440px; width: 100%; padding: 28px; max-height: 90vh; overflow-y: auto; } .modal h3 { font-family: var(--fonte-display); font-size: 21px; margin-bottom: 6px; } .modal .modal-sub { font-size: 14px; color: var(--grafite); margin-bottom: 18px; } .campo { margin-bottom: 14px; } .campo label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; } .campo input, .campo select, .campo textarea { width: 100%; border: 1px solid var(--linha); border-radius: 12px; padding: 11px 14px; outline: none; } .campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); } .modal-acoes { display: flex; gap: 10px; margin-top: 8px; } .btn-fantasma { flex: 1; border: 1px solid var(--linha); background: #fff; border-radius: 12px; padding: 13px; font-weight: 700; } .modal-acoes .btn-principal { flex: 2; } .sucesso { text-align: center; padding: 12px 0; } .sucesso .icone { width: 64px; height: 64px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; font-size: 30px; margin: 0 auto 14px; } /* ---------- Rodapé ---------- */ .rodape { border-top: 1px solid var(--linha); background: var(--areia); margin-top: 50px; padding: 36px 0; font-size: 13.5px; color: var(--grafite); } .rodape-linha { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .rodape b { color: var(--tinta); } .selo-demo { position: fixed; bottom: 16px; left: 16px; z-index: 60; background: var(--tinta); color: #fff; font-size: 11.5px; font-weight: 700; padding: 7px 13px; border-radius: 999px; opacity: .85; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--tinta); color: #fff; border-radius: 999px; padding: 12px 22px; font-size: 14px; font-weight: 600; opacity: 0; transition: all .3s; z-index: 200; pointer-events: none; max-width: 90vw; text-align: center; } .toast.visivel { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Responsivo ---------- */ @media (max-width: 920px) { .imovel-corpo { grid-template-columns: 1fr; gap: 10px; } .box-reserva { position: static; margin-top: 20px; } .calendarios { grid-template-columns: 1fr; } .galeria { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; } .galeria img:nth-child(n+5) { display: none; } } @media (max-width: 680px) { .busca { grid-template-columns: 1fr; border-radius: var(--raio-g); } .busca-campo { border-right: none; border-bottom: 1px solid var(--linha); } .busca-btn { width: auto; margin: 10px; padding: 12px; } .galeria { grid-template-columns: 1fr; grid-template-rows: 220px; } .galeria img:nth-child(n+2) { display: none; } .modos { flex-wrap: wrap; } .topo-acoes .so-desktop { display: none; } .comods { grid-template-columns: 1fr; } } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } /* ============================================================ CAPA IMERSIVA · LIQUID GLASS · EFEITOS DE ROLAGEM Tudo aqui é enfeite: some sob prefers-reduced-motion (bloco no topo do arquivo) e as animações de scroll ficam atrás de @supports, então navegador sem suporte só perde o movimento. ============================================================ */ :root { --vidro: rgba(255, 255, 255, .55); --vidro-borda: rgba(255, 255, 255, .65); --vidro-blur: 16px; --mola: cubic-bezier(.2, .7, .2, 1); } /* ---------- Header sobre a capa ---------- */ .topo-hero { position: fixed; inset: 0 0 auto 0; background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; } body:not(.rolado) .topo-hero .logo-nome, body:not(.rolado) .topo-hero .logo-nome em, body:not(.rolado) .topo-hero .topo-acoes a { color: #fff; } body:not(.rolado) .topo-hero .logo-creci { color: rgba(255,255,255,.72); } body:not(.rolado) .topo-hero .btn-whats { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.rolado .topo-hero { background: var(--vidro); -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(160%); backdrop-filter: blur(var(--vidro-blur)) saturate(160%); border-bottom: 1px solid rgba(255,255,255,.55); box-shadow: 0 6px 30px rgba(28,33,38,.10); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.rolado .topo-hero { background: rgba(255,255,255,.94); } } /* ---------- Hero / capa ---------- */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; isolation: isolate; background: linear-gradient(135deg, #141a1f, #2b2f36 55%, #3a2f33); } .hero-bg { position: absolute; inset: 0; z-index: -2; background: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat; transform-origin: center; } .hero-veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,19,24,.55) 0%, rgba(15,19,24,.20) 34%, rgba(15,19,24,.55) 76%, var(--branco) 100%), radial-gradient(120% 80% at 50% 18%, transparent 42%, rgba(15,19,24,.42) 100%); } .hero-brilho { position: absolute; z-index: -1; width: 62vmax; height: 62vmax; left: -12vmax; top: -22vmax; pointer-events: none; background: radial-gradient(circle, var(--acento), transparent 60%); opacity: .42; filter: blur(30px); animation: gr-flutuar 15s ease-in-out infinite alternate; } .hero-conteudo { position: relative; text-align: center; color: #fff; max-width: 820px; margin-inline: auto; padding: 96px 24px 0; } .hero-sobre { text-transform: uppercase; letter-spacing: .28em; font-size: 12.5px; font-weight: 700; opacity: .85; margin-bottom: 18px; } .hero-titulo { font-family: var(--fonte-display); font-weight: 600; font-size: clamp(38px, 7vw, 76px); line-height: 1.04; letter-spacing: -.02em; text-shadow: 0 2px 34px rgba(0,0,0,.35); } .hero-titulo em { font-style: italic; color: #fff; } .hero-sub { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; opacity: .92; margin: 22px auto 34px; max-width: 600px; } .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border-radius: 999px; font-weight: 800; font-size: 15.5px; color: var(--tinta); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 10px 30px rgba(0,0,0,.22); transition: transform .25s var(--mola), box-shadow .25s ease, background .25s ease; } .hero-cta:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.3); } .hero-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; } .hero-seta { font-size: 20px; animation: gr-quicar 1.9s ease-in-out infinite; } /* Entrada da capa no load (some sob reduced-motion) */ .hero-sobre, .hero-titulo, .hero-sub, .hero-cta { animation: gr-subir 1s var(--mola) backwards; } .hero-titulo { animation-delay: .08s; } .hero-sub { animation-delay: .16s; } .hero-cta { animation-delay: .24s; } /* Parallax + saída da capa guiados pela rolagem (enhancement) */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .hero-bg { animation: gr-hero-zoom linear both; animation-timeline: scroll(root); animation-range: 0 100svh; } .hero-conteudo { animation: gr-hero-saida linear both; animation-timeline: scroll(root); animation-range: 0 68svh; } } } /* ---------- Âncora da busca ---------- */ #busca { scroll-margin-top: 78px; padding-top: 30px; } /* ---------- Vidro na busca e nas pílulas ---------- */ .busca { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--vidro-borda); } .modo-btn { transition: transform .25s var(--mola), background .3s, color .2s, border-color .2s, box-shadow .25s; } .modo-btn:hover { transform: translateY(-2px); } .modo-btn.ativo { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(28,33,38,.16); } /* ---------- Título de seção + cards ---------- */ .secao-titulo { animation: gr-subir .7s var(--mola) both; } .card { transition: transform .3s var(--mola); } .card:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: no-preference) { /* Recriados a cada render → reanimam na troca de aba e nos filtros */ .card { animation: gr-card-entra .6s var(--mola) backwards; } .card:nth-child(2) { animation-delay: .05s; } .card:nth-child(3) { animation-delay: .10s; } .card:nth-child(4) { animation-delay: .15s; } .card:nth-child(5) { animation-delay: .18s; } .card:nth-child(6) { animation-delay: .21s; } .card:nth-child(n+7) { animation-delay: .24s; } } /* ---------- Rodapé em movimento ---------- */ .rodape-motion { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--areia), #f1ece4); } .rodape-motion::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--rosa), var(--mar), var(--latao), var(--rosa)); background-size: 300% 100%; animation: gr-desliza-grad 8s linear infinite; } .rodape-orbe { position: absolute; width: 42vmax; height: 42vmax; right: -14vmax; bottom: -22vmax; pointer-events: none; opacity: .14; filter: blur(22px); background: radial-gradient(circle, var(--acento), transparent 60%); animation: gr-flutuar 13s ease-in-out infinite alternate; } .rodape-marca { position: relative; text-align: center; padding: 30px 24px 4px; } .rodape-marca .logo-nome { font-size: 26px; } .rodape-marca p { color: var(--grafite); font-size: 13.5px; margin-top: 6px; } .rodape-lmon { color: var(--tinta); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .rodape-lmon { background: linear-gradient(90deg, var(--tinta), var(--acento), var(--tinta)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gr-brilho-texto 6s linear infinite; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .rodape-marca { animation: gr-subir linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; } } } /* ---------- Keyframes ---------- */ @keyframes gr-subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes gr-card-entra { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes gr-hero-zoom { to { transform: scale(1.18); } } @keyframes gr-hero-saida { to { opacity: 0; transform: translateY(-40px); } } @keyframes gr-quicar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes gr-flutuar { from { transform: translate(0,0); } to { transform: translate(4vmax, 3vmax); } } @keyframes gr-desliza-grad { to { background-position: 300% 0; } } @keyframes gr-brilho-texto { to { background-position: 200% 0; } } /* Em telas pequenas a capa encurta um pouco para não empurrar tudo. */ @media (max-width: 680px) { .hero { min-height: 92svh; } .hero-conteudo { padding-top: 84px; } .hero-cue { display: none; } }