/* ========================================================================== IMERSÃO RUPTURA — Galeria de fotos do evento -------------------------------------------------------------------------- Identidade visual extraída da página oficial do evento (raphatarso.com.br/imersaoruptura) e dos criativos de campanha: fundo creme/pergaminho, tinta marrom-café, dourado como assinatura (logo, números, contador), verde como cor de ação (igual ao "COMPRE 1 E LEVE 2" do site), e um bloco marrom-escuro para os momentos de contraste (like a seção "Quem conduz" do site). Tipografia real do site: Playfair Display (serif, títulos/números) + Manrope (sans, texto corrido). Carregadas via Google Fonts no . ========================================================================== */ :root { /* Cor — extraída por amostragem direta da página e dos criativos */ --creme: #f6e9d2; /* fundo padrão (pergaminho) */ --creme-suave: #fbf3e6; /* cards, superfícies elevadas sobre o creme */ --creme-forte: #efdcb8; /* faixas/realces sobre o creme */ --tinta: #2a1b10; /* títulos — marrom-café quase preto */ --tinta-suave: #5b4732; /* texto corrido */ --tinta-fraca: #8a7259; /* legendas, texto terciário */ --ouro: #a6720b; /* dourado — números, contador, bordas */ --ouro-vivo: #d9a727; /* dourado claro — hover, brilho */ --ouro-linha: #c3a47d; /* bordas finas sobre creme (pill/cards) */ --verde: #2bad0c; /* verde de ação — igual ao CTA do site oficial */ --verde-escuro: #1f8709; --carvao: #1e140b; /* bloco escuro (seção "quem conduz"/rodapé) */ --carvao-alto: #2a1c10; --linha: rgba(42, 27, 16, 0.14); --linha-forte: rgba(42, 27, 16, 0.28); --sombra: 0 20px 50px rgba(42, 27, 16, 0.18); --sombra-carvao: 0 20px 60px rgba(0, 0, 0, 0.5); /* Tipografia — as mesmas famílias da página oficial do evento */ --fonte-display: "Playfair Display", Georgia, "Times New Roman", serif; --fonte-texto: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fonte-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace; --raio: 4px; --largura-conteudo: 1240px; } /* Este projeto segue fielmente a identidade clara/dourada do evento (sem variação por tema do sistema) — os tokens acima são pintados explicitamente e valem em qualquer host. */ * { box-sizing: border-box; } html { color-scheme: light; } body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--fonte-texto); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; } .envolucro { max-width: var(--largura-conteudo); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .numero-tab { font-variant-numeric: tabular-nums; } /* ---------------------------------- Topo --------------------------------- */ .topo { position: sticky; top: 0; z-index: 40; background: rgba(246, 233, 210, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); } .topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px clamp(20px, 5vw, 48px); } .marca { display: flex; align-items: center; text-decoration: none; } .marca__texto { font-family: var(--fonte-display); font-weight: 700; font-size: 19px; color: var(--tinta); letter-spacing: -0.01em; } .marca__texto em { font-style: italic; color: var(--ouro); } .topo__acoes { display: flex; align-items: center; gap: 10px; } /* --------------------------------- Botões --------------------------------- */ .botao { appearance: none; border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta); font-family: var(--fonte-texto); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; padding: 12px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease; white-space: nowrap; } .botao:hover { border-color: var(--tinta-fraca); } .botao:active { transform: translateY(1px); } .botao--acento { background: var(--verde); border-color: var(--verde); color: #fff; text-transform: uppercase; } .botao--acento:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); } .botao--fantasma { border-color: transparent; color: var(--tinta-suave); padding-left: 12px; padding-right: 12px; } .botao--fantasma:hover { color: var(--tinta); } .botao[disabled] { opacity: 0.4; cursor: not-allowed; } .botao--pequeno { padding: 8px 14px; font-size: 12px; } /* Selo/pill no estilo das tags de data e local do site oficial */ .selo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ouro-linha); background: var(--creme-suave); color: var(--tinta-suave); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; } /* ---------------------------------- Hero ---------------------------------- */ .hero { position: relative; padding: clamp(40px, 7vw, 76px) 0 clamp(40px, 6vw, 64px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 78% 20%, rgba(217, 167, 39, 0.16), transparent 60%); pointer-events: none; } .hero__grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .hero__logo { height: 58px; width: auto; margin: 0 0 24px; } .hero__titulo { font-family: var(--fonte-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--tinta); text-wrap: balance; } .hero__titulo em { font-style: italic; color: var(--ouro); } .hero__legenda { font-size: clamp(15px, 1.5vw, 17px); color: var(--tinta-suave); max-width: 48ch; margin: 0 0 24px; } .hero__selos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* Colagem do hero — molduras estilo passe-partout para as fotos. As fotos do evento são bem panorâmicas (câmera profissional, ~16:9), então as molduras usam proporção paisagem + object-fit: cover — sem isso, uma foto larga dentro de uma moldura alta sobra vão vazio embaixo. Só 3 fotos (1 grande + 2 pequenas) em vez de 6, para não virar um mosaico apertado. */ .contato { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .contato__quadro { position: relative; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; border: 1px solid var(--ouro-linha); background: var(--creme-suave); box-shadow: var(--sombra); } .contato__quadro:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } .contato__quadro img { width: 100%; height: 100%; object-fit: cover; } .contato__numero { position: absolute; left: 6px; bottom: 6px; font-family: var(--fonte-mono); font-size: 10px; color: #fff; background: rgba(30, 20, 11, 0.55); padding: 1px 5px; border-radius: 2px; } /* ------------------------------- Como funciona ----------------------------- */ .como { padding: 56px 0; } .como__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 28px); } .como__item { padding: 24px 22px; background: var(--creme-suave); border: 1px solid var(--ouro-linha); border-radius: var(--raio); } .como__passo { font-family: var(--fonte-display); font-weight: 700; font-size: 30px; color: var(--ouro); margin: 0 0 10px; line-height: 1; } .como__titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--tinta); } .como__texto { font-size: 13.5px; color: var(--tinta-suave); margin: 0; line-height: 1.55; } /* --------------------------------- Galeria --------------------------------- */ .galeria-secao { padding: 20px 0 88px; } .galeria-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .galeria-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 24px; margin: 0; color: var(--tinta); } .filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .chip { appearance: none; border: 1px solid var(--ouro-linha); background: var(--creme-suave); color: var(--tinta-suave); font-size: 12.5px; font-weight: 700; padding: 8px 15px; border-radius: 20px; cursor: pointer; transition: all 0.15s ease; } .chip:hover { color: var(--tinta); border-color: var(--tinta-fraca); } .chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--creme); } .grade-fotos { column-count: 4; column-gap: 14px; } @media (max-width: 1100px) { .grade-fotos { column-count: 3; } } @media (max-width: 760px) { .grade-fotos { column-count: 2; } } @media (max-width: 460px) { .grade-fotos { column-count: 1; } } /* Moldura tipo passe-partout: mata creme ao redor da foto, como uma pequena exposição — em vez do fundo escuro genérico de galeria. */ .foto-card { break-inside: avoid; margin: 0 0 14px; position: relative; border-radius: 2px; overflow: hidden; border: 1px solid var(--ouro-linha); background: var(--creme-suave); cursor: zoom-in; box-shadow: 0 1px 2px rgba(42, 27, 16, 0.06); } .foto-card img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .foto-card:hover img { transform: scale(1.03); } .foto-card__véu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 20, 11, 0) 55%, rgba(30, 20, 11, 0.55) 100%); opacity: 0; transition: opacity 0.15s ease; } .foto-card:hover .foto-card__véu, .foto-card--selecionavel .foto-card__véu { opacity: 1; } .foto-card__numero { position: absolute; left: 8px; bottom: 8px; font-family: var(--fonte-mono); font-size: 10.5px; color: #fff; opacity: 0; transition: opacity 0.15s ease; } .foto-card:hover .foto-card__numero { opacity: 0.9; } .foto-card__baixar { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(30, 20, 11, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; } .foto-card:hover .foto-card__baixar { opacity: 1; } .foto-card__baixar:hover { background: var(--verde); } .foto-card__marcador { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.75); background: rgba(30, 20, 11, 0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .foto-card--selecionavel .foto-card__marcador { opacity: 1; } .foto-card--selecionada .foto-card__marcador { background: var(--verde); border-color: var(--verde); } .foto-card__marcador svg { width: 12px; height: 12px; opacity: 0; } .foto-card--selecionada .foto-card__marcador svg { opacity: 1; } .foto-card--selecionada { outline: 2px solid var(--verde); outline-offset: -2px; } /* Estado vazio / carregando */ .estado { padding: 60px 20px; text-align: center; color: var(--tinta-suave); border: 1px dashed var(--ouro-linha); border-radius: var(--raio); } .estado__titulo { font-family: var(--fonte-display); color: var(--tinta); font-weight: 700; margin: 0 0 8px; } /* ---------------------------- Barra de seleção fixa ------------------------- */ .barra-selecao { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 50; display: flex; align-items: center; gap: 14px; background: var(--carvao); color: var(--creme); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--sombra-carvao); padding: 10px 12px 10px 18px; border-radius: 30px; transition: transform 0.25s ease; } .barra-selecao--visivel { transform: translate(-50%, 0); } .barra-selecao__texto { font-size: 13.5px; font-family: var(--fonte-mono); } .barra-selecao .botao { border-color: rgba(255, 255, 255, 0.25); color: var(--creme); } .barra-selecao .botao:hover { border-color: rgba(255, 255, 255, 0.5); } /* ---------------------------------- Rodapé ---------------------------------- */ /* ---------------------------------- Lightbox --------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20, 13, 7, 0.96); display: none; align-items: center; justify-content: center; padding: 24px; } .lightbox--aberta { display: flex; } .lightbox__topo { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; font-family: var(--fonte-mono); font-size: 12.5px; color: rgba(246, 233, 210, 0.7); } .lightbox__fechar { background: none; border: none; color: var(--creme); font-size: 22px; cursor: pointer; line-height: 1; padding: 6px; } .lightbox__corpo { position: relative; max-width: 1200px; max-height: 84vh; width: 100%; display: flex; align-items: center; justify-content: center; } .lightbox__corpo img { max-width: 100%; max-height: 84vh; width: auto; object-fit: contain; box-shadow: var(--sombra-carvao); } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(246, 233, 210, 0.12); border: 1px solid rgba(246, 233, 210, 0.25); color: var(--creme); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; } .lightbox__nav:hover { background: var(--ouro); border-color: var(--ouro); color: #fff; } .lightbox__nav--anterior { left: -4px; } .lightbox__nav--proxima { right: -4px; } @media (max-width: 720px) { .lightbox__nav--anterior { left: 4px; } .lightbox__nav--proxima { right: 4px; } } .lightbox__rodape { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; } /* --------------------------------- Toast/progresso --------------------------------- */ .toast { position: fixed; right: 20px; bottom: 20px; z-index: 120; background: var(--carvao); color: var(--creme); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--raio); padding: 14px 16px; min-width: 240px; box-shadow: var(--sombra-carvao); transform: translateY(140%); transition: transform 0.25s ease; } .toast--visivel { transform: translateY(0); } .toast__titulo { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; font-family: var(--fonte-mono); } .toast__barra { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; } .toast__barra span { display: block; height: 100%; width: 0%; background: var(--ouro-vivo); transition: width 0.2s ease; } /* --------------------------------- Aviso (usado só na prévia) --------------------------------- */ .aviso-artefato { margin: 0; padding: 9px clamp(20px, 5vw, 48px); background: var(--carvao); color: rgba(246, 233, 210, 0.75); font-family: var(--fonte-mono); font-size: 11.5px; text-align: center; } .aviso-demo { margin-bottom: 20px; font-size: 12.5px; color: var(--tinta-suave); border: 1px solid var(--ouro-linha); background: var(--creme-suave); padding: 10px 14px; border-radius: var(--raio); max-width: 54ch; } .aviso-demo code { background: rgba(42, 27, 16, 0.08); padding: 1px 5px; border-radius: 3px; } /* --------------------------------- Responsivo --------------------------------- */ @media (max-width: 860px) { .hero__grade { grid-template-columns: 1fr; } .contato { /* Sem order: -1 de propósito — a headline "Fotos da última Imersão Ruptura" precisa aparecer ANTES da colagem de fotos no mobile, seguindo a ordem natural do HTML (texto, depois fotos). */ max-width: 480px; } .como__lista { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } }