.sd-demo { --navy: #11314a; --navy-deep: #0d1f2e; --blue: #235C81; --blue-m: #5492B6; --coral: #DB635D; --salmon: #F2847D; --cream: #FFF6E8; --sand: #F6C893; --teal: #80a38f; width: 100%; max-width: 760px; margin: 0 auto; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif; color: var(--cream); box-sizing: border-box; } .sd-demo *, .sd-demo *::before, .sd-demo *::after { box-sizing: border-box; } .sd-demo__frame { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--navy-deep); border: 1px solid rgba(84, 146, 182, 0.22); border-radius: 18px; box-shadow: 0 40px 80px rgba(13, 31, 46, 0.28); overflow: hidden; isolation: isolate; } .sd-demo__wm { position: absolute; right: 14px; bottom: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 246, 232, 0.35); z-index: 20; pointer-events: none; } .sd-demo__controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .sd-demo__ctrl { background: transparent; border: 1px solid rgba(35, 92, 129, 0.3); color: var(--blue); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } @media (hover: hover) { .sd-demo__ctrl:hover { background: var(--blue); color: var(--cream); border-color: var(--blue); } } .sd-demo__dots { display: inline-flex; gap: 6px; align-items: center; } .sd-demo__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(35, 92, 129, 0.2); transition: background .3s ease; } .sd-demo__dot.is-active { background: var(--coral); } .sd-demo__cursor { position: absolute; top: 0; left: 0; width: 20px; height: 24px; z-index: 15; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); animation: sdDemoCursor 40s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; } .sd-demo__cursor svg { width: 100%; height: 100%; } @keyframes sdDemoCursor { 0%    { transform: translate(22%, 60%); } 6%    { transform: translate(5%, 18%); } 10%   { transform: translate(5%, 18%); } 20%   { transform: translate(5%, 30%); } 26%   { transform: translate(55%, 45%); } 40%   { transform: translate(40%, 65%); } 46%   { transform: translate(70%, 42%); } 60%   { transform: translate(60%, 72%); } 66%   { transform: translate(80%, 78%); } 80%   { transform: translate(70%, 30%); } 90%   { transform: translate(22%, 60%); } 100%  { transform: translate(22%, 60%); } } @media (prefers-reduced-motion: reduce) { .sd-demo__cursor { animation: none; transform: translate(30%, 50%); } } .sd-demo.is-paused .sd-demo__cursor { animation-play-state: paused; } .sd-demo__shell { position: absolute; inset: 0; display: grid; grid-template-columns: 88px 1fr; grid-template-rows: 48px 1fr; } .sd-demo__sidebar { grid-column: 1; grid-row: 1 / 3; background: rgba(17, 49, 74, 0.7); padding: 18px 10px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid rgba(84, 146, 182, 0.14); } .sd-demo__logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--coral), var(--sand)); margin: 0 auto 18px; } .sd-demo__navitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 10px; color: rgba(255, 246, 232, 0.7); font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; position: relative; transition: background .3s ease, color .3s ease; } .sd-demo__navitem svg { width: 14px; height: 14px; stroke: currentColor; flex: 0 0 auto; } .sd-demo__navitem.is-active { background: rgba(219, 99, 93, 0.18); color: var(--cream); } .sd-demo__navitem.is-active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--coral); border-radius: 0 3px 3px 0; } .sd-demo__header { grid-column: 2; grid-row: 1; background: rgba(17, 49, 74, 0.6); border-bottom: 1px solid rgba(84, 146, 182, 0.18); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; gap: 12px; } .sd-demo__crumb { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; color: var(--sand); letter-spacing: 0.12em; text-transform: uppercase; } .sd-demo__crumb strong { color: var(--cream); font-weight: 700; } .sd-demo__datepick { background: rgba(84, 146, 182, 0.12); border: 1px solid rgba(84, 146, 182, 0.25); padding: 5px 10px; border-radius: 6px; font-size: 10px; color: var(--cream); font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.08em; } .sd-demo__stage { grid-column: 2; grid-row: 2; position: relative; padding: 18px; overflow: hidden; } .sd-demo__screen { position: absolute; inset: 18px; opacity: 0; transition: opacity .6s ease; display: grid; gap: 10px; } .sd-demo__screen.is-active { opacity: 1; } .sd-demo__screen--overview  { animation: sdDemoFade 40s infinite; animation-delay: 0s; } .sd-demo__screen--revenue   { animation: sdDemoFade 40s infinite; animation-delay: -32s; } .sd-demo__screen--inventory { animation: sdDemoFade 40s infinite; animation-delay: -24s; } .sd-demo__screen--channel   { animation: sdDemoFade 40s infinite; animation-delay: -16s; } .sd-demo__screen--forecast  { animation: sdDemoFade 40s infinite; animation-delay: -8s; } @keyframes sdDemoFade { 0%, 18% { opacity: 1; z-index: 2; pointer-events: auto; } 22%, 98% { opacity: 0; z-index: 1; pointer-events: none; } 100% { opacity: 0; z-index: 1; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { .sd-demo__screen { animation: none !important; opacity: 0; } .sd-demo__screen--overview { opacity: 1; } } .sd-demo.is-paused .sd-demo__screen { animation-play-state: paused; } .sd-demo__kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sd-demo__kpi { background: rgba(17, 49, 74, 0.55); border: 1px solid rgba(84, 146, 182, 0.18); border-radius: 8px; padding: 10px 10px 8px; } .sd-demo__kpi-label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 4px; } .sd-demo__kpi-value { font-size: 17px; font-weight: 700; color: var(--cream); font-variant-numeric: tabular-nums; } .sd-demo__kpi-delta { font-size: 9px; color: var(--teal); margin-top: 2px; font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.06em; } .sd-demo__kpi-delta--down { color: var(--coral); } .sd-demo__chart { background: rgba(17, 49, 74, 0.45); border: 1px solid rgba(84, 146, 182, 0.18); border-radius: 10px; padding: 14px 14px 10px; position: relative; overflow: hidden; min-height: 140px; } .sd-demo__chart-title { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 8px; } .sd-demo__chart-svg { width: 100%; height: calc(100% - 20px); display: block; } .sd-demo__stack { display: flex; align-items: flex-end; gap: 6px; height: calc(100% - 20px); } .sd-demo__stack-bar { flex: 1; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 20%; opacity: 0; transform: scaleY(0.2); transform-origin: bottom; animation: sdDemoBar 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .sd-demo__screen--revenue.is-active .sd-demo__stack-bar {  } .sd-demo__stack-seg { width: 100%; } .sd-demo__stack-seg--dtc { background: var(--coral); height: 45%; } .sd-demo__stack-seg--wholesale { background: var(--blue-m); height: 35%; } .sd-demo__stack-seg--retail { background: var(--sand); height: 20%; } @keyframes sdDemoBar { to { opacity: 1; transform: scaleY(1); } } .sd-demo__insight { position: absolute; right: 14px; top: 14px; max-width: 55%; background: rgba(246, 200, 147, 0.12); border: 1px solid rgba(246, 200, 147, 0.35); border-radius: 8px; padding: 8px 10px; color: var(--cream); font-size: 10px; line-height: 1.4; backdrop-filter: blur(4px); opacity: 0; transform: translateY(-6px); animation: sdDemoInsight 40s infinite; } .sd-demo__insight--channel { animation-delay: -22s; } .sd-demo__insight--forecast { animation-delay: -6s; } @keyframes sdDemoInsight { 0%, 6% { opacity: 0; transform: translateY(-6px); } 8%, 16% { opacity: 1; transform: translateY(0); } 18%, 100% { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .sd-demo__insight { animation: none; opacity: 0; } } .sd-demo.is-paused .sd-demo__insight { animation-play-state: paused; } .sd-demo__insight-tag { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); display: block; margin-bottom: 4px; } .sd-demo__insight strong { color: var(--sand); } .sd-demo__actions { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; flex-wrap: wrap; } .sd-demo__action { background: rgba(35, 92, 129, 0.35); border: 1px solid rgba(84, 146, 182, 0.3); color: var(--cream); padding: 4px 10px; border-radius: 999px; font-size: 9px; font-family: 'Source Code Pro', ui-monospace, monospace; letter-spacing: 0.08em; } .sd-demo__action--accent { background: rgba(219, 99, 93, 0.2); border-color: rgba(219, 99, 93, 0.4); color: var(--sand); } .sd-demo__table { background: rgba(17, 49, 74, 0.55); border: 1px solid rgba(84, 146, 182, 0.18); border-radius: 10px; overflow: hidden; } .sd-demo__trow { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 8px; padding: 8px 12px; font-size: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; color: var(--cream); border-bottom: 1px solid rgba(84, 146, 182, 0.1); align-items: center; } .sd-demo__trow--head { background: rgba(84, 146, 182, 0.12); color: var(--sand); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; } .sd-demo__trow:last-child { border-bottom: 0; } .sd-demo__stock { display: inline-block; padding: 2px 6px; border-radius: 999px; font-size: 8px; letter-spacing: 0.08em; } .sd-demo__stock--low { background: rgba(219, 99, 93, 0.2); color: var(--coral); } .sd-demo__stock--ok { background: rgba(128, 163, 143, 0.18); color: var(--teal); } .sd-demo__stock--warn { background: rgba(246, 200, 147, 0.18); color: var(--sand); } .sd-demo__chanrow { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--cream); padding: 6px 0; border-bottom: 1px dashed rgba(84, 146, 182, 0.15); } .sd-demo__chanrow:last-child { border-bottom: 0; } .sd-demo__chanlabel { width: 85px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 246, 232, 0.75); } .sd-demo__chanbar { flex: 1; height: 8px; background: rgba(84, 146, 182, 0.15); border-radius: 4px; position: relative; overflow: hidden; } .sd-demo__chanbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--blue-m), var(--coral)); border-radius: 4px; } .sd-demo__chanval { width: 46px; text-align: right; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; color: var(--sand); } .sd-demo__forecast-svg { width: 100%; height: 100%; display: block; } .sd-demo__forecast-band { fill: rgba(84, 146, 182, 0.2); } .sd-demo__forecast-line { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sd-demo__forecast-line--dashed { stroke-dasharray: 4 3; stroke: var(--sand); } .sd-demo__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 640px) { .sd-demo__shell { grid-template-columns: 60px 1fr; } .sd-demo__navitem { font-size: 0; gap: 0; padding: 8px; justify-content: center; } .sd-demo__navitem svg { width: 16px; height: 16px; } .sd-demo__logo { width: 24px; height: 24px; margin-bottom: 14px; } .sd-demo__kpirow { grid-template-columns: repeat(2, 1fr); } .sd-demo__kpi-value { font-size: 14px; } .sd-demo__crumb { font-size: 9px; } .sd-demo__datepick { display: none; } } .sd-mobile { --navy: #11314a; --navy-deep: #0d1f2e; --blue: #235C81; --blue-m: #5492B6; --coral: #DB635D; --cream: #FFF6E8; --sand: #F6C893; --teal: #80a38f; width: 100%; max-width: 300px; margin: 0 auto; font-family: 'Inter', system-ui, sans-serif; position: relative; } .sd-mobile *, .sd-mobile *::before, .sd-mobile *::after { box-sizing: border-box; } .sd-mobile__device { position: relative; background: var(--navy-deep); border-radius: 42px; padding: 14px; box-shadow: 0 40px 80px rgba(13, 31, 46, 0.28), inset 0 0 0 1px rgba(84, 146, 182, 0.25); aspect-ratio: 9 / 19; } .sd-mobile__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 28px; background: var(--navy-deep); border-radius: 0 0 16px 16px; z-index: 10; } .sd-mobile__screen { position: relative; width: 100%; height: 100%; background: var(--navy-deep); border-radius: 28px; overflow: hidden; padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 10px; color: var(--cream); } .sd-mobile__statusbar { position: absolute; top: 14px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-family: 'Source Code Pro', ui-monospace, monospace; color: var(--cream); z-index: 2; } .sd-mobile__header { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 6px; } .sd-mobile__title { font-family: 'DM Sans', 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: var(--cream); } .sd-mobile__pill { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); background: rgba(246, 200, 147, 0.12); padding: 3px 8px; border-radius: 999px; } .sd-mobile__kpi-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sd-mobile__kpi { background: rgba(17, 49, 74, 0.6); border: 1px solid rgba(84, 146, 182, 0.18); border-radius: 10px; padding: 8px 10px 7px; } .sd-mobile__kpi-label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 3px; } .sd-mobile__kpi-value { font-size: 14px; font-weight: 700; color: var(--cream); line-height: 1.1; } .sd-mobile__kpi-delta { font-size: 8px; color: var(--teal); margin-top: 2px; font-family: 'Source Code Pro', ui-monospace, monospace; } .sd-mobile__chart { flex: 1; background: rgba(17, 49, 74, 0.5); border: 1px solid rgba(84, 146, 182, 0.18); border-radius: 10px; padding: 10px; position: relative; overflow: hidden; min-height: 120px; } .sd-mobile__chart-label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); margin-bottom: 6px; } .sd-mobile__chart-svg { width: 100%; height: calc(100% - 14px); display: block; } .sd-mobile__insight { background: rgba(246, 200, 147, 0.1); border-left: 2px solid var(--sand); padding: 6px 8px; border-radius: 4px; font-size: 9px; line-height: 1.4; color: rgba(255, 246, 232, 0.9); } .sd-mobile__insight strong { color: var(--sand); } .sd-mobile__tabs { display: flex; justify-content: space-around; padding-top: 6px; border-top: 1px solid rgba(84, 146, 182, 0.18); } .sd-mobile__tab { width: 26px; height: 26px; border-radius: 7px; background: rgba(84, 146, 182, 0.12); display: flex; align-items: center; justify-content: center; color: rgba(255, 246, 232, 0.5); } .sd-mobile__tab svg { width: 14px; height: 14px; } .sd-mobile__tab.is-active { background: var(--coral); color: var(--cream); } .sd-mobile__tap { position: absolute; width: 40px; height: 40px; border: 2px solid var(--coral); border-radius: 50%; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; animation: sdMobileTap 4.5s ease-out infinite; } @keyframes sdMobileTap { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.9; } 60% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sd-mobile__tap { animation: none; opacity: 0; } }