/* ============================================================ SOLVEN4 — global mobile responsive overrides Loaded last on every page so it wins the cascade. Uses !important in targeted spots because most of the site's layout values are set via inline style="" attributes, which nothing but !important (or more inline style) can override. ============================================================ */ html, body { max-width: 100vw; overflow-x: hidden; } img, video { max-width: 100%; } /* ---------- header contrast fix (all breakpoints) ---------- 115 of 117 pages use a white/light header background, but many of those pages also set a dark theme on for the rest of the page's content, which the header's logo text and hamburger icon (both colorless, relying on inheritance) picked up — making them invisible white-on-white. Nav links already set their own explicit color and are unaffected. Index.html and auth.html use a dark header with its own explicit white text/icon colors (higher specificity), so they're unaffected by this rule. ---------- */ #siteHeader { color: var(--ink); } /* ---------- mobile menu drawer contrast fix ---------- Same root cause as the header: #mobileMenu is a light/white overlay (rgba(255,255,255,0.97)) that sets no color of its own, so on the 111 pages with a dark it inherited white text and an invisible close (X) icon. It's always a light drawer regardless of page theme, so it always needs dark text/icon color. ---------- */ #mobileMenu { color: var(--ink); } /* ---------- header "Launch App" button becomes an icon-only circular button ---------- The label is a raw text node (not wrapped in a span), so it's hidden by zeroing the anchor's own font-size; the svg icon keeps its explicit pixel width/height and stays visible. Scoped to `#siteHeader a.btn` specifically so the same link elsewhere on the page (hero CTA, pricing, footer) is unaffected. ---------- */ #siteHeader a.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 50% !important; gap: 0 !important; font-size: 0 !important; } #siteHeader a.btn svg { width: 18px !important; height: 18px !important; margin: 0 !important; flex: none; } /* ---------- ~tablet and down ---------- */ @media (max-width: 900px) { .wrap { padding: 0 24px !important; } section { padding: 64px 0 !important; } #siteHeader { padding: 12px 18px !important; } #siteHeader a.btn { width: 38px !important; height: 38px !important; } #siteHeader > a span { font-size: 15px !important; } #siteHeader > a > div { width: 28px !important; height: 28px !important; } #hamburger { width: 36px !important; height: 36px !important; } #mobileMenu { padding: 84px 28px !important; gap: 20px !important; font-size: 19px !important; } #hero { padding-top: 120px !important; padding-bottom: 36px !important; } h1#heroHeadline { font-size: 46px !important; } h2.h-title { font-size: 30px !important; max-width: 100% !important; } .lede { font-size: 15px !important; max-width: 100% !important; } .laptop-scene { margin-top: 40px !important; } .door-hero { padding: 56px 24px 40px !important; min-height: auto !important; } .door-hero-content { max-width: 100% !important; } /* header-adjacent hero variants used on help/blog/FAQ/partner pages need real top clearance (vertically centered content, not bottom-aligned like .door-hero) */ .hc-hero, .partner-hero { padding: 130px 22px 50px !important; min-height: auto !important; } .faq-hero { padding: 96px 24px 40px !important; min-height: auto !important; } .faq-section { padding: 0 !important; } .foundation-card-body { padding: 28px 22px !important; } .foundation-card-title { font-size: 22px !important; } .division-card-body { padding: 0 16px 26px !important; } } /* ---------- phones ---------- */ @media (max-width: 640px) { .wrap { padding: 0 18px !important; } section { padding: 52px 0 !important; } h1#heroHeadline { font-size: 36px !important; } h2.h-title { font-size: 25px !important; } .kicker { font-size: 11px !important; letter-spacing: 0.16em !important; } /* every inline multi-column grid in the site collapses to one column on phones */ [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; } .btn { font-size: 13.5px !important; padding: 11px 20px !important; } .trust-row { gap: 6px !important; row-gap: 8px !important; } .door-hero { padding: 48px 18px 32px !important; } .door-feature { padding: 14px !important; } .hc-hero, .partner-hero { padding: 118px 18px 40px !important; } .faq-hero { padding: 86px 18px 32px !important; } .breadcrumb { flex-wrap: wrap !important; row-gap: 4px !important; } .foundation-card-title { font-size: 20px !important; } .foundation-card-lede { max-width: 100% !important; } .feature-card-title { font-size: 18px !important; } footer[class*="section-dark"] a[href^="https://"] { margin: 4px !important; } #cookieBanner { left: 50% !important; width: calc(100% - 24px) !important; padding: 16px 18px !important; } .auth-modal { padding: 30px 22px !important; } .auth-core-wrap { width: 84px !important; height: 84px !important; } } /* ---------- small phones ---------- */ @media (max-width: 400px) { .wrap { padding: 0 16px !important; } h1#heroHeadline { font-size: 31px !important; } h2.h-title { font-size: 22px !important; } #siteHeader { padding: 10px 14px !important; } .btn { padding: 10px 16px !important; } }