/* ============================================================ VoiceSeal Responsive CSS Covers: phone (≤480px), tablet (≤768px), large tablet (≤1024px) Applied globally across all pages via in ============================================================ */ /* ── SHARED NAV ─────────────────────────────────────────────── */ @media (max-width: 768px) { .navbar { padding: .75rem 1rem; flex-wrap: wrap; gap: .75rem; } .navbar .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; width: 100%; background: var(--card, #0d1117); padding: .75rem; gap: .4rem; border-top: 1px solid var(--border, #30363d); } .nav-mobile-btn, .hamburger { display: block !important; } } /* ── DASHBOARD ──────────────────────────────────────────────── */ @media (max-width: 1024px) { .dash-layout { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: nowrap; padding: .4rem .75rem; border-right: none; border-bottom: 1px solid var(--border, #30363d); overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .25rem; scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar-section, .sidebar-sub { display: none; } .sidebar a { flex-shrink: 0; white-space: nowrap; padding: .5rem .85rem; border-radius: 8px; font-size: .82rem; } .sidebar-badge { display: none; } .dash-main { padding: 1.25rem; } } @media (max-width: 480px) { .sidebar a { padding: .45rem .65rem; font-size: .78rem; } .sidebar a .icon { font-size: .85rem; } /* Navbar: stack name + sign out */ .navbar { padding: .6rem 1rem; } #user-name-nav { font-size: .78rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #logout-btn { padding: .3rem .75rem !important; font-size: .78rem !important; } } @media (max-width: 768px) { .stats-row { grid-template-columns: 1fr 1fr; gap: .75rem; } .voice-grid { grid-template-columns: 1fr; } .voice-card { width: 100%; } .vc-footer { flex-wrap: wrap; gap: .4rem; } .panel-header { flex-wrap: wrap; gap: .5rem; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .modal { width: 95vw !important; max-width: 95vw !important; padding: 1.25rem !important; margin: 1rem; } .dash-section-title { font-size: 1.1rem; } } @media (max-width: 480px) { .stats-row { grid-template-columns: 1fr; } .dash-main { padding: .85rem; } .card { padding: 1rem; } .btn { padding: .55rem 1rem; font-size: .88rem; } .sidebar { padding: .4rem .75rem; } .sidebar a { padding: .45rem .6rem; font-size: .82rem; } } /* ── SCANNER UI ─────────────────────────────────────────────── */ @media (max-width: 768px) { .vsp-grid, #vs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem; } .vs-controls { flex-direction: column; gap: .5rem; } .vs-controls select, .vs-controls button { width: 100%; } } @media (max-width: 480px) { .vsp-grid, #vs-grid { grid-template-columns: repeat(2, 1fr) !important; } .vsp-tile { padding: .5rem; } .vsp-name { font-size: .75rem; } } /* ── ENROLL VOICE ───────────────────────────────────────────── */ @media (max-width: 768px) { .hero { padding: 1.5rem 1rem; } .hero h1 { font-size: 1.6rem; } .step-breadcrumb { gap: .4rem; flex-wrap: wrap; justify-content: center; } .step-connector { width: 16px; } .sc-label { display: none; } .sample-card { padding: 1rem; } .record-actions { flex-direction: column; gap: .5rem; } .record-actions .btn, .record-actions label { width: 100%; text-align: center; } .quality-row { flex-wrap: wrap; gap: .4rem; } } @media (max-width: 480px) { .hero h1 { font-size: 1.35rem; } .enroll-wrap, .enroll-container { padding: .75rem; } .waveform { height: 36px; } } /* ── PRICING ────────────────────────────────────────────────── */ @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-card { padding: 1.25rem; } } /* ── INDEX / MARKETING PAGES ────────────────────────────────── */ @media (max-width: 900px) { /* Nav fix -- logo left, hamburger right, no overlap */ .nav-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 1.25rem; position: relative; } .nav .nav-links, nav .nav-links { display: none !important; flex-direction: column; width: 100%; background: var(--navy, #0D1B2A); padding: .75rem 1.25rem; gap: .5rem; border-top: 1px solid rgba(0,201,177,.15); position: absolute; top: 100%; left: 0; right: 0; z-index: 100; } .nav .nav-links.open, nav .nav-links.open { display: flex !important; } .nav-mobile-btn { display: block !important; } .nav-cta { display: none; } /* Hero */ .hero-inner { grid-template-columns: 1fr; gap: 2rem; } .hero-visual { display: none; } .problem-grid, .feat-grid, .how-steps, .solution-grid { grid-template-columns: 1fr; } .how-steps::before { display: none; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .hero-stats { flex-direction: column; gap: 1.25rem; } .cta-buttons { flex-direction: column; align-items: stretch; } .cta-buttons .btn { text-align: center; } } /* ── AUTH PAGES (login, forgot, reset, verify) ──────────────── */ @media (max-width: 480px) { .modal, .auth-card, .auth-box { width: 95vw !important; padding: 1.5rem 1rem !important; margin: 1rem auto; border-radius: 12px !important; } .auth-modal-inner { padding: 1rem; } } /* ── FORMS & INPUTS ─────────────────────────────────────────── */ @media (max-width: 600px) { input[type="text"], input[type="email"], input[type="password"], select, textarea { font-size: 16px; /* prevents iOS zoom on focus */ } .form-row { flex-direction: column; gap: .5rem; } .form-row > * { width: 100%; } } /* ── TABLES ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } th, td { white-space: nowrap; font-size: .8rem; padding: .45rem .6rem; } } /* ── API DOCS / CONTENT PAGES ───────────────────────────────── */ @media (max-width: 768px) { .docs-layout, .content-layout { flex-direction: column; } .docs-sidebar, .content-sidebar { width: 100%; position: static; border-right: none; border-bottom: 1px solid var(--border, #30363d); padding-bottom: 1rem; margin-bottom: 1rem; } pre, code { font-size: .78rem; overflow-x: auto; } } /* ── FAQ / LEGAL / PRIVACY / TERMS ─────────────────────────── */ @media (max-width: 600px) { .faq-item, .legal-section { padding: 1rem; } .faq-question { font-size: .95rem; } .faq-answer { font-size: .88rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } } /* ── CONTACT / HOW-WE-SCAN ──────────────────────────────────── */ @media (max-width: 600px) { .contact-grid, .two-col { grid-template-columns: 1fr; } .contact-card { padding: 1.25rem; } } /* ── EARNINGS / PAYOUTS ─────────────────────────────────────── */ @media (max-width: 768px) { .earnings-grid, .payout-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } .payout-actions { flex-direction: column; gap: .5rem; } .payout-actions .btn { width: 100%; } } @media (max-width: 480px) { .earnings-grid, .payout-grid { grid-template-columns: 1fr; } } /* ── GLOBAL UTILITY ─────────────────────────────────────────── */ @media (max-width: 480px) { /* Ensure nothing overflows viewport */ body { overflow-x: hidden; } img { max-width: 100%; height: auto; } .hide-mobile { display: none !important; } } @media (max-width: 768px) { .hide-tablet { display: none !important; } .show-mobile { display: block !important; } }