/* Wusic CSS - Version 2.0 - Updated for production deployment */ :root{ --wusic-bg: #d7103f; /* deep background */ --wusic-primary: #7C4DFF; /* vibrant purple */ --wusic-accent: #00E0A1; /* teal accent */ --wusic-gradient: linear-gradient(135deg,var(--wusic-primary),#ff5ca8 60%); --wusic-surface: #121225; --wusic-muted: rgba(255,255,255,0.65); --glass: rgba(255,255,255,0.04); --radius: 18px; --max-width: 1100px; --shadow: 0 10px 30px rgba(2,6,23,0.6); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Reset & base */ *{box-sizing:border-box!important;margin:0;padding:0} html{ height:100%; overflow-x:hidden!important; width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%; } html,body{height:100%;overflow-x:hidden!important;width:100%!important;max-width:100vw!important} body{ margin:0; padding:0; width:100%; min-width:320px; background: radial-gradient(1200px 400px at 10% 10%, rgba(124,77,255,0.08), transparent), radial-gradient(800px 300px at 90% 80%, rgba(0,224,161,0.06), transparent), var(--wusic-bg); color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.4; overflow-x:hidden; max-width:100vw; position:relative; } a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} /* Layout */ main{ width:100%; overflow-x:hidden; position:relative; } section{ width:100%; max-width:100vw; overflow-x:hidden; } .container{width:90%;max-width:var(--max-width);margin:0 auto;box-sizing:border-box} .download-container{width:90%;max-width:var(--max-width);margin:0 auto;box-sizing:border-box} header{ position:fixed;left:0;right:0;top:18px;z-index:60;pointer-events:auto; display:flex;align-items:center;justify-content:center; } .nav{ width:calc(100% - 40px);max-width:1100px;backdrop-filter:blur(8px); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow); min-height:65px; } .brand{display:flex;gap:12px;align-items:center} .logo{ width:44px;height:44px;border-radius:10px;background:var(--wusic-gradient);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 18px rgba(124,77,255,0.18); } .logo svg{width:26px;height:26px} nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;align-items:center} nav ul li{display:flex;align-items:center;height:100%} .spacer{flex:1} .btn{ padding:10px 14px; border-radius:12px; background:#fff; color:#d7103f; border:1px solid rgba(255,255,255,0.04); cursor:pointer; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; vertical-align:middle; height:fit-content; } .btn.primary{background:#fff;color:#d7103f;padding:10px 16px;font-weight:600} .cta-row{align-items:center;margin-top:20px;margin-bottom: 20px;} /* Hero with parallax layers */ .hero{min-height:92vh;display:grid;align-items:center;padding:140px 0 120px;position:relative;overflow:hidden} .hero .container{ margin-left:250px!important; margin-right:auto!important; margin-top:-200px!important; } .hero .grid{display:grid;grid-template-columns:1fr 460px;gap:40px;align-items:center;margin-top:-40px} .hero-title{font-size:clamp(36px,6vw,68px);line-height:1.1;margin:0 0 16px} .tagline{color:var(--wusic-muted);font-size:20px;margin-bottom:24px;line-height:1.6;margin-top:-380px} .cta-row{display:flex;gap:12px;align-items:center} /* Phone mock */ .device{width:100%;max-width:420px;margin:auto;position:relative} .phone{ border-radius:34px;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 20px 60px rgba(2,6,23,0.6); transform:translateZ(0); } .screen{height:720px;border-radius:18px;background:linear-gradient(180deg,#0b0b12 0%, #111118 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--wusic-muted)} /* Parallax shapes */ .parallax-layer{position:absolute;will-change:transform;pointer-events:none} .layer-1{width:600px;height:600px;left:-80px;top:-120px;opacity:0.18;background:radial-gradient(circle at 30% 30%, rgba(124,77,255,0.9), transparent 35%), radial-gradient(circle at 70% 70%, rgba(0,224,161,0.8), transparent 40%);border-radius:50%} .layer-2{width:380px;height:380px;right:-60px;top:40px;opacity:0.12;background:conic-gradient(from 120deg, rgba(124,77,255,0.6), rgba(255,92,168,0.6), rgba(0,224,161,0.6));border-radius:20%} .layer-3{width:220px;height:220px;left:12%;bottom:-30px;opacity:0.14;background:linear-gradient(135deg, rgba(124,77,255,0.6), rgba(0,224,161,0.6));clip-path:polygon(0 0,100% 15%,85% 100%,0 85%)} /* Features */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:18px;border:1px solid rgba(255,255,255,0.03)} .card h4{margin:0 0 8px} .cta-downloads{display:flex;gap:12px;margin-top:18px} /* Sections */ section{padding:90px 0px} .split{display:block;position:relative;} #screens{ margin-right: 0%; margin-top:-300px; padding-top:40px; overflow:visible; position:relative; padding-left:0; min-height:600px; width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } #screens > div:first-child{ text-align:left; max-width:600px; padding-right:20px; position:absolute; z-index:20; left:100px; top:40px; } #screens-title{ font-size:56px; line-height:1.2; margin-bottom:24px; } #screens p{ font-size:22px; line-height:1.6; margin-bottom:20px; } #screens ul{ font-size:20px; list-style:none; padding:0; } #screens ul li{ margin:10px 0; padding-left:24px; position:relative; } #screens ul li:before{ content:"✓"; position:absolute; left:0; color:var(--wusic-accent); font-weight:bold; } #carousel-container{ overflow:hidden; width:100%; max-width:calc(100vw - 650px); margin-left:auto; margin-right:0; box-sizing:border-box; } #download{ position:relative; z-index:30; width:100%; overflow:hidden; } footer{padding:40px 0;color:var(--wusic-muted)} /* Ultra-wide screens (2560px+) */ @media (min-width:2560px){ :root{ --max-width: 2800px; } body{ font-size:20px; } .hero{ padding:120px 0 200px!important; min-height:110vh!important; } .hero .container{ max-width:2400px!important; margin-left:auto!important; margin-right:auto!important; margin-top:-250px!important; } .hero .grid{ grid-template-columns:1fr 800px; gap:200px; margin-top:-100px; align-items:start!important; } .hero-title{ font-size:180px!important; line-height:1.1!important; margin-bottom:260px!important; min-height:220px!important; position:absolute!important; left:200px!important; top:350px!important; max-width:2800px!important; text-align:left!important; } .tagline{ font-size:60px!important; margin-top:-400px!important; margin-bottom:100px!important; line-height:1.6!important; text-align:left!important; max-width:1200px!important; position:relative!important; left:auto!important; right:auto!important; margin-left:0!important; } .features{ gap:60px!important; margin-top:120px!important; } .card{ padding:70px!important; } .card h4{ font-size:50px!important; margin-bottom:24px!important; } .card p{ font-size:40px!important; line-height:1.6!important; } .btn{ padding:30px 48px!important; font-size:38px!important; border-radius:20px!important; } .btn img{ width:38px!important; height:38px!important; } #screens{ margin-top:-900px!important; padding-top:80px!important; min-height:1800px!important; padding-bottom:300px!important; display:flex!important; flex-direction:column!important; } #screens > div:first-child{ position:relative!important; left:auto!important; max-width:100%!important; top:auto!important; z-index:5!important; text-align:center!important; padding:0 200px!important; margin-bottom:100px!important; } #screens-title{ font-size:100px!important; margin-bottom:50px!important; line-height:1.15!important; } #screens p{ font-size:36px!important; line-height:1.7!important; margin-bottom:30px!important; } #screens ul{ font-size:62px!important; margin-top:40px!important; text-align:center!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; list-style:none!important; padding:0!important; display:flex!important; flex-wrap:wrap!important; justify-content:center!important; gap:60px!important; } #screens ul li{ margin:0!important; padding-left:0px!important; flex:0 1 auto!important; } #screens ul li:before{ font-size:58px!important; position:relative!important; margin-right:16px!important; } .carousel-container{ position:relative!important; width:100%!important; right:auto!important; padding:40px 0!important; z-index:1!important; margin:0 auto!important; } .carousel-item{ width:1600px!important; height:2667px!important; border-radius:32px!important; } section{ padding:140px 0!important; } .download-container{ max-width:2400px!important; padding:0 100px!important; margin-top:300px!important; } #download{ margin-top:100px!important; padding-top:100px!important; } #download .card{ padding:100px 130px!important; margin-top:150px!important; border-radius:36px!important; } #download .card h3{ font-size:86px!important; margin-bottom:36px!important; } #download .card p{ font-size:58px!important; line-height:1.6!important; } #download .btn{ padding:42px 66px!important; font-size:52px!important; } #download .btn img{ width:52px!important; height:52px!important; } .device{ max-width:1000px!important; margin-top:0!important; position:absolute!important; right:35%!important; transform:translateX(0)!important; top:100px!important; } .device img{ width:2000px!important; height:2640px!important; max-width:2640px!important; } .nav{ max-width:2400px!important; padding:40px 60px!important; border-radius:28px!important; gap:30px!important; } .brand img{ width:320px!important; height:173px!important; } .logo-text{ font-size:48px!important; } nav ul{ gap:30px!important; } nav ul li img{ width:110px!important; height:110px!important; } .btn{ padding:30px 45px!important; font-size:42px!important; border-radius:24px!important; } .btn img{ width:42px!important; height:42px!important; } footer{ font-size:68px!important; max-width:2400px!important; margin:0 auto!important; padding:240px 0 260px!important; } footer > div{ gap:60px!important; } footer a{ font-size:68px!important; line-height:1.6!important; } footer img{ width:120px!important; height:120px!important; } footer div[style*="font-size:14px"]{ font-size:58px!important; } footer div[style*="font-size:13px"]{ font-size:54px!important; } footer div[style*="font-size:16px"]{ font-size:64px!important; } footer div[style*="display:flex"]{ flex-wrap:nowrap!important; white-space:nowrap!important; } } /* Super ultra-wide screens (3440px+) */ @media (min-width:3440px){ :root{ --max-width: 3200px; } body{ font-size:24px; } .hero{ padding:220px 0 250px!important; min-height:115vh!important; } .hero .container{ max-width:3200px!important; margin-left:auto!important; margin-right:auto!important; margin-top:-150px!important; } .hero .grid{ grid-template-columns:1fr 1000px; gap:280px; margin-top:-80px; align-items:start!important; } .hero-title{ font-size:220px!important; line-height:1.1!important; margin-bottom:320px!important; min-height:280px!important; position:absolute!important; left:300px!important; top:400px!important; max-width:3500px!important; text-align:left!important; } .tagline{ font-size:76px!important; margin-top:-500px!important; margin-bottom:120px!important; line-height:1.6!important; text-align:left!important; max-width:1600px!important; position:relative!important; left:auto!important; right:auto!important; margin-left:0!important; } .features{ gap:80px!important; margin-top:140px!important; } .card{ padding:90px!important; } .card h4{ font-size:64px!important; margin-bottom:30px!important; } .card p{ font-size:52px!important; line-height:1.6!important; } .btn{ padding:38px 60px!important; font-size:48px!important; border-radius:24px!important; } .btn img{ width:48px!important; height:48px!important; } #screens{ margin-top:-1200px!important; padding-top:100px!important; min-height:2200px!important; padding-bottom:350px!important; display:flex!important; flex-direction:column!important; } #screens > div:first-child{ position:relative!important; left:auto!important; max-width:100%!important; top:auto!important; z-index:5!important; text-align:center!important; padding:0 300px!important; margin-bottom:120px!important; } #screens-title{ font-size:130px!important; margin-bottom:60px!important; line-height:1.15!important; } #screens p{ font-size:96px!important; line-height:1.7!important; margin-bottom:40px!important; } #screens ul{ font-size:76px!important; margin-top:50px!important; text-align:center!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; list-style:none!important; padding:0!important; display:flex!important; flex-wrap:wrap!important; justify-content:center!important; gap:80px!important; } #screens ul li{ margin:0!important; padding-left:0px!important; flex:0 1 auto!important; } #screens ul li:before{ font-size:72px!important; position:relative!important; margin-right:20px!important; } .carousel-container{ position:relative!important; width:100%!important; right:auto!important; padding:50px 0!important; z-index:1!important; margin:0 auto!important; } .carousel-item{ width:2000px!important; height:3333px!important; border-radius:40px!important; } section{ padding:180px 0!important; } .download-container{ max-width:3200px!important; padding:0 150px!important; margin-top:350px!important; } #download{ margin-top:150px!important; padding-top:150px!important; } #download .card{ padding:130px 170px!important; margin-top:200px!important; border-radius:48px!important; } #download .card h3{ font-size:110px!important; margin-bottom:50px!important; } #download .card p{ font-size:76px!important; line-height:1.6!important; } #download .btn{ padding:54px 82px!important; font-size:66px!important; } #download .btn img{ width:66px!important; height:66px!important; } .device{ max-width:1300px!important; margin-top:0!important; position:absolute!important; right:30%!important; transform:translateX(0)!important; top:100px!important; } .device img{ width:2500px!important; height:3300px!important; max-width:3300px!important; } .nav{ max-width:3200px!important; padding:50px 80px!important; border-radius:36px!important; } .brand img{ width:400px!important; height:216px!important; } .logo-text{ font-size:60px!important; } nav ul li img{ width:140px!important; height:140px!important; } .btn{ padding:38px 56px!important; font-size:52px!important; border-radius:28px!important; } .btn img{ width:52px!important; height:52px!important; } footer{ font-size:86px!important; max-width:3200px!important; margin:0 auto!important; padding:300px 0 320px!important; } footer > div{ gap:80px!important; } footer a{ font-size:86px!important; line-height:1.6!important; } footer img{ width:150px!important; height:150px!important; } footer div[style*="font-size:14px"]{ font-size:74px!important; } footer div[style*="font-size:13px"]{ font-size:70px!important; } footer div[style*="font-size:16px"]{ font-size:82px!important; } footer div[style*="display:flex"]{ flex-wrap:nowrap!important; white-space:nowrap!important; } } /* Responsive */ /* Media query para laptops com resolução 1366x768 */ @media (min-width:981px) and (max-width:1400px){ :root{ --max-width: 1200px; } header{ top:10px; } .nav{ width:calc(100% - 30px); padding:10px 16px; gap:12px; max-width:1100px!important; display:flex!important; align-items:center!important; } .brand{ display:flex!important; align-items:center!important; } .brand img{ width:100px!important; height:54px!important; } .logo-text{ font-size:14px!important; } nav{ display:flex!important; align-items:center!important; } nav ul{ display:flex!important; align-items:center!important; } nav ul li{ display:flex!important; align-items:center!important; } nav ul li img{ width:32px!important; height:32px!important; } .cta-row{ display:flex!important; align-items:center!important; align-self:center!important; height:100%!important; } .btn{ padding:8px 12px!important; font-size:14px!important; display:flex!important; align-items:center!important; vertical-align:middle!important; line-height:1.2!important; align-self:center!important; height:fit-content!important; } .btn img{ width:16px!important; height:16px!important; } .hero{ min-height:75vh; padding:110px 0 60px; } .hero .container{ margin-left:auto!important; margin-right:auto!important; margin-top:-60px!important; max-width:1300px!important; width:98%!important; } .hero .grid{ grid-template-columns:550px 360px; gap:25px; align-items:start; justify-content:center; } .hero .grid > div:first-child{ position:relative!important; z-index:5!important; padding-top:20px; margin-top:30px; } .device{ max-width:360px!important; position:relative!important; z-index:10!important; margin:0 auto!important; margin-top:-20px!important; } .device img{ width:540px!important; height:713px!important; max-width:713px!important; margin:auto 0px!important; } .hero-title{ font-size:38px!important; margin-bottom:280px!important; line-height:1.1!important; } .tagline{ font-size:15px!important; margin-top:-210px!important; margin-bottom:18px!important; max-width:450px; position:relative!important; z-index:15!important; line-height:1.5!important; } .cta-row{ gap:10px; margin-bottom:18px; } .features{ grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px!important; } .card{ padding:12px; } .card h4{ font-size:13px; margin-bottom:6px; } .card p{ font-size:11px; line-height:1.4; } section{ padding:50px 0; } #screens{ margin-top:-150px!important; padding-top:30px!important; min-height:450px!important; width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; } #screens > div:first-child{ left:60px!important; top:30px!important; max-width:450px!important; padding-right:20px!important; } #screens-title{ font-size:34px!important; line-height:1.2!important; margin-bottom:18px!important; } #screens p{ font-size:15px!important; line-height:1.5!important; margin-bottom:14px!important; } #screens ul{ font-size:13px!important; margin-top:10px!important; } #screens ul li{ margin:8px 0!important; padding-left:20px!important; } .carousel-container{ width:calc(100vw - 520px)!important; padding:20px 0!important; overflow:hidden!important; } .carousel-item{ width:420px!important; height:700px!important; border-radius:10px!important; } .carousel-track{ gap:14px!important; } .container{ width:95%; max-width:1280px; } .download-container{ width:95%; max-width:1280px; margin-top:120px!important; } #download{ margin-top:60px!important; padding-top:60px!important; } #download .card{ padding:22px 28px!important; margin-top:80px!important; gap:14px!important; } #download .card h3{ font-size:26px!important; margin:0 0 8px 0!important; } #download .card p{ font-size:14px!important; margin:0!important; } #download .btn{ padding:10px 16px!important; font-size:14px!important; } #download .btn img{ width:18px!important; height:18px!important; } footer{ padding:40px 0!important; font-size:12px!important; } footer div[style*="font-size:14px"]{ font-size:12px!important; } footer div[style*="font-size:13px"]{ font-size:11px!important; } footer div[style*="font-size:16px"] a{ font-size:13px!important; } footer img{ width:20px!important; height:20px!important; } .parallax-layer{ opacity:0.1!important; } .layer-1{ width:400px!important; height:400px!important; } .layer-2{ width:280px!important; height:280px!important; } .layer-3{ width:160px!important; height:160px!important; } } /* Media query específica para resoluções 1360-1380px de largura (1366x768 e similares) */ @media (min-width:1360px) and (max-width:1380px) and (min-height:700px) and (max-height:800px){ header{ top:10px!important; } .nav{ padding:10px 16px!important; display:flex!important; align-items:center!important; gap:12px!important; } .brand{ display:flex!important; align-items:center!important; gap:12px!important; } nav{ display:flex!important; align-items:center!important; } nav ul{ display:flex!important; align-items:center!important; margin:0!important; padding:0!important; } nav ul li{ display:flex!important; align-items:center!important; margin:0!important; padding:0!important; } .cta-row{ display:flex!important; align-items:center!important; align-self:center!important; height:100%!important; } .btn{ display:flex!important; align-items:center!important; padding:8px 12px!important; font-size:14px!important; vertical-align:middle!important; line-height:1.2!important; align-self:center!important; height:fit-content!important; } .btn img{ width:16px!important; height:16px!important; margin:0!important; } .hero{ min-height:70vh!important; padding:100px 0 50px!important; } .hero .container{ margin-left:auto!important; margin-right:auto!important; max-width:1300px!important; width:98%!important; margin-top:-40px!important; } .hero .grid{ grid-template-columns:550px 360px!important; gap:20px!important; justify-content:center!important; align-items:start!important; } .hero .grid > div:first-child{ padding-top:10px!important; margin-top:40px!important; } .device{ max-width:380px!important; position:relative!important; z-index:10!important; margin:0 auto!important; display:flex!important; justify-content:center!important; align-items:flex-start!important; margin-top:-10px!important; } .device img{ width:560px!important; height:740px!important; max-width:740px!important; margin:auto 0px!important; display:block!important; } .hero-title{ font-size:38px!important; margin-bottom:270px!important; } .tagline{ font-size:15px!important; margin-top:-200px!important; max-width:460px!important; } .features{ margin-top:22px!important; } #screens-title{ font-size:34px!important; } #screens p{ font-size:15px!important; } .carousel-container{ width:calc(100vw - 500px)!important; } .carousel-item{ width:400px!important; height:667px!important; } } @media (max-width:980px){ html,body{ width:100%!important; max-width:100vw!important; overflow-x:hidden!important; } main,section{ width:100%!important; max-width:100vw!important; overflow-x:hidden!important; } .hero .grid{grid-template-columns:1fr;gap:20px;margin-top:-20px} .device{order:2;margin-top:0} .features{grid-template-columns:repeat(2,1fr);margin-top:20px!important} nav ul{display:none} .nav{ width:calc(100% - 30px)!important; max-width:none!important; } .hero{padding:130px 0 60px} .tagline{margin-top:-200px} .split{grid-template-columns:1fr;gap:24px} } @media (max-width:560px){ html,body{ width:100%!important; max-width:100vw!important; overflow-x:hidden!important; } body{ min-width:320px!important; } main,section{ width:100%!important; max-width:100vw!important; overflow-x:hidden!important; } .hero .container{ margin-left:20px!important; margin-right:20px!important; width:calc(100% - 40px)!important; max-width:calc(100vw - 40px)!important; } .features{grid-template-columns:1fr;margin-top:24px!important;gap:12px} .phone{padding:12px} .hero .grid{gap:24px;margin-top:0;position:relative} .device{ position:absolute; top:0; right:0; left:0; margin:0; max-width:100%; opacity:0.15!important; z-index:0; pointer-events:none; order:1; } .device img{ max-width:100%!important; width:100%!important; height:auto!important; margin:0 auto; object-fit:cover; opacity:1!important; } .hero .grid > div:first-child{ position:relative; z-index:2; } header{top:1px} .hero{padding:320px 0 40px;min-height:100vh;display:flex;align-items:center} .tagline{margin-top:0;font-size:16px;margin-bottom:20px} .hero-title{font-size:clamp(24px,7vw,36px)!important;margin-bottom:20px!important;min-height:auto!important} .cta-row{flex-direction:column;align-items:stretch;gap:10px} .btn{width:100%;text-align:center;padding:12px 16px} .split{grid-template-columns:1fr;gap:20px;position:relative;z-index:2} section{padding:50px 0} #screens{ margin-top:-5px; padding-top:10px; width:100%!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; padding-left:20px!important; padding-right:20px!important; } #screens > div:first-child{ position:relative!important; left:auto!important; top:auto!important; margin:0!important; padding:0!important; max-width:100%!important; } #screens-title{ font-size:32px!important; } #screens p{ font-size:16px!important; } #screens ul{ font-size:15px!important; } .card{padding:16px;background:rgba(215,16,63,0.95)!important} .card h4{font-size:16px} .card p{font-size:14px} .download-container{ width:100%!important; padding:0 10px!important; margin:0!important; } #download{ padding:5px 0!important; margin-bottom:-150px!important; } #download .card{ margin-top:0px!important; margin-bottom:0px!important; padding:8px!important; gap:8px!important; } #download .card h3{ font-size:18px!important; margin:0!important; } #download .card p{ font-size:12px!important; margin:4px 0 0 0!important; } #download .btn{ padding:8px 12px!important; font-size:13px!important; } footer{ margin-top:150px!important; padding:40px 0 60px!important; } .brand img{width:90px!important;height:auto!important} .nav{ padding:10px 14px; gap:10px; width:calc(100% - 20px)!important; max-width:none!important; } .typing-text{position:relative!important} } /* subtle entrance */ .reveal{opacity:0;transform:translateY(10px);transition:all 700ms cubic-bezier(.2,.9,.25,1),} .reveal.show{opacity:1;transform:none} /* Typing animation */ .hero-title{ min-height:100px; /* Espaço fixo suficiente para o título completo */ display:block; margin-bottom:600px; position:relative; /* Container para o texto absoluto */ } .typing-text{ display:inline-block; position:absolute; top:0; left:0; width:100%; } @media (max-width:980px){ .hero-title{min-height:120px;margin-bottom:250px} } @media (max-width:560px){ .hero-title{min-height:auto!important;margin-bottom:20px!important} .typing-text{position:relative!important;display:inline!important} } /* Carousel Animation */ .carousel-container{ overflow:hidden; position:absolute; width:calc(100vw - 650px); max-width:calc(100vw - 650px); right:0; top:0; padding:20px 0; background:transparent; border:none; margin:0; z-index:10; box-sizing:border-box; } .carousel-container::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:600px; z-index:2; pointer-events:none; background:linear-gradient(to right, var(--wusic-bg) 0%, transparent 100%); } .carousel-track{ display:flex; gap:16px; animation:scroll-left 40s linear infinite; width:max-content; } .carousel-track:hover{ animation-play-state:running; } .carousel-item{ flex-shrink:0; width:600px; height:1000px; border-radius:12px; overflow:hidden; padding-bottom: 200px; } .carousel-item img{ width:100%; height:100%; object-fit:cover; display:block; } @keyframes scroll-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } @media (max-width:560px){ .carousel-item{width:280px;height:560px} .carousel-container::before{width:80px} .carousel-container{ position:relative; width:100%!important; max-width:100vw!important; right:auto; top:auto; margin-bottom:-50%; overflow:hidden!important; box-sizing:border-box; } #screens > div:first-child{ position:relative; left:auto; top:auto; margin:0 20px; } #screens{ padding-left:0; margin-left:0; width:100%!important; max-width:100vw!important; overflow:hidden!important; } }