/* As fontes do Google são carregadas via no do index.html (mais rápido que @import). */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: #0a1740; font-family: 'Manrope', sans-serif; color: #0a1740; -webkit-font-smoothing: antialiased; } a { color: #ed7f1f; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: #ed7f1f; color: #fff; } #gp-carousel { scrollbar-width: none; } #gp-carousel::-webkit-scrollbar { display: none; } @media (max-width: 900px) { #gp-navlinks { display: none !important; } } /* No mobile a barra de números empilha e fica alta demais para o espaço que o #topo reserva, cobrindo o botão de orçamento. Aqui ela sai de "flutuando" (absolute) e volta ao fluxo normal, ficando abaixo do conteúdo. O !important é necessário porque o position vem de um style inline. */ @media (max-width: 700px) { .gp-hero-stats { position: static !important; backdrop-filter: none !important; } #topo { padding-bottom: clamp(36px, 6vh, 56px) !important; } #topo h1 { font-size: clamp(32px, 8.5vw, 46px) !important; } } @keyframes gp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(237,127,31,.4); } 70% { box-shadow: 0 0 0 16px rgba(237,127,31,0); } } @keyframes gp-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---- elementos com hover (antes eram "style-hover" no builder) ---- */ .gp-navlink { color: rgba(255,255,255,.8); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; } .gp-navlink:hover { color: #ed7f1f; } .gp-btn-outline-light { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 12px 26px; border-radius: 999px; white-space: nowrap; transition: all .2s; display: inline-block; font-family: 'Manrope', sans-serif; cursor: pointer; } .gp-btn-outline-light:hover { border-color: #ed7f1f; color: #ed7f1f; background: rgba(237,127,31,.08); } .gp-btn-primary { background: #ed7f1f; border: none; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 18px 44px; border-radius: 999px; animation: gp-pulse 2.8s infinite; display: inline-block; transition: background .2s; font-family: 'Manrope', sans-serif; cursor: pointer; } .gp-btn-primary:hover { background: #f59d4e; color: #fff; } .gp-link-underline { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 6px; transition: all .2s; } .gp-link-underline:hover { color: #ed7f1f; border-color: #ed7f1f; } .gp-carousel-btn { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 18px; border-radius: 50%; cursor: pointer; transition: all .2s; } .gp-carousel-btn:hover { border-color: #ed7f1f; color: #ed7f1f; } .gp-btn-outline-dark { display: inline-block; border: 1px solid #ed7f1f; background: transparent; color: #ed7f1f; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 17px 42px; border-radius: 999px; transition: all .2s; font-family: 'Manrope', sans-serif; cursor: pointer; } .gp-btn-outline-dark:hover { background: #ed7f1f; color: #fff; } .gp-faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: transparent; border: none; cursor: pointer; text-align: left; padding: 24px 2px; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: #0a1740; } .gp-faq-icon { flex: none; font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; line-height: 1; color: #0a1740; transition: transform .3s, color .3s; } .gp-faq-item.open .gp-faq-icon { color: #ed7f1f; transform: rotate(45deg); } .gp-faq-answer { margin: 0; padding: 0 32px 24px 2px; font-size: 14px; line-height: 1.85; color: #5a627e; display: none; } .gp-faq-item.open .gp-faq-answer { display: block; } .gp-social { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; transition: all .2s; } .gp-social:hover { border-color: #ed7f1f; color: #ed7f1f; } .gp-footer-link { color: rgba(255,255,255,.65); font-size: 14px; transition: color .2s; } .gp-footer-link:hover { color: #ed7f1f; } .gp-contact-link { color: rgba(255,255,255,.65); transition: color .2s; } .gp-contact-link:hover { color: #ed7f1f; } .gp-logo-img { height: 44px; width: auto; display: block; } .gp-logo-img-footer { height: 56px; width: auto; display: block; } /* ---- Cards de vídeo dos Projetos ---- */ /* A foto (poster) aparece até existir o .mp4. Ao tocar, some o degradê, o ▶ e o rótulo. */ .gp-proj-card { cursor: pointer; } .gp-proj-fade { transition: opacity .3s ease; } .gp-proj-card.gp-playing .gp-proj-fade { opacity: 0; } /* ---- Popup de Cotação ---- */ .gp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; } .gp-modal.open { visibility: visible; opacity: 1; transition: opacity .25s ease; } .gp-modal-overlay { position: absolute; inset: 0; background: rgba(6,13,36,.72); backdrop-filter: blur(3px); } .gp-modal-box { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 6px; padding: clamp(32px,5vw,48px) clamp(24px,4vw,40px); box-shadow: 0 30px 70px rgba(6,13,36,.4); transform: translateY(14px) scale(.98); transition: transform .25s ease; } .gp-modal.open .gp-modal-box { transform: translateY(0) scale(1); } .gp-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; background: transparent; color: #9aa0b4; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; border-radius: 50%; transition: all .2s; } .gp-modal-close:hover { background: rgba(10,23,64,.06); color: #0a1740; } .gp-modal-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #ed7f1f; } .gp-modal-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(24px,3vw,30px); line-height: 1.2; color: #0a1740; margin: 14px 0 0; } .gp-modal-title em { font-style: italic; color: #ed7f1f; } .gp-modal-sub { font-size: 13px; line-height: 1.7; color: #5a627e; margin: 12px 0 0; } #gp-quote-form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; } .gp-field { display: flex; flex-direction: column; gap: 8px; } .gp-field label, .gp-field-legend { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0a1740; } .gp-field input[type="text"], .gp-field input[type="tel"] { font-family: 'Manrope', sans-serif; font-size: 14px; color: #0a1740; padding: 13px 16px; border: 1px solid rgba(10,23,64,.16); border-radius: 4px; background: #fff; transition: border-color .2s; } .gp-field input[type="text"]:focus, .gp-field input[type="tel"]:focus { outline: none; border-color: #ed7f1f; } .gp-field-error { display: none; font-size: 12px; color: #c23b3b; } .gp-field.gp-field-invalid input[type="text"], .gp-field.gp-field-invalid input[type="tel"] { border-color: #c23b3b; } .gp-field.gp-field-invalid .gp-quote-options { border-color: #c23b3b; } .gp-field.gp-field-invalid .gp-field-error { display: block; } .gp-quote-options { display: flex; flex-wrap: wrap; gap: 10px; } .gp-quote-option { position: relative; } .gp-quote-option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .gp-quote-option span { display: inline-block; padding: 10px 18px; border: 1px solid rgba(10,23,64,.16); border-radius: 999px; font-size: 13px; font-weight: 600; color: #0a1740; cursor: pointer; transition: all .2s; } .gp-quote-option input:checked + span { background: #0a1740; border-color: #0a1740; color: #fff; } .gp-quote-option input:focus-visible + span { outline: 2px solid #ed7f1f; outline-offset: 2px; } .gp-quote-submit { width: 100%; text-align: center; border: none; margin-top: 4px; } .gp-quote-submit:disabled { opacity: .6; cursor: not-allowed; animation: none; } .gp-quote-msg { margin: 0; font-size: 12px; color: #5a627e; text-align: center; min-height: 16px; } .gp-quote-msg-error { color: #c23b3b; } .gp-quote-success { text-align: center; padding-top: 6px; } .gp-quote-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(237,127,31,.12); color: #ed7f1f; font-size: 24px; margin-bottom: 6px; } .gp-quote-success .gp-btn-outline-dark { margin-top: 26px; }