.sd-illus { --navy: #11314a; --navy-deep: #0d1f2e; --blue: #235C81; --blue-m: #5492B6; --coral: #DB635D; --salmon: #F2847D; --cream: #FFF6E8; --sand: #F6C893; font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: var(--cream); box-sizing: border-box; } .sd-illus *, .sd-illus *::before, .sd-illus *::after { box-sizing: border-box; } .sd-dash-card { display: block; width: 100%; max-width: 360px; margin: 0 auto; padding: 22px 24px 20px; background: var(--navy-deep); border: 1px solid rgba(84, 146, 182, 0.22); border-radius: 16px; box-shadow: 0 20px 60px rgba(13, 31, 46, 0.28); position: relative; overflow: hidden; } .sd-dash-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(219, 99, 93, 0.08), transparent 60%); pointer-events: none; } .sd-dash-card__label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); margin: 0 0 10px; } .sd-dash-card__value { font-size: 34px; line-height: 1.05; font-weight: 700; color: var(--cream); margin: 0 0 6px; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .sd-dash-card__trend { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .sd-dash-card__trend--up { background: rgba(246, 200, 147, 0.15); color: var(--sand); } .sd-dash-card__trend--down { background: rgba(219, 99, 93, 0.16); color: var(--coral); } .sd-dash-card__trend--none { background: rgba(84, 146, 182, 0.18); color: var(--blue-m); } .sd-dash-card__trend svg { width: 12px; height: 12px; } .sd-dash-card__spark { display: block; width: 100%; height: 52px; margin-top: 14px; overflow: visible; } .sd-dash-card__spark path.stroke { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sd-dash-card__spark path.fill { fill: rgba(219, 99, 93, 0.14); } .sd-dash-card__spark .dot { fill: var(--coral); transform-origin: center; animation: sdSparkPulse 4s ease-in-out infinite; transform-box: fill-box; } @keyframes sdSparkPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.6); } } .sd-dora { width: 100%; max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sd-dora__tile { position: relative; padding: 18px 18px 16px; background: var(--navy-deep); border: 1px solid rgba(84, 146, 182, 0.2); border-radius: 14px; overflow: hidden; } .sd-dora__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(84, 146, 182, 0.06), transparent 60%); pointer-events: none; } .sd-dora__label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); margin: 0 0 8px; position: relative; z-index: 1; } .sd-dora__value { font-size: 22px; line-height: 1.1; font-weight: 700; color: var(--cream); margin: 0 0 6px; position: relative; z-index: 1; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .sd-dora__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; position: relative; z-index: 1; } .sd-dora__chip--up { background: rgba(246, 200, 147, 0.15); color: var(--sand); } .sd-dora__chip--down { background: rgba(219, 99, 93, 0.16); color: var(--coral); } .sd-dora__chip svg { width: 10px; height: 10px; } .sd-dora__spark { display: block; width: 100%; height: 30px; margin-top: 10px; position: relative; z-index: 1; } .sd-dora__spark path { fill: none; stroke: var(--blue-m); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sd-dora__tile--good .sd-dora__spark path { stroke: var(--sand); } .sd-dora__tile--bad .sd-dora__spark path { stroke: var(--coral); } .sd-dora__tile .sd-dora__spark { animation: sdSparkDrift 6s ease-in-out infinite; } @keyframes sdSparkDrift { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-1px); opacity: 0.85; } } .sd-dashmock { display: block; width: 100%; max-width: 680px; margin: 0 auto; background: var(--navy-deep); border: 1px solid rgba(84, 146, 182, 0.22); border-radius: 20px; box-shadow: 0 40px 80px rgba(13, 31, 46, 0.35); padding: 16px; position: relative; overflow: hidden; } .sd-dashmock__grid { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: stretch; } .sd-dashmock__side { background: rgba(17, 49, 74, 0.9); border-radius: 12px; padding: 14px 10px; display: flex; flex-direction: column; gap: 14px; align-items: center; } .sd-dashmock__side-item { width: 36px; height: 36px; border-radius: 10px; background: rgba(84, 146, 182, 0.12); display: flex; align-items: center; justify-content: center; } .sd-dashmock__side-item.is-active { background: var(--coral); } .sd-dashmock__side-item svg { width: 18px; height: 18px; color: var(--cream); } .sd-dashmock__main { display: flex; flex-direction: column; gap: 12px; } .sd-dashmock__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: rgba(17, 49, 74, 0.7); border-radius: 10px; } .sd-dashmock__header-left { display: flex; align-items: center; gap: 10px; } .sd-dashmock__pill { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); padding: 4px 10px; border-radius: 999px; background: rgba(246, 200, 147, 0.12); } .sd-dashmock__dots { display: flex; gap: 6px; } .sd-dashmock__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(84, 146, 182, 0.35); } .sd-dashmock__dot:nth-child(1) { background: var(--coral); } .sd-dashmock__chart { height: 180px; background: rgba(17, 49, 74, 0.55); border-radius: 12px; padding: 18px 16px 14px; display: flex; align-items: flex-end; gap: 8px; overflow: hidden; position: relative; } .sd-dashmock__chart::before { content: ""; position: absolute; left: 16px; right: 16px; top: 40px; bottom: 20px; background-image: linear-gradient(to top, rgba(84,146,182,0.1) 1px, transparent 1px); background-size: 100% 24px; pointer-events: none; } .sd-dashmock__bar { flex: 1; background: linear-gradient(180deg, var(--blue-m), var(--blue)); border-radius: 6px 6px 2px 2px; min-height: 6%; transform-origin: bottom; animation: sdBarGrow 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; position: relative; z-index: 1; } .sd-dashmock__bar--accent { background: linear-gradient(180deg, var(--coral), #c44b46); } .sd-dashmock__bar:nth-child(1) { animation-delay: 0s; height: 35%; } .sd-dashmock__bar:nth-child(2) { animation-delay: 0.08s; height: 48%; } .sd-dashmock__bar:nth-child(3) { animation-delay: 0.16s; height: 32%; } .sd-dashmock__bar:nth-child(4) { animation-delay: 0.24s; height: 62%; } .sd-dashmock__bar:nth-child(5) { animation-delay: 0.32s; height: 50%; } .sd-dashmock__bar:nth-child(6) { animation-delay: 0.40s; height: 74%; } .sd-dashmock__bar:nth-child(7) { animation-delay: 0.48s; height: 58%; } .sd-dashmock__bar:nth-child(8) { animation-delay: 0.56s; height: 82%; } .sd-dashmock__bar:nth-child(9) { animation-delay: 0.64s; height: 66%; } .sd-dashmock__bar:nth-child(10) { animation-delay: 0.72s; height: 92%; } @keyframes sdBarGrow { from { transform: scaleY(0.05); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } } .sd-dashmock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .sd-dashmock__kpi { padding: 12px 12px 11px; background: rgba(17, 49, 74, 0.7); border-radius: 10px; } .sd-dashmock__kpi-label { font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); margin-bottom: 4px; } .sd-dashmock__kpi-value { font-size: 16px; font-weight: 700; color: var(--cream); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } .sd-flow { width: 100%; max-width: 640px; margin: 0 auto; background: var(--navy-deep); border: 1px solid rgba(84, 146, 182, 0.22); border-radius: 16px; padding: 26px 20px; display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; gap: 6px; align-items: center; position: relative; overflow: hidden; } .sd-flow__col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .sd-flow__node { padding: 10px 12px; background: rgba(17, 49, 74, 0.7); border: 1px solid rgba(84, 146, 182, 0.22); border-radius: 10px; display: flex; align-items: center; gap: 10px; color: var(--cream); font-size: 13px; } .sd-flow__node svg { width: 18px; height: 18px; color: var(--sand); flex: 0 0 auto; } .sd-flow__node--agg { background: rgba(219, 99, 93, 0.14); border-color: rgba(219, 99, 93, 0.4); justify-content: center; text-align: center; padding: 16px 10px; } .sd-flow__node--agg svg { color: var(--coral); } .sd-flow__node--out { background: rgba(246, 200, 147, 0.12); border-color: rgba(246, 200, 147, 0.3); justify-content: center; padding: 16px 10px; } .sd-flow__node--out svg { color: var(--sand); } .sd-flow__line { position: relative; height: 2px; background: rgba(84, 146, 182, 0.25); border-radius: 2px; overflow: hidden; } .sd-flow__line::before { content: ""; position: absolute; left: -8px; top: -3px; width: 8px; height: 8px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 10px rgba(219, 99, 93, 0.7); animation: sdFlowDot 2.8s linear infinite; } .sd-flow__line:nth-child(even)::before { animation-delay: 1.4s; } @keyframes sdFlowDot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(100% + 16px)); opacity: 0; } } @media (max-width: 768px) { .sd-dora { max-width: 440px; } .sd-dora__value { font-size: 20px; } .sd-dashmock__grid { grid-template-columns: 44px 1fr; gap: 8px; } .sd-dashmock__side-item { width: 28px; height: 28px; } .sd-dashmock__side-item svg { width: 14px; height: 14px; } .sd-dashmock__chart { height: 140px; } .sd-flow { grid-template-columns: 1fr 30px 1fr 30px 1fr; padding: 18px 12px; } .sd-flow__node { font-size: 11px; padding: 8px 10px; } .sd-flow__node svg { width: 14px; height: 14px; } } @media (max-width: 480px) { .sd-dash-card { padding: 18px 18px 16px; } .sd-dash-card__value { font-size: 28px; } .sd-dora { grid-template-columns: 1fr 1fr; gap: 8px; } .sd-dora__tile { padding: 12px 12px 10px; } .sd-dora__value { font-size: 17px; } .sd-dora__spark { height: 22px; } .sd-dashmock { padding: 12px; } .sd-dashmock__grid { grid-template-columns: 1fr; } .sd-dashmock__side { flex-direction: row; justify-content: flex-start; padding: 10px; } .sd-dashmock__side-item { width: 30px; height: 30px; } .sd-dashmock__kpis { grid-template-columns: 1fr 1fr 1fr; } .sd-dashmock__kpi { padding: 8px; } .sd-dashmock__kpi-value { font-size: 13px; } .sd-flow { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px; } .sd-flow__line { height: 18px; width: 2px; margin: 0 auto; background: linear-gradient(to bottom, rgba(84,146,182,0.25), rgba(84,146,182,0.08)); } .sd-flow__line::before { left: -3px; top: 0; animation: sdFlowDotVert 2.8s linear infinite; } @keyframes sdFlowDotVert { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(calc(100% + 10px)); opacity: 0; } } } @media (prefers-reduced-motion: reduce) { .sd-dash-card__spark .dot, .sd-dora__spark, .sd-dashmock__bar, .sd-flow__line::before { animation: none !important; } }