/* ============================================================ FESTIVAL DO MAR 2026 — /links ============================================================ */ /* ---------- 1. FONTES ---------- */ @font-face{ font-family:'Valdursans'; src:url('../fonts/ValdursansComicaNo1-Regular.woff2') format('woff2'), url('../fonts/ValdursansComicaNo1-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Ramona'; src:url('../fonts/Ramona-Bold.woff2') format('woff2'), url('../fonts/Ramona-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Ramona'; src:url('../fonts/Ramona-Light.woff2') format('woff2'), url('../fonts/Ramona-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'NunitoSansBrand'; src:url('../fonts/NunitoSans-Regular.woff2') format('woff2'), url('../fonts/NunitoSans-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Nunito'; src:url('../fonts/Nunito-ExtraLight.woff2') format('woff2'), url('../fonts/Nunito-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; } /* ---------- 2. TOKENS ---------- */ :root{ --verde: #009667; --verde-fundo: #007a55; --verde-fundo2:#00693f; --azul: #2460AB; --azul-escuro:#1b4c87; --coral: #F05A36; --amarelo: #FBAF30; --branco: #FFFFFF; --tinta: #063B2A; --display: 'Valdursans', sans-serif; --heading: 'Ramona', sans-serif; /* 'Nunito Sans' aqui vem do Google Fonts (carregado no ), não do arquivo local — o arquivo extraído do PDF só contém as letras que apareciam no material gráfico original e derrubava textos digitados livremente (título de botão, etc). Pra texto fixo e curto (tagline, "Festival do"), os arquivos locais (--display/--heading) continuam seguros pois já foram conferidos letra por letra. */ --body: 'Nunito Sans', sans-serif; --max-w: 460px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; min-height:100svh; font-family:var(--body); color:var(--branco); background-color:var(--verde); background-image:url('../img/bg-textura.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; overflow-x:hidden; position:relative; } .wrap{ position:relative; z-index:1; max-width:var(--max-w); margin:0 auto; padding:38px 22px 28px; display:flex; flex-direction:column; align-items:center; } /* ---------- 3. HERO / WORDMARK ---------- */ .marca{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:8px; } .selo{ width:86px; height:86px; border-radius:50%; background:var(--amarelo); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.18), 0 0 0 5px rgba(255,255,255,.14); margin-bottom:18px; } .selo svg{ width:46px; height:46px; } .selo-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .selo-livre{ display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .selo-livre img{ display:block; max-width:240px; max-height:280px; width:auto; height:auto; } .eyebrow{ font-family:var(--heading); font-weight:300; font-size:.82rem; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.78); margin:0 0 2px; } .wordmark{ font-family:var(--display); font-weight:400; line-height:.86; font-size:clamp(3.1rem, 17vw, 4.6rem); margin:2px 0 6px; letter-spacing:.01em; } .wordmark .ano{ color:var(--amarelo); font-size:.5em; vertical-align:.42em; margin-left:.06em; } .tagline{ display:inline-block; font-family:var(--heading); font-weight:700; font-size:.86rem; letter-spacing:.02em; color:var(--tinta); background:var(--amarelo); padding:6px 16px; border-radius:999px; transform:rotate(-1.4deg); margin:6px 0 12px; } .info-bar{ display:inline-flex; align-items:center; gap:14px; margin-top:14px; padding:9px 18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); border-radius:999px; } .info-bar-item{ display:flex; align-items:center; gap:7px; font-family:var(--body); font-size:.8rem; font-weight:700; letter-spacing:.01em; color:#fff; white-space:nowrap; } .info-bar-item svg{ width:15px; height:15px; flex:0 0 auto; color:var(--amarelo); } .info-bar-divider{ width:1px; height:16px; background:rgba(255,255,255,.28); flex:0 0 auto; } .video-embed{ width:100%; aspect-ratio:16/9; margin-top:26px; border-radius:18px; overflow:hidden; background:#00291d; box-shadow:0 6px 0 rgba(0,0,0,.16); } .video-embed iframe{ width:100%; height:100%; border:0; display:block; } /* ---------- 4. LINKS ---------- */ .links{ width:100%; list-style:none; margin:30px 0 6px; padding:0; display:flex; flex-direction:column; gap:14px; } .link{ --cor: var(--coral); position:relative; display:flex; align-items:center; gap:14px; width:100%; padding:16px 20px; border-radius:18px; background:var(--branco); color:var(--tinta); text-decoration:none; font-family:var(--body); font-weight:800; font-size:1.02rem; border:2.5px solid var(--cor); box-shadow:0 6px 0 var(--cor); transition:transform .14s ease, box-shadow .14s ease; } .link:active{ transform:translateY(6px); box-shadow:0 0 0 var(--cor); } @media (hover:hover){ .link:hover{ transform:translateY(2px); box-shadow:0 4px 0 var(--cor); } } .link .icone{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--cor); color:#fff; display:flex; align-items:center; justify-content:center; } .link .icone svg{ width:21px; height:21px; overflow:visible; } .link .icone img{ width:21px; height:21px; overflow:visible; object-fit:contain; } .link .texto{ flex:1; min-width:0; } .link .texto small{ display:block; font-family:var(--body); font-weight:400; font-size:.72rem; color:rgba(6,59,42,.62); margin-top:1px; } .link .seta{ flex:0 0 auto; opacity:.55; } .link .seta svg{ width:16px; height:16px; display:block; } .link.-blue{ --cor: var(--azul); } .link.-gold{ --cor: var(--amarelo); } .link.-coral{ --cor: var(--coral); } /* destaque: ingressos */ .link.-destaque{ background:var(--coral); color:var(--branco); border-color:#c9431f; box-shadow:0 6px 0 #c9431f; } .link.-destaque .texto small{ color:rgba(255,255,255,.85); } .link.-destaque .icone{ background:rgba(255,255,255,.22); } /* ---------- 5. RODAPÉ ---------- */ /* ---------- 6. ONDAS DE RODAPÉ ---------- */ .ondas{ width:100%; margin-top:30px; line-height:0; } .ondas svg{ width:100%; height:auto; display:block; } .rodape{ width:100%; text-align:center; padding:16px 10px 6px; font-family:var(--body); font-size:.76rem; color:rgba(255,255,255,.68); } .rodape a{ color:rgba(255,255,255,.85); text-decoration:underline; } .rodape-imagem{ width:100%; margin-top:18px; display:flex; align-items:center; justify-content:center; } .rodape-imagem img{ max-width:100%; height:auto; max-height:56px; opacity:.92; } /* ---------- 7. RESPONSIVO ---------- */ @media (min-width:480px){ .wrap{ padding-top:52px; } } @media (prefers-reduced-motion:no-preference){ .selo{ animation:boiar 4.5s ease-in-out infinite; } .selo-livre{ animation:boiar 4.5s ease-in-out infinite; } } @keyframes boiar{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-6px) rotate(-3deg); } } /* foco visível para teclado */ a:focus-visible{ outline:3px solid var(--branco); outline-offset:3px; border-radius:14px; }