/* ============================================================ EdgeQ Design System — Colors & Type Foundations ------------------------------------------------------------ Single source of truth for color + typography tokens. Import this file first, then layer component styles on top. FONT NOTE: EdgeQ's brand face is **Poppins** (the geometric humanist sans used across the site). The official font files are self-hosted below from fonts/ — no CDN dependency. Weights: 300 Light · 400 Regular · 500 Medium · 600 SemiBold · 700 Bold · 800 ExtraBold · 900 Black. ============================================================ */ @font-face { font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Poppins-Light.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Poppins-Regular.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Poppins-Medium.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Poppins-SemiBold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Poppins-Bold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Poppins-ExtraBold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Poppins-Black.otf') format('opentype'); } :root { /* ---------- BRAND / ACCENT ---------- */ --edgeq-orange: #F47B20; /* primary accent — keywords, CTAs, logo, active */ --edgeq-orange-600: #E06A12; /* hover / pressed fill */ --edgeq-orange-700: #C85A08; /* deep pressed */ --edgeq-orange-300: #F9A968; /* lighter tints */ --edgeq-orange-100: #FDE7D4; /* faint wash / chips */ --edgeq-orange-tint: #FFF4EC; /* hover background wash */ /* ---------- NEUTRALS / INK ---------- */ --ink-900: #1C1C1E; /* near-black — display headings */ --ink-800: #2B2B2E; /* charcoal — headings, logo wordmark */ --ink-700: #3D3D42; /* body strong */ --ink-600: #565659; /* body default */ --ink-500: #6E6E73; /* secondary text */ --ink-400: #9A9AA0; /* tertiary / captions / muted labels */ --ink-300: #C7C7CC; /* borders, dividers (strong) */ --ink-200: #E2E2E6; /* hairline borders */ --ink-100: #F1F1F3; /* subtle fills */ --ink-050: #F8F8FA; /* section tint */ /* ---------- SURFACES ---------- */ --bg: #FFFFFF; /* primary canvas */ --bg-soft: #F8F8FA; /* alternating light section */ --bg-dark: #0E1320; /* deep navy/black hero & press band */ --bg-dark-2: #161C2D; /* dark card on dark section */ --on-dark: #FFFFFF; /* text on dark */ --on-dark-2: #B7BEC8; /* secondary text on dark */ /* Themeable surface roles — flip under [data-theme="dark"] below. Components reference THESE for cards/header/footer so the whole page can switch to the Starlink-style dark theme via one attr. */ --surface-card: #FFFFFF; /* award/video/content cards */ --surface-header: #FFFFFF; /* sticky header (top of page) */ --surface-header-scrolled: rgba(255,255,255,.86); /* header after scroll */ --surface-footer: var(--spectrum); /* footer fill */ /* ---------- SEMANTIC ---------- */ --success: #2BB673; --info: #2D9CDB; --warning: #F2B705; --danger: #E5484D; /* ---------- SIGNATURE SPECTRUM GRADIENT ---------- */ /* Soft pastel wash used in the sticky header top-edge + footer. pink -> lavender -> mint -> cyan. Keep it low-opacity + airy. */ --spectrum: linear-gradient(90deg, #FBD5E6 0%, #E7D8F4 26%, #D6E9EC 52%, #D2EFE4 74%, #CDEAF4 100%); /* Chip / waveform render gradient (used on chip art) */ --chip-gradient: linear-gradient(135deg, #BCEAE6 0%, #C9C2EC 45%, #EBB7DF 100%); /* ---------- FONT FAMILIES ---------- */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- TYPE SCALE (desktop) ---------- */ /* Display headings are LARGE + LIGHT (300/400) — the editorial hero feel. */ --fs-hero: clamp(48px, 6vw, 92px); /* hero statements "A wireless world…" */ --fs-h1: clamp(40px, 4.4vw, 64px); --fs-h2: clamp(30px, 3vw, 44px); --fs-h3: clamp(24px, 2vw, 30px); --fs-h4: 22px; --fs-lead: 20px; /* intro paragraphs */ --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; --fs-label: 12px; /* eyebrow / uppercase labels */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.6; --lh-relaxed: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.14em; /* uppercase eyebrows */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ---------- RADII ---------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; /* image cards / market cards */ --r-xl: 28px; --r-pill: 999px; /* all buttons + filter chips */ /* ---------- SPACING (8px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- SHADOWS ---------- */ --shadow-xs: 0 1px 2px rgba(28,28,30,.06); --shadow-sm: 0 2px 8px rgba(28,28,30,.07); --shadow-md: 0 10px 30px rgba(28,28,30,.10); --shadow-lg: 0 24px 60px rgba(28,28,30,.14); /* floating product renders */ --shadow-orange: 0 12px 28px rgba(244,123,32,.32); /* primary CTA lift */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); --dur-fast: .18s; --dur: .32s; --dur-slow: .6s; } /* ============================================================ STARLINK-INSPIRED DARK THEME ------------------------------------------------------------ Set data-theme="dark" on a container (we put it on the scroll root) and these token overrides cascade to every descendant. Near-black cool canvas, light type, the EdgeQ orange retained as the single warm signal — premium, editorial, high-contrast. ============================================================ */ [data-theme="dark"] { /* canvases */ --bg: #05070C; /* near-black primary canvas */ --bg-soft: #0A0D14; /* barely-lifted alternating section */ --bg-dark: #04060B; /* hero / deepest band */ --bg-dark-2: #0F141E; /* ink ramp inverts — high tokens become light */ --ink-900: #FFFFFF; --ink-800: #F5F7FB; /* display headings */ --ink-700: #DDE2EC; /* body strong / kicker */ --ink-600: #B3BAC7; /* body default */ --ink-500: #888F9D; /* secondary text */ --ink-400: #6A7180; /* tertiary / eyebrow */ --ink-300: rgba(255,255,255,.24); /* dots, strong dividers */ --ink-200: rgba(255,255,255,.12); /* hairline borders */ --ink-100: rgba(255,255,255,.06); /* subtle fills */ --ink-050: #0A0D14; /* themeable surfaces */ --surface-card: #0E121B; /* dark content card */ --surface-header: rgba(5,7,12,.55); /* transparent over hero */ --surface-header-scrolled: rgba(5,7,12,.82); --surface-footer: #06080E; /* shadows become depth-on-black + a touch of orange lift */ --shadow-xs: none; --shadow-sm: 0 2px 20px rgba(0,0,0,.55); --shadow-md: 0 16px 44px rgba(0,0,0,.60); --shadow-lg: 0 32px 80px rgba(0,0,0,.65); --shadow-orange: 0 12px 34px rgba(244,123,32,.42); /* dim the pastel spectrum to a faint aurora line on black */ --spectrum: linear-gradient(90deg, rgba(251,213,230,.55) 0%, rgba(231,216,244,.55) 26%, rgba(214,233,236,.55) 52%, rgba(210,239,228,.55) 74%, rgba(205,234,244,.55) 100%); } /* ============================================================ SEMANTIC TYPE PRIMITIVES ============================================================ */ .eq-eyebrow { font: var(--fw-semibold) var(--fs-label)/1.4 var(--font-display); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); } .eq-hero { font: var(--fw-light) var(--fs-hero)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h1 { font: var(--fw-light) var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h2 { font: var(--fw-light) var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h3 { font: var(--fw-medium) var(--fs-h3)/1.25 var(--font-display); color: var(--ink-800); } .eq-h4 { font: var(--fw-semibold) var(--fs-h4)/1.3 var(--font-display); color: var(--ink-800); } .eq-lead { font: var(--fw-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-body); color: var(--ink-500); } .eq-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); color: var(--ink-600); } .eq-sm { font: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-body); color: var(--ink-500); } /* The brand's core device: emphasis word in orange inside a grey/black headline */ .eq-accent { color: var(--edgeq-orange); } *{box-sizing:border-box} html{ scroll-snap-type: y proximity; scroll-behavior:smooth; } body{ margin:0; padding:0; background:#05070C; font-family:var(--font-body); overflow-x:hidden; cursor:none; } ::-webkit-scrollbar{width:0;height:0} h1,h2,p,ul{text-wrap:pretty} a{-webkit-tap-highlight-color:transparent} @media (pointer: coarse){ body{cursor:auto} } .snap-sec{ scroll-snap-align:start; } /* responsive two-column */ .two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,70px); align-items:center; width:100%; } @media (max-width:920px){ .two-col{ grid-template-columns:1fr; gap:40px; } } /* reveal on active section */ .snap-sec .reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .snap-sec.is-active .reveal{ opacity:1; transform:none; } .snap-sec .reveal.d0{ transition-delay:.02s } .snap-sec .reveal.d1{ transition-delay:.10s } .snap-sec .reveal.d2{ transition-delay:.18s } .snap-sec .reveal.d3{ transition-delay:.26s } .snap-sec .reveal.d4{ transition-delay:.34s } .snap-sec .reveal-chip{ opacity:0; transform:translateY(64px) scale(.8) rotate(-8deg); transition:opacity 1s var(--ease-out), transform 1.15s cubic-bezier(.16,.84,.3,1); transition-delay:.16s; } .snap-sec.is-active .reveal-chip{ opacity:1; transform:none; } /* masked-reveal headline (section 3) */ .mask{ display:block; overflow:hidden; padding-bottom:.04em; } .mask-line{ display:block; transform:translateY(115%); transition:transform 1.05s cubic-bezier(.16,.9,.3,1); } .snap-sec.is-active .mask-line{ transform:translateY(0); } .snap-sec.is-active .mask-line.m1{ transition-delay:.12s } .snap-sec.is-active .mask-line.m2{ transition-delay:.26s } /* use-case nav links (section 3) — right-aligned divided rows */ .uc-link{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; font-family:var(--font-body); font-size:17px; color:rgba(255,255,255,.85); padding:14px 2px; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.1); transition:color .3s var(--ease-out), padding .3s var(--ease-out); } .uc-link:last-child{ border-bottom:none; } .uc-link svg{ color:var(--edgeq-orange); opacity:.7; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out); } .uc-link:hover{ color:var(--edgeq-orange); padding-right:8px; } .uc-link:hover svg{ transform:translate(3px,-3px); opacity:1; } /* Point & Connect text entrance — slide in from the right, staggered */ .snap-sec .pc-rx{ opacity:0; transform:translateX(48px); transition:opacity .85s var(--ease-out), transform 1s var(--ease-out); } .snap-sec.is-active .pc-rx{ opacity:1; transform:none; } .snap-sec.is-active .pc-rx.s1{ transition-delay:.22s } .snap-sec.is-active .pc-rx.s2{ transition-delay:.36s } /* orange outline button (Final Frontier "Learn More") */ .btn-outline-orange{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:15px; padding:13px 26px; border-radius:var(--r-pill,999px); border:1.6px solid var(--edgeq-orange); background:transparent; color:var(--edgeq-orange); cursor:none; transition:background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out); } .btn-outline-orange:hover{ background:var(--edgeq-orange); color:#fff; transform:translateY(-1px); } .btn-outline-orange:active{ transform:scale(.97); } /* ===== Animated cosmic backdrop (space section) ===== */ .neb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.7; will-change:transform; mix-blend-mode:screen; } .neb-a{ width:60vw; height:60vw; left:35%; top:-10%; background:radial-gradient(circle at 50% 50%, rgba(244,123,32,.55), rgba(244,123,32,0) 62%); animation:nebDriftA 34s ease-in-out infinite; } .neb-b{ width:55vw; height:55vw; left:-10%; top:40%; background:radial-gradient(circle at 50% 50%, rgba(34,184,207,.5), rgba(34,184,207,0) 62%); animation:nebDriftB 42s ease-in-out infinite; } .neb-c{ width:48vw; height:48vw; left:55%; top:45%; background:radial-gradient(circle at 50% 50%, rgba(124,92,236,.42), rgba(124,92,236,0) 62%); animation:nebDriftC 50s ease-in-out infinite; } @keyframes nebDriftA{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(-6vw,7vh,0) scale(1.18) } } @keyframes nebDriftB{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05) } 50%{ transform:translate3d(8vw,-6vh,0) scale(.9) } } @keyframes nebDriftC{ 0%,100%{ transform:translate3d(0,0,0) scale(.95) } 50%{ transform:translate3d(-7vw,-5vh,0) scale(1.15) } } /* parallax starfields built from layered radial-gradients */ .stars{ position:absolute; inset:-50% -50%; background-repeat:repeat; will-change:transform; } .stars-far{ background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 85% 15%, rgba(200,220,255,.6), transparent), radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.5), transparent); background-size:340px 340px; animation:starDrift 120s linear infinite, twinkleFar 6s ease-in-out infinite; } .stars-near{ background-image: radial-gradient(2px 2px at 15% 50%, rgba(255,255,255,.95), transparent), radial-gradient(2px 2px at 60% 20%, rgba(255,236,210,.9), transparent), radial-gradient(1.6px 1.6px at 80% 70%, rgba(210,235,255,.9), transparent), radial-gradient(2px 2px at 35% 85%, rgba(255,255,255,.85), transparent); background-size:520px 520px; animation:starDrift 70s linear infinite, twinkleNear 4.5s ease-in-out infinite; } @keyframes starDrift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,340px,0) } } @keyframes twinkleFar{ 0%,100%{ opacity:.55 } 50%{ opacity:.9 } } @keyframes twinkleNear{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } } /* slow aurora sweep across the top */ .aurora-sweep{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(34,184,207,.10) 46%, rgba(244,123,32,.12) 54%, transparent 70%); background-size:260% 260%; animation:auroraSweep 26s ease-in-out infinite; } @keyframes auroraSweep{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } } /* space chip: clean professional slide-in from the LEFT (no overshoot/bounce) */ .snap-sec .chip-fly-left{ opacity:0; transform:translateX(-120px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.2s; } .snap-sec.is-active .chip-fly-left{ opacity:1; transform:none; } /* ===== Space chip: entrance + 3 selectable motion variations ===== */ .snap-sec .chip-fly-right{ opacity:0; transform:translateX(90px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.2s; } .snap-sec.is-active .chip-fly-right{ opacity:1; transform:none; } @keyframes eqChipShimmer{ 0%,100%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(236,72,153,0.4)); } 50%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(34,211,238,0.6)); } } @keyframes eqGlowPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:.92 } } .chip-glow-pulse{ animation:eqGlowPulse 7s ease-in-out infinite; animation-delay:-3s; } @keyframes eqChipFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } } .chipvar-drift .chip-l1{ animation:eqChipFloat 6s ease-in-out infinite; animation-delay:-1s; } @keyframes eqDriftTilt{ 0%,100%{ transform:rotateY(-13deg) } 50%{ transform:rotateY(13deg) } } .chipvar-drift .chip-l2{ animation:eqDriftTilt 11s ease-in-out infinite; transform-origin:50% 55%; } .chipvar-drift .chip-img{ animation:eqChipShimmer 4s ease-in-out infinite; animation-delay:-2s; } @keyframes eqBeaconBreathe{ 0%,100%{ transform:scale(.965) } 50%{ transform:scale(1.05) } } @keyframes eqBeaconShimmer{ 0%,100%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(236,72,153,0.35)); } 50%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(34,211,238,0.75)); } } @keyframes eqBeaconGlow{ 0%,100%{ opacity:.4; transform:scale(.92) } 50%{ opacity:1; transform:scale(1.12) } } .chipvar-beacon .chip-l1{ animation:eqChipFloat 7s ease-in-out infinite; animation-delay:-2s; } .chipvar-beacon .chip-l2{ animation:eqBeaconBreathe 5s ease-in-out infinite; } .chipvar-beacon .chip-img{ animation:eqBeaconShimmer 3.5s ease-in-out infinite; } .chipvar-beacon .chip-glow-pulse{ animation:eqBeaconGlow 5s ease-in-out infinite; animation-delay:-1s; } @keyframes eqZeroGWobble{ 0%,100%{ transform:rotateX(6deg) rotateY(-10deg) rotateZ(-2deg) } 33%{ transform:rotateX(-5deg) rotateY(8deg) rotateZ(2.5deg) } 66%{ transform:rotateX(4deg) rotateY(11deg) rotateZ(-1.5deg) } } @keyframes eqChipFloatSlow{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } } .chipvar-zero-g .chip-l1{ animation:eqChipFloatSlow 6.5s ease-in-out infinite; animation-delay:-3s; } .chipvar-zero-g .chip-l2{ animation:eqZeroGWobble 15s ease-in-out infinite; transform-origin:50% 50%; } .chipvar-zero-g .chip-img{ animation:eqChipShimmer 4.5s ease-in-out infinite; animation-delay:-1.5s; } /* ===== Point & Connect: entrance + animated floating chip ===== */ .snap-sec .pc-chip{ opacity:0; transform:translateX(60px) scale(.94); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.35s; } .snap-sec.is-active .pc-chip{ opacity:1; transform:none; } @keyframes eqPcFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } } @keyframes eqPcTilt{ 0%,100%{ transform:rotateY(-10deg) rotateZ(-1.2deg) } 50%{ transform:rotateY(10deg) rotateZ(1.2deg) } } @keyframes eqPcShimmer{ 0%,100%{ filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(244,123,32,.45)); } 50%{ filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(34,184,207,.6)); } } @keyframes eqPcGlow{ 0%,100%{ opacity:.5 } 50%{ opacity:.92 } } .pc-chip-float{ animation:eqPcFloat 6.5s ease-in-out infinite; animation-delay:-1.5s; } .pc-chip-tilt{ animation:eqPcTilt 11s ease-in-out infinite; transform-origin:50% 55%; } .pc-chip-img{ animation:eqPcShimmer 4.2s ease-in-out infinite; animation-delay:-2s; } .pc-chip-glow{ animation:eqPcGlow 7s ease-in-out infinite; animation-delay:-3s; } @media (max-width:920px){ .pc-chip{ display:none } } @media (prefers-reduced-motion: reduce){ html{ scroll-snap-type:none; scroll-behavior:auto; } .snap-sec .reveal,.snap-sec .reveal-chip,.snap-sec .chip-fly-left,.snap-sec .chip-fly-right,.snap-sec .mask-line,.snap-sec .pc-rx{ transition:none; opacity:1; transform:none; } .chip-l1,.chip-l2,.chip-img,.chip-glow-pulse,.neb,.stars,.aurora-sweep{ animation:none !important; } .chip-img{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(34,211,238,0.5)); } } /* ===== Brand halo hues — orange/cyan/violet glow on every section ===== */ .halo-hues{ position:absolute; inset:0; pointer-events:none; z-index:6; mix-blend-mode:screen; opacity:.85; background: radial-gradient(42vw 42vw at 82% 6%, rgba(244,123,32,.30), transparent 60%), radial-gradient(46vw 46vw at 4% 80%, rgba(34,184,207,.24), transparent 62%), radial-gradient(38vw 38vw at 94% 92%, rgba(124,92,236,.20), transparent 62%); } @media (max-width:920px){ .halo-hues{ opacity:.7; } } /* Point & Connect responsive two-column collapse */ @media (max-width:860px){ .pc-grid{ grid-template-columns:1fr !important; } .pc-grid > div:first-child{ aspect-ratio:16/10 !important; } } /* Markets auto-scroll crossfade for the active video */ @keyframes mktFade{ from{ opacity:0; transform:scale(.965) } to{ opacity:1; transform:scale(1) } } .mkt-fade{ animation:mktFade .65s var(--ease-out); } @media (prefers-reduced-motion: reduce){ .mkt-fade{ animation:none; } } /* ============================================================ RESPONSIVE LAYER — tablet & phone Desktop styles above are the base; these refine ≤980 / ≤768 / ≤560 / ≤420. ============================================================ */ /* ---- Header: hamburger drawer ---- */ .eq-burger{ display:none; } .eq-drawer{ background:var(--surface-header-scrolled); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } @media (min-width:861px){ .eq-drawer{ display:none !important; } } @media (max-width:860px){ .eq-nav-desktop{ display:none !important; } .eq-burger{ display:flex !important; } } /* ---- Point & Connect: terminal + text stop overlapping ---- */ @media (max-width:860px){ .pc-wrap{ justify-content:center !important; } .pc-text{ text-align:center !important; max-width:none !important; } .pc-text .pc-rx.s1{ margin-left:auto !important; margin-right:auto !important; } .pc-text .pc-rx.s2{ align-items:center !important; } .pc-text .pc-rx.s2 > div{ justify-content:center !important; } .pc-terminal{ left:50% !important; transform:translate(-50%,-50%) !important; height:auto !important; width:min(86%,420px) !important; opacity:.2 !important; filter:blur(1px) drop-shadow(0 30px 56px rgba(0,0,0,.55)) !important; } } /* ---- Low Power: keyed render sits behind centered copy ---- */ @media (max-width:860px){ .lp-render{ right:50% !important; transform:translate(50%,-50%) !important; width:min(74%,420px) !important; max-height:54% !important; opacity:.22 !important; } .lp-copy > div{ max-width:none !important; text-align:center; } .lp-copy h2{ text-align:center; } .lp-copy .reveal.d3{ justify-content:center; } .lp-copy .reveal.d4{ justify-content:center; } } /* ---- Markets carousel: drop side peeks, fluid center ---- */ @media (max-width:900px){ .mkt-side{ display:none !important; } .mkt-center{ width:min(92vw,480px) !important; height:auto !important; aspect-ratio:3/2; } } /* ---- Footer: stack columns ---- */ @media (max-width:760px){ .ftr-grid{ grid-template-columns:1fr !important; gap:30px !important; text-align:center; } .ftr-grid nav{ justify-content:center !important; } .ftr-right{ text-align:center !important; } .ftr-social{ justify-content:center !important; } .ftr-right p{ text-align:center !important; } } /* ---- Global section padding + media tightening on phones ---- */ @media (max-width:560px){ .two-col{ gap:32px !important; } /* keep tap targets comfortable */ .uc-link{ font-size:16px !important; } } @media (max-width:420px){ .eq-header-inner{ padding-left:6vw !important; padding-right:6vw !important; } } /* On touch / no-hover devices the custom cursor is irrelevant */ @media (hover: none){ #eq-cursor{ display:none !important; } } {__TWEAKS_STYLE} {` /* ---- Full-bleed satellite-over-Earth backdrop (flipped so the satellite sits on the RIGHT, clear of the left-hand copy) ---- */ @keyframes satKen{0%{transform:scaleX(-1) scale(1.02)}100%{transform:scaleX(-1) scale(1.07) translate(-1%,.9%)}} .sat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;transform:scaleX(-1) scale(1.02);animation:satKen 36s ease-in-out infinite alternate} /* ---- Orbiting comm-node rings (reinforces "satellites orbiting Earth") ---- */ .sat-orbit-wrap{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none} @keyframes orbitSpin{to{transform:rotate(360deg)}} .sat-orbit{position:absolute;width:165vw;height:165vw;left:-44vw;bottom:-88vw;border-radius:50%;border:1px solid rgba(180,205,255,.10);animation:orbitSpin 56s linear infinite} .sat-orbit.r2{width:132vw;height:132vw;left:-28vw;bottom:-66vw;border-color:rgba(180,205,255,.06);animation-duration:78s;animation-direction:reverse} .sat-orbit .node{position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--edgeq-orange);box-shadow:0 0 16px 4px rgba(244,123,32,.85),0 0 4px 1px rgba(255,255,255,.9)} .sat-orbit .node::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(244,123,32,.55);animation:satNodePulse 2.8s ease-out infinite} @keyframes satNodePulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.3);opacity:0}} /* ---- Legibility scrims (left copy sits over Earth, so darken hard) ---- */ .sat-scrimL{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(2,3,7,.95) 0%,rgba(2,3,7,.86) 18%,rgba(2,3,7,.55) 36%,rgba(2,3,7,.16) 52%,rgba(2,3,7,0) 64%)} .sat-scrimV{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(2,3,7,.5) 0%,transparent 22%,transparent 48%,rgba(2,3,7,.84) 100%)} /* ---- Leader line: from the chip detail-bubble out to the satellite ---- */ .sat-lead{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none;opacity:0} .snap-sec.is-active .sat-lead{opacity:1;transition:opacity .5s .55s} .sat-lead .ln{stroke-dasharray:600;stroke-dashoffset:600} .snap-sec.is-active .sat-lead .ln{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .6s} /* ---- Component marker on the satellite (a point of interest, not radar) ---- */ .sat-marker{position:absolute;left:71%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);z-index:5;opacity:0} .snap-sec.is-active .sat-marker{opacity:1;transition:opacity .55s .35s} .sat-marker .dot{position:absolute;inset:0;border-radius:50%;background:var(--edgeq-orange);box-shadow:0 0 0 4px rgba(244,123,32,.20),0 0 12px 3px rgba(244,123,32,.7)} .sat-marker .halo{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(244,123,32,.75);animation:satMarkerPulse 2.8s ease-out infinite} @keyframes satMarkerPulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(4.2);opacity:0}} /* ---- Chip detail-bubble (clean optical detail, soft hairline ring) ---- */ .sat-lens{position:absolute;left:48%;top:45%;width:clamp(228px,27vw,330px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.62);border-radius:50%;z-index:6;overflow:hidden;border:1.5px solid rgba(244,123,32,.6);box-shadow:0 0 44px rgba(244,123,32,.14),0 28px 70px rgba(0,0,0,.62),inset 0 0 60px rgba(0,0,0,.5);background:radial-gradient(circle at 50% 40%,#141a28 0%,#0a0e18 58%,#05070e 100%);opacity:0} .snap-sec.is-active .sat-lens{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .7s .95s,transform 1s .95s cubic-bezier(.16,.84,.3,1)} .sat-lens .chipwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;perspective:900px} .sat-lens .chipinner{position:relative;width:62%} .sat-lens .chip-glow-pulse{position:absolute;inset:-30% -22%;background:radial-gradient(circle at 50% 50%,rgba(236,72,153,.42),rgba(34,211,238,.22) 46%,transparent 70%);filter:blur(18px);z-index:0} .sat-cap{position:absolute;left:48%;top:45%;transform:translate(-50%,calc(-50% + clamp(146px,14.5vw,190px)));z-index:6;text-align:center;width:max-content;opacity:0} .snap-sec.is-active .sat-cap{opacity:1;transition:opacity .6s 1.35s} @media (max-width:920px){ .sat-marker{left:72%;top:40%} .sat-lens{left:50%;top:auto;bottom:7%;transform:translate(-50%,0) scale(1);width:clamp(160px,44vw,220px)} .snap-sec.is-active .sat-lens{transform:translate(-50%,0) scale(1)} .sat-lead,.sat-cap{display:none} } @media (prefers-reduced-motion:reduce){ .sat-bg,.sat-orbit,.sat-orbit .node::before,.sat-marker .halo{animation:none!important} .sat-lead,.sat-marker,.sat-cap{opacity:1!important} .sat-lens{opacity:1!important;transform:translate(-50%,-50%) scale(1)!important} .sat-lead .ln{stroke-dashoffset:0!important} } `} {` @keyframes eqBeamPulse{0%,100%{opacity:.72}50%{opacity:1}} @keyframes eqTwinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1)}} .beam-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;animation:eqBeamPulse 3.4s ease-in-out infinite} .beam-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.85);z-index:2;mix-blend-mode:screen;pointer-events:none;animation:eqTwinkle 3s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.beam-svg,.beam-spark{animation:none!important}} `} {` @keyframes eqSatSpin{to{transform:rotate(360deg)}} @keyframes eqSatFloat{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}} .lo-sat{animation:eqSatSpin 72s linear infinite} .lo-sat-wrap{animation:eqSatFloat 9s ease-in-out infinite} .lo-card{background:rgba(9,13,21,.5);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:clamp(22px,2.2vw,32px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),background .3s} .lo-card:hover{border-color:rgba(244,123,32,.55);background:rgba(244,123,32,.08);transform:translateY(-4px)} @media (prefers-reduced-motion:reduce){.lo-sat,.lo-sat-wrap{animation:none!important}} @media (max-width:860px){.lo-cards{grid-template-columns:1fr!important}} `} {` .ac-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,78px);align-items:stretch;width:100%;max-width:1240px;margin:0 auto;padding:0 8vw} @media (max-width:920px){.ac-grid{grid-template-columns:1fr;gap:40px}} .ac-ghost{background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:clamp(18px,1.7vw,26px);transition:border-color .3s var(--ease-out),background .3s var(--ease-out),transform .3s var(--ease-out)} .ac-ghost:hover{border-color:rgba(244,123,32,.6);background:rgba(244,123,32,.06);transform:translateX(5px)} .ac-vidbox{position:relative;display:flex;align-items:center;justify-content:center;height:100%;background:transparent;border-radius:14px;padding:clamp(8px,0.8vw,14px);overflow:hidden} .ac-halo{position:absolute;inset:-18% -10%;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(244,123,32,.34), rgba(34,184,207,.18) 46%, transparent 72%);filter:blur(26px)} .ac-vid{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 86% 88% at 50% 50%, #000 66%, rgba(0,0,0,.5) 82%, transparent 96%);mask-image:radial-gradient(ellipse 86% 88% at 50% 50%, #000 66%, rgba(0,0,0,.5) 82%, transparent 96%)} `}