/* ========================================================= Sabor & Jazz — Estilos do site público Cores e fontes são injetadas via variáveis CSS no ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body), sans-serif; color: #fff; background: var(--c4); overflow-x: hidden; } h1, h2, h3, h4, .display { font-family: var(--font-heading), sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.02em; } p { line-height: 1.7; } a { color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 7px 16px; border-radius: 30px; background: rgba(255,255,255,.14); margin-bottom: 18px; } .eyebrow::before { content:''; width:7px; height:7px; border-radius:50%; background: currentColor; } .section-head { max-width: 640px; margin-bottom: 42px; } .section-head h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; } .section-head p { font-size: 16px; opacity: .92; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-3px); } .btn.primary { background: var(--c1); color: #fff; box-shadow: 0 12px 30px -8px var(--c1); } .btn.outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); } .btn.dark { background: var(--c4); color:#fff; } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0; transition: background .3s ease, padding .3s ease, box-shadow .3s ease; } .site-header.scrolled { background: rgba(1,3,38,.92); backdrop-filter: blur(8px); padding: 10px 0; box-shadow: 0 8px 24px rgba(0,0,0,.25); } .site-header .container { display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; } .brand img { height: 54px; width:auto; transition:.3s; } .site-header.scrolled .brand img { height: 42px; } .brand-text { font-family: var(--font-heading); font-weight:800; font-size:18px; line-height:1.1; } .brand-text small { display:block; font-weight:600; font-size:11px; opacity:.7; letter-spacing:.08em; text-transform:uppercase; } .main-nav { display:flex; align-items:center; gap:6px; } .main-nav a { color:#fff; text-decoration:none; font-size:14px; font-weight:700; padding:10px 14px; border-radius:10px; opacity:.85; transition:.2s; } .main-nav a:hover { opacity:1; background:rgba(255,255,255,.1); } .nav-toggle { display:none; background:none; border:none; color:#fff; font-size:26px; cursor:pointer; } @media (max-width: 980px) { .main-nav { position:fixed; top:0; right:-320px; width:280px; height:100vh; background:var(--c4); flex-direction:column; align-items:flex-start; padding:100px 24px 24px; transition:.3s; box-shadow:-10px 0 40px rgba(0,0,0,.3); } .main-nav.open { right:0; } .main-nav a { width:100%; padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.08); } .nav-toggle { display:block; } } /* ---------- Hero ---------- */ .hero { position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--c3); } .hero-bg-fallback { position:absolute; inset:0; z-index:0; background: var(--site-bg, radial-gradient(circle at 20% 10%, var(--c2), var(--c4) 70%)); background-size: cover; background-position:center; } .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; z-index:1; background-size:cover; background-position:center; } .hero-slide.active { opacity:1; } .hero-slide::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(1,3,38,.55) 0%, rgba(1,3,38,.55) 40%, rgba(1,3,38,.92) 100%), linear-gradient(90deg, rgba(1,4,64,.75), rgba(217,30,99,.25)); } .hero-content { position:relative; z-index:5; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:70px; } .hero-eq { position:absolute; right:5%; bottom:14%; display:flex; align-items:flex-end; gap:6px; z-index:2; opacity:.55; } .hero-eq span { width:7px; background:var(--c5); border-radius:4px; animation: eq 1.1s ease-in-out infinite; } .hero-eq span:nth-child(2){ background:var(--c1); animation-delay:.15s; } .hero-eq span:nth-child(3){ background:var(--c6); animation-delay:.3s; } .hero-eq span:nth-child(4){ background:var(--c7); animation-delay:.45s; } .hero-eq span:nth-child(5){ background:var(--c5); animation-delay:.6s; } @keyframes eq { 0%,100%{ height:18px; } 50%{ height:70px; } } .hero-badge { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:9px 18px; border-radius:30px; font-size:13px; font-weight:700; letter-spacing:.04em; margin-bottom:26px; } .hero-badge b { color: var(--c5); } .hero-title { font-size: clamp(46px, 8vw, 96px); line-height:.95; text-shadow: 0 10px 40px rgba(0,0,0,.4); } .hero-title span { color: var(--c1); } .hero-subtitle { max-width:560px; font-size:18px; margin-top:22px; opacity:.92; } .hero-actions { display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; } .hero-dots { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:6; } .hero-dots button { width:32px; height:4px; border-radius:4px; border:none; background:rgba(255,255,255,.35); cursor:pointer; padding:0; } .hero-dots button.active { background: var(--c1); } /* ---------- Wave dividers (signature element) ---------- */ .wave { position:relative; display:block; width:100%; line-height:0; margin-top:-2px; } .wave svg { width:100%; height:80px; display:block; } @media (max-width:700px){ .wave svg{ height:44px; } } /* ---------- Sections ---------- */ .section { position:relative; padding: 110px 0 90px; } .section.tight { padding: 90px 0 70px; } .section.on-light { color: var(--c4); } .section.on-light .eyebrow { background: rgba(1,3,38,.1); } .section.on-light .info-card, .section.on-light .people-card, .section.on-light .workshop-card, .section.on-light .route-card { background: rgba(1,3,38,.06); border-color: rgba(1,3,38,.14); } .section.on-light .btn.outline { border-color: rgba(1,3,38,.4); color: var(--c4); } /* ---------- Carousels ---------- */ .carousel-wrap { position:relative; } .carousel { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding: 10px 4px 26px; scrollbar-width:none; } .carousel::-webkit-scrollbar{ display:none; } .carousel .card { scroll-snap-align:start; flex:0 0 auto; } .carousel-nav { display:flex; gap:10px; justify-content:flex-end; margin-bottom:6px; } .carousel-nav button { width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:18px; cursor:pointer; transition:.2s; } .carousel-nav button:hover { background:rgba(255,255,255,.22); } /* Chef / Band cards */ .people-card { width: 270px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius: 22px; overflow:hidden; backdrop-filter: blur(4px); } .people-card .photo { height:270px; background-size:cover; background-position:center; background-color:rgba(0,0,0,.2); position:relative; } .people-card .photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); } .people-card .info { padding:18px 20px 22px; } .people-card h4 { font-size:18px; margin-bottom:4px; } .people-card .role { font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--c5); margin-bottom:10px; display:block; } .people-card p { font-size:13.5px; opacity:.85; margin:0; } /* ---------- Programação (tabs) ---------- */ .day-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; } .day-tabs button { padding:12px 24px; border-radius:14px; border:2px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-weight:800; font-size:14px; cursor:pointer; transition:.2s; } .day-tabs button.active { background:#fff; color:var(--c3); border-color:#fff; } .day-panel { display:none; } .day-panel.active { display:block; animation: fadein .4s ease; } @keyframes fadein { from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } .timeline { display:flex; flex-direction:column; gap:0; } .timeline-item { display:grid; grid-template-columns:120px 1fr; gap:22px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.14); } .timeline-item .time { font-family: var(--font-heading); font-weight:800; font-size:16px; } .timeline-item .time small { display:block; font-weight:600; font-size:12px; opacity:.65; margin-top:2px; } .timeline-item h4 { font-size:18px; margin-bottom:4px; } .timeline-item .loc { font-size:13px; opacity:.75; } .timeline-item .loc::before { content:'📍 '; } /* ---------- Oficinas ---------- */ .workshop-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:26px 26px 24px; display:flex; flex-direction:column; gap:14px; } .workshop-card .vac { align-self:flex-start; font-size:12px; font-weight:800; padding:5px 12px; border-radius:20px; background:rgba(255,255,255,.18); } .workshop-card h4 { font-size:19px; } .workshop-card p { font-size:14px; opacity:.88; flex:1; } /* ---------- Info cards (hospedagem / about) ---------- */ .split { display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; } @media (max-width: 900px){ .split { grid-template-columns:1fr; } } .info-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:32px; } /* ---------- Como chegar / mapas animados ---------- */ .route-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:26px; margin-bottom:26px; } .route-card h4 { font-size:20px; margin-bottom:4px; } .route-card .dist { font-size:13px; opacity:.7; margin-bottom:16px; } .route-anim { width:100%; height:150px; } .route-anim path.track { fill:none; stroke:rgba(255,255,255,.25); stroke-width:3; stroke-dasharray:8 10; } .map-embed { border-radius:16px; overflow:hidden; margin-top:16px; border:1px solid rgba(255,255,255,.15); } .map-embed iframe { width:100%; height:280px; border:0; display:block; } /* ---------- Contato ---------- */ .contact-box { text-align:center; max-width:640px; margin:0 auto; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:28px; padding:56px 40px; } .contact-box .whatsapp-btn { background:#1ea952; } /* ---------- Footer / Patrocinadores ---------- */ footer { background: var(--c4); padding: 70px 0 30px; } .sponsor-block { margin-bottom: 38px; } .sponsor-block h5 { font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; opacity:.6; margin-bottom:16px; } .sponsor-carousel { display:flex; gap:34px; overflow-x:auto; scrollbar-width:none; padding:6px 2px; } .sponsor-carousel::-webkit-scrollbar{ display:none; } .sponsor-logo { flex:0 0 auto; width:150px; height:90px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; display:flex; align-items:center; justify-content:center; padding:14px; } .sponsor-logo img { max-height:100%; max-width:100%; object-fit:contain; filter:grayscale(.1); } .sponsor-logo .fallback-name { font-size:13px; font-weight:700; text-align:center; opacity:.8; } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13px; opacity:.6; } /* Reveal on scroll */ .reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity:1; transform:none; } /* Floating WhatsApp button */ .float-whatsapp { position:fixed; bottom:26px; right:26px; z-index:200; background:#1ea952; color:#fff; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.35); font-size:28px; }