208 lines
23 KiB
JavaScript
208 lines
23 KiB
JavaScript
(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,48228,e=>{"use strict";let t=[{n:"01",key:"input",kicker:"Input",theme:"#22C55E"},{n:"02",key:"parallel",kicker:"Parallel Execution",theme:"#8B5CF6"},{n:"03",key:"optimize",kicker:"Smart Optimization",theme:"#3B82F6"},{n:"04",key:"grading",kicker:"Performance Grading",theme:"#F59E0B"},{n:"05",key:"winner",kicker:"Strategy Comparison",theme:"#C01227"}],r=t.length;function i(e){return[(e%2==0?-1:1)*1.4,0,-(13*e)]}e.s(["N",0,r,"STAGES",0,t,"cameraFor",0,function(e){let t,a,s,n,o,d,[l,c,p]=(a=Math.floor(t=Math.max(0,Math.min(r-1,e))),s=Math.min(r-1,a+1),n=t-a,o=i(a),d=i(s),[o[0]+(d[0]-o[0])*n,o[1]+(d[1]-o[1])*n,o[2]+(d[2]-o[2])*n]);return{pos:[.7*l,c+4,p+8.2],look:[.55*l,c+1.05,p-1.6]}},"districtPosition",0,i])},56305,e=>{"use strict";var t=e.i(43476),r=e.i(71645),i=e.i(70703),a=e.i(46932),s=e.i(35382),n=e.i(95420),o=e.i(89970),d=e.i(83495),l=e.i(48228);let c=(0,i.default)(()=>e.A(30860),{loadableGenerated:{modules:[20927]},ssr:!1});function p({active:e}){return(0,t.jsx)("div",{className:"dm-st-rail","aria-hidden":!0,children:l.STAGES.map((i,a)=>(0,t.jsxs)(r.default.Fragment,{children:[a>0&&(0,t.jsx)("span",{className:`dm-st-rail__line is-${a<=e?"on":"off"}`}),(0,t.jsxs)("div",{className:`dm-st-rail__step is-${a<e?"done":a===e?"current":"todo"}`,style:{"--c":i.theme},children:[(0,t.jsx)("span",{className:"dm-st-rail__num",children:a<e?"✓":i.n}),(0,t.jsx)("span",{className:"dm-st-rail__title",children:i.kicker})]})]},i.n))})}function m({i:e,scroll:r,side:i,active:s,children:o}){let d=e/(l.N-1),c=(0,n.useTransform)(r,[d-.1,d-.05,d+.05,d+.1],[0,1,1,0]),p=(0,n.useTransform)(r,[d-.1,d-.05],[34,0]),h=l.STAGES[e];return s!==e?null:(0,t.jsxs)(a.motion.div,{className:`dm-st-card-story is-${i}`,style:{opacity:c,y:p,"--c":h.theme},children:[(0,t.jsxs)("div",{className:"dm-st-card-story__head",children:[(0,t.jsx)("span",{className:"dm-st-pillar__num",children:h.n}),(0,t.jsx)("span",{className:"dm-st-pillar__kicker",children:h.kicker})]}),o]})}function h({connected:e=!1}={}){let i=(0,r.useRef)(null),g=(0,r.useRef)(0),f=(0,s.useMotionValue)(0),[b,u]=(0,r.useState)("before"),[_,w]=(0,r.useState)(0),[v,y]=(0,r.useState)(!1),[k,j]=(0,r.useState)(!1),[N,S]=(0,r.useState)(!0),[z,E]=(0,r.useState)(!1),[T,F]=(0,r.useState)(!1),[C,A]=(0,r.useState)(!1);(0,r.useEffect)(()=>{let e=window.matchMedia("(max-width: 767px)"),t=window.matchMedia("(prefers-reduced-motion: reduce)"),r=()=>{F(e.matches),A(t.matches)};return r(),e.addEventListener("change",r),t.addEventListener("change",r),()=>{e.removeEventListener("change",r),t.removeEventListener("change",r)}},[]),(0,r.useEffect)(()=>{let e=i.current;if(!e)return;let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(y(!0),E(!0),t.disconnect())},{rootMargin:"70% 0px"}),r=new IntersectionObserver(e=>E(e.some(e=>e.isIntersecting)),{rootMargin:"10% 0px"});return t.observe(e),r.observe(e),()=>{t.disconnect(),r.disconnect()}},[]),(0,r.useEffect)(()=>{let e=i.current;if(!e)return;o.default.registerPlugin(d.ScrollTrigger);let t="before",r=0,a=d.ScrollTrigger.create({trigger:e,start:"top top",end:"bottom bottom",scrub:.4,invalidateOnRefresh:!0,onUpdate:e=>{let i=e.progress;g.current=i,f.set(i);let a=i<=2e-4?"before":i>=.9998?"after":"pinned";a!==t&&(t=a,u(a));let s=Math.round(i*(l.N-1));s!==r&&(r=s,w(s))}}),s=setTimeout(()=>d.ScrollTrigger.refresh(),120);return()=>{clearTimeout(s),a.kill()}},[f]),(0,r.useEffect)(()=>{if(!v)return;let e=setTimeout(()=>{j(e=>e||(console.warn("StrategySection: Scene readiness fallback triggered."),!0))},4e3);return()=>clearTimeout(e)},[v]),(0,r.useEffect)(()=>{if(k){let e=setTimeout(()=>{S(!1)},300);return()=>clearTimeout(e)}},[k]);let M=(0,n.useTransform)(f,[0,.03,.06],[1,1,0]),B=(0,n.useTransform)(f,[.02,.07],[0,1]);return(0,t.jsxs)("section",{ref:i,className:`dm-st is-${b}${e?" is-connected":""}`,"aria-label":"Strategy — Happier Fleet Drivers. Higher Fulfillment.",children:[(0,t.jsx)("div",{className:"dm-st-sticky",children:(0,t.jsxs)("div",{className:"dm-st-card",children:[v&&(0,t.jsx)("div",{className:`dm-st-canvas${k?" is-ready":""}`,"aria-hidden":!k,children:(0,t.jsx)(c,{progress:g,reduced:C,isMobile:T,active:z&&"pinned"===b,stage:_,ready:k,onReady:()=>j(!0)})}),N&&(0,t.jsxs)("div",{className:`dm-st-loader${k?" is-hiding":""}`,role:"status","aria-live":"polite","aria-label":"Loading MileTruth Strategy Engine",children:[(0,t.jsx)("span",{className:"dm-st-loader__ring"}),(0,t.jsx)("span",{className:"dm-st-loader__text",children:"Loading strategy engine..."})]}),"before"!==b&&(0,t.jsxs)("div",{className:`dm-st-ui${k?" is-ready":""}`,"aria-hidden":!k,children:[(0,t.jsxs)(a.motion.div,{className:"dm-st-top",style:{opacity:B},children:[(0,t.jsxs)("div",{className:"dm-st-eyebrow",children:[(0,t.jsx)("span",{className:"dm-st-dot"})," MileTruth Strategy Engine"]}),(0,t.jsx)(p,{active:_})]}),(0,t.jsxs)(a.motion.div,{className:"dm-st-scrollhint",style:{opacity:M},children:[(0,t.jsx)("span",{children:"Scroll to follow the strategy"}),(0,t.jsx)("span",{className:"dm-st-arrow",children:"↓"})]}),(0,t.jsxs)(m,{i:0,scroll:f,side:"left",active:_,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Orders & fleet drivers enter the system"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Orders are uploaded and matched against the available fleet, ready for assignment."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"59 Orders"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"4 Drivers"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Fleet ready"})]})]}),(0,t.jsxs)(m,{i:1,scroll:f,side:"right",active:_,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Six strategies, evaluated in parallel"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"The AI runs every routing strategy at the same time — legacy baselines and MileTruth's unified engine."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"EV Aware"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Multi Trip"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"+4 more"})]})]}),(0,t.jsxs)(m,{i:2,scroll:f,side:"left",active:_,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Routes optimized & validated"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Every route is solved for distance, then checked against battery range and service SLAs."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Optimize"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Battery"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"SLA"})]})]}),(0,t.jsxs)(m,{i:3,scroll:f,side:"right",active:_,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Every strategy is scored"}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"Each strategy is graded live on fulfillment, SLA compliance, efficiency and battery feasibility."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"Grade A"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"88% Fulfillment"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"95% SLA"})]})]}),(0,t.jsxs)(m,{i:4,scroll:f,side:"right",active:_,children:[(0,t.jsx)("h3",{className:"dm-st-pillar__title",children:"Happier fleet drivers. Higher fulfillment."}),(0,t.jsx)("p",{className:"dm-st-anchor__lead",children:"EV Aware wins — the best fulfillment with feasible, battery-safe routes for every fleet driver."}),(0,t.jsxs)("div",{className:"dm-st-anchor__chips",children:[(0,t.jsx)("span",{className:"dm-st-anchor__chip dm-st-anchor__chip--win",children:"🏆 EV Aware"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"88% Score"}),(0,t.jsx)("span",{className:"dm-st-anchor__chip",children:"52/59 Fulfilled"})]})]})]})]})}),(0,t.jsx)("style",{children:x})]})}let x=`
|
||
/* Scroll length tuned for pacing: ~100vh per stage (was 144vh) so the 5 stages
|
||
complete in noticeably less scrolling and the workflow feels tighter / faster.
|
||
Stage cross-fade windows are progress-based (0…1), so they stay aligned. */
|
||
.dm-st { position: relative; height: 500vh; background: transparent; }
|
||
.dm-st-sticky { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;
|
||
will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
|
||
.dm-st.is-pinned .dm-st-sticky { position: fixed; top: 0; left: 0; }
|
||
.dm-st.is-after .dm-st-sticky { position: absolute; top: auto; bottom: 0; }
|
||
|
||
.dm-st-card {
|
||
position: absolute !important; inset: 20px !important;
|
||
border-radius: 28px !important; overflow: hidden !important;
|
||
background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef1f6 60%, #e6eaf2 100%) !important;
|
||
border: 1px solid rgba(15,23,42,0.08) !important;
|
||
box-shadow: 0 30px 90px -34px rgba(15,23,42,0.4) !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
@media (max-width: 767px) { .dm-st-card { inset: 10px !important; border-radius: 20px !important; } }
|
||
|
||
/* Connected mode (inside Workflow 3): flatten the card's bottom so the Strategy
|
||
content card below butts directly against it — same seam as Workflow 1 & 2. */
|
||
.dm-st.is-connected .dm-st-card {
|
||
top: 20px !important; left: 20px !important; right: 20px !important; bottom: 0 !important;
|
||
border-radius: 28px 28px 0 0 !important; border-bottom: none !important;
|
||
/* Flush against the Strategy card below — drop the heavy downward shadow so it
|
||
doesn't cast a dark band onto that card's top edge (the two read as one container). */
|
||
box-shadow: none !important;
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-st.is-connected .dm-st-card {
|
||
top: 10px !important; left: 10px !important; right: 10px !important; bottom: 0 !important;
|
||
border-radius: 20px 20px 0 0 !important;
|
||
}
|
||
}
|
||
|
||
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
|
||
transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
|
||
.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
|
||
.dm-st-canvas canvas { display: block; }
|
||
|
||
.dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
|
||
opacity: 0; visibility: hidden;
|
||
transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.25s; }
|
||
.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
|
||
|
||
.dm-st-loader { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 6;
|
||
display: flex; align-items: center; gap: 8px;
|
||
background: rgba(15,23,42,0.85); border: 1px solid rgba(255,255,255,0.08);
|
||
padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
|
||
opacity: 1; pointer-events: none;
|
||
animation: dmStLoaderFadeIn 0.2s ease both;
|
||
transition: opacity 0.25s ease; }
|
||
.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
|
||
.dm-st-loader__ring { width: 14px; height: 14px; border-radius: 50%;
|
||
border: 2px solid rgba(255,255,255,0.2); border-top-color: #00E5FF;
|
||
animation: dm-hiw-spin 0.8s linear infinite; box-sizing: border-box; }
|
||
.dm-st-loader__text { font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
color: #ffffff; font-size: 13.5px; font-weight: 500; opacity: 0.75; white-space: nowrap; }
|
||
@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||
@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }
|
||
|
||
/* ---- Persistent header: title + 5-stage rail ---- */
|
||
.dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;
|
||
display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px; }
|
||
.dm-st-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.35;
|
||
letter-spacing: 0.28em; text-transform: uppercase; color: #475569; padding: 9px 18px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.72); border: 1px solid rgba(15,23,42,0.08); backdrop-filter: blur(10px); white-space: nowrap; }
|
||
.dm-st-dot { width: 6px; height: 6px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 10px #6366f1; }
|
||
|
||
.dm-st-rail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 980px; }
|
||
.dm-st-rail__step { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
|
||
background: rgba(255,255,255,0.7); border: 1px solid rgba(15,23,42,0.08); backdrop-filter: blur(8px);
|
||
transition: all 0.45s cubic-bezier(0.22,1,0.36,1); }
|
||
.dm-st-rail__num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 10px; font-weight: 800; color: #64748b; background: rgba(15,23,42,0.06); }
|
||
.dm-st-rail__title { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #64748b; white-space: nowrap; }
|
||
.dm-st-rail__step.is-current { background: color-mix(in srgb, var(--c) 16%, white); border-color: var(--c);
|
||
box-shadow: 0 0 22px -6px var(--c); }
|
||
.dm-st-rail__step.is-current .dm-st-rail__num { background: var(--c); color: #fff; }
|
||
.dm-st-rail__step.is-current .dm-st-rail__title { color: #0f172a; }
|
||
.dm-st-rail__step.is-done .dm-st-rail__num { background: #22C55E; color: #fff; }
|
||
.dm-st-rail__step.is-done .dm-st-rail__title { color: #334155; }
|
||
.dm-st-rail__line { width: 14px; height: 1px; background: rgba(15,23,42,0.14); margin: 0 3px; transition: background 0.45s ease; }
|
||
.dm-st-rail__line.is-on { background: var(--c, #22C55E); }
|
||
|
||
.dm-st-scrollhint { position: absolute; bottom: clamp(26px, 6vh, 60px); left: 50%; transform: translateX(-50%);
|
||
display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.12em;
|
||
color: #64748b; text-transform: uppercase; text-align: center; }
|
||
.dm-st-arrow { font-size: 18px; animation: dmStBob 1.8s ease-in-out infinite; }
|
||
@keyframes dmStBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
|
||
|
||
/* ---- Per-stage glass content card ---- */
|
||
.dm-st-card-story { position: absolute; bottom: clamp(24px, 6vh, 64px); width: min(484px, 88vw);
|
||
pointer-events: auto; will-change: opacity, transform; padding: 20px 22px; border-radius: 20px;
|
||
background: rgba(255,255,255,0.94); border: 1px solid rgba(15,23,42,0.08);
|
||
/* backdrop blur removed — card cross-fades/translates per scroll-stage; blur was the
|
||
heaviest per-frame cost on this section. Near-opaque white keeps the glass look. */
|
||
border-top: 3px solid var(--c);
|
||
box-shadow: 0 28px 70px -34px rgba(15,23,42,0.5); }
|
||
.dm-st-card-story.is-left { left: clamp(18px, 5vw, 72px); }
|
||
.dm-st-card-story.is-right { right: clamp(18px, 5vw, 72px); }
|
||
.dm-st-card-story__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||
.dm-st-pillar__num { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #fff;
|
||
background: var(--c); border-radius: 7px; padding: 3px 8px; }
|
||
.dm-st-pillar__kicker { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.16em;
|
||
text-transform: uppercase; color: var(--c); }
|
||
.dm-st .dm-st-pillar__title { margin: 0 0 14px !important; padding: 0 !important; color: #0f172a !important;
|
||
font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.015em !important;
|
||
font-size: clamp(18px, 2vw, 26px) !important; line-height: 1.16 !important; }
|
||
.dm-st .dm-st-pillar__title--hero { font-size: clamp(22px, 2.6vw, 34px) !important;
|
||
background: linear-gradient(90deg, #C01227, #E2354A) !important; -webkit-background-clip: text !important;
|
||
background-clip: text !important; -webkit-text-fill-color: transparent !important; }
|
||
.dm-st-foot { margin: 12px 0 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.5; color: #475569;
|
||
display: flex; align-items: center; gap: 8px; }
|
||
.dm-st-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c);
|
||
animation: dmStPulse 1.8s ease-out infinite; }
|
||
@keyframes dmStPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
|
||
|
||
/* In-scene 3D labels (drei <Html>) — crisp glass chips floating in the WebGL scene */
|
||
.dm-st3d-file, .dm-st3d-count, .dm-st3d-ai, .dm-st3d-chip {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 0.2s linear; }
|
||
.dm-st3d-file, .dm-st3d-ai {
|
||
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f172a;
|
||
background: rgba(255,255,255,0.88); border: 1px solid rgba(34,197,94,0.4); border-radius: 999px;
|
||
padding: 6px 13px; box-shadow: 0 8px 22px -12px rgba(34,197,94,0.7); backdrop-filter: blur(8px); }
|
||
.dm-st3d-count { font-size: 15px; font-weight: 800; color: #0f172a; background: rgba(255,255,255,0.9);
|
||
border: 1px solid rgba(34,197,94,0.45); border-radius: 12px; padding: 6px 14px;
|
||
box-shadow: 0 10px 26px -12px rgba(34,197,94,0.8); backdrop-filter: blur(8px); }
|
||
.dm-st3d-count span { color: #16a34a; font-size: 19px; }
|
||
.dm-st3d-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92);
|
||
border: 1px solid rgba(34,197,94,0.4); border-radius: 12px; padding: 6px 11px;
|
||
box-shadow: 0 10px 26px -14px rgba(15,23,42,0.7); backdrop-filter: blur(8px); }
|
||
.dm-st3d-chip__ico { font-size: 17px; }
|
||
.dm-st3d-chip__txt { display: flex; flex-direction: column; line-height: 1.15; }
|
||
.dm-st3d-chip__txt b { font-size: 12.5px; font-weight: 800; color: #0f172a; }
|
||
.dm-st3d-chip__txt { font-size: 10.5px; color: #475569; }
|
||
|
||
/* Generic themed 3D chips (stages 02–05) — colour comes from --tc per element */
|
||
.dm-st3d-tag, .dm-st3d-score {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 0.2s linear; }
|
||
.dm-st3d-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #0f172a;
|
||
background: rgba(255,255,255,0.9); border: 1px solid color-mix(in srgb, var(--tc, #8B5CF6) 55%, white);
|
||
border-radius: 999px; padding: 5px 11px; box-shadow: 0 8px 20px -12px var(--tc, #8B5CF6); backdrop-filter: blur(8px); }
|
||
.dm-st3d-tag b { font-weight: 800; color: var(--tc, #0f172a); }
|
||
.dm-st3d-tag.is-u { background: color-mix(in srgb, var(--tc) 14%, white); border-color: var(--tc); }
|
||
.dm-st3d-tag.is-muted { opacity: 0.82; border-style: dashed; }
|
||
.dm-st3d-tag.is-win { border-color: var(--tc); box-shadow: 0 10px 26px -10px var(--tc); }
|
||
.dm-st3d-score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0f172a;
|
||
background: rgba(255,255,255,0.92); border: 1px solid color-mix(in srgb, var(--tc, #0f172a) 45%, white);
|
||
border-radius: 12px; padding: 6px 13px; box-shadow: 0 10px 26px -12px var(--tc, #0f172a); backdrop-filter: blur(8px); }
|
||
.dm-st3d-score b { font-size: 16px; font-weight: 800; color: var(--tc, #0f172a); }
|
||
.dm-st3d-score.is-win { border-color: var(--tc); }
|
||
|
||
/* Light side-card anchor — the 3D world now carries the detail */
|
||
.dm-st-anchor__lead { margin: 0 0 14px; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.55; color: #475569; }
|
||
.dm-st-anchor__chips { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.dm-st-anchor__chip { font-size: 12px; font-weight: 700; color: #334155; padding: 6px 12px; border-radius: 999px;
|
||
background: color-mix(in srgb, var(--c) 9%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); }
|
||
.dm-st-anchor__chip--win { color: #fff; background: linear-gradient(90deg, #C01227, #E2354A); border-color: transparent; }
|
||
|
||
/* In-world Command Center KPI card + Winner card (drei <Html>, faded by proximity) */
|
||
.dm-st3d-kpi, .dm-st3d-winner3d {
|
||
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
|
||
pointer-events: none; user-select: none; transition: opacity 0.2s linear; }
|
||
.dm-st3d-kpi { display: flex; flex-direction: column; gap: 5px; width: 132px; padding: 9px 12px; border-radius: 12px;
|
||
background: rgba(255,255,255,0.95); border: 1px solid color-mix(in srgb, var(--tc, #F59E0B) 40%, white);
|
||
box-shadow: 0 10px 26px -14px var(--tc, #F59E0B); backdrop-filter: blur(8px); }
|
||
.dm-st3d-kpi__n { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
|
||
.dm-st3d-kpi__v { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1; }
|
||
.dm-st3d-kpi__v i { font-size: 14px; font-weight: 700; color: var(--tc, #F59E0B); font-style: normal; margin-left: 1px; }
|
||
.dm-st3d-kpi__bar { height: 6px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; }
|
||
.dm-st3d-kpi__bar i { display: block; height: 100%; border-radius: 999px; background: var(--tc, #F59E0B); }
|
||
.dm-st3d-winner3d { display: flex; flex-direction: column; gap: 3px; width: 184px; padding: 13px 15px; border-radius: 14px;
|
||
background: rgba(255,255,255,0.96); border: 1px solid rgba(192,18,39,0.4); box-shadow: 0 16px 40px -16px rgba(192,18,39,0.6); backdrop-filter: blur(8px); }
|
||
.dm-st3d-winner3d__top { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #C01227; }
|
||
.dm-st3d-winner3d__name { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 4px; }
|
||
.dm-st3d-winner3d__row { font-size: 12px; color: #475569; }
|
||
.dm-st3d-winner3d__row b { color: #C01227; font-weight: 800; margin-right: 4px; }
|
||
|
||
@media (max-width: 1000px) {
|
||
.dm-st-rail__title { display: none; }
|
||
.dm-st-rail__step { padding: 5px 7px; }
|
||
.dm-st-rail__line { width: 9px; }
|
||
}
|
||
@media (max-width: 767px) {
|
||
.dm-st { height: 420vh; }
|
||
/* Full-width, bottom-anchored story card. Bound its height to the viewport and
|
||
let it scroll internally so a tall stage card (Command Center / Winner) can
|
||
never be clipped off the top of a short phone screen — the active workflow
|
||
state always stays fully visible. */
|
||
.dm-st-card-story { left: 0 !important; right: 0 !important; margin: 0 auto; width: calc(100% - 28px);
|
||
bottom: clamp(18px, 4vh, 40px); padding: 15px 16px;
|
||
max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.dm-st-arrow { animation: none !important; }
|
||
}
|
||
`;e.s(["default",0,function(){return(0,t.jsxs)("section",{className:"dm-wf3","aria-label":"Workflow 3 — Happier Fleet Drivers. Higher Fulfillment.",children:[(0,t.jsx)(h,{}),(0,t.jsx)("style",{dangerouslySetInnerHTML:{__html:`
|
||
.dm-wf3 { position: relative; margin: 0 auto; }
|
||
/* Cancel the global "section { padding: 6rem 0 }": both this wrapper
|
||
and the nested .dm-st are sections, so that padding would stack into
|
||
large empty bands around the pinned 3D experience. */
|
||
.dm-wf3, .dm-wf3 .dm-st { padding-top: 0; padding-bottom: 0; }
|
||
`}})]})}],56305)},55819,e=>{e.n(e.i(56305))},30860,e=>{e.v(t=>Promise.all(["static/chunks/15p8tu-h65hwr.js","static/chunks/0slp15tkm5idk.js","static/chunks/0e.~6vil2~4uy.js","static/chunks/0d1hvye~4r7kb.js","static/chunks/0b~g01t48jn6q.js"].map(t=>e.l(t))).then(()=>t(20927)))}]); |