/* Gun Vault Chrome — auto-generated, v3.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%); } /* v3.0.14: removed the global html,body,elementor-* black background rules. They were forcing #0a0a0a on every page across all 5 sites, breaking ~450 white-background pages on guntransfer.com (checkout, create-new- transfer, etc.) and on gunprice.com which uses light backgrounds. Pages that genuinely want a dark background should set it via their own page/template CSS, not via global chrome rules. */ body{font-family:'Barlow',sans-serif;overflow-x:hidden} .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 !important;border-bottom:1px solid rgba(212,160,23,.15)} /* v3.0.17: defensive bg on the inner nav row so legacy/leftover Elementor CSS (e.g. cream-color #d8d8d2 rules from the original HTML page builds on share/price) can't override the chrome's intended dark nav. The wrapper bg is normally enough but legacy rules sometimes target .nav directly with !important — we have to fight back. */ .nav-wrap nav.nav{background:#0a0a0a !important} /* GunPrice intentionally uses a gray nav (NOT cream) per design system. */ .nav-wrap[data-gv-site="price"] nav.nav{background:#bbbbbb !important} /* v3.0.20: GunShare also uses the light-gray nav (matches the per-site text-color overrides further down that already anticipate dark text on a light bg for both price AND share). The original Share build shipped with a black nav by accident — the bg override was missing even though the supporting text-color rules existed. */ .nav-wrap[data-gv-site="share"] nav.nav{background:#bbbbbb !important} /* ============ 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 !important} .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:absolute !important;top:calc(100% + 12px) !important;right:0 !important;background:#0a0a0a !important;border:1px solid rgba(212,160,23,.25) !important;border-radius:8px !important;padding:6px !important;min-width:200px !important;box-shadow:0 10px 30px rgba(0,0,0,.7) !important;display:none;z-index:99999 !important} /* v3.0.17: vault has a 2nd nav row below row 1 (~48px + 1px border). The user icon is in row 1, so the absolute-positioned dropdown would overlap row 2. Push it down to clear it. */ /* v3.0.19: REVERTED — Rand wants dropdown directly under the icon on ALL 5 sites, including hub. The dropdown overlapping the secondary nav row visually is acceptable (it's standard dropdown behavior — z-index puts it on top, just like every product UI). The unified single rule wins. */ .nav-user-dropdown.open{display:block} .nav-user-dropdown a{display:block !important;padding:9px 14px !important;font-size:13px !important;color:rgba(255,255,255,.85) !important;text-decoration:none;border-radius:6px !important;transition:all .12s;font-weight:500 !important} .nav-user-dropdown a:hover{background:rgba(212,160,23,.12) !important;color:#f0c040 !important} /* v3.0.20: Defensive reset — spoke themes (price, clear, share) add global border-bottom/text-decoration on every that bleeds into the dropdown rows as white horizontal lines between every menu item. Transfer doesn't have those theme rules, which is why its dropdown reads cleanly. Force OFF every border/outline/decoration on dropdown s so every site matches Transfer's clean panel. */ .nav-user-dropdown a, .nav-user-dropdown a:hover, .nav-user-dropdown a:focus, .nav-user-dropdown a:active, .nav-user-dropdown a:visited{ border:0 !important; outline:0 !important; text-decoration:none !important; box-shadow:none !important; } .nav-user-dropdown a::before, .nav-user-dropdown a::after{ display:none !important; border:0 !important; background:none !important; } /* v3.0.16: icon rows in dropdown — show site icon next to label for destination-site rows (My Vault / My Transfers / My Listings). Account / Billing / Sign Out stay text-only since they're user actions, not site destinations. */ .nav-user-dropdown a.nav-user-dd-icon-row{display:flex !important;align-items:center !important;gap:10px !important} .nav-user-dropdown a.nav-user-dd-icon-row img{width:20px !important;height:20px !important;object-fit:contain !important;flex-shrink:0 !important;display:block !important} /* v3.0.22: Top-3 destination rows (My Vault / My Transfers / My Listings) render their label inside a so the icon and text can sit on a flex row. On guntransfer.com a theme rule was incidentally inflating any font-size to 18px, which made the top 3 read noticeably bigger than the bottom 3 (My Account / Billing / Sign Out — no spans, inherit 13px straight from the ). Rand wanted this look on every site, not just Transfer-by-accident. So we lock the span at 18px here, !important to defeat any spoke-theme rule that might want to reshape it. The bottom-3 items have no .nav-user-dd-icon-row class, so they keep the base 13px and the size hierarchy is preserved by design rather than by theme leak. */ .nav-user-dropdown a.nav-user-dd-icon-row span{display:block !important;font-size:18px !important;font-weight:500 !important;letter-spacing:0.2px !important;line-height:1.2 !important} .nav-user-dd-divider{height:1px !important;background:rgba(255,255,255,.08) !important;margin:6px 6px !important} .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 !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:8px;padding:12px 14px;color:#fff !important;font-size:14px;font-family:'Barlow',sans-serif;transition:all .15s;outline:none;box-sizing:border-box} .gv-modal-input:focus{border-color:#D4A017 !important;background:#0f0f0f !important} .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{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{ /* GunClear is strict B&W. The modal's input field has a * light background, so white-on-white was invisible. Mid-gray * reads on any background regardless of the surrounding theme. */ color: rgba(140,140,140,.55); } .gv-modal-overlay[data-gv-site="clear"] .gv-otp-input{ /* Slight off-white background so the gray placeholder digits * have a softer panel under them. Doesn't affect typed-in * digits since those use the input's normal text color. */ background: #f4f4f4; } /* ============================================================ * 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