/* ═══════════════════════════════════════════════════════════════ shared-nav.css — mobile nav / burger menu + navy header (.nav-blue). Formerly injected at runtime by public/shared.js (injectSharedStyles). MUST load LAST on every page (after common.css and the per-page file) to preserve the original cascade, where shared.js appended it to after the page's styles. ═══════════════════════════════════════════════════════════════ */ body.menu-open { overflow:hidden; touch-action:none; } .nav-burger { display:none; width:44px; height:44px; border:1.5px solid rgba(24,18,14,.1); border-radius:14px; background:rgba(255,255,255,.92); align-items:center; justify-content:center; cursor:pointer; color:#0d2040; box-shadow:0 10px 30px rgba(13,32,64,.08); } .nav-burger span,.nav-burger span::before,.nav-burger span::after { display:block; position:relative; width:18px; height:2px; background:currentColor; border-radius:999px; transition:transform .25s ease,opacity .2s ease; content:""; } .nav-burger span::before { position:absolute; top:-6px; left:0; } .nav-burger span::after { position:absolute; top:6px; left:0; } .nav-open .nav-burger span { background:transparent; } .nav-open .nav-burger span::before { top:0; transform:rotate(45deg); } .nav-open .nav-burger span::after { top:0; transform:rotate(-45deg); } .nav-overlay { position:fixed; inset:0; background:rgba(13,32,64,.38); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:450; } .nav-open .nav-overlay { opacity:1; pointer-events:auto; height:100vh; } .nav-mobile-phone,.nav-mobile-cta,.nav-mobile-wa { display:none; } /* WhatsApp icon button in desktop nav */ .nav-wa { display:inline-flex; align-items:center; justify-content:center; color:#25D366; transition:transform .18s; } .nav-wa svg { width:22px; height:22px; } .nav-wa:hover { transform:scale(1.1); } @media (max-width: 1024px) { .nav-row { height:auto; min-height:68px; gap:14px; justify-content:space-between; } .nav-logo img { height:28px !important; } .nav-burger { display:inline-flex; flex-shrink:0; } .nav-end { display:none !important; } .nav-menu { position:fixed; top:0; right:0; width:min(86vw,360px); height:100vh; padding:92px 20px 28px; display:flex !important; flex-direction:column; align-items:stretch; gap:10px; overflow:auto; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,243,238,.98)); box-shadow:-24px 0 60px rgba(13,32,64,.18); transform:translateX(108%); transition:transform .28s cubic-bezier(.22,1,.36,1); z-index:500; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .nav-open .nav-menu { transform:translateX(0); } .nav-menu a { padding:14px 16px !important; font-size:16px !important; border-radius:16px !important; background:rgba(255,255,255,.72); border:1px solid rgba(13,32,64,.08); } .nav-menu a.active { background:rgba(255,74,28,.12) !important; border-color:rgba(255,74,28,.25); } .nav-mobile-phone,.nav-mobile-cta,.nav-mobile-wa { display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:16px; font-weight:800; text-decoration:none; } .nav-mobile-wa { gap:8px; background:#25D366; color:#fff; box-shadow:0 16px 32px rgba(37,211,102,.22); } .nav-mobile-wa svg { width:20px; height:20px; } .nav-mobile-phone { margin-top:10px; background:#0d2040; color:#fff; box-shadow:0 16px 32px rgba(13,32,64,.18); } .nav-mobile-cta { background:linear-gradient(135deg,#ff7b49,#ff4a1c); color:#fff; box-shadow:0 16px 32px rgba(255,74,28,.24); } .section { padding:72px 0 !important; } .hero-wrap { padding-top:32px !important; } .hero-grid,.s2-wrap,.s3-wrap,.why-grid,.cta-inner,.partners-hero,.partners-cta-layout,.catalog-layout,.md-body,.hero-btns,.dfl-row,.gf-2,.pctb-form-row { grid-template-columns:1fr !important; flex-direction:column; } .hero-grid,.s2-wrap,.s3-wrap,.why-grid,.catalog-layout,.md-body,.partners-hero { gap:28px !important; } .hero-btns,.cta-btns { display:flex; flex-direction:column; align-items:stretch; gap:12px !important; } .hero-btns .btn,.cta-btns .btn,.partners-hero-cta,.partners-hero-visual,.partners-cta-block { width:100%; justify-content:center; } .calc-box,.form-card,.partners-principle,.news-cta-band,.cat-sidebar,.md-panel { padding-left:24px !important; padding-right:24px !important; } .carousel-track .deal { flex:0 0 100% !important; } .carousel-btn { display:none !important; } .footer-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; } .footer-btm { flex-direction:column; align-items:flex-start !important; gap:14px !important; } .ftb-l { gap:10px !important; } .deals-section-hd { flex-direction:column; align-items:flex-start !important; gap:10px; } .how-grid { grid-template-columns:1fr 1fr !important; } .fin-grid,.stats-2x2 { grid-template-columns:1fr 1fr !important; } .why-num-card { padding:20px !important; } .partners-hero-visual,.news-hero,.ins-inner { max-width:none !important; } .catalog-wrap { padding-top:24px !important; } .cat-sidebar { position:static !important; top:auto !important; } .md-head { flex-direction:column; align-items:flex-start !important; } .md-apply { width:100%; justify-content:center; } .md-result { gap:12px; flex-direction:column; align-items:flex-start !important; } } @media (max-width: 720px) { .wrap { padding-left:16px !important; padding-right:16px !important; } .section { padding:56px 0 !important; } .sec-hd { margin-bottom:28px !important; } .hero-h1,.partners-title,.news-title,.ins-title,.sec-title,.form-title,.calc-title { line-height:1.06 !important; } .hero-h1 { font-size:clamp(30px,9vw,42px) !important; } .sec-title,.partners-title,.news-title,.ins-title { font-size:clamp(28px,8vw,36px) !important; } .calc-box,.form-card,.partners-hero-visual,.partners-principle,.news-cta-band,.partners-cta-block { padding:22px !important; border-radius:24px !important; } .form-title { margin-bottom:20px !important; } .calc-result,.md-result,.cta-inner,.partners-cta-layout { gap:14px !important; } .how-grid,.partners-approach-grid,.footer-grid,.fin-grid,.stats-2x2 { grid-template-columns:1fr !important; } .products-grid,.adv-3,.reviews-grid,.benefits,.why-feats,.deals-grid { grid-template-columns:1fr !important; } .fin-stats { grid-template-columns:1fr !important; } .deal-pw { height:120px !important; } .deal-body,.prod-body,.review-card,.how-step,.why-feat,.pw-card,.partner-form,.pctb-form { padding:18px !important; } .nav-menu { width:min(92vw,360px); padding-top:84px; } .catalog-layout { gap:18px !important; } .md-panel-body,.md-panel-hd { padding:14px !important; } .md-variants-grid { grid-template-columns:1fr 1fr !important; } } @media (max-width: 480px) { .nav-row { min-height:62px; } .nav-logo img { height:24px !important; } .hero-pill,.news-badge,.ins-badge,.partners-badge { width:100%; justify-content:center; } .adv-item,.why-num-card,.phv-item,.review-card,.deal,.prod-card { border-radius:18px !important; } .calc-box,.form-card,.partners-hero-visual,.news-cta-band,.partners-cta-block,.cat-sidebar { padding:18px !important; } .gf input,.gf select,.dfl input,.dfl textarea,.dfl select,.sub-btn,.calc-btn,.md-submit { min-height:52px; } .dfl textarea { min-height:120px; } .md-variants-grid { grid-template-columns:1fr !important; } } .nav.nav-blue { background:var(--navy); border-bottom:1px solid rgba(255,255,255,.10); } .nav.nav-blue.scrolled { box-shadow:0 4px 22px rgba(13,32,64,.45); } .nav-blue .nav-logo img { filter:brightness(0) invert(1); } .nav-blue .nav-menu a { color: rgb(255 255 255); } .nav-blue .nav-menu a:hover { color:grey; background:rgba(255,255,255,.10); } .nav-blue .nav-menu a.active { color:grey; } .nav-blue .nav-phone { color:#fff !important; } .nav-blue .nav-phone:hover { color:var(--orange-l); } .nav-blue .nav-lk { color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.25); } .nav-blue .nav-lk:hover { border-color:var(--orange); color:#fff; background:rgba(255,74,28,.2); } @media (max-width:1024px) { .nav-blue .nav-burger { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); color:#fff; } .nav-blue .nav-menu a { color: rgb(66 64 64); } }