/* ============================================================ NORTH PRIVACY ADVISORS — MOBILE RESPONSIVE STYLES Applies to all pages. Linked in after inline styles. ============================================================ */ /* ── HAMBURGER BUTTON ── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .nav-toggle span { display: block; height: 1.5px; background: var(--navy); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── MOBILE MENU PANEL ── */ .nav-mobile-panel { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(235,243,250,0.98); backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 80px 40px 40px; overflow-y: auto; } .nav-mobile-panel.open { display: flex; } .nav-mobile-panel a { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 300; color: var(--navy); text-decoration: none; padding: 14px 0; width: 100%; text-align: center; border-bottom: 1px solid var(--border); transition: color 0.2s; } .nav-mobile-panel a:last-child { border-bottom: none; } .nav-mobile-panel .mob-cta { margin-top: 24px; background: var(--navy); color: #fff !important; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.05em; padding: 14px 36px; border-bottom: none !important; } /* Hide mobile-only elements on desktop */ .map-mobile-fallback { display: none; } .mobile-quick-links { display: none; } .map-desktop-btn { display: block; } /* Legend shown on desktop only */ .map-legend-desktop { display: flex !important; } @media (max-width: 768px) { /* MOBILE QUICK LINKS STRIP — shows on mobile only */ .mobile-quick-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; padding: 24px 20px; background: var(--white); border-bottom: 1px solid var(--border); } .mob-quick-link { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; background: var(--sky); border-radius: 10px; text-decoration: none; border: 1px solid var(--border); text-align: center; } .mob-quick-link svg { color: var(--silver); } .mob-quick-link span { font-size: 11px; font-weight: 500; color: var(--navy); letter-spacing: 0.04em; line-height: 1.3; } /* NAV */ nav { padding: 14px 20px; } .nav-links { display: none !important; } .nav-toggle { display: flex; } .logo-text { font-size: 14px; } .logo-text span { font-size: 8px; } nav img[alt="North Privacy Advisors"] { height: 30px !important; } /* HERO — index page */ .hero-content { padding: 0 24px 80px; } .hero-headline { font-size: clamp(38px, 10vw, 56px); } .hero-sub { font-size: 15px; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; } .hero-scroll { right: 24px; bottom: 28px; font-size: 9px; } /* GENERAL SECTIONS */ section { padding: 72px 24px; } hr.divider { margin: 0 24px; } /* TWO-COLUMN GRIDS → SINGLE */ .why-header, .laws-map-header, .services-header, .origin-inner, .hero-inner, .g2, [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { display: block !important; grid-template-columns: 1fr !important; } .why-header > *, .laws-map-header > *, .services-header > *, .origin-inner > *, .hero-inner > *, .g2 > * { margin-bottom: 32px; } /* THREE-COLUMN GRIDS → TWO-COLUMN on mobile for cards */ .why-cards, .services-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } /* WHY CARDS — compact on mobile */ .why-card { margin-bottom: 0; padding: 20px 16px !important; } .why-number { font-size: 32px !important; margin-bottom: 8px !important; } .why-card h3 { font-size: 12px !important; margin-bottom: 6px !important; } .why-card p { font-size: 11px !important; line-height: 1.55 !important; } /* SERVICE CARDS — compact */ .service-card { margin-bottom: 0; padding: 22px 18px !important; } .service-title { font-size: 16px !important; } .service-desc { font-size: 12px !important; } /* PROCESS STEPS and other 3-col grids → single column (fallback) */ .map-table { display: block !important; } /* FOOTER — compact mobile layout */ footer { padding: 36px 24px 0 !important; } .fi { padding: 0; } /* Hide the brand/logo block — redundant on mobile */ .fb { display: none !important; } /* Four link columns → 2x2 grid */ .ft, .footer-top, [style*="grid-template-columns:2fr 1fr 1fr 1fr"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; padding-bottom: 28px !important; } .fc, .footer-col { margin-bottom: 0; } .fc h4 { margin-bottom: 10px !important; } .fc ul li { margin-bottom: 7px !important; } .fc ul li a { font-size: 12px !important; } /* Footer bottom — single line */ .fbot { flex-direction: column; gap: 4px; text-align: center; padding: 16px 0 !important; } .footer-bottom { flex-direction: column; gap: 4px; text-align: center; } .fcp { font-size: 10px !important; } /* Marquee — hide on mobile, saves a full screen height */ .fm { display: none !important; } /* ASSESSMENT CTA BAND */ [style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] { gap: 0 !important; } /* STAT ROWS — 2-per-row grid, compact */ .stats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; border-top: 1px solid var(--border); } .stat-row { flex-direction: column !important; align-items: flex-start; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-top: none !important; } .stat-row:nth-child(even) { border-right: none; } .stat-row:nth-last-child(-n+2) { border-bottom: none; } .stat-value { font-size: 36px !important; line-height: 1 !important; } .stat-label { font-size: 11px !important; line-height: 1.4 !important; } /* PAGE-HERO (inner pages) */ .page-hero { padding: 120px 24px 60px; } .page-hero .hero-inner { display: block !important; } /* ACHIEVE / VALUE GRIDS */ .achieve-grid { grid-template-columns: 1fr !important; } .value-item { grid-template-columns: 36px 1fr; gap: 16px; } /* DARK CTA */ .cta-dark, .dark-cta { padding: 80px 24px; } /* MAP */ .map-container { padding: 16px; border-radius: 10px; } .map-legend { flex-wrap: wrap; gap: 12px; } /* RESOURCES PAGE */ .privacy-laws-inner, .resources-inner { padding: 0; } /* ORIGIN VISUAL — hide image on mobile, it wastes space */ .origin-visual { display: none !important; } /* EXPERTISE section — remove excess top padding */ .expertise { padding-top: 48px !important; } .expertise-header { margin-bottom: 32px !important; } /* MAP — hide legend and desktop button on mobile */ .map-legend-desktop { display: none !important; } .map-desktop-link { display: none !important; } /* HOW WE WORK — 2 per row on mobile */ .process-steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; } .step { padding: 20px 16px !important; text-align: left !important; } .step-num { margin: 0 0 14px 0 !important; width: 44px !important; height: 44px !important; font-size: 18px !important; } .step h3 { font-size: 17px !important; } .step p { font-size: 12px !important; line-height: 1.6 !important; } .process-steps::before { display: none; } /* RESOURCES GRID — 2 per row on mobile */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; } /* MAP — hide interactive D3 map on mobile, show message + link instead */ .map-container { display: none !important; } .map-mobile-fallback { display: block !important; } .map-desktop-btn { display: none !important; } .map-legend-desktop { display: none !important; } /* HOW WE WORK — 2-per-row on mobile */ .process-steps { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; } .step { padding: 0; text-align: left; } .step-num { margin: 0 0 12px 0; width: 44px; height: 44px; font-size: 18px; } .step h3 { font-size: 15px; margin-bottom: 6px; } .step p { font-size: 12px; line-height: 1.6; } .process-steps::before { display: none; } /* RESOURCES grid — 2-per-row on mobile */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .laws-map { padding-top: 48px !important; padding-bottom: 48px !important; } .laws-map-header { margin-bottom: 24px !important; } /* WHY PRIVACY section — reduce padding */ .why-privacy { padding: 56px 24px !important; } .why-header { margin-bottom: 40px !important; } /* RESOURCES page — map area */ .privacy-laws-map-section .map-container { display: none !important; } /* General section padding tightening */ section { padding: 56px 24px !important; } /* PROFILE CARD */ .profile-card { margin-bottom: 32px; } .cred-badges { flex-direction: column; } .why-strip { padding: 40px 28px; border-radius: 12px; } /* CONTACT / BOOKING */ .booking-grid, [style*="grid-template-columns:1fr"][style*="contact"] { display: block !important; } /* SERVICE DETAIL PAGES */ .service-detail-grid { display: block !important; } /* BLOG */ .blog-grid, [class*="blog"] .posts-grid { grid-template-columns: 1fr !important; } /* INLINE STYLE OVERRIDES for padded sections */ [style*="padding:120px 80px"], [style*="padding: 120px 80px"] { padding: 56px 24px !important; } [style*="padding:100px 80px"], [style*="padding: 100px 80px"] { padding: 56px 24px !important; } [style*="padding:80px 80px"], [style*="padding: 80px 80px"] { padding: 48px 24px !important; } [style*="padding:140px 80px"], [style*="padding: 140px 80px"] { padding: 64px 24px !important; } /* RESOURCES PAGE — inline grid with auto column */ [style*="grid-template-columns:1fr auto"], [style*="grid-template-columns: 1fr auto"] { display: block !important; } [style*="grid-template-columns:1fr auto"] > *, [style*="grid-template-columns: 1fr auto"] > * { margin-bottom: 20px; } /* Lead magnet + assess band */ .lead-magnet { padding: 32px 24px !important; gap: 28px !important; } .assess-band { padding: 28px 24px !important; } /* Articles grid on resources page */ .articles-grid { grid-template-columns: 1fr !important; } /* MAX-WIDTH CONTAINERS with big left/right margins */ [style*="max-width:1100px"], [style*="max-width: 1100px"] { margin-left: 0 !important; margin-right: 0 !important; } /* HERO SECTION padding override */ .hero-content { padding-left: 24px !important; padding-right: 24px !important; } }