/* ============================================================ WP GROUP — style.css v5 Dark / Light mode via [data-theme] on ============================================================ */ /* ══════════════════════════════════════════════════════════ CSS DESIGN TOKENS — dark (default) + light Green neon (#4ade80) é exclusivo do dark mode. Light mode usa charcoal como acento principal. ══════════════════════════════════════════════════════════ */ /* ── Paleta extraída da logo WP Group ────────────────────────── Logo: gradiente rosa #e6437f → laranja #f5971e + navy #1a3050 ─────────────────────────────────────────────────────────────── */ :root { --bg: #000000; --bg-alt: #080808; --bg-nav: rgba(0,0,0,0.52); --bg-card: rgba(255,255,255,0.025); --text: #ffffff; --text-2: rgba(255,255,255,0.58); --text-3: rgba(255,255,255,0.34); --text-4: rgba(255,255,255,0.16); --border: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.12); --silver: #a8a8a8; --shadow: rgba(0,0,0,0.6); --grid-line: rgba(255,255,255,0.013); --wm-color: rgba(255,255,255,0.016); --logo-frame-bg:#ffffff; /* ── ACENTO: laranja quente da logo ── */ --accent: #fb923c; --accent-2: #e6437f; /* rosa da logo */ --accent-bg: rgba(251,146,60,0.10); --accent-border: rgba(251,146,60,0.28); --accent-text: #fb923c; --accent-glow: rgba(251,146,60,0.5); --accent-gradient:linear-gradient(135deg,#e6437f,#fb923c); /* urgency bar */ --ub-bg: rgba(251,146,60,0.07); --ub-border:rgba(251,146,60,0.20); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* Preflight mínimo (substitui Tailwind CDN) */ img, video, svg { display: block; max-width: 100%; } button { cursor: pointer; background: transparent; border: none; } input, button, textarea, select { font-family: inherit; font-size: 100%; line-height: inherit; } /* Classes de fonte (substituem Tailwind font-*) */ .font-sans { font-family: 'DM Sans', sans-serif; } .font-display { font-family: 'Space Grotesk', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } /* Focus visível — acessibilidade para teclado */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .fg input:focus-visible, .fg select:focus-visible, .fg textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit; } strong { font-weight: 600; } ::selection { background: rgba(74,222,128,0.18); } ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; } .container { max-width: 1720px; margin: 0 auto; padding: 0 clamp(24px,4vw,64px); } /* ── Cursor ─────────────────────────────────────────────────── */ #cursor { position: fixed; width: 32px; height: 32px; border: 1px solid rgba(128,128,128,0.3); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .2s, height .2s, border-color .2s; mix-blend-mode: difference; will-change: left,top; } #cursor.on { width: 50px; height: 50px; border-color: rgba(128,128,128,0.55); } #cursor-dot { position: fixed; width: 3px; height: 3px; background: rgba(128,128,128,0.8); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); will-change: left,top; } @media (max-width: 768px) { #cursor,#cursor-dot { display: none; } } /* ── Loader ─────────────────────────────────────────────────── */ #loader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; } .ld-inner { text-align: center; } .ld-logo-img { height: 130px; width: auto; display: block; margin: 0 auto 28px; filter: brightness(0) invert(1); opacity: 0.9; animation: ldPulse 1.8s ease-in-out infinite; } @keyframes ldPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.85;transform:scale(.97)} } .ld-track { width: 140px; height: 2px; background: var(--border); margin: 0 auto; overflow: hidden; border-radius: 2px; } .ld-bar { height: 100%; background: var(--accent-gradient); width: 0; animation: ldfill 1.7s cubic-bezier(.4,0,.2,1) forwards; border-radius: 2px; } @keyframes ldfill { to { width: 100%; } } /* ── Urgency bar ────────────────────────────────────────────── */ #urgency-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--ub-bg); border-bottom: 1px solid var(--ub-border); padding: 9px 20px; font-size: .68rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s; } #urgency-bar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } #urgency-bar strong { color: var(--accent-text); font-weight: 600; } [data-theme="__removed__"] #urgency-bar strong { color: var(--accent); } #urgency-bar a { color: var(--text-2); border-bottom: 1px solid var(--border-2); transition: color .2s, border-color .2s; } #urgency-bar a:hover { color: var(--text); border-color: var(--text-2); } .ub-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); display: inline-block; animation: pdot 2s ease-in-out infinite; } [data-theme="__removed__"] .ub-dot { background: #1a3050; box-shadow: none; } .ub-dot.sm { width: 5px; height: 5px; } @keyframes pdot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.82);opacity:.6} } /* ── Nav ────────────────────────────────────────────────────── */ #navbar { position: fixed; top: 36px; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px,4vw,56px); background: var(--bg-nav); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border-bottom: 1px solid var(--border); transition: background .4s, border-color .4s, top .4s cubic-bezier(.4,0,.2,1); } /* When urgency bar hides, nav slides up to top:0 */ #navbar.at-top { top: 0; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; letter-spacing: .2em; color: var(--text); } .nav-logo span { color: var(--silver); } /* Logo navbar — sem texto duplicado, sem wrapper */ .nav-logo { gap: 0 !important; } /* só imagem */ .nav-logo-img { height: 52px; width: auto; display: block; flex-shrink: 0; transition: filter .3s, opacity .3s; } [data-theme="dark"] .nav-logo-img { filter: brightness(0) invert(1); /* silhueta branca limpa */ opacity: 0.9; } [data-theme="__removed__"] .nav-logo-img { mix-blend-mode: multiply; /* fundo branco desaparece */ filter: none; } .nav-center { display: flex; gap: 32px; } .nl { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); position: relative; transition: color .25s; } .nl::after { content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--silver); transition:width .3s; } .nl:hover { color: var(--text); } .nl:hover::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-cta { font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 8px 20px; border-radius: 8px; background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text); transition: background .25s, border-color .25s; will-change: transform; } .nav-cta:hover { background: var(--accent-border); } #burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } #burger span { display: block; height: 1px; background: var(--text); transition: all .3s; } #burger span:nth-child(1),#burger span:nth-child(2) { width: 22px; } #burger span.short { width: 14px; } #mob-nav { position: fixed; inset: 0; z-index: 150; background: var(--bg); backdrop-filter: blur(28px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 44px; } .mob-link { font-size: clamp(2rem,7vw,3.5rem); font-weight: 700; color: var(--text-3); transition: color .25s; } .mob-link:hover { color: var(--text); } @media (max-width: 768px) { .nav-center,.nav-right { display: none; } #burger { display: flex; } } /* ── Hero ───────────────────────────────────────────────────── */ #hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding-top: 36px; /* urgency bar */ } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .h-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 20% 30%,black 5%,transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 30%,black 5%,transparent 75%); } .h-glow { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; } .gl1 { width: 600px; height: 600px; background: radial-gradient(circle,rgba(80,80,80,0.1) 0%,transparent 70%); top: -180px; left: -80px; animation: gf 16s ease-in-out infinite; } .gl2 { width: 400px; height: 400px; background: radial-gradient(circle,rgba(60,60,60,0.07) 0%,transparent 70%); bottom: 80px; right: 5%; animation: gf 20s ease-in-out infinite reverse; } @keyframes gf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} } .hero-wm { position: absolute; right: -0.05em; bottom: 60px; font-weight: 700; font-size: clamp(130px,18vw,300px); color: var(--wm-color); line-height: 1; letter-spacing: -.05em; pointer-events: none; user-select: none; } .hero-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(128px,17vh,160px); padding-bottom: 60px; } /* ─ HERO SPLIT GRID ─ */ .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; } @media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; } .hero-visual-side { display: none; } } /* ─ H1 ─ */ .hero-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(24px,3.5vw,40px); } .hero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border: 1px solid var(--accent-border); border-radius: 100px; background: var(--accent-bg); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); } [data-theme="__removed__"] .hero-badge { color: var(--text-2); } .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent-glow); animation: pdot 2.5s ease-in-out infinite; } [data-theme="__removed__"] .pdot { background: #1a3050; box-shadow: none; } .hero-index { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-4); } .hero-h1 { font-weight: 700; font-size: clamp(2.6rem,6.5vw,8rem); line-height: 0.93; letter-spacing: -0.04em; color: var(--text); margin-bottom: clamp(24px,3.5vw,40px); } .hr { display: block; overflow: hidden; } .hm { display: block; overflow: hidden; } .hi { display: block; } .hero-h1 .hr:last-child .hi { color: var(--text-3); } .hero-sub { font-size: clamp(.85rem,1.2vw,.98rem); font-weight: 300; color: var(--text-3); line-height: 1.82; max-width: 420px; margin-bottom: 22px; } .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .trust-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .trust-line span { display: flex; align-items: center; gap: 5px; font-size: .63rem; color: var(--text-2); letter-spacing: .06em; } /* Buttons */ .btn-solid { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 10px; font-size: .8rem; font-weight: 500; letter-spacing: .04em; background: var(--bg-card); border: 1px solid var(--border-2); color: var(--text); backdrop-filter: blur(10px); transition: background .25s, border-color .25s; will-change: transform; } .btn-solid:hover { background: var(--border); border-color: var(--border-2); } .btn-ghost { display: inline-flex; align-items: center; padding: 13px 24px; border-radius: 10px; font-size: .8rem; font-weight: 400; letter-spacing: .04em; border: 1px solid var(--border); color: var(--text-3); transition: border-color .25s, color .25s; will-change: transform; } .btn-ghost:hover { border-color: var(--border-2); color: var(--text); } /* ─ HERO VISUAL RIGHT ─ */ .hero-visual-side { position: relative; padding: 28px 16px 48px; } .hv-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(74,222,128,0.06) 0%, transparent 70%); pointer-events: none; } /* Stats bar */ .hero-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); background: var(--bg-nav); backdrop-filter: blur(16px); } .hs { padding: 16px clamp(14px,2.5vw,28px); } .hs-n { font-weight: 700; font-size: clamp(1.1rem,1.7vw,1.5rem); margin-bottom: 4px; color: var(--text); } .hs-l { font-size: .62rem; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; } .hs-d { width: 1px; background: var(--border); } @media (max-width: 580px) { .hero-stats{grid-template-columns:repeat(2,1fr)} .hs-d:nth-child(4){display:none} } .scroll-hint { position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%); } .sh-ln { width: 1px; height: 46px; background: linear-gradient(to bottom,var(--text-2),transparent); animation: shd 2.5s ease-in-out infinite; } @keyframes shd { 0%{transform:scaleY(0);opacity:0;transform-origin:top} 45%{transform:scaleY(1);opacity:1;transform-origin:top} 46%{transform-origin:bottom} 100%{transform:scaleY(0);opacity:0;transform-origin:bottom} } /* ── Ticker ─────────────────────────────────────────────────── */ .ticker-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; user-select: none; background: var(--bg-alt); } .ticker-inner { display: flex; align-items: center; gap: 16px; white-space: nowrap; width: max-content; animation: tick 30s linear infinite; } .ticker-inner:hover { animation-play-state: paused; } .ticker-inner span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } [data-theme="dark"] .ticker-inner span { color: rgba(255,255,255,0.42); } .ticker-inner i { color: var(--border-2); font-style: normal; } [data-theme="dark"] .ticker-inner i { color: rgba(255,255,255,0.18); } @keyframes tick { from{transform:translateX(0)} to{transform:translateX(-25%)} } /* ── Sections ───────────────────────────────────────────────── */ .sec { padding: clamp(68px,10vw,128px) 0; } .sec-alt { background: var(--bg-alt); } .sec-lbl { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(14px,2vw,22px); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } [data-theme="dark"] .sec-lbl { color: rgba(255,255,255,0.45); } .sec-rule { width: 22px; height: 1px; background: var(--silver); opacity: .4; } .sec-title { font-weight: 700; font-size: clamp(2rem,4.8vw,4.6rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: clamp(12px,1.8vw,20px); color: var(--text); } .sec-title em { color: var(--text-3); font-style: normal; } .sec-desc { font-size: clamp(.875rem,1.2vw,.98rem); font-weight: 300; color: var(--text-3); line-height: 1.82; max-width: 480px; margin-bottom: clamp(44px,6vw,70px); } .grad-text { background: linear-gradient(120deg,var(--text) 0%,var(--text-3) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-style:normal; } /* ── Trust ──────────────────────────────────────────────────── */ .trust-sec { padding: clamp(28px,4vw,48px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); } .trust-label { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); text-align: center; margin-bottom: 26px; } [data-theme="dark"] .trust-label { color: rgba(255,255,255,0.42); } .trust-logos { display: flex; align-items: center; justify-content: center; gap: clamp(18px,4vw,52px); flex-wrap: wrap; } .t-logo { font-weight: 700; font-size: clamp(.72rem,1.2vw,.95rem); letter-spacing: .18em; color: var(--text-3); transition: color .3s; } [data-theme="dark"] .t-logo { color: rgba(255,255,255,0.4); } .t-logo span { font-weight: 300; } .t-logo:hover { color: var(--text-2); } [data-theme="dark"] .t-logo:hover { color: rgba(255,255,255,0.75); } /* ── Pain ───────────────────────────────────────────────────── */ .pain-head { margin-bottom: clamp(36px,5vw,60px); } .pain-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: clamp(32px,4vw,48px); } @media (max-width: 720px) { .pain-grid { grid-template-columns: 1fr; } } .pain-card { padding: clamp(22px,3vw,34px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; transition: border-color .4s, transform .35s; } .pain-card:hover { border-color: var(--border-2); transform: translateY(-3px); } .pain-ico { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--silver); margin-bottom: 16px; } .pain-card h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 9px; color: var(--text); } .pain-card p { font-size: .865rem; font-weight: 300; color: var(--text-3); line-height: 1.75; margin-bottom: 16px; } .pain-result { display: flex; align-items: center; gap: 9px; } .pr-before { font-size: .68rem; color: var(--text-4); text-decoration: line-through; font-family: 'JetBrains Mono',monospace; } .pr-after { font-size: .68rem; color: var(--accent); font-family: 'JetBrains Mono',monospace; font-weight: 500; } [data-theme="__removed__"] .pr-after { color: #1a3050; } .pain-cta { text-align: center; } /* ── Ecosystem ──────────────────────────────────────────────── */ .eco-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; } @media (max-width: 860px) { .eco-grid { grid-template-columns: 1fr; } } .eco-card { padding: clamp(24px,3vw,38px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; position: relative; overflow: hidden; transition: border-color .4s, transform .4s; } .eco-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.025) 0%,transparent 50%); opacity:0; transition:opacity .4s; pointer-events:none; } .eco-card:hover { border-color: var(--border-2); transform: translateY(-4px); } .eco-card:hover::before { opacity: 1; } .eco-featured { border-color: var(--border-2); } .eco-popular { position: absolute; top: 14px; right: 14px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 100px; padding: 3px 9px; } [data-theme="__removed__"] .eco-popular { color: #1a3050; background: rgba(26,48,80,0.07); border-color: rgba(26,48,80,0.2); } .ec-n { font-size: 2.8rem; font-weight: 300; color: var(--border-2); line-height: 1; margin-bottom: 14px; } .ec-ico { color: var(--silver); margin-bottom: 14px; } .eco-card h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; color: var(--text); } .eco-card p { font-size: .865rem; font-weight: 300; color: var(--text-3); line-height: 1.75; margin-bottom: 14px; } .ec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; } .ec-tags span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 100px; font-size: 9px; color: var(--text-3); letter-spacing: .06em; } .ec-result { display: flex; align-items: center; gap: 6px; font-size: .65rem; color: var(--accent); letter-spacing: .04em; } [data-theme="__removed__"] .ec-result { color: #1a3050; } /* ── Process ────────────────────────────────────────────────── */ .proc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-bottom: clamp(32px,4vw,48px); } @media (max-width: 860px) { .proc-grid { grid-template-columns: 1fr 1fr; gap: 22px; } } @media (max-width: 480px) { .proc-grid { grid-template-columns: 1fr; } } .proc-step { padding: 0 clamp(14px,2.5vw,26px); } .proc-step:first-child { padding-left: 0; } .proc-step:last-child { padding-right: 0; } .ps-num { font-size: .62rem; letter-spacing: .18em; color: var(--accent); margin-bottom: 10px; opacity: .8; } [data-theme="__removed__"] .ps-num { color: #1a3050; opacity: 1; } .ps-line { height: 1px; background: linear-gradient(to right,var(--border-2),var(--border)); margin-bottom: 18px; position: relative; transform-origin: left center; } .ps-line::before { content:''; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--silver); opacity:.4; } .ps-line.last { background: var(--border); } .proc-step h3 { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 9px; color: var(--text); } .proc-step p { font-size: .82rem; font-weight: 300; color: var(--text-3); line-height: 1.75; margin-bottom: 12px; } .ps-time { font-size: .62rem; letter-spacing: .1em; color: var(--text-4); } .guarantee-box { display: flex; align-items: flex-start; gap: 18px; padding: clamp(18px,3vw,30px); background: rgba(251,146,60,0.05); border: 1px solid rgba(251,146,60,0.18); border-radius: 14px; } [data-theme="__removed__"] .guarantee-box { background: rgba(26,48,80,0.04); border-color: rgba(26,48,80,0.14); } .gb-ico { width: 42px; height: 42px; border: 1px solid rgba(251,146,60,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); } [data-theme="__removed__"] .gb-ico { border-color: rgba(26,48,80,0.22); color: #1a3050; } .gb-text { font-size: .875rem; font-weight: 300; color: var(--text-3); line-height: 1.75; } .gb-text strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 4px; font-size: .92rem; } /* ── Work ───────────────────────────────────────────────────── */ .work-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; } .work-sub { font-size: .875rem; font-weight: 300; color: var(--text-4); max-width: 220px; line-height: 1.7; } .feat { margin: clamp(32px,5vw,56px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .feat-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,60px); align-items: center; padding: clamp(28px,4vw,56px) 0; } @media (max-width: 840px) { .feat-inner { grid-template-columns: 1fr; } } .feat-mock { border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; background: var(--bg-alt); box-shadow: 0 24px 56px var(--shadow); } .brow { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--bg-card); border-bottom: 1px solid var(--border); } .brow-dots { display: flex; gap: 5px; } .brow-dots span { width: 7px; height: 7px; border-radius: 50%; } .brow-dots .r{background:#ff5f57} .brow-dots .y{background:#febc2e} .brow-dots .g{background:#28c840} .brow-url { flex:1; text-align:center; font-size:9px; color:var(--text-4); letter-spacing:.05em; } .brow-body { display: flex; height: 248px; } .bb-sidebar { width: 42px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0; } .bbs-mark { width: 20px; height: 20px; background: var(--border-2); border-radius: 5px; margin-bottom: 6px; } .bbs-i { width: 20px; height: 4px; background: var(--border); border-radius: 3px; } .bbs-i.active { background: linear-gradient(90deg,rgba(230,67,127,0.6),rgba(251,146,60,0.6)); } .bb-main { flex: 1; padding: 11px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; } .bbm-top { display: flex; justify-content: space-between; align-items: center; } .bbm-title { width: 90px; height: 6px; background: var(--border-2); border-radius: 3px; } .bbm-acts { display: flex; gap: 5px; } .bbm-acts div { width: 24px; height: 6px; background: var(--border); border-radius: 3px; } .bbm-cards { display: flex; gap: 6px; } .bmc { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 6px; } .bmc-l { height: 4px; width: 65%; background: var(--border-2); border-radius: 2px; margin-bottom: 6px; } .bmc-v { height: 11px; width: 80%; border-radius: 2px; } .bmc-v.gr{background:rgba(74,222,128,0.28)} .bmc-v.bl{background:rgba(96,165,250,0.28)} .bmc-v.am{background:rgba(251,191,36,0.28)} .bmc-v.pu{background:rgba(167,139,250,0.28)} .bbm-chart { flex: 1; } .bbm-chart svg { width: 100%; height: 100%; display: block; } .bbm-bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; } .bbr { flex: 1; background: var(--border-2); border-radius: 2px 2px 0 0; } .bbr.hi { background: linear-gradient(180deg,rgba(251,146,60,0.55),rgba(230,67,127,0.35)); } .feat-tag { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border-radius: 100px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--bg-card); color: var(--silver); border: 1px solid var(--border-2); } .feat-title { font-size: clamp(1.15rem,2vw,1.7rem); font-weight: 700; line-height: 1.22; letter-spacing: -.03em; margin-bottom: 11px; color: var(--text); } .feat-desc { font-size: .875rem; font-weight: 300; color: var(--text-3); line-height: 1.8; margin-bottom: 15px; } .feat-techs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .feat-techs span { padding: 3px 10px; border: 1px solid var(--border); border-radius: 100px; font-size: 9px; color: var(--text-3); letter-spacing: .06em; } .feat-kpis { display: flex; gap: 22px; } .fkv { font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 3px; color: var(--text); } .fkl { font-size: 8.5px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; } /* ── Project grid ────────────────────────────────────────────── */ .proj-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin-top: clamp(30px,4vw,50px); } .pc-full { grid-column: 1 / -1; } @media (max-width: 640px) { .proj-grid { grid-template-columns: 1fr; } } .pc { background: var(--bg-card); border: 1px solid rgb(41,41,41); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 56px var(--shadow); transition: border-color .4s, transform .35s; } .pc:hover { border-color: rgb(70,70,70); transform: translateY(-3px); } .pc-prev { border-bottom: 1px solid var(--border); overflow: hidden; position: relative; } .pc-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: relative; z-index: 5; } .pc-bar-title { flex: 1; text-align: center; font-size: 9px; letter-spacing: .09em; color: var(--text-3); } .pc-shot { aspect-ratio: 16/9; position: relative; overflow: hidden; background: #080808; } .prev-dots { display: flex; gap: 5px; flex-shrink: 0; } .prev-dots span { width: 6px; height: 6px; border-radius: 50%; } .prev-dots span:nth-child(1) { background: #ff5f57; } .prev-dots span:nth-child(2) { background: #febc2e; } .prev-dots span:nth-child(3) { background: #28c840; } /* ── Background com zoom e crossfade no hover ─────────────── */ .pc-bg { position: absolute; inset: 0; background-size: 200%; background-position: top left; background-repeat: no-repeat; transition: opacity .5s ease; filter: contrast(1.08) brightness(1.02); } .pc:not(.pc-cta) { cursor: zoom-in; } .pc-bg-1 { opacity: 1; z-index: 1; } .pc-bg-2 { opacity: 0; z-index: 2; } .pc:hover .pc-bg-2 { opacity: 1; } .orc { background: linear-gradient(135deg,#06090f 0%,#070d0a 100%); } .hd { background: linear-gradient(135deg,#0a0609 0%,#09060f 100%); } .lds { background: linear-gradient(135deg,#060a0e 0%,#08100a 100%); } .erp { background: linear-gradient(135deg,#0a0807 0%,#08060b 100%); } .trm { background: #050505; } .pc-prev-mock { padding: 10px; display: flex; flex-direction: column; } .sched { background: #080808; } /* Mockup: Portal de Agendamento (WP Craft) */ .sched-mk { flex: 1; display: flex; overflow: hidden; } .sched-sb { width: 52px; background: rgba(255,255,255,0.025); border-right: 1px solid rgba(255,255,255,0.05); padding: 8px 6px; display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; } .ssb-brand { font-size: 7px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,0.85); } .ssb-lbl { font-size: 5.5px; letter-spacing: .15em; color: rgba(255,255,255,0.25); margin-bottom: 4px; } .ssb-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 3px 0; } .ssb-item { font-size: 5.5px; color: rgba(255,255,255,0.28); letter-spacing: .04em; padding: 2px 3px; border-radius: 2px; } .ssb-item.active { color: rgba(255,255,255,0.55); } .ssb-item.on { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.07); } .sched-main { flex: 1; padding: 8px 9px; overflow: hidden; } .sm-hd { font-size: 7.5px; font-weight: 600; color: rgba(255,255,255,0.82); letter-spacing: .04em; margin-bottom: 5px; } .sm-tabs { display: flex; gap: 3px; margin-bottom: 6px; } .smt { font-size: 5.5px; padding: 2px 5px; border-radius: 2px; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); letter-spacing: .06em; } .smt.active { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.1); } .sm-tbl { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; } .sm-th { display: flex; gap: 4px; padding: 3px 5px; background: rgba(255,255,255,0.04); font-size: 5px; color: rgba(255,255,255,0.3); letter-spacing: .08em; } .sm-th span:first-child { flex: 2; } .sm-th span:nth-child(2) { flex: 2; } .sm-th span:last-child { flex: 1.2; text-align: right; } .sm-row { display: flex; align-items: center; gap: 4px; padding: 4px 5px; border-top: 1px solid rgba(255,255,255,0.04); } .smr-name { flex: 2; height: 3.5px; background: rgba(255,255,255,0.18); border-radius: 2px; } .smr-name.sm2 { width: 70%; background: rgba(255,255,255,0.13); } .smr-name.sm3 { width: 55%; background: rgba(255,255,255,0.11); } .smr-svc { flex: 2; height: 3.5px; background: rgba(255,255,255,0.1); border-radius: 2px; } .smr-svc.sm2 { background: rgba(255,255,255,0.08); } .smr-svc.sm3 { background: rgba(255,255,255,0.07); } .smr-badge { flex: 1.2; text-align: right; font-size: 5px; padding: 1.5px 3px; border-radius: 2px; letter-spacing: .05em; white-space: nowrap; } .smr-badge.done { background: rgba(74,222,128,0.1); color: rgba(74,222,128,0.75); } .smr-badge.pend { background: rgba(251,146,60,0.1); color: rgba(251,146,60,0.75); } .smr-badge.cancel { background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.7); } [data-theme="__removed__"] .orc,[data-theme="__removed__"] .hd,[data-theme="__removed__"] .lds,[data-theme="__removed__"] .erp,[data-theme="__removed__"] .trm { filter: brightness(1.3) contrast(0.85); } /* Mocks — compact versions */ .doc-mk{flex:1} .dm-head{height:13px;background:rgba(255,255,255,0.06);border-radius:3px;margin-bottom:6px} .dm-body{display:flex;flex-direction:column;gap:3px;margin-bottom:6px} .dm-ln{height:3px;background:rgba(255,255,255,0.04);border-radius:2px} .dm-ln.w100{width:100%} .dm-ln.w60{width:60%} .dm-ln.w80{width:80%} .dm-tbl{border:1px solid rgba(255,255,255,0.04);border-radius:4px;overflow:hidden;margin-bottom:6px} .dmt-h,.dmt-r{height:9px;border-bottom:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02)} .dmt-h{background:rgba(255,255,255,0.05)} .dm-foot{display:flex;justify-content:space-between;align-items:center} .dmf-lbl{width:36px;height:3px;background:rgba(255,255,255,0.04);border-radius:2px} .dmf-val{width:48px;height:8px;border-radius:2px} .dmf-val.gn{background:rgba(74,222,128,0.26)} .hd-mk{flex:1} .hd-hd{height:12px;background:rgba(255,255,255,0.05);border-radius:3px;margin-bottom:6px} .hd-row{display:flex;align-items:center;gap:6px;margin-bottom:5px} .hd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .hd-dot.gn{background:rgba(74,222,128,0.7)} .hd-dot.ye{background:rgba(250,204,21,0.7)} .hd-dot.or{background:rgba(251,146,60,0.7)} .hd-dot.gr{background:rgba(255,255,255,0.18)} .hd-ln{flex:1;height:4px;background:rgba(255,255,255,0.04);border-radius:2px} .hd-badge{font-size:7px;padding:1.5px 5px;border-radius:3px;letter-spacing:.04em;white-space:nowrap} .hd-badge.open{background:rgba(74,222,128,0.1);color:rgba(74,222,128,0.7)} .hd-badge.pend{background:rgba(250,204,21,0.09);color:rgba(250,204,21,0.65)} .hd-badge.esc{background:rgba(251,146,60,0.09);color:rgba(251,146,60,0.65)} .hd-badge.done{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.28)} .lds-mk{flex:1} .lds-srch{font-size:7.5px;color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.035);border-radius:4px;padding:3.5px 7px;margin-bottom:6px;letter-spacing:.04em} .lds-row{display:flex;align-items:center;gap:5px;margin-bottom:4px} .lds-av{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,0.06);flex-shrink:0} .lds-ln{flex:1;height:3.5px;background:rgba(255,255,255,0.04);border-radius:2px} .lds-pill{font-size:7px;padding:1.5px 5px;border-radius:3px;background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.24);letter-spacing:.04em} .lds-pill.new{background:rgba(74,222,128,0.09);color:rgba(74,222,128,0.65)} .lds-prog{height:2px;background:rgba(255,255,255,0.04);border-radius:2px;margin-top:5px} .lds-fill{height:100%;width:60%;background:rgba(74,222,128,0.4);border-radius:2px} .erp-mk{flex:1;display:flex;flex-direction:column} .erp-nav{display:flex;gap:6px;margin-bottom:8px} .en{height:4px;width:24px;background:rgba(255,255,255,0.045);border-radius:2px} .en.active{background:rgba(96,165,250,0.32)} .erp-body{flex:1;display:flex;gap:8px} .erp-pie{display:flex;align-items:center;gap:6px} .pie-c{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:conic-gradient(rgba(96,165,250,0.48) 0% 38%,rgba(74,222,128,0.38) 38% 62%,rgba(251,146,60,0.38) 62% 100%)} .pie-lg{display:flex;flex-direction:column;gap:3px} .pl{height:3.5px;width:26px;background:rgba(255,255,255,0.055);border-radius:2px} .erp-tbl{flex:1} .et{height:8px;background:rgba(255,255,255,0.025);border-radius:2px;margin-bottom:4px} .et.head{background:rgba(255,255,255,0.055)} .trm-mk{flex:1;font-size:8.5px;line-height:1.85} .tl{color:rgba(255,255,255,0.26)} .tl.out{padding-left:8px} .tp{color:rgba(74,222,128,0.6);margin-right:4px} .tok{color:rgba(74,222,128,0.52);margin-right:3px} .tup{color:rgba(74,222,128,0.42)} .cur{animation:bln 1.1s step-end infinite} @keyframes bln{0%,100%{opacity:1}50%{opacity:0}} .pc-info{padding:15px 17px} .pc-gh-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .62rem; color: var(--text-3); letter-spacing: .06em; transition: color .2s; } .pc-gh-link:hover { color: var(--text); } .pc-tag{display:inline-block;margin-bottom:8px;padding:2.5px 9px;border-radius:100px;font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:var(--bg-card);color:var(--silver);border:1px solid var(--border-2)} .pc-tag.craft{background:rgba(96,165,250,0.07);color:rgba(130,170,255,0.8);border-color:rgba(96,165,250,0.13)} .pc-tag.soft{background:rgba(74,222,128,0.06);color:rgba(80,190,120,0.8);border-color:rgba(74,222,128,0.12)} .pc-tag.infra{background:rgba(251,146,60,0.06);color:rgba(255,165,95,0.8);border-color:rgba(251,146,60,0.12)} .pc-info h4{font-size:.9rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:var(--text)} .pc-info p{font-size:.78rem;font-weight:300;color:var(--text-3);line-height:1.7;margin-bottom:11px} .pc-tech{display:flex;flex-wrap:wrap;gap:5px} .pc-tech span{padding:2.5px 8px;border:1px solid var(--border);border-radius:100px;font-size:8.5px;color:var(--text-3);letter-spacing:.06em} .pc-cta{display:flex;align-items:center;justify-content:center;min-height:235px;cursor:pointer} .cta-card-body{text-align:center;padding:22px} .cta-card-ico{margin:0 auto 15px;color:var(--text)} .cta-card-body p{font-size:.82rem;font-weight:300;color:var(--text-3);line-height:1.7;margin-bottom:15px} .cta-card-link{font-size:.88rem;font-weight:700;color:var(--text-3);letter-spacing:-.01em;transition:color .25s} .cta-card-link:hover{color:var(--text)} /* ── Overlay Dribbble-style ──────────────────────────────────── */ .pc-overlay { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.78); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; transition: opacity .32s ease; } .pc:hover .pc-overlay { opacity: 1; } .po-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .po-tags span { padding: 4px 12px; border-radius: 100px; border: 1px solid rgba(255,255,255,0.14); font-size: 9px; color: rgba(255,255,255,0.65); letter-spacing: .08em; } .po-link { display: inline-flex; align-items: center; gap: 7px; font-size: .63rem; letter-spacing: .06em; color: var(--text); padding: 7px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); transition: background .2s, border-color .2s; } .po-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); } /* ── Meta abaixo do card ─────────────────────────────────────── */ .pc-meta { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 5px; } .pc-meta .pc-tag { margin-bottom: 2px; } .pc-meta h4 { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.3; margin: 0; } .pc-desc { font-size: .78rem; color: var(--text-3); line-height: 1.55; margin: 0; } .pc-stats { display: flex; gap: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .pc-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; padding-right: 14px; } .pc-stat + .pc-stat { padding-left: 14px; padding-right: 0; border-left: 1px solid var(--border); } .pc-stat strong { font-size: .92rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); line-height: 1; } .pc-stat span { font-size: .68rem; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; } /* ── Featured project card ───────────────────────────────────── */ .pc-feat { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; } .pc-feat .pc-prev { border-bottom: none; border-right: 1px solid rgb(41,41,41); display: flex; flex-direction: column; } .pc-feat-rev { grid-template-columns: 1fr 1.15fr; } .pc-feat-rev .pc-prev { border-right: none; border-left: 1px solid rgb(41,41,41); } .pc-feat .pc-shot { aspect-ratio: unset; flex: 1; min-height: 300px; } .pc-feat .pc-bg { background-size: 170%; background-position: center top; } .pc-prev-img .pc-overlay { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.78); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; transition: opacity .32s ease; } .pc-feat:hover .pc-overlay { opacity: 1; } .pc-feat .pc-meta { justify-content: center; padding: clamp(28px,3vw,48px) clamp(28px,4vw,52px); gap: 10px; } .pc-feat .pc-meta h4 { font-size: clamp(1.2rem,2vw,1.6rem); } .pc-feat .pc-desc { font-size: .82rem; } .pc-feat .pc-stats { margin-top: 18px; padding-top: 18px; } .pc-feat .pc-stat strong { font-size: 1.25rem; } .pc-feat-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-family: var(--mono); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 9px; width: fit-content; margin-bottom: 4px; opacity: .9; } .pc-feat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .pc-feat-tag { font-size: .67rem; color: var(--text-3); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 4px; padding: 3px 9px; font-family: var(--mono); } .pc-feat-gh { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; color: var(--text-2); font-family: var(--mono); margin-top: 6px; transition: color .2s; text-decoration: none; } .pc-feat-gh:hover { color: var(--text); } @media (max-width: 768px) { .pc-feat { grid-template-columns: 1fr; } .pc-feat .pc-prev { border-right: none; border-bottom: 1px solid rgb(41,41,41); } .pc-feat .pc-shot { min-height: 200px; } } /* ── Testimonials ────────────────────────────────────────────── */ .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: clamp(28px,4vw,48px); } @media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } } .testi-card { padding: clamp(22px,3vw,34px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; gap: 16px; transition: border-color .4s, transform .35s; } .testi-card:hover { border-color: var(--border-2); transform: translateY(-3px); } .tc-header { display: flex; align-items: center; justify-content: space-between; } .tc-stars { color: rgba(255,190,40,0.8); font-size: .82rem; letter-spacing: .1em; } .tc-verified { display: flex; align-items: center; gap: 5px; font-size: .6rem; letter-spacing: .08em; color: #4ade80; opacity: .8; } [data-theme="__removed__"] .tc-verified { color: #16a34a; } .tc-quote { font-size: .875rem; font-weight: 300; color: var(--text-2); line-height: 1.8; flex: 1; } .tc-quote strong { color: var(--text); font-weight: 600; } .tc-author { display: flex; align-items: center; gap: 13px; } .tc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-gradient); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: #fff; flex-shrink: 0; } .tc-name { font-size: .86rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; color: var(--text); } .tc-role { font-size: .65rem; color: var(--text-3); letter-spacing: .06em; } .tc-date { font-size: .6rem; color: var(--text-4); letter-spacing: .06em; margin-top: 3px; } .testi-note { font-size: .6rem; color: var(--text-4); letter-spacing: .06em; text-align: center; margin-top: 22px; } /* ── Final CTA ───────────────────────────────────────────────── */ .fcta-sec { background: var(--bg); position: relative; overflow: hidden; } .fcta-sec::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(74,222,128,0.04) 0%,transparent 70%); pointer-events:none; } [data-theme="__removed__"] .fcta-sec::before { background: radial-gradient(ellipse 60% 60% at 50% 50%,rgba(0,0,0,0.02) 0%,transparent 70%); } .fcta-sec::after { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; } .fcta-inner { text-align: center; max-width: 680px; margin: 0 auto; position: relative; z-index: 1; } .fcta-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 6px 14px; border: 1px solid var(--accent-border); border-radius: 100px; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-bg); } [data-theme="__removed__"] .fcta-badge { color: var(--text-2); } .fcta-title { font-weight: 700; font-size: clamp(2rem,4.8vw,4.8rem); line-height: 1.0; letter-spacing: -.04em; margin-bottom: 18px; color: var(--text); } .fcta-accent { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; } [data-theme="__removed__"] .fcta-accent { background: linear-gradient(135deg,#1a3050,#2a5298); -webkit-background-clip: text; background-clip: text; } .fcta-sub { font-size: clamp(.875rem,1.2vw,.98rem); font-weight: 300; color: var(--text-3); line-height: 1.8; max-width: 500px; margin: 0 auto 26px; } .fcta-checks { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 32px; } .fcta-checks span { display: flex; align-items: center; gap: 7px; font-size: .68rem; color: var(--text-3); letter-spacing: .06em; } .fcta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 34px; border-radius: 12px; margin-bottom: 18px; font-size: .88rem; font-weight: 700; letter-spacing: .02em; background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text); backdrop-filter: blur(10px); transition: background .3s, border-color .3s; will-change: transform; position: relative; overflow: hidden; } .fcta-btn::before { content:''; position:absolute; inset:0; background: var(--accent-gradient); opacity: 0; transition: opacity .3s; } .fcta-btn:hover::before { opacity: .15; } .fcta-btn > * { position: relative; z-index: 1; } .fcta-urgency { font-size: .66rem; color: var(--text-3); letter-spacing: .08em; display: flex; align-items: center; justify-content: center; gap: 8px; } [data-theme="dark"] .fcta-urgency { color: rgba(255,255,255,0.48); } .fcta-urgency strong { color: var(--text-2); } [data-theme="dark"] .fcta-urgency strong { color: rgba(255,255,255,0.82); } [data-theme="__removed__"] .fcta-urgency .ub-dot { background: #16a34a; } /* ── FAQ ─────────────────────────────────────────────────────── */ .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: clamp(36px,5vw,56px); } @media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:first-child, .faq-item:nth-child(2) { border-top: 1px solid var(--border); } @media (max-width: 768px) { .faq-item:nth-child(2) { border-top: none; } } .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; text-align: left; color: var(--text); font-size: .95rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; transition: color .2s; } .faq-q:hover { color: var(--accent); } .faq-icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; border: 1px solid var(--border); border-radius: 50%; transition: border-color .3s, background .3s; } .faq-icon span { position: absolute; top: 50%; left: 50%; background: var(--text-2); transition: transform .35s cubic-bezier(0.22,1,0.36,1), opacity .25s, background .2s; } .faq-icon span:nth-child(1) { width: 10px; height: 1.5px; transform: translate(-50%,-50%); } .faq-icon span:nth-child(2) { width: 1.5px; height: 10px; transform: translate(-50%,-50%); } .faq-item.open .faq-icon { border-color: var(--accent); background: rgba(249,115,22,.08); } .faq-item.open .faq-icon span { background: var(--accent); } .faq-item.open .faq-icon span:nth-child(2) { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; } .faq-item.open .faq-q { color: var(--text); } .faq-body { overflow: hidden; max-height: 0; transition: max-height .42s cubic-bezier(0.22,1,0.36,1); } .faq-body p { padding-bottom: 22px; font-size: .85rem; color: var(--text-2); line-height: 1.7; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity .3s ease .05s, transform .35s ease .05s; } .faq-item.open .faq-body p { opacity: 1; transform: translateY(0); } /* ── Contact ────────────────────────────────────────────────── */ .ct-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px,6vw,84px); align-items: start; } @media (max-width: 800px) { .ct-grid { grid-template-columns: 1fr; } } .ct-sub { font-size: .875rem; font-weight: 300; color: var(--text-3); line-height: 1.8; margin-bottom: 26px; max-width: 300px; } .ct-email { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--text-3); letter-spacing: .04em; margin-bottom: 26px; } .ct-trust { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); } .ct-trust-item { display: flex; align-items: center; gap: 8px; font-size: .66rem; color: var(--text-3); letter-spacing: .06em; } [data-theme="dark"] .ct-trust-item { color: rgba(255,255,255,0.5); } #ct-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: clamp(20px,3.5vw,36px); } .f2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 460px) { .f2col { grid-template-columns: 1fr; } } .fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .fg label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } [data-theme="dark"] .fg label { color: rgba(255,255,255,0.52); } .fg input,.fg select,.fg textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; color: var(--text); font-size: .85rem; font-family: 'DM Sans',sans-serif; font-weight: 300; outline: none; -webkit-appearance: none; transition: border-color .25s, background .25s; } .fg input::placeholder,.fg textarea::placeholder { color: var(--text-3); } [data-theme="dark"] .fg input::placeholder, [data-theme="dark"] .fg textarea::placeholder { color: rgba(255,255,255,0.28); } .fg input:focus,.fg select:focus,.fg textarea:focus { border-color: var(--border-2); } .fg select { cursor: pointer; color: var(--text-3); } .fg select option { background: var(--bg-alt); color: var(--text); } .fg textarea { resize: vertical; min-height: 100px; } .sub-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: 10px; cursor: pointer; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--accent-text); background: var(--accent-bg); border: 1px solid var(--accent-border); transition: background .25s, border-color .25s; will-change: transform; } .sub-btn:hover { background: var(--accent-border); } .form-disclaimer { font-size: .6rem; color: var(--text-4); letter-spacing: .06em; text-align: center; margin-top: 10px; } .form-success { text-align: center; padding: 36px 16px; } .fs-chk { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(251,146,60,0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--accent); } [data-theme="__removed__"] .fs-chk { border-color: rgba(26,48,80,0.25); color: #1a3050; } .form-success h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; color: var(--text); } .form-success p { font-size: .82rem; font-weight: 300; color: var(--text-3); } /* ── Hero Dashboard Panel ───────────────────────────────────── */ .hvd-panel { border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; background: #0b0b0b; box-shadow: 0 28px 72px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); } [data-theme="__removed__"] .hvd-panel { background: #111111; box-shadow: 0 20px 56px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); } /* Bar */ .hvd-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(255,255,255,0.025); border-bottom: 1px solid rgba(255,255,255,0.06); } .hvd-dots { display: flex; gap: 5px; } .hdd { width: 8px; height: 8px; border-radius: 50%; } .hdd.r { background: #ff5f57; } .hdd.y { background: #febc2e; } .hdd.g { background: #28c840; } .hvd-title { flex: 1; text-align: center; font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: .06em; } .hvd-live { display: flex; align-items: center; gap: 5px; font-size: 9px; color: rgba(251,146,60,0.8); letter-spacing: .1em; } .hvd-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fb923c; box-shadow: 0 0 6px rgba(251,146,60,0.6); animation: pdot 2s infinite; } /* Body */ .hvd-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; } /* Metrics row */ .hvd-metrics { display: flex; gap: 10px; } .hvd-mc { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px 12px; } .hvd-mc-lbl { font-size: 8px; color: rgba(255,255,255,0.3); letter-spacing: .12em; margin-bottom: 4px; } .hvd-mc-val { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 7px; } .hvd-mc-bar { height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; } .hvd-mc-fill { height: 100%; background: linear-gradient(90deg, #e6437f, #fb923c); border-radius: 2px; } /* Systems */ .hvd-systems { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 10px 12px; } .hvd-sys-hd { font-size: 8px; color: rgba(255,255,255,0.25); letter-spacing: .14em; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 6px; } .hvd-sys-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .sys-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .sys-dot.on { background: #fb923c; box-shadow: 0 0 5px rgba(251,146,60,0.5); animation: pdot 2.5s ease-in-out infinite; } .sys-name { font-size: 10px; color: rgba(255,255,255,0.75); font-weight: 500; min-width: 56px; } .sys-tag { font-size: 9px; color: rgba(255,255,255,0.2); flex: 1; } .sys-status { font-size: 9px; color: rgba(251,146,60,0.8); } /* Chart */ .hvd-chart-wrap { } .hvd-chart-lbl { font-size: 8px; color: rgba(255,255,255,0.2); letter-spacing: .12em; margin-bottom: 6px; } .hvd-chart-svg { width: 100%; height: 52px; display: block; } /* KPIs */ .hvd-kpis { display: flex; align-items: center; gap: 0; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; } .hvd-kpi-item { flex: 1; text-align: center; } .hvd-kpi-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.06); } .hvdk-v { font-size: .95rem; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 2px; } .hvdk-l { font-size: 8px; color: rgba(255,255,255,0.25); letter-spacing: .1em; text-transform: uppercase; } /* ── Hero stat sub-text (/5) ─────────────────────────────────── */ .hs-sub { font-size: .55em; color: var(--text-3); font-weight: 400; } /* ── Footer ─────────────────────────────────────────────────── */ #ft { padding: clamp(18px,2.5vw,34px) 0; border-top: 1px solid var(--border); background: var(--bg); } .ft-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ft-brand { display: flex; flex-direction: column; gap: 4px; } .ft-logo { font-weight: 700; font-size: .9rem; letter-spacing: .2em; color: var(--text); } .ft-logo span { color: var(--silver); } .ft-location { font-size: .62rem; color: var(--text-3); letter-spacing: .06em; margin-top: 3px; } .ft-copy { font-size: .6rem; color: var(--text-4); letter-spacing: .06em; } .ft-links { display: flex; gap: 16px; align-items: center; } .ft-links a { font-size: .62rem; color: var(--text-4); letter-spacing: .1em; text-transform: uppercase; transition: color .25s; } .ft-links a:hover { color: var(--text-2); } .ft-social { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .ft-social-link { display: flex; align-items: center; gap: 6px; font-size: .62rem; color: var(--text-3); letter-spacing: .06em; transition: color .25s; } .ft-social-link:hover { color: var(--accent); } @media (max-width: 580px) { .ft-inner { flex-direction: column; gap: 16px; } .ft-social { align-items: flex-start; } } .ft-privacy-link { background: none; border: none; cursor: pointer; font-size: .62rem; color: var(--text-4); letter-spacing: .1em; text-transform: uppercase; transition: color .25s; padding: 0; font-family: inherit; } .ft-privacy-link:hover { color: var(--text-2); } /* ── Email CTA button (substituto do WhatsApp) ──────────────── */ .email-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; background: var(--accent-gradient); color: #fff; border-radius: 10px; font-size: .82rem; font-weight: 600; letter-spacing: -.01em; transition: opacity .25s, transform .2s; } .email-cta-btn:hover { opacity: .88; transform: translateY(-1px); } /* ── Quem Somos ──────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,96px); align-items: start; margin-top: clamp(32px,5vw,56px); } @media (max-width: 840px) { .about-grid { grid-template-columns: 1fr; } } .about-desc { font-size: .9rem; font-weight: 300; color: var(--text-2); line-height: 1.8; margin-bottom: 14px; } .about-stat-row { display: flex; align-items: center; gap: 0; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); } .about-stat { flex: 1; text-align: center; } .about-stat-sep { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } .as-val { font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--text); line-height: 1.2; } .as-lbl { font-size: .6rem; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; } .about-pillars { display: flex; flex-direction: column; gap: 0; } .ap-item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border); } .ap-item:first-child { border-top: 1px solid var(--border); } .ap-n { font-size: .7rem; color: var(--text-4); letter-spacing: .12em; min-width: 28px; padding-top: 3px; } .ap-body h4 { font-size: .92rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-bottom: 6px; } .ap-body p { font-size: .8rem; font-weight: 300; color: var(--text-3); line-height: 1.7; } /* ── Modal LGPD ──────────────────────────────────────────────── */ .prv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s; } .prv-overlay.open { opacity: 1; pointer-events: all; } .prv-box { background: var(--bg-alt); border: 1px solid var(--border-2); border-radius: 16px; width: 100%; max-width: 560px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px); transition: transform .3s; } .prv-overlay.open .prv-box { transform: translateY(0); } .prv-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .prv-header h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .prv-close { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-3); padding: 6px; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s; } .prv-close:hover { color: var(--text); border-color: var(--border-2); } .prv-body { overflow-y: auto; padding: 24px; font-size: .72rem; color: var(--text-3); line-height: 1.8; letter-spacing: .02em; } .prv-body h4 { font-size: .75rem; font-weight: 600; color: var(--text-2); letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 6px; } .prv-body h4:first-of-type { margin-top: 8px; } .prv-body p { margin-bottom: 8px; } .prv-body strong { color: var(--text); font-weight: 500; } /* ── Privacy link no formulário ─────────────────────────────── */ .privacy-link { background: none; border: none; cursor: pointer; color: var(--accent); font-size: inherit; font-family: inherit; letter-spacing: inherit; padding: 0; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .privacy-link:hover { opacity: .8; } /* ============================================================ REFINAMENTOS VISUAIS v6 Inspirado em Linear (espaço, tipografia, minimalismo) e Stripe (números de impacto, cards, confiança) ============================================================ */ /* — Seções: muito mais respiro — */ .sec { padding: clamp(96px,9vw,168px) 0; } .trust-sec { padding: clamp(40px,5.5vw,68px) 0; } .container { padding-left: clamp(24px,4vw,64px); padding-right: clamp(24px,4vw,64px); max-width: 1720px; } /* — Tipografia: escala maior, tracking mais apertado (Linear) — */ .hero-h1 { font-size: clamp(2rem,4.6vw,6.2rem); letter-spacing: -.055em; line-height: .9; } .sec-title { font-size: clamp(2.4rem,6vw,6.4rem); letter-spacing: -.05em; line-height: .96; margin-bottom: clamp(18px,2.5vw,28px); } .sec-desc { font-size: clamp(.92rem,1.3vw,1.08rem); max-width: 560px; margin-bottom: clamp(56px,8vw,96px); line-height: 1.9; } .fcta-title { font-size: clamp(2.4rem,6vw,6rem); letter-spacing: -.05em; line-height: .96; } .fcta-sub { font-size: clamp(.9rem,1.2vw,1.02rem); line-height: 1.9; } .hero-sub { font-size: clamp(.9rem,1.3vw,1.05rem); line-height: 1.9; max-width: 460px; } /* — Stats bar: números de impacto estilo Stripe — */ .hs { padding: clamp(22px,3.5vw,34px) clamp(20px,3vw,40px); } .hs-n { font-size: clamp(2rem,3.5vw,3rem); letter-spacing: -.05em; margin-bottom: 7px; } .hs-l { font-size: .58rem; letter-spacing: .16em; } .hs-sub { font-size: .4em; font-weight: 400; opacity: .7; } /* — Botão primário: sólido e confiante (Stripe) — */ .btn-solid { background: var(--text); border-color: var(--text); color: var(--bg); padding: 14px 28px; font-size: .84rem; font-weight: 600; letter-spacing: -.01em; border-radius: 11px; } .btn-solid:hover { background: var(--silver); border-color: var(--silver); color: var(--bg); } .btn-ghost { padding: 14px 28px; font-size: .84rem; border-radius: 11px; } /* — CTA final: botão mais impactante — */ .fcta-btn { padding: 17px 38px; font-size: .92rem; font-weight: 700; border-radius: 13px; background: var(--text); border-color: var(--text); color: var(--bg); } .fcta-btn::before { display: none; } .fcta-btn:hover { opacity: .85; } /* — Grids de cards: mais espaço entre eles — */ .pain-grid { gap: 22px; } .eco-grid { gap: 22px; } .testi-grid { gap: 22px; margin-top: clamp(36px,5vw,60px); } .proj-grid { gap: clamp(40px,6vw,72px); margin-top: clamp(36px,5vw,56px); } /* — Cards: mais padding interno — */ .pain-card { padding: clamp(30px,4.5vw,50px); border-radius: 18px; } .eco-card { padding: clamp(30px,4.5vw,52px); border-radius: 18px; } .testi-card { padding: clamp(28px,4vw,44px); border-radius: 18px; gap: 20px; } .pc-info { padding: 18px 20px 20px; } #ct-form { border-radius: 18px; padding: clamp(24px,4vw,44px); } /* — Dark mode: bordas praticamente invisíveis, só background (Linear) — */ [data-theme="dark"] .pain-card, [data-theme="dark"] .eco-card, [data-theme="dark"] .testi-card, [data-theme="dark"] .pc { border-color: rgba(255,255,255,0.038); } [data-theme="dark"] .eco-featured { border-color: rgba(255,255,255,0.09); } [data-theme="dark"] #ct-form { border-color: rgba(255,255,255,0.05); } /* — Light mode: cards brancos com sombra sutil, sem borda (Stripe) — */ [data-theme="__removed__"] .pain-card, [data-theme="__removed__"] .eco-card, [data-theme="__removed__"] .testi-card, [data-theme="__removed__"] .pc { border-color: transparent; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 6px 24px rgba(0,0,0,0.06); } [data-theme="__removed__"] .eco-featured { border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 12px 40px rgba(0,0,0,0.05); } [data-theme="__removed__"] .pain-card:hover, [data-theme="__removed__"] .eco-card:hover, [data-theme="__removed__"] .testi-card:hover, [data-theme="__removed__"] .pc:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.09), 0 16px 48px rgba(0,0,0,0.07); transform: translateY(-4px); } [data-theme="__removed__"] #ct-form { border-color: rgba(0,0,0,0.07); box-shadow: 0 2px 12px rgba(0,0,0,0.05); } /* — Números ghost nos cards de serviço: mais ghost, mais impacto — */ .ec-n { font-size: clamp(3rem,5vw,5.5rem); letter-spacing: -.04em; } [data-theme="dark"] .ec-n { color: rgba(255,255,255,0.22); } [data-theme="__removed__"] .ec-n { color: rgba(0,0,0,0.06); } /* — Trust logos: mais respiro e presença (Stripe) — */ .trust-logos { gap: clamp(32px,6vw,88px); } .t-logo { font-size: clamp(.78rem,1.4vw,1.02rem); letter-spacing: .24em; } /* — Portfolio featured: título muito maior — */ .feat-title { font-size: clamp(1.6rem,3vw,2.8rem); letter-spacing: -.04em; line-height: 1.1; margin-bottom: 16px; } .feat-desc { font-size: .92rem; line-height: 1.85; } .feat-inner { padding: clamp(40px,5.5vw,80px) 0; gap: clamp(40px,6vw,88px); } .fkv { font-size: clamp(1.6rem,2.5vw,2.2rem); letter-spacing: -.04em; } /* — Processo: mais respiro entre steps — */ .proc-step { padding: 0 clamp(20px,4vw,44px); } .proc-step:first-child { padding-left: 0; } .proc-step:last-child { padding-right: 0; } .proc-step h3 { font-size: 1.02rem; } .guarantee-box { border-radius: 18px; padding: clamp(24px,4vw,42px); } /* — Section label: mais elegante — */ .sec-lbl { letter-spacing: .28em; margin-bottom: clamp(20px,3vw,32px); } .sec-rule { width: 30px; opacity: .28; } /* — About section: stat numbers maiores — */ .as-val { font-size: clamp(1.4rem,2.8vw,2rem); letter-spacing: -.04em; } .ap-item { padding: 28px 0; } .ap-body h4 { font-size: 1rem; letter-spacing: -.025em; margin-bottom: 8px; } .ap-body p { font-size: .84rem; line-height: 1.75; } /* — Hero eyebrow: badge visível mas sutil — */ .hero-badge { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text); font-size: .65rem; } /* — Nav CTA: mais sólido — */ .nav-cta { background: var(--text); border-color: var(--text); color: var(--bg); font-size: .65rem; font-weight: 600; letter-spacing: .08em; } .nav-cta:hover { background: var(--silver); border-color: var(--silver); color: var(--bg); } /* — Testimony quote: mais expressiva — */ .tc-quote { font-size: .9rem; line-height: 1.85; } /* — Testimonial nota de verificação — */ .testi-note { margin-top: 32px; } /* — Contact: grid mais harmonioso — */ .ct-grid { gap: clamp(48px,7vw,100px); } /* — Formulário: inputs com mais respiro — */ .fg input, .fg select, .fg textarea { padding: 13px 15px; font-size: .875rem; border-radius: 11px; } .fg { margin-bottom: 14px; } .f2col { gap: 14px; } /* — Email CTA button: mais robusto — */ .email-cta-btn { padding: 14px 24px; font-size: .86rem; border-radius: 11px; margin-bottom: 16px; } /* ── Progressive enhancement: oculto apenas quando JS está ativo ── */ .js .hero-eyebrow, .js .hero-foot { opacity: 0; transform: translateY(14px); } .js .hi { transform: translateY(105%); } .js #h-visual { opacity: 0; } .js .hero-stats { opacity: 0; transform: translateY(8px); } .js .scroll-hint { opacity: 0; } .js .reveal-up { opacity: 0; transform: translateY(34px); } /* ── prefers-reduced-motion: fallback CSS puro ────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal-up, .hero-eyebrow, .hero-foot, #h-stats, .scroll-hint, .hi { opacity: 1 !important; transform: none !important; } .ps-line { transform: none !important; } .ap-item { opacity: 1 !important; transform: none !important; } #loader { display: none !important; } #cursor, #cursor-dot { display: none !important; } } /* ============================================================ MOBILE — adaptações ≤ 768px / ≤ 480px Nenhuma regra abaixo afeta breakpoints acima de 768px. ============================================================ */ /* ── Image Modal (lightbox) ──────────────────────────────────── */ .img-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .img-modal.open { opacity: 1; pointer-events: all; } .im-wrap { transform: translateY(18px); transition: transform .35s cubic-bezier(0.22,1,0.36,1); } .img-modal.open .im-wrap { transform: translateY(0); } .im-img { display: block; max-width: 100%; max-height: 88vh; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 40px 100px rgba(0,0,0,0.8); image-rendering: auto; } .im-close { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: background .2s, color .2s; cursor: pointer; } .im-close:hover { background: rgba(255,255,255,0.14); color: #fff; } /* ── Hero: remove min-height 100vh em mobile ───────────────── */ @media (max-width: 768px) { #hero { min-height: auto; } .scroll-hint { display: none; } } /* ── Urgency bar: oculta em mobile (evita sobreposição com nav) */ @media (max-width: 480px) { #urgency-bar { display: none; } #navbar { top: 0; } #hero { padding-top: 0; } .hero-body { padding-top: clamp(78px, 22vw, 110px); } .nav-logo-img { height: 40px; } #navbar { padding-top: 14px; padding-bottom: 14px; } } /* ── Hero: eyebrow, subtítulo e CTAs ───────────────────────── */ @media (max-width: 768px) { .hero-index { display: none; } .hero-sub { max-width: 100%; } .hero-h1 { font-size: clamp(2.4rem, 9vw, 3rem); } } @media (max-width: 480px) { .hero-ctas { gap: 8px; } .hero-ctas .btn-solid, .hero-ctas .btn-ghost { width: 100%; justify-content: center; } .trust-line { gap: 10px; } .trust-line span { font-size: .6rem; } } /* ── Hero stats: grade 2×2 com divisores ───────────────────── */ @media (max-width: 580px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } .hs-d { display: none; } /* divisor vertical entre colunas */ .hero-stats .hs:nth-child(1), .hero-stats .hs:nth-child(5) { border-right: 1px solid var(--border); } /* divisor horizontal entre linhas */ .hero-stats .hs:nth-child(1), .hero-stats .hs:nth-child(3) { border-bottom: 1px solid var(--border); } } /* ── Tipografia: títulos de seção menores em mobile ─────────── */ @media (max-width: 768px) { .sec-title { font-size: clamp(1.9rem, 7vw, 2.6rem); } .fcta-title { font-size: clamp(1.9rem, 7vw, 2.6rem); } } /* ── Seções: espaçamento vertical compacto ─────────────────── */ @media (max-width: 768px) { .sec { padding: 64px 0; } .trust-sec { padding: 32px 0; } .sec-desc { margin-bottom: 36px; } } /* ── Processo: coluna única sem padding lateral extra ──────── */ @media (max-width: 480px) { .proc-step { padding-left: 0 !important; padding-right: 0 !important; } .ps-line { display: none; } .proc-grid { gap: 24px; } } /* ── Featured project: mockup compacto ─────────────────────── */ @media (max-width: 600px) { .brow-body { height: 165px; } } /* ── Final CTA: botão full-width ────────────────────────────── */ @media (max-width: 480px) { .fcta-checks { flex-direction: column; align-items: center; gap: 10px; } .fcta-btn { width: 100%; justify-content: center; } } /* ── Footer: links em múltiplas linhas ──────────────────────── */ @media (max-width: 480px) { .ft-links { flex-wrap: wrap; gap: 10px 20px; } }