366 lines
43 KiB
CSS
366 lines
43 KiB
CSS
@font-face {
|
|
font-family: Geist;
|
|
src: url("_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2") format("woff2");
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--black: #060607;
|
|
--surface: #121214;
|
|
--surface-2: #1c1c1e;
|
|
--paper: #f5f5f7;
|
|
--white: #ffffff;
|
|
--ink: #1d1d1f;
|
|
--secondary: #86868b;
|
|
--line-dark: rgba(255, 255, 255, 0.12);
|
|
--line-light: rgba(29, 29, 31, 0.12);
|
|
--orange: #ff6b3d;
|
|
--blue: #2997ff;
|
|
--green: #30d158;
|
|
--ease: cubic-bezier(.22, 1, .36, 1);
|
|
font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Geist, sans-serif;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; background: var(--black); }
|
|
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: inherit; -webkit-font-smoothing: antialiased; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { border: 0; color: inherit; font: inherit; }
|
|
img { display: block; max-width: 100%; }
|
|
[hidden] { display: none !important; }
|
|
::selection { background: var(--orange); color: #fff; }
|
|
|
|
@view-transition { navigation: auto; }
|
|
::view-transition-old(root) { animation: page-fade-out .18s ease-in both; }
|
|
::view-transition-new(root) { animation: page-fade-in .34s var(--ease) both; }
|
|
@keyframes page-fade-out { to { opacity: 0; } }
|
|
@keyframes page-fade-in { from { opacity: 0; } }
|
|
|
|
.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; border-radius: .6rem; padding: .7rem 1rem; background: #fff; color: #111; transition: top .2s; }
|
|
.skip-link:focus { top: 1rem; }
|
|
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
|
|
|
|
/* Floating navigation */
|
|
.site-header { position: fixed; z-index: 80; top: .75rem; right: 0; left: 0; opacity: 1; pointer-events: none; will-change: opacity; transition: opacity .26s ease; }
|
|
.site-header.is-scroll-hidden { opacity: 0; }
|
|
.site-header.is-scroll-hidden .nav-island { pointer-events: none; }
|
|
.nav-island { --glass-x: 50%; --glass-y: 0%; position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 2rem), 62rem); height: 3.3rem; margin: auto; padding: 0 .55rem 0 .95rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 48%, rgba(255,255,255,.05)), rgba(18,18,20,.42); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 8px 26px rgba(0,0,0,.14), 0 24px 54px rgba(0,0,0,.13); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.05); backdrop-filter: blur(28px) saturate(190%) contrast(1.05); pointer-events: auto; transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease; }
|
|
.nav-island::before { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: radial-gradient(15rem 4.5rem at var(--glass-x) var(--glass-y), rgba(255,255,255,.24), transparent 70%), linear-gradient(105deg, rgba(255,255,255,.11), transparent 32%, rgba(255,255,255,.07) 58%, transparent 76%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%); opacity: .88; pointer-events: none; }
|
|
.nav-island::after { content: ""; position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.72), rgba(100,210,255,.16) 30%, rgba(255,255,255,.12) 50%, rgba(255,107,61,.12) 72%, rgba(255,255,255,.48)); opacity: .72; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
|
|
.nav-island > * { position: relative; z-index: 1; }
|
|
.site-header.is-scrolled .nav-island { border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 48%, rgba(255,255,255,.055)), rgba(18,18,20,.62); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 10px 30px rgba(0,0,0,.19), 0 28px 60px rgba(0,0,0,.17); -webkit-backdrop-filter: blur(32px) saturate(195%) contrast(1.06); backdrop-filter: blur(32px) saturate(195%) contrast(1.06); }
|
|
.wordmark { display: inline-flex; align-items: center; gap: .56rem; white-space: nowrap; font-size: .86rem; font-weight: 700; }
|
|
.wordmark b { margin-left: -.25rem; color: #8e8e93; font-size: .66rem; font-weight: 650; }
|
|
.wordmark-logo { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; object-fit: contain; }
|
|
.desktop-nav { display: flex; align-items: center; gap: .18rem; padding: .18rem; border-radius: 999px; }
|
|
.desktop-nav a { min-width: 3.55rem; padding: .5rem .7rem; border-radius: 999px; color: #d2d2d7; text-align: center; font-size: .76rem; transition: color .2s, background .2s, transform .1s; }
|
|
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
|
|
.desktop-nav a:active { transform: scale(.95); }
|
|
.nav-actions { display: flex; align-items: center; gap: .5rem; }
|
|
.nav-contact { min-height: 2.25rem; padding: 0 .82rem 0 .92rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #111113; font-size: .72rem; font-weight: 650; transition: background .18s, transform .1s; }
|
|
.nav-contact span { color: #6e6e73; font-size: .78rem; transition: transform .18s var(--ease); }
|
|
.nav-contact:hover { background: #fff; }
|
|
.nav-contact:hover span { transform: translateX(.12rem); }
|
|
.nav-contact:active { transform: scale(.96); }
|
|
.menu-button { display: none; position: relative; width: 2.55rem; height: 2.55rem; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer; transition: background .2s, transform .1s; }
|
|
.menu-button:hover { background: rgba(255,255,255,.14); }
|
|
.menu-button:active { transform: scale(.94); }
|
|
.menu-button span { position: absolute; left: .76rem; right: .76rem; height: 1px; background: #fff; transition: top .28s var(--ease), transform .28s var(--ease); }
|
|
.menu-button span:first-child { top: 1.03rem; }
|
|
.menu-button span:last-child { top: 1.48rem; }
|
|
.menu-button[aria-expanded="true"] span:first-child { top: 1.26rem; transform: rotate(45deg); }
|
|
.menu-button[aria-expanded="true"] span:last-child { top: 1.26rem; transform: rotate(-45deg); }
|
|
.mobile-menu { position: absolute; top: 4.15rem; right: 1rem; width: min(20rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; background: rgba(25,25,28,.88); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); pointer-events: auto; transform-origin: top right; animation: menu-in .34s var(--ease) both; }
|
|
.mobile-menu a { display: block; padding: .9rem 1rem; border-radius: .8rem; font-size: .94rem; }
|
|
.mobile-menu a:hover { background: rgba(255,255,255,.08); }
|
|
@keyframes menu-in { from { opacity: 0; transform: translateY(-.5rem) scale(.95); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
|
|
|
|
/* Hero */
|
|
.hero { position: relative; height: calc(100svh - 5.5rem); min-height: 46rem; max-height: 60rem; overflow: hidden; background: #07090b; }
|
|
.hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(4,5,7,.7) 0%, rgba(4,5,7,.45) 42%, rgba(4,5,7,.88) 100%), linear-gradient(90deg, rgba(3,5,7,.55), transparent 55%), url("../hero-cinema.png"); background-position: center 45%; background-size: cover; animation: hero-materialize 1.35s var(--ease) both; }
|
|
.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, transparent 0, rgba(3,4,6,.22) 48%, rgba(3,4,6,.72) 100%); }
|
|
@keyframes hero-materialize { from { opacity: .25; transform: scale(1.08); filter: blur(12px) saturate(.5); } to { opacity: 1; transform: scale(1.01); filter: none; } }
|
|
.hero-inner { position: relative; z-index: 2; width: min(calc(100% - 2rem), 74rem); height: 100%; margin: auto; padding-top: 6.4rem; display: flex; flex-direction: column; align-items: center; }
|
|
.hero-copy { position: relative; z-index: 3; max-width: 48rem; text-align: center; }
|
|
.hero-eyebrow { margin: 0 0 .65rem; display: flex; align-items: center; justify-content: center; gap: .55rem; color: #d2d2d7; font-size: .67rem; font-weight: 700; }
|
|
.hero-eyebrow span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(48,209,88,.13); }
|
|
.hero h1 { margin: 0; font-size: clamp(4.8rem, 9vw, 8.2rem); font-weight: 720; line-height: .9; letter-spacing: -.07em; }
|
|
.hero-product { margin: .65rem 0 0; color: #d2d2d7; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; }
|
|
.hero-lead { max-width: 34rem; margin: .9rem auto 0; color: #b9b9be; font-size: .98rem; line-height: 1.65; }
|
|
.hero-actions { margin-top: 1.35rem; display: flex; align-items: center; justify-content: center; gap: .8rem; }
|
|
.button { min-height: 2.85rem; padding: 0 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .72rem; border-radius: 999px; font-size: .8rem; font-weight: 700; transition: transform .12s, box-shadow .25s, background .25s; }
|
|
.button:active, .text-button:active, .console-tab:active, .feature-rail-controls button:active, .plan-button:active { transform: scale(.96); transition-duration: .08s; }
|
|
.button-primary { background: rgba(255,255,255,.94); color: #111113; box-shadow: inset 0 1px #fff, 0 10px 24px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
|
|
.button-primary:hover { background: #fff; box-shadow: inset 0 1px #fff, 0 14px 30px rgba(0,0,0,.26); transform: translateY(-1px); }
|
|
.text-button { min-height: 2.85rem; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .55rem; color: #f5f5f7; font-size: .8rem; font-weight: 650; transition: opacity .2s, transform .1s; }
|
|
.text-button:hover { opacity: .72; }
|
|
|
|
.product-stage { --stage-width: min(57rem, 78vw); position: relative; width: var(--stage-width); margin-top: 2rem; perspective: 1200px; }
|
|
.product-window { --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; height: 24rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(17,18,21,.79); box-shadow: 0 42px 100px rgba(0,0,0,.58), 0 1px 0 rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.11); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform; animation: product-in 1.05s .28s var(--ease) both; }
|
|
@keyframes product-in { from { opacity: 0; transform: perspective(1200px) translateY(2.4rem) rotateX(4deg) scale(.94); filter: blur(10px); } to { opacity: 1; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); filter: none; } }
|
|
.window-bar { height: 2.8rem; padding: 0 .9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
|
|
.traffic-lights { display: flex; gap: .32rem; }
|
|
.traffic-lights i { width: .48rem; height: .48rem; border-radius: 50%; background: #ff5f57; }
|
|
.traffic-lights i:nth-child(2) { background: #febc2e; }
|
|
.traffic-lights i:nth-child(3) { background: #28c840; }
|
|
.window-title { display: flex; align-items: center; gap: .4rem; color: #a1a1a6; font-size: .62rem; font-weight: 650; }
|
|
.window-mark { width: .55rem; height: .55rem; border-radius: .18rem .18rem .3rem .3rem; background: var(--orange); box-shadow: 0 0 1rem rgba(255,107,61,.55); }
|
|
.window-status { justify-self: end; display: flex; align-items: center; gap: .4rem; color: #9bd8ae; font-size: .58rem; }
|
|
.window-status span { width: .36rem; height: .36rem; border-radius: 50%; background: var(--green); }
|
|
.window-layout { height: calc(100% - 2.8rem); display: grid; grid-template-columns: 4rem 1fr; }
|
|
.window-sidebar { padding: .8rem .42rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; border-right: 1px solid rgba(255,255,255,.07); }
|
|
.console-tab { width: 3.05rem; min-height: 3rem; padding: .35rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; border-radius: .72rem; background: transparent; color: #6e6e73; cursor: pointer; transition: color .2s, background .2s, transform .1s; }
|
|
.console-tab i { font-style: normal; font-size: .82rem; line-height: 1; }
|
|
.console-tab span { font-size: .54rem; }
|
|
.console-tab:hover { color: #fff; background: rgba(255,255,255,.055); }
|
|
.console-tab.is-active { color: #fff; background: rgba(255,255,255,.11); box-shadow: 0 4px 12px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.08); }
|
|
.window-main { min-width: 0; padding: 1.05rem 1.2rem; }
|
|
.console-view { height: 100%; animation: view-in .34s var(--ease) both; }
|
|
@keyframes view-in { from { opacity: 0; transform: translateY(.5rem); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
|
|
.console-heading { display: flex; align-items: center; justify-content: space-between; }
|
|
.console-heading small { display: block; color: #6e6e73; font-size: .56rem; }
|
|
.console-heading h2 { margin: .08rem 0 0; font-size: 1rem; letter-spacing: -.025em; }
|
|
.view-chip { padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: #8e8e93; font-size: .53rem; }
|
|
.metric-row { margin-top: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
|
|
.metric-row article { min-width: 0; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.048); }
|
|
.metric-row small { display: block; color: #77777d; font-size: .54rem; }
|
|
.metric-row strong { display: block; margin: .2rem 0 .12rem; font-size: 1.15rem; letter-spacing: -.03em; }
|
|
.metric-row span { color: #77777d; font-size: .49rem; }
|
|
.metric-row .trend { color: #73d995; }
|
|
.chart-panel { height: 9.25rem; margin-top: .5rem; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.032); }
|
|
.panel-title { display: flex; justify-content: space-between; font-size: .56rem; }
|
|
.panel-title small { color: #65656a; }
|
|
.bar-chart { height: 6.8rem; padding: .6rem .15rem 0; display: flex; align-items: flex-end; gap: .38rem; background: repeating-linear-gradient(to top, transparent 0, transparent 1.55rem, rgba(255,255,255,.042) 1.58rem, rgba(255,255,255,.042) 1.62rem); }
|
|
.bar-chart i { flex: 1; height: var(--h); min-width: .24rem; border-radius: .18rem .18rem .04rem .04rem; background: var(--orange); opacity: .88; }
|
|
.media-list { margin-top: .8rem; display: grid; gap: .45rem; }
|
|
.media-list article { padding: .55rem; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.07); border-radius: .55rem; background: rgba(255,255,255,.042); }
|
|
.poster { height: 2.75rem; border-radius: .35rem; }
|
|
.poster-one { background: linear-gradient(140deg, #2c5269, #d49b6e); }
|
|
.poster-two { background: linear-gradient(140deg, #785b4d, #1f2d34); }
|
|
.poster-three { background: linear-gradient(140deg, #1b2741, #b84d42); }
|
|
.media-list b { display: block; font-size: .66rem; }
|
|
.media-list small { display: block; margin-top: .16rem; color: #77777d; font-size: .52rem; }
|
|
.media-list em { color: #a1a1a6; font-size: .52rem; font-style: normal; }
|
|
.node-map { position: relative; height: 13.5rem; margin-top: .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: .6rem; background: rgba(255,255,255,.035); }
|
|
.map-grid, .network-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 2rem 2rem; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); }
|
|
.node { position: absolute; display: flex; align-items: center; gap: .32rem; color: #a1a1a6; font-size: .52rem; }
|
|
.node i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(48,209,88,.12), 0 0 1rem rgba(48,209,88,.4); }
|
|
.node-a { left: 26%; top: 34%; }.node-b { left: 48%; top: 65%; }.node-c { right: 18%; top: 28%; }.node-d { left: 12%; bottom: 15%; }
|
|
.node-summary { margin-top: .45rem; display: flex; justify-content: space-between; color: #77777d; font-size: .52rem; }
|
|
.node-summary span { display: flex; align-items: center; gap: .3rem; }
|
|
.node-summary i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--green); }
|
|
.node-summary b { color: #b9b9be; }
|
|
.live-activity { position: absolute; z-index: 4; right: -1rem; bottom: 1rem; min-width: 8.6rem; padding: .58rem .76rem; display: flex; align-items: center; gap: .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(30,30,33,.66); box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 1px 1px rgba(255,255,255,.13), inset -1px -1px rgba(255,255,255,.04); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); animation: live-in .55s 1.15s var(--ease) both; }
|
|
.live-activity > span:last-child { display: flex; align-items: baseline; gap: .4rem; }
|
|
.live-activity small { color: #a1a1a6; font-size: .52rem; }
|
|
.live-activity strong { font-size: .73rem; }
|
|
.live-activity-icon { height: .9rem; display: flex; align-items: flex-end; gap: .1rem; }
|
|
.live-activity-icon i { width: .13rem; border-radius: 1rem; background: var(--orange); }
|
|
.live-activity-icon i:nth-child(1) { height: .4rem; }.live-activity-icon i:nth-child(2) { height: .8rem; }.live-activity-icon i:nth-child(3) { height: .56rem; }
|
|
@keyframes live-in { from { opacity: 0; transform: translateX(1rem) scale(.9); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
|
|
|
|
.signal-strip { width: min(calc(100% - 2rem), 70rem); min-height: 5.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 4rem; color: #d2d2d7; }
|
|
.signal-strip div { display: flex; align-items: baseline; gap: .7rem; }
|
|
.signal-strip span { color: #6e6e73; font-size: .65rem; }
|
|
.signal-strip strong { font-size: .9rem; }
|
|
.signal-strip > i { width: 1px; height: 1.5rem; background: rgba(255,255,255,.13); }
|
|
|
|
/* Content bands */
|
|
.section-kicker { margin: 0 0 1rem; color: var(--orange); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
|
|
.platform { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); }
|
|
.platform-intro { max-width: 62rem; }
|
|
.platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 680; line-height: 1; letter-spacing: -.055em; }
|
|
.platform-intro h2 span { color: #86868b; }
|
|
.platform-intro > p:last-child { max-width: 38rem; margin: 2rem 0 0 auto; color: #6e6e73; font-size: 1.02rem; line-height: 1.8; }
|
|
.principle-grid { margin-top: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
|
|
.principle-grid article { min-height: 13rem; padding: 2rem 2rem 2rem 0; }
|
|
.principle-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line-light); }
|
|
.principle-grid span { color: #a1a1a6; font-size: .66rem; }
|
|
.principle-grid h3 { margin: 2.2rem 0 .55rem; font-size: 1.55rem; letter-spacing: -.03em; }
|
|
.principle-grid p { max-width: 17rem; margin: 0; color: #6e6e73; font-size: .82rem; line-height: 1.65; }
|
|
|
|
.capabilities { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #080809; }
|
|
.capabilities-head { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; }
|
|
.capabilities-side { display: grid; gap: 1.25rem; }
|
|
.capabilities-side > p { margin: 0; color: #86868b; font-size: .88rem; line-height: 1.75; }
|
|
.feature-rail-controls { display: flex; gap: .45rem; }
|
|
.feature-rail-controls button { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s, opacity .2s, transform .1s; }
|
|
.feature-rail-controls button:hover { background: rgba(255,255,255,.13); }
|
|
.feature-rail-controls button:disabled { opacity: .28; cursor: default; }
|
|
.feature-rail { margin-top: 5rem; padding-bottom: .7rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(35rem, calc(92vw - 2rem)); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: none; scrollbar-width: none; cursor: grab; }
|
|
.feature-rail:active { cursor: grabbing; }
|
|
.feature-rail::-webkit-scrollbar { display: none; }
|
|
.feature-card { height: 18.5rem; min-height: 0; padding: 1.35rem; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; background: #121214; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.26); }
|
|
.feature-card:nth-child(4n + 1) { border-top-color: rgba(255,107,61,.42); }
|
|
.feature-card:nth-child(4n + 2) { border-top-color: rgba(41,151,255,.42); }
|
|
.feature-card:nth-child(4n + 3) { border-top-color: rgba(100,210,255,.38); }
|
|
.feature-card:nth-child(4n + 4) { border-top-color: rgba(48,209,88,.38); }
|
|
.feature-copy p { margin: 0 0 .85rem; color: var(--orange); font-size: .66rem; font-weight: 750; }
|
|
.feature-copy p b { margin-right: .42rem; color: #5f5f64; font-weight: 650; }
|
|
.feature-copy { min-width: 0; }
|
|
.feature-copy h3 { margin: 0; font-size: clamp(1.55rem, 2.1vw, 2.05rem); font-weight: 650; line-height: 1.08; letter-spacing: 0; }
|
|
.feature-copy span { display: block; max-width: 24rem; margin-top: 1rem; color: #86868b; font-size: .74rem; line-height: 1.6; }
|
|
.portal-preview { min-width: 0; height: 15.75rem; padding: .75rem .75rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #09090a; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
|
|
.portal-bar { height: 1.6rem; display: flex; align-items: center; justify-content: space-between; }.portal-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }.portal-bar span { width: 3.5rem; height: .2rem; border-radius: 1rem; background: #343437; }
|
|
.portal-hero { height: 7rem; padding: .9rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: .55rem; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.1)), url("../hero-cinema.png") center / cover; }
|
|
.portal-hero small { color: #b9b9be; font-size: .55rem; }.portal-hero b { margin-top: .15rem; font-size: 1.25rem; }.portal-hero em { margin-top: .35rem; color: #d2d2d7; font-size: .6rem; font-style: normal; }
|
|
.portal-posters { margin-top: .55rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }.portal-posters i { height: 5.5rem; border-radius: .4rem; background: linear-gradient(145deg, #28364d, #7f9bb0); }.portal-posters i:nth-child(2) { background: linear-gradient(145deg, #3d3f2b, #98a368); }.portal-posters i:nth-child(3) { background: linear-gradient(145deg, #4b3037, #b66f68); }.portal-posters i:nth-child(4) { background: linear-gradient(145deg, #273e3a, #71a597); }
|
|
.operations-preview { position: relative; min-width: 0; height: 15.75rem; padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }
|
|
.op-chart { height: 14rem; padding: 1rem; border-radius: .65rem; background: #18181a; }.op-chart > span { color: #86868b; font-size: .62rem; }.op-chart > strong { display: block; margin-top: .25rem; font-size: 1.5rem; }.op-chart > div { height: 7rem; margin-top: .8rem; display: flex; align-items: flex-end; gap: .45rem; }.op-chart i { flex: 1; height: var(--h); border-radius: .25rem .25rem .08rem .08rem; background: var(--blue); opacity: .86; }
|
|
.op-event { position: absolute; right: 1.8rem; bottom: 1.4rem; left: 3.5rem; padding: .85rem; display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: rgba(37,37,40,.8); box-shadow: 0 16px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.op-event > i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }.op-event b { display: block; font-size: .68rem; }.op-event small { display: block; margin-top: .1rem; color: #86868b; font-size: .52rem; }.op-event em { color: #a9dfba; font-size: .62rem; font-style: normal; }
|
|
.pipeline-preview { min-width: 0; min-height: 15.75rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; }
|
|
.pipeline-step { min-height: 3.7rem; padding: 0 .8rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.09); border-radius: .7rem; background: #19191b; }.pipeline-step > i { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #4b4b50; border-radius: 50%; color: #a1a1a6; font-size: .6rem; font-style: normal; }.pipeline-step b { display: block; font-size: .7rem; }.pipeline-step small { display: block; margin-top: .1rem; color: #77777d; font-size: .52rem; }.pipeline-step.is-done > i { border-color: rgba(48,209,88,.32); background: rgba(48,209,88,.12); color: #83d99c; }.pipeline-step.is-active { border-color: rgba(41,151,255,.3); background: rgba(41,151,255,.07); }.pipeline-step.is-active > i { border: .26rem solid rgba(41,151,255,.2); background: var(--blue); box-shadow: 0 0 1.3rem rgba(41,151,255,.4); }.pipeline-preview > em { width: 1px; height: .65rem; margin-left: 1.58rem; background: #343437; }
|
|
.network-preview { position: relative; min-width: 0; height: 15.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }.network-card { position: absolute; top: 50%; left: 50%; width: 9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; background: rgba(29,29,32,.8); box-shadow: 0 22px 50px rgba(0,0,0,.4); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.network-card span { color: #86868b; font-size: .58rem; }.network-card strong { display: block; margin-top: .25rem; font-size: 1.55rem; }.network-card small { display: block; margin-top: .25rem; color: #81d89a; font-size: .54rem; }.pulse { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .45rem rgba(48,209,88,.1), 0 0 1.5rem rgba(48,209,88,.42); }.p1 { left: 18%; top: 30%; }.p2 { right: 16%; top: 24%; }.p3 { left: 26%; bottom: 20%; }.p4 { right: 24%; bottom: 24%; }
|
|
|
|
.delivery { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); }
|
|
.delivery-head { max-width: 58rem; }
|
|
.delivery-steps { margin: 5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
|
|
.delivery-steps li { min-height: 7.5rem; display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; border-bottom: 1px solid var(--line-light); transition: padding .3s var(--ease), background .3s; }
|
|
.delivery-steps li:hover { padding: 0 1rem; background: rgba(255,255,255,.7); }
|
|
.delivery-steps > li > span { color: #a1a1a6; font-size: .65rem; }
|
|
.delivery-steps h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; }
|
|
.delivery-steps p { margin: .25rem 0 0; color: #6e6e73; font-size: .78rem; }
|
|
.delivery-steps i { color: #8e8e93; font-style: normal; text-align: right; }
|
|
.closing { position: relative; min-height: 44rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; }
|
|
.closing-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 48%, rgba(4,5,6,.24)), linear-gradient(0deg, #060607, transparent 52%), url("../hero-cinema.png") center 68% / cover; }
|
|
.closing-copy { position: relative; z-index: 1; max-width: 48rem; }
|
|
.closing-copy > p:nth-of-type(2) { max-width: 34rem; margin: 1.5rem 0 0; color: #b9b9be; font-size: .92rem; line-height: 1.75; }
|
|
.closing .hero-actions { justify-content: flex-start; }
|
|
|
|
.site-footer { padding: 3rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #060607; }
|
|
.footer-main { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; }
|
|
.footer-main p { margin: 0; color: #77777d; font-size: .74rem; }
|
|
.footer-meta { padding-top: 1.35rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #5f5f64; font-size: .66rem; }
|
|
.footer-meta div { display: flex; gap: 1.4rem; }.footer-meta a { color: #a1a1a6; }
|
|
|
|
/* Pricing */
|
|
.pricing-page { background: var(--paper); color: var(--ink); }
|
|
.pricing-page .site-header { color: #fff; }
|
|
.pricing-hero { min-height: 43rem; padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)) 5rem; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; overflow: hidden; background: #070708; color: #fff; }
|
|
.pricing-hero-copy h1 { margin: 0; font-size: clamp(3.8rem, 6vw, 5.3rem); font-weight: 680; line-height: .95; letter-spacing: -.06em; white-space: nowrap; }
|
|
.pricing-hero-copy h1 span { color: #86868b; }
|
|
.pricing-hero-copy > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; color: #a1a1a6; font-size: .92rem; line-height: 1.75; }
|
|
.pricing-orbit { position: relative; height: 28rem; }
|
|
.orbit-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 6.4rem; height: 6.4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 1.7rem; background: rgba(35,35,38,.72); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.1); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }.orbit-core i { position: absolute; top: 1rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1rem rgba(48,209,88,.45); }.orbit-core b { font-size: 1.25rem; }
|
|
.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: translate(-50%,-50%); }.ring-one { width: 17rem; height: 17rem; }.ring-two { width: 25rem; height: 25rem; }
|
|
.orbit-node { position: absolute; z-index: 2; min-width: 4.2rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(31,31,34,.62); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.2); color: #d2d2d7; text-align: center; font-size: .62rem; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); }.node-one { top: 17%; left: 15%; }.node-two { top: 25%; right: 8%; }.node-three { right: 18%; bottom: 14%; }
|
|
.plans { padding: 5rem max(1.25rem, calc((100vw - 70rem) / 2)) 8rem; background: var(--paper); }
|
|
.plans-heading { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; }
|
|
.plans-heading > p { margin: 0; color: #6e6e73; font-size: .85rem; line-height: 1.72; }
|
|
.plan-grid { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; }
|
|
.plan { position: relative; padding: 2rem; display: flex; flex-direction: column; border: 1px solid rgba(29,29,31,.09); border-radius: .9rem; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.045); }
|
|
.plan-featured { background: #121214; color: #fff; border-color: #121214; box-shadow: 0 28px 70px rgba(0,0,0,.18); transform: translateY(-.65rem); }
|
|
.plan-recommend { position: absolute; top: 1rem; right: 1rem; padding: .32rem .5rem; border-radius: 999px; background: rgba(255,107,61,.14); color: #ff9c7a; font-size: .55rem; font-weight: 750; }
|
|
.plan-top { display: flex; align-items: center; justify-content: space-between; }
|
|
.plan-label { margin: 0; color: var(--orange); font-size: .61rem; font-weight: 750; text-transform: uppercase; }
|
|
.plan-top > span { color: #a1a1a6; font-size: .58rem; }
|
|
.plan h3 { margin: 1.3rem 0 0; font-size: 1.45rem; letter-spacing: -.035em; }
|
|
.plan-desc { min-height: 3.4rem; margin: .55rem 0 0; color: #6e6e73; font-size: .76rem; line-height: 1.6; }
|
|
.plan-featured .plan-desc { color: #8e8e93; }
|
|
.plan-price { margin: 1.6rem 0 1.4rem; display: flex; align-items: baseline; gap: .55rem; }
|
|
.plan-price strong { font-size: 2.55rem; letter-spacing: -.055em; }
|
|
.plan-price span { color: #8e8e93; font-size: .62rem; }
|
|
.plan-button { min-height: 2.85rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: .75rem; font-weight: 700; transition: background .2s, transform .1s; }
|
|
.plan-button:hover { background: #303034; }
|
|
.plan-featured .plan-button { background: #f5f5f7; color: #111; }.plan-featured .plan-button:hover { background: #fff; }
|
|
.plan ul { margin: 1.7rem 0 0; padding: 1.5rem 0 0; display: grid; gap: .7rem; border-top: 1px solid rgba(29,29,31,.1); list-style: none; }
|
|
.plan-featured ul { border-color: rgba(255,255,255,.1); }
|
|
.plan li { display: flex; gap: .55rem; color: #4f4f54; font-size: .7rem; }
|
|
.plan-featured li { color: #c7c7cc; }
|
|
.plan li span { color: var(--orange); }
|
|
.payment-note { width: max-content; max-width: 100%; margin: 2rem auto 0; padding: .62rem .85rem; display: flex; justify-content: center; align-items: center; gap: .5rem; border: 1px solid rgba(29,29,31,.08); border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 8px 24px rgba(0,0,0,.045), inset 0 1px rgba(255,255,255,.85); color: #6e6e73; font-size: .68rem; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }.payment-note i { flex: 0 0 auto; width: .38rem; height: .38rem; border-radius: 50%; background: var(--green); }
|
|
.comparison { padding: 8rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #fff; }
|
|
.comparison-head { max-width: 50rem; }.comparison-head > p:last-child { max-width: 35rem; margin: 1.3rem 0 0; color: #6e6e73; font-size: .86rem; line-height: 1.7; }
|
|
.comparison-list { margin-top: 4rem; border-top: 1px solid var(--line-light); }
|
|
.comparison-row { min-height: 4.4rem; display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line-light); }
|
|
.comparison-row > * { padding: 0 1rem; font-size: .72rem; }
|
|
.comparison-row > *:first-child { padding-left: 0; }
|
|
.comparison-header { min-height: 3.4rem; color: #86868b; }.comparison-header span { font-size: .62rem; font-weight: 650; }
|
|
.comparison-row b { font-weight: 650; }.comparison-row span { color: #55555a; }.comparison-row .positive { color: #16894e; font-weight: 650; }.comparison-row .muted { color: #b1b1b6; }
|
|
.pricing-cta { position: relative; min-height: 41rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; color: #fff; }
|
|
.pricing-cta-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 50%, rgba(4,5,6,.28)), linear-gradient(0deg, #060607, transparent 55%), url("../hero-cinema.png") center 62% / cover; }
|
|
.pricing-cta-copy { position: relative; z-index: 1; max-width: 48rem; }.pricing-cta-copy > p:nth-of-type(2) { max-width: 36rem; margin: 1.4rem 0 2rem; color: #b9b9be; font-size: .88rem; line-height: 1.75; }
|
|
|
|
.reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .72s var(--ease), transform .72s var(--ease); }
|
|
.reveal.is-visible { opacity: 1; transform: none; }
|
|
|
|
@media (max-width: 960px) {
|
|
.desktop-nav { display: none; }
|
|
.nav-contact { display: none; }
|
|
.menu-button { display: block; }
|
|
.hero { min-height: 48rem; }
|
|
.hero-inner { padding-top: 6.2rem; }
|
|
.product-stage { --stage-width: min(44rem, 92vw); }
|
|
.product-window { height: 23rem; }
|
|
.platform, .capabilities, .delivery, .plans, .comparison { padding-top: 7rem; padding-bottom: 7rem; }
|
|
.capabilities-head, .plans-heading { grid-template-columns: 1fr; gap: 1.2rem; }
|
|
.capabilities-side > p, .plans-heading > p { max-width: 30rem; }
|
|
.feature-card { gap: 1.1rem; }
|
|
.feature-copy span { max-width: 34rem; }
|
|
.plan-grid { grid-template-columns: 1fr; max-width: 40rem; margin-right: auto; margin-left: auto; }
|
|
.plan-featured { transform: none; }
|
|
.plan-desc { min-height: auto; }
|
|
.pricing-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 8rem; }
|
|
.pricing-orbit { height: 22rem; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.site-header { top: .5rem; }
|
|
.nav-island { width: calc(100% - 1rem); height: 3.45rem; padding-left: .8rem; border-radius: 999px; }
|
|
.wordmark b { display: none; }
|
|
.mobile-menu { top: 3.85rem; right: .5rem; left: .5rem; width: auto; }
|
|
.hero { height: calc(100svh - 5rem); min-height: 45rem; max-height: 54rem; }
|
|
.hero-inner { width: calc(100% - 1rem); padding-top: 5.5rem; }
|
|
.hero h1 { font-size: 4.45rem; }
|
|
.hero-product { font-size: .92rem; }
|
|
.hero-lead { max-width: 22rem; font-size: .86rem; }
|
|
.hero-actions { width: min(100%, 22rem); margin-top: 1rem; }
|
|
.button { flex: 1; }
|
|
.product-stage { --stage-width: calc(100vw - 1.2rem); margin-top: 1.55rem; }
|
|
.product-window { height: 18.8rem; border-radius: .8rem; transform: none; }
|
|
.window-bar { height: 2.5rem; }.window-status { display: none; }.window-title { grid-column: 2; }
|
|
.window-layout { height: calc(100% - 2.5rem); grid-template-columns: 3.25rem 1fr; }
|
|
.window-sidebar { padding: .55rem .28rem; }.console-tab { width: 2.55rem; min-height: 2.55rem; }.console-tab span { display: none; }
|
|
.window-main { padding: .8rem; }.console-heading h2 { font-size: .87rem; }.view-chip { display: none; }
|
|
.metric-row { gap: .3rem; }.metric-row article { padding: .55rem; }.metric-row strong { font-size: .9rem; }.metric-row span { display: none; }
|
|
.chart-panel { height: 7.7rem; }.bar-chart { height: 5.6rem; gap: .2rem; }
|
|
.media-list article { grid-template-columns: 2.6rem 1fr auto; }.poster { height: 2.25rem; }.media-list article { padding: .42rem; }
|
|
.node-map { height: 10.8rem; }
|
|
.live-activity { display: none; }
|
|
.signal-strip { min-height: 4.4rem; gap: 1rem; }.signal-strip div { gap: .32rem; }.signal-strip span { font-size: .55rem; }.signal-strip strong { font-size: .7rem; }.signal-strip > i { height: 1rem; }
|
|
.platform, .capabilities, .delivery, .plans, .comparison { padding: 5.5rem 1rem; }
|
|
.platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { font-size: 2.75rem; }
|
|
.platform-intro > p:last-child { margin: 1.4rem 0 0; font-size: .9rem; }
|
|
.principle-grid { margin-top: 3.5rem; grid-template-columns: 1fr; }.principle-grid article { min-height: auto; padding: 1.5rem 0; }.principle-grid article + article { padding-left: 0; border-top: 1px solid var(--line-light); border-left: 0; }.principle-grid h3 { margin: .9rem 0 .35rem; }
|
|
.feature-rail { margin-top: 3.5rem; grid-auto-columns: calc(94vw - 1rem); gap: .75rem; }.feature-rail-controls { display: none; }.feature-card { height: 15.5rem; min-height: 0; padding: .9rem; grid-template-columns: .94fr 1.06fr; gap: .7rem; }.feature-copy p { margin-bottom: .55rem; font-size: .58rem; }.feature-copy h3 { font-size: 1.12rem; line-height: 1.12; }.feature-copy span { margin-top: .72rem; font-size: .63rem; line-height: 1.5; }.portal-preview, .operations-preview, .network-preview { height: 13.7rem; border-radius: .65rem; }.portal-preview { padding: .55rem .55rem 0; }.portal-bar { height: 1.15rem; }.portal-bar i { width: .4rem; height: .4rem; }.portal-bar span { width: 2.3rem; }.portal-hero { height: 6.2rem; padding: .65rem; }.portal-hero small { font-size: .44rem; }.portal-hero b { font-size: .88rem; }.portal-hero em { font-size: .48rem; }.portal-posters { gap: .25rem; margin-top: .4rem; }.portal-posters i { height: 4.6rem; }.operations-preview { padding: .55rem; }.op-chart { height: 12.5rem; padding: .7rem; }.op-chart > span { font-size: .5rem; }.op-chart > strong { font-size: 1rem; }.op-chart > div { height: 7rem; margin-top: .65rem; gap: .25rem; }.op-event { right: .8rem; bottom: .8rem; left: 1.2rem; padding: .55rem; grid-template-columns: .4rem 1fr; gap: .4rem; }.op-event > i { width: .4rem; height: .4rem; }.op-event b { font-size: .55rem; }.op-event small { font-size: .45rem; }.op-event em { display: none; }.pipeline-preview { min-height: 13.7rem; gap: .28rem; }.pipeline-step { min-height: 3.25rem; padding: 0 .55rem; gap: .5rem; }.pipeline-step > i { width: 1.35rem; height: 1.35rem; font-size: .5rem; }.pipeline-step b { font-size: .58rem; }.pipeline-step small { font-size: .44rem; }.pipeline-preview > em { height: .45rem; margin-left: 1.2rem; }.network-card { width: 7rem; padding: .72rem; }.network-card strong { font-size: 1.2rem; }.network-card span, .network-card small { font-size: .45rem; }.pulse { width: .42rem; height: .42rem; box-shadow: 0 0 0 .3rem rgba(48,209,88,.1), 0 0 1rem rgba(48,209,88,.42); }
|
|
.delivery-steps { margin-top: 3.5rem; }.delivery-steps li { min-height: 6.4rem; grid-template-columns: 2.7rem 1fr 1.5rem; }.delivery-steps li:hover { padding: 0 .5rem; }.delivery-steps p { padding-right: .5rem; }
|
|
.closing, .pricing-cta { min-height: 39rem; padding: 5rem 1rem; }.closing-copy > p:nth-of-type(2), .pricing-cta-copy > p:nth-of-type(2) { font-size: .84rem; }.closing .hero-actions { align-items: flex-start; flex-direction: column; }.closing .button { flex: none; width: 100%; }
|
|
.footer-main, .footer-meta { align-items: flex-start; flex-direction: column; gap: 1rem; }.footer-meta div { width: 100%; justify-content: space-between; }
|
|
.pricing-hero { min-height: 45rem; padding: 7.5rem 1rem 4rem; display: block; }.pricing-hero-copy h1 { font-size: 2.55rem; }.pricing-hero-copy > p:last-child { font-size: .84rem; }.pricing-orbit { height: 18rem; margin-top: 1.5rem; }.ring-one { width: 13rem; height: 13rem; }.ring-two { width: 18rem; height: 18rem; }.orbit-core { width: 5rem; height: 5rem; border-radius: 1.35rem; }.node-one { top: 15%; left: 6%; }.node-two { top: 21%; right: 2%; }.node-three { right: 10%; bottom: 8%; }
|
|
.plans-heading > p { font-size: .8rem; }.plan-grid { margin-top: 3.5rem; }.plan { padding: 1.5rem; }.payment-note { width: 100%; align-items: flex-start; border-radius: 1rem; text-align: left; line-height: 1.5; }
|
|
.comparison-list { overflow-x: auto; }.comparison-row { min-width: 40rem; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
.hero-media, .product-window { transform: none; }
|
|
.site-header.is-scroll-hidden { opacity: 1; }
|
|
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
|
|
}
|
|
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
.nav-island, .mobile-menu, .product-window, .live-activity, .orbit-core, .orbit-node, .op-event, .network-card { background: #171719; -webkit-backdrop-filter: none; backdrop-filter: none; }
|
|
.button-primary, .payment-note { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
|
|
.nav-island::before, .nav-island::after { display: none; }
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
.nav-island, .mobile-menu, .product-window, .feature-card { border-color: #fff; background: #050506; }
|
|
.payment-note { border-color: #1d1d1f; background: #fff; }
|
|
}
|