/* ============================================================ HAVA NETZE BEMACHOL 2026 · área aberta Identidade oficial do 55º HNB / 37º Atid / 1º Show de Talentos. Âncoras: azul (primária HNB) · vinho (base comum às duas marcas) · dourado (destaque, UM elemento por bloco). Combinações aprovadas: azul+off-white (geral), vinho+dourado (competição/premiação), near-black+azul (shows noturnos). Display: Bebas Neue (só caixa alta) · Texto: Montserrat. ============================================================ */ :root{ --paper:#F5F1EC; /* off-white oficial */ --paper-2:#EAE1D5; --ink:#1A1A1A; /* near-black oficial */ --ink-soft:#3D3833; --muted:#6E665E; --line:#DCD2C3; --blue:#0078C8; /* azul HNB */ --blue-deep:#284898; /* azul escuro — apoio/degradê */ --wine:#880828; /* vinho */ --gold:#F8C000; /* dourado */ --orange:#E06010; /* laranja Atid */ --display:'Bebas Neue','Oswald',Impact,sans-serif; --body:'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif; --radius:18px; --max:1240px; --shadow-s:0 2px 10px rgba(26,26,26,.06); --shadow-m:0 14px 40px rgba(26,26,26,.12); --shadow-l:0 30px 70px rgba(26,26,26,.16); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--body);background:var(--paper);color:var(--ink); overflow-x:hidden;line-height:1.7;font-weight:400; } ::selection{background:var(--gold);color:var(--ink)} main,header,footer,nav{position:relative;z-index:2} section{scroll-margin-top:92px} img{max-width:100%} /* ---------- tipografia ---------- */ .kicker{ font-family:var(--display);font-size:.95rem;letter-spacing:.34em;text-transform:uppercase; color:var(--wine);display:inline-flex;align-items:center;gap:.8rem;line-height:1; } .kicker::before{content:"";width:34px;height:2px;background:var(--gold)} h2.section-title{ font-family:var(--display);font-weight:400;line-height:1;text-transform:uppercase; font-size:clamp(2.5rem,5.6vw,4.4rem);margin:1.1rem 0 1.2rem;letter-spacing:.01em; } h2 .accent{color:var(--blue)} .lead{color:var(--muted);font-size:1.02rem;max-width:64ch;font-weight:400} /* marca-texto dourado — o destaque único permitido por bloco. O box-decoration-break mantém o arredondamento quando a frase quebra. */ .destaque{ background:var(--gold);color:var(--ink);font-weight:700; padding:.08em .3em;border-radius:3px; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .hebrew{direction:rtl;font-weight:500;font-family:'Heebo',var(--body)} /* ---------- nav ---------- */ /* Sobre o hero azul a nav é branca; ao rolar vira off-white com texto escuro — e o logo troca da versão branca para a colorida (regra de contraste). */ nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:.85rem clamp(1.2rem,4vw,3rem); transition:background .4s,box-shadow .4s,backdrop-filter .4s; } nav.scrolled{background:rgba(245,241,236,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)} .logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:#fff} nav.scrolled .logo{color:var(--ink)} .logo-mark{height:46px;width:auto;display:block;transition:transform .5s cubic-bezier(.3,1.5,.4,1)} .logo:hover .logo-mark{transform:scale(1.06) rotate(-3deg)} .logo-mark.on-light{display:none} nav.scrolled .logo-mark.on-dark{display:none} nav.scrolled .logo-mark.on-light{display:block} .logo-text{line-height:1.05} .logo-text b{font-family:var(--display);font-size:1.24rem;font-weight:400;display:block;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap} .logo-text small{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.75;white-space:nowrap;display:block} nav.scrolled .logo-text small{color:var(--wine);opacity:1} .nav-links{display:flex;gap:clamp(.8rem,1.5vw,1.5rem);align-items:center;list-style:none} .nav-links a{color:rgba(255,255,255,.9);text-decoration:none;font-size:.8rem;font-weight:500;transition:color .25s;position:relative;white-space:nowrap} nav.scrolled .nav-links a{color:var(--ink-soft)} .nav-links a:not(.btn):hover{color:var(--gold)} nav.scrolled .nav-links a:not(.btn):hover{color:var(--blue)} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .3s} .nav-links a:not(.btn):hover::after{width:100%} .nav-links .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)} nav.scrolled .nav-links .btn-ghost{color:var(--ink);border-color:var(--line)} .hamburger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;z-index:60} .hamburger span{width:26px;height:2px;background:#fff;transition:.3s} nav.scrolled .hamburger span,.hamburger.open span{background:var(--ink)} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;gap:.6rem;justify-content:center; font-family:var(--display);font-size:1rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase; padding:.95rem 1.9rem;border-radius:4px;text-decoration:none;cursor:pointer;border:0;line-height:1.1; transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s; will-change:transform;position:relative; } .btn:active{transform:scale(.97)} .btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 6px 18px rgba(248,192,0,.32)} .btn-gold:hover{background:var(--wine);color:#fff;box-shadow:0 10px 26px rgba(136,8,40,.3)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(0,120,200,.26)} .btn-blue:hover{background:var(--blue-deep);box-shadow:0 10px 26px rgba(40,72,152,.34)} .btn-wine{background:var(--wine);color:#fff;box-shadow:0 6px 18px rgba(136,8,40,.26)} .btn-wine:hover{background:var(--ink)} .btn-paper{background:var(--paper);color:var(--blue);box-shadow:0 8px 22px rgba(0,0,0,.16)} .btn-paper:hover{background:#fff;color:var(--blue-deep)} /* contorno claro, para usar sobre bloco de cor (vinho, azul, near-black) */ .btn-clara{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4)} .btn-clara:hover{background:rgba(255,255,255,.2);border-color:#fff} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--wine);color:var(--wine)} .btn-sm{padding:.62rem 1.25rem;font-size:.84rem} .btn .arrow{transition:transform .25s} .btn:hover .arrow{transform:translateX(4px)} /* ---------- primeiro frame: hero + faixa fecham uma tela ---------- A faixa vinho é o último item da coluna, então encosta na base do frame; o hero absorve a sobra. Sem calc() da altura da faixa, que mudaria a cada ajuste de padding ou da borda dourada. */ .first-frame{min-height:100svh;display:flex;flex-direction:column} /* ---------- hero: bloco de cor cheio, azul + off-white ---------- */ .hero{ flex:1 1 auto;min-height:0; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;padding:6rem clamp(1.2rem,5vw,4rem) 2.5rem;position:relative;overflow:hidden; background:radial-gradient(circle at 50% 42%,var(--blue) 0%,var(--blue) 45%,var(--blue-deep) 100%); color:var(--paper); } .hero-sun{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(128vmin,1060px);height:min(128vmin,1060px);pointer-events:none;opacity:.9; } .hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .hero-icone{width:clamp(62px,8.5vw,96px);margin-bottom:.85rem;filter:drop-shadow(0 8px 24px rgba(0,0,0,.22))} .hero-badge{ display:inline-flex;align-items:center;gap:.7rem;border:1.5px solid rgba(255,255,255,.45); border-radius:999px;padding:.42rem 1.15rem;font-family:var(--display);font-size:.9rem; letter-spacing:.22em;text-transform:uppercase;margin-bottom:1.15rem;line-height:1; } .hero-badge .b-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)} .hero-hebrew{ font-size:clamp(1.05rem,1.9vw,1.4rem);color:rgba(255,255,255,.82);letter-spacing:.08em; margin-bottom:.7rem; } .hero h1{ font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(3rem,8.8vw,7.2rem);line-height:.92;letter-spacing:.012em; } .hero h1 .word{display:block} .hero h1 .char{display:inline-block;transition:transform .35s cubic-bezier(.3,1.7,.4,1),color .35s;cursor:default} .hero h1 .char:hover{transform:translateY(-9px);color:var(--gold)} /* o letter-spacing final joga o bloco para a direita: compensa com margem */ .hero h1 .l3{ font-size:.34em;color:rgba(255,255,255,.7);letter-spacing:.5em;margin-top:.8rem; margin-right:-.5em; } .hero-sub{ margin-top:1.35rem;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center;justify-content:center; color:rgba(255,255,255,.78);font-size:.95rem; } .hero-sub b{color:#fff;font-weight:600} /* único destaque dourado do bloco: a data */ .hero-sub .data{color:var(--gold);font-weight:700;letter-spacing:.02em} .hero-sub .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- faixa-cartaz (marquee) em vinho ---------- */ .marquee{ overflow:hidden;padding:.8rem 0;background:var(--wine);color:var(--paper); border-bottom:4px solid var(--gold); } .marquee-track{display:flex;gap:3rem;width:max-content;animation:scroll 34s linear infinite;white-space:nowrap} .marquee-track span{ font-family:var(--display);font-size:1.05rem;font-weight:400;letter-spacing:.26em; text-transform:uppercase;display:flex;align-items:center;gap:3rem;line-height:1; } .marquee-track .star{color:var(--gold)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- countdown ---------- */ /* padding igual em cima e embaixo: o contador fica numa faixa clara com o mesmo ar até a faixa vinho e até o bloco da Programação */ .countdown{ display:flex;gap:clamp(.8rem,3vw,2.4rem);justify-content:center;flex-wrap:wrap; margin:0 auto;padding:3.6rem 1rem; } .cd-cell{text-align:center;min-width:96px;position:relative;padding:0 clamp(.4rem,2vw,1.4rem)} .cd-cell+.cd-cell::before{ content:"";position:absolute;left:calc(clamp(.4rem,2vw,1.4rem)*-.5 - 1px);top:12%;bottom:18%;width:1px; background:linear-gradient(transparent,var(--gold),transparent); } .cd-num{ font-family:var(--display);font-weight:400;font-size:clamp(3rem,6.4vw,5rem); color:var(--blue);font-variant-numeric:tabular-nums;line-height:.95; } .cd-label{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--wine);margin-top:.35rem;font-weight:700} /* ---------- seções ---------- */ section{padding:clamp(4.5rem,9vw,8rem) clamp(1.2rem,5vw,4rem)} .wrap{max-width:var(--max);margin:0 auto} .section-alt{background:var(--paper-2)} .tilt{transform-style:preserve-3d;will-change:transform;transition:box-shadow .3s} /* "O Festival" é quem segue o contador: padding menor no topo para os dois respiros não se somarem (o contador já tem o seu). */ #festival{padding-top:clamp(3rem,5vw,4.5rem)} /* Programação e Ingressos ocupam um frame: uma tela, conteúdo centrado. O padding fica pequeno e simétrico porque é só o mínimo — em tela baixa a seção cresce em vez de cortar. */ #programacao,#ingressos{ min-height:100svh;display:flex;align-items:center; padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem); /* sendo o frame exatamente uma tela, o scroll-margin global (92px, para a nav não cobrir o kicker) faria o menu parar depois do topo da seção. O próprio padding já mantém o conteúdo longe da nav. */ scroll-margin-top:0; } /* A Ingressos é a menor das duas — título e uma linha de "em breve" —, e uma tela inteira em volta disso virava vazio: 183px de conteúdo em 900px de frame. Fica com pouco mais da metade da tela, o gesto de frame sem o vão. Quando os blocos de preço voltarem (docs/arquivo/blocos-ingressos.html), dá para devolver o 100svh. */ #ingressos{min-height:60svh} /* como item flex, o .wrap encolheria até o conteúdo */ #programacao .wrap,#ingressos .wrap{width:100%} #programacao .section-title,#ingressos .section-title{margin:.9rem 0 1rem} /* programação em breve */ .day-tabs{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.4rem 0 1.2rem} .day-tab{ font-family:var(--display);font-size:.92rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase; padding:.65rem 1.5rem;border-radius:4px;border:1.5px solid var(--line);line-height:1.2; background:#fff;color:var(--muted); } .day-tab.active{background:var(--blue);border-color:var(--blue);color:#fff} .soon{ border:1.5px dashed #CBBEA9;border-radius:var(--radius); padding:clamp(1.8rem,3.5vw,2.8rem) 2rem;text-align:center;position:relative;overflow:hidden; background:#fff;box-shadow:var(--shadow-s); } .soon::before{ content:"";position:absolute;width:560px;height:560px;border-radius:50%; border:1.5px dashed rgba(248,192,0,.55);left:50%;top:50%;transform:translate(-50%,-50%); animation:spin 70s linear infinite; } .soon-inner{position:relative} .soon-title{ font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.5vw,3.4rem); text-transform:uppercase;letter-spacing:.06em;line-height:1;margin-bottom:.7rem;color:var(--blue); } .soon p{color:var(--muted);max-width:52ch;margin:0 auto 1.2rem} .reg-buttons{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem} /* ---------- competição: vinho + dourado ---------- */ .comp{ background:var(--wine); border-radius:var(--radius); padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden;color:#FBF3F4; box-shadow:var(--shadow-l); } .comp .kicker{color:var(--gold)} .comp .kicker::before{background:var(--gold)} .comp::after{ content:"מחול";position:absolute;right:-1rem;bottom:-3.5rem;font-size:13rem;font-weight:700; color:rgba(255,255,255,.06);pointer-events:none;font-family:'Heebo',sans-serif; } .comp::before{ content:"";position:absolute;left:-80px;top:-80px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(248,192,0,.2),transparent 70%); } .comp .lead{color:rgba(255,255,255,.78)} .comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin:2.2rem 0} .comp-item{ border-left:3px solid var(--gold);padding:.8rem 0 .8rem 1.1rem; transition:background .3s,transform .3s; } .comp-item:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)} .comp-item h4{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;color:#fff} .comp-item p{color:rgba(255,255,255,.72);font-size:.9rem} /* O card vinho já tem padding próprio (até 4rem), então o respiro global de 8rem embaixo dele somava com o de cima da Inscrições: 266px de vão, quase um terço de tela vazia. Só esta emenda encolhe; o resto da página mantém o ritmo. */ #competicao{padding-bottom:clamp(2.2rem,4.5vw,4rem)} #inscricao{padding-top:clamp(2.2rem,4.5vw,4rem)} #inscricao{padding-bottom:clamp(2.2rem,4.5vw,4rem)} /* inscrição */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:2.4rem 0;perspective:900px} .step{ border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.5rem; background:#fff;box-shadow:var(--shadow-s); } .step:hover{box-shadow:var(--shadow-m)} .step-n{ font-family:var(--display);font-weight:400;font-size:2.8rem;color:var(--blue);line-height:.9; } .step h4{font-family:var(--display);font-weight:400;font-size:1.35rem;text-transform:uppercase;letter-spacing:.05em;margin:.6rem 0 .3rem;line-height:1.1} .step p{color:var(--muted);font-size:.92rem} /* link do PDF dentro do card de passo */ .step-link{ display:inline-block;margin-top:.8rem;color:var(--blue);font-weight:600; font-size:.86rem;text-decoration:none;border-bottom:1.5px solid var(--gold); } .step-link:hover{color:var(--blue-deep)} /* o "ver o passo a passo" é