/* AIRA Mobile v3 — final containment + commercial polish Loaded LAST in . Mobile only. Desktop remains untouched. */ @media (max-width: 767.98px) { :root { color-scheme: light; --aira-mobile-navy: #07131f; --aira-mobile-teal: #40e0d0; --aira-mobile-teal-dark: #007f7c; --aira-mobile-ink: #07131f; --aira-mobile-copy: #465765; --aira-mobile-line: #dce6e8; --aira-mobile-pad: 20px; } /* --- document: white canvas, vertical scroll only --- */ html, body, body.aira-body { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; background: #fff !important; overflow-x: clip !important; overscroll-behavior-x: none !important; -webkit-text-size-adjust: 100%; } @supports not (overflow: clip) { html, body, body.aira-body { overflow-x: hidden !important; } } body.aira-body { touch-action: pan-y !important; } #main-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: clip !important; background: #fff !important; } body > *, #main-content > *, .aira-shell, .aira-hero-grid, .aira-split, .aira-actions, [class*="grid"] { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } img, svg, video, canvas, iframe { max-width: 100% !important; } /* --- preserve the real AIRA header/menu --- */ .aira-header { display: block !important; visibility: visible !important; opacity: 1 !important; position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 5000 !important; overflow: visible !important; background: var(--aira-mobile-navy) !important; border-bottom: 1px solid rgba(64,224,208,.16) !important; } .aira-header .aira-nav { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; min-height: 72px !important; margin: 0 auto !important; padding: 10px var(--aira-mobile-pad) !important; overflow: visible !important; } .aira-header .aira-brand { display: inline-flex !important; align-items: center !important; gap: 10px !important; color: #fff !important; text-decoration: none !important; visibility: visible !important; opacity: 1 !important; } .aira-header .aira-brand-logo-frame, .aira-header .aira-brand-logo-frame img { display: block !important; visibility: visible !important; opacity: 1 !important; } .aira-menu-button { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 46px !important; height: 46px !important; min-width: 46px !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 12px !important; background: rgba(255,255,255,.04) !important; color: #fff !important; } .aira-menu-button i { display: block !important; width: 20px !important; height: 2px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: #fff !important; } /* closed by default; JS aria-expanded opens it reliably */ .aira-header .aira-menu { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; padding: 14px 20px 22px !important; background: var(--aira-mobile-navy) !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(64,224,208,.18) !important; box-shadow: 0 18px 40px rgba(7,19,31,.18) !important; z-index: 5100 !important; } .aira-menu-button[aria-expanded="true"] + .aira-menu, .aira-header .aira-menu.is-open, .aira-header .aira-menu.is-active, .aira-header .aira-menu[data-open="true"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; } .aira-header .aira-nav-link, .aira-header .aira-language { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 46px !important; padding: 10px 14px !important; color: rgba(255,255,255,.90) !important; text-align: center !important; text-decoration: none !important; } .aira-header .aira-nav-link.is-active { color: var(--aira-mobile-teal) !important; } .aira-header .aira-menu .aira-button { width: 100% !important; min-height: 50px !important; margin-top: 8px !important; justify-content: center !important; text-align: center !important; } /* --- Keep the website's existing scrollbar treatment. Do not restyle the browser scrollbar on mobile. --- */ .aira-progress { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 6000 !important; } .aira-progress > span, .aira-progress span[data-scroll-progress] { background: linear-gradient(90deg, #40e0d0, #67e8f9) !important; } /* --- homepage hero: white, centered, readable --- */ .aira-hero-home, .aira-hero { width: 100% !important; min-height: 0 !important; height: auto !important; padding: 46px 0 54px !important; overflow-x: clip !important; background: #fff !important; background-image: none !important; color: var(--aira-mobile-ink) !important; } .aira-hero-home::before, .aira-hero-home::after, .aira-hero::before, .aira-hero::after { display: none !important; } .aira-hero-home .aira-hero-grid, .aira-hero .aira-hero-grid { display: block !important; width: 100% !important; margin: 0 auto !important; padding: 0 var(--aira-mobile-pad) !important; } .aira-hero-home .aira-hero-copy, .aira-hero .aira-hero-copy, .aira-hero-home .aira-hero-grid > :first-child, .aira-hero .aira-hero-grid > :first-child { width: 100% !important; max-width: 640px !important; margin: 0 auto !important; text-align: center !important; } .aira-hero-home h1, .aira-hero h1 { max-width: 13ch !important; margin: 0 auto 20px !important; color: var(--aira-mobile-ink) !important; font-size: clamp(2.35rem, 10.8vw, 3.3rem) !important; line-height: 1.0 !important; letter-spacing: -.04em !important; text-align: center !important; text-wrap: balance; } .aira-hero-home p, .aira-hero p { max-width: 36rem !important; margin-left: auto !important; margin-right: auto !important; color: var(--aira-mobile-copy) !important; font-size: 1.03rem !important; line-height: 1.65 !important; text-align: center !important; } .aira-hero-home .aira-kicker, .aira-hero .aira-kicker, .aira-hero-home [class*="eyebrow"], .aira-hero [class*="eyebrow"] { color: var(--aira-mobile-teal-dark) !important; text-align: center !important; } .aira-hero-home .aira-system-map, .aira-hero .aira-system-map, .aira-hero-home .aira-hero-grid > :last-child:has(.aira-system-map), .aira-hero .aira-hero-grid > :last-child:has(.aira-system-map) { display: none !important; } /* --- buttons: generous spacing, never glued to copy --- */ .aira-actions { width: 100% !important; max-width: 520px !important; margin: 28px auto 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; justify-items: stretch !important; } .aira-actions > .aira-button, .aira-actions > a.aira-button, .aira-actions > button.aira-button { width: 100% !important; min-height: 50px !important; padding: 14px 18px !important; justify-content: center !important; text-align: center !important; } .aira-actions + p, .aira-button + p, [class*="cta"] + p { margin-top: 22px !important; } /* secondary/outline actions must stay visible on white */ .aira-button-outline, .aira-button-secondary, .aira-button-ghost { background: #fff !important; color: var(--aira-mobile-ink) !important; border-color: #b8c8cd !important; } .aira-text-link { color: var(--aira-mobile-teal-dark) !important; } /* --- Radar: absolutely not part of the mobile homepage --- */ #aira-opportunity-radar { display: none !important; } @supports selector(section:has(#aira-opportunity-radar)) { section:has(#aira-opportunity-radar) { display: none !important; } } /* --- white page surface, while preserving component/card colors --- */ #main-content > section, body > section.aira-section { width: 100% !important; max-width: 100% !important; background-color: #fff !important; background-image: none !important; overflow-x: clip !important; } #main-content > section { padding-top: 60px !important; padding-bottom: 60px !important; } #main-content > section > .aira-shell, body > section.aira-section > .aira-shell { width: 100% !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--aira-mobile-pad) !important; padding-right: var(--aira-mobile-pad) !important; } /* Section introductions are centered; cards/content remain free to be left-aligned. */ #main-content > section > .aira-shell > h2, #main-content > section > .aira-shell > h1, #main-content > section > .aira-shell > .aira-kicker, #main-content > section > .aira-shell > .aira-section-lead, #main-content > section > .aira-shell > p:first-of-type, .aira-section > .aira-shell > [data-reveal] > h2, .aira-section > .aira-shell > [data-reveal] > .aira-kicker, .aira-section > .aira-shell > [data-reveal] > .aira-section-lead { max-width: 34rem !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* If a formerly dark section is made white, repair its top-level copy only. */ #main-content > section > .aira-shell > h1, #main-content > section > .aira-shell > h2, #main-content > section > .aira-shell > p, .aira-section > .aira-shell > [data-reveal] > h2, .aira-section > .aira-shell > [data-reveal] > p { color: var(--aira-mobile-ink) !important; } #main-content > section > .aira-shell > p, .aira-section > .aira-shell > [data-reveal] > p:not(.aira-kicker) { color: var(--aira-mobile-copy) !important; line-height: 1.68 !important; } .aira-section .aira-kicker, #main-content > section > .aira-shell > .aira-kicker { color: var(--aira-mobile-teal-dark) !important; } /* grids stack, but we do NOT repaint their cards */ .aira-tech-mode-grid, .aira-investor-flow, .aira-solution-entry-grid, .aira-phase-grid, .aira-footer-grid { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; } .aira-roadmap-timeline { grid-template-columns: minmax(0,1fr) !important; gap: 18px !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: clip !important; } .aira-roadmap-timeline::before, .aira-roadmap-timeline::after, .aira-roadmap-node, .aira-investor-flow .aira-flow-card::after { display: none !important; } /* Decorative objects may never create document width. */ [class*="atmosphere"], [class*="orb"], [class*="sphere"], [class*="floating"], [class*="glow"] { max-width: 100% !important; } /* HumanX ticker: preserve ORIGINAL site palette. Mobile only trims depth and locks overflow. */ .humanx-ticker-wrap { width: 100% !important; max-width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-shadow: none !important; } .humanx-ticker { width: 100% !important; max-width: 100% !important; min-height: 0 !important; overflow: hidden !important; } .humanx-ticker-track { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .humanx-ticker-sequence { min-height: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; font-size: .72rem !important; line-height: 1.15 !important; } /* White-surface typography: ALL headings use the established dark teal. */ #main-content > section h1, #main-content > section h2, #main-content > section h3, #main-content > section h4, #main-content > section h5, #main-content > section h6 { color: #006b68 !important; } /* Dark cards/components keep white headings for contrast. */ #main-content .aira-tech-mode-card h1, #main-content .aira-tech-mode-card h2, #main-content .aira-tech-mode-card h3, #main-content .aira-tech-mode-card h4, #main-content .aira-architecture-grid .aira-card h1, #main-content .aira-architecture-grid .aira-card h2, #main-content .aira-architecture-grid .aira-card h3, #main-content .aira-architecture-grid .aira-card h4, #main-content [class*="dark"] h1, #main-content [class*="dark"] h2, #main-content [class*="dark"] h3, #main-content [class*="dark"] h4 { color: #fff !important; } #main-content > section > .aira-shell > .aira-kicker, #main-content > section > .aira-shell > [data-reveal] > .aira-kicker, #main-content > section .aira-section-head > .aira-kicker, #main-content > section .aira-section-header > .aira-kicker, #main-content > section .aira-eyebrow { color: #006b68 !important; } #main-content > section > .aira-shell > p, #main-content > section > .aira-shell > .aira-section-lead, #main-content > section > .aira-shell > [data-reveal] > p:not(.aira-kicker), #main-content > section .aira-section-head > p, #main-content > section .aira-section-header > p { color: #3f4f5c !important; } /* Copy-to-action spacing: no button may visually stick to the paragraph above it. */ #main-content p + .aira-actions, #main-content p + a.aira-button, #main-content p + button.aira-button, #main-content .aira-section-lead + .aira-actions, #main-content .aira-section-lead + a.aira-button, #main-content .aira-card p + .aira-button, #main-content .aira-card p + a.aira-button { margin-top: 26px !important; } #main-content .aira-actions { row-gap: 14px !important; } /* Forms */ input, select, textarea, button { max-width: 100% !important; } input, select, textarea { font-size: 16px !important; } /* Footer keeps its original AIRA dark treatment. */ .aira-footer, footer.aira-footer { background: var(--aira-mobile-navy) !important; color: #fff !important; overflow-x: clip !important; } .aira-footer .aira-shell { width: 100% !important; padding-left: var(--aira-mobile-pad) !important; padding-right: var(--aira-mobile-pad) !important; } .aira-footer, .aira-footer p, .aira-footer a, .aira-footer strong, .aira-footer span { color: inherit; } }