/* ========================================================================== Progressive enhancement contract -------------------------------------------------------------------------- Base rules (no ancestor class needed) render every section as plain, fully-visible stacked content — the correct behaviour with JS disabled. The `.js:not(.reduced-motion)` ancestor (set by an inline script, see index.html) unlocks the pinned / absolutely-positioned / 3D layouts that main.js then animates with GSAP. `prefers-reduced-motion` is also honoured natively via @media so it works even before JS runs. ========================================================================== */ section { position: relative; z-index: 2; padding: 120px 0; } /* ---------------------------------- Hero --------------------------------- */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 40px) 0 40px; overflow: hidden; } .hero-scene { position: relative; flex: 1; display: flex; align-items: center; perspective: 1400px; } .hero-glow { position: absolute; left: 50%; top: 38%; width: min(1100px, 130vw); height: 620px; transform: translate(-50%, -50%); background: radial-gradient( closest-side, rgba(59, 130, 246, 0.32), rgba(139, 92, 246, 0.16) 55%, transparent 75% ); filter: blur(40px); pointer-events: none; z-index: 1; } .hero-content { position: relative; z-index: 3; max-width: 900px; margin: 0 auto; text-align: center; } .hero-content .eyebrow { justify-content: center; } .hero h1 { font-size: clamp(36px, 6vw, 82px); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.04; margin-top: 22px; text-wrap: balance; } .hero-lede { margin: 22px auto 0; font-size: 18px; color: var(--text-dim); max-width: 46ch; line-height: 1.6; } .hero-actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; justify-content: center; } .hero-cards { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; z-index: 2; } .hero-card { position: absolute; transform-style: preserve-3d; border-radius: var(--radius-md); opacity: 0.85; } .hero-card-1 { top: 10%; left: -3%; width: 300px; height: 196px; } .hero-card-2 { top: 8%; right: -4%; width: 280px; height: 236px; } .hero-card-3 { bottom: 4%; left: 12%; width: 250px; height: 162px; opacity: 0.7; } @media (max-width: 1180px) { .hero-card-1 { left: -8%; } .hero-card-2 { right: -8%; } } @media (max-width: 980px) { .hero-cards { display: none; } .hero-glow { top: 32%; height: 420px; } } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .scroll-cue span { width: 1px; height: 32px; background: linear-gradient(var(--text-faint), transparent); } .js:not(.reduced-motion) .scroll-cue span { animation: scrollcue 1.9s ease-in-out infinite; } @keyframes scrollcue { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 35% { opacity: 1; transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } } /* --------------------------------- Pitch --------------------------------- */ .pitch { min-height: 90vh; display: flex; align-items: center; justify-content: center; } .pitch-pin { max-width: 920px; padding: 0 32px; text-align: center; } .pitch-text { font-size: clamp(24px, 4.4vw, 52px); font-weight: 620; letter-spacing: -0.02em; line-height: 1.4; } .pitch-text .word { color: var(--text); } .js:not(.reduced-motion) .pitch-text .word { color: var(--text-faint); } .pitch-text .word.hl { color: var(--text); } .js:not(.reduced-motion) .pitch-text .word.hl { color: var(--text-faint); } /* ------------------------------- Showcase -------------------------------- One statement, one screen — a centered eyebrow/headline/subline stack with a single supporting UI card underneath, echoing Opacity's pattern of a big claim taking the stage rather than a marketing two-column feature block. No 01/02/03 numbering: the six modules aren't a sequence, so the eyebrow names the module and the dot rail (JS mode only) is the only "where am I" signal. */ .showcase-progress { display: none; } .showcase-track { display: flex; flex-direction: column; gap: 120px; } .showcase-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .showcase-scene { display: flex; flex-direction: column; align-items: center; max-width: 640px; } .showcase-scene h3 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.08; margin-top: 14px; text-wrap: balance; } .showcase-scene p { margin-top: 14px; color: var(--text-dim); font-size: 15.5px; line-height: 1.6; max-width: 40ch; } .showcase-visual { display: flex; justify-content: center; width: 100%; margin-top: 8px; } .mockup-card { width: 100%; max-width: 460px; aspect-ratio: 4 / 3; } /* Full 3D pinned mode — desktop/tablet only. Scroll-jacked pin animations are a poor fit for touch scrolling and small viewports, so below 861px this whole block never applies and the plain stacked markup above (fully visible, normal document flow) is what renders — same contract as the reduced-motion fallback, just keyed off viewport width instead. */ @media (min-width: 861px) { .js:not(.reduced-motion) #showcase { padding: 0; } .js:not(.reduced-motion) .showcase-pin { height: 100vh; overflow: hidden; display: flex; align-items: center; } .js:not(.reduced-motion) .showcase-track { position: relative; width: 100%; height: 560px; } .js:not(.reduced-motion) .showcase-item { position: absolute; inset: 0; justify-content: center; perspective: 1500px; } .js:not(.reduced-motion) .showcase-scene { transform-style: preserve-3d; } .js:not(.reduced-motion) .mockup-card { transform-style: preserve-3d; } .js:not(.reduced-motion) .showcase-progress { display: flex; flex-direction: column; gap: 12px; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 4; } } .showcase-progress .dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border-strong); cursor: pointer; padding: 0; transition: background 0.25s, transform 0.25s; } .showcase-progress .dot.active { background: var(--primary); transform: scale(1.4); } /* ---------------------------------- Hub ---------------------------------- */ .hub-scene { display: flex; flex-direction: column; align-items: center; } .hub-center-static { margin-top: 8px; font-size: 14.5px; color: var(--text-dim); max-width: 46ch; text-align: center; } .hub-ring { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 620px; margin: 44px auto 0; width: 100%; } .hub-node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; text-align: center; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); } .hub-node .icon { width: 20px; height: 20px; color: var(--primary-light); } .hub-node span { font-size: 12px; color: var(--text-dim); } .hub-spokes, .hub-center { display: none; } @media (max-width: 640px) { .hub-ring { grid-template-columns: repeat(2, 1fr); } } /* Full 3D orbit — desktop/tablet only, same rationale as the showcase pin above. Below 861px the plain icon grid defined earlier stands. */ @media (min-width: 861px) { .js:not(.reduced-motion) .hub-scene { position: relative; height: 620px; justify-content: center; } .js:not(.reduced-motion) .hub-center-static { position: absolute; top: 0; text-align: center; } .js:not(.reduced-motion) .hub-orbit-wrap { position: relative; width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; perspective: 1600px; } .js:not(.reduced-motion) .hub-ring { display: block; position: relative; width: 480px; height: 480px; max-width: none; margin: 0; transform-style: preserve-3d; transform: rotateX(58deg); } .js:not(.reduced-motion) .hub-node { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; margin: -46px; justify-content: center; transform: rotate(calc(360deg / var(--count) * var(--i))) translateX(215px) rotate(calc(360deg / var(--count) * var(--i) * -1)) rotateX(-58deg); } .js:not(.reduced-motion) .hub-spokes { display: block; position: absolute; inset: 0; } .js:not(.reduced-motion) .hub-spoke { position: absolute; top: 50%; left: 50%; width: 215px; height: 1px; background: linear-gradient(90deg, rgba(96, 165, 250, 0.55), transparent); transform-origin: 0 50%; transform: rotate(calc(360deg / var(--count) * var(--i))); } .js:not(.reduced-motion) .hub-center { display: grid; place-items: center; position: absolute; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; box-shadow: 0 0 60px var(--primary-glow); transform: translateZ(20px); } } /* ------------------------------- Security -------------------------------- */ .security-layout { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: center; margin-top: 48px; } @media (max-width: 900px) { .security-layout { grid-template-columns: 1fr; } } .vault-scene { display: flex; justify-content: center; } .vault-card { width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: var(--radius-lg); } .vault-face { width: 100%; height: 100%; border-radius: var(--radius-lg); background: linear-gradient(165deg, #101526, #0a0d17); border: 1px solid var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 28px; } .vault-front { display: none; } .vault-front .icon, .vault-back .icon-shield { width: 44px; height: 44px; color: var(--primary-light); } .vault-back ul { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; width: 100%; } .vault-back li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-dim); text-align: left; } .vault-back li .icon { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; } .security-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 520px) { .security-badges { grid-template-columns: 1fr; } } .security-badge { padding: 20px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); } .security-badge .icon { width: 22px; height: 22px; color: var(--secondary-light); } .security-badge h4 { margin-top: 12px; font-size: 15px; font-weight: 620; } .security-badge p { margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.5; } /* Full 3D vault flip — desktop/tablet only, same rationale as above. */ @media (min-width: 861px) { .js:not(.reduced-motion) .vault-scene { perspective: 1600px; } .js:not(.reduced-motion) .vault-card { position: relative; transform-style: preserve-3d; } .js:not(.reduced-motion) .vault-face { position: absolute; inset: 0; backface-visibility: hidden; } .js:not(.reduced-motion) .vault-front { display: flex; } .js:not(.reduced-motion) .vault-back { transform: rotateY(180deg); } } /* ---------------------------------- Scale --------------------------------- */ .scale-section { position: relative; overflow: hidden; } .cube-field { position: absolute; inset: -10% -5%; z-index: -1; opacity: 0.5; pointer-events: none; } .cube { position: absolute; width: 46px; height: 46px; transform-style: preserve-3d; } .cube-face { position: absolute; width: 46px; height: 46px; border: 1px solid rgba(96, 165, 250, 0.35); background: rgba(59, 130, 246, 0.05); } .cube-face.front { transform: translateZ(23px); } .cube-face.back { transform: translateZ(-23px) rotateY(180deg); } .cube-face.right { transform: rotateY(90deg) translateZ(23px); } .cube-face.left { transform: rotateY(-90deg) translateZ(23px); } .cube-face.top { transform: rotateX(90deg) translateZ(23px); } .cube-face.bottom { transform: rotateX(-90deg) translateZ(23px); } .js:not(.reduced-motion) .cube { animation: cubespin 16s linear infinite; } @keyframes cubespin { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(360deg); } } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; } @media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat { padding: 26px 20px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border); text-align: center; } .stat-value-row { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; } .stat-value, .stat-value-static, .stat-suffix { background: linear-gradient(135deg, var(--primary-light), var(--secondary-light)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-suffix { font-size: 0.55em; } .stat p { margin-top: 8px; font-size: 13.5px; color: var(--text-dim); } /* ---------------------------------- CTA ----------------------------------- */ .cta-card { max-width: 760px; margin: 0 auto; padding: 64px 48px; border-radius: var(--radius-lg); text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(59, 130, 246, 0.22), transparent 60%), var(--bg-elevated); border: 1px solid var(--border-strong); } .cta-card h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; letter-spacing: var(--tracking-display); } .cta-card p { margin-top: 16px; color: var(--text-dim); font-size: 16px; } .cta-actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 640px) { .cta-card { padding: 44px 26px; } } /* -------------------------- Reduced motion overrides ---------------------- */ @media (prefers-reduced-motion: reduce) { .js .cube, .js .scroll-cue span { animation: none !important; } } /* ----------------- Module deep-dives (Quality / Fleet) ------------------- Prose blurb + feature-card grid. Cards deliberately mirror .security-badge's look so the page reads as one system. */ .module-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; margin-top: 48px; } @media (max-width: 900px) { .module-split { grid-template-columns: 1fr; gap: 40px; } } .module-copy p { margin-top: 18px; font-size: 16px; line-height: 1.75; color: var(--text-dim); } .module-copy p:first-child { margin-top: 0; } .module-copy p strong { color: var(--text); font-weight: 620; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } } .feature-card { padding: 20px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); } .feature-card .icon { width: 22px; height: 22px; color: var(--primary-light); } #quality .feature-card .icon { color: var(--secondary-light); } .feature-card h4 { margin-top: 12px; font-size: 15px; font-weight: 620; } .feature-card p { margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }