/* Smart Flow Services — mobile layout. * * Active when js/mobile.js has flagged the page with `body.mobile` (the inline * gate applies the class before first paint, so there's no flash). * * The desktop design is a fixed, full-viewport 3D HUD (body overflow:hidden, * every section a fixed overlay). On a phone we switch to a natural scrolling * page: sections restack into a column, the 3D scene is hidden (body.no-webgl * shows the static gradient), and the game-menu becomes a top anchor nav. * * Everything uses CSS logical properties so the layout mirrors correctly in * Hebrew (RTL) for free. Desktop CSS is untouched — these rules only apply * under `body.mobile`. */ body.mobile { /* Restore normal document flow (desktop is overflow:hidden + fixed). Reset too: desktop CSS pins html to 100%/hidden, which would trap scrolling inside and break position:sticky — the mobile page must scroll at the viewport like a normal site. */ height: auto; overflow: auto; } html.mobile { height: auto; overflow: visible; } /* Mobile shows the static gradient, not the live 3D canvas. */ body.mobile #scene-canvas, body.mobile #connectors, body.mobile #room-fade, body.mobile .hud-bottom { display: none !important; } body.mobile .scene-fallback { position: fixed; inset: 0; display: block; z-index: -1; } /* --- Top bar --------------------------------------------------------------- */ body.mobile .hud-top { position: sticky; top: 0; inset-inline: 0; z-index: 60; padding: 12px 16px; gap: 8px; } body.mobile .wordmark-text { font-size: 15px; } body.mobile .hud-status { font-size: 10px; letter-spacing: 0.12em; } body.mobile .lang-toggle { min-height: 44px; min-width: 64px; font-size: 13px; } /* --- Nav: game-menu becomes a horizontal anchor chip row -------------------- */ body.mobile .menu { position: sticky; top: 62px; /* below the top bar */ inset-inline: 0; z-index: 55; padding: 10px 16px; margin: 0; border: 0; border-block-end: 1px solid var(--border); background: rgb(4 10 18 / 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: none; } body.mobile .menu::before, body.mobile .menu::after { display: none; } body.mobile .menu-kicker { display: none; } body.mobile .menu ul { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 2px; } body.mobile .menu ul::-webkit-scrollbar { display: none; } body.mobile .menu-item { flex: 0 0 auto; width: auto; min-height: 44px; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid var(--border); border-radius: 999px; color: var(--fg); background: rgb(14 22 34 / 0.5); transition: none; transform: none !important; } body.mobile .menu-item:active { color: var(--accent); border-color: var(--accent); } body.mobile .menu-arrow { display: none; } /* --- Hero ------------------------------------------------------------------- */ body.mobile .hero { position: static; inset: auto; max-width: none; margin: 18px 16px 8px; padding: 22px 20px; text-align: start; transition: none; } body.mobile .hero::before, body.mobile .hero::after { display: none; } body.mobile .hero h1 { font-size: clamp(28px, 8vw, 38px); margin-block-end: 12px; } body.mobile .hero-sub { font-size: 16px; } body.mobile .hero-cta { margin-block-start: 20px; } /* The big blue CTA becomes a quiet text link on mobile — "click here to get in touch", no button background. Tap target stays ≥44px. */ body.mobile .btn-cta { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0; min-height: 44px; background: none; color: var(--accent); font-size: 17px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; border: 0; } body.mobile .btn-cta:hover { filter: none; } body.mobile .btn-cta:active { transform: none; } body.mobile .cta-sub { text-align: center; } /* Desktop hides menu/hero when a panel opens — irrelevant on mobile. */ body.mobile.section-open .menu, body.mobile.section-open .hero { opacity: 1; pointer-events: auto; } /* --- Sections: fixed overlays become stacked, scrolling cards --------------- */ body.mobile .panel { position: static; inset: auto; opacity: 1; pointer-events: auto; overflow: visible; height: auto; transition: none; scroll-margin-top: 128px; /* clear the sticky top bar + nav */ } body.mobile .panel .panel-inner { position: static; inset: auto; width: 100%; max-width: none; height: auto; max-height: none; overflow: visible; border: 0; border-block-start: 1px solid var(--border); background: rgb(10 16 26 / 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 28px 18px 32px; pointer-events: auto; } /* "SHOW ON BOARD ▸" is a desktop-only hint — on desktop it invites clicking a project to open it on the 3D boardroom screen. There is no 3D scene on mobile, so the hint is meaningless there: hide it. */ body.mobile .module-board { display: none; } /* Callout popups float over the 3D on desktop — on mobile they restack as plain cards right below their section's panel-inner (they hold unique content: partnership list, guarantee, tech stack, next steps, quick facts). */ body.mobile .callout { position: static; inset: auto; width: auto; max-width: none; max-height: none; min-height: 0; overflow: visible; margin: 14px 18px 0; padding: 22px 20px 26px; border: 1px solid var(--border); border-radius: 14px; background: rgb(10 16 26 / 0.55); backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: auto; } body.mobile .callout-wide { inset-block-start: auto; inset-block-end: auto; } body.mobile .callout h2 { font-size: clamp(22px, 5.6vw, 28px); } /* Tech stack grid: 2 tidy columns on a phone. */ body.mobile .tech-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } /* Process steps stay as stacked cards. */ body.mobile .steps li { padding: 14px 16px; } /* --- Generic mobile polish -------------------------------------------------- */ body.mobile .btn-back { min-height: 44px; font-size: 14px; padding: 10px 0; } /* Form fields: >=16px prevents iOS auto-zoom on focus. */ body.mobile input, body.mobile textarea, body.mobile select { font-size: 16px; } body.mobile button[type="submit"] { min-height: 48px; } /* Section headings a touch larger for readability. */ body.mobile .panel-inner h2 { font-size: clamp(24px, 6.4vw, 32px); } body.mobile .panel-inner h3 { font-size: 18px; } /* FAQ accordions / list items get comfortable tap targets. */ body.mobile .faq-item summary, body.mobile details summary { min-height: 44px; display: flex; align-items: center; } /* --- Chat widget on mobile -------------------------------------------------- */ body.mobile .chat-widget { inset-inline-start: 1rem; bottom: 1rem; z-index: 1200; /* Mobile keeps the vertical stack: WhatsApp above the AI chat bubble. */ flex-direction: column; } body.mobile .chat-panel { width: calc(100vw - 2rem); /* leave room above the two FABs and the mobile URL bar / keyboard */ height: min(520px, calc(100vh - 8rem)); } /* Anti-bot honeypot: keep out of scroll flow — absolute + negative left in RTL inflates documentElement.scrollWidth (horizontal page scroll on mobile). */ body.mobile #lead-_hp { position: fixed !important; left: -9999px !important; top: auto !important; } /* --- Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.mobile .menu-item, body.mobile .btn-cta, body.mobile .chat-widget, body.mobile .chat-wa, body.mobile .chat-bubble { transition: none !important; animation: none !important; } }