Change settings

src/views/LiveView.vue

@@ -49,29 +49,27 @@
           </header>
 
           <div class="card3__kpis">
-            <div class="kpi">
-              <div class="kpi__label">Net value</div>
-              <div class="kpi__value">{{ fmtUSD(c.balance) }}</div>
+            <!-- Modern body: single, strong Net value row -->
+            <div class="kpi kpi--net">
+              <span class="kpi__label">Net value</span>
+              <span class="kpi__value">{{ fmtUSD(c.balance) }}</span>
             </div>
           </div>
-          <div class="card3__kpis">
-            <div class="kpi">
-              <div class="kpi__label">Profit</div>
-              <div class="pill" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">{{ signedMoney(profitOf(c)) }}</div>
-            </div>
-            <div class="kpi">
-              <div class="kpi__label">Delta profit</div>
-              <div class="pill" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
+
+          <!-- Bottom bar: Profit / Delta chips on the left, EOD on the right -->
+          <div class="card3__bottom">
+            <div class="chips">
+              <span class="pill" :class="{ pos: profitOf(c) >= 0, neg: profitOf(c) < 0 }">{{ signedMoney(profitOf(c)) }}</span>
+              <span class="pill" :class="{ pos: (c.gapUsd ?? 0) >= 0, neg: (c.gapUsd ?? 0) < 0 }">
                 <template v-if="c.kind==='agent'">
                   <template v-if="mode==='usd'">{{ signedMoney(c.gapUsd) }}</template>
                   <template v-else>{{ signedPct(c.gapPct) }}</template>
                 </template>
                 <template v-else>—</template>
-              </div>
+              </span>
             </div>
+            <footer class="card3__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</footer>
           </div>
-
-          <footer class="card3__foot">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</footer>
         </article>
       </div>
     </section>
@@ -321,26 +319,48 @@ watch(
 @media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }
 
 /* CARD v3 */
-.card3 { position: relative; display: grid; grid-template-rows: auto auto; gap: 16px; padding: 18px; min-height: 320px; margin-bottom: 60px; border: 1px solid #EEF1F6; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
+.card3 {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto auto auto; /* head, kpis, bottom */
+  gap: 14px;
+  padding: 18px;
+  min-height: 228px;
+  border-radius: 18px;
+  border: 1px solid #E8ECF3;
+  background: radial-gradient(120% 140% at 0% 0%, #FFFFFF 0%, #FBFCFE 100%);
+  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(15,23,42,.04);
+  transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
+}
+.card3:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); border-color: #D9E2F0; }
+.card3.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
+.card3.is-bh { outline: 2px dashed rgba(15,23,42,.08); background: radial-gradient(120% 140% at 0% 0%, #FFFFFF 0%, #F9FBFF 100%); }
 .card3:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
 .card3.is-winner { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
 .card3.is-bh { outline: 2px dashed rgba(15,23,42,.08); }
 
-.card3__crown { position: absolute; top: 10px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
+.card3__crown { position: absolute; top: 12px; right: 12px; font-size: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
 
 .card3__head { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; }
 .logo { width: 48px; height: 48px; border-radius: 999px; background: #F3F4F6; display: grid; place-items: center; overflow: hidden; }
 .logo img { width: 100%; height: 100%; object-fit: contain; }
 .logo__fallback { width: 60%; height: 60%; border-radius: 999px; background: #E5E7EB; }
-.head__title { font-weight: 900; color: #0F172A; line-height: 1.1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.head__subtitle { font-size: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.head__title { font-weight: 900; color: #0F172A; line-height: 1.1; font-size: clamp(18px, 1.6vw, 22px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.head__subtitle { font-size: 12px; color: #8A94A7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.card3__kpis { display: grid; grid-template-columns: 1.3fr .7fr .8fr; align-items: end; gap: 12px; }
+.card3__kpis { display: grid; grid-template-columns: 1fr; align-items: center; }
+.kpi--net { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.kpi__label { font-size: 12px; color: #6B7280; margin: 0; }
+.kpi__value { font-weight: 900; color: #0B1220; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.01em; white-space: nowrap; }
 .kpi__label { font-size: 12px; color: #6B7280; margin-bottom: 4px; }
 .kpi__value { font-weight: 900; color: #0F172A; font-size: clamp(22px, 2.2vw, 28px); white-space: nowrap; }
-.pill { padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; background: #EEF2F7; color: #0F172A; display: inline-block; }
+.pill { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; background: #F1F5FB; color: #0F172A; display: inline-block; box-shadow: inset 0 -1px 0 rgba(15,23,42,.04); }
+.pill.pos { background: #E6F7ED; color: #0E7A3A; }
+.pill.neg { background: #FBE9E9; color: #B91C1C; }
 .pill.pos { background: #DCFCE7; color: #166534; }
 .pill.neg { background: #FEE2E2; color: #B91C1C; }
 
-.card3__foot { position: absolute; bottom: 16px; right: 14px; font-size: 12px; color: #5B6476; opacity: .9; }
+.card3__foot { font-size: 12px; color: #5B6476; opacity: .9; }
+.card3__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-top: 4px; }
+.card3__bottom .chips { display: inline-flex; gap: 8px; align-items: center; }
 </style>