Handoff 04 / Glass Card System
Glass Card Anatomy
The glass card is BYLD's primary container. Five CSS properties create the frosted-glass effect on dark backgrounds.
Portfolio Value
Total across all holdings
₹24,50,000
inset 0 1px 0 rgba(255,255,255,0.04)
padding: 20px
background: rgba(255,255,255,0.03)
border: 1px solid rgba(255,255,255,0.06)
border-radius: 16px
/* Glass Card — Base */
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* The top inset shadow simulates a light edge
on glass. Must use inset — no outer shadow. */
/* Webkit prefix required for Safari */
-webkit-backdrop-filter: blur(20px);
Variants
Default
Standard container. bg 0.03, border 0.06.
Elevated
Hover state. bg 0.06, border 0.08, translateY(-2px), outer shadow.
Strong
Modal / active. bg 0.10, border 0.12.
Gold Glow
CTA / highlight. Gold tint bg, gold border, gold outer shadow.
/* Variant tokens */
--glass-bg: rgba(255,255,255, 0.03); /* default */
--glass-elevated: rgba(255,255,255, 0.06); /* hover */
--glass-bg-strong: rgba(255,255,255, 0.10); /* modal */
--glass-border: 1px solid rgba(255,255,255, 0.06);
--glass-blur: blur(20px);
Handoff 04 / Components
Status Bar, Nav & Buttons
Specifications for the three persistent UI components: iOS status bar treatment, bottom navigation, and button system.
Status Bar
/* iOS status bar */
height: 44px (safe area inset)
background: transparent
color-scheme: dark
/* Meta tag required */
<meta name="theme-color"
content="#0A0A0A">
/* Viewport */
<meta name="viewport"
content="viewport-fit=cover">
Bottom Navigation
/* Bottom nav */
.bottom-nav {
position: fixed;
bottom: 0;
height: 64px + safe-area;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(20px);
border-top: 1px solid
rgba(255,255,255,0.04);
}
/* Active tab */
.nav-item.active {
color: var(--gold);
font-weight: 600;
}
/* Tap target: 44x44px min */
aria-label: "[Tab name], tab N of 5"
role: "tablist"
Button System
Primary CTA
Secondary
Back / 44px
/* Primary CTA */
.btn-gold-cta {
height: 52px;
background: var(--gold-gradient);
border-radius: 12px;
font: 700 16px 'Montserrat';
color: #0A0A0A;
box-shadow: var(--gold-glow);
}
/* States */
:hover → filter: brightness(1.1)
:active → transform: scale(0.98)
[disabled] → opacity: 0.4
.loading → shimmer animation