/* ======================================================================= SDN TRIP — SEI DE NADA EXCURSÕES Bio link cósmico · mobile first · CSS puro (sem frameworks) ======================================================================= */ /* ---------------------------------------------------------- 1. RESET */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* NÃO colocar overflow-x aqui: isso faz o parar de propagar o scroll para o viewport — window.scrollY congela em 0, o evento 'scroll' não dispara e o parallaxe/entrada dos elementos morre. O corte horizontal fica só no , logo abaixo. */ } body{ min-height:100%; /* 'hidden' é o fallback; 'clip' vence onde existe e corta o excesso horizontal SEM transformar o body em container de scroll */ overflow-x:hidden; overflow-x:clip; background:var(--bg-0); color:var(--ink); font-family:var(--font-ui); font-size:1rem; line-height:1.5; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; } img,svg,video,picture{display:block;max-width:100%} a{color:inherit;text-decoration:none;-webkit-touch-callout:none} button,a{font:inherit} .sr-svg{position:absolute;width:0;height:0;overflow:hidden} /* ---------------------------------------------------------- 2. TOKENS */ :root{ /* profundidade do cosmos */ --bg-0:#05050A; --bg-1:#080612; --bg-2:#0B0714; /* tinta */ --ink:#F4EFFF; --ink-dim:#AEA3CE; --ink-mute:#948AB4; /* néon */ --violet:#8B5CF6; --violet-rgb:139,92,246; --magenta:#FF2FD0; --magenta-rgb:255,47,208; --cyan:#22E0FF; --cyan-rgb:34,224,255; --blue:#3B6BFF; --blue-rgb:59,107,255; --green:#4DFF9F; --green-rgb:77,255,159; --gold:#FFC94D; --gold-rgb:255,201,77; --orange:#FF7A2F; --orange-rgb:255,122,47; /* tipografia */ --font-display:"Unbounded","Trebuchet MS","Helvetica Neue",Arial,sans-serif; --font-ui:"Chakra Petch","Avenir Next","Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* ritmo */ --pad:clamp(18px,5vw,28px); --wrap:min(100% - var(--pad) * 2, 560px); --r-card:26px; --ease:cubic-bezier(.16,.84,.3,1); } /* ---------------------------------------------------------- 3. COSMOS */ .cosmos{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background: radial-gradient(130% 70% at 50% -10%, #120A24 0%, transparent 62%), radial-gradient(100% 60% at 50% 108%, #0C0620 0%, transparent 60%), linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 38%, var(--bg-2) 72%, var(--bg-0) 100%); } /* --- estrelas: 3 camadas em parallaxe lenta (tiles que repetem) --- */ .cosmos__stars{ position:absolute; inset:-30% -20%; background-repeat:repeat; will-change:transform; transform:translate3d(0,0,0); } .cosmos__stars--far{ opacity:.55; background-size:230px 230px; background-image: radial-gradient(1px 1px at 18px 34px, rgba(255,255,255,.75), transparent), radial-gradient(1px 1px at 96px 12px, rgba(200,225,255,.55), transparent), radial-gradient(1px 1px at 150px 80px, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 52px 140px, rgba(255,215,255,.5), transparent), radial-gradient(1px 1px at 200px 178px,rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 124px 205px,rgba(190,235,255,.5), transparent), radial-gradient(1px 1px at 8px 195px, rgba(255,255,255,.4), transparent); animation:drift-far 210s linear infinite; } .cosmos__stars--mid{ opacity:.7; background-size:310px 310px; background-image: radial-gradient(1.4px 1.4px at 40px 60px, rgba(255,255,255,.95), transparent), radial-gradient(1.4px 1.4px at 230px 40px, rgba(160,230,255,.8), transparent), radial-gradient(1.4px 1.4px at 140px 175px, rgba(255,175,240,.75), transparent), radial-gradient(1.4px 1.4px at 285px 250px, rgba(255,255,255,.85), transparent), radial-gradient(1.4px 1.4px at 70px 268px, rgba(200,255,225,.7), transparent), radial-gradient(1.4px 1.4px at 190px 110px, rgba(255,255,255,.6), transparent); animation:drift-mid 140s linear infinite; } .cosmos__stars--near{ opacity:.9; background-size:460px 460px; background-image: radial-gradient(2px 2px at 80px 100px, rgba(255,255,255,1), transparent), radial-gradient(2px 2px at 360px 70px, rgba(120,220,255,.9), transparent), radial-gradient(2px 2px at 250px 330px, rgba(255,140,235,.85), transparent), radial-gradient(2px 2px at 425px 410px, rgba(255,255,255,.9), transparent), radial-gradient(1.6px 1.6px at 30px 400px, rgba(180,255,215,.8), transparent); animation:drift-near 95s linear infinite; } @keyframes drift-far {to{transform:translate3d(-230px,-230px,0)}} @keyframes drift-mid {to{transform:translate3d(310px,-310px,0)}} @keyframes drift-near {to{transform:translate3d(-460px,230px,0)}} /* --- nebulosas: gradientes suaves respirando (sem filter → leve) --- */ .cosmos__nebula{ position:absolute; border-radius:50%; will-change:transform,opacity; mix-blend-mode:screen; } .cosmos__nebula--violet{ width:150vw;max-width:820px;aspect-ratio:1; top:-24vh;left:-38vw; background:radial-gradient(closest-side, rgba(var(--violet-rgb),.36), rgba(var(--violet-rgb),.1) 48%, transparent 72%); animation:breathe 26s ease-in-out infinite; } .cosmos__nebula--magenta{ width:120vw;max-width:680px;aspect-ratio:1; top:16vh;right:-40vw; background:radial-gradient(closest-side, rgba(var(--magenta-rgb),.26), rgba(var(--magenta-rgb),.07) 46%, transparent 70%); animation:breathe 34s ease-in-out -8s infinite; } .cosmos__nebula--cyan{ width:130vw;max-width:720px;aspect-ratio:1; top:58vh;left:-34vw; background:radial-gradient(closest-side, rgba(var(--cyan-rgb),.2), rgba(var(--cyan-rgb),.05) 45%, transparent 70%); animation:breathe 30s ease-in-out -16s infinite; } .cosmos__nebula--green{ width:110vw;max-width:600px;aspect-ratio:1; bottom:-16vh;right:-28vw; background:radial-gradient(closest-side, rgba(var(--green-rgb),.16), rgba(var(--green-rgb),.04) 44%, transparent 70%); animation:breathe 40s ease-in-out -24s infinite; } @keyframes breathe{ 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85} 50% {transform:translate3d(3%,-4%,0) scale(1.14);opacity:1} } .cosmos__vignette{ position:absolute;inset:0; background: radial-gradient(110% 80% at 50% 34%, transparent 40%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.82) 100%), linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 18%, transparent 84%, rgba(0,0,0,.55) 100%); } /* ---------------------------------------------------------- 4. SHELL */ .shell{ position:relative; width:100%; max-width:100%; } /* ---------------------------------------------------------- 5. HERO Vídeo em tela cheia. Sem card, sem moldura, sem border-radius: o vídeo É o fundo do hero. */ .hero{ position:relative; width:100%; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; /* conteúdo na região inferior */ align-items:center; text-align:center; padding-bottom:calc(30px + env(safe-area-inset-bottom,0px)); } .hero__bg{ position:absolute; z-index:-2; left:0; /* Sem zoom aqui de propósito. O arquivo já é um recorte do original (860x1380 de 1288x1608): tirou a largura que o cover jogava fora e o rodapé "Established 2022". Ampliar de novo por CSS era o que borrava o vídeo — passava de 3,7x no iPhone. Agora fica em 2,3x. */ inset:0; width:100%; height:100%; object-fit:cover; /* 32% no eixo Y só age no desktop (onde sobra altura) e sobe o enquadramento para o rosto do mascote. No celular o vídeo encosta em cima e embaixo, então o eixo Y não tem efeito. */ object-position:center 32%; pointer-events:none; background:#05050A; } /* overlay: quase nada em cima, escurece só na descida — o vídeo precisa continuar psicodélico no topo e legível embaixo */ .hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(5,2,15,.05) 0%, rgba(5,2,15,.10) 28%, rgba(5,2,15,.20) 44%, rgba(5,2,15,.48) 58%, rgba(5,2,15,.78) 70%, rgba(7,3,15,.95) 82%, #07030F 92%, #07030F 100%); } .hero__content{ width:var(--wrap); margin-inline:auto; display:flex; flex-direction:column; align-items:center; } .hero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,13vw,4rem); line-height:.95; letter-spacing:-.01em; margin-bottom:12px; } .hero__title-text{ position:relative; display:inline-block; background:linear-gradient(174deg,#FFFFFF 12%,#EFE5FF 50%,#C4ADFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,.95)) drop-shadow(0 4px 30px rgba(var(--violet-rgb),.6)); } .hero__title-text::before, .hero__title-text::after{ /* aberração cromática néon */ content:attr(data-text); position:absolute; inset:0; z-index:-1; -webkit-text-fill-color:currentColor; mix-blend-mode:screen; pointer-events:none; } .hero__title-text::before{color:rgba(var(--magenta-rgb),.85);animation:ab-a 7s ease-in-out infinite} .hero__title-text::after {color:rgba(var(--cyan-rgb),.8);animation:ab-b 7s ease-in-out infinite} @keyframes ab-a{0%,100%{transform:translate(-2px,1px)}50%{transform:translate(-4px,-1px)}} @keyframes ab-b{0%,100%{transform:translate(2px,-1px)}50%{transform:translate(4px,1px)}} .hero__tagline{ font-size:clamp(1rem,4.2vw,1.15rem); font-weight:600; color:#F4EEFF; letter-spacing:.012em; text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 26px rgba(var(--cyan-rgb),.35); } /* --- indicação de scroll: PRÓXIMA TRIP ↓ --- */ .scrollcue{ margin-top:clamp(24px,6vw,34px); display:flex; flex-direction:column; align-items:center; gap:9px; padding:6px 18px 4px; opacity:.9; transition:opacity .3s var(--ease); } .scrollcue__label{ font-size:.64rem;font-weight:700; letter-spacing:.34em;text-transform:uppercase; color:#CFC4EC; text-shadow:0 2px 10px rgba(0,0,0,.9); } .scrollcue__line{ position:relative; width:1px;height:34px; background:linear-gradient(180deg,transparent,rgba(var(--cyan-rgb),.6),transparent); overflow:hidden; } .scrollcue__line i{ position:absolute; left:-1.5px; width:4px;height:4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px 2px rgba(var(--cyan-rgb),.9); animation:fall 2.4s cubic-bezier(.5,0,.5,1) infinite; } @keyframes fall{ 0% {transform:translateY(-8px);opacity:0} 25% {opacity:1} 80% {opacity:1} 100%{transform:translateY(36px);opacity:0} } .scrollcue__chev{ width:9px;height:9px; border-right:1.6px solid rgba(var(--cyan-rgb),.85); border-bottom:1.6px solid rgba(var(--cyan-rgb),.85); transform:rotate(45deg); animation:nudge 2.4s ease-in-out infinite; } @keyframes nudge{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}} /* ------------------------------------- 5a. A VIAGEM COMEÇA (só o texto) Respiro narrativo entre o portal e os destinos. O ônibus não mora mais aqui: ele virou uma camada fixa que cruza o site inteiro (13). O topo continua o #07030F em que o hero termina e dissolve no cosmos, para não existir linha separando vídeo e site. */ /* A faixa ocupa a largura toda e o texto é que fica contido. Antes o degradê vinha de um ::before com width:100vw — e 100vw INCLUI a barra de rolagem, o que gerava ~8px de overflow horizontal no desktop. */ .busway{ position:relative; width:100%; text-align:center; padding:clamp(96px,26vw,170px) 0 clamp(80px,22vw,140px); background:linear-gradient(180deg, #07030F 0%, rgba(7,3,15,.72) 26%, rgba(7,3,15,.26) 56%, transparent 80%); } .busway__title, .busway__sub{ width:var(--wrap); margin-inline:auto; } .busway__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.02rem,4.6vw,1.5rem); line-height:1.25; letter-spacing:-.005em; text-transform:uppercase; color:#fff; text-shadow:0 0 30px rgba(var(--cyan-rgb),.45); } .busway__sub{ margin-top:11px; font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute); } /* -------------------------------------------- 5b. GRUPO GERAL (COMUNIDADE) Deliberadamente diferente dos 4 portais de excursão: card horizontal, borda néon girando, halo pulsante e paleta da própria marca (violeta + ciano) em vez de uma cor por evento. */ .community{ position:relative; isolation:isolate; width:var(--wrap); margin-inline:auto; padding:clamp(10px,3vw,18px) 0 clamp(2px,1vw,6px); } /* halo externo respirando — o que chama o olho para a comunidade */ .community::before{ content:""; position:absolute; /* inset horizontal em px (não em %): em % ele cresce junto com a largura da seção e estoura a margem lateral em ~1024px, onde a margem é fixa em 24px. A pulsação também fica só no eixo Y. */ inset:-14% -10px; z-index:-1; pointer-events:none; background: radial-gradient(58% 62% at 30% 45%, rgba(var(--violet-rgb),.3), transparent 70%), radial-gradient(52% 58% at 78% 60%, rgba(var(--cyan-rgb),.17), transparent 72%); animation:hub-aura 8s ease-in-out infinite; } @keyframes hub-aura{ 0%,100%{opacity:.58;transform:scaleY(.96)} 50% {opacity:1;transform:scaleY(1.05)} } .hub{ position:relative; display:block; border-radius:27px; border:1px solid rgba(var(--violet-rgb),.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 50px -24px rgba(0,0,0,.95), 0 0 34px -12px rgba(var(--violet-rgb),.6); transform:translate3d(0,var(--ty,0px),0); transition: opacity .8s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } /* painel de vidro */ .hub__body{ position:relative; z-index:1; overflow:hidden; border-radius:inherit; padding:17px 17px 19px; background: radial-gradient(120% 130% at 8% -10%, rgba(var(--violet-rgb),.26), transparent 62%), radial-gradient(95% 120% at 100% 110%, rgba(var(--cyan-rgb),.16), transparent 64%), linear-gradient(168deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.035) 55%, rgba(255,255,255,.065) 100%), rgba(10,7,22,.55); } /* partículas discretas dentro do card (tile que repete + translate: barato) */ .hub__dust{ position:absolute; inset:-40% -20%; pointer-events:none; opacity:.5; background-size:190px 190px; background-image: radial-gradient(1.4px 1.4px at 24px 40px, rgba(190,235,255,.9), transparent), radial-gradient(1.2px 1.2px at 140px 22px, rgba(215,180,255,.8), transparent), radial-gradient(1.6px 1.6px at 92px 128px, rgba(255,255,255,.75),transparent), radial-gradient(1.2px 1.2px at 168px 160px, rgba(150,225,255,.7), transparent), radial-gradient(1.3px 1.3px at 40px 172px, rgba(230,200,255,.65),transparent); animation:hub-dust 46s linear infinite; } @keyframes hub-dust{to{transform:translate3d(190px,-190px,0)}} /* borda néon girando — só onde o mask-composite existe; sem ele fica a borda estática + o glow, sem nenhum artefato visual */ .hub__ring{display:none} @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){ .hub__ring{ display:block; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1.6px; overflow:hidden; pointer-events:none; -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; } .hub__ring::before{ content:""; position:absolute; top:50%;left:50%; width:170%;aspect-ratio:1; transform:translate(-50%,-50%); background:conic-gradient(from 0deg, rgba(var(--violet-rgb),.1), var(--violet), var(--cyan), rgba(var(--cyan-rgb),.12), var(--magenta), rgba(var(--violet-rgb),.1)); animation:spin 14s linear infinite; } } /* badge */ .hub__badge{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:999px; border:1px solid rgba(var(--cyan-rgb),.4); background:linear-gradient(135deg, rgba(var(--cyan-rgb),.18), rgba(var(--violet-rgb),.16)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 16px -6px rgba(var(--cyan-rgb),.7); font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#EAF9FF; } .hub__badge i{ width:6px;height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px 2px rgba(var(--cyan-rgb),.9); animation:blip 2.6s ease-in-out infinite; } @keyframes blip{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}} /* ícone + títulos */ .hub__top{ position:relative; display:flex; align-items:center; gap:14px; margin-top:15px; } .hub__icon{ flex:0 0 auto; display:grid; place-items:center; width:58px;height:58px; border-radius:19px; color:#EAF2FF; border:1px solid rgba(255,255,255,.16); background: radial-gradient(closest-side at 50% 120%, rgba(var(--cyan-rgb),.4), transparent 72%), linear-gradient(150deg, rgba(var(--violet-rgb),.5), rgba(var(--blue-rgb),.28)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 24px -8px rgba(var(--cyan-rgb),.85); animation:hub-ico 6s ease-in-out infinite; } @keyframes hub-ico{ 0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 20px -10px rgba(var(--cyan-rgb),.7)} 50% {box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 30px -6px rgba(var(--cyan-rgb),.95)} } .hub__head{display:flex;flex-direction:column;gap:5px;min-width:0} .hub__eyebrow{ font-size:.705rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#A9E8FF; } .hub__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,6vw,1.62rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-shadow:0 0 26px rgba(var(--violet-rgb),.7); } .hub__desc{ position:relative; margin-top:14px; font-size:.875rem; line-height:1.6; color:#C4BADF; } /* CTA */ .hub__cta{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; min-height:58px; padding:0 16px; border-radius:16px; border:1px solid rgba(var(--cyan-rgb),.5); background: linear-gradient(135deg, rgba(var(--violet-rgb),.42) 0%, rgba(var(--cyan-rgb),.26) 100%), rgba(255,255,255,.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 26px -8px rgba(var(--cyan-rgb),.75); color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); } .hub__cta-ico{font-size:1.05rem;line-height:1;filter:drop-shadow(0 0 9px rgba(var(--cyan-rgb),.95))} .hub__cta-txt{white-space:nowrap} .hub__cta-arrow{ width:7px;height:7px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); opacity:.85; transition:transform .4s var(--ease),opacity .4s var(--ease); } /* estados */ @media (hover:hover) and (pointer:fine){ .hub:hover{ --ty:-6px; border-color:rgba(var(--cyan-rgb),.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 36px 64px -26px rgba(0,0,0,.95), 0 0 70px -14px rgba(var(--violet-rgb),.85); } .hub:hover .hub__cta{ border-color:rgba(var(--cyan-rgb),.9); background:linear-gradient(135deg, rgba(var(--violet-rgb),.68) 0%, rgba(var(--cyan-rgb),.45) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 40px -6px rgba(var(--cyan-rgb),.95); } .hub:hover .hub__cta-arrow{transform:rotate(45deg) translate(3px,-3px);opacity:1} } .hub:active{ transform:translate3d(0,-2px,0) scale(.986); border-color:rgba(var(--cyan-rgb),.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px -18px rgba(0,0,0,.95), 0 0 54px -12px rgba(var(--violet-rgb),.95); } .hub:active .hub__cta{ background:linear-gradient(135deg, rgba(var(--violet-rgb),.64) 0%, rgba(var(--cyan-rgb),.42) 100%); border-color:rgba(var(--cyan-rgb),.85); } .hub:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:27px} /* ------------------------------------------- 5c. TRAVESSIA DO ÔNIBUS Camada fixa por cima do site inteiro. O ônibus entra pelo topo à direita, cruza na diagonal e some na virada do hero para as viagens. Não é seção, não tem caixa, não ocupa espaço no layout. */ /* O contêiner é um bloco ESTÁTICO de propósito, e quem é fixed são os filhos. Motivo: position:fixed sempre cria contexto de empilhamento, e contexto isola o mix-blend-mode — o preto do arquivo para de sumir e aparece um retângulo preto em volta do ônibus. Com o fixed no próprio vídeo, ele mistura com a página inteira, que é o que queremos. z-index e contain têm o mesmo efeito colateral: não usar aqui. A camada fica por cima de tudo por ser o último elemento posicionado do documento, depois do . */ .busride{ display:block; height:0; } .busride__video{ position:fixed; top:0; left:0; pointer-events:none; width:min(94vw,820px); aspect-ratio:3/2; object-fit:contain; /* o arquivo é MP4 (sem alpha) com fundo preto puro #000000: 'screen' apaga o preto e deixa as cores do ônibus intactas */ mix-blend-mode:screen; /* Nos primeiros quadros o ônibus preenche o vídeo de ponta a ponta, e aí a borda do