/* =================================================================== SERVIDOR FRP BRASIL - Tema Red/Black Tech Variáveis de tema: alterando a classe "frp-day" no , todas as cores trocam automaticamente (modo noite = padrão, modo dia = claro) =================================================================== */ :root{ /* superfícies (fundo) */ --frp-page-bg: radial-gradient(ellipse at top,#14090a 0%,#0a0505 45%,#050303 100%); --frp-card-1:#171010; --frp-card-2:#120b0b; --frp-card-header-1:#1c0f0f; --frp-card-header-2:#150a0a; --frp-card-inner:#1a1010; --frp-surface:#170f0f; --frp-surface-2:#140c0c; --frp-input-bg:#1c1111; --frp-modal-bg:#120b0b; --frp-offcanvas-bg:#0f0808; --frp-navbar-1:#0d0707; --frp-navbar-2:#120909; --frp-topbar-1:#1a0000; --frp-topbar-2:#0d0000; --frp-hr:#241414; --frp-hover-bg:rgba(255,26,26,.1); /* bordas e glow (variam de intensidade) */ --frp-border-soft:rgba(255,26,26,.2); --frp-border:rgba(255,26,26,.35); --frp-border-mid:rgba(255,26,26,.5); --frp-border-strong:rgba(255,26,26,.85); --frp-glow-soft:rgba(255,26,26,.08); --frp-glow:rgba(255,26,26,.35); --frp-glow-strong:rgba(255,26,26,.7); --frp-shadow-1:rgba(0,0,0,.5); --frp-shadow-2:rgba(0,0,0,.6); --frp-heading-glow:0 0 14px rgba(255,26,26,.6); --frp-logo-glow:drop-shadow(0 0 6px rgba(255,26,26,.5)); --frp-icon-glow:drop-shadow(0 0 4px rgba(255,26,26,.7)); /* textos */ --frp-text:#e8e8e8; --frp-text-strong:#ffffff; --frp-text-dim:#d8d8d8; --frp-text-dim2:#e0e0e0; --frp-text-muted:#888888; /* marca (constante nos dois temas) */ --frp-accent-1:#b30000; --frp-accent-1-dark:#7a0000; --frp-accent-2:#ff1a1a; --frp-accent-3:#ff4444; --frp-success:#16c460; --frp-success-2:#2fd97a; /* variáveis do Bootstrap/tema original (sobrescritas) */ --bs-light-primary:var(--frp-surface) !important; --bs-light-secondary:var(--frp-surface) !important; --bs-light-success:var(--frp-surface) !important; --bs-light-danger:var(--frp-surface) !important; --bs-light-warning:var(--frp-surface) !important; --bs-light-info:var(--frp-surface) !important; --bs-light:var(--frp-surface) !important; --bs-white:var(--frp-modal-bg) !important; --bs-body-bg:var(--frp-page-bg) !important; --bs-body-color:var(--frp-text) !important; --bs-border-color:var(--frp-border-soft) !important; } html.frp-day{ --frp-page-bg:#f3f4f7; --frp-card-1:#ffffff; --frp-card-2:#fbfbfd; --frp-card-header-1:#fff2f2; --frp-card-header-2:#ffe6e6; --frp-card-inner:#f5f6fa; --frp-surface:#f7f2f2; --frp-surface-2:#ffffff; --frp-input-bg:#ffffff; --frp-modal-bg:#ffffff; --frp-offcanvas-bg:#ffffff; --frp-navbar-1:#ffffff; --frp-navbar-2:#fff5f5; --frp-topbar-1:#b30000; --frp-topbar-2:#7a0000; --frp-hr:#eee0e0; --frp-hover-bg:rgba(179,0,0,.08); --frp-border-soft:rgba(179,0,0,.12); --frp-border:rgba(179,0,0,.2); --frp-border-mid:rgba(179,0,0,.3); --frp-border-strong:rgba(179,0,0,.5); --frp-glow-soft:rgba(179,0,0,.05); --frp-glow:rgba(179,0,0,.15); --frp-glow-strong:rgba(179,0,0,.3); --frp-shadow-1:rgba(0,0,0,.08); --frp-shadow-2:rgba(0,0,0,.14); --frp-heading-glow:none; --frp-logo-glow:none; --frp-icon-glow:none; --frp-text:#241414; --frp-text-strong:#120b0b; --frp-text-dim:#3a3a3a; --frp-text-dim2:#2c2c2c; --frp-text-muted:#777777; } /* ===================== base ===================== */ .offcanvas,#menuOffcanvas{z-index:99999!important} #frp-topbar{z-index:9998!important} html{background:var(--frp-page-bg)!important;min-height:100%!important} body{background:transparent!important;transition:background .3s ease} /* ===================== nome animado da logo ===================== */ a.nav-logo::after{ content:"SERVIDOR FRP BRASIL"; font-size:17px;font-weight:900;letter-spacing:2px; background:linear-gradient(90deg,var(--frp-accent-2),#fff,var(--frp-accent-2),#fff,var(--frp-accent-2)); background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:shine 3s linear infinite;white-space:nowrap;margin-left:8px; filter:var(--frp-logo-glow); } @keyframes shine{0%{background-position:0% center}100%{background-position:200% center}} .frp-nome-mobile{ font-size:14px;font-weight:900;letter-spacing:2px; background:linear-gradient(90deg,var(--frp-accent-2),#fff,var(--frp-accent-2),#fff,var(--frp-accent-2)); background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:shine 3s linear infinite;white-space:nowrap;margin-left:8px; } /* ===================== cards ===================== */ .card,.card.rounded-0,.card.product-section,.card.heighlight-card{ background:linear-gradient(160deg,var(--frp-card-1) 0%,var(--frp-card-2) 100%)!important; border:1px solid var(--frp-border)!important;border-radius:14px!important;overflow:hidden!important; box-shadow:0 4px 20px var(--frp-shadow-1),0 0 14px var(--frp-glow-soft)!important; transition:all .3s ease!important; } .card:hover,.card.rounded-0:hover,.card.product-section:hover,.card.heighlight-card:hover{ transform:translateY(-5px)!important; box-shadow:0 10px 34px var(--frp-shadow-2),0 0 26px var(--frp-glow)!important; border-color:var(--frp-border-strong)!important; } .card .card-header{ background:linear-gradient(90deg,var(--frp-card-header-1),var(--frp-card-header-2))!important; border-bottom:2px solid var(--frp-border-mid)!important;border-radius:14px 14px 0 0!important; } .card .card-header h5{color:var(--frp-text-strong)!important;font-weight:800!important;letter-spacing:.5px;text-shadow:var(--frp-heading-glow)!important} .card .card-title,.card h5,.card h6,.card p,.card a,.card span:not(.badge),.card .service-title,.card .service-name, .card .text-muted,.card small,.card label,.card h4,.card h3,.card h2,.card .fw-bold,.card .fw-semibold,.card strong,.card b{ color:var(--frp-text)!important;opacity:1!important; } .card .card,.card .card-body .card,.dashboard-card,.balance-card,.wallet-card,.card.rounded{ background:var(--frp-card-inner)!important;border:1px solid var(--frp-border-soft)!important;box-shadow:0 0 12px var(--frp-glow-soft)!important; } .card a.text-muted,.card .add-balance,.card a[href*="deposit"],.card a[href*="balance"],.card a[href*="recharge"]{ color:var(--frp-accent-3)!important;opacity:1!important;font-weight:700!important; } /* ===================== abas ===================== */ .nav-tabs{border-bottom:2px solid var(--frp-border-mid)!important} .nav-tabs .nav-link,.nav-tabs .nav-item{ background:var(--frp-surface)!important;color:var(--frp-text-dim)!important;border:1px solid var(--frp-border-soft)!important; border-bottom:none!important;font-weight:600!important;border-radius:8px 8px 0 0!important; } .nav-tabs .nav-link.active{ background:linear-gradient(135deg,var(--frp-accent-1),var(--frp-accent-2))!important;color:#fff!important; border-color:var(--frp-accent-2)!important;box-shadow:0 0 16px var(--frp-glow-strong)!important; } .analytics-tab .nav-link,.analytics-tab .nav-link.active,#myTab .nav-link,#myTab .nav-link.active,#related-tab{ background:var(--frp-surface)!important;color:var(--frp-accent-3)!important;border:none!important;box-shadow:none!important; font-weight:800!important;text-shadow:none!important; } .card-header.pb-0.border-0,.card-header.border-0{background:var(--frp-surface)!important;border-bottom:2px solid var(--frp-border)!important} /* ===================== badges ===================== */ .badge.bg-danger,.badge.bg-light-danger,span.badge[class*="danger"]{ background:var(--frp-accent-2)!important;color:#fff!important;border:none!important;text-shadow:none!important;box-shadow:0 0 8px var(--frp-glow)!important; } .badge.bg-success,.badge.bg-light-success,span.badge[class*="success"]{ background:var(--frp-success)!important;color:#fff!important;border:none!important;text-shadow:none!important;box-shadow:0 0 8px rgba(22,196,96,.4)!important; } /* ===================== modais ===================== */ .modal-content,.login-content,.modal-content.login-content{ background:var(--frp-modal-bg)!important;border:1px solid var(--frp-border-mid)!important;border-radius:14px!important;box-shadow:0 0 40px var(--frp-glow)!important; } .modal-content .form-control{background:var(--frp-input-bg)!important;border:1px solid var(--frp-border)!important;color:var(--frp-text)!important;border-radius:8px!important} .modal-content .form-control::placeholder{color:var(--frp-text-muted)!important} .modal-content label,.modal-content p,.modal-content small,.modal-content a:not(.btn),.modal-content h5,.modal-content h6, .modal-content span,.modal-content td,.modal-content th{color:var(--frp-text)!important;opacity:1!important} .modal-content .modal-header{background:linear-gradient(90deg,var(--frp-card-header-1),var(--frp-card-header-2))!important;border-bottom:2px solid var(--frp-border-mid)!important} .modal-content .nav-tabs .nav-link{background:var(--frp-surface)!important;color:var(--frp-text-dim)!important} .modal-content .nav-tabs .nav-link.active{background:linear-gradient(135deg,var(--frp-accent-1),var(--frp-accent-2))!important;color:#fff!important} #orderDetailsHtml,.modal-body.bg-white,.modal .bg-white{background:var(--frp-modal-bg)!important;color:var(--frp-text)!important} #orderDetailsHtml *,.modal-body.bg-white *{color:var(--frp-text)!important} .modal-content .modal-header h5,.modal-content .modal-header h4,.modal-content .modal-header *{color:var(--frp-text-strong)!important} .modal-body,.modal-body .card,.modal-body .p-3,.modal-body .border,.modal-body .list-group-item,.modal-body table,.modal-body td,.modal-body th{ background:var(--frp-modal-bg)!important;color:var(--frp-text)!important;border-color:var(--frp-border-soft)!important; } .modal input,.modal textarea,.modal select{background:var(--frp-input-bg)!important;color:var(--frp-text)!important;border:1px solid var(--frp-border)!important} .modal input:disabled,.modal input[readonly],.modal textarea[readonly],.modal textarea:disabled{ background:var(--frp-input-bg)!important;color:var(--frp-text)!important;opacity:1!important;-webkit-text-fill-color:var(--frp-text)!important; } /* ===================== dropdown ===================== */ .gsm-dropdown,.dropdown-menu{background:var(--frp-surface-2)!important;border:1px solid var(--frp-border-mid)!important;box-shadow:0 0 24px var(--frp-glow)!important} .gsm-dropdown a,.dropdown-menu a{color:var(--frp-text-dim2)!important;transition:all .2s ease!important} .gsm-dropdown a:hover,.dropdown-menu a:hover{color:var(--frp-accent-3)!important;background:var(--frp-hover-bg)!important} .dropdown-menu .dropdown-item,.dropdown-item{color:var(--frp-text-dim2)!important} .dropdown-menu .dropdown-item:hover,.dropdown-item:hover,.dropdown-menu .dropdown-item:focus{color:var(--frp-accent-3)!important;background:var(--frp-hover-bg)!important} .dropdown-item i,.dropdown-item svg{color:var(--frp-accent-2)!important;opacity:1!important} /* ===================== offcanvas mobile ===================== */ .offcanvas,#menuOffcanvas,.offcanvas-start,.offcanvas-body{background:var(--frp-offcanvas-bg)!important;color:var(--frp-text)!important} .offcanvas-header,#menuOffcanvas .offcanvas-header{ border-bottom:2px solid var(--frp-border-mid)!important;padding-bottom:14px!important; background:linear-gradient(90deg,var(--frp-card-header-1),var(--frp-card-header-2))!important; } #menuOffcanvas .offcanvas-body>p,#menuOffcanvas .offcanvas-body>div>p{color:var(--frp-accent-3)!important;font-weight:700!important;font-size:15px!important} #menuOffcanvas .text-reset,.offcanvas .text-reset{color:var(--frp-text-dim)!important;border-bottom:1px solid var(--frp-hr)!important;padding:12px 4px!important;transition:all .2s ease!important} #menuOffcanvas .text-reset:hover,.offcanvas .text-reset:hover{color:var(--frp-accent-3)!important;border-bottom-color:var(--frp-accent-2)!important;padding-left:10px!important} #menuOffcanvas h5,.offcanvas h5{ color:var(--frp-accent-2)!important;font-size:11px!important;letter-spacing:2px!important;font-weight:800!important;text-transform:uppercase!important; margin-top:16px!important;border-left:3px solid var(--frp-accent-2)!important;padding-left:8px!important; } .offcanvas hr,#menuOffcanvas hr{border-color:var(--frp-hr)!important;margin:6px 0!important} .offcanvas .text-reset[style],#menuOffcanvas .text-reset[style]{background:var(--frp-surface)!important;color:var(--frp-text)!important} /* ===================== navbar desktop ===================== */ .navbar,header.navbar,nav.navbar,.gsm-header{background:linear-gradient(90deg,var(--frp-navbar-1),var(--frp-navbar-2))!important;border-bottom:1px solid var(--frp-border-soft)!important} .nav-links a,.nav-link{color:var(--frp-text-dim2)!important} .nav-links a:hover,.nav-link:hover{color:var(--frp-accent-3)!important} /* ===================== carrossel ===================== */ .card-body .owl-stage{animation:owl-marquee 25s linear infinite!important;transition:none!important} .card-body .owl-stage:hover{animation-play-state:paused!important} .card-body .owl-dots,.card-body .owl-nav{display:none!important} @keyframes owl-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @media (max-width:768px){.card-body .owl-stage{animation-duration:10s!important}} /* ===================== títulos em português ===================== */ div.card.product-section .card-header h5.text-primary{visibility:hidden;position:relative} div.card.product-section .card-header h5.text-primary::after{content:"SOMOS REVENDEDOR OFICIAL";visibility:visible;position:absolute;left:0;white-space:nowrap} div.card.rounded-0:not(.product-section) .card-header h5.text-primary{visibility:hidden;position:relative} div.card.rounded-0:not(.product-section) .card-header h5.text-primary::after{content:"MAIS VENDIDOS";visibility:visible;position:absolute;left:0;white-space:nowrap} div.card.rounded-0:not(.product-section)+div.card.rounded-0 .card-header h5.text-primary::after{content:"ADICIONADOS RECENTEMENTE"} /* ===================== barra deslizante ===================== */ #frp-topbar{ background:linear-gradient(90deg,var(--frp-topbar-1),var(--frp-topbar-2),var(--frp-topbar-1));color:#fff;padding:8px 0;overflow:hidden; white-space:nowrap;border-bottom:1px solid var(--frp-border-mid);box-shadow:0 0 12px var(--frp-glow);position:relative; } #frp-topbar-inner{display:inline-block;animation:topbar-scroll 15s linear infinite} #frp-topbar-inner span{font-size:13px;font-weight:700;letter-spacing:.5px;padding:0 40px} #frp-topbar-inner i{color:var(--frp-accent-2);margin-right:8px;margin-left:2px;filter:var(--frp-icon-glow)} #frp-topbar:hover #frp-topbar-inner{animation-play-state:paused} @keyframes topbar-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* ===================== botões flutuantes ===================== */ #frp-float-btns{position:fixed;bottom:30px;right:25px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:flex-end} #frp-float-btns a,#frp-float-btns button{ display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:50px;font-weight:700;font-size:12px; letter-spacing:.4px;text-decoration:none!important;box-shadow:0 4px 20px rgba(0,0,0,.4);transition:all .3s ease;white-space:nowrap; width:180px;border:none;cursor:pointer;font-family:inherit; } #frp-float-btns a:hover,#frp-float-btns button:hover{transform:translateX(-5px);box-shadow:0 6px 28px var(--frp-glow)} #frp-btn-whats{background:linear-gradient(135deg,#25d366,#128c7e)!important;color:#fff!important} #frp-btn-grupo{background:linear-gradient(135deg,var(--frp-accent-1),var(--frp-accent-2))!important;color:#fff!important;border:1px solid var(--frp-accent-3)!important;box-shadow:0 0 14px var(--frp-glow-strong)!important} #frp-btn-tema{background:linear-gradient(135deg,#333,#111)!important;color:#fff!important;border:1px solid var(--frp-accent-2)!important} html.frp-day #frp-btn-tema{background:linear-gradient(135deg,#ffb703,#fb8500)!important} /* ===================== inputs/formulários ===================== */ input.form-control,.form-control,input[type="number"],input[type="text"],input[type="tel"],input[type="email"],textarea,select{ background:var(--frp-input-bg)!important;color:var(--frp-text)!important;border:1px solid var(--frp-border)!important; } input::placeholder,textarea::placeholder{color:var(--frp-text-muted)!important} input:disabled,input[readonly],textarea[readonly],textarea:disabled{ background:var(--frp-input-bg)!important;color:var(--frp-text)!important;opacity:1!important;-webkit-text-fill-color:var(--frp-text)!important; } .form-check,label.d-flex,.border.rounded,.rounded.border,.rounded-3.border,[class*="payment"],[class*="gateway"]{ background:var(--frp-surface)!important;color:var(--frp-text)!important;border-color:var(--frp-border-soft)!important; } [class*="payment"] *,[class*="gateway"] *,.form-check *{color:var(--frp-text)!important} /* ===================== fundos claros do tema (bg-white / bg-light-*) ===================== */ html body .bg-white,html body .card-body,html body div.bg-white,.bg-light,.table,.table td,.table th,.list-group-item{ background:var(--frp-modal-bg)!important;color:var(--frp-text)!important; } html body .bg-white *,html body .card-body *{color:var(--frp-text)!important} .bg-light-danger,.bg-light-primary,.bg-light-secondary,.bg-light-success,.bg-light-warning,.bg-light-info{ background:var(--frp-surface)!important;color:var(--frp-text)!important; } .bg-light-danger *,.bg-light-primary *,.bg-light-secondary *,.bg-light-success *,.bg-light-warning *,.bg-light-info *{color:var(--frp-text)!important} [style*="light-primary"],[style*="light-secondary"],[style*="light-success"],[style*="light-danger"],[style*="light-warning"],[style*="light-info"],[style*="bs-light"],[style*="bs-white"]{ background:var(--frp-surface)!important;color:var(--frp-text)!important; } [style*="light-primary"] *,[style*="light-secondary"] *,[style*="bs-light"] *,[style*="bs-white"] *{color:var(--frp-text)!important} /* ===================== botão copiar / input-group-text ===================== */ .input-group-text,[class*="copy"]{background:var(--frp-surface)!important;color:var(--frp-text)!important;border-color:var(--frp-border)!important} .input-group-text i,.input-group-text svg,[class*="copy"] i,[class*="copy"] svg{color:var(--frp-accent-3)!important} /* ===================== gateway de pagamento (classes reais do tema) ===================== */ .checkbox-wrapper,.checkbox-tile,.checkbox-input,label.checkbox-wrapper,span.checkbox-tile{ background:var(--frp-surface)!important;color:var(--frp-text)!important;border-color:var(--frp-border)!important; } .checkbox-wrapper *,.checkbox-tile *{color:var(--frp-text)!important} /* ===================== campo de valor (R$ / BRL) ===================== */ .amt-group,.amt-group.rounded-1,.amt-sym,.amt-unit,.amt-field,input.amt-field{ background:var(--frp-input-bg)!important;color:var(--frp-text)!important;border-color:var(--frp-border)!important; } /* ===================== títulos gerais ===================== */ h1,h2,h3,h4,h5,h6,.service-title,.service-title *{color:var(--frp-text)!important} /* ===================== remover crédito do tema ===================== */ .foot-copy{display:none!important}