/* ═══════════════════════════════════════════════════ home-updates.css — DR Sistemas Adicione: no do index.html, APÓS style.css ═══════════════════════════════════════════════════ */ /* ─── HERO MELHORIAS ─── */ /* Centraliza verticalmente o conteúdo do hero */ .hero-modern { align-items: center !important; padding-top: 0 !important; } .hero-logo { width: 160px; /* tamanho maior, proporcional ao hero */ height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 0 20px rgba(96,165,250,.4)); animation: logoPulse 3s ease-in-out infinite; } @keyframes logoPulse { 0%,100% { filter: drop-shadow(0 0 16px rgba(96,165,250,.3)); } 50% { filter: drop-shadow(0 0 28px rgba(96,165,250,.6)); } } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-hero-primary { display: inline-flex; align-items: center; background: linear-gradient(135deg, #2b5bf5, #0099e6); color: #fff; font-weight: 700; padding: .85rem 2rem; border-radius: 50px; text-decoration: none; font-size: .95rem; box-shadow: 0 6px 24px rgba(43,91,245,.4); transition: transform .2s, box-shadow .2s; } .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(43,91,245,.55); color: #fff; } .btn-hero-ghost { display: inline-flex; align-items: center; background: transparent; color: rgba(255,255,255,.85); font-weight: 600; padding: .85rem 2rem; border-radius: 50px; border: 1px solid rgba(255,255,255,.3); text-decoration: none; font-size: .95rem; transition: background .2s, border-color .2s; } .btn-hero-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); color: #fff; } /* ─── SOBRE ─── */ .about-section { padding: 6rem 0; background: #fff; } .section-tag { display: inline-block; background: #eff4ff; color: #2b5bf5; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 100px; } .section-heading { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; color: #111827; line-height: 1.2; } .section-text { color: #4b5563; line-height: 1.8; font-size: 1rem; } .about-badges { display: flex; flex-wrap: wrap; gap: .6rem; } .about-badge { display: inline-flex; align-items: center; gap: .45rem; background: #f3f4f6; color: #374151; font-size: .78rem; font-weight: 600; padding: .4rem .9rem; border-radius: 100px; border: 1px solid #e5e7eb; } .about-badge i { color: #2b5bf5; } .about-img-wrap { position: relative; display: inline-block; width: 100%; } .about-img-wrap img { width: 100%; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.12); transition: transform .4s ease; } .about-img-wrap:hover img { transform: scale(1.02); } .about-img-badge { position: absolute; bottom: -16px; right: -16px; background: #2b5bf5; color: #fff; border-radius: 14px; padding: .9rem 1.3rem; text-align: center; box-shadow: 0 8px 24px rgba(43,91,245,.4); min-width: 90px; } .about-img-badge .num { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; } .about-img-badge .lbl { display: block; font-size: .7rem; opacity: .85; margin-top: .2rem; } /* ─── FADE-IN ANIMATIONS ─── */ /* Fallback: se JS não rodar, conteúdo fica visível */ .fade-in-left, .fade-in-right { opacity: 1; transform: translateX(0); transition: opacity .7s ease, transform .7s ease; } /* JS adiciona .animate antes de observar, para poder animar */ .fade-in-left.animate { opacity: 0; transform: translateX(-30px); } .fade-in-right.animate { opacity: 0; transform: translateX(30px); } .fade-in-left.visible, .fade-in-right.visible { opacity: 1; transform: translateX(0); } /* ═══════════════════════════════════════════════════ SEÇÃO VÍDEO — REEL ═══════════════════════════════════════════════════ */ .video-showcase { background: #080c14; position: relative; overflow: hidden; } .video-showcase-inner { padding: 7rem 0; position: relative; z-index: 2; } .video-showcase::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 20% 50%, rgba(43,91,245,.12) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 30%, rgba(0,153,230,.08) 0%, transparent 70%); } /* Texto lado esquerdo */ .vs-tag { display: inline-block; font-family: 'Courier New', monospace; font-size: .72rem; letter-spacing: .18em; color: rgba(96,165,250,.6); text-transform: uppercase; margin-bottom: .8rem; } .vs-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: #fff; line-height: 1.15; margin-bottom: 1rem; } .vs-desc { color: rgba(200,215,240,.65); font-size: .95rem; line-height: 1.8; max-width: 440px; margin-bottom: 1.5rem; } .vs-list { list-style: none; padding: 0; margin-bottom: 2rem; } .vs-list li { display: flex; align-items: center; gap: .6rem; color: rgba(200,215,240,.8); font-size: .9rem; margin-bottom: .55rem; } .vs-list li i { color: #4ade80; flex-shrink: 0; } .vs-cta { display: inline-flex; align-items: center; gap: .6rem; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-weight: 700; padding: .85rem 1.8rem; border-radius: 50px; text-decoration: none; font-size: .9rem; box-shadow: 0 6px 24px rgba(37,211,102,.3); transition: transform .2s, box-shadow .2s; } .vs-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(37,211,102,.5); color: #fff; } /* Frame de celular / reel */ .reel-frame { width: 300px; background: #0d0d12; border-radius: 40px; border: 2px solid rgba(255,255,255,.08); box-shadow: 0 0 0 6px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.7), inset 0 0 30px rgba(0,0,0,.3); position: relative; overflow: hidden; padding: 10px; } .reel-notch { width: 80px; height: 20px; background: #0d0d12; border-radius: 0 0 14px 14px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.5); } .reel-video-wrap { border-radius: 32px; overflow: hidden; position: relative; background: #000; aspect-ratio: 9/16; } .reel-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .reel-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,12,20,.5); transition: opacity .3s; } .reel-video-wrap:hover .reel-overlay { opacity: 1; } .reel-play-btn { width: 60px; height: 60px; background: rgba(255,255,255,.2); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, transform .2s; margin-bottom: auto; margin-top: auto; } .reel-play-btn:hover { background: rgba(255,255,255,.35); transform: scale(1.1); } .reel-label { position: absolute; bottom: 16px; left: 16px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 600; padding: .3rem .75rem; border-radius: 20px; display: flex; align-items: center; gap: .4rem; letter-spacing: .04em; } @media (max-width: 991px) { .video-showcase-inner { padding: 5rem 0; } .reel-frame { width: 240px; } } @media (max-width: 767px) { .vs-desc { max-width: 100%; } .reel-frame { width: 220px; } } /* ═══════════════════════════════════════════════════ FORMULÁRIO — NOVO VISUAL ═══════════════════════════════════════════════════ */ /* Campos */ .form-control-dark { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #e5e7eb; border-radius: 10px; padding: .78rem 1rem; font-size: .92rem; transition: border-color .2s, background .2s, box-shadow .2s; font-family: inherit; -webkit-appearance: none; } .form-control-dark::placeholder { color: rgba(255,255,255,.3); } .form-control-dark:focus { outline: none; background: rgba(255,255,255,.09); border-color: rgba(43,91,245,.7); box-shadow: 0 0 0 3px rgba(43,91,245,.15); color: #fff; } .form-control-dark.is-invalid { border-color: rgba(239,68,68,.7); box-shadow: 0 0 0 3px rgba(239,68,68,.1); } .form-control-dark option { background: #1e293b; color: #e5e7eb; } /* Labels */ .form-label { font-size: .8rem; letter-spacing: .04em; margin-bottom: .4rem; } /* Erros inline */ .field-error { color: #f87171; font-size: .75rem; margin-top: .3rem; display: none; } /* Botão enviar */ .btn-send { display: inline-flex; align-items: center; background: linear-gradient(135deg, #2b5bf5, #0099e6); color: #fff; border: none; padding: .88rem 2rem; border-radius: 50px; font-size: .88rem; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(43,91,245,.35); transition: transform .2s, box-shadow .2s, opacity .2s; font-family: inherit; min-width: 180px; justify-content: center; } .btn-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(43,91,245,.5); } .btn-send:disabled { opacity: .7; cursor: not-allowed; } /* Estado de SUCESSO */ .form-success-box { text-align: center; padding: 3rem 2rem; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.2); border-radius: 16px; } .success-icon { font-size: 3.5rem; color: #4ade80; margin-bottom: 1rem; animation: successPop .5s cubic-bezier(.34,1.56,.64,1); } @keyframes successPop { from { transform: scale(0); opacity:0; } to { transform: scale(1); opacity:1; } } .form-success-box h3 { color: #fff; font-weight: 700; margin-bottom: .6rem; } .form-success-box p { color: rgba(200,220,200,.8); font-size: .9rem; line-height: 1.7; margin-bottom: .3rem; } .success-detail { color: rgba(200,220,200,.5) !important; font-size: .82rem !important; } /* Estado de ERRO */ .form-error-box { text-align: center; padding: 2.5rem 2rem; background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); border-radius: 16px; } .form-error-box i { font-size: 2.5rem; color: #f87171; margin-bottom: .8rem; display: block; } .form-error-box h4 { color: #fff; font-weight: 700; margin-bottom: .5rem; } .form-error-box p { color: rgba(255,200,200,.7); font-size: .9rem; } /* Botões pós-envio */ .btn-whats-success { display: inline-flex; align-items: center; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; text-decoration: none; padding: .7rem 1.4rem; border-radius: 50px; font-size: .85rem; font-weight: 700; transition: transform .2s; } .btn-whats-success:hover { transform: translateY(-2px); color: #fff; } .btn-new-msg { background: transparent; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7); padding: .7rem 1.4rem; border-radius: 50px; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .2s; } .btn-new-msg:hover { background: rgba(255,255,255,.08); color: #fff; } /* hCaptcha container */ .h-captcha { display: inline-block; } /* Botão WhatsApp na info */ .contact-wa-btn { display: inline-flex; align-items: center; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; text-decoration: none; padding: .75rem 1.4rem; border-radius: 50px; font-size: .85rem; font-weight: 700; width: 100%; justify-content: center; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(37,211,102,.25); } .contact-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.4); color: #fff; } /* ─── FADE-IN on scroll (IntersectionObserver) ─── */ .fade-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .fade-on-scroll.visible { opacity: 1; transform: translateY(0); } /* ─── RESPONSIVO ─── */ @media (max-width: 768px) { .about-section { padding: 4rem 0; } .about-img-badge { bottom: -10px; right: -4px; } .hero-actions { flex-direction: column; align-items: center; } .btn-hero-primary, .btn-hero-ghost { width: 100%; justify-content: center; max-width: 280px; } } /* ─── BOTÃO DE SOM DO REEL ─── */ .reel-sound-btn { position: absolute; bottom: 52px; right: 12px; width: 34px; height: 34px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; font-size: .85rem; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 4; transition: background .2s, transform .15s; } .reel-sound-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }