/** * HorizonOne Adaptive UI — device-class architecture * Driven by * Preserve brand colors, typefaces, and aesthetic. */ :root { --ho-space: 1; --ho-type: 1; --ho-gap: 1; --ho-anim: 1; --ho-safe-top: 0px; --ho-safe-right: 0px; --ho-safe-bottom: 0px; --ho-safe-left: 0px; } /* ---------- Full-screen navigation layer ---------- */ .ho-nav-layer { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: stretch; justify-content: stretch; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity calc(0.45s * var(--ho-anim, 1)) cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s; } .ho-nav-layer.is-open { pointer-events: auto; visibility: visible; opacity: 1; transition-delay: 0s; } .ho-nav-layer__backdrop { position: absolute; inset: 0; background: rgba(4, 9, 19, 0.72); backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); opacity: 0; transition: opacity calc(0.4s * var(--ho-anim, 1)) ease; } .ho-nav-layer.is-open .ho-nav-layer__backdrop { opacity: 1; } .ho-nav-layer__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; height: 100%; padding: calc(5.5rem + var(--ho-safe-top)) calc(1.5rem + var(--ho-safe-right)) calc(1.75rem + var(--ho-safe-bottom)) calc(1.5rem + var(--ho-safe-left)); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(12px); opacity: 0; transition: transform calc(0.5s * var(--ho-anim, 1)) cubic-bezier(0.22, 1, 0.36, 1), opacity calc(0.45s * var(--ho-anim, 1)) ease; } .ho-nav-layer.is-open .ho-nav-layer__panel { transform: translateY(0); opacity: 1; } .ho-nav-layer__groups { display: flex; flex-direction: column; gap: 2.25rem; max-width: 28rem; margin: 0 auto; width: 100%; } .ho-nav-layer__label { margin: 0 0 0.85rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(164, 182, 212, 0.55); } .ho-nav-layer__primary { display: flex; flex-direction: column; gap: 0.15rem; } .ho-nav-layer__primary a { display: flex; align-items: center; min-height: 3.25rem; padding: 0.55rem 0.15rem; font-family: Manrope, Inter, system-ui, sans-serif; font-size: clamp(1.55rem, 5.5vw, 2.15rem); font-weight: 600; letter-spacing: -0.03em; color: rgba(245, 247, 252, 0.94); text-decoration: none; border-bottom: 1px solid rgba(148, 163, 199, 0.08); transition: color 0.25s ease, padding-left 0.25s ease; } .ho-nav-layer__primary a:hover, .ho-nav-layer__primary a:focus-visible { color: #fff; padding-left: 0.35rem; outline: none; } .ho-nav-layer__eco { display: flex; flex-direction: column; gap: 0.35rem; } .ho-nav-layer__eco a { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0.65rem 0.9rem; border-radius: 14px; border: 1px solid rgba(94, 135, 232, 0.16); background: rgba(10, 20, 38, 0.35); color: rgba(230, 236, 248, 0.92); font-size: 1rem; font-weight: 560; text-decoration: none; transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; } .ho-nav-layer__eco a span { font-size: 0.85rem; color: rgba(143, 176, 255, 0.75); } .ho-nav-layer__eco a:hover, .ho-nav-layer__eco a:focus-visible { border-color: rgba(94, 135, 232, 0.4); background: rgba(14, 28, 52, 0.55); transform: translateY(-1px); outline: none; } .ho-nav-layer__eco a.is-muted { opacity: 0.72; } .ho-nav-layer__lang { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ho-nav-layer__lang button { min-width: 3rem; min-height: 2.75rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid rgba(148, 163, 199, 0.22); background: rgba(10, 20, 38, 0.4); color: rgba(236, 240, 248, 0.88); font-family: Manrope, Inter, system-ui, sans-serif; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; cursor: pointer; } .ho-nav-layer__lang button.is-active { border-color: rgba(62, 207, 168, 0.45); background: rgba(62, 207, 168, 0.12); color: #fff; } .ho-nav-layer__lang button:focus-visible { outline: 2px solid rgba(94, 135, 232, 0.55); outline-offset: 2px; } html.ho-nav-open, html.ho-nav-open body { overflow: hidden; } /* Hide legacy compact mobile nav when adaptive layer exists */ .uc-mobile-nav { display: none !important; } /* ---------- Adaptive spacing / type scale ---------- */ html[data-device-family="desktop"] .uc-container, html[data-device="laptop"] .uc-container { padding-left: calc(var(--uc-shell-gutter, 72px) * var(--ho-space)); padding-right: calc(var(--uc-shell-gutter, 72px) * var(--ho-space)); } html[data-device="desktop-large"] .uc-hero-title { font-size: calc(clamp(3.2rem, 6.2vw, 5.4rem) * var(--ho-type)); } html[data-device="desktop-large"] .uc-hero-subtitle { max-width: 34rem; font-size: calc(1.12rem * var(--ho-type)); } html[data-device="laptop"] .uc-hero-copy { padding-right: 1rem; } html[data-device="laptop"] .uc-section { padding-top: calc(4.5rem * var(--ho-space)); padding-bottom: calc(4.5rem * var(--ho-space)); } /* Tablet: touch-first reorganization */ html[data-device-family="tablet"] .uc-capabilities-grid, html[data-device-family="tablet"] .uc-ecosystem-grid { gap: calc(1.35rem * var(--ho-gap)); } html[data-device-family="tablet"] .uc-capability-card__surface, html[data-device-family="tablet"] .uc-eco-card__surface, html[data-device-family="tablet"] .uc-process-card__surface { padding: 1.55rem 1.45rem; } html[data-device-family="tablet"] .uc-capability-card__cta, html[data-device-family="tablet"] .uc-eco-card__more, html[data-device-family="tablet"] .uc-button { min-height: 3rem; } html[data-device="tablet-portrait"] .uc-ecosystem-grid, html[data-device="tablet-portrait"] .uc-capabilities-grid { grid-template-columns: 1fr; } html[data-device="tablet-landscape"] .uc-process-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-device="tablet-portrait"] .uc-process-grid--five { grid-template-columns: 1fr 1fr; } /* Hero: tablet vertical organization */ html[data-device-family="tablet"] .uc-hero-split { grid-template-columns: 1fr; min-height: auto; } html[data-device-family="tablet"] .uc-hero-copy { text-align: left; padding: 2rem 0 1rem; } html[data-device-family="tablet"] .uc-hero-visual { min-height: 42vh; } /* Mobile families: vertical native experience */ html[data-device-family="mobile"] .uc-hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; } html[data-device-family="mobile"] .uc-hero .uc-hero-cta, html[data-device-family="mobile"] .uc-hero .uc-hero-cta--secondary { width: 100%; justify-content: center; min-height: 3.25rem; } html[data-device-family="mobile"] .uc-capabilities-grid, html[data-device-family="mobile"] .uc-capabilities-grid--audience, html[data-device-family="mobile"] .uc-ecosystem-grid, html[data-device-family="mobile"] .uc-privacy-grid--compact, html[data-device-family="mobile"] .uc-process-grid--five { grid-template-columns: 1fr; gap: calc(1.1rem * var(--ho-gap)); } html[data-device-family="mobile"] .uc-section-header h2 { font-size: calc(1.75rem * var(--ho-type)); } html[data-device-family="mobile"] .uc-contact-cta__actions { flex-direction: column; align-items: stretch; } html[data-device-family="mobile"] .uc-contact-cta__btn { width: 100%; justify-content: center; min-height: 3.15rem; white-space: normal; } html[data-device="mobile-small"] .uc-hero-subtitle { font-size: 0.98rem; line-height: 1.55; } /* Immersive desktop storytelling */ html[data-story="immersive"] .uc-section { padding-top: calc(5.25rem * var(--ho-space)); padding-bottom: calc(5.25rem * var(--ho-space)); } html[data-story="immersive"] .uc-about-body p { font-size: calc(1.05rem * var(--ho-type)); max-width: 38rem; } /* Performance: reduce motion / effects on mobile + reduced-motion */ html.ho-perf-lite .uc-space__twinkles, html.ho-perf-lite .uc-space__dust, html.ho-perf-lite .uc-hero-globe__dust, html.ho-perf-lite .uc-hero-globe__pulses { animation: none !important; opacity: 0.35; } html.ho-perf-lite .uc-capability-card__surface:hover, html.ho-perf-lite .uc-eco-card__surface:hover, html.ho-perf-lite .uc-process-card__surface:hover { transform: none; } html[data-reduced-motion="true"] .ho-nav-layer, html[data-reduced-motion="true"] .ho-nav-layer__panel, html[data-reduced-motion="true"] .ho-nav-layer__backdrop { transition: none !important; } /* Pointer / touch affordances */ html[data-touch="true"] .uc-nav a, html[data-touch="true"] .uc-nav-cta, html[data-touch="true"] .uc-menu-toggle { min-height: 44px; } html[data-hover="none"] .uc-capability-card__surface:hover, html[data-hover="none"] .uc-eco-card__surface:hover { transform: none; box-shadow: inherit; } /* Safe areas for fixed chrome */ .uc-header.uc-header--site { padding-top: var(--ho-safe-top); padding-left: var(--ho-safe-left); padding-right: var(--ho-safe-right); } /* Desktop keeps classic pill nav; layer is for compact families */ html[data-device-family="desktop"] .uc-menu-toggle, html[data-device="laptop"] .uc-menu-toggle { display: none; } html[data-device-family="tablet"] .uc-nav, html[data-device-family="mobile"] .uc-nav, html[data-device-family="tablet"] .uc-menu-pill > .uc-lang, html[data-device-family="mobile"] .uc-menu-pill > .uc-lang, html[data-device-family="tablet"] .uc-menu-pill > .uc-nav-cta, html[data-device-family="mobile"] .uc-menu-pill > .uc-nav-cta { display: none; } html[data-device-family="tablet"] .uc-menu-toggle, html[data-device-family="mobile"] .uc-menu-toggle { display: inline-flex; } /* Laptop still shows desktop nav at 1024+ when fine pointer */ html[data-device="laptop"][data-pointer="fine"] .uc-nav { display: flex; } html[data-device="laptop"][data-pointer="fine"] .uc-menu-pill > .uc-lang, html[data-device="laptop"][data-pointer="fine"] .uc-menu-pill > .uc-nav-cta { display: inline-flex; } html[data-device="laptop"][data-pointer="fine"] .uc-menu-toggle { display: none; } /* When laptop is touch-primary, use layer menu */ html[data-device="laptop"][data-touch="true"][data-pointer="coarse"] .uc-nav, html[data-device="laptop"][data-touch="true"][data-pointer="coarse"] .uc-menu-pill > .uc-lang, html[data-device="laptop"][data-touch="true"][data-pointer="coarse"] .uc-menu-pill > .uc-nav-cta { display: none; } html[data-device="laptop"][data-touch="true"][data-pointer="coarse"] .uc-menu-toggle { display: inline-flex; }