diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 8d6154f..df30033 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -11192,23 +11192,25 @@ p:last-child { margin-bottom: 0; } font-size: 11px; color: rgba(255,255,255,0.35); } -.rsl-screens { +/* Sparkline replaces the hard-coded screen count in the header */ +.rsl-sparkline { display: flex; - flex-direction: column; align-items: flex-end; - gap: 1px; + gap: 3px; + height: 32px; } -.rsl-screens__val { - font-size: 22px; - font-weight: 700; - font-variant-numeric: tabular-nums; - line-height: 1; +.rsl-spark__bar { + width: 5px; + background: rgba(255,255,255,0.25); + border-radius: 2px 2px 0 0; + min-height: 4px; + animation: rsl-spark-idle 3.5s ease-in-out infinite; } -.rsl-screens__lbl { - font-size: 10px; - color: rgba(255,255,255,0.4); - text-transform: uppercase; - letter-spacing: 0.5px; +.rsl-spark__bar:nth-child(odd) { animation-delay: 0.2s; } +.rsl-spark__bar:nth-child(even) { animation-delay: 0.7s; } +@keyframes rsl-spark-idle { + 0%,100% { opacity: 0.9; } + 50% { opacity: 0.45; } } .rsl-kpis { display: flex; @@ -11219,30 +11221,43 @@ p:last-child { margin-bottom: 0; } background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; - padding: 10px; + padding: 10px 8px 8px; display: flex; flex-direction: column; - gap: 3px; + gap: 6px; align-items: center; } .rsl-kpi--primary { background: rgba(var(--color-primary-rgb),0.1); border-color: rgba(var(--color-primary-rgb),0.3); } -.rsl-kpi__val { - font-size: 16px; - font-weight: 700; - font-variant-numeric: tabular-nums; - color: #fff; +/* Mini bar chart inside each KPI tile */ +.rsl-kpi__bars { + display: flex; + align-items: flex-end; + gap: 3px; + width: 100%; + height: 28px; } -.rsl-kpi--primary .rsl-kpi__val { - color: var(--color-primary); - animation: rsl-kpi-tick 6s ease-in-out infinite; +.rsl-kpi__bar { + flex: 1; + background: rgba(255,255,255,0.22); + border-radius: 2px 2px 0 0; + min-height: 4px; + transform-origin: bottom; + animation: rsl-bar-idle 4s ease-in-out infinite; } -@keyframes rsl-kpi-tick { - 0%,40% { opacity: 1; } - 50% { opacity: 0.3; } - 60%,100%{ opacity: 1; } +.rsl-kpi--primary .rsl-kpi__bar { + background: var(--color-primary); +} +.rsl-kpi__bar:nth-child(1) { animation-delay: 0s; } +.rsl-kpi__bar:nth-child(2) { animation-delay: 0.15s; } +.rsl-kpi__bar:nth-child(3) { animation-delay: 0.3s; } +.rsl-kpi__bar:nth-child(4) { animation-delay: 0.45s; } +.rsl-kpi__bar:nth-child(5) { animation-delay: 0.6s; } +@keyframes rsl-bar-idle { + 0%,100% { opacity: 1; } + 45%,55% { opacity: 0.6; } } .rsl-kpi__lbl { font-size: 9px; @@ -11290,17 +11305,7 @@ p:last-child { margin-bottom: 0; } 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); box-shadow: 0 0 8px rgba(251,191,36,0.5); } } -.rsl-tier__rate { - font-size: 11px; - font-weight: 700; - color: rgba(255,255,255,0.5); - min-width: 28px; - text-align: right; - flex-shrink: 0; -} -.rsl-tier--active .rsl-tier__rate { - color: #f59e0b; -} +/* .rsl-tier__rate removed — no specific margin percentages displayed */ .rsl-next { display: flex; flex-direction: column; diff --git a/theme/blocks/index.php b/theme/blocks/index.php index c6e4d2c..b2e2eec 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -3550,36 +3550,53 @@ function oribi_render_platform_row($a) $rs .= '
★ Gold Partner
'; $rs .= '
Member since 2023
'; $rs .= ''; - $rs .= '
248screens
'; + /* Sparkline replaces the hard-coded screen count */ + $spark = [35, 45, 38, 55, 50, 68, 80]; + $rs .= '
'; + foreach ($spark as $h) { + $rs .= '
'; + } + $rs .= '
'; $rs .= ''; - /* KPI row */ + /* KPI row — mini bar charts, no specific figures */ + $kpis = [ + ['label' => 'Margin', 'bars' => [48, 52, 58, 55, 65], 'cls' => ''], + ['label' => 'Revenue', 'bars' => [38, 52, 48, 68, 78], 'cls' => 'rsl-kpi--primary'], + ['label' => 'Clients', 'bars' => [42, 46, 54, 62, 70], 'cls' => ''], + ]; $rs .= '
'; - $rs .= '
32%
Margin
'; - $rs .= '
$2,840
This month
'; - $rs .= '
14
Clients
'; + foreach ($kpis as $k) { + $rs .= '
'; + $rs .= '
'; + foreach ($k['bars'] as $h) { + $rs .= '
'; + } + $rs .= '
'; + $rs .= '
' . $k['label'] . '
'; + $rs .= '
'; + } $rs .= '
'; - /* Tier progress bars */ + /* Tier progress bars — no percentage labels */ $rs .= '
'; $tiers = [ - ['name' => 'Silver', 'rate' => '25%', 'cls' => 'silver', 'w' => '100'], - ['name' => 'Gold ★', 'rate' => '32%', 'cls' => 'gold', 'w' => '68', 'active' => true], - ['name' => 'Platinum', 'rate' => '40%', 'cls' => 'plat', 'w' => '30'], + ['name' => 'Silver', 'cls' => 'silver', 'w' => '100'], + ['name' => 'Gold ★', 'cls' => 'gold', 'w' => '68', 'active' => true], + ['name' => 'Platinum', 'cls' => 'plat', 'w' => '30'], ]; foreach ($tiers as $t) { $act = !empty($t['active']) ? ' rsl-tier--active' : ''; $rs .= '
'; $rs .= '' . $t['name'] . ''; $rs .= '
'; - $rs .= '' . $t['rate'] . ''; $rs .= '
'; } $rs .= '
'; - /* Progress to Platinum */ + /* Progress to next tier */ $rs .= '
'; - $rs .= '116 screens to Platinum'; + $rs .= 'Progress to Platinum'; $rs .= '
'; $rs .= '
';