/* ── Homepage WebGL orb canvas ─────────────────────────────────────────────── Inserted as the first body child by home-orb.js. Fixed behind all content. z-index: 0 — hero content sits above via its own z-index: 1 containers. opacity transitions handled in JS via Lenis scroll position. ────────────────────────────────────────────────────────────────────────────── */ #js-home-orb { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* ─── Custom cursor — home page only ───────────────────────────────────────── Native cursor hidden via body class. Cursor elements are appended to by JS so they sit outside .route-home-overview — styles are intentionally unscoped. Elements only exist when home-cursor.js runs. ──────────────────────────────────────────────────────────────────────────── */ .route-home-overview.cursor-active, .route-home-overview.cursor-active * { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; background: var(--ar-cyan); border-radius: 50%; pointer-events: none; z-index: 10020; will-change: transform; box-shadow: 0 0 6px rgba(0, 174, 239, 0.8); } .cursor-ring { position: fixed; top: 0; left: 0; width: 38px; height: 38px; border: 1.5px solid rgba(0, 174, 239, 0.32); border-radius: 50%; pointer-events: none; z-index: 10019; will-change: transform; } /* ── Homepage layout — wider than the global 1160px default ───────────────── Both the sticky header and section containers expand to 1480px so the nav and content feel like one unified full-bleed layout. ────────────────────────────────────────────────────────────────────────────── */ .route-home-overview .site-header__inner, .route-home-overview .container { width: min(100% - 4rem, 1480px); } .route-home-overview { --am-accent: var(--ar-cyan); --am-accent-2: var(--ar-orange); --am-glow: rgba(0, 174, 239, 0.24); --am-glow-soft: rgba(0, 174, 239, 0.12); --am-glow-strong: rgba(0, 174, 239, 0.34); --am-accent-2-soft: rgba(255, 111, 0, 0.46); --am-shadow: 0 26px 70px rgba(0, 0, 0, 0.5); --am-duration: 2.1s; --am-dramatic: 2.65s; } /* ─── Home Page — Hero Section ──────────────────────────────────────────────── Scoped to .route-home-overview (set as pageBodyClass in home.php). All tokens resolved from assets/css/core/tokens.css via app.css. ──────────────────────────────────────────────────────────────────────────── */ /* Looping decorative animations. Entrance reveals are owned by the .am-* skill. */ @keyframes heroPanelPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } } @keyframes heroOrbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes heroSceneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes heroScenePulse { 0%, 100% { opacity: 0.82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes heroSceneDashFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -24; } } @keyframes heroSceneGlowSweep { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @keyframes heroSceneProgressBreathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } } @keyframes heroSystemAssembleTop { 0% { opacity: 0; transform: translateY(-190px) rotateX(-42deg) scale(1.08); filter: blur(24px); } 68% { opacity: 1; transform: translateY(16px) rotateX(4deg) scale(0.992); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); } } @keyframes heroSystemAssembleLeft { 0% { opacity: 0; transform: translateX(-280px) rotateY(34deg) scale(0.86); filter: blur(24px); } 70% { opacity: 1; transform: translateX(14px) rotateY(-3deg) scale(1.015); filter: blur(3px); } 100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); } } @keyframes heroSystemAssembleCore { 0% { opacity: 0; transform: translateZ(260px) scale(0.56) rotateX(20deg); filter: blur(32px); } 64% { opacity: 1; transform: translateZ(0) scale(1.045) rotateX(-2deg); filter: blur(3px); } 100% { opacity: 1; transform: translateZ(0) scale(1) rotateX(0); filter: blur(0); } } @keyframes heroSystemAssembleRight { 0% { opacity: 0; transform: translateX(250px) rotateY(-28deg) scale(0.88); filter: blur(22px); } 70% { opacity: 1; transform: translateX(-12px) rotateY(3deg) scale(1.015); filter: blur(3px); } 100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); filter: blur(0); } } @keyframes heroSystemAssembleBottom { 0% { opacity: 0; transform: translateY(220px) rotateX(34deg) scale(0.82); filter: blur(20px); } 68% { opacity: 1; transform: translateY(-10px) rotateX(-2deg) scale(1.012); filter: blur(2px); } 100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); } } @keyframes heroSystemGridDrift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-10px, -8px, 0); } 100% { transform: translate3d(0, 0, 0); } } @keyframes heroSystemRingPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1) rotateX(70deg); opacity: 0.26; } 50% { transform: translate(-50%, -50%) scale(1.08) rotateX(70deg); opacity: 0.6; } } @keyframes heroSystemScan { 0% { transform: translateY(-110%); opacity: 0; } 18% { opacity: 0.4; } 82% { opacity: 0.24; } 100% { transform: translateY(460%); opacity: 0; } } @keyframes heroSystemConnectorFlow { from { background-position: 0 0; } to { background-position: 34px 0; } } @keyframes heroSystemGlow { 0%, 100% { opacity: 0.76; box-shadow: 0 0 0 rgba(0, 174, 239, 0); } 50% { opacity: 1; box-shadow: 0 0 18px rgba(0, 174, 239, 0.2); } } @keyframes heroSystemChartPulse { 0%, 100% { transform: scaleY(0.84); opacity: 0.62; } 50% { transform: scaleY(1.08); opacity: 1; } } @keyframes heroSystemModuleDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 35% { transform: translate3d(0, -10px, 0) scale(1.015); } 65% { transform: translate3d(0, 6px, 0) scale(0.99); } } @keyframes heroSystemBeaconPulse { 0%, 100% { opacity: 0.42; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.18); } } @keyframes heroSystemMetricPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 rgba(0, 174, 239, 0); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 24px rgba(0, 174, 239, 0.12); } } @keyframes heroSystemActivityPulse { 0%, 100% { opacity: 0; transform: scaleX(0.92); } 45% { opacity: 0.28; } 50% { opacity: 0.38; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.06); } } @keyframes heroSystemFrameIn { 0% { opacity: 0; transform: translate3d(0, 136px, 0) scale(0.82) rotateX(18deg); filter: blur(22px); } 72% { opacity: 1; transform: translate3d(0, -10px, 0) scale(1.012) rotateX(-1deg); filter: blur(1px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes heroSystemHeaderIn { 0% { opacity: 0; transform: translate3d(0, -250px, 0) scaleX(0.9) rotateX(-18deg); filter: blur(18px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes heroSystemSidebarIn { 0% { opacity: 0; transform: translate3d(-720px, 88px, 0) scale(0.76) rotateY(26deg); filter: blur(24px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes heroSystemNavItemIn { 0% { opacity: 0; transform: translate3d(-320px, 0, 0) scaleX(0.9); filter: blur(12px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } @keyframes heroSystemFooterIn { 0% { opacity: 0; transform: translate3d(0, 190px, 0) scaleY(0.82) rotateX(18deg); filter: blur(16px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes heroSystemModuleIn { 0% { opacity: 0; transform: translate3d(var(--hero-module-x, 0), var(--hero-module-y, 164px), 0) rotateX(var(--hero-module-rotate-x, 0deg)) rotateY(var(--hero-module-rotate-y, 0deg)) scale(var(--hero-module-scale, 0.82)); filter: blur(18px); } 68% { opacity: 1; transform: translate3d(0, -8px, 0) rotateX(0deg) rotateY(0deg) scale(1.012); filter: blur(1px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes heroSystemChartSweep { 0%, 100% { transform: translateX(-2%) scaleY(0.98); opacity: 0.72; } 50% { transform: translateX(2%) scaleY(1.02); opacity: 1; } } @keyframes heroSystemChartDraw { 0% { stroke-dashoffset: 540; opacity: 0.35; } 45%, 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.55; } } @keyframes heroSystemChartDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.72; } } @keyframes heroSystemShellPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.015); } } @keyframes processImgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ─── Section shell ─── */ .route-home-overview .home-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-start; overflow: hidden; padding-block: 45px 3rem; /* Full-bleed diagonal sweep + bottom fade into body background */ background: linear-gradient(to bottom, transparent 75%, var(--surface-canvas) 100%), radial-gradient(ellipse 130% 70% at 5% 60%, rgba(0, 174, 239, 0.10), transparent 60%), radial-gradient(ellipse 70% 60% at 95% 20%, rgba(255, 111, 0, 0.08), transparent 55%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 56, 0.5), transparent 70%); } /* ─── Background glows — intensified vs body default ─── */ .route-home-overview .home-hero__bg-glow { position: absolute; pointer-events: none; z-index: 0; } .route-home-overview .home-hero__bg-glow--cyan { width: 1100px; height: 1100px; top: -380px; left: -250px; background: radial-gradient(ellipse at center, rgba(0, 174, 239, 0.14) 0%, rgba(0, 174, 239, 0.05) 45%, transparent 72%); } .route-home-overview .home-hero__bg-glow--orange { width: 800px; height: 800px; top: -200px; right: -250px; background: radial-gradient(ellipse at center, rgba(255, 111, 0, 0.05) 0%, rgba(255, 111, 0, 0.01) 45%, transparent 72%); } /* ─── Two-column grid ─── */ .route-home-overview .home-hero__container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(560px, 1.04fr); gap: 2.35rem; align-items: start; } /* ─── Left: content stack ─── */ .route-home-overview .home-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.5rem; padding-top: 0.8rem; } .route-home-overview .home-hero__eyebrow { font-family: var(--font-primary); font-size: 0.72rem; font-weight: var(--weight-semibold); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ar-cyan); margin: 0; } .route-home-overview .home-hero__headline { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: var(--weight-semibold); line-height: 1.08; background: linear-gradient(to bottom, #ffffff 0%, var(--ar-cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text-primary); letter-spacing: -0.025em; margin: 0; } .route-home-overview .home-hero__headline-accent { /* color handled by parent gradient */ } .route-home-overview .home-hero__sub { font-family: var(--font-secondary); font-size: clamp(1rem, 1.5vw, 1.13rem); line-height: 1.75; color: var(--text-body); max-width: 52ch; margin: 0; } /* CTAs */ .route-home-overview .home-hero__cta-group { display: flex; flex-wrap: wrap; gap: 1rem; } .route-home-overview .home-hero__cta-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--ar-cyan); color: var(--text-inverse); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 0.95rem; padding: 0.8rem 1.9rem; border-radius: 9999px; border: none; letter-spacing: 0.01em; text-decoration: none; transition: background 0.7s var(--am-ease-silk), box-shadow 0.7s var(--am-ease-silk), border-color 0.7s ease; box-shadow: 0 0 28px rgba(0, 174, 239, 0.3); } .route-home-overview .home-hero__cta-primary:hover { background: #26c4f8; box-shadow: 0 0 40px rgba(0, 174, 239, 0.48); } .route-home-overview .home-hero__cta-primary:active { transform: scale(0.96); transition-duration: 80ms; } .route-home-overview .home-hero__cta-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-primary); font-family: var(--font-primary); font-weight: var(--weight-medium); font-size: 0.95rem; padding: 0.8rem 1.9rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.28); letter-spacing: 0.01em; text-decoration: none; transition: border-color 0.7s ease, background 0.7s var(--am-ease-silk), box-shadow 0.7s var(--am-ease-silk); } .route-home-overview .home-hero__cta-ghost:hover { border-color: rgba(0, 174, 239, 0.48); background: rgba(0, 174, 239, 0.07); } /* Trust strip */ .route-home-overview .home-hero__trust { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; padding-top: 0.25rem; } .route-home-overview .home-hero__trust span { font-family: var(--font-primary); font-size: 0.73rem; font-weight: var(--weight-medium); color: var(--text-muted); letter-spacing: 0.04em; } .route-home-overview .home-hero__trust-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--surface-border); flex-shrink: 0; } /* ─── Right: dashboard shell ─── */ .route-home-overview .home-hero__visual { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-end; min-height: 650px; padding-top: 0; padding-bottom: 0.4rem; margin-right: -0.12rem; perspective: 2200px; } /* Floating ambient orbs behind the panel */ .route-home-overview .home-hero__orb { position: absolute; border-radius: 50%; filter: blur(44px); pointer-events: none; z-index: 0; } .route-home-overview .home-hero__orb--1 { width: 310px; height: 310px; top: 86px; right: 156px; background: rgba(0, 174, 239, 0.18); animation: heroOrbFloat 6s ease-in-out infinite; } .route-home-overview .home-hero__orb--2 { width: 180px; height: 180px; bottom: 52px; left: 90px; background: rgba(255, 111, 0, 0.12); animation: heroOrbFloat 7.5s ease-in-out 1.2s infinite; } /* Operational dashboard shell */ .route-home-overview .home-hero__system-shell { --system-ui-2xs: 0.3125rem; --system-ui-xs: 0.375rem; --system-ui-sm: 0.5rem; --system-ui-md: 0.5625rem; --system-ui-lg: 0.625rem; --system-ui-xl: 0.6875rem; --system-ui-2xl: 0.75rem; --system-ui-3xl: 0.8125rem; position: relative; z-index: 1; width: 100%; max-width: 694px; height: min(650px, calc(100vh - 156px)); max-height: 650px; min-height: 0; padding: 0.72rem; border-radius: 32px; overflow: visible; transform: translateY(0); top: -10px; transform-style: preserve-3d; background: radial-gradient(circle at 16% 22%, rgba(0, 174, 239, 0.16), transparent 26%), radial-gradient(circle at 86% 14%, rgba(255, 111, 0, 0.08), transparent 24%), linear-gradient(145deg, rgba(0, 0, 24, 0.98) 24%, rgba(96, 110, 132, 0.32) 50%, rgba(0, 0, 24, 0.98) 78%); border: 1px solid rgba(0, 174, 239, 0.22); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56), 0 0 80px rgba(0, 174, 239, 0.1); opacity: 0; animation: heroSystemFrameIn 2.1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; } .route-home-overview .home-hero__system-shell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%), linear-gradient(90deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(0, 174, 239, 0.03)); pointer-events: none; z-index: 1; } .route-home-overview .home-hero__system-glow, .route-home-overview .home-hero__system-grid { position: absolute; inset: 0; pointer-events: none; } .route-home-overview .home-hero__system-glow { background: radial-gradient(circle at 64% 48%, rgba(0, 174, 239, 0.12), transparent 22%), radial-gradient(circle at 78% 58%, rgba(255, 111, 0, 0.08), transparent 16%); filter: blur(16px); animation: heroSystemShellPulse 5.8s ease-in-out 8.25s infinite both; z-index: 0; } .route-home-overview .home-hero__system-grid { background-image: linear-gradient(rgba(0, 174, 239, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 174, 239, 0.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 100%); opacity: 0.26; animation: heroSystemGridDrift 20s ease-in-out infinite; z-index: 0; } .route-home-overview .home-hero__system-header, .route-home-overview .home-hero__system-sidebar, .route-home-overview .home-hero__system-footer, .route-home-overview .home-hero__system-overview, .route-home-overview .home-hero__system-kpi, .route-home-overview .home-hero__system-chart-panel, .route-home-overview .home-hero__system-activity { position: relative; z-index: 2; } .route-home-overview .home-hero__system-header { display: flex; align-items: center; justify-content: space-between; gap: 0.72rem; min-height: 44px; padding: 0.38rem 0.62rem 0.44rem; margin-bottom: 0.78rem; background: rgba(4, 8, 24, 0.82); border: 1px solid rgba(0, 174, 239, 0.12); border-radius: 20px; opacity: 0; animation: heroSystemHeaderIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 2.35s both; } .route-home-overview .home-hero__system-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .route-home-overview .home-hero__system-brand-mark { display: inline-grid; gap: 2px; width: 16px; height: 12px; align-content: center; } .route-home-overview .home-hero__system-brand-mark span { display: block; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(220, 242, 255, 0.95), rgba(0, 174, 239, 0.82)); box-shadow: 0 0 10px rgba(0, 174, 239, 0.28); } .route-home-overview .home-hero__system-brand-mark span:nth-child(1) { width: 16px; } .route-home-overview .home-hero__system-brand-mark span:nth-child(2) { width: 12px; } .route-home-overview .home-hero__system-brand-mark span:nth-child(3) { width: 8px; } .route-home-overview .home-hero__system-brand-text, .route-home-overview .home-hero__system-panel-title, .route-home-overview .home-hero__system-title { font-family: var(--font-primary); color: rgba(240, 248, 255, 0.92); } .route-home-overview .home-hero__system-brand-text { font-size: var(--system-ui-lg); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; } .route-home-overview .home-hero__system-search { flex: 1; display: flex; align-items: center; gap: 0.54rem; max-width: 228px; min-height: 34px; padding: 0 0.68rem; background: rgba(8, 12, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; } .route-home-overview .home-hero__system-search-icon { width: 10px; height: 10px; border: 2px solid rgba(206, 223, 240, 0.78); border-radius: 50%; position: relative; flex-shrink: 0; } .route-home-overview .home-hero__system-search-icon::after { content: ''; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -2px; border-radius: 999px; background: rgba(206, 223, 240, 0.78); transform: rotate(42deg); transform-origin: center; } .route-home-overview .home-hero__system-search-text, .route-home-overview .home-hero__system-footer-item, .route-home-overview .home-hero__system-activity-item em, .route-home-overview .home-hero__system-subline { font-family: var(--font-primary); color: rgba(185, 205, 224, 0.72); } .route-home-overview .home-hero__system-search-text { font-size: var(--system-ui-sm); letter-spacing: 0.03em; } .route-home-overview .home-hero__system-actions { display: flex; align-items: center; gap: 0.5rem; } .route-home-overview .home-hero__system-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.62rem; border-radius: 999px; background: rgba(0, 174, 239, 0.1); border: 1px solid rgba(0, 174, 239, 0.18); font-family: var(--font-primary); font-size: var(--system-ui-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(198, 234, 252, 0.84); } .route-home-overview .home-hero__system-utility { display: inline-grid; gap: 3px; width: 16px; } .route-home-overview .home-hero__system-utility span { display: block; height: 2px; margin-left: auto; border-radius: 999px; background: rgba(208, 224, 238, 0.82); } .route-home-overview .home-hero__system-utility span:nth-child(1) { width: 16px; } .route-home-overview .home-hero__system-utility span:nth-child(2) { width: 10px; } .route-home-overview .home-hero__system-avatar { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, rgba(0, 174, 239, 0.26), rgba(3, 12, 34, 0.95)); border: 1px solid rgba(0, 174, 239, 0.2); font-family: var(--font-primary); font-size: var(--system-ui-sm); font-weight: var(--weight-semibold); letter-spacing: 0.06em; color: rgba(240, 248, 255, 0.92); } .route-home-overview .home-hero__system-stage { display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 0.86rem; min-height: 340px; margin-bottom: 0.62rem; } .route-home-overview .home-hero__system-sidebar { display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5rem; min-height: 340px; padding: 0.74rem 0.56rem 0.62rem; background: rgba(5, 10, 25, 0.7); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; opacity: 0; animation: heroSystemSidebarIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 3.4s both; } .route-home-overview .home-hero__system-sidebar-label, .route-home-overview .home-hero__system-tag, .route-home-overview .home-hero__system-kpi-label, .route-home-overview .home-hero__system-panel-state { font-family: var(--font-primary); font-size: var(--system-ui-xs); font-weight: var(--weight-semibold); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(150, 215, 248, 0.66); } .route-home-overview .home-hero__system-nav { display: flex; flex-direction: column; gap: 0.38rem; margin-top: 0.5rem; } .route-home-overview .home-hero__system-nav-item { display: flex; align-items: center; gap: 0.38rem; min-height: 26px; padding: 0 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.015); border: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--font-primary); font-size: var(--system-ui-sm); font-weight: var(--weight-semibold); color: rgba(220, 233, 244, 0.82); opacity: 0; transform: translateX(-26px); filter: blur(6px); animation: heroSystemNavItemIn 1.05s cubic-bezier(0.16, 1, 0.3, 1) both; } .route-home-overview .home-hero__system-nav-glyph { color: rgba(0, 174, 239, 0.9); font-size: 0.48rem; line-height: 1; } .route-home-overview .home-hero__system-nav-item:nth-child(1) { animation-delay: 4.15s; } .route-home-overview .home-hero__system-nav-item:nth-child(2) { animation-delay: 4.38s; } .route-home-overview .home-hero__system-nav-item:nth-child(3) { animation-delay: 4.61s; } .route-home-overview .home-hero__system-nav-item:nth-child(4) { animation-delay: 4.84s; } .route-home-overview .home-hero__system-nav-item:nth-child(5) { animation-delay: 5.07s; } .route-home-overview .home-hero__system-nav-item:nth-child(6) { animation-delay: 5.3s; } .route-home-overview .home-hero__system-nav-item:nth-child(7) { animation-delay: 5.53s; } .route-home-overview .home-hero__system-nav-item:nth-child(8) { animation-delay: 5.76s; } .route-home-overview .home-hero__system-nav-item:nth-child(9) { animation-delay: 5.99s; } .route-home-overview .home-hero__system-nav-item:nth-child(10) { animation-delay: 6.22s; } .route-home-overview .home-hero__system-nav-item:nth-child(11) { animation-delay: 6.45s; } .route-home-overview .home-hero__system-nav-item--active { background: rgba(0, 174, 239, 0.1); border-color: rgba(0, 174, 239, 0.24); color: rgba(234, 255, 255, 0.96); } .route-home-overview .home-hero__system-sidebar-status { display: flex; align-items: center; gap: 0.42rem; min-height: 42px; padding: 0.42rem 0.5rem; margin-top: 0.72rem; border-radius: 16px; background: rgba(0, 174, 239, 0.045); border: 1px solid rgba(0, 174, 239, 0.15); font-family: var(--font-primary); font-size: var(--system-ui-xs); color: rgba(198, 214, 228, 0.74); } .route-home-overview .home-hero__system-sync-line { width: 34px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(99, 230, 166, 0.9), rgba(99, 230, 166, 0)); box-shadow: 0 0 10px rgba(99, 230, 166, 0.2); } .route-home-overview .home-hero__system-canvas { display: grid; grid-template-rows: auto auto 1fr; gap: 0.68rem; min-height: 340px; } .route-home-overview .home-hero__system-overview, .route-home-overview .home-hero__system-chart-panel, .route-home-overview .home-hero__system-feed-panel, .route-home-overview .home-hero__system-kpi { background: rgba(10, 15, 33, 0.88); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 22px; backdrop-filter: blur(10px); } .route-home-overview .home-hero__system-overview { --hero-module-x: 220px; --hero-module-y: 72px; --hero-module-rotate-y: -16deg; --hero-module-scale: 0.84; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; padding: 0.78rem 0.9rem; opacity: 0; animation: heroSystemModuleIn 1.18s cubic-bezier(0.16, 1, 0.3, 1) 5.8s both; } .route-home-overview .home-hero__system-welcome { display: flex; flex-direction: column; gap: 0.34rem; } .route-home-overview .home-hero__system-title { font-size: var(--system-ui-2xl); font-weight: var(--weight-semibold); line-height: 1.15; letter-spacing: -0.03em; } .route-home-overview .home-hero__system-subline { font-size: var(--system-ui-sm); line-height: 1.45; max-width: 36ch; } .route-home-overview .home-hero__system-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.82rem; border-radius: 999px; background: rgba(255, 111, 0, 0.1); border: 1px solid rgba(255, 111, 0, 0.22); font-family: var(--font-primary); font-size: var(--system-ui-xs); font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 206, 156, 0.88); white-space: nowrap; } .route-home-overview .home-hero__system-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } .route-home-overview .home-hero__system-kpi { position: relative; min-height: 84px; padding: 0.68rem 0.7rem 0.6rem; opacity: 0; animation: heroSystemModuleIn 1.12s cubic-bezier(0.16, 1, 0.3, 1) both; } .route-home-overview .home-hero__system-kpi::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: heroSystemMetricPulse 5.8s ease-in-out 8.9s infinite both; } .route-home-overview .home-hero__system-kpi:nth-child(2)::after { animation-delay: 9.35s; } .route-home-overview .home-hero__system-kpi:nth-child(3)::after { animation-delay: 9.8s; } .route-home-overview .home-hero__system-kpi:nth-child(4)::after { animation-delay: 10.25s; } .route-home-overview .home-hero__system-kpi:nth-child(1) { animation-delay: 6.2s; } .route-home-overview .home-hero__system-kpi:nth-child(2) { animation-delay: 6.55s; } .route-home-overview .home-hero__system-kpi:nth-child(3) { animation-delay: 6.9s; } .route-home-overview .home-hero__system-kpi:nth-child(4) { animation-delay: 7.25s; } .route-home-overview .home-hero__system-kpi:nth-child(1) { --hero-module-x: 112px; --hero-module-y: 196px; --hero-module-rotate-y: 12deg; --hero-module-scale: 0.78; } .route-home-overview .home-hero__system-kpi:nth-child(2) { --hero-module-x: 0; --hero-module-y: 220px; --hero-module-rotate-x: 18deg; --hero-module-scale: 0.76; } .route-home-overview .home-hero__system-kpi:nth-child(3) { --hero-module-x: 154px; --hero-module-y: 180px; --hero-module-rotate-y: -12deg; --hero-module-scale: 0.78; } .route-home-overview .home-hero__system-kpi:nth-child(4) { --hero-module-x: 220px; --hero-module-y: 178px; --hero-module-rotate-y: -10deg; --hero-module-scale: 0.78; } .route-home-overview .home-hero__system-kpi-value { display: block; margin-top: 0.46rem; font-family: var(--font-display); font-size: var(--system-ui-lg); font-weight: var(--weight-bold); color: rgba(239, 247, 255, 0.96); letter-spacing: -0.04em; } .route-home-overview .home-hero__system-kpi-meta { display: block; margin-top: 0.18rem; font-family: var(--font-primary); font-size: var(--system-ui-2xs); color: rgba(112, 233, 191, 0.76); } .route-home-overview .home-hero__system-kpi--chart { display: flex; flex-direction: column; gap: 0.22rem; } .route-home-overview .home-hero__system-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .route-home-overview .home-hero__system-kpi-badge { display: inline-flex; align-items: center; min-height: 16px; padding: 0 0.28rem; border-radius: 999px; background: rgba(255, 111, 0, 0.09); border: 1px solid rgba(255, 111, 0, 0.14); font-family: var(--font-primary); font-size: var(--system-ui-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 206, 156, 0.86); } .route-home-overview .home-hero__system-kpi-chip { display: inline-flex; align-items: center; min-height: 18px; padding: 0 0.34rem; border-radius: 999px; background: rgba(0, 174, 239, 0.1); border: 1px solid rgba(0, 174, 239, 0.14); font-family: var(--font-primary); font-size: var(--system-ui-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(202, 237, 252, 0.82); white-space: nowrap; } .route-home-overview .home-hero__system-mini-chart { position: relative; margin-top: auto; overflow: hidden; } .route-home-overview .home-hero__system-mini-chart--bars { display: flex; align-items: flex-end; gap: 0.18rem; min-height: 20px; margin-top: 0.3rem; } .route-home-overview .home-hero__system-mini-chart--bars span { display: block; flex: 1 1 0; min-height: 8px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(0, 174, 239, 0.84), rgba(0, 174, 239, 0.14)); box-shadow: 0 0 12px rgba(0, 174, 239, 0.18); opacity: 0.82; transform-origin: bottom; animation: heroSystemMetricPulse 5.6s ease-in-out 8.95s infinite both; } .route-home-overview .home-hero__system-mini-chart--bars span:nth-child(1) { height: 7px; animation-delay: 9.05s; } .route-home-overview .home-hero__system-mini-chart--bars span:nth-child(2) { height: 10px; animation-delay: 9.2s; } .route-home-overview .home-hero__system-mini-chart--bars span:nth-child(3) { height: 6px; animation-delay: 9.35s; } .route-home-overview .home-hero__system-mini-chart--bars span:nth-child(4) { height: 12px; animation-delay: 9.5s; } .route-home-overview .home-hero__system-mini-chart--bars span:nth-child(5) { height: 8px; animation-delay: 9.65s; } .route-home-overview .home-hero__system-mini-chart--spark { height: 24px; margin-top: 0.3rem; } .route-home-overview .home-hero__system-mini-chart--spark span { display: block; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(90deg, transparent 0 12%, rgba(0, 174, 239, 0.5) 12% 13%, transparent 13% 31%, rgba(0, 174, 239, 0.68) 31% 32%, transparent 32% 52%, rgba(255, 111, 0, 0.58) 52% 53%, transparent 53% 74%, rgba(0, 174, 239, 0.62) 74% 75%, transparent 75% 100%), linear-gradient(180deg, rgba(0, 174, 239, 0.18), rgba(0, 174, 239, 0)); background-size: 100% 100%; animation: heroSystemChartSweep 4.8s ease-in-out 9.4s infinite both; } .route-home-overview .home-hero__system-mainrow { display: grid; grid-template-columns: 1fr 0.92fr; gap: 0.72rem; } .route-home-overview .home-hero__system-chart-panel, .route-home-overview .home-hero__system-activity { padding: 0.88rem; opacity: 0; animation: heroSystemModuleIn 1.18s cubic-bezier(0.16, 1, 0.3, 1) both; } .route-home-overview .home-hero__system-chart-panel { animation-delay: 7.35s; } .route-home-overview .home-hero__system-activity { animation-delay: 7.8s; } .route-home-overview .home-hero__system-chart-panel { --hero-module-x: 250px; --hero-module-y: 126px; --hero-module-rotate-y: -18deg; --hero-module-scale: 0.76; } .route-home-overview .home-hero__system-activity { --hero-module-x: 320px; --hero-module-y: 48px; --hero-module-rotate-y: -20deg; --hero-module-scale: 0.74; display: grid; grid-template-rows: auto 1fr; gap: 0.72rem; padding: 0; background: transparent; border: 0; backdrop-filter: none; } .route-home-overview .home-hero__system-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.48rem; margin-bottom: 0.78rem; } .route-home-overview .home-hero__system-panel-title { font-size: var(--system-ui-xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; } .route-home-overview .home-hero__system-activity .home-hero__system-panel-title { font-size: var(--system-ui-2xl); } .route-home-overview .home-hero__system-panel-state { color: rgba(112, 233, 191, 0.82); } .route-home-overview .home-hero__system-chart-card { position: relative; min-height: 188px; padding: 0.86rem; border-radius: 18px; background: linear-gradient(180deg, rgba(3, 9, 22, 0.88), rgba(4, 11, 24, 0.7)); border: 1px solid rgba(255, 255, 255, 0.045); overflow: hidden; } .route-home-overview .home-hero__system-line-chart { position: relative; min-height: 128px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), radial-gradient(circle at 70% 40%, rgba(0, 174, 239, 0.1), transparent 28%), rgba(4, 8, 22, 0.84); border: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden; } .route-home-overview .home-hero__system-chart-grid { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.035) 18% 19%, transparent 19% 36%, rgba(255, 255, 255, 0.03) 36% 37%, transparent 37% 54%, rgba(255, 255, 255, 0.03) 54% 55%, transparent 55% 72%, rgba(255, 255, 255, 0.03) 72% 73%, transparent 73% 100%), linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.03) 12% 12.4%, transparent 12.4% 32%, rgba(255, 255, 255, 0.03) 32% 32.4%, transparent 32.4% 52%, rgba(255, 255, 255, 0.03) 52% 52.4%, transparent 52.4% 72%, rgba(255, 255, 255, 0.03) 72% 72.4%, transparent 72.4% 100%); opacity: 0.55; } .route-home-overview .home-hero__system-chart-bars { position: absolute; left: 7%; right: 8%; bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; height: 36px; pointer-events: none; } .route-home-overview .home-hero__system-chart-bar { flex: none; width: 9px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(0, 174, 239, 0.56), rgba(0, 174, 239, 0.14)); box-shadow: 0 0 8px rgba(0, 174, 239, 0.08); opacity: 0.72; transform-origin: bottom; animation: heroSystemChartPulse 5.6s ease-in-out 8.85s infinite both; } .route-home-overview .home-hero__system-chart-bar--1 { height: 32%; animation-delay: 8.95s; } .route-home-overview .home-hero__system-chart-bar--2 { height: 56%; animation-delay: 9.1s; } .route-home-overview .home-hero__system-chart-bar--3 { height: 40%; animation-delay: 9.25s; } .route-home-overview .home-hero__system-chart-bar--4 { height: 72%; animation-delay: 9.4s; background: linear-gradient(180deg, rgba(112, 233, 191, 0.74), rgba(112, 233, 191, 0.14)); } .route-home-overview .home-hero__system-chart-bar--5 { height: 48%; animation-delay: 9.55s; } .route-home-overview .home-hero__system-chart-svg { position: absolute; inset: 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 1.8rem); overflow: visible; } .route-home-overview .home-hero__system-chart-line { fill: none; stroke: rgba(0, 174, 239, 0.96); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(0, 174, 239, 0.55)); stroke-dasharray: 540; stroke-dashoffset: 540; animation: heroSystemChartDraw 4s ease 8.7s infinite both; } .route-home-overview .home-hero__system-chart-line--secondary { stroke: rgba(255, 111, 0, 0.88); opacity: 0.88; animation-delay: 9.05s; } .route-home-overview .home-hero__system-chart-dot { fill: rgba(11, 211, 255, 1); filter: drop-shadow(0 0 9px rgba(0, 174, 239, 0.7)); animation: heroSystemChartDotPulse 2.2s ease-in-out 9.1s infinite both; } .route-home-overview .home-hero__system-chart-dot--accent { fill: rgba(255, 139, 37, 1); } .route-home-overview .home-hero__system-chart-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; margin-top: 0.64rem; } .route-home-overview .home-hero__system-chart-legend-box { min-height: 44px; padding: 0.46rem 0.54rem; border-radius: 12px; background: rgba(5, 8, 18, 0.58); border: 1px solid rgba(255, 255, 255, 0.06); } .route-home-overview .home-hero__system-chart-legend-box strong { display: block; font-family: var(--font-display); font-size: var(--system-ui-md); font-weight: var(--weight-bold); color: rgba(239, 247, 255, 0.96); } .route-home-overview .home-hero__system-chart-legend-box span { display: block; margin-top: 0.12rem; font-family: var(--font-primary); font-size: var(--system-ui-xs); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(150, 215, 248, 0.64); } .route-home-overview .home-hero__system-line-path { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0, 174, 239, 0.12) 100%), linear-gradient(108deg, transparent 0 10%, rgba(0, 174, 239, 0.24) 10% 11%, transparent 11% 22%, rgba(0, 174, 239, 0.3) 22% 23%, transparent 23% 40%, rgba(0, 174, 239, 0.24) 40% 41%, transparent 41% 58%, rgba(0, 174, 239, 0.28) 58% 59%, transparent 59% 72%, rgba(0, 174, 239, 0.34) 72% 73%, transparent 73% 100%); mask-image: linear-gradient(180deg, transparent 20%, black 20% 88%, transparent 88%); animation: heroSystemChartSweep 4.8s ease-in-out 8.75s infinite both; } .route-home-overview .home-hero__system-line-node { position: absolute; width: 4px; height: 15px; border-radius: 999px; background: linear-gradient(180deg, rgba(228, 246, 255, 0.96), rgba(0, 174, 239, 0.64)); box-shadow: 0 0 14px rgba(0, 174, 239, 0.34); animation: heroSystemBeaconPulse 3.4s ease-in-out 8.95s infinite both; } .route-home-overview .home-hero__system-line-node--1 { left: 22%; top: 62%; } .route-home-overview .home-hero__system-line-node--2 { left: 52%; top: 42%; animation-delay: 9.4s; } .route-home-overview .home-hero__system-line-node--3 { right: 14%; top: 34%; animation-delay: 9.85s; } .route-home-overview .home-hero__system-line-node--4 { right: 30%; top: 70%; animation-delay: 10.2s; } .route-home-overview .home-hero__system-sidecards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem; } .route-home-overview .home-hero__system-sidecard { display: grid; gap: 0.34rem; min-height: 66px; padding: 0.58rem 0.62rem 0.56rem; border-radius: 16px; background: rgba(4, 9, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); } .route-home-overview .home-hero__system-sidecard-label { font-family: var(--font-primary); font-size: var(--system-ui-xs); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(150, 215, 248, 0.68); } .route-home-overview .home-hero__system-sidecard-value { display: block; font-family: var(--font-display); font-size: var(--system-ui-md); font-weight: var(--weight-bold); color: rgba(239, 247, 255, 0.96); } .route-home-overview .home-hero__system-sidecard-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .route-home-overview .home-hero__system-sidecard-bar span { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 174, 239, 0.92), rgba(0, 174, 239, 0.24)); animation: heroSystemMetricPulse 4.8s ease-in-out 9.1s infinite both; } .route-home-overview .home-hero__system-sidecard-bar--orange { background: rgba(255, 111, 0, 0.16); } .route-home-overview .home-hero__system-sidecard-bar--orange span { width: 62%; background: linear-gradient(90deg, rgba(255, 111, 0, 0.92), rgba(255, 111, 0, 0.22)); animation-delay: 9.35s; } .route-home-overview .home-hero__system-feed-panel { padding: 0.72rem 0.74rem 0.7rem; } .route-home-overview .home-hero__system-activity-list { display: flex; flex-direction: column; gap: 0.44rem; } .route-home-overview .home-hero__system-activity-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.62rem; min-height: 34px; padding: 0 0.5rem; border-radius: 14px; background: rgba(5, 8, 18, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .route-home-overview .home-hero__system-activity-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(0, 174, 239, 0.14), transparent); opacity: 0; pointer-events: none; animation: heroSystemActivityPulse 6.4s ease-in-out 9.2s infinite both; } .route-home-overview .home-hero__system-activity-item strong { font-family: var(--font-primary); font-size: var(--system-ui-2xs); font-weight: var(--weight-medium); color: rgba(233, 242, 250, 0.86); } .route-home-overview .home-hero__system-activity-item em { font-size: var(--system-ui-2xs); font-style: normal; white-space: nowrap; } .route-home-overview .home-hero__system-activity-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 0 0.42rem; border-radius: 999px; background: rgba(255, 111, 0, 0.1); border: 1px solid rgba(255, 111, 0, 0.14); font-family: var(--font-primary); font-size: var(--system-ui-2xs); font-weight: var(--weight-semibold); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 206, 156, 0.88); } .route-home-overview .home-hero__system-activity-tag--cyan { background: rgba(0, 174, 239, 0.1); border-color: rgba(0, 174, 239, 0.14); color: rgba(198, 234, 252, 0.84); } .route-home-overview .home-hero__system-activity-item:nth-child(2)::after { animation-delay: 9.9s; } .route-home-overview .home-hero__system-activity-item:nth-child(3)::after { animation-delay: 10.6s; } .route-home-overview .home-hero__system-footer { position: relative; display: flex; align-items: center; gap: 0.62rem; min-height: 42px; padding: 0 0.88rem; margin-top: 0.16rem; background: linear-gradient(180deg, rgba(8, 16, 33, 0.8), rgba(3, 8, 21, 0.72)), rgba(2, 5, 18, 0.62); border: 1px solid rgba(0, 174, 239, 0.14); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(190, 232, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 0 18px rgba(0, 174, 239, 0.06); opacity: 0; animation: heroSystemFooterIn 1.18s cubic-bezier(0.16, 1, 0.3, 1) 5.1s both; } .route-home-overview .home-hero__system-footer-item { position: relative; display: inline-flex; align-items: center; font-size: var(--system-ui-sm); letter-spacing: 0.02em; color: rgba(173, 198, 218, 0.76); white-space: nowrap; } .route-home-overview .home-hero__system-footer-item--active { gap: 0.34rem; color: rgba(220, 247, 255, 0.92); } .route-home-overview .home-hero__system-footer-item--active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(156, 255, 204, 0.98) 0 38%, rgba(68, 219, 151, 0.88) 39% 100%); box-shadow: 0 0 0 3px rgba(68, 219, 151, 0.1), 0 0 12px rgba(68, 219, 151, 0.48); animation: heroSystemBeaconPulse 2.8s ease-in-out 8.7s infinite both; } .route-home-overview .home-hero__system-footer-divider { width: 14px; height: 1px; border-radius: 999px; background: linear-gradient(90deg, rgba(0, 174, 239, 0.08), rgba(162, 204, 230, 0.34), rgba(0, 174, 239, 0.08)); flex-shrink: 0; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .route-home-overview .home-hero__container { grid-template-columns: 1fr; gap: 3rem; } .route-home-overview .home-hero__visual { justify-content: center; min-height: 0; padding-top: 0; padding-bottom: 0; margin-right: 0; } .route-home-overview .home-hero__content { padding-top: 0; } .route-home-overview .home-hero__system-shell { max-width: 930px; } } @media (max-width: 900px) { .route-home-overview .home-hero__container { gap: 2.6rem; } .route-home-overview .home-hero__system-shell { min-height: 0; } .route-home-overview .home-hero__system-header { flex-wrap: wrap; } .route-home-overview .home-hero__system-search { max-width: none; order: 3; width: 100%; } .route-home-overview .home-hero__system-stage { grid-template-columns: 1fr; min-height: 0; } .route-home-overview .home-hero__system-sidebar { min-height: 0; gap: 1rem; } .route-home-overview .home-hero__system-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .route-home-overview .home-hero__system-mainrow { grid-template-columns: 1fr; } .route-home-overview .home-hero__system-overview { flex-direction: column; align-items: flex-start; } .route-home-overview .home-hero__system-kpis { grid-template-columns: 1fr; } } @media (max-width: 600px) { .route-home-overview .home-hero { padding-block: 3.5rem 2.5rem; min-height: 75vh; } .route-home-overview .home-hero__headline { font-size: clamp(2.1rem, 8.5vw, 2.8rem); } .route-home-overview .home-hero__cta-group { flex-direction: column; } .route-home-overview .home-hero__cta-primary, .route-home-overview .home-hero__cta-ghost { text-align: center; justify-content: center; } .route-home-overview .home-hero__visual { min-height: 0; margin-top: 0.9rem; } .route-home-overview .home-hero__system-shell { padding: 0.85rem; } .route-home-overview .home-hero__system-header { padding-inline: 0.85rem; } .route-home-overview .home-hero__system-brand-text { font-size: 0.68rem; } .route-home-overview .home-hero__system-search-text, .route-home-overview .home-hero__system-chip { font-size: 0.56rem; } .route-home-overview .home-hero__system-nav { grid-template-columns: 1fr; } .route-home-overview .home-hero__system-title { font-size: 0.88rem; } .route-home-overview .home-hero__system-subline { font-size: 0.56rem; } .route-home-overview .home-hero__system-kpi-value { font-size: 0.98rem; } .route-home-overview .home-hero__system-kpi-meta, .route-home-overview .home-hero__system-activity-item em, .route-home-overview .home-hero__system-footer-item { font-size: 0.54rem; } .route-home-overview .home-hero__system-line-chart { min-height: 110px; } .route-home-overview .home-hero__system-footer { flex-wrap: wrap; justify-content: flex-start; min-height: auto; padding-block: 0.8rem; } .route-home-overview .home-hero__system-footer-divider { display: none; } .route-home-overview .home-hero__system-footer-item { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════════════ SHARED SECTION UTILITIES ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-section-eyebrow { font-family: var(--font-primary); font-size: 0.7rem; font-weight: var(--weight-semibold); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ar-cyan); margin: 0; } .route-home-overview .home-section-headline { font-family: var(--font-display); font-size: var(--type-h1); font-weight: var(--weight-bold); line-height: 1.08; letter-spacing: -0.025em; color: var(--text-primary); margin: 0; text-wrap: balance; } .route-home-overview .home-section-body { font-family: var(--font-secondary); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.75; color: var(--text-body); max-width: 58ch; margin: 0; text-wrap: pretty; } .route-home-overview .home-accent-cyan { color: var(--ar-cyan); } .route-home-overview .home-accent-orange { color: var(--ar-orange); } /* ══════════════════════════════════════════════════════════════════════════════ PROBLEM SECTION ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-problem { padding-block: 7rem; position: relative; overflow: hidden; /* Feather top and bottom edges into the body background */ background: linear-gradient( to bottom, var(--surface-canvas) 0%, transparent 10%, transparent 90%, var(--surface-canvas) 100% ); } /* Full-bleed ambient — large cyan bloom top-right of the section */ .route-home-overview .home-problem::before { content: ''; position: absolute; width: 900px; height: 900px; top: -350px; right: -200px; background: radial-gradient(circle, rgba(0, 174, 239, 0.13), transparent 70%); pointer-events: none; z-index: 0; } .route-home-overview .home-problem__container { position: relative; z-index: 1; } .route-home-overview .home-problem__container { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0 5rem; align-items: start; } .route-home-overview .home-problem__header { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 2rem; } .route-home-overview .home-problem__cards { display: grid; grid-template-columns: 1fr; row-gap: 1.25rem; } .route-home-overview .home-problem__card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; padding: 1.75rem 2rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06) inset; display: flex; flex-direction: row; align-items: center; gap: 1.75rem; position: relative; /* Reveal + hover transitions owned by .am-hover-lift (skill). Do not set a `transition` shorthand here — it would clobber the am-reveal/am-cascade opacity + filter settle and make the card snap instead of glide. */ } .route-home-overview .home-problem__card-text { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .route-home-overview .home-problem__card:hover { border-color: rgba(0, 174, 239, 0.22); } .route-home-overview .home-problem__card-marker { width: 45px; height: 45px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .route-home-overview .home-problem__card-marker svg { width: 22px; height: 22px; flex-shrink: 0; } .route-home-overview .home-problem__card-marker--1 { background: rgba(0, 174, 239, 0.14); border: 1px solid rgba(0, 174, 239, 0.28); color: var(--ar-cyan); } .route-home-overview .home-problem__card-marker--2 { background: rgba(255, 111, 0, 0.12); border: 1px solid rgba(255, 111, 0, 0.24); color: var(--ar-orange); } .route-home-overview .home-problem__card-marker--3 { background: rgba(138, 75, 215, 0.14); border: 1px solid rgba(138, 75, 215, 0.30); color: rgba(138, 75, 215, 1); } .route-home-overview .home-problem__card-title { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: var(--weight-semibold); letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); margin: 0; } .route-home-overview .home-problem__card-body { font-family: var(--font-secondary); font-size: 0.92rem; line-height: 1.7; color: var(--text-body); margin: 0; } /* ══════════════════════════════════════════════════════════════════════════════ WHAT WE BUILD / SERVICES ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-services { padding-block: 7rem; position: relative; overflow: hidden; background: linear-gradient( to bottom, var(--surface-canvas) 0%, transparent 10%, transparent 90%, var(--surface-canvas) 100% ); } /* Full-bleed ambient — orange bloom bottom-left */ .route-home-overview .home-services::before { content: ''; position: absolute; width: 800px; height: 800px; bottom: -250px; left: -150px; background: radial-gradient(circle, rgba(255, 111, 0, 0.11), transparent 70%); pointer-events: none; z-index: 0; } .route-home-overview .home-services__container { position: relative; z-index: 1; } .route-home-overview .home-services__container { display: flex; flex-direction: column; gap: 3.5rem; } .route-home-overview .home-services__header { display: flex; flex-direction: column; gap: 1.1rem; } .route-home-overview .home-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .route-home-overview .home-services__card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; /* Reveal + hover transitions owned by .am-hover-lift (skill). See note in .home-problem__card — no `transition` shorthand here. */ } .route-home-overview .home-services__card:hover { border-color: rgba(0, 174, 239, 0.2); } .route-home-overview .home-services__card-icon { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .route-home-overview .home-services__card-icon::after { content: none; } .route-home-overview .home-services__card-icon svg { width: 20px; height: 20px; flex-shrink: 0; } .route-home-overview .home-services__card-icon--cyan { background: rgba(0, 174, 239, 0.12); border: 1px solid rgba(0, 174, 239, 0.25); color: var(--ar-cyan); } .route-home-overview .home-services__card-icon--orange { background: rgba(255, 111, 0, 0.12); border: 1px solid rgba(255, 111, 0, 0.25); color: var(--ar-orange); } .route-home-overview .home-services__card-icon--teal { background: rgba(0, 210, 190, 0.1); border: 1px solid rgba(0, 210, 190, 0.22); color: #00d2be; } .route-home-overview .home-services__card-icon--purple { background: rgba(160, 120, 255, 0.1); border: 1px solid rgba(160, 120, 255, 0.22); color: #a078ff; } .route-home-overview .home-services__card-title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: var(--weight-semibold); letter-spacing: -0.015em; line-height: 1.25; color: var(--text-primary); margin: 0; } .route-home-overview .home-services__card-body { font-family: var(--font-secondary); font-size: 0.93rem; line-height: 1.7; color: var(--text-body); margin: 0; } .route-home-overview .home-services__card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.25rem; border-top: 1px solid var(--surface-border); } .route-home-overview .home-services__card-list li { font-family: var(--font-primary); font-size: 0.82rem; font-weight: var(--weight-medium); color: var(--text-muted); padding-left: 1rem; position: relative; } .route-home-overview .home-services__card-list li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 5px; height: 5px; border-radius: 50%; background: var(--ar-cyan); opacity: 0.6; } /* Per-service accent variants — top border + tinted gradient bg + matching bullet dots */ .route-home-overview .home-services__card--cyan { border-top: 3px solid rgba(0, 174, 239, 0.85); background: linear-gradient(160deg, rgba(0, 174, 239, 0.05), var(--surface-page)); } .route-home-overview .home-services__card--cyan:hover { border-top-color: rgba(0, 174, 239, 0.8); } .route-home-overview .home-services__card--orange { border-top: 3px solid rgba(255, 111, 0, 0.85); background: linear-gradient(160deg, rgba(255, 111, 0, 0.05), var(--surface-page)); } .route-home-overview .home-services__card--orange:hover { border-top-color: rgba(255, 111, 0, 0.8); } .route-home-overview .home-services__card--orange .home-services__card-list li::before { background: var(--ar-orange); } .route-home-overview .home-services__card--teal { border-top: 3px solid rgba(0, 210, 190, 0.85); background: linear-gradient(160deg, rgba(0, 210, 190, 0.05), var(--surface-page)); } .route-home-overview .home-services__card--teal:hover { border-top-color: rgba(0, 210, 190, 0.8); } .route-home-overview .home-services__card--teal .home-services__card-list li::before { background: #00d2be; } .route-home-overview .home-services__card--purple { border-top: 3px solid rgba(160, 120, 255, 0.85); background: linear-gradient(160deg, rgba(160, 120, 255, 0.05), var(--surface-page)); } .route-home-overview .home-services__card--purple:hover { border-top-color: rgba(160, 120, 255, 0.8); } .route-home-overview .home-services__card--purple .home-services__card-list li::before { background: #a078ff; } /* ══════════════════════════════════════════════════════════════════════════════ HOW IT WORKS / PROCESS ══════════════════════════════════════════════════════════════════════════════ */ /* ── Phase 5: Pinned horizontal cinema ─────────────────────────────────────── */ /* Full-bleed: break out of main's centered constraint to reach full viewport width */ .route-home-overview .home-process { width: 100vw; margin-left: calc(50% - 50vw); position: relative; } /* Skip link — always-visible text divider between services and process. Lines expand from outside in to meet the text on hover and focus. */ .route-home-overview .home-process__skip { display: flex; align-items: center; justify-content: center; gap: 1.25rem; width: 100%; padding-block: 1.75rem; text-decoration: none; color: var(--text-muted); font-family: var(--font-primary); font-size: 0.68rem; font-weight: var(--weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; transition: color 280ms ease; outline: none; } .route-home-overview .home-process__skip::before, .route-home-overview .home-process__skip::after { content: ''; height: 1px; background: currentColor; opacity: 0.35; flex: 0 0 0; transition: flex-basis 460ms ease, opacity 280ms ease; } .route-home-overview .home-process__skip:hover, .route-home-overview .home-process__skip:focus-visible { color: var(--ar-cyan); outline: none; } .route-home-overview .home-process__skip:hover::before, .route-home-overview .home-process__skip:hover::after, .route-home-overview .home-process__skip:focus-visible::before, .route-home-overview .home-process__skip:focus-visible::after { flex-basis: 6rem; opacity: 0.6; } /* Scene — fills the viewport when pinned */ .route-home-overview .home-process__scene { height: 100vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Scene header row: eyebrow+headline left, dots right */ .route-home-overview .home-process__scene-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 3rem 6vw 1.5rem; flex-shrink: 0; } .route-home-overview .home-process__header { display: flex; flex-direction: column; gap: 0.7rem; } /* Step dots */ .route-home-overview .home-process__dots { display: flex; gap: 0.5rem; align-items: center; padding-top: 0.4rem; } .route-home-overview .home-process__dot { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); transition: background 0.3s ease, width 0.35s ease, box-shadow 0.3s ease; width: 6px; } .route-home-overview .home-process__dot--active { background: var(--ar-cyan); box-shadow: 0 0 8px rgba(0, 174, 239, 0.55); width: 22px; } /* Horizontal track — 4 panels wide */ .route-home-overview .home-process__track-outer { flex: 1; overflow: hidden; display: flex; } .route-home-overview .home-process__track { display: flex; width: calc(4 * 100vw); align-items: stretch; will-change: transform; list-style: none; padding: 0; margin: 0; } /* Individual panel — each equals exactly one viewport width */ .route-home-overview .home-process__panel { width: 100vw; flex-shrink: 0; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; align-content: center; gap: 4rem; padding: 0 8vw; opacity: 0.28; transition: opacity 0.55s ease; } .route-home-overview .home-process__panel.is-active { opacity: 1; } /* Huge ambient number */ .route-home-overview .home-process__panel-num { font-family: var(--font-display); font-size: clamp(6rem, 18vw, 15rem); font-weight: var(--weight-extrabold); letter-spacing: -0.06em; line-height: 1; color: rgba(0, 174, 239, 0.05); -webkit-text-stroke: 1px rgba(255, 111, 0, 0.13); text-shadow: 0 0 20px rgba(255, 111, 0, 0.09), 0 0 50px rgba(255, 111, 0, 0.04); user-select: none; transition: color 0.55s ease, text-shadow 0.55s ease, -webkit-text-stroke 0.55s ease; } .route-home-overview .home-process__panel.is-active .home-process__panel-num { color: rgba(0, 174, 239, 0.10); -webkit-text-stroke: 1px rgba(255, 111, 0, 0.24); text-shadow: 0 0 24px rgba(255, 111, 0, 0.20), 0 0 60px rgba(255, 111, 0, 0.09), 0 0 100px rgba(255, 111, 0, 0.04); } /* Panel visual — illustration column */ .route-home-overview .home-process__panel-visual { display: flex; align-items: center; justify-content: center; } /* Frame: handles scale entrance + opacity — spring ease gives a satisfying snap */ .route-home-overview .home-process__panel-visual-frame { transform: scale(0.90); opacity: 0.85; transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.55s ease; } .route-home-overview .home-process__panel.is-active .home-process__panel-visual-frame { transform: scale(1.0); opacity: 1; } /* Image: handles float loop — starts after scale finishes, runs indefinitely */ .route-home-overview .home-process__panel.is-active .home-process__panel-visual-frame img { animation: processImgFloat 5s ease-in-out 0.5s infinite; } .route-home-overview .home-process__panel-visual img { width: 100%; max-width: 480px; max-height: 60vh; object-fit: contain; border-radius: var(--radius-lg); } /* Panel text content */ .route-home-overview .home-process__panel-content { display: flex; flex-direction: column; gap: 1.25rem; } .route-home-overview .home-process__panel-title { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: var(--weight-extrabold); letter-spacing: -0.03em; color: var(--text-primary); margin: 0; line-height: 1.05; } .route-home-overview .home-process__panel-body { font-family: var(--font-secondary); font-size: clamp(0.95rem, 1.25vw, 1.05rem); line-height: 1.78; color: var(--text-body); margin: 0; max-width: 460px; } /* Progress bar */ .route-home-overview .home-process__progress-bar { position: absolute; bottom: 2.5rem; left: 6vw; right: 6vw; height: 1px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; } .route-home-overview .home-process__progress-fill { height: 100%; width: 0%; background: var(--ar-cyan); box-shadow: 0 0 10px rgba(0, 174, 239, 0.6), 0 0 24px rgba(0, 174, 239, 0.2); } /* ══════════════════════════════════════════════════════════════════════════════ PACKAGES ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-packages { padding-block: 7rem; position: relative; overflow: hidden; background: linear-gradient( to bottom, var(--surface-canvas) 0%, transparent 10%, transparent 90%, var(--surface-canvas) 100% ); } /* Full-bleed ambient — wide cyan ellipse rising from bottom-center */ .route-home-overview .home-packages::before { content: ''; position: absolute; width: 120%; height: 600px; bottom: -300px; left: -10%; background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(0, 174, 239, 0.12), transparent 70%); pointer-events: none; z-index: 0; } .route-home-overview .home-packages__container { position: relative; z-index: 1; } .route-home-overview .home-packages__container { display: flex; flex-direction: column; gap: 3.5rem; } .route-home-overview .home-packages__header { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 760px; align-self: center; text-align: center; } .route-home-overview .home-packages__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: start; } .route-home-overview .home-packages__card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; padding: 1.75rem 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset; display: flex; flex-direction: column; gap: 1.25rem; position: relative; /* Reveal + hover transitions owned by .am-hover-lift (skill). See note in .home-problem__card — no `transition` shorthand here. */ } .route-home-overview .home-packages__card:hover { border-color: rgba(0, 174, 239, 0.2); } .route-home-overview .home-packages__card--featured { border-color: rgba(0, 174, 239, 0.32); background: linear-gradient(160deg, rgba(0, 174, 239, 0.07), var(--surface-page)); box-shadow: 0 0 40px rgba(0, 174, 239, 0.08), 0 20px 50px rgba(0, 0, 0, 0.3); } .route-home-overview .home-packages__card--featured:hover { border-color: rgba(0, 174, 239, 0.5); } .route-home-overview .home-packages__card--ascend { border-color: rgba(255, 111, 0, 0.2); background: linear-gradient(160deg, rgba(255, 111, 0, 0.04), var(--surface-page)); } .route-home-overview .home-packages__card--ascend:hover { border-color: rgba(255, 111, 0, 0.38); } .route-home-overview .home-packages__card--spark { border-top: 3px solid rgba(0, 184, 156, 0.85); background: linear-gradient(160deg, rgba(0, 184, 156, 0.05), var(--surface-page)); } .route-home-overview .home-packages__card--spark:hover { border-top-color: rgba(0, 184, 156, 0.8); } .route-home-overview .home-packages__card--spark .home-packages__features li::before { background: rgba(0, 184, 156, 0.9); } .route-home-overview .home-packages__card--evolve { border-top: 3px solid rgba(138, 75, 215, 0.85); background: linear-gradient(160deg, rgba(138, 75, 215, 0.05), var(--surface-page)); } .route-home-overview .home-packages__card--evolve:hover { border-top-color: rgba(138, 75, 215, 0.8); } .route-home-overview .home-packages__card--evolve .home-packages__features li::before { background: rgba(138, 75, 215, 0.9); } .route-home-overview .home-packages__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--ar-cyan); color: var(--text-inverse); font-family: var(--font-primary); font-size: 0.62rem; font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28rem 0.85rem; border-radius: 9999px; white-space: nowrap; box-shadow: 0 0 16px rgba(0, 174, 239, 0.4); } .route-home-overview .home-packages__card-top { display: flex; flex-direction: column; gap: 0.3rem; } .route-home-overview .home-packages__name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--text-primary); margin: 0; } .route-home-overview .home-packages__tagline { font-family: var(--font-secondary); font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); margin: 0; } .route-home-overview .home-packages__price-block { display: flex; flex-direction: column; gap: 0.2rem; padding-block: 0.75rem; border-block: 1px solid var(--surface-border); } .route-home-overview .home-packages__setup { font-family: var(--font-primary); font-size: 0.75rem; font-weight: var(--weight-medium); color: var(--text-muted); } .route-home-overview .home-packages__monthly { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: var(--weight-bold); letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.1; } .route-home-overview .home-packages__per { font-size: 0.85rem; font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; } .route-home-overview .home-packages__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .route-home-overview .home-packages__features li { font-family: var(--font-secondary); font-size: 0.86rem; color: var(--text-body); padding-left: 1.1rem; position: relative; line-height: 1.5; } .route-home-overview .home-packages__features li::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-cyan); opacity: 0.75; } .route-home-overview .home-packages__card--ascend .home-packages__features li::before { background: var(--ar-orange); } .route-home-overview .home-packages__cta { display: block; text-align: center; padding: 0.75rem 1rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.28); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 0.88rem; color: var(--text-primary); text-decoration: none; transition: border-color 0.7s ease, background 0.7s var(--am-ease-silk), box-shadow 0.7s var(--am-ease-silk); } .route-home-overview .home-packages__cta:hover { border-color: rgba(0, 174, 239, 0.38); background: rgba(0, 174, 239, 0.07); } .route-home-overview .home-packages__cta--featured { background: var(--ar-cyan); color: var(--text-inverse); border-color: transparent; box-shadow: 0 0 22px rgba(0, 174, 239, 0.32); } .route-home-overview .home-packages__cta--featured:hover { background: #26c4f8; border-color: transparent; box-shadow: 0 0 36px rgba(0, 174, 239, 0.5); } .route-home-overview .home-packages__note { text-align: center; font-family: var(--font-primary); font-size: 0.75rem; color: var(--text-muted); margin: 0 auto; opacity: 0.7; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.22); width: 100%; } /* ══════════════════════════════════════════════════════════════════════════════ PROOF / TRUST ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-proof { padding-block: 7rem; position: relative; overflow: hidden; background: linear-gradient( to bottom, var(--surface-canvas) 0%, transparent 10%, transparent 90%, var(--surface-canvas) 100% ); } /* Full-bleed ambient — cyan sweep across top-left */ .route-home-overview .home-proof::before { content: ''; position: absolute; width: 700px; height: 700px; top: -200px; left: -100px; background: radial-gradient(circle, rgba(0, 174, 239, 0.12), transparent 70%); pointer-events: none; z-index: 0; } .route-home-overview .home-proof__container { position: relative; z-index: 1; } .route-home-overview .home-proof__container { display: flex; flex-direction: column; gap: 3.5rem; } .route-home-overview .home-proof__header { display: flex; flex-direction: column; gap: 1.1rem; } .route-home-overview .home-proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .route-home-overview .home-proof__stat { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 3rem; padding-right: 3rem; border-right: 1px solid rgba(255, 255, 255, 0.06); } .route-home-overview .home-proof__stat:first-child { padding-left: 0; } .route-home-overview .home-proof__stat:last-child { border-right: none; padding-right: 0; } .route-home-overview .home-proof__stat-value { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: var(--weight-extrabold); letter-spacing: -0.04em; line-height: 1; color: var(--ar-cyan); } .route-home-overview .home-proof__stat-label { font-family: var(--font-secondary); font-size: 0.9rem; line-height: 1.5; color: var(--text-body); } .route-home-overview .home-proof__values { display: flex; flex-direction: column; gap: 1rem; } .route-home-overview .home-proof__value { display: flex; align-items: flex-start; gap: 0.9rem; font-family: var(--font-secondary); font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.6; color: var(--text-body); } .route-home-overview .home-proof__value-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-cyan); flex-shrink: 0; margin-top: 0.48em; opacity: 0.7; } /* ══════════════════════════════════════════════════════════════════════════════ FINAL CTA ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-final-cta { position: relative; padding-block: 8rem 6rem; overflow: hidden; text-align: center; background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0, 0, 56, 0.6), transparent); } .route-home-overview .home-final-cta__glow { position: absolute; pointer-events: none; z-index: 0; } .route-home-overview .home-final-cta__glow--cyan { width: 600px; height: 400px; top: -100px; left: 50%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(0, 174, 239, 0.14) 0%, rgba(0, 174, 239, 0.04) 50%, transparent 75%); } .route-home-overview .home-final-cta__glow--orange { width: 400px; height: 300px; bottom: -60px; right: 10%; background: radial-gradient(ellipse at center, rgba(255, 111, 0, 0.09) 0%, rgba(255, 111, 0, 0.03) 50%, transparent 75%); } .route-home-overview .home-final-cta__container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .route-home-overview .home-final-cta__headline { font-family: var(--font-display); font-size: var(--type-h1); font-weight: var(--weight-bold); letter-spacing: -0.025em; line-height: 1.08; color: var(--text-primary); margin: 0; text-wrap: balance; } .route-home-overview .home-final-cta__body { font-family: var(--font-secondary); font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.75; color: var(--text-body); max-width: 52ch; margin: 0; text-wrap: pretty; } .route-home-overview .home-final-cta__btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ar-cyan); color: var(--text-inverse); font-family: var(--font-primary); font-weight: var(--weight-semibold); font-size: 1rem; padding: 0.9rem 2.4rem; border-radius: 9999px; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 0 36px rgba(0, 174, 239, 0.36); transition: background 0.7s var(--am-ease-silk), box-shadow 0.7s var(--am-ease-silk), border-color 0.7s ease; margin-top: 0.5rem; } .route-home-overview .home-final-cta__btn:hover { background: #26c4f8; box-shadow: 0 0 56px rgba(0, 174, 239, 0.52); } .route-home-overview .home-final-cta__btn:active { transform: scale(0.96); transition-duration: 80ms; } .route-home-overview .home-final-cta__note { font-family: var(--font-primary); font-size: 0.75rem; color: var(--text-muted); opacity: 0.65; margin: 0; margin-top: 1.25rem; } /* ══════════════════════════════════════════════════════════════════════════════ SCROLL TO TOP BUTTON ══════════════════════════════════════════════════════════════════════════════ */ @keyframes scrollBtnBreath { 0%, 100% { box-shadow: 0 0 8px rgba(0, 174, 239, 0.1), 0 0 0 rgba(0, 174, 239, 0); } 50% { box-shadow: 0 0 22px rgba(0, 174, 239, 0.28), 0 0 42px rgba(0, 174, 239, 0.09); } } .route-home-overview .scroll-top-btn { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border-radius: 50%; background: rgba(6, 6, 26, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--surface-border); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 900; opacity: 0; transform: scale(0.82); pointer-events: none; transition: border-color 160ms ease, box-shadow 160ms ease; padding: 0; animation: scrollBtnBreath 2.5s ease-in-out infinite; animation-play-state: paused; } .route-home-overview .scroll-top-btn.is-visible { animation-play-state: running; } .route-home-overview .scroll-top-btn:hover { border-color: rgba(0, 174, 239, 0.45); box-shadow: 0 0 28px rgba(0, 174, 239, 0.35), 0 0 50px rgba(0, 174, 239, 0.12); animation-play-state: paused; } .route-home-overview .scroll-top-btn:hover .scroll-top-btn__arrow { transform: translateY(-2px); } /* Progress ring SVG — sits over the full button */ .route-home-overview .scroll-top-btn__ring { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; } .route-home-overview .scroll-top-btn__ring-track { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 2.5; } .route-home-overview .scroll-top-btn__ring-fill { fill: none; stroke: var(--ar-cyan); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: 131.95; transition: stroke-dashoffset 60ms linear; filter: drop-shadow(0 0 2px #00aeef) drop-shadow(0 0 5px rgba(0, 174, 239, 0.75)) drop-shadow(0 0 10px rgba(0, 174, 239, 0.4)); } /* Arrow icon — centered, animated on hover */ .route-home-overview .scroll-top-btn__arrow { position: relative; z-index: 1; width: 15px; height: 15px; color: var(--text-primary); transition: transform 180ms ease; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════════════ RESPONSIVE — all sections ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .route-home-overview .home-packages__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .route-home-overview .home-problem__container { grid-template-columns: 1fr; gap: 2.5rem; } .route-home-overview .home-problem__header { position: static; } .route-home-overview .home-problem__card { flex-direction: column; align-items: flex-start; } .route-home-overview .home-services__grid { grid-template-columns: 1fr; } /* Process cinema — collapse to vertical on small screens */ .route-home-overview .home-process__scene { height: auto; overflow: visible; } .route-home-overview .home-process__scene-header { padding: 3rem 1.5rem 1.5rem; } .route-home-overview .home-process__dots, .route-home-overview .home-process__progress-bar { display: none; } .route-home-overview .home-process__track-outer { overflow: visible; } .route-home-overview .home-process__track { width: 100%; flex-direction: column; transform: none !important; } .route-home-overview .home-process__panel-visual { display: none; } .route-home-overview .home-process__panel { width: 100%; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 2.5rem 1.5rem; opacity: 1; border-bottom: 1px solid var(--surface-border); } .route-home-overview .home-process__panel-num { font-size: clamp(3.5rem, 12vw, 6rem); color: rgba(0, 174, 239, 0.10); } .route-home-overview .home-proof__stats { grid-template-columns: 1fr; } .route-home-overview .home-proof__stat { border-right: none; padding-right: 0; padding-left: 0; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .route-home-overview .home-proof__stat:last-child { border-bottom: none; padding-bottom: 0; } } @media (max-width: 700px) { .route-home-overview .home-packages__grid { grid-template-columns: 1fr; } .route-home-overview .home-problem, .route-home-overview .home-services, .route-home-overview .home-process, .route-home-overview .home-packages, .route-home-overview .home-proof, .route-home-overview .home-final-cta { padding-block: 4.5rem; } /* .home-proof__stats card was removed in polish pass — no padding needed */ } /* ══════════════════════════════════════════════════════════════════════════════ TESTIMONIALS ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-testimonials { padding-block: 7rem; position: relative; overflow: hidden; background: linear-gradient( to bottom, var(--surface-canvas) 0%, transparent 10%, transparent 90%, var(--surface-canvas) 100% ); } /* Full-bleed ambient — orange bloom top-right */ .route-home-overview .home-testimonials::before { content: ''; position: absolute; width: 800px; height: 800px; top: -300px; right: -200px; background: radial-gradient(circle, rgba(255, 111, 0, 0.05), transparent 70%); pointer-events: none; z-index: 0; } .route-home-overview .home-testimonials__container { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3.5rem; } .route-home-overview .home-testimonials__header { display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px; } .route-home-overview .home-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .route-home-overview .home-testimonials__card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset; padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; position: relative; overflow: hidden; margin: 0; /* Reveal + hover transitions owned by .am-hover-lift (skill). See note in .home-problem__card — no `transition` shorthand here. */ } .route-home-overview .home-testimonials__card:hover { border-color: rgba(0, 174, 239, 0.22); } /* Large decorative opening quote mark */ .route-home-overview .home-testimonials__card::before { content: '\201C'; position: absolute; top: 0.75rem; left: 1.5rem; font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--ar-cyan); opacity: 0.38; pointer-events: none; user-select: none; } .route-home-overview .home-testimonials__quote { font-family: var(--font-secondary); font-size: clamp(0.92rem, 1.2vw, 1rem); line-height: 1.78; color: var(--text-body); margin: 0; padding: 0; padding-top: 1.75rem; border: none; } .route-home-overview .home-testimonials__author { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); } .route-home-overview .home-testimonials__name { font-family: var(--font-primary); font-size: 0.88rem; font-weight: var(--weight-semibold); color: var(--ar-cyan); letter-spacing: 0.01em; } .route-home-overview .home-testimonials__role { font-family: var(--font-primary); font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em; } @media (max-width: 900px) { .route-home-overview .home-testimonials__grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ FOCUS VISIBLE — keyboard navigation outline is used (not box-shadow) so the ring is never clipped by overflow: hidden parents and correctly follows border-radius on pill shapes. ══════════════════════════════════════════════════════════════════════════════ */ .route-home-overview .home-hero__cta-primary:focus-visible, .route-home-overview .home-hero__cta-ghost:focus-visible, .route-home-overview .home-packages__cta:focus-visible, .route-home-overview .home-final-cta__btn:focus-visible { outline: 2px solid var(--ar-cyan); outline-offset: 3px; } .route-home-overview .scroll-top-btn:focus-visible { outline: 2px solid var(--ar-cyan); outline-offset: 4px; } /* ══════════════════════════════════════════════════════════════════════════════ REDUCED MOTION OVERRIDES Disables all CSS-driven animations for users who have requested reduced motion in their OS accessibility settings. GSAP and Three.js are already gated in their respective JS files (home-scroll.js:5, home-orb.js:65). ══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { /* Hero reveals are .am-* elements — the skill's own reduced-motion block forces them visible. Only the bespoke decorative loops are handled here. */ /* Continuous decorative animations — stop without affecting visibility */ .route-home-overview .home-hero__orb--1, .route-home-overview .home-hero__orb--2, .route-home-overview .home-hero__system-shell, .route-home-overview .home-hero__system-header, .route-home-overview .home-hero__system-sidebar, .route-home-overview .home-hero__system-nav-item, .route-home-overview .home-hero__system-overview, .route-home-overview .home-hero__system-kpi, .route-home-overview .home-hero__system-chart-panel, .route-home-overview .home-hero__system-activity, .route-home-overview .home-hero__system-footer, .route-home-overview .home-hero__system-glow, .route-home-overview .home-hero__system-grid, .route-home-overview .home-hero__system-line-path, .route-home-overview .home-hero__system-line-node, .route-home-overview .scroll-top-btn { animation: none; } .route-home-overview .home-hero__system-shell, .route-home-overview .home-hero__system-header, .route-home-overview .home-hero__system-sidebar, .route-home-overview .home-hero__system-nav-item, .route-home-overview .home-hero__system-overview, .route-home-overview .home-hero__system-kpi, .route-home-overview .home-hero__system-chart-panel, .route-home-overview .home-hero__system-activity, .route-home-overview .home-hero__system-footer { opacity: 1; transform: none; filter: none; } /* Process section — disable scale spring and float, show images at full size */ .route-home-overview .home-process__panel-visual-frame { transform: scale(1.0); opacity: 1; transition: none; } .route-home-overview .home-process__panel.is-active .home-process__panel-visual-frame img { animation: none; } }