/* Gun Vault Chrome — auto-generated, v2.0.22 */ /* === chrome-nav.css === */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700;900&display=swap'); /* ============================================================ GUN VAULT — Site Chrome v2 (two-row nav + full footer + modal) Row 1: Platform funnel (01-05) Row 2: Site navigation (Features, Plans, Stories, etc.) ============================================================ */ :root{ --black:#0a0a0a;--off-black:#111;--near-black:#161616; --white:#ffffff;--off-white:#f8f8f8;--light:#f2f2f2; --border:#e0e0e0;--border-dark:#cccccc; --border-gold:rgba(212,160,23,.25); --muted:#666;--hint:#aaa; --gold-grad:linear-gradient(135deg,#7a5200 0%,#D4A017 22%,#f0c040 44%,#C8962A 66%,#8B6914 88%,#D4A017 100%); --gold-grad-btn:linear-gradient(135deg,#9a6800 0%,#f0c040 25%,#FFD060 50%,#D4A017 75%,#a07800 100%); } html,body{background:#0a0a0a !important} body{font-family:'Barlow',sans-serif;background:#0a0a0a !important;overflow-x:hidden} .elementor-section-wrap,.elementor-inner,.elementor,.elementor-template-canvas{background:#0a0a0a !important} .theme-generatepress .site-footer,.theme-generatepress footer,.elementor-template-canvas .site-footer,footer.site-footer,#colophon{display:none !important;height:0 !important;margin:0 !important;padding:0 !important} /* ============ NAV WRAPPER (contains both rows) ============ */ .nav-wrap{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:9999 !important;background:#0a0a0a;border-bottom:1px solid rgba(212,160,23,.15)} /* ============ TOP NAV (platforms, row 1) ============ */ .nav{height:80px;display:flex !important;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid rgba(255,255,255,0.06)} .nav-logo img{height:72px;display:block;max-height:72px} .nav-logo-icon{display:none}.nav-logo-full{display:block} .nav-right-group{display:flex;align-items:center;gap:4px} .nav-steps{display:flex;align-items:center;gap:4px} .nav-step{display:flex;flex-direction:column;align-items:center;padding:8px 18px;border-radius:8px;text-decoration:none;transition:all .15s} .nav-step:hover{background:rgba(255,255,255,.07)} .nav-step-num{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.35);margin-bottom:2px;display:block} .nav-step-word{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .15s;display:block} .nav-step:hover .nav-step-word{color:#fff} .nav-step:hover .nav-step-num{color:rgba(255,255,255,.55)} .nav-step.active{background:#C8962A} .nav-step.active .nav-step-num{color:rgba(255,255,255,.6)} .nav-step.active .nav-step-word{color:#fff} .nav-step.active:hover{background:#b8831d} .nav-divider{width:1px;height:28px;background:rgba(255,255,255,.12);margin:0 2px;flex-shrink:0} .nav-user-divider{width:1px;height:28px;background:rgba(255,255,255,.12);margin:0 10px;flex-shrink:0} .nav-user{display:flex;align-items:center;position:relative} .nav-user-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s;background:transparent;flex-shrink:0;position:relative;border:none;padding:0} .nav-user-btn:hover{opacity:.85} /* Logged-out: gold OUTLINE shield + gold outline person, matching the 4 spoke sites which each use their site color in the same outline style. Stroke widths tuned against the spoke screenshots; these viewBoxes are different sizes (shield is 424 wide, person is 24 wide) so stroke-width values are not comparable cross-element. */ .nav-user-btn .shield-bg{width:48px;height:48px;position:absolute;top:0;left:0} .nav-user-btn .shield-bg path{fill:none;stroke:#D4A017;stroke-width:28;stroke-linejoin:round;transition:stroke .2s} .nav-user-btn:hover .shield-bg path{stroke:#f0c040} .nav-user-btn .person-icon{width:26px;height:26px;position:relative;z-index:2;fill:none;stroke:#D4A017;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;transform:translateY(-3px)} .nav-user-btn:hover .person-icon{stroke:#f0c040} /* Logged-in: FILLED gold gradient shield with black initial — unchanged, this is the "you're signed in" affordance and should remain distinct from the logged-out outline style. */ .nav-user-initial{display:none;width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer;position:relative;flex-shrink:0} .nav-user-initial .shield-fill{width:48px;height:48px;position:absolute;top:0;left:0;fill:url(#shieldGoldNav)} .nav-user-initial span{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;color:#0a0a0a;position:relative;z-index:2;letter-spacing:.5px;line-height:1} .nav-user-dropdown{position:fixed!important;top:134px!important;right:16px!important;background:#161616;border:1px solid rgba(212,160,23,.25);border-radius:8px;padding:6px;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.7);display:none;z-index:99999!important} .nav-user-dropdown.open{display:block} .nav-user-dropdown a{display:block;padding:9px 14px;font-size:13px;color:rgba(255,255,255,.8);text-decoration:none;border-radius:6px;transition:all .12s;font-weight:500} .nav-user-dropdown a:hover{background:rgba(212,160,23,.12);color:#f0c040} .nav-user-dd-divider{height:1px;background:rgba(255,255,255,.08);margin:6px 6px} .nav-user-dd-signout{color:rgba(239,83,80,.85)!important} .nav-user-dd-signout:hover{background:rgba(239,83,80,.1)!important;color:#ef5350!important} /* ============ SECONDARY NAV (site pages, row 2) ============ */ .nav-secondary{height:48px;display:flex;align-items:center;justify-content:center;padding:0 40px;gap:2px;background:#080808;position:relative} .nav-sec-link{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.55);padding:10px 18px;border-radius:6px;text-decoration:none;transition:all .15s;display:flex;align-items:center;gap:6px;position:relative} .nav-sec-link:hover{color:#fff;background:rgba(255,255,255,0.04)} .nav-sec-link.active{color:#D4A017} .nav-sec-link.active::after{content:"";position:absolute;bottom:-1px;left:18px;right:18px;height:2px;background:#D4A017;border-radius:2px} .nav-sec-divider{width:1px;height:16px;background:rgba(255,255,255,0.08);margin:0 4px} .nav-sec-parent{position:relative} .nav-sec-parent > .nav-sec-link::after{content:"▾";font-size:9px;margin-left:2px;opacity:0.6;transition:transform .15s} .nav-sec-parent:hover > .nav-sec-link::after{transform:rotate(180deg);opacity:1} .nav-sec-submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#111;border:1px solid rgba(212,160,23,0.2);border-radius:8px;padding:8px 6px 6px;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.7);display:none;z-index:10001} /* Hover-gap fix: use an invisible ::before bar that sits directly above the submenu background, filling the 2px visual gap between the parent link and the submenu. This extends the submenu's hit area UP to touch the parent, so the cursor never crosses an un-hovered region on its way down. The submenu itself also needs :hover coverage so we don't rely on the parent alone — without this, moving from the parent into the submenu briefly drops :hover and collapses the menu. */ .nav-sec-submenu::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:transparent;pointer-events:auto} .nav-sec-parent:hover .nav-sec-submenu,.nav-sec-parent:focus-within .nav-sec-submenu,.nav-sec-submenu:hover{display:block} .nav-sec-submenu a{display:block;padding:10px 14px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,0.75);text-decoration:none;border-radius:6px;transition:all .12s} .nav-sec-submenu a:hover{background:rgba(212,160,23,0.1);color:#f0c040} .nav-sec-submenu a.active{color:#D4A017;background:rgba(212,160,23,0.06)} /* ============ FULL FOOTER ============ */ .gv-footer{ background:#080808; border-top:1px solid rgba(212,160,23,0.12); padding:60px 0 0; margin-top:60px; position:relative; } .gv-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(212,160,23,0.3) 50%,transparent 100%); } .gv-footer-inner{ max-width:1180px; margin:0 auto; padding:0 40px; } .gv-footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px; } .gv-footer-brand{ display:flex; flex-direction:column; gap:18px; } .gv-footer-logo img{height:40px;display:block} .gv-footer-tagline{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; line-height:1.4; color:rgba(255,255,255,0.55); letter-spacing:0.3px; max-width:280px; } .gv-footer-social{ display:flex; gap:10px; margin-top:6px; } .gv-footer-social a{ width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); transition:all .15s; text-decoration:none; } .gv-footer-social a:hover{ border-color:rgba(212,160,23,0.3); color:#D4A017; background:rgba(212,160,23,0.08); } .gv-footer-col h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:#D4A017; margin:0 0 18px; } .gv-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .gv-footer-col a{ font-family:'Barlow',sans-serif; font-size:14px; color:rgba(255,255,255,0.62); text-decoration:none; transition:color .15s; } .gv-footer-col a:hover{color:#fff} .gv-footer-col a.gv-footer-badge{ display:inline-flex; align-items:center; gap:6px; } .gv-footer-col a.gv-footer-badge::after{ content:"Free"; font-family:'Barlow Condensed',sans-serif; font-size:9px; letter-spacing:1.2px; font-weight:700; text-transform:uppercase; padding:2px 6px; border-radius:3px; background:rgba(74,222,128,0.12); color:#4ade80; border:1px solid rgba(74,222,128,0.25); } /* ============ PLATFORM STRIP ============ */ .gv-footer-platforms{ padding:30px 0; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .gv-footer-platforms-label{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); } .gv-footer-platforms-grid{ display:flex; gap:4px; flex-wrap:wrap; } .gv-footer-platform{ display:flex; flex-direction:column; align-items:center; padding:8px 14px; border-radius:6px; text-decoration:none; transition:all .15s; } .gv-footer-platform:hover{background:rgba(255,255,255,0.05)} .gv-footer-platform-num{ font-family:'Barlow Condensed',sans-serif; font-size:9px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,0.3); } .gv-footer-platform-word{ font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); transition:color .15s; } .gv-footer-platform:hover .gv-footer-platform-word{color:#fff} .gv-footer-platform.current .gv-footer-platform-word{color:#D4A017} /* ============ COPYRIGHT BAR ============ */ .gv-footer-bottom{ padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .gv-footer-copy{ font-family:'Barlow',sans-serif; font-size:12px; color:rgba(255,255,255,0.4); letter-spacing:0.3px; } .gv-footer-copy .gv-footer-sep{margin:0 10px;opacity:0.5} .gv-footer-made{ font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); display:flex; align-items:center; gap:8px; } .gv-footer-made svg{width:20px;height:14px} /* ============ LOGIN MODAL (inherited) ============ */ .gv-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:99999;display:none;align-items:center;justify-content:center;padding:20px} .gv-modal-overlay.open{display:flex} .gv-modal{background:#111;border-radius:14px;padding:32px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.7);position:relative;border:1px solid rgba(212,160,23,.2)} .gv-modal-close{position:absolute;top:14px;right:14px;background:transparent;border:none;color:rgba(255,255,255,.4);font-size:28px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:color .15s} .gv-modal-close:hover{color:#fff} .gv-modal-logo{text-align:center;margin-bottom:14px} .gv-modal-logo img{height:48px;display:inline-block;max-height:48px} .gv-modal h2{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:-.3px;color:#fff;text-align:center;margin:0 0 6px;line-height:1.1} .gv-modal-sub{text-align:center;font-size:13px;color:rgba(255,255,255,.45);margin:0 0 22px} .gv-modal-tabs{display:flex;gap:8px;background:rgba(255,255,255,.04);padding:4px;border-radius:10px;margin-bottom:22px} .gv-modal-tab{flex:1;background:transparent;border:none;color:rgba(255,255,255,.55);font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;letter-spacing:.5px;padding:10px;border-radius:7px;cursor:pointer;transition:all .15s} .gv-modal-tab.active{background:rgba(212,160,23,.15);color:#f0c040} .gv-modal-tab:hover:not(.active){color:rgba(255,255,255,.8)} .gv-modal-field{margin-bottom:16px} .gv-modal-label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px} .gv-modal-input{width:100%;background:#0a0a0a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 14px;color:#fff;font-size:14px;font-family:'Barlow',sans-serif;transition:all .15s;outline:none;box-sizing:border-box} .gv-modal-input:focus{border-color:#D4A017;background:#0f0f0f} .gv-modal-input::placeholder{color:rgba(255,255,255,.25)} .gv-modal-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:12px;color:rgba(255,255,255,.55)} .gv-modal-row label{display:flex;align-items:center;gap:6px;cursor:pointer} .gv-modal-forgot{color:#D4A017;text-decoration:none} .gv-modal-forgot:hover{text-decoration:underline} .gv-modal-submit{width:100%;background:var(--gold-grad-btn);border:none;color:#0a0a0a;padding:13px;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .15s;box-shadow:0 2px 10px rgba(212,160,23,.2)} .gv-modal-submit:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,160,23,.35)} .gv-modal-footer{text-align:center;margin-top:18px;font-size:12px;color:rgba(255,255,255,.4)} .gv-modal-footer a{color:#D4A017;text-decoration:none;font-weight:600} .gv-modal-footer a:hover{text-decoration:underline} .gv-modal-error{background:rgba(239,83,80,.1);border:1px solid rgba(239,83,80,.3);color:#ef5350;padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none} .gv-modal-error.show{display:block} .gv-modal-success{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.3);color:#4caf50;padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none} .gv-modal-success.show{display:block} .gv-loggedin-panel{display:none;text-align:center} .gv-loggedin-panel.show{display:block} .gv-loggedin-avatar{width:72px;height:72px;border-radius:50%;background:var(--gold-grad);display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;margin:0 auto 14px} .gv-loggedin-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:#fff;margin-bottom:4px;letter-spacing:-.3px} .gv-loggedin-email{font-size:13px;color:rgba(255,255,255,.4);margin-bottom:6px} .gv-loggedin-links{display:flex;flex-direction:column;gap:6px;margin-bottom:18px} .gv-loggedin-link{padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;color:rgba(255,255,255,.75);font-size:13px;text-decoration:none;text-align:left;transition:all .15s;font-weight:500} .gv-loggedin-link:hover{background:rgba(212,160,23,.08);border-color:rgba(212,160,23,.25);color:#f0c040} .gv-loggedin-logout{width:100%;background:transparent;border:1px solid rgba(239,83,80,.3);color:#ef5350;padding:10px;border-radius:8px;font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .15s} .gv-loggedin-logout:hover{background:rgba(239,83,80,.08);border-color:rgba(239,83,80,.5)} /* ============ LOGIN MODAL — MOBILE ============ * The modal is the most-used surface on the ecosystem (every sign-in across * all 5 sites). Base styles target desktop; on phone we need to: * - Reduce horizontal padding so inputs get usable width on narrow screens * - Stack First/Last Name fields (2-col grid is inline-only in modal.html, * so we override via direct selector) * - Let the credit chips wrap cleanly * - Tighten the OTP input letter-spacing so 6 digits fit at 380px width * - Use dvh fallback for iOS Safari where 90vh is wrong under dynamic toolbars */ @media (max-width:600px){ .gv-modal-overlay{padding:12px} .gv-modal{padding:22px 18px;border-radius:12px;max-height:calc(100vh - 24px)} .gv-modal-close{top:8px;right:8px;width:40px;height:40px;font-size:26px} .gv-modal-logo img{height:40px;max-height:40px} .gv-modal h2{font-size:22px} .gv-modal-sub{font-size:12px;margin-bottom:16px} .gv-modal-tabs{margin-bottom:16px} .gv-modal-tab{font-size:12px;padding:9px 6px;letter-spacing:.3px} .gv-modal-field{margin-bottom:12px} .gv-modal-input{font-size:16px;padding:12px 12px} /* 16px prevents iOS Safari zoom on focus */ /* Stack the First/Last Name row (uses inline grid-template-columns in markup) */ #gvRegisterForm > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:0 !important} /* OTP field — tighten letter-spacing so 6 digits don't overflow */ #gvOtpCode{font-size:24px !important;letter-spacing:6px !important} .gv-modal-submit{padding:14px;font-size:13px;letter-spacing:1.6px} /* Logged-in panel — credit chips wrap nicely */ .gv-loggedin-avatar{width:60px;height:60px;font-size:24px;margin-bottom:10px} .gv-loggedin-name{font-size:19px} .gv-loggedin-plan-row,.gv-loggedin-credits{flex-wrap:wrap;justify-content:center} .gv-loggedin-link{font-size:13px;padding:11px 14px} .gv-loggedin-logout{padding:12px;font-size:13px} } @media (max-width:380px){ .gv-modal{padding:18px 14px} .gv-modal h2{font-size:20px} /* 6 digits × (24px + 6px spacing) ≈ 180px needed; tighten further on SE */ #gvOtpCode{font-size:22px !important;letter-spacing:4px !important} } /* ============ RESPONSIVE ============ */ @media(max-width:1100px){ .gv-footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr} .gv-footer-col.gv-footer-col-last{display:none} } @media(max-width:900px){ .nav{padding:0 20px} .nav-step{padding:6px 12px} .nav-step-word{font-size:14px;letter-spacing:1.5px} .nav-logo img{height:56px} .nav-secondary{padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none} .nav-secondary::-webkit-scrollbar{display:none} .nav-sec-link{flex-shrink:0;padding:10px 14px;font-size:12px;letter-spacing:1.5px} .nav-sec-submenu{position:fixed;top:auto;left:20px;right:20px;transform:none;margin-top:0;padding-top:12px} .gv-footer-top{grid-template-columns:1fr 1fr;gap:32px} .gv-footer-brand{grid-column:span 2} .gv-footer-col-last{display:block} } @media(max-width:720px){ .nav-steps{gap:2px} .nav-step{padding:4px 8px} .nav-step-word{font-size:11px;letter-spacing:1px} .nav-step-num{font-size:9px} .nav-divider{height:20px} .nav-logo-full{display:none}.nav-logo-icon{display:block} .nav-user-btn,.nav-user-initial{width:40px;height:40px} .gv-footer-inner{padding:0 24px} .gv-footer-platforms{flex-direction:column;align-items:flex-start;gap:12px} .gv-footer-bottom{flex-direction:column;align-items:flex-start;gap:12px} } @media(max-width:480px){ .nav{padding:0 12px;height:68px} .nav-user-divider{margin:0 6px} .nav-wrap{border-bottom:1px solid rgba(212,160,23,.15)} .nav-secondary{height:44px;padding:0 12px} .nav-user-dropdown{top:118px;right:8px;min-width:180px} .gv-footer-top{grid-template-columns:1fr} .gv-footer-brand{grid-column:span 1} } /* ============================================================ * Per-site brand color overrides for the sign-in modal (v2.0.3). * * The render_modal() PHP sets `--gv-modal-accent` and * `--gv-modal-accent-rgb` as inline CSS vars on .gv-modal-overlay * based on the current host: * * gunvault.co #C8962A (gold) * gunshare.com #c0392b (red) * guntransfer.com #6E9631 (green) * gunprice.com #1E88E5 (blue) * gunclear.com #FFFFFF (white — strict B&W only) * * These rules are scoped under .gv-modal-overlay so they only * affect the sign-in modal, NOT the rest of the site (which * keeps its gold/brand styling). Specificity is higher than the * default gold-styled rules above, so these win without !important. * ============================================================ */ .gv-modal-overlay .gv-modal{ border-color: rgba(var(--gv-modal-accent-rgb, 212,160,23), .25); } .gv-modal-overlay .gv-modal-tab.active{ background: rgba(var(--gv-modal-accent-rgb, 212,160,23), .15); color: var(--gv-modal-accent, #f0c040); } .gv-modal-overlay .gv-modal-input:focus{ border-color: var(--gv-modal-accent, #D4A017); box-shadow: 0 0 0 3px rgba(var(--gv-modal-accent-rgb, 212,160,23), .15); } .gv-modal-overlay .gv-modal-forgot{ color: var(--gv-modal-accent, #D4A017); } .gv-modal-overlay .gv-modal-link-resend{ color: var(--gv-modal-accent, #D4A017); } .gv-modal-overlay .gv-modal-submit{ background: var(--gv-modal-accent, #D4A017); color: #fff; box-shadow: 0 2px 10px rgba(var(--gv-modal-accent-rgb, 212,160,23), .3); } .gv-modal-overlay .gv-modal-submit:hover{ filter: brightness(1.08); } .gv-modal-overlay .gv-modal-footer a{ color: var(--gv-modal-accent, #D4A017); } /* Hub (gunvault.co) keeps the rich gold gradient on the Sign In * button — solid gold doesn't have the same shine. */ .gv-modal-overlay[data-gv-site="vault"] .gv-modal-submit{ background: var(--gold-grad-btn); color: #0a0a0a; } /* GunClear is strict black & white. White button looks washed out * against the dark modal, so use a near-white button with a thin * dark border for contrast and dark text. */ .gv-modal-overlay[data-gv-site="clear"] .gv-modal-submit{ background: #fff; color: #111; box-shadow: 0 2px 10px rgba(255,255,255,.15); } .gv-modal-overlay[data-gv-site="clear"] .gv-modal-tab.active{ background: rgba(255,255,255,.12); color: #fff; } .gv-modal-overlay[data-gv-site="clear"] .gv-modal-input:focus{ border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } /* ============================================================ * Chrome/Safari autofill override (v2.0.6). * * When Chrome auto-fills a field — or when iOS suggests an OTP * from a recent email — the browser paints its own background * (typically near-white). With our default `color:#fff` text * that makes the typed code invisible in the OTP field. This * forces the input to keep the dark modal-style background and * white text regardless of autofill state. * * The 1000px box-shadow trick is the canonical way to recolor * an autofilled input — vendor APIs don't expose direct background * control. -webkit-text-fill-color overrides the autofill text * color (which `color` alone can't reach). * ============================================================ */ .gv-modal-overlay .gv-modal-input:-webkit-autofill, .gv-modal-overlay .gv-modal-input:-webkit-autofill:hover, .gv-modal-overlay .gv-modal-input:-webkit-autofill:focus, .gv-modal-overlay .gv-modal-input:-webkit-autofill:active{ -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important; box-shadow: 0 0 0 1000px #0a0a0a inset !important; caret-color: #fff !important; transition: background-color 5000s ease-in-out 0s; /* defer browser repaint */ } /* ============================================================ * OTP input placeholder — show "000000" in the per-site brand * color so it reads as a hint pattern, not a forgotten placeholder. * The accent CSS variable is set on .gv-modal-overlay by render_modal. * On GunClear (B&W) we keep the placeholder near-white at lower * opacity since the accent there is pure white. * ============================================================ */ .gv-modal-overlay .gv-otp-input::placeholder{ color: var(--gv-modal-accent, #C8962A); opacity: .35; font-weight: 800; letter-spacing: 10px; } .gv-modal-overlay .gv-otp-input::-webkit-input-placeholder{ color: var(--gv-modal-accent, #C8962A); opacity: .35; } .gv-modal-overlay[data-gv-site="clear"] .gv-otp-input::placeholder{ color: rgba(255,255,255,.3); } /* ============================================================ * Legacy nav hide (v2.0.9). Replaces v2.0.8's destructive DOM * removal which nuked entire Elementor page sections. The chrome.js * runtime now adds `.gv-legacy-nav-hidden` to any