/* ═══════════════════════════════════════════ Barbacã — landing Bando do Barba Rosa ═══════════════════════════════════════════ */ :root { --bg: #080a12; --bg-alt: #0c0f1b; --bg-card: #0e1220; --pink: #ec4899; --pink-soft: #f472b6; --pink-pale: #fbcfe8; --pink-deep: #db2777; --pink-glow: rgba(236, 72, 153, 0.28); --text: #eceef5; --muted: #9097ad; --dim: #5a6178; --line: rgba(255, 255, 255, 0.08); --ok: #34d399; --bad: #fb7185; --radius: 18px; --font-head: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-head); text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; } svg { display: block; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 780px; } .pink { color: var(--pink); } /* ── botões ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 11px; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s, color .2s, background .2s; } .btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 13px; } .btn-pink { background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink) 45%, var(--pink-deep) 100%); color: #fff; box-shadow: 0 6px 28px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.25); } .btn-pink:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(236,72,153,.4), inset 0 1px 0 rgba(255,255,255,.3); } .btn-pink svg { transition: transform .2s; } .btn-pink:hover svg { transform: translateX(4px); } .btn-ghost { color: var(--muted); } .btn-ghost:hover { color: var(--text); } .btn-outline { border-color: rgba(255,255,255,.14); color: var(--text); background: rgba(255,255,255,.02); } .btn-outline:hover { border-color: var(--pink); color: var(--pink-pale); background: rgba(236,72,153,.08); } .btn-block { width: 100%; } /* ── rota de leitura ── */ .route { position: fixed; top: 68px; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; } body.scrolled .route { opacity: 1; } .route-fill { height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, transparent, var(--pink) 60%, var(--pink-pale)); box-shadow: 0 0 12px var(--pink-glow); } .route-ship { position: absolute; left: 0; top: -21px; width: 26px; height: 20px; will-change: transform; filter: drop-shadow(0 0 6px var(--pink-glow)); } /* ── nav ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(8, 10, 18, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .logo-mark { width: 32px; height: 32px; filter: drop-shadow(0 4px 14px var(--pink-glow)); transition: transform .4s cubic-bezier(.3,1.6,.5,1); } .logo:hover .logo-mark { transform: rotate(-8deg) scale(1.08); } .logo-text { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -.04em; } .nav-links { display: flex; gap: 6px; } .nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 9px; transition: color .15s, background .15s; } .nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); } /* troca de idioma: último item do menu (sigla na barra larga; no celular, o nome dentro da lista que abre) */ .nav-links a.lang-link { margin-left: 6px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 7px 10px; } .nav-links a.lang-link:hover { border-color: var(--pink); color: var(--pink-pale); background: rgba(236,72,153,.08); } .lang-name { display: none; } .nav-cta { display: flex; gap: 8px; align-items: center; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.03); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s, opacity .2s; } .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.open .nav-toggle span:nth-child(2) { opacity: 0; } .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── hero ── */ .hero { position: relative; overflow: hidden; padding: 135px 0 430px; text-align: center; background: linear-gradient(180deg, #05060e 0%, #0f0a22 38%, #2a0f40 66%, #6a1c5e 86%, #a33a7d 100%); } .hero-inner { position: relative; z-index: 5; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(244,114,182,.3); background: rgba(236,72,153,.1); backdrop-filter: blur(6px); color: var(--pink-pale); font-size: 13px; font-weight: 500; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: pulse 2s infinite; flex: none; } @keyframes pulse { 50% { opacity: .35; transform: scale(.8); } } h1 { margin-top: 26px; font-size: clamp(38px, 6.6vw, 78px); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; text-shadow: 0 4px 40px rgba(5,6,14,.6); } .gradient { background: linear-gradient(120deg, #fff 0%, var(--pink-pale) 25%, var(--pink-soft) 55%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { text-wrap: balance; max-width: 660px; margin: 26px auto 0; font-size: 18px; color: #c4c0d8; text-shadow: 0 2px 20px rgba(5,6,14,.7); } .hero-actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero-note { margin-top: 18px; font-size: 13px; color: #a79bc4; } .hero-inner > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; } .hero-inner > :nth-child(2) { animation-delay: .1s; } .hero-inner > :nth-child(3) { animation-delay: .2s; } .hero-inner > :nth-child(4) { animation-delay: .3s; } .hero-inner > :nth-child(5) { animation-delay: .4s; } @keyframes rise { from { opacity: 0; transform: translateY(26px); } } /* céu */ .stars { position: absolute; inset: 0 0 38% 0; pointer-events: none; } .stars i { position: absolute; border-radius: 50%; background: #fff; opacity: .2; animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite; } @keyframes twinkle { 50% { opacity: .95; transform: scale(1.5); } } .shooting { position: absolute; top: 14%; left: 78%; width: 120px; height: 2px; opacity: 0; transform: rotate(-24deg); background: linear-gradient(90deg, transparent, #fff); animation: shoot 9s ease-in 3s infinite; pointer-events: none; } @keyframes shoot { 0% { opacity: 0; transform: translate(0,0) rotate(-24deg); } 3% { opacity: 1; } 10% { opacity: 0; transform: translate(-340px, 150px) rotate(-24deg); } 100% { opacity: 0; } } .cloud { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; will-change: transform; } .cloud-a { top: 30%; left: -6%; width: 520px; height: 110px; background: rgba(236,72,153,.2); animation: drift-x 60s linear infinite alternate; } .cloud-b { top: 46%; right: -8%; width: 640px; height: 130px; background: rgba(168,85,247,.17); animation: drift-x 80s linear infinite alternate-reverse; } @keyframes drift-x { to { margin-left: 140px; } } .gulls { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .gull { position: absolute; width: 26px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.600; stroke-linecap: round; animation: fly 26s linear infinite, flap .7s ease-in-out infinite alternate; } .gull.g1 { top: 40%; left: -40px; } .gull.g2 { top: 36%; left: -40px; width: 20px; animation-delay: 3s, .1s; } .gull.g3 { top: 46%; left: -40px; width: 16px; animation-delay: 6s, .25s; } @keyframes fly { to { transform: translateX(calc(100vw + 120px)); } } @keyframes flap { from { scale: 1 1; } to { scale: 1 .45; } } /* lua */ .moon-wrap { position: absolute; left: 76%; bottom: 215px; width: 210px; height: 210px; margin-left: -105px; z-index: 1; pointer-events: none; } .moon { width: 100%; height: 100%; border-radius: 50%; will-change: transform; background: radial-gradient(circle at 34% 30%, #fff 0, #ffe4f1 38%, #f9a8d4 78%, #ec4899 100%); box-shadow: 0 0 60px 20px rgba(244,114,182,.35), 0 0 160px 60px rgba(236,72,153,.22); position: relative; } .moon::before, .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(190, 70, 130, .14); } .moon::before { width: 54px; height: 54px; left: 62%; top: 24%; } .moon::after { width: 30px; height: 30px; left: 28%; top: 58%; } /* mar */ .sea { position: absolute; left: 0; right: 0; bottom: 0; height: 330px; z-index: 3; pointer-events: none; } .wave-wrap { position: absolute; left: 0; bottom: 0; width: 200%; animation: wave-slide 26s linear infinite; will-change: transform; } .wave-wrap.rev { animation-direction: reverse; } .wave { width: 100%; height: 100%; fill: currentColor; } @keyframes wave-slide { to { transform: translateX(-50%); } } .sea .w1 { height: 300px; color: #5c1a58; animation-duration: 34s; } .sea .w2 { height: 232px; color: #1c0d33; animation-duration: 24s; animation-direction: reverse; } .sea .w3 { height: 176px; color: var(--bg); animation-duration: 18s; } .moon-reflect { position: absolute; left: 76%; bottom: 40px; width: 130px; height: 170px; margin-left: -65px; background: repeating-linear-gradient(180deg, rgba(251,207,232,.5) 0 3px, transparent 3px 11px); -webkit-mask-image: radial-gradient(ellipse at 50% 0, #000 0, transparent 72%); mask-image: radial-gradient(ellipse at 50% 0, #000 0, transparent 72%); animation: shimmer 3s ease-in-out infinite alternate; opacity: .55; } @keyframes shimmer { to { transform: scaleX(.78); opacity: .3; } } .ship-wrap { position: absolute; left: 36%; bottom: 150px; width: 340px; margin-left: -170px; will-change: transform; } .ship { animation: bob 6.5s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 0 40px rgba(236,72,153,.25)); } .ship svg { width: 100%; height: auto; overflow: visible; } @keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.800deg); } 50% { transform: translateY(-12px) rotate(1.800deg); } } /* ── números ── */ .proof { position: relative; margin-top: -2px; background: var(--bg); padding-top: 24px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--bg-card); padding: 30px 16px; text-align: center; } .stat-value { font-family: var(--font-head); font-size: 34px; font-weight: 700; letter-spacing: -.03em; color: var(--pink-pale); line-height: 1.2; } .stat-cur { font-size: 20px; color: var(--pink-soft); } .stat-label { margin-top: 6px; font-size: 13px; color: var(--muted); } .marquee { margin-top: 56px; overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; align-items: center; gap: 36px; width: max-content; animation: marquee 38s linear infinite; } .marquee-track span { font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .marquee-track i { width: 8px; height: 8px; background: var(--pink); transform: rotate(45deg); flex: none; box-shadow: 0 0 10px var(--pink-glow); } @keyframes marquee { to { transform: translateX(-50%); } } /* ── seções ── */ .section { position: relative; padding: 110px 0; } .section-alt { background: var(--bg-alt); } .section-head { text-align: center; max-width: 660px; margin: 0 auto 60px; } .eyebrow { display: inline-block; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pink-soft); } .section-head h2, .live-text h2, .code-text h2 { font-size: clamp(28px, 4.4vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.14; } .section-head p { margin-top: 16px; color: var(--muted); font-size: 17px; } .divider { position: absolute; left: 0; right: 0; top: -59px; height: 60px; overflow: hidden; color: var(--bg-alt); pointer-events: none; } .divider .wave-wrap { height: 100%; animation-duration: 40s; } /* reveal */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } /* ── cards ── */ .features { overflow: hidden; } .compass { position: absolute; right: -140px; top: 60px; width: 560px; height: 560px; color: rgba(244,114,182,.12); pointer-events: none; will-change: transform; } .grid-3 { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card, .price-card { --mx: 50%; --my: 0%; } .card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); padding: 30px; transition: border-color .25s, transform .25s, opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); } .card::before, .price-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(236,72,153,.16), transparent 62%); } .card:hover::before, .price-card:hover::after { opacity: 1; } .card:hover { border-color: rgba(244,114,182,.35); } .card-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--pink-soft); background: linear-gradient(145deg, rgba(236,72,153,.2), rgba(236,72,153,.04)); border: 1px solid rgba(244,114,182,.25); transition: transform .4s cubic-bezier(.3,1.6,.5,1); } .card:hover .card-icon { transform: rotate(-6deg) scale(1.08); } .card-icon svg { width: 24px; height: 24px; } .card h3 { margin-top: 20px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .card p { margin-top: 10px; font-size: 15px; color: var(--muted); } /* ── rota (como funciona) ── */ .voyage-section { overflow: hidden; } .voyage { position: relative; max-width: 900px; margin: 0 auto; } .voyage-line { position: absolute; left: 50%; top: 40px; bottom: 230px; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 7px, transparent 7px 15px); } .voyage-fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--pink-pale), var(--pink)); box-shadow: 0 0 14px var(--pink-glow); } .voyage-ship { position: absolute; left: 50%; top: 0; width: 70px; margin-left: -35px; z-index: 4; will-change: transform; filter: drop-shadow(0 0 18px var(--pink-glow)); } .voyage-ship svg { width: 100%; height: auto; } .voyage-step { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 76px 1fr; align-items: center; margin-bottom: 70px; } .voyage-step:nth-of-type(odd) .step-card { grid-column: 1; text-align: right; } .voyage-step:nth-of-type(even) .step-card { grid-column: 3; } .step-node { grid-column: 2; grid-row: 1; justify-self: center; } .step-node span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-family: var(--font-head); font-weight: 700; font-size: 20px; background: var(--bg-alt); border: 2px solid rgba(255,255,255,.18); color: var(--muted); transition: all .5s cubic-bezier(.3,1.6,.5,1); } .voyage-step.reached .step-node span { background: linear-gradient(135deg, var(--pink-soft), var(--pink-deep)); border-color: var(--pink-pale); color: #fff; box-shadow: 0 0 0 7px rgba(236,72,153,.14), 0 0 34px var(--pink-glow); transform: scale(1.1); } .step-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); padding: 28px; transition: border-color .4s, box-shadow .4s; } .voyage-step.reached .step-card { border-color: rgba(244,114,182,.4); box-shadow: 0 16px 50px rgba(236,72,153,.1); } .step-tag { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pink-soft); } .step-card h3 { margin-top: 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; } .step-card p { margin-top: 10px; font-size: 15px; color: var(--muted); } .voyage-end { position: relative; z-index: 2; margin-top: 10px; text-align: center; } .chest { width: 170px; margin: 0 auto; overflow: visible; } .chest-lid { transform-box: view-box; transform-origin: 124px 62px; transition: transform .9s cubic-bezier(.3,1.5,.5,1); } .chest-rays, .chest-coins { transition: opacity .6s .3s; } .chest-coins { opacity: 0; transform: translateY(14px); transition: opacity .5s .4s, transform .7s .4s cubic-bezier(.3,1.6,.5,1); } .voyage-end.open .chest-lid { transform: rotate(34deg); } .voyage-end.open .chest-rays { opacity: 1; animation: rays 2.4s ease-in-out infinite alternate; } .voyage-end.open .chest-coins { opacity: 1; transform: none; } .voyage-end.open .chest { filter: drop-shadow(0 0 30px var(--pink-glow)); } @keyframes rays { to { opacity: .4; } } .chest-text { margin-top: 14px; color: var(--muted); font-size: 16px; } .chest-text strong { color: var(--pink-pale); font-family: var(--font-head); } /* ── painel ao vivo ── */ .live-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; } .live-text p, .code-text p { margin-top: 18px; color: var(--muted); font-size: 17px; } .check-list { margin-top: 24px; list-style: none; } .check-list li { position: relative; padding: 8px 0 8px 32px; font-size: 15.5px; } .check-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: rgba(236,72,153,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='3.200' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(244,114,182,.35); } .panel { border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #0f1324, #0a0d19); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(236,72,153,.06), 0 0 80px rgba(236,72,153,.08); } .panel-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 13px; } .panel-live { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; } .panel-live .badge-dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .panel-title { color: var(--text); font-weight: 600; } .panel-demo { margin-left: auto; color: var(--dim); font-size: 12px; } .panel-body { display: grid; grid-template-columns: 1fr 132px; gap: 8px; padding: 12px 16px 6px 12px; min-height: 304px; align-items: center; } .feed { list-style: none; display: flex; flex-direction: column; gap: 4px; overflow: hidden; height: 280px; } .feed li { display: grid; grid-template-columns: 62px 70px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; background: rgba(255,255,255,.025); animation: feed-in .5s cubic-bezier(.2,.7,.2,1); } .feed li:nth-child(n+6) { opacity: .35; } .feed li:nth-child(n+7) { opacity: .15; } .feed .t { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12px; } .feed .tag { padding: 2px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: rgba(52,211,153,.12); color: var(--ok); } .feed li.bad { background: rgba(251,113,133,.06); } .feed li.bad .tag { background: rgba(251,113,133,.14); color: var(--bad); } .feed .msg { color: var(--muted); } .feed .msg b { color: var(--text); font-weight: 600; } @keyframes feed-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } } .radar { position: relative; width: 124px; height: 124px; justify-self: center; border-radius: 50%; border: 1px solid rgba(244,114,182,.35); background: radial-gradient(circle, rgba(236,72,153,.1), transparent 70%); overflow: hidden; } .radar-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(244,114,182,.2); border-radius: 50%; transform: translate(-50%,-50%); } .radar-ring.r1 { width: 100px; height: 100px; } .radar-ring.r2 { width: 60px; height: 60px; } .radar-ring.r3 { width: 22px; height: 22px; background: rgba(244,114,182,.5); } .radar::before, .radar::after { content: ""; position: absolute; background: rgba(244,114,182,.18); } .radar::before { left: 50%; top: 0; bottom: 0; width: 1px; } .radar::after { top: 50%; left: 0; right: 0; height: 1px; } .radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(244,114,182,.55), rgba(244,114,182,0) 22%, transparent 100%); animation: spin 3.600s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .blip { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pink-pale); box-shadow: 0 0 10px var(--pink); animation: blip 3.600s ease-out infinite; opacity: 0; } .blip.bad { background: var(--bad); box-shadow: 0 0 10px var(--bad); } .b1 { left: 70%; top: 28%; animation-delay: .5s; } .b2 { left: 26%; top: 36%; animation-delay: 2.100s; } .b3 { left: 38%; top: 72%; animation-delay: 3.100s; } .b4 { left: 78%; top: 66%; animation-delay: 1.400s; } @keyframes blip { 0% { opacity: 0; transform: scale(.4); } 6% { opacity: 1; transform: scale(1.4); } 40% { opacity: .5; transform: scale(1); } 80%,100% { opacity: 0; } } .panel-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); } .panel-foot div { background: #0b0e1b; padding: 14px 20px; display: flex; align-items: baseline; gap: 10px; } .panel-foot strong { font-family: var(--font-head); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .panel-foot span { font-size: 12.5px; color: var(--muted); } .bad-text { color: var(--bad); } /* ── instalação ── */ .install { padding-top: 40px; } .code-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; } .code-block { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #0a0d19; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .code-block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pink), transparent); } .code-lang { position: absolute; top: 14px; right: 16px; font-size: 11.5px; color: var(--pink-soft); border: 1px solid rgba(244,114,182,.3); border-radius: 7px; padding: 2px 10px; } .code-block pre { padding: 34px 26px 26px; overflow-x: auto; } .code-block code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; line-height: 1.85; color: #eceef5; } .c { color: #565f73; font-style: italic; } .k { color: var(--pink-soft); font-weight: 600; } .s { color: #a5d6ff; } .f { color: #fbbf24; } /* ── preços ── */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .price-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-card); padding: 34px 30px; transition: border-color .25s, transform .25s, opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); } .price-card:hover { border-color: rgba(244,114,182,.35); } .price-featured { border-color: rgba(244,114,182,.55); background: radial-gradient(360px 160px at 50% 0, rgba(236,72,153,.18), transparent 70%), var(--bg-card); box-shadow: 0 24px 70px rgba(236,72,153,.16); } .price-featured::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, var(--pink-pale) 50%, transparent 70%) 200% 0 / 250% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: sheen 4.500s ease-in-out infinite; } @keyframes sheen { to { background-position: -100% 0; } } .price-flag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, var(--pink-soft), var(--pink-deep)); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; padding: 5px 16px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; box-shadow: 0 6px 20px var(--pink-glow); } .price-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price-tier { font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .price-for { font-size: 12px; color: var(--pink-soft); background: rgba(236,72,153,.1); border: 1px solid rgba(244,114,182,.22); padding: 3px 10px; border-radius: 999px; } .price-value { margin-top: 18px; font-family: var(--font-head); font-size: 46px; font-weight: 700; letter-spacing: -.04em; } .price-cents { font-size: 22px; letter-spacing: 0; } .price-period { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; } .price-desc { margin-top: 8px; font-size: 14.5px; color: var(--muted); min-height: 46px; } .price-list { margin: 22px 0 28px; list-style: none; flex: 1; border-top: 1px solid var(--line); padding-top: 18px; } .price-list li { position: relative; padding: 7px 0 7px 28px; font-size: 14.5px; } .price-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border-radius: 50%; background: rgba(236,72,153,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat; } /* ── FAQ ── */ .faq-section { padding-top: 120px; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); margin-bottom: 12px; overflow: hidden; transition: border-color .2s; } .faq-item[open], .faq-item:hover { border-color: rgba(244,114,182,.3); } .faq-item summary { padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(236,72,153,.12); color: var(--pink-soft); font-size: 18px; transition: transform .3s, background .3s; } .faq-item[open] summary::after { transform: rotate(45deg); background: rgba(236,72,153,.25); } .faq-item p { padding: 0 24px 22px; color: var(--muted); font-size: 15.5px; animation: fade-down .35s ease; } @keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } } /* ── CTA final ── */ .finale { position: relative; overflow: hidden; padding: 130px 0 380px; text-align: center; background: linear-gradient(180deg, var(--bg) 0%, #140a26 36%, #3b1250 62%, #7d2468 84%, #b5457f 100%); } .stars-finale { inset: 0 0 45% 0; } .finale-inner { position: relative; z-index: 5; } .finale-logo { width: 68px; height: 68px; margin: 0 auto; filter: drop-shadow(0 8px 30px var(--pink-glow)); animation: bob 6s ease-in-out infinite; } .finale h2 { margin-top: 22px; font-size: clamp(32px, 5.4vw, 58px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; } .finale p { margin: 16px auto 32px; max-width: 520px; color: #cbc4e0; font-size: 17px; } .finale .cta-mini { margin: 18px auto 0; font-size: 14px; color: #b3a9d0; } .cta-mini a { color: var(--pink-pale); text-decoration: none; border-bottom: 1px solid rgba(251,207,232,.4); } .cta-mini a:hover { border-color: var(--pink-pale); } .finale-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 280px; z-index: 3; pointer-events: none; } .sun { position: absolute; left: 50%; bottom: 130px; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%; background: radial-gradient(circle, #ffe4f1 0, #f9a8d4 45%, #ec4899 100%); box-shadow: 0 0 80px 30px rgba(244,114,182,.4), 0 0 200px 80px rgba(236,72,153,.28); } .finale-sea .w1 { height: 250px; color: #6d1f5e; animation-duration: 36s; } .finale-sea .w2 { height: 190px; color: #1d0c33; animation-duration: 26s; } .finale-sea .w3 { height: 130px; color: #05060c; animation-duration: 19s; } .sailing { position: absolute; left: 0; bottom: 118px; width: 190px; animation: sail 42s linear infinite, bob 6s ease-in-out infinite; } .sailing svg { width: 100%; height: auto; overflow: visible; } @keyframes sail { from { translate: -240px 0; } to { translate: calc(100vw + 60px) 0; } } /* ── footer ── */ .footer { background: #05060c; padding: 40px 0 44px; margin-top: -1px; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .footer-logo .logo-text { font-size: 20px; } .footer-logo .logo-mark { width: 28px; height: 28px; } .footer-tag { margin-top: 10px; font-size: 13.5px; color: var(--muted); } .footer-links { display: flex; gap: 6px 24px; flex-wrap: wrap; } .footer-links a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .15s; } .footer-links a:hover { color: var(--pink-pale); } .footer-copy { font-size: 13px; color: var(--dim); width: 100%; border-top: 1px solid var(--line); padding-top: 24px; } /* ── responsivo ── */ @media (max-width: 960px) { .grid-3, .pricing { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } .live-wrap, .code-wrap { grid-template-columns: 1fr; gap: 40px; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } .nav.open { background: rgba(8, 10, 18, .96); border-bottom-color: var(--line); } .nav.open .nav-links { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 68px; left: 0; right: 0; padding: 10px 24px 22px; background: #080a12; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 68px); overflow-y: auto; animation: fade-down .2s ease; } .nav.open .nav-links a { font-size: 16px; padding: 14px 12px; } .nav.open .nav-links a.lang-link { margin: 8px 0 0; font-size: 14px; letter-spacing: .02em; align-self: flex-start; padding: 11px 16px; } .lang-code { display: none; } .lang-name { display: inline; } .nav-cta .btn-ghost { display: none; } .stats { grid-template-columns: repeat(2, 1fr); } .moon-wrap { left: 78%; width: 150px; height: 150px; margin-left: -75px; bottom: 230px; } .moon-reflect { left: 78%; width: 100px; margin-left: -50px; } .ship-wrap { left: 40%; width: 280px; margin-left: -140px; bottom: 150px; } .hero { padding: 115px 0 380px; } .compass { width: 380px; height: 380px; right: -150px; } .sun { width: 180px; height: 180px; margin-left: -90px; } .sailing { width: 140px; } .voyage-line { left: 28px; } .voyage-ship { left: 28px; width: 56px; margin-left: -28px; } .voyage-step { grid-template-columns: 56px 1fr; } .voyage-step .step-node { grid-column: 1 !important; justify-self: start; } .voyage-step .step-card { grid-column: 2 !important; text-align: left !important; margin-left: 12px; } .step-node span { width: 44px; height: 44px; font-size: 17px; margin-left: 6px; } .voyage-end { padding-left: 0; } } @media (max-width: 420px) { .hide-xs { display: none; } .container { padding: 0 18px; } .nav-cta { gap: 6px; } .nav-cta .btn-pink { padding: 9px 14px; } .nav.open .nav-links { padding-inline: 18px; } } @media (max-width: 560px) { .section { padding: 80px 0; } .hero-sub { font-size: 16.5px; } .panel-body { grid-template-columns: 1fr; } .radar { display: none; } .feed li { grid-template-columns: 58px auto 1fr; gap: 8px; } .feed { height: 300px; } .panel-demo { display: none; } .price-value { font-size: 40px; } .stat-value { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .stars i { opacity: .6; } .sailing { translate: 40vw 0; } } /* ═══════════════════════════════════════════ Modo dia / noite O padrão (noite) é tudo acima. `html[data-theme="light"]` troca as cores, o céu, o mar e o barco. Quem escolhe é o botão do menu (app.js); a escolha fica em localStorage ("bbr-theme") e o