/* 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); 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; } .gp-btn-outline-light:hover { border-color: #ed7f1f; color: #ed7f1f; background: rgba(237,127,31,.08); } .gp-btn-primary { background: #ed7f1f; 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; } .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; color: #ed7f1f; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 17px 42px; border-radius: 999px; transition: all .2s; } .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; }