/* LoginStack — Mobile optimization layer. * * Loaded AFTER chrome.css. Every rule lives under a phone/tablet/touch media * query so the desktop layout (>= 1025px) renders byte-identically to before. * * Breakpoints: * <= 767px phone * 768px..1024px tablet * (hover:none) coarse touch devices * * Touched concerns: viewport overflow, safe-area insets, dynamic viewport * height for iOS / in-app browsers, typography scaling, card/grid stacking, * iframe + animation containment, tap-target sizing, form input zoom, * sticky/fixed header behavior, anchor scroll offset, footer stacking, * translation safety (FR/DE/ES long words), and motion budget. * * Adding a rule? Put it in the right block, keep the selector scoped, and * never write a rule outside a media query unless it is genuinely * mobile-only by definition (e.g. env(safe-area-inset-*)). */ /* ──────────────────────────────────────────────────────────────────────── * 0. Dynamic viewport height variable. Set by mobile-optimizations.js * on resize so we have a stable `--app-vh` that excludes the iOS URL * bar collapse. CSS will use it via `calc(var(--app-vh, 1vh) * 100)`. * ──────────────────────────────────────────────────────────────────────── */ :root { --app-vh: 1vh; } /* ──────────────────────────────────────────────────────────────────────── * Desktop-recommendation banner. Mounted at the top of by * mobile-optimizations.js when window <= 1024px, dismissed via the close * button (localStorage `ls_desktop_hint_dismissed=1`). When present, the * element gets `.has-desktop-hint` so we can offset the sticky * topbar without measuring layout. * Desktop never sees the banner — JS exits early when window > 1024px. * ──────────────────────────────────────────────────────────────────────── */ #ls-desktop-hint { position: relative; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px)); background: var(--ink, #0B1220); color: #fff; font-family: var(--font-body, system-ui, sans-serif); font-size: 13px; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.08); padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .ls-desktop-hint__msg { flex: 1 1 auto; } .ls-desktop-hint__close { flex: 0 0 auto; appearance: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; } .ls-desktop-hint__close:hover, .ls-desktop-hint__close:focus-visible { background: rgba(255,255,255,.08); outline: none; } /* ──────────────────────────────────────────────────────────────────────── * PHONE — <= 767px * ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* A. Overflow guard. tokens.css already has overflow-x: clip on html/body but in-app browsers (Instagram, Facebook) ignore `clip` on some Android versions; harden with hidden + width:100%. */ html, body { overflow-x: hidden; width: 100%; max-width: 100vw; } /* Containers shrink to safe horizontal padding with safe-area awareness for notched iPhones. The desktop `--gutter: 32px` is preserved. */ .container { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); } /* B. Image / media safety — never overflow the viewport. */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; } iframe { width: 100%; } /* C. Section vertical rhythm — keep visual breathing without desktop-scale padding that wastes phone real-estate. */ section, .section { padding-top: 56px; padding-bottom: 56px; } .pg-hero, .auth-shell { padding-top: 48px; padding-bottom: 32px; } body.page-index .hero { padding-top: 0; } body.page-index .hero__inner { padding-top: 24px; } body.page-index .hero__head { margin-bottom: 32px; } /* D. Typography. Desktop hero h1 uses clamp() already; we tighten the mobile floor and word-wrap aggressively for long FR/DE/ES words. */ h1 { font-size: clamp(28px, 8vw, 40px); line-height: 1.18; } h2 { font-size: clamp(24px, 6.4vw, 32px); line-height: 1.22; } h3 { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.28; } h1, h2, h3, .auth-aside h1 { overflow-wrap: anywhere; word-break: normal; hyphens: auto; } .lede, .pg-hero .lede { font-size: 16px; line-height: 1.55; } .eyebrow { font-size: 11px; } /* E. Buttons — tap targets at least 44×44, wrap long labels, never zoom. */ .btn, .btn--primary, .btn--ghost, .btn--link { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; font-size: 14px; white-space: normal; line-height: 1.2; } .auth-actions, .pf-hero__ctas, .final-cta__ctas, .path__ctas, .client-actions { flex-wrap: wrap; gap: 10px; } /* F. Form inputs. iOS zooms when input font-size < 16px — force 16px on every native control to avoid the lurch. Increase tap area. */ input, select, textarea, .field input, .field select, .field textarea { font-size: 16px; min-height: 44px; } .field input, .field select, .field textarea { padding: 12px 14px; } .form__row { grid-template-columns: 1fr !important; gap: 10px; } .form { padding: 22px; gap: 14px; } .auth-card, .res-gate__card, .sb-gate__card, .sb-launch__card { padding: 24px; } /* G. Auth shells split into single column. The aside/illustration becomes a thin intro above the form. */ .auth-grid { grid-template-columns: 1fr !important; gap: 24px; } .auth-aside { text-align: left; } .auth-aside .pillars { display: none; } /* save vertical room on phone */ /* H. Client dashboard / cards. */ .client-grid { grid-template-columns: 1fr !important; gap: 14px; } .client-card.span-4, .client-card.span-8, .client-card.span-12 { grid-column: span 1 !important; } .client-head { flex-direction: column; align-items: flex-start; gap: 14px; } .client-head .client-actions { width: 100%; } .client-head .client-actions .btn { flex: 1 1 auto; justify-content: center; } /* I. Industries / cards / resource grids — single-column flow. */ .ind-grid, .res-grid, .pf-scale__grid, .offices-grid, .delivery-flow-list { grid-template-columns: 1fr !important; } /* J. Tables — never burst the viewport; allow horizontal scroll inside the table without forcing the whole page sideways. */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* K. Live Pipeline section (homepage). The desktop rail is hidden via its own media query; tighten phone spacing. */ .live-pipe__module { padding: 16px; } .live-pipe__module p { font-size: 13.5px; } /* L. Final CTAs / footer stacking. */ .pf-final__inner, .final-cta__ctas { flex-direction: column; align-items: flex-start; gap: 12px; } /* M. Anchor scroll offset under the (collapsed) sticky topbar. */ :target { scroll-margin-top: 96px; } html { scroll-padding-top: 96px; } /* N. Drawer (mobile menu) — increase tap target and add safe-area padding on iPhones with a home indicator. */ .topbar__drawer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .topbar__drawer a { min-height: 44px; display: flex; align-items: center; } /* O. Footer columns stack. */ .foot__cols { grid-template-columns: 1fr !important; gap: 24px; } .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } /* P. Sandbox / resources gates are already narrow cards — center on phone. */ .res-gate__actions, .sb-gate__actions { flex-direction: column; align-items: stretch; } .res-gate__actions .btn, .sb-gate__actions .btn { width: 100%; justify-content: center; } } /* Narrow phones — 360px and below. */ @media (max-width: 380px) { .container { padding-left: 12px; padding-right: 12px; } h1 { font-size: clamp(24px, 7.5vw, 32px); } .btn, .btn--primary, .btn--ghost, .btn--link { width: 100%; justify-content: center; } .auth-card, .form { padding: 18px; } } /* ──────────────────────────────────────────────────────────────────────── * TABLET — 768px..1024px * ──────────────────────────────────────────────────────────────────────── */ @media (min-width: 768px) and (max-width: 1024px) { .container { padding-left: 24px; padding-right: 24px; } .ind-grid, .res-grid, .pf-scale__grid { grid-template-columns: repeat(2, 1fr) !important; } .auth-grid { grid-template-columns: 1fr 1fr !important; } .form__row { grid-template-columns: 1fr 1fr; } .client-grid { grid-template-columns: repeat(8, 1fr) !important; } .client-card.span-4 { grid-column: span 4 !important; } .client-card.span-8 { grid-column: span 8 !important; } .live-pipe__modules { grid-template-columns: repeat(3, 1fr) !important; } } /* ──────────────────────────────────────────────────────────────────────── * TOUCH DEVICES (any size, including iPad-class tablets) * hover:none + pointer:coarse means a real touch screen, not a mouse. * ──────────────────────────────────────────────────────────────────────── */ @media (hover: none) and (pointer: coarse) { /* Remove hover-only reveals that strand touch users. */ a, button { -webkit-tap-highlight-color: rgba(46, 134, 240, 0.18); } .nav-link:hover, .ind:hover, .rc:hover { transform: none; } /* Long-press selection feels weird on cards/buttons — disable for chrome only, preserve text selection elsewhere. */ .btn, .nav-link, .topbar__cta a, .topbar__burger, .live-pipe__module, .ind, .rc { -webkit-user-select: none; user-select: none; } /* Prevent iOS double-tap zoom on interactive elements. */ .btn, button, a, [role="button"] { touch-action: manipulation; } } /* ──────────────────────────────────────────────────────────────────────── * IN-APP BROWSER FIXES. * mobile-optimizations.js adds is-in-app-browser to when the UA * matches Instagram / Facebook / LinkedIn / TikTok / Snapchat webviews. * ──────────────────────────────────────────────────────────────────────── */ .is-in-app-browser, .is-in-app-browser body { min-height: calc(var(--app-vh, 1vh) * 100); } /* Some webviews refuse position:sticky reliably — fall back to static so the header doesn't jitter or vanish during URL-bar collapse. */ @media (max-width: 767px) { .is-in-app-browser .topbar, .is-in-app-browser .topbar__wrap { position: static !important; } } /* iPhone safe-area for the auth/forms shell, sandbox, resources gates so their floating cards never collide with the home indicator. */ @supports (padding: max(0px)) { @media (max-width: 767px) { .auth-shell { padding-bottom: max(32px, env(safe-area-inset-bottom)); } .sb-gate, .res-gate { padding-bottom: max(72px, env(safe-area-inset-bottom)); } } } /* ──────────────────────────────────────────────────────────────────────── * MOTION BUDGET. * On phones, expensive continuous filters/shadows stutter — relax them. * Honor prefers-reduced-motion strictly: stop every keyframe. * ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Heavy ambient effects (only present on a few hero canvases) become flat on phones to keep scrolling smooth without removing the animation. */ .canvas-ambient, .pf-canvas .canvas-stage::after { filter: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }