/* ===================================================================== CORES DA MARCA — edita aqui para afinar tudo de uma vez ===================================================================== */ :root{ --bg: #06060F; /* fundo (azul-noite quase preto) */ --card: #10101B; /* superfícies / cartões */ --line: #232338; /* bordas */ --text: #FFFFFF; /* texto principal */ --muted: #A5A3BC; /* texto secundário */ --purple: #7C3AED; /* roxo principal (botões) */ --purple-2: #8B5CF6; /* roxo claro (gradientes) */ --lav: #C9B8FF; /* lilás (topo dos gradientes de título) */ --ticker: #7B5CFA; /* barra roxa do ticker */ --gold: #F5B02E; /* estrelas de rating */ --green: #34D399; /* métricas positivas */ --font:'Poppins', system-ui, sans-serif; --fancy:'Playfair Display', Georgia, serif; --radius:20px; --wrap:1160px; --gutter:clamp(1.1rem, 4vw, 2.5rem); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:1rem; line-height:1.7; overflow-x:hidden; } /* Tem de estar também no : só no não chega, e a faixa deslizante fazia a página abanar para o lado em telemóvel. */ html{overflow-x:hidden;} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;background:none;border:0;color:inherit;cursor:pointer} ::selection{background:var(--purple);color:#fff} :focus-visible{outline:2px solid var(--purple-2);outline-offset:3px;border-radius:6px} [id]{scroll-margin-top:110px} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)} .section{padding-block:clamp(4.5rem, 10vw, 7.5rem);position:relative} /* ---------- céu estrelado ---------- */ .stars, .stars::after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background-repeat:repeat; } .stars{ background-image: radial-gradient(1px 1px at 22px 34px, rgba(255,255,255,.55), transparent 55%), radial-gradient(1px 1px at 180px 120px, rgba(255,255,255,.35), transparent 55%), radial-gradient(1.5px 1.5px at 300px 60px, rgba(200,184,255,.5), transparent 55%), radial-gradient(1px 1px at 410px 210px, rgba(255,255,255,.3), transparent 55%), radial-gradient(1px 1px at 520px 150px, rgba(255,255,255,.45), transparent 55%); background-size:560px 300px; } .stars::after{ background-image: radial-gradient(1px 1px at 90px 250px, rgba(255,255,255,.4), transparent 55%), radial-gradient(1.5px 1.5px at 240px 320px, rgba(190,170,255,.45), transparent 55%), radial-gradient(1px 1px at 460px 40px, rgba(255,255,255,.35), transparent 55%), radial-gradient(1px 1px at 620px 300px, rgba(255,255,255,.5), transparent 55%); background-size:720px 420px; animation:twinkle 6s ease-in-out infinite alternate; } @keyframes twinkle{from{opacity:.35}to{opacity:1}} /* ---------- tipografia ---------- */ h1,h2,h3{font-weight:700;line-height:1.18;text-wrap:balance} .grad{ background:linear-gradient(180deg, var(--lav) 8%, var(--purple-2) 92%); -webkit-background-clip:text; background-clip:text; color:transparent; } .fancy{font-family:var(--fancy);font-style:italic;font-weight:700;letter-spacing:.01em} .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--purple-2); margin-bottom:1.1rem; } .eyebrow::before{content:"★";font-size:.7rem} .section-head{max-width:48rem;margin-bottom:clamp(2.2rem,5vw,3.4rem)} .section-head.center{margin-inline:auto;text-align:center} .section-head.center .eyebrow{justify-content:center} .section-head h2{font-size:clamp(1.85rem, 4.2vw, 2.9rem)} .section-head p{color:var(--muted);margin-top:1rem} .section-head.center p{max-width:38rem;margin-inline:auto} /* ---------- botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:.7rem; background:linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%); color:#fff; font-weight:600; font-size:.98rem; padding:.55rem .6rem .55rem 1.5rem; border-radius:999px; transition:transform .18s ease, box-shadow .18s ease; min-height:52px; box-shadow:0 8px 26px rgba(124,58,237,.35); } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,58,237,.5)} .btn:active{transform:translateY(0)} .btn i{ width:36px;height:36px;flex:none; background:#fff;color:var(--purple); border-radius:50%; display:flex;align-items:center;justify-content:center; font-style:normal; } .btn i svg{width:15px;height:15px} .btn-ghost{ background:transparent; border:1.5px solid rgba(139,92,246,.55); box-shadow:none; padding-inline:1.5rem; } .btn-ghost:hover{box-shadow:none;background:rgba(124,58,237,.12);border-color:var(--purple-2)} /* ---------- nav (pílula flutuante) ---------- */ .nav{ position:fixed; inset-inline:0; top:0; z-index:60; padding:14px var(--gutter) 0; pointer-events:none; } .nav-pill{ pointer-events:auto; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:rgba(9,9,18,.72); border:1px solid rgba(255,255,255,.07); border-radius:999px; padding:.55rem .6rem .55rem 1.3rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:box-shadow .25s ease, background .25s ease; } .nav.scrolled .nav-pill{background:rgba(9,9,18,.9);box-shadow:0 12px 40px rgba(0,0,0,.5)} /* Logótipo recriado em SVG — para usares o teu PNG, substitui o conteúdo do link .logo (no header e no footer) por: img src="img/navbarnovo.png" alt="Self-Made Agency" height="36" */ .logo{display:flex;align-items:center;gap:.65rem;white-space:nowrap} .logo-mark{display:grid;grid-template-columns:repeat(3, 7px);grid-auto-rows:7px;gap:2px} .logo-mark b{border-radius:1.5px} .logo-text{line-height:1.05} .logo-text strong{display:block;font-weight:700;font-size:1rem;letter-spacing:.03em} .logo-text span{display:block;font-size:.55rem;font-weight:600;letter-spacing:.42em;color:var(--purple-2)} .nav-links{display:flex;align-items:center;gap:1.9rem;font-size:.93rem;font-weight:500} .nav-links a:not(.btn){color:#EDECF6;transition:color .18s ease;padding:.4rem 0} .nav-links a:not(.btn):hover{color:var(--purple-2)} .nav-links .btn{min-height:46px;padding:.4rem .5rem .4rem 1.3rem} .nav-links .btn i{width:32px;height:32px} .menu-btn{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:50%} .menu-btn svg{width:20px;height:20px} .menu-btn .icon-close{display:none} body.nav-open .menu-btn .icon-open{display:none} body.nav-open .menu-btn .icon-close{display:block} @media (max-width:840px){ .menu-btn{display:flex} .nav-links{ position:fixed; top:86px; inset-inline:var(--gutter); flex-direction:column; align-items:stretch; gap:0; background:rgba(9,9,18,.97); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:1rem 1.4rem 1.4rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transform:translateY(-8px); opacity:0; visibility:hidden; transition:transform .22s ease, opacity .22s ease, visibility .22s; } body.nav-open .nav-links{transform:translateY(0);opacity:1;visibility:visible} .nav-links a:not(.btn){padding:.95rem 0;font-size:1.05rem;border-bottom:1px solid var(--line)} .nav-links .btn{margin-top:1.1rem;justify-content:center} } /* ---------- hero ---------- */ .hero{ position:relative; text-align:center; padding-top:clamp(9rem, 18vw, 12.5rem); padding-bottom:clamp(4rem, 8vw, 6rem); } .hero::before{ content:""; position:absolute; top:-180px;left:50%;transform:translateX(-50%); width:min(980px, 120vw);height:640px; background:radial-gradient(closest-side, rgba(124,58,237,.22), transparent 70%); pointer-events:none; } .hero-badge{ display:inline-flex;align-items:center;gap:.5rem; font-size:.78rem;font-weight:500;color:#DDD6FE; border:1px solid rgba(139,92,246,.4); background:rgba(124,58,237,.12); border-radius:999px; padding:.45rem 1rem; margin-bottom:1.6rem; position:relative; } .hero-badge b{color:var(--gold);font-weight:600;letter-spacing:.05em} .hero h1{ font-size:clamp(2.4rem, 6.2vw, 4.5rem); font-weight:700; max-width:19ch; margin-inline:auto; position:relative; } .hero-sub{ color:var(--muted); max-width:36rem; margin:1.5rem auto 0; font-size:1.05rem; position:relative; } .hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.3rem;position:relative} .hero-proof{ display:flex;flex-wrap:wrap;justify-content:center; gap:.6rem 1.8rem; margin-top:2.4rem; font-size:.85rem;color:var(--muted); position:relative; } .hero-proof span{display:flex;align-items:center;gap:.5rem} .hero-proof b{color:#fff;font-weight:600} .hero-proof span::before{content:"★";color:var(--purple-2);font-size:.7rem} /* ---------- ticker roxo ---------- */ .ticker{ background:var(--ticker); overflow:hidden; padding-block:.85rem; transform:rotate(0.0001deg); } .ticker-track{ display:flex; gap:2.8rem; width:max-content; animation:scroll 28s linear infinite; } .ticker:hover .ticker-track{animation-play-state:paused} .ticker-track span{ font-weight:700; font-size:.85rem; letter-spacing:.16em; white-space:nowrap; color:#fff; display:flex; align-items:center; gap:2.8rem; } .ticker-track span::after{content:"★";font-size:.75rem;opacity:.9} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- cartões genéricos ---------- */ .cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.15rem} .cards-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.15rem} .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.9rem 1.7rem; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; display:flex; flex-direction:column; } .card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.55);box-shadow:0 18px 44px rgba(124,58,237,.14)} .card-icon{ width:48px;height:48px; border-radius:14px; background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(139,92,246,.1)); border:1px solid rgba(139,92,246,.35); display:flex;align-items:center;justify-content:center; margin-bottom:1.3rem; } .card-icon svg{width:22px;height:22px;stroke:var(--purple-2)} .card h3{font-size:1.25rem;margin-bottom:.65rem} .card p{color:var(--muted);font-size:.95rem} .card ul{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line);display:grid;gap:.55rem} .card li{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem} .card li::before{content:"★";color:var(--purple-2);font-size:.6rem;flex:none} .why-label{ font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--purple-2);margin-bottom:.9rem; } /* ---------- resultados (tabs + prints clicáveis) ---------- */ .rating{ display:flex;align-items:center;justify-content:center;gap:.6rem; margin-top:1.1rem;font-size:.88rem;color:var(--muted); } .rating b{color:var(--gold);letter-spacing:.12em;font-weight:600} .tabs{ display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem; margin-bottom:2.2rem; } .tab{ border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:.6rem 1.4rem; font-weight:600; font-size:.9rem; transition:all .2s ease; min-height:46px; } .tab:hover{color:#fff;border-color:rgba(139,92,246,.5)} .tab.active{ background:linear-gradient(135deg, var(--purple), var(--purple-2)); border-color:transparent; color:#fff; box-shadow:0 8px 24px rgba(124,58,237,.35); } .panel{display:none} .panel.active{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.15rem} @media (min-width:940px){ .panel.active{grid-template-columns:repeat(3,1fr)} } .shot-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease; display:flex;flex-direction:column; } .shot-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.55);box-shadow:0 18px 44px rgba(124,58,237,.16)} .shot-btn{ position:relative; display:block; width:100%; padding:1rem 1rem 0; cursor:zoom-in; } .shot-btn img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:#1A1A2A; } .shot-zoom{ position:absolute; right:1.7rem;bottom:.7rem; width:38px;height:38px; border-radius:50%; background:rgba(9,9,18,.75); border:1px solid rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center; opacity:0; transition:opacity .2s ease; backdrop-filter:blur(6px); } .shot-zoom svg{width:16px;height:16px;stroke:#fff} .shot-btn:hover .shot-zoom, .shot-btn:focus-visible .shot-zoom{opacity:1} .shot-stats{ display:grid;grid-template-columns:1fr 1fr; gap:.5rem; padding:1.1rem 1.3rem 1.3rem; } .shot-stat b{display:block;font-size:1.25rem;font-weight:700} .shot-stat span{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--muted)} .shot-stat span::before{content:"";width:7px;height:7px;border-radius:50%;flex:none} .shot-stat.roas span::before{background:var(--purple-2)} .shot-stat.period span::before{background:var(--green)} .results-hint{ text-align:center;color:var(--muted);font-size:.85rem;margin-top:1.6rem; } .results-hint b{color:#DDD6FE;font-weight:500} /* ---------- statement ---------- */ .statement{text-align:center} .statement::before{ content:""; position:absolute;inset:0; background:radial-gradient(closest-side, rgba(124,58,237,.14), transparent 72%); pointer-events:none; } .statement h2{ font-size:clamp(2rem, 5.4vw, 3.8rem); max-width:21ch; margin-inline:auto; position:relative; } .statement p{color:var(--muted);max-width:36rem;margin:1.4rem auto 0;position:relative} .statement .btn{margin-top:2.2rem;position:relative} .statement-note{ font-size:.8rem;letter-spacing:.08em; margin-top:1.5rem !important; color:var(--muted); } /* ---------- stats band ---------- */ .stats{border-block:1px solid var(--line);background:rgba(16,16,27,.6)} .stats-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem;padding-block:clamp(2.5rem,6vw,3.8rem);text-align:center; } .stat b{ display:block;font-weight:700; font-size:clamp(2rem, 4.5vw, 2.9rem); background:linear-gradient(180deg, var(--lav), var(--purple-2)); -webkit-background-clip:text;background-clip:text;color:transparent; } .stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500} /* ---------- processo ---------- */ .process{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.15rem} .step{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:1.7rem 1.5rem; } .step-num{ display:flex;align-items:center;gap:.8rem; font-weight:700;font-size:.85rem;color:var(--purple-2); margin-bottom:1rem; } .step-num::after{content:"";height:1px;flex:1;background:var(--line)} .step h3{font-size:1.1rem;margin-bottom:.5rem} .step p{color:var(--muted);font-size:.92rem} /* ---------- faq ---------- */ .faq-wrap{max-width:46rem;margin-inline:auto} .faq{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:1.2rem; padding:1.4rem 0; font-weight:600;font-size:1.08rem; transition:color .18s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--purple-2)} .faq-x{ flex:none;width:32px;height:32px; border:1px solid var(--line);border-radius:50%; position:relative; transition:transform .25s ease, border-color .25s ease, background .25s ease; } .faq-x::before,.faq-x::after{ content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); background:var(--muted); } .faq-x::before{width:12px;height:1.6px} .faq-x::after{width:1.6px;height:12px} .faq[open] .faq-x{transform:rotate(45deg);border-color:var(--purple-2);background:rgba(124,58,237,.15)} .faq[open] .faq-x::before,.faq[open] .faq-x::after{background:var(--purple-2)} .faq-a{color:var(--muted);padding:0 0 1.5rem;max-width:40rem} /* ---------- cta final ---------- */ .cta{text-align:center;overflow:hidden} .cta::before{ content:""; position:absolute;bottom:-280px;left:50%;transform:translateX(-50%); width:min(900px,120vw);height:560px; background:radial-gradient(closest-side, rgba(124,58,237,.24), transparent 70%); pointer-events:none; } .cta h2{font-size:clamp(2.1rem, 5.6vw, 4rem);position:relative;max-width:18ch;margin-inline:auto} .cta p{color:var(--muted);max-width:34rem;margin:1.3rem auto 0;position:relative} .cta .btn{margin-top:2.3rem;position:relative;font-size:1.02rem} .cta-alt{position:relative;margin-top:1.7rem !important;font-size:.88rem} .cta-alt a{color:#fff;border-bottom:1px solid rgba(139,92,246,.5);transition:border-color .18s} .cta-alt a:hover{border-color:var(--purple-2)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding-block:3.5rem 2rem;background:rgba(9,9,16,.6)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem} .foot-grid > div > p{color:var(--muted);font-size:.9rem;max-width:26rem;margin-top:1.1rem} .foot-grid h4{ font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin-bottom:1.1rem;font-weight:600; } .foot-grid ul{display:grid;gap:.6rem;font-size:.93rem} .foot-grid ul a{color:#EDECF6;transition:color .18s} .foot-grid ul a:hover{color:var(--purple-2)} .foot-bottom{ border-top:1px solid var(--line); padding-top:1.6rem; display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between; font-size:.78rem;color:var(--muted); } @media (max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:2rem} } /* ---------- lightbox ---------- */ .lb{ position:fixed;inset:0;z-index:100; display:flex;align-items:center;justify-content:center; padding:clamp(.8rem, 3vw, 2.5rem); } .lb[hidden]{display:none} .lb-backdrop{ position:absolute;inset:0; background:rgba(4,4,10,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .lb-figure{ position:relative; max-width:min(1100px, 100%); max-height:100%; display:flex;flex-direction:column; gap:.9rem; animation:lb-in .25s ease; } @keyframes lb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} .lb-figure img{ max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; border-radius:14px; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 120px rgba(0,0,0,.7); background:#0D0D18; } .lb-cap{ text-align:center;color:var(--muted);font-size:.88rem; } .lb-cap b{color:#fff;font-weight:600} .lb-close, .lb-nav{ position:absolute; width:48px;height:48px; border-radius:50%; background:rgba(16,16,27,.85); border:1px solid rgba(255,255,255,.15); display:flex;align-items:center;justify-content:center; transition:background .18s ease, border-color .18s ease; z-index:2; } .lb-close svg,.lb-nav svg{width:18px;height:18px;stroke:#fff} .lb-close:hover,.lb-nav:hover{background:var(--purple);border-color:var(--purple)} .lb-close{top:14px;right:14px;position:fixed} .lb-prev{left:10px;top:50%;transform:translateY(-50%);position:fixed} .lb-next{right:10px;top:50%;transform:translateY(-50%);position:fixed} body.lb-open{overflow:hidden} @media (max-width:640px){ .lb-prev{left:6px}.lb-next{right:6px} .lb-prev,.lb-next{width:42px;height:42px} } /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease} .reveal.in{opacity:1;transform:none} .reveal:nth-child(2){transition-delay:.08s} .reveal:nth-child(3){transition-delay:.16s} .reveal:nth-child(4){transition-delay:.24s} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} .reveal{opacity:1;transform:none} .ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:.5rem} .ticker-track span[aria-hidden]{display:none} }