/* ================================================================ ASG Forensics — Responsive Styles Resolution-aware: JS sets data-vp on for per-device targeting Breakpoints: xxs≤359 | xs≤374 | sm≤389 | md≤413 | lg≤479 | ≤767 | ≤1023 ================================================================ */ /* ── CSS Custom Properties (override per breakpoint) ──────── */ :root { --container-px: 24px; --section-py: 100px; --card-px: 32px; --card-py: 32px; --h1-size: clamp(2rem, 4vw, 3.5rem); --h2-size: clamp(1.7rem, 3vw, 2.6rem); --touch-target: 48px; } /* ── Large Tablet / Small Laptop: ≤ 1023px ───────────────── */ @media (max-width: 1023px) { :root { --section-py: 80px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-brand { grid-column: 1 / -1; } .portal-layout { grid-template-columns: 220px 1fr; } .admin-layout { grid-template-columns: 200px 1fr; } .form-row { grid-template-columns: 1fr; } .hero-title { font-size: clamp(2rem, 4vw, 3.2rem); } .process-steps-v2 { grid-template-columns: repeat(2, 1fr); } .reasons-v2 { grid-template-columns: repeat(2, 1fr); } .values-grid-v2 { grid-template-columns: repeat(2, 1fr); } .clarity-pair { grid-template-columns: 1fr; } .about-stats-bar { grid-template-columns: repeat(2, 1fr); } .pricing-grid-v2 { grid-template-columns: repeat(2, 1fr); } .contact-method-row { grid-template-columns: 1fr; } /* tracker */ .tracker-form { flex-wrap: wrap; } } /* ── Tablet Portrait: ≤ 767px ─────────────────────────────── */ @media (max-width: 767px) { :root { --container-px: 20px; --section-py: 64px; --card-px: 24px; --card-py: 24px; } /* Typography */ h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.2; } h2 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; } h3 { font-size: 1.2rem; } .section { padding: var(--section-py) 0; } .section-lg { padding: calc(var(--section-py) * 1.3) 0; } .section-sm { padding: calc(var(--section-py) * 0.5) 0; } .container { padding-left: var(--container-px); padding-right: var(--container-px); } /* Header */ .main-nav { display: none; } .header-cta { display: none; } .mobile-menu-toggle { display: flex; } /* Hero v2 */ .hero-v2 { padding: 100px 0 60px; min-height: auto; } .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-visual { display: none; } .hero-h1 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); max-width: 100%; } .hero-kicker { font-size: 0.72rem; } .hero-p { font-size: 0.9rem; } .hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; } .hero-actions .btn { width: 100%; text-align: center; justify-content: center; } .hero-trust-row { flex-wrap: wrap; gap: 8px; } /* Page Hero v2 */ .page-hero-v2 { padding: 100px 0 56px; } .page-hero-v2 h1 { font-size: clamp(1.65rem, 5vw, 2.2rem); } .phv2-badge-row { gap: 8px; } /* Stats */ .stats-grid-v2 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat-block { padding: 20px 14px; } /* Services */ .services-grid-v2 { grid-template-columns: 1fr; } .svc-card { padding: var(--card-py) var(--card-px); } /* Process */ .process-steps-v2 { grid-template-columns: 1fr; } /* Reasons */ .reasons-v2 { grid-template-columns: 1fr; } /* Report mock */ .report-grid-2 { grid-template-columns: 1fr; } /* About */ .about-stats-bar { grid-template-columns: repeat(2, 1fr); } .values-grid-v2 { grid-template-columns: 1fr; } .clarity-pair { grid-template-columns: 1fr; } /* Pricing */ .pricing-grid-v2 { grid-template-columns: 1fr; } .pc-v2 { padding: var(--card-py) var(--card-px); } /* CTA v2 */ .cta-v2 { padding: 64px 0; } .cta-v2-actions { flex-direction: column; align-items: center; } .cta-v2-actions .btn { width: 100%; max-width: 320px; text-align: center; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-brand { grid-column: unset; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } .footer-trust-badges { flex-wrap: wrap; gap: 8px; } /* ═══════════════════════════════════════════════════════════ CLIENT PORTAL — Full mobile overhaul ≤ 767px ═══════════════════════════════════════════════════════════ */ /* ── Layout ─────────────────────────────────────────────── */ .portal-layout { grid-template-columns: 1fr; } /* ── Sticky tab-bar sidebar ──────────────────────────────── */ .portal-sidebar { position: sticky; top: var(--header-height); z-index: 50; height: auto; padding: 0; border-right: none; border-bottom: 1px solid rgba(70,130,180,0.12); background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: visible; scrollbar-width: none; } .portal-sidebar-logo { display: none; } .portal-sidebar-label { display: none; } /* portal-nav must come BEFORE portal-nav-account hide rule */ .portal-nav { display: flex; flex-direction: row; overflow-x: auto; gap: 0; padding: 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .portal-nav::-webkit-scrollbar { display: none; } .portal-nav a { flex-shrink: 0; padding: 9px 10px; font-size: 0.73rem; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; gap: 4px; } .portal-nav a.active, .portal-nav a:hover { border-left: none !important; border-bottom-color: var(--accent) !important; background: rgba(70,130,180,0.05); } .portal-nav .nav-icon { font-size: 0.88rem; } .portal-nav-mobile-only { display: flex !important; } /* Must be AFTER .portal-nav rule so display:none wins */ .portal-nav-account, .portal-sidebar-label.portal-nav-account { display: none !important; } /* ── Topbar ──────────────────────────────────────────────── */ .ptb-user-name { display: none; } .ptb-signout span { display: none; } .ptb-signout { padding: 8px 10px; } /* ── Main content area ───────────────────────────────────── */ .portal-main { padding: 14px 12px; min-width: 0; overflow-x: hidden; } .portal-tab { min-width: 0; overflow-x: hidden; } /* ── Typography ──────────────────────────────────────────── */ .portal-main h2 { font-size: 1.2rem; overflow-wrap: break-word; word-break: break-word; line-height: 1.3; } .portal-main h3 { font-size: 1rem; } /* ── Glass cards ─────────────────────────────────────────── */ .portal-main .glass-card { padding: 16px 14px; border-radius: 12px; } /* ── Section header rows (title + action button) ─────────── */ .portal-main > .portal-tab > [style*="display:flex"][style*="justify-content:space-between"], .portal-main [style*="align-items:center"][style*="justify-content:space-between"][style*="margin-bottom"] { flex-wrap: wrap; gap: 10px; } /* Make CTA buttons in header rows full-width */ .portal-main [style*="justify-content:space-between"] > a.btn, .portal-main [style*="justify-content:space-between"] > .btn { width: 100%; justify-content: center; } /* ── Stats grid ──────────────────────────────────────────── */ .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .dash-stat { padding: 13px 11px; } .dash-stat-value { font-size: 1.35rem; } .dash-stat-label { font-size: 0.68rem; } .dash-stat-sub { font-size: 0.68rem; } /* ── Inline grids → collapse ─────────────────────────────── */ /* auto-fill minmax grids (case detail info, etc.) */ .portal-main [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } /* explicit 2-col grids */ .portal-form-2col, .portal-main [style*="grid-template-columns:1fr 1fr"], .portal-main [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; } /* messages sidebar + main panel */ .portal-main [style*="grid-template-columns:280px"], .portal-main [style*="grid-template-columns:260px"], .portal-main [style*="grid-template-columns:300px"], .portal-main [style*="grid-template-columns:320px"] { grid-template-columns: 1fr !important; } /* ── Oversized empty-state paddings ─────────────────────── */ .portal-main .glass-card[style*="padding:48px"], .portal-main .glass-card[style*="padding:56px"], .portal-main [style*="padding:56px 40px"], .portal-main [style*="padding:48px 24px"] { padding: 28px 16px !important; } /* ── Data tables ─────────────────────────────────────────── */ .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; margin: 0 -2px; } .data-table { min-width: 500px; font-size: 0.76rem; } .data-table th { padding: 8px 10px; font-size: 0.66rem; } .data-table td { padding: 9px 10px; vertical-align: middle; } .data-table .badge { font-size: 0.6rem; padding: 2px 6px; } /* ── Badges (prevent shrink in flex rows) ────────────────── */ .portal-main .badge { flex-shrink: 0; font-size: 0.62rem; } /* ── Timeline / notification entries ────────────────────── */ .portal-main [style*="align-items:flex-start;gap:16px;padding:12px 0"], .portal-main [style*="align-items:flex-start;gap:14px;padding:10px 0"] { gap: 10px; flex-wrap: nowrap; } /* ── Workflow steps (case progress) ─────────────────────── */ .workflow-steps { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; } .workflow-step { flex: 0 0 calc(33.33% - 6px); flex-direction: column; align-items: center; text-align: center; gap: 5px; } .step-num { width: 26px; height: 26px; font-size: 0.68rem; } .step-body h4 { font-size: 0.68rem; line-height: 1.3; } /* Remove connector lines between steps on mobile */ .workflow-step::after { display: none; } /* ── Financial Loss Tracker ──────────────────────────────── */ /* Trace banner — stack vertically */ .btc-trace-banner { flex-direction: column !important; align-items: flex-start !important; gap: 10px; padding: 14px !important; } .btc-trace-banner > div:last-child { text-align: left !important; display: flex; gap: 16px; align-items: center; } /* Wallet chain — horizontal scroll */ .btc-trace-chain-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .btc-chain { gap: 0; flex-wrap: nowrap; } /* Compact hop cards */ .btc-hop-card { min-width: 120px; max-width: 138px; padding: 9px 7px; } .btc-hop-num { font-size: 0.58rem; } .btc-hop-icon { font-size: 1.1rem; } .btc-hop-label { font-size: 0.62rem; } .btc-hop-address { font-size: 0.56rem; } .btc-hop-amount { font-size: 0.58rem; } .btc-hop-txhash { font-size: 0.55rem; } .btc-hop-flag-badge { font-size: 0.55rem; padding: 1px 5px; } /* Connector arrows */ .btc-hop-connector svg { width: 22px; height: 12px; } /* ── Upload / drag-drop evidence zone ───────────────────── */ #evidenceDropZone { padding: 20px 12px !important; } /* ── Forms ───────────────────────────────────────────────── */ .portal-main .form-control { font-size: 0.875rem; } .portal-main .btn-sm { font-size: 0.8rem; padding: 8px 14px; } .portal-main .btn-block { width: 100%; } /* ── Analyst notes / blockquote strips ──────────────────── */ .portal-main [style*="border-left:2px solid"] { font-size: 0.78rem !important; } /* ── FIR invoice grid ────────────────────────────────────── */ .fir-grid { grid-template-columns: 1fr !important; gap: 10px !important; } /* ── Messages tab ────────────────────────────────────────── */ /* Cap thread height so compose box stays on-screen */ #messageThread { max-height: 280px !important; } /* ── Nav scroll fade hint ────────────────────────────────── */ /* Gradient on right edge signals the tab bar is scrollable */ .portal-sidebar::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 36px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.97)); pointer-events: none; z-index: 2; } /* ── Documents tab row — compact on mobile ────────────────── */ #tab-documents .glass-card > [style*="padding:18px 22px"] { padding: 12px 14px !important; gap: 12px !important; } /* Admin */ .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } .admin-content { padding: 20px; } /* Financial Loss Tracker — stack left/right panels on mobile */ [style*="grid-template-columns:380px 1fr"] { grid-template-columns: 1fr !important; } /* Forms */ .form-row { grid-template-columns: 1fr; gap: 0; } .verify-form-card { padding: 24px 18px; } .emergency-banner { flex-direction: column; align-items: flex-start; gap: 14px; } /* Service page sidebar */ .service-page-layout, [style*="grid-template-columns:1fr 340px"] { grid-template-columns: 1fr !important; } [style*="position:sticky;top:calc"] { position: static !important; } /* ── Section split (class-based) ─────────────────────── */ .section-split, .section-split-wide { grid-template-columns: 1fr !important; gap: 40px !important; } /* ── Catch-all: inline two-col section wrappers ──────── Targets large-gap grids only (section layouts, not form rows). Form rows use gap≤20px so these won't match them. */ [style*="gap:64px"][style*="grid-template-columns"], [style*="gap:56px"][style*="grid-template-columns"], [style*="gap:48px"][style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 40px !important; } /* ── 4-col verify/feature grids → 2-col on tablet ────── */ [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; } /* Dashboard stats — force 2-col (minmax(220px) in style.css would give 1 col on mobile) */ .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .dash-stat { padding: 16px 14px; } .dash-stat-value { font-size: 1.5rem; } .dash-stat-label { font-size: 0.72rem; } .dash-stat-sub { font-size: 0.72rem; } /* Step indicator */ .step-indicator { gap: 0; } .step-dot-num { width: 28px; height: 28px; font-size: 0.72rem; } .step-dot-line { flex: 1; min-width: 0; } /* Tracker */ .tracker-wrap { padding: 24px 20px; } .tracker-form { flex-direction: column; } .tracker-input, .tracker-btn { width: 100%; min-width: 0; } /* Touch targets */ .btn { min-height: var(--touch-target); } .form-control { min-height: var(--touch-target); padding: 12px 16px; font-size: 1rem; } select.form-control { min-height: var(--touch-target); } /* Floating CTA */ .floating-cta { bottom: 16px; right: 16px; padding: 14px 20px; font-size: 0.82rem; } } /* ── Large Phone: ≤ 479px ─────────────────────────────────── */ @media (max-width: 479px) { :root { --container-px: 16px; --section-py: 56px; --card-px: 20px; --card-py: 22px; } h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); } h2 { font-size: clamp(1.35rem, 5.5vw, 1.75rem); } [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } .glass-card { padding: var(--card-py) var(--card-px); } .hero-h1 { font-size: clamp(1.55rem, 6vw, 1.9rem); } .stats-grid-v2 { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-block { padding: 16px 12px; } .stat-block-num { font-size: 1.6rem; } .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .btn-xl { padding: 14px 28px; font-size: 0.95rem; } .pricing-card { padding: var(--card-py) var(--card-px); } .verify-form-card { padding: 20px 16px; } .floating-cta span { display: none; } .floating-cta { padding: 14px; border-radius: 50%; } /* Step indicator compact */ .step-dot-num { width: 26px; height: 26px; font-size: 0.68rem; } .form-step-label { font-size: 0.72rem; } /* Tracker */ .tracker-header { flex-direction: column; gap: 10px; } .tracker-icon { width: 40px; height: 40px; font-size: 1.3rem; } .tr-row { flex-direction: column; gap: 2px; align-items: flex-start; } .tr-val { text-align: left; } } /* ── Standard Phone: ≤ 413px (iPhone 14 / Pixel 7 class) ─── */ @media (max-width: 413px) { :root { --container-px: 14px; --section-py: 48px; --card-px: 18px; --card-py: 20px; } h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); } h2 { font-size: clamp(1.25rem, 6vw, 1.6rem); } .hero-h1 { font-size: clamp(1.45rem, 6.5vw, 1.8rem); } .page-hero-v2 h1 { font-size: clamp(1.4rem, 6vw, 1.75rem); } .section-title { font-size: clamp(1.3rem, 6vw, 1.65rem); } .section-subtitle { font-size: 0.875rem; } .phv2-badge { font-size: 0.7rem; padding: 5px 10px; } .hero-actions { gap: 8px; } .footer-col h4 { font-size: 0.8rem; } .footer-col a { font-size: 0.82rem; } .form-label { font-size: 0.82rem; } .btn-lg { font-size: 0.95rem; padding: 13px 24px; } .glass-card { border-radius: 12px; } /* Step indicator on small phones */ .step-indicator { gap: 0; overflow: visible; } .step-dot { flex-shrink: 0; } .step-dot-line { max-width: 24px; } /* Navigation overlay */ .mobile-nav ul { padding: 16px; } .mobile-nav a { font-size: 1rem; padding: 14px 16px; } /* Tracker */ .tracker-title { font-size: 0.95rem; } .tracker-sub { font-size: 0.75rem; } } /* ── Small Phone: ≤ 374px (iPhone SE / budget Android) ───── */ @media (max-width: 374px) { :root { --container-px: 12px; --section-py: 44px; --card-px: 16px; --card-py: 18px; } h1 { font-size: clamp(1.35rem, 7.5vw, 1.7rem); } h2 { font-size: clamp(1.15rem, 6.5vw, 1.5rem); } .hero-h1 { font-size: clamp(1.3rem, 7vw, 1.65rem); } .page-hero-v2 h1 { font-size: clamp(1.25rem, 6.5vw, 1.6rem); } .section-title { font-size: clamp(1.2rem, 6.5vw, 1.5rem); } .stats-grid-v2 { grid-template-columns: 1fr 1fr; gap: 8px; } .stat-block-num { font-size: 1.4rem; } .stat-block-label { font-size: 0.7rem; } .btn { font-size: 0.85rem; padding: 12px 18px; } .btn-lg { font-size: 0.9rem; padding: 13px 20px; } .phv2-badge-row { display: none; } /* too cramped */ .hero-kicker { font-size: 0.68rem; } .hero-trust-row { display: none; } /* replaced by inline trust note */ .glass-card { border-radius: 10px; } .form-control { font-size: 0.9rem; padding: 11px 14px; } /* Header */ .logo-tagline { display: none; } .logo-name { font-size: 0.9rem; } /* Step indicator: numbers only, hide lines */ .step-dot-line { display: none; } .step-indicator { justify-content: space-around; gap: 4px; } /* Footer compact */ .trust-badge { font-size: 0.68rem; padding: 5px 8px; } .footer-brand-desc { font-size: 0.78rem; } .footer-col a { font-size: 0.78rem; } } /* ── Ultra-small: ≤ 359px (320px devices, Galaxy A older) ── */ @media (max-width: 359px) { :root { --container-px: 10px; --section-py: 40px; --card-px: 14px; --card-py: 16px; } h1 { font-size: clamp(1.2rem, 8vw, 1.5rem); } h2 { font-size: clamp(1.05rem, 7vw, 1.35rem); } .hero-h1 { font-size: clamp(1.2rem, 8vw, 1.5rem); } .page-hero-v2 h1 { font-size: clamp(1.15rem, 7.5vw, 1.45rem); } .glass-card { padding: 14px 12px; border-radius: 10px; } .stats-grid-v2 { grid-template-columns: 1fr; } .stat-block { padding: 14px 12px; display: flex; align-items: center; gap: 12px; } .stat-block-num { font-size: 1.3rem; } .form-section-title { font-size: 0.9rem; } .btn-group, .hero-actions { gap: 8px; } .btn-lg { font-size: 0.85rem; padding: 12px 16px; } /* Floating CTA hidden — too small for bottom bar */ .floating-cta { display: none; } /* Tracker: minimal */ .tracker-icon { display: none; } .tracker-header { margin-bottom: 16px; } } /* ── JS-driven data-vp targeting ──────────────────────────── */ /* Ultra-small (320px-class devices) */ [data-vp="xxs"] .hero-trust-row { display: none; } [data-vp="xxs"] .glow-orb { display: none; } [data-vp="xxs"] .cyber-grid { opacity: 0.3; } /* Small phones */ [data-vp="xs"] .glow-orb-cyan { opacity: 0.15; } [data-vp="sm"] .glow-orb-cyan { opacity: 0.2; } /* High-DPR screens: sharpen borders */ [data-dpr="3x"] .glass-card { border-width: 0.5px; } [data-dpr="3x"] .glass-card { box-shadow: 0 2px 20px rgba(16,40,70,0.4), 0 0 0 0.5px rgba(70,130,180,0.12); } /* Landscape orientation on phones */ @media (max-width: 767px) and (orientation: landscape) { .hero-v2 { min-height: auto; padding: 80px 0 40px; } .page-hero-v2 { padding: 80px 0 40px; } .hero-h1 { font-size: clamp(1.3rem, 4vw, 1.8rem); } } /* ── Print ────────────────────────────────────────────────── */ @media print { .site-header, .site-footer, .floating-cta, .back-to-top, .cyber-grid, .particles-container, .glow-orb { display: none !important; } body { background: white; color: black; } a { color: black; text-decoration: underline; } .glass-card, .service-card { border: 1px solid #ccc; box-shadow: none; background: white; } .hero-h1, h1, h2 { color: black; } } /* ── Reduced Motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .anim-fade-up, .anim-fade-in, .anim-scale-in, .anim-fade-left, .anim-fade-right { opacity: 1; transform: none; transition: none; } } /* ── High contrast ────────────────────────────────────────── */ @media (forced-colors: active) { .glass-card { border: 2px solid ButtonText; } .btn-primary { forced-color-adjust: none; } }