/**
* ╔═══════════════════════════════════════════════════════════════════════════╗
* ║ ║
* ║ 🌊 LIQUID GLASS DESIGN SYSTEM ║
* ║ Generated by 40-Agent DeepSeek Swarm ║
* ║ Based on Apple's Liquid Glass (WWDC 2025) ║
* ║ ║
* ║ Kalshi A/B Test Dashboard ║
* ║ ║
* ╚═══════════════════════════════════════════════════════════════════════════╝
*/
/* ═══════════════════════════════════════════════════════════════════════════
Section: css-variables
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* Color Palette */
--glass-light: rgba(255, 255, 255, 0.7);
--glass-light-border: rgba(255, 255, 255, 0.3);
--glass-light-shadow: rgba(0, 0, 0, 0.1);
--glass-dark: rgba(30, 30, 40, 0.6);
--glass-dark-elevated: rgba(40, 40, 55, 0.7);
--glass-dark-border: rgba(255, 255, 255, 0.1);
--glass-dark-glow: rgba(100, 150, 255, 0.15);
--accent-blue: #60A5FA;
--accent-purple: #A78BFA;
--accent-green: #4ADE80;
--accent-red: #F87171;
--accent-yellow: #FBBF24;
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
--gradient-glow: radial-gradient(ellipse at center, var(--accent-blue) 0%, transparent 70%);
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
/* Timing & Animation */
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 500ms;
--easing-fluid: cubic-bezier(0.4, 0, 0.2, 1);
--stagger-delay: 50ms;
/* Blur Amounts */
--blur-sm: 20px;
--blur-base: 24px;
--blur-md: 32px;
--blur-lg: 40px;
/* Glass Effects */
--glass-saturate-base: 180%;
--glass-saturate-elevated: 200%;
--glass-border-radius: 20px;
--glass-shadow-base: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
--glass-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 80px var(--glass-dark-glow), inset 0 1px 0 rgba(255, 255, 255, 0.15);
--glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
/* Typography */
--font-family: -apple-system, 'SF Pro Display', sans-serif;
--font-weight-body: 400;
--font-weight-label: 500;
--font-weight-heading: 600;
--font-weight-emphasis: 700;
/* Background */
--bg-gradient: radial-gradient(ellipse at 20% 30%, rgba(96, 165, 250, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(167, 139, 250, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.05) 0%, transparent 70%), linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
/* Responsive Breakpoints */
--breakpoint-mobile: 768px;
--breakpoint-tablet: 1200px;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: glass-base
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* Color Palette */
--glass-light: rgba(255, 255, 255, 0.7);
--glass-light-border: rgba(255, 255, 255, 0.3);
--glass-light-shadow: rgba(0, 0, 0, 0.1);
--glass-dark: rgba(30, 30, 40, 0.6);
--glass-dark-elevated: rgba(40, 40, 55, 0.7);
--glass-dark-border: rgba(255, 255, 255, 0.1);
--glass-dark-glow: rgba(100, 150, 255, 0.15);
--accent-blue: #60A5FA;
--accent-purple: #A78BFA;
--accent-green: #4ADE80;
--accent-red: #F87171;
--accent-yellow: #FBBF24;
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
--gradient-glow: radial-gradient(ellipse at center, var(--accent-blue) 0%, transparent 70%);
}
.glass-panel {
background: var(--glass-dark);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--glass-dark-border);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.glass-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-glass);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.glass-elevated {
background: var(--glass-dark-elevated);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border: 1px solid var(--glass-dark-border);
border-radius: 20px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.glass-elevated::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-glass);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.glass-surface {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
}
.glass-surface::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
/* Light mode variants */
@media (prefers-color-scheme: light) {
.glass-panel {
background: var(--glass-light);
border-color: var(--glass-light-border);
box-shadow:
0 8px 32px var(--glass-light-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.glass-elevated {
background: rgba(255, 255, 255, 0.8);
border-color: var(--glass-light-border);
box-shadow:
0 16px 48px var(--glass-light-shadow),
0 0 80px rgba(96, 165, 250, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.glass-surface {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 16px var(--glass-light-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
/* Performance optimization for mobile */
@media (max-width: 768px) {
.glass-panel {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
}
.glass-elevated {
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
.glass-surface {
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
}
/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
.glass-panel,
.glass-elevated,
.glass-surface {
background: rgba(40, 40, 55, 0.95);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: animation-system
═══════════════════════════════════════════════════════════════════════════ */
/* Keyframes */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 20px rgba(100, 150, 255, 0.15); }
50% { box-shadow: 0 0 40px rgba(100, 150, 255, 0.3); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Utility Classes */
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-glow {
animation: glow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.animate-float {
animation: float 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.animate-fadeIn {
animation: fadeIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.animate-slideUp {
animation: slideUp 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.animate-scaleIn {
animation: scaleIn 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.animate-shimmer {
background: linear-gradient(
90deg,
transparent 25%,
rgba(255, 255, 255, 0.1) 50%,
transparent 75%
);
background-size: 200% 100%;
animation: shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: grid-layout
═══════════════════════════════════════════════════════════════════════════ */
/* CSS Grid and Flexbox Utility Classes for Liquid Glass Dashboard */
/* Container */
.container {
width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container {
max-width: 720px;
padding: 0 1.5rem;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
/* Grid System */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
/* Column Span Utilities */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }
/* Responsive Column Spans */
@media (max-width: 767px) {
.col-span-sm-1 { grid-column: span 1; }
.col-span-sm-2 { grid-column: span 2; }
.col-span-sm-3 { grid-column: span 3; }
.col-span-sm-4 { grid-column: span 4; }
.col-span-sm-5 { grid-column: span 5; }
.col-span-sm-6 { grid-column: span 6; }
.col-span-sm-7 { grid-column: span 7; }
.col-span-sm-8 { grid-column: span 8; }
.col-span-sm-9 { grid-column: span 9; }
.col-span-sm-10 { grid-column: span 10; }
.col-span-sm-11 { grid-column: span 11; }
.col-span-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.col-span-md-1 { grid-column: span 1; }
.col-span-md-2 { grid-column: span 2; }
.col-span-md-3 { grid-column: span 3; }
.col-span-md-4 { grid-column: span 4; }
.col-span-md-5 { grid-column: span 5; }
.col-span-md-6 { grid-column: span 6; }
.col-span-md-7 { grid-column: span 7; }
.col-span-md-8 { grid-column: span 8; }
.col-span-md-9 { grid-column: span 9; }
.col-span-md-10 { grid-column: span 10; }
.col-span-md-11 { grid-column: span 11; }
.col-span-md-12 { grid-column: span 12; }
}
@media (min-width: 1200px) {
.col-span-lg-1 { grid-column: span 1; }
.col-span-lg-2 { grid-column: span 2; }
.col-span-lg-3 { grid-column: span 3; }
.col-span-lg-4 { grid-column: span 4; }
.col-span-lg-5 { grid-column: span 5; }
.col-span-lg-6 { grid-column: span 6; }
.col-span-lg-7 { grid-column: span 7; }
.col-span-lg-8 { grid-column: span 8; }
.col-span-lg-9 { grid-column: span 9; }
.col-span-lg-10 { grid-column: span 10; }
.col-span-lg-11 { grid-column: span 11; }
.col-span-lg-12 { grid-column: span 12; }
}
/* Flexbox Utilities */
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
/* Gap Utilities */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 2rem; }
.gap-6 { gap: 3rem; }
.row-gap-1 { row-gap: 0.25rem; }
.row-gap-2 { row-gap: 0.5rem; }
.row-gap-3 { row-gap: 1rem; }
.row-gap-4 { row-gap: 1.5rem; }
.row-gap-5 { row-gap: 2rem; }
.row-gap-6 { row-gap: 3rem; }
.column-gap-1 { column-gap: 0.25rem; }
.column-gap-2 { column-gap: 0.5rem; }
.column-gap-3 { column-gap: 1rem; }
.column-gap-4 { column-gap: 1.5rem; }
.column-gap-5 { column-gap: 2rem; }
.column-gap-6 { column-gap: 3rem; }
/* Responsive Gap Adjustments */
@media (max-width: 767px) {
.gap-sm-1 { gap: 0.25rem; }
.gap-sm-2 { gap: 0.5rem; }
.gap-sm-3 { gap: 1rem; }
.gap-sm-4 { gap: 1.5rem; }
.gap-sm-5 { gap: 2rem; }
.gap-sm-6 { gap: 3rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.gap-md-1 { gap: 0.25rem; }
.gap-md-2 { gap: 0.5rem; }
.gap-md-3 { gap: 1rem; }
.gap-md-4 { gap: 1.5rem; }
.gap-md-5 { gap: 2rem; }
.gap-md-6 { gap: 3rem; }
}
@media (min-width: 1200px) {
.gap-lg-1 { gap: 0.25rem; }
.gap-lg-2 { gap: 0.5rem; }
.gap-lg-3 { gap: 1rem; }
.gap-lg-4 { gap: 1.5rem; }
.gap-lg-5 { gap: 2rem; }
.gap-lg-6 { gap: 3rem; }
}
/* Glass-specific responsive adjustments */
@media (max-width: 767px) {
.grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.flex {
flex-direction: column;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.grid {
grid-template-columns: repeat(6, 1fr);
gap: 1.25rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: responsive
═══════════════════════════════════════════════════════════════════════════ */
/* Media Query Breakpoints for Liquid Glass Design */
/* Mobile: <768px */
@media (max-width: 767px) {
.hide-mobile {
display: none !important;
}
.show-mobile {
display: block !important;
}
.show-mobile-flex {
display: flex !important;
}
.glass-panel {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-radius: 16px;
}
.glass-panel-elevated {
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
}
}
/* Tablet: 768px - 1200px */
@media (min-width: 768px) and (max-width: 1200px) {
.hide-tablet {
display: none !important;
}
.show-tablet {
display: block !important;
}
.show-tablet-flex {
display: flex !important;
}
.tablet-only {
display: block !important;
}
.glass-panel {
backdrop-filter: blur(20px) saturate(170%);
-webkit-backdrop-filter: blur(20px) saturate(170%);
}
.glass-panel-elevated {
backdrop-filter: blur(28px) saturate(190%);
-webkit-backdrop-filter: blur(28px) saturate(190%);
}
}
/* Desktop: >1200px */
@media (min-width: 1201px) {
.hide-desktop {
display: none !important;
}
.show-desktop {
display: block !important;
}
.show-desktop-flex {
display: flex !important;
}
.desktop-only {
display: block !important;
}
}
/* Utility classes for all breakpoints */
.mobile-only {
display: none !important;
}
@media (max-width: 767px) {
.mobile-only {
display: block !important;
}
.mobile-only-flex {
display: flex !important;
}
}
/* Responsive visibility helpers */
.visible-mobile {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.visible-desktop {
display: none !important;
}
@media (max-width: 767px) {
.visible-mobile {
display: block !important;
}
.visible-mobile-flex {
display: flex !important;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.visible-tablet {
display: block !important;
}
.visible-tablet-flex {
display: flex !important;
}
}
@media (min-width: 1201px) {
.visible-desktop {
display: block !important;
}
.visible-desktop-flex {
display: flex !important;
}
}
/* Touch-friendly adjustments for mobile */
@media (max-width: 767px) {
button,
.clickable,
[role="button"] {
min-height: 48px;
min-width: 48px;
}
.glass-panel {
margin: 8px;
padding: 16px;
}
}
/* Performance optimization for tablet */
@media (min-width: 768px) and (max-width: 1200px) {
.glass-panel {
will-change: transform;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: header
═══════════════════════════════════════════════════════════════════════════ */
/* Liquid Glass Dashboard Header */
.header {
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
padding: 2rem;
margin: 1.5rem;
position: relative;
overflow: hidden;
}
.header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
opacity: 0.4;
animation: subtle-glow 8s ease-in-out infinite alternate;
pointer-events: none;
}
.header h1 {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 700;
font-size: 3.5rem;
background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0 0 0.5rem 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
letter-spacing: -0.5px;
position: relative;
display: inline-block;
}
.header h1::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
rgba(96, 165, 250, 0.4) 0%,
rgba(167, 139, 250, 0.4) 50%,
transparent 100%);
border-radius: 1px;
}
.header .subtitle {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 400;
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
letter-spacing: 0.2px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
@keyframes subtle-glow {
0% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
100% {
transform: translate(20px, 10px) scale(1.05);
opacity: 0.5;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: mode-indicator
═══════════════════════════════════════════════════════════════════════════ */
/* Mode Badge - Glass Morphism Base */
.mode-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 500;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.mode-badge::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: inherit;
z-index: -1;
}
/* Live Mode - Green Color Scheme */
.mode-badge.live {
background: rgba(30, 40, 35, 0.6);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 20px rgba(74, 222, 128, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.mode-badge.live .mode-dot {
background: #4ADE80;
box-shadow:
0 0 10px #4ADE80,
0 0 20px rgba(74, 222, 128, 0.4);
}
/* Paper Mode - Yellow Color Scheme */
.mode-badge.paper {
background: rgba(40, 35, 30, 0.6);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 20px rgba(251, 191, 36, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.mode-badge.paper .mode-dot {
background: #FBBF24;
box-shadow:
0 0 10px #FBBF24,
0 0 20px rgba(251, 191, 36, 0.4);
}
/* Mode Dot with Pulsing Glow Animation */
.mode-dot {
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
animation: pulse-glow 2s ease-in-out infinite;
}
.mode-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: inherit;
opacity: 0.3;
filter: blur(4px);
animation: pulse-ring 2s ease-in-out infinite;
}
/* Pulsing Glow Animation */
@keyframes pulse-glow {
0%, 100% {
box-shadow:
0 0 10px currentColor,
0 0 20px rgba(currentColor, 0.4);
}
50% {
box-shadow:
0 0 15px currentColor,
0 0 30px rgba(currentColor, 0.6);
}
}
/* Pulsing Ring Animation */
@keyframes pulse-ring {
0% {
width: 20px;
height: 20px;
opacity: 0.3;
}
50% {
width: 24px;
height: 24px;
opacity: 0.1;
}
100% {
width: 20px;
height: 20px;
opacity: 0.3;
}
}
/* Hover State */
.mode-badge:hover {
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transform: translateY(-2px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mode-badge.live:hover {
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 40px rgba(74, 222, 128, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mode-badge.paper:hover {
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 40px rgba(251, 191, 36, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: countdown
═══════════════════════════════════════════════════════════════════════════ */
/* Countdown Timer - Glass Cubes with 3D Numbers */
.countdown-section {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding: 24px;
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 40px rgba(100, 150, 255, 0.1);
position: relative;
overflow: hidden;
}
.countdown-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
z-index: 0;
}
.countdown {
display: flex;
gap: 12px;
position: relative;
z-index: 1;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100px;
height: 120px;
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.4),
0 0 60px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.countdown-item:hover {
transform: translateY(-4px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.5),
0 0 80px rgba(100, 150, 255, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.countdown-item::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
}
.countdown-item:hover::before {
opacity: 1;
}
.countdown-value {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 700;
font-size: 3.5rem;
color: #ffffff;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.5),
0 0 20px rgba(96, 165, 250, 0.3);
position: relative;
z-index: 1;
transform-style: preserve-3d;
perspective: 500px;
}
.countdown-value::before {
content: attr(data-value);
position: absolute;
top: 2px;
left: 2px;
color: rgba(255, 255, 255, 0.2);
z-index: -1;
transform: translateZ(-1px);
filter: blur(1px);
}
.countdown-value::after {
content: attr(data-value);
position: absolute;
top: -1px;
left: -1px;
color: rgba(96, 165, 250, 0.3);
z-index: -2;
transform: translateZ(-2px);
filter: blur(2px);
}
.countdown-unit {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 500;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 1;
}
/* Subtle connecting glass bar */
.countdown::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transform: translateY(-50%);
z-index: 0;
border-radius: 1px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Pulsing glow animation */
@keyframes pulse-glow {
0%, 100% {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.4),
0 0 60px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
50% {
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
}
.countdown-item {
animation: pulse-glow 4s ease-in-out infinite;
}
/* Stagger animation delays */
.countdown-item:nth-child(1) { animation-delay: 0s; }
.countdown-item:nth-child(2) { animation-delay: 0.5s; }
.countdown-item:nth-child(3) { animation-delay: 1s; }
.countdown-item:nth-child(4) { animation-delay: 1.5s; }
/* ═══════════════════════════════════════════════════════════════════════════
Section: strategy-card-a
═══════════════════════════════════════════════════════════════════════════ */
.strategy-card.strategy-a {
position: relative;
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.strategy-card.strategy-a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #60A5FA;
border-radius: 20px 20px 0 0;
box-shadow:
0 0 20px #60A5FA,
0 0 40px rgba(96, 165, 250, 0.5);
z-index: 1;
}
.strategy-card.strategy-a:hover {
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transform: translateY(-4px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.strategy-card.strategy-a.leader::after {
content: '👑';
position: absolute;
top: -12px;
right: 16px;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #FBBF24, #F59E0B);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow:
0 4px 12px rgba(245, 158, 11, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
z-index: 2;
animation: crown-pulse 2s ease-in-out infinite;
}
@keyframes crown-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: strategy-card-b
═══════════════════════════════════════════════════════════════════════════ */
.strategy-card.strategy-b {
/* Base glass styling */
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
position: relative;
overflow: hidden;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
/* Purple-themed glass effect */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 0 1px rgba(167, 139, 250, 0.2);
/* Glowing top border */
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#A78BFA 20%,
#A78BFA 80%,
transparent 100%);
box-shadow: 0 0 12px #A78BFA, 0 0 24px rgba(167, 139, 250, 0.5);
z-index: 1;
border-radius: 20px 20px 0 0;
}
/* Inner gradient overlay */
&::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(167, 139, 250, 0.05) 0%,
rgba(167, 139, 250, 0.02) 100%);
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
}
/* Elevated glass on hover */
.strategy-card.strategy-b:hover {
background: rgba(50, 50, 65, 0.75);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transform: translateY(-4px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px rgba(167, 139, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 0 0 1px rgba(167, 139, 250, 0.3);
&::before {
height: 3px;
box-shadow: 0 0 16px #A78BFA, 0 0 32px rgba(167, 139, 250, 0.6);
}
}
/* Leader state styling */
.strategy-card.strategy-b.leader {
background: rgba(60, 50, 75, 0.8);
border-color: rgba(167, 139, 250, 0.3);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.35),
0 0 60px rgba(167, 139, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 0 30px rgba(167, 139, 250, 0.1);
&::before {
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#A78BFA 10%,
#A78BFA 90%,
transparent 100%);
box-shadow: 0 0 20px #A78BFA, 0 0 40px rgba(167, 139, 250, 0.7);
}
&::after {
background: linear-gradient(135deg,
rgba(167, 139, 250, 0.1) 0%,
rgba(167, 139, 250, 0.05) 100%);
animation: leader-pulse 3s ease-in-out infinite;
}
}
@keyframes leader-pulse {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: stat-rows
═══════════════════════════════════════════════════════════════════════════ */
/* Liquid Glass - Stats Row Styling */
.stat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
background: rgba(30, 30, 40, 0.3);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
position: relative;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Glass dividers between rows */
.stat-row + .stat-row {
margin-top: 0.75rem;
position: relative;
}
.stat-row + .stat-row::before {
content: '';
position: absolute;
top: -0.375rem;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 80%,
transparent 100%
);
backdrop-filter: blur(2px);
}
/* Subtle background on alternate rows */
.stat-row:nth-child(even) {
background: rgba(40, 40, 55, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}
/* Hover enhancement */
.stat-row:hover {
background: rgba(40, 40, 55, 0.35);
backdrop-filter: blur(20px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(200%);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.3),
0 0 40px rgba(100, 150, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
/* Stat label - muted color */
.stat-label {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: 0.875rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.01em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: color 150ms ease;
}
.stat-row:hover .stat-label {
color: rgba(255, 255, 255, 0.8);
}
/* Stat value - emphasis */
.stat-value {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: 1.125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.01em;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.7),
0 0 20px rgba(96, 165, 250, 0.3);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-row:hover .stat-value {
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.8),
0 0 30px rgba(96, 165, 250, 0.4);
}
/* Large balance numbers */
.balance-large {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.8),
0 0 40px rgba(96, 165, 250, 0.4);
letter-spacing: -0.02em;
position: relative;
}
.balance-large::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(96, 165, 250, 0.5) 20%,
rgba(167, 139, 250, 0.5) 80%,
transparent 100%
);
opacity: 0;
transition: opacity 300ms ease;
}
.stat-row:hover .balance-large::after {
opacity: 1;
}
/* Active state for interactive rows */
.stat-row:active {
transform: translateY(0);
transition-duration: 150ms;
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.stat-row {
padding: 0.875rem 1.25rem;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
.stat-label {
font-size: 0.8125rem;
}
.stat-value {
font-size: 1rem;
}
.balance-large {
font-size: 1.25rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: pnl-badges
═══════════════════════════════════════════════════════════════════════════ */
.pnl-badge {
/* Glass base styling */
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
/* Pill shape with rounded corners */
border-radius: 9999px;
padding: 0.375rem 0.75rem;
/* Glass shadow effects */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* Text styling for glass legibility */
color: white;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-family: -apple-system, sans-serif;
/* Smooth transitions */
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pnl-badge.positive {
/* Green glow effect */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 0 12px rgba(74, 222, 128, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* Subtle green tint on glass */
background: rgba(30, 30, 40, 0.6);
border-color: rgba(74, 222, 128, 0.2);
}
.pnl-badge.negative {
/* Red glow effect */
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
0 0 12px rgba(248, 113, 113, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* Subtle red tint on glass */
background: rgba(30, 30, 40, 0.6);
border-color: rgba(248, 113, 113, 0.2);
}
/* Optional hover enhancement */
.pnl-badge:hover {
backdrop-filter: blur(28px) saturate(200%);
-webkit-backdrop-filter: blur(28px) saturate(200%);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pnl-badge.positive:hover {
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.4),
0 0 16px rgba(74, 222, 128, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pnl-badge.negative:hover {
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.4),
0 0 16px rgba(248, 113, 113, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
This CSS implements:
- **Glass material** using backdrop blur and transparency
- **Pill shape** with `border-radius: 9999px` for perfect rounded corners
- **Green glow** (#4ADE80) for `.positive` badges via box-shadow
- **Red glow** (#F87171) for `.negative` badges via box-shadow
- **Pure CSS** solution with no external dependencies
- **Consistent** with the Liquid Glass design language from the spec
- **Responsive** glass effects that enhance on hover
- **Subtle color tinting** through border colors while maintaining glass transparency
/* ═══════════════════════════════════════════════════════════════════════════
Section: chart-container
═══════════════════════════════════════════════════════════════════════════ */
/* Chart Section - Glass Container */
.chart-section {
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 0 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
min-height: 400px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* Inner Chart Container */
.chart-container {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 16px;
margin: 24px;
padding: 20px;
height: calc(100% - 48px);
width: calc(100% - 48px);
position: relative;
box-shadow:
inset 0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Chart Area Dimensions */
.chart-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(96, 165, 250, 0.1) 0%, transparent 70%),
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 16px;
pointer-events: none;
}
/* Subtle Border Glow Effect */
.chart-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
box-shadow:
inset 0 0 40px rgba(96, 165, 250, 0.1),
inset 0 0 60px rgba(167, 139, 250, 0.05);
pointer-events: none;
z-index: 1;
}
/* Responsive Adjustments */
@media (max-width: 1200px) {
.chart-section {
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
max-width: 100%;
margin: 0 20px;
}
}
@media (max-width: 768px) {
.chart-section {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-radius: 16px;
margin: 0 12px;
min-height: 300px;
}
.chart-container {
margin: 16px;
padding: 12px;
width: calc(100% - 32px);
height: calc(100% - 32px);
}
}
This CSS implements:
1. **Glass Panel Effect**: Using `backdrop-filter` with blur and saturation
2. **Inner Shadow**: `inset` box-shadow for depth
3. **Border Glow**: Subtle colored glow using `::after` pseudo-element
4. **Proper Dimensions**: Responsive sizing with min-height and percentage-based widths
5. **Depth Effect**: Multiple shadow layers and gradient overlays
6. **Performance Optimization**: Reduced blur on mobile/tablet breakpoints
The design follows the dark glass palette from your specification with accent blue/purple glows, proper border treatment, and maintains the liquid glass aesthetic throughout.
/* ═══════════════════════════════════════════════════════════════════════════
Section: chart-styling
═══════════════════════════════════════════════════════════════════════════ */
/* Chart.js Liquid Glass Styling */
/* Base canvas styling */
canvas {
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-radius: 16px;
background: rgba(30, 30, 40, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Glowing data points using box-shadow */
.chartjs-render-monitor .chartjs-point {
filter: drop-shadow(0 0 6px currentColor);
}
.chartjs-render-monitor .chartjs-point-hover {
filter: drop-shadow(0 0 12px currentColor);
transform: scale(1.2);
transition: filter 300ms cubic-bezier(0.4, 0, 0.2, 1),
transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Specific color glows for data points */
.chartjs-render-monitor .chartjs-point[style*="rgb(96, 165, 250)"] {
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3),
0 0 12px 6px rgba(96, 165, 250, 0.15);
}
.chartjs-render-monitor .chartjs-point[style*="rgb(167, 139, 250)"] {
box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3),
0 0 12px 6px rgba(167, 139, 250, 0.15);
}
.chartjs-render-monitor .chartjs-point[style*="rgb(74, 222, 128)"] {
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3),
0 0 12px 6px rgba(74, 222, 128, 0.15);
}
.chartjs-render-monitor .chartjs-point[style*="rgb(248, 113, 113)"] {
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3),
0 0 12px 6px rgba(248, 113, 113, 0.15);
}
/* Gradient fill areas */
.chartjs-render-monitor .chartjs-area {
opacity: 0.6;
}
.chartjs-render-monitor .chartjs-area[style*="rgb(96, 165, 250)"] {
background: linear-gradient(
180deg,
rgba(96, 165, 250, 0.4) 0%,
rgba(96, 165, 250, 0.1) 100%
);
}
.chartjs-render-monitor .chartjs-area[style*="rgb(167, 139, 250)"] {
background: linear-gradient(
180deg,
rgba(167, 139, 250, 0.4) 0%,
rgba(167, 139, 250, 0.1) 100%
);
}
.chartjs-render-monitor .chartjs-area[style*="rgb(74, 222, 128)"] {
background: linear-gradient(
180deg,
rgba(74, 222, 128, 0.4) 0%,
rgba(74, 222, 128, 0.1) 100%
);
}
/* Glass tooltip styling */
.chartjs-tooltip {
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
background: rgba(40, 40, 55, 0.85) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 12px !important;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.35),
0 0 60px rgba(100, 150, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
padding: 12px 16px !important;
opacity: 0;
transform: translateY(8px);
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chartjs-tooltip.chartjs-tooltip-active {
opacity: 1;
transform: translateY(0);
}
.chartjs-tooltip .chartjs-tooltip-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-bottom: 8px !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.chartjs-tooltip .chartjs-tooltip-body-item {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 4px 0 !important;
}
.chartjs-tooltip .chartjs-tooltip-color {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 0 8px currentColor !important;
}
.chartjs-tooltip .chartjs-tooltip-text {
color: rgba(255, 255, 255, 0.8) !important;
font-weight: 500 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
/* Chart grid and axis lines */
.chartjs-render-monitor .chartjs-grid-line {
stroke: rgba(255, 255, 255, 0.08) !important;
stroke-width: 1px !important;
}
.chartjs-render-monitor .chartjs-grid-line-chart-area {
stroke: rgba(255, 255, 255, 0.05) !important;
}
.chartjs-render-monitor .chartjs-tick {
color: rgba(255, 255, 255, 0.6) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
/* Chart lines with subtle glow */
.chartjs-render-monitor .chartjs-line {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* Legend styling */
.chartjs-legend {
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background: rgba(30, 30, 40, 0.5) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
border-radius: 10px !important;
padding: 12px !important;
}
.chartjs-legend .chartjs-legend-item {
padding: 4px 8px !important;
border-radius: 6px !important;
transition: background-color 150ms ease !important;
}
.chartjs-legend .chartjs-legend-item:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.chartjs-legend .chartjs-legend-item-text {
color: rgba(255, 255, 255, 0.8) !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: table-header
═══════════════════════════════════════════════════════════════════════════ */
/* Glass Table Header Styles */
thead {
position: sticky;
top: 0;
z-index: 100;
}
th {
background: linear-gradient(135deg,
rgba(40, 40, 55, 0.7) 0%,
rgba(30, 30, 40, 0.6) 100%);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
padding: 1rem 1.5rem;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Optional hover enhancement */
th:hover {
background: linear-gradient(135deg,
rgba(50, 50, 65, 0.75) 0%,
rgba(40, 40, 55, 0.65) 100%);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.4),
0 0 40px rgba(100, 150, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
**Key Features Implemented:**
- **Glass Effect**: Uses `backdrop-filter` with blur and saturation
- **Transparency**: 60-70% opacity with gradient overlay
- **Uppercase Text**: `text-transform: uppercase`
- **Letter Spacing**: `letter-spacing: 0.05em` for subtle spacing
- **Subtle Bottom Border**: 1px border with 10% white opacity
- **Sticky Header**: `position: sticky` with `top: 0`
- **Glass Shadows**: Multi-layer box-shadow for depth
- **Typography**: SF Pro Display with text shadow for glass legibility
- **Smooth Transitions**: 300ms with Apple's fluid easing curve
The design follows the dark glass palette from your spec (`--glass-dark` and `--glass-dark-elevated`) and includes the recommended backdrop blur, border styling, and glass-appropriate text treatments.
/* ═══════════════════════════════════════════════════════════════════════════
Section: table-rows
═══════════════════════════════════════════════════════════════════════════ */
/* Liquid Glass Table Styles */
table {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden;
background: rgba(30, 30, 40, 0.3);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
tbody tr {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(30, 30, 40, 0.4);
}
/* Alternating glass opacity rows */
tbody tr:nth-child(even) {
background: rgba(40, 40, 55, 0.35);
}
/* Smooth hover glow effect */
tbody tr:hover {
background: rgba(40, 40, 55, 0.5);
box-shadow:
0 0 40px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
td {
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 400;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Remove border from last row */
tbody tr:last-child td {
border-bottom: none;
}
/* Enhanced hover state for individual cells */
tbody tr:hover td {
color: rgba(255, 255, 255, 1);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Subtle glass refraction effect on hover */
tbody tr:hover td:first-child {
border-left: 1px solid rgba(96, 165, 250, 0.2);
}
tbody tr:hover td:last-child {
border-right: 1px solid rgba(96, 165, 250, 0.2);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: strategy-badges
═══════════════════════════════════════════════════════════════════════════ */
.strategy-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 100px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.strategy-badge:hover {
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.35),
0 0 40px rgba(100, 150, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
.strategy-badge.original {
background: rgba(30, 30, 40, 0.6);
border-color: rgba(96, 165, 250, 0.3);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.25),
0 0 24px rgba(96, 165, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.strategy-badge.original::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
opacity: 0.6;
z-index: -1;
}
.strategy-badge.sniper {
background: rgba(30, 30, 40, 0.6);
border-color: rgba(167, 139, 250, 0.3);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.25),
0 0 24px rgba(167, 139, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.strategy-badge.sniper::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.2) 0%, transparent 70%);
opacity: 0.6;
z-index: -1;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: loading-states
═══════════════════════════════════════════════════════════════════════════ */
.loading {
position: relative;
overflow: hidden;
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
animation: shimmer 1.5s infinite ease-in-out;
z-index: 1;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.loading.skeleton {
min-height: 60px;
pointer-events: none;
user-select: none;
}
.loading.skeleton::after {
content: '';
display: block;
width: 70%;
height: 16px;
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
margin: 22px auto;
animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 0.9;
}
}
.loading.skeleton-small {
min-height: 40px;
}
.loading.skeleton-small::after {
height: 12px;
width: 50%;
margin: 14px auto;
}
.loading.skeleton-large {
min-height: 100px;
}
.loading.skeleton-large::after {
height: 20px;
width: 80%;
margin: 40px auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: error-states
═══════════════════════════════════════════════════════════════════════════ */
.error-message {
/* Glass panel base with red tint */
background: rgba(248, 113, 113, 0.15);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(248, 113, 113, 0.3), /* subtle red glow border */
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* Layout */
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
position: relative;
overflow: hidden;
}
/* Warning icon placeholder */
.error-message::before {
content: '';
width: 20px;
height: 20px;
background:
linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%),
#F87171;
border-radius: 50%;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* Inner gradient overlay for glass effect */
.error-message::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
border-radius: inherit;
pointer-events: none;
}
/* Text styling */
.error-message span {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 500;
color: #FCA5A5; /* lighter red for text */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-size: 14px;
line-height: 1.4;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: refresh-footer
═══════════════════════════════════════════════════════════════════════════ */
/* Styles for .refresh-info section and .status-dot */
.refresh-info {
/* Glass background with subtle effects */
background: rgba(30, 30, 40, 0.6); /* --glass-dark */
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1); /* --glass-dark-border */
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
/* Center alignment */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* Muted text color */
color: rgba(255, 255, 255, 0.7);
/* Typography */
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 400;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
/* Spacing */
padding: 1.5rem;
margin: 0 auto;
}
.status-dot {
/* Base dot styling */
width: 12px;
height: 12px;
background-color: #4ADE80; /* --accent-green */
border-radius: 50%;
display: inline-block;
margin-right: 8px;
/* Pulsing green animation */
animation: pulse-green 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 0 0 0 rgba(74, 222, 128, 0.7),
0 0 20px rgba(74, 222, 128, 0.3);
}
@keyframes pulse-green {
0% {
box-shadow:
0 0 0 0 rgba(74, 222, 128, 0.7),
0 0 20px rgba(74, 222, 128, 0.3);
}
70% {
box-shadow:
0 0 0 10px rgba(74, 222, 128, 0),
0 0 25px rgba(74, 222, 128, 0.5);
}
100% {
box-shadow:
0 0 0 0 rgba(74, 222, 128, 0),
0 0 20px rgba(74, 222, 128, 0.3);
}
}
/* Optional: Add subtle noise texture to glass background */
.refresh-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
border-radius: 20px;
pointer-events: none;
z-index: -1;
}
This CSS implements:
1. **.refresh-info** with subtle glass background using the specified dark glass palette, blur effects, and proper glass panel styling
2. **.status-dot** with pulsing green animation using the accent-green color and smooth easing
3. **Center alignment** through flexbox with text centering
4. **Muted text color** with appropriate opacity
5. **Pure CSS only** - no JavaScript or markdown
6. **Optional noise texture** for added glass realism (commented out but available)
The design follows the Liquid Glass principles from the specification, including proper backdrop filters, border styling, shadows, and animation timing.
/* ═══════════════════════════════════════════════════════════════════════════
Section: blur-effects
═══════════════════════════════════════════════════════════════════════════ */
.blur-none {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.blur-sm {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.blur-md {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.blur-lg {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.blur-xl {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: gradients
═══════════════════════════════════════════════════════════════════════════ */
/* Gradient Utility Classes for Liquid Glass Design */
.gradient-glass {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.gradient-glow-blue {
background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.8) 0%, rgba(96, 165, 250, 0.2) 50%, transparent 70%);
box-shadow:
0 0 60px rgba(96, 165, 250, 0.4),
0 0 120px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.gradient-glow-purple {
background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.8) 0%, rgba(167, 139, 250, 0.2) 50%, transparent 70%);
box-shadow:
0 0 60px rgba(167, 139, 250, 0.4),
0 0 120px rgba(167, 139, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.gradient-mesh {
background:
radial-gradient(ellipse at 20% 30%, rgba(96, 165, 250, 0.3) 0%, transparent 40%),
radial-gradient(ellipse at 80% 70%, rgba(167, 139, 250, 0.3) 0%, transparent 40%),
radial-gradient(ellipse at 50% 20%, rgba(74, 222, 128, 0.2) 0%, transparent 40%),
radial-gradient(ellipse at 30% 80%, rgba(248, 113, 113, 0.2) 0%, transparent 40%),
radial-gradient(ellipse at 70% 40%, rgba(251, 191, 36, 0.2) 0%, transparent 40%),
linear-gradient(135deg, rgba(40, 40, 55, 0.7) 0%, rgba(30, 30, 40, 0.6) 100%);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.gradient-radial {
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 80%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: shadows
═══════════════════════════════════════════════════════════════════════════ */
/* Shadow utility classes for Liquid Glass design system */
.shadow-glass {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.shadow-glow {
box-shadow:
0 0 20px rgba(100, 150, 255, 0.3),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-glow-blue {
box-shadow:
0 0 20px rgba(96, 165, 250, 0.4),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-glow-purple {
box-shadow:
0 0 20px rgba(167, 139, 250, 0.4),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-glow-green {
box-shadow:
0 0 20px rgba(74, 222, 128, 0.4),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-glow-red {
box-shadow:
0 0 20px rgba(248, 113, 113, 0.4),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-glow-yellow {
box-shadow:
0 0 20px rgba(251, 191, 36, 0.4),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.shadow-inset {
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.shadow-xl {
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 80px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.shadow-none {
box-shadow: none;
}
/* Interactive states */
.hover\:shadow-glow:hover {
box-shadow:
0 0 30px rgba(100, 150, 255, 0.4),
0 12px 32px rgba(0, 0, 0, 0.4);
}
.hover\:shadow-xl:hover {
box-shadow:
0 24px 72px rgba(0, 0, 0, 0.5),
0 0 100px rgba(100, 150, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Text shadows for glass typography */
.text-shadow-glass {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Responsive adjustments */
@media (max-width: 1199px) {
.shadow-xl {
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.35),
0 0 60px rgba(100, 150, 255, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
}
@media (max-width: 767px) {
.shadow-glass {
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.shadow-xl {
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.3),
0 0 40px rgba(100, 150, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: glow-effects
═══════════════════════════════════════════════════════════════════════════ */
/* Accent Glow Utilities */
.glow-blue {
box-shadow:
0 0 20px rgba(96, 165, 250, 0.4),
0 0 40px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glow-purple {
box-shadow:
0 0 20px rgba(167, 139, 250, 0.4),
0 0 40px rgba(167, 139, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glow-green {
box-shadow:
0 0 20px rgba(74, 222, 128, 0.4),
0 0 40px rgba(74, 222, 128, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glow-red {
box-shadow:
0 0 20px rgba(248, 113, 113, 0.4),
0 0 40px rgba(248, 113, 113, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.glow-yellow {
box-shadow:
0 0 20px rgba(251, 191, 36, 0.4),
0 0 40px rgba(251, 191, 36, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Animated Glow Keyframes */
@keyframes glow-pulse-blue {
0%, 100% {
box-shadow:
0 0 15px rgba(96, 165, 250, 0.3),
0 0 30px rgba(96, 165, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow:
0 0 25px rgba(96, 165, 250, 0.5),
0 0 50px rgba(96, 165, 250, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
}
@keyframes glow-pulse-green {
0%, 100% {
box-shadow:
0 0 15px rgba(74, 222, 128, 0.3),
0 0 30px rgba(74, 222, 128, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow:
0 0 25px rgba(74, 222, 128, 0.5),
0 0 50px rgba(74, 222, 128, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
}
/* Animated Glow Classes */
.glow-pulse-blue {
animation: glow-pulse-blue 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.glow-pulse-green {
animation: glow-pulse-green 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: borders
═══════════════════════════════════════════════════════════════════════════ */
/* Glass Border Utilities */
/* Subtle white glass border */
.border-glass {
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
background: rgba(30, 30, 40, 0.6);
}
/* Blue glow border */
.border-glow-blue {
border: 1px solid rgba(96, 165, 250, 0.3);
border-radius: 20px;
box-shadow:
0 0 20px rgba(96, 165, 250, 0.3),
0 0 40px rgba(96, 165, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
background: rgba(30, 30, 40, 0.6);
}
/* Purple glow border */
.border-glow-purple {
border: 1px solid rgba(167, 139, 250, 0.3);
border-radius: 20px;
box-shadow:
0 0 20px rgba(167, 139, 250, 0.3),
0 0 40px rgba(167, 139, 250, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
background: rgba(30, 30, 40, 0.6);
}
/* Gradient border using background-clip trick */
.border-gradient {
position: relative;
border-radius: 20px;
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
.border-gradient::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #60A5FA, #A78BFA, #4ADE80);
border-radius: 22px;
z-index: -1;
padding: 2px;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
/* Hover states for interactive elements */
.border-glass:hover,
.border-glow-blue:hover,
.border-glow-purple:hover,
.border-gradient:hover {
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.border-glow-blue:hover {
box-shadow:
0 0 30px rgba(96, 165, 250, 0.4),
0 0 60px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.border-glow-purple:hover {
box-shadow:
0 0 30px rgba(167, 139, 250, 0.4),
0 0 60px rgba(167, 139, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: bg-patterns
═══════════════════════════════════════════════════════════════════════════ */
/* Subtle background patterns for Liquid Glass design */
/* Grain texture via SVG data URI */
.bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* Fine grid lines */
.bg-grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
/* Dot pattern */
.bg-dots {
background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 24px 24px;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: dark-palette
═══════════════════════════════════════════════════════════════════════════ */
/* Liquid Glass Dashboard - Dark Mode Color Scheme */
:root {
/* Base Background Colors */
--bg-primary: #0a0a0f;
--bg-secondary: #1a1a2e;
--bg-tertiary: #252540;
--bg-elevated: rgba(40, 40, 55, 0.9);
/* Glass Material Layers */
--glass-base: rgba(30, 30, 40, 0.6);
--glass-elevated: rgba(40, 40, 55, 0.7);
--glass-highlight: rgba(50, 50, 70, 0.8);
--glass-overlay: rgba(20, 20, 30, 0.85);
/* Glass Borders & Edges */
--glass-border: rgba(255, 255, 255, 0.1);
--glass-border-highlight: rgba(255, 255, 255, 0.15);
--glass-border-accent: rgba(96, 165, 250, 0.3);
--glass-border-purple: rgba(167, 139, 250, 0.3);
/* Text Colors */
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-tertiary: rgba(255, 255, 255, 0.5);
--text-disabled: rgba(255, 255, 255, 0.3);
--text-inverse: rgba(10, 10, 15, 0.95);
/* Accent Colors - Blue/Purple Spectrum */
--accent-primary: #60A5FA;
--accent-primary-light: rgba(96, 165, 250, 0.2);
--accent-primary-glow: rgba(96, 165, 250, 0.15);
--accent-secondary: #A78BFA;
--accent-secondary-light: rgba(167, 139, 250, 0.2);
--accent-secondary-glow: rgba(167, 139, 250, 0.15);
/* Status & Semantic Colors */
--accent-success: #4ADE80;
--accent-success-light: rgba(74, 222, 128, 0.2);
--accent-success-glow: rgba(74, 222, 128, 0.15);
--accent-warning: #FBBF24;
--accent-warning-light: rgba(251, 191, 36, 0.2);
--accent-warning-glow: rgba(251, 191, 36, 0.15);
--accent-error: #F87171;
--accent-error-light: rgba(248, 113, 113, 0.2);
--accent-error-glow: rgba(248, 113, 113, 0.15);
--accent-info: #38BDF8;
--accent-info-light: rgba(56, 189, 248, 0.2);
--accent-info-glow: rgba(56, 189, 248, 0.15);
/* Interactive States */
--state-hover: rgba(255, 255, 255, 0.05);
--state-active: rgba(255, 255, 255, 0.1);
--state-focus: rgba(96, 165, 250, 0.15);
--state-selected: rgba(96, 165, 250, 0.25);
/* Shadow & Glow Effects */
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.4);
--shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.1);
--shadow-inner-elevated: inset 0 1px 0 rgba(255, 255, 255, 0.15);
--glow-primary: 0 0 80px rgba(100, 150, 255, 0.15);
--glow-secondary: 0 0 40px rgba(167, 139, 250, 0.15);
--glow-success: 0 0 40px rgba(74, 222, 128, 0.15);
/* Gradients */
--gradient-bg: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
--gradient-text: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
/* Chart & Data Visualization */
--chart-grid: rgba(255, 255, 255, 0.1);
--chart-line-primary: var(--accent-primary);
--chart-line-secondary: var(--accent-secondary);
--chart-area-primary: rgba(96, 165, 250, 0.1);
--chart-area-secondary: rgba(167, 139, 250, 0.1);
--chart-point: rgba(255, 255, 255, 0.9);
--chart-point-glow: rgba(96, 165, 250, 0.3);
/* Table Specific */
--table-header: rgba(40, 40, 55, 0.8);
--table-row-even: rgba(255, 255, 255, 0.02);
--table-row-odd: rgba(255, 255, 255, 0.04);
--table-row-hover: rgba(96, 165, 250, 0.1);
--table-border: rgba(255, 255, 255, 0.05);
/* Form Elements */
--input-bg: rgba(30, 30, 40, 0.5);
--input-border: rgba(255, 255, 255, 0.1);
--input-border-focus: var(--accent-primary);
--input-placeholder: rgba(255, 255, 255, 0.3);
--input-text: var(--text-primary);
/* Badge & Pill */
--badge-bg: rgba(96, 165, 250, 0.15);
--badge-text: var(--accent-primary);
--badge-border: rgba(96, 165, 250, 0.3);
--badge-success: rgba(74, 222, 128, 0.15);
--badge-warning: rgba(251, 191, 36, 0.15);
--badge-error: rgba(248, 113, 113, 0.15);
/* Divider Lines */
--divider-primary: rgba(255, 255, 255, 0.1);
--divider-secondary: rgba(255, 255, 255, 0.05);
--divider-accent: rgba(96, 165, 250, 0.2);
/* Overlay & Modal */
--overlay-bg: rgba(10, 10, 15, 0.85);
--modal-bg: var(--glass-overlay);
--modal-backdrop: rgba(0, 0, 0, 0.5);
/* Scrollbar */
--scrollbar-track: rgba(30, 30, 40, 0.3);
--scrollbar-thumb: rgba(96, 165, 250, 0.4);
--scrollbar-thumb-hover: rgba(96, 165, 250, 0.6);
/* Animation & Transition */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
/* Depth & Z-index References */
--z-base: 1;
--z-elevated: 10;
--z-sticky: 100;
--z-dropdown: 200;
--z-modal: 300;
--z-popover: 400;
--z-tooltip: 500;
--z-toast: 600;
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: light-palette
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
:root {
/* Light glass color palette */
--glass-light: rgba(255, 255, 255, 0.85);
--glass-light-border: rgba(255, 255, 255, 0.4);
--glass-light-shadow: rgba(0, 0, 0, 0.08);
--glass-light-glow: rgba(100, 150, 255, 0.08);
/* Override dark glass variables for light mode */
--glass-dark: var(--glass-light);
--glass-dark-elevated: rgba(255, 255, 255, 0.9);
--glass-dark-border: var(--glass-light-border);
--glass-dark-glow: var(--glass-light-glow);
/* Adjust gradients for light background */
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
}
body {
background:
radial-gradient(ellipse at 20% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.03) 0%, transparent 70%),
linear-gradient(180deg, #f5f7fa 0%, #eef2f7 50%, #f5f7fa 100%);
background-attachment: fixed;
}
.glass-panel {
background: var(--glass-light);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--glass-light-border);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.glass-panel-elevated {
background: var(--glass-dark-elevated);
backdrop-filter: blur(28px) saturate(180%);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.12),
0 0 60px var(--glass-light-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Improve text legibility on light glass */
h1, h2, h3, h4, h5, h6,
.card-title, .stat-value, .timer-number {
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
/* Adjust table rows for better contrast */
.trade-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.3);
}
.trade-table tr:hover {
background: rgba(255, 255, 255, 0.5);
}
/* Light mode badge adjustments */
.badge-pill {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.4);
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: hover-states
═══════════════════════════════════════════════════════════════════════════ */
/* Hover State Utilities for Liquid Glass Design */
.hover-lift {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.hover-glow {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-glow:hover {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 120px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hover-scale {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:hover {
transform: scale(1.02);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: focus-states
═══════════════════════════════════════════════════════════════════════════ */
/* Focus & Active State Styles - Liquid Glass Design */
/* Base focus-visible utility */
:focus-visible {
outline: none;
}
/* .focus-ring - Visible focus indicator (WCAG compliant) */
.focus-ring,
:focus-visible.focus-ring {
outline: 2px solid var(--accent-blue);
outline-offset: 3px;
box-shadow:
0 0 0 4px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.focus-ring:active,
:active.focus-ring {
outline-width: 3px;
outline-offset: 2px;
box-shadow:
0 0 0 6px rgba(96, 165, 250, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* .focus-glow - Subtle glass glow effect */
.focus-glow,
:focus-visible.focus-glow {
position: relative;
outline: none;
}
.focus-glow::after,
:focus-visible.focus-glow::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: inherit;
background: var(--gradient-glow);
opacity: 0;
z-index: -1;
transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.focus-glow:focus-visible::after,
:focus-visible.focus-glow::after {
opacity: 0.6;
animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.focus-glow:active::after,
:active.focus-glow::after {
opacity: 0.8;
animation: none;
}
@keyframes pulse-glow {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.02);
}
}
/* Focus utilities for specific components */
.glass-panel:focus-visible,
.glass-panel-elevated:focus-visible {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 3px var(--accent-blue),
0 0 20px rgba(96, 165, 250, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border-color: rgba(96, 165, 250, 0.5);
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Interactive elements focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.focus-ring,
:focus-visible.focus-ring {
outline: 3px solid var(--accent-blue);
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--accent-blue);
outline-offset: 1px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.8);
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.focus-ring,
:focus-visible.focus-ring,
.focus-glow::after,
:focus-visible.focus-glow::after,
.glass-panel:focus-visible,
.glass-panel-elevated:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.focus-glow:focus-visible::after,
:focus-visible.focus-glow::after {
animation: none;
opacity: 0.6;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.focus-ring:focus-visible,
:focus-visible.focus-ring {
outline-offset: 4px;
outline-width: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline-offset: 3px;
outline-width: 3px;
}
}
/* Accessibility: Ensure focus indicators meet WCAG 2.1 AA contrast */
.focus-ring,
:focus-visible.focus-ring,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline-color: var(--accent-blue); /* #60A5FA has 4.5:1 contrast on dark backgrounds */
}
/* Focus indicator for disabled elements */
[disabled]:focus-visible {
outline: 2px solid rgba(96, 165, 250, 0.4);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
}
/* Custom focus for specific accent colors */
.focus-ring-accent-purple:focus-visible {
outline-color: var(--accent-purple);
box-shadow:
0 0 0 4px rgba(167, 139, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.focus-ring-accent-green:focus-visible {
outline-color: var(--accent-green);
box-shadow:
0 0 0 4px rgba(74, 222, 128, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.focus-ring-accent-red:focus-visible {
outline-color: var(--accent-red);
box-shadow:
0 0 0 4px rgba(248, 113, 113, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.focus-ring-accent-yellow:focus-visible {
outline-color: var(--accent-yellow);
box-shadow:
0 0 0 4px rgba(251, 191, 36, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: scroll-animations
═══════════════════════════════════════════════════════════════════════════ */
/* Scroll-triggered animations for Liquid Glass design */
/* Use with IntersectionObserver to add/remove .visible class */
/* Base reveal class - hidden by default */
.scroll-reveal {
opacity: 0;
visibility: hidden;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
visibility 500ms cubic-bezier(0.4, 0, 0.2, 1),
transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Visible state - triggered by IntersectionObserver */
.scroll-reveal.visible {
opacity: 1;
visibility: visible;
transform: none !important;
}
/* Fade up animation */
.scroll-fade-up {
transform: translateY(30px);
}
/* Fade down animation */
.scroll-fade-down {
transform: translateY(-30px);
}
/* Fade left animation */
.scroll-fade-left {
transform: translateX(30px);
}
/* Fade right animation */
.scroll-fade-right {
transform: translateX(-30px);
}
/* Scale up animation */
.scroll-scale-up {
transform: scale(0.9);
}
.scroll-scale-up.visible {
transform: scale(1);
}
/* Scale down animation */
.scroll-scale-down {
transform: scale(1.1);
}
.scroll-scale-down.visible {
transform: scale(1);
}
/* Blur reveal animation */
.scroll-blur {
filter: blur(10px);
opacity: 0;
}
.scroll-blur.visible {
filter: blur(0);
opacity: 1;
}
/* Glass-specific animations */
@keyframes glass-glow-reveal {
0% {
box-shadow:
0 0 0 rgba(0, 0, 0, 0),
0 0 0 var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0);
backdrop-filter: blur(0px) saturate(100%);
-webkit-backdrop-filter: blur(0px) saturate(100%);
}
100% {
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 40px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
}
@keyframes glass-elevated-reveal {
0% {
box-shadow:
0 0 0 rgba(0, 0, 0, 0),
0 0 0 var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0);
backdrop-filter: blur(0px) saturate(100%);
-webkit-backdrop-filter: blur(0px) saturate(100%);
transform: translateY(20px);
}
100% {
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
0 0 80px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transform: translateY(0);
}
}
/* Glass panel reveal animations */
.glass-reveal {
opacity: 0;
animation-fill-mode: both;
}
.glass-reveal.visible {
animation: glass-glow-reveal 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 1;
}
.glass-elevated-reveal {
opacity: 0;
animation-fill-mode: both;
}
.glass-elevated-reveal.visible {
animation: glass-elevated-reveal 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
opacity: 1;
}
/* Stagger delay classes for sequential animations */
.stagger-1 { transition-delay: 50ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 150ms; }
.stagger-4 { transition-delay: 200ms; }
.stagger-5 { transition-delay: 250ms; }
.stagger-6 { transition-delay: 300ms; }
/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
.scroll-reveal,
.scroll-reveal.visible,
.glass-reveal,
.glass-elevated-reveal {
transition: opacity 300ms ease !important;
animation: none !important;
transform: none !important;
filter: none !important;
}
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.scroll-fade-up,
.scroll-fade-down {
transform: translateY(20px);
}
.scroll-fade-left,
.scroll-fade-right {
transform: translateX(20px);
}
}
@media (max-width: 768px) {
.scroll-fade-up,
.scroll-fade-down {
transform: translateY(15px);
}
.scroll-fade-left,
.scroll-fade-right {
transform: translateX(15px);
}
/* Reduce blur for mobile performance */
@keyframes glass-glow-reveal {
100% {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}
}
@keyframes glass-elevated-reveal {
100% {
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
}
}
}
**Usage with IntersectionObserver:**
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.scroll-reveal').forEach(el => observer.observe(el));
**HTML Example:**
/* ═══════════════════════════════════════════════════════════════════════════
Section: entry-animations
═══════════════════════════════════════════════════════════════════════════ */
/* Staggered Page Load Animations */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-load {
opacity: 0;
animation: fade-in-up 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
/* ═══════════════════════════════════════════════════════════════════════════
Section: number-transitions
═══════════════════════════════════════════════════════════════════════════ */
.number-roll {
display: inline-block;
position: relative;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
overflow: hidden;
height: 1.2em;
vertical-align: top;
}
.number-roll::before {
content: attr(data-prev);
position: absolute;
top: 0;
left: 0;
}
.number-roll::after {
content: attr(data-current);
position: absolute;
top: 100%;
left: 0;
animation: numberRollIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.number-roll.rolling::before {
animation: numberRollOut 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes numberRollOut {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
@keyframes numberRollIn {
0% {
transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(-100%);
opacity: 1;
}
}
.number-fade {
display: inline-block;
position: relative;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
overflow: hidden;
height: 1.2em;
vertical-align: top;
}
.number-fade::before {
content: attr(data-prev);
position: absolute;
top: 0;
left: 0;
}
.number-fade::after {
content: attr(data-current);
position: absolute;
top: 0;
left: 0;
opacity: 0;
animation: numberFadeIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.number-fade.fading::before {
animation: numberFadeOut 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes numberFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes numberFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tabular-nums {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: chart-animations
═══════════════════════════════════════════════════════════════════════════ */
/* Chart Line Drawing Animation */
.chart-line-draw {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
/* Chart Point Pop Animation */
.chart-point-pop {
transform: scale(0);
opacity: 0;
animation: popPoint 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes popPoint {
0% {
transform: scale(0);
opacity: 0;
}
70% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Chart Fade In Animation */
.chart-fade-in {
opacity: 0;
animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Optional: Stagger animations for multiple elements */
.chart-line-draw:nth-child(2) { animation-delay: 0.1s; }
.chart-line-draw:nth-child(3) { animation-delay: 0.2s; }
.chart-point-pop:nth-child(2) { animation-delay: 0.15s; }
.chart-point-pop:nth-child(3) { animation-delay: 0.3s; }
.chart-fade-in:nth-child(2) { animation-delay: 0.2s; }
.chart-fade-in:nth-child(3) { animation-delay: 0.4s; }
/* ═══════════════════════════════════════════════════════════════════════════
Section: table-animations
═══════════════════════════════════════════════════════════════════════════ */
/* Row Entrance Animations - Liquid Glass Design */
.row-slide-in {
animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Staggered delays for nth-child rows */
.row-slide-in:nth-child(1) { animation-delay: 0.05s; }
.row-slide-in:nth-child(2) { animation-delay: 0.1s; }
.row-slide-in:nth-child(3) { animation-delay: 0.15s; }
.row-slide-in:nth-child(4) { animation-delay: 0.2s; }
.row-slide-in:nth-child(5) { animation-delay: 0.25s; }
.row-slide-in:nth-child(6) { animation-delay: 0.3s; }
.row-slide-in:nth-child(7) { animation-delay: 0.35s; }
.row-slide-in:nth-child(8) { animation-delay: 0.4s; }
.row-slide-in:nth-child(9) { animation-delay: 0.45s; }
.row-slide-in:nth-child(10) { animation-delay: 0.5s; }
/* Slide-in animation with glass effect */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-30px);
backdrop-filter: blur(0px) saturate(100%);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
to {
opacity: 1;
transform: translateX(0);
backdrop-filter: blur(24px) saturate(180%);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* Glass row styling */
.glass-row {
background: rgba(30, 30, 40, 0.6);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
margin: 8px 0;
padding: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
/* Smooth hover transitions with glass effects */
.glass-row:hover {
background: rgba(40, 40, 55, 0.7);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
transform: translateY(-2px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 40px rgba(100, 150, 255, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(96, 165, 250, 0.3);
}
/* Active state for interactive rows */
.glass-row:active {
transition-duration: 0.15s;
transform: translateY(0);
background: rgba(40, 40, 55, 0.8);
}
/* Row content styling with glass text effects */
.row-content {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
font-weight: 400;
display: flex;
align-items: center;
gap: 16px;
}
/* Row status indicators with glass effect */
.row-status {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 8px;
padding: 4px 12px;
font-size: 0.875rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.15s ease;
}
.glass-row:hover .row-status {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.1);
}
/* Alternate row styling for table-like structures */
.glass-row:nth-child(even) {
background: rgba(35, 35, 45, 0.5);
}
.glass-row:nth-child(even):hover {
background: rgba(45, 45, 60, 0.6);
}
/* Row selection state */
.glass-row.selected {
background: rgba(96, 165, 250, 0.2);
border-color: rgba(96, 165, 250, 0.4);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 60px rgba(96, 165, 250, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Row focus state for accessibility */
.glass-row:focus-visible {
outline: 2px solid rgba(96, 165, 250, 0.6);
outline-offset: 2px;
}
/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
.row-slide-in {
animation: none;
opacity: 1;
transform: none;
}
.glass-row {
transition: none;
}
}
/* Tablet optimization */
@media (max-width: 1200px) {
.glass-row {
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
}
.glass-row:hover {
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
}
}
/* Mobile optimization */
@media (max-width: 768px) {
.glass-row {
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
margin: 6px 0;
padding: 12px;
min-height: 48px;
}
.row-slide-in {
animation-duration: 0.4s;
}
/* Reduce staggered delays on mobile */
.row-slide-in:nth-child(n) {
animation-delay: 0.05s;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: depth-layers
═══════════════════════════════════════════════════════════════════════════ */
/* Multi-layer glass depth system */
:root {
/* Z-index layers */
--z-base: 1;
--z-elevated: 10;
--z-overlay: 100;
--z-modal: 1000;
/* Glass properties */
--glass-dark: rgba(30, 30, 40, 0.6);
--glass-dark-elevated: rgba(40, 40, 55, 0.7);
--glass-dark-border: rgba(255, 255, 255, 0.1);
--glass-dark-glow: rgba(100, 150, 255, 0.15);
--glass-light-shadow: rgba(0, 0, 0, 0.1);
}
/* Base glass layer - foundation elements */
.z-base {
z-index: var(--z-base);
background: var(--glass-dark);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--glass-dark-border);
border-radius: 16px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Elevated glass layer - interactive cards, panels */
.z-elevated {
z-index: var(--z-elevated);
background: var(--glass-dark-elevated);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--glass-dark-border);
border-radius: 18px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 40px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Overlay glass layer - tooltips, dropdowns, floating elements */
.z-overlay {
z-index: var(--z-overlay);
background: rgba(45, 45, 60, 0.75);
backdrop-filter: blur(36px) saturate(200%);
-webkit-backdrop-filter: blur(36px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.4),
0 0 60px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Modal glass layer - dialogs, modals, alerts */
.z-modal {
z-index: var(--z-modal);
background: rgba(50, 50, 70, 0.8);
backdrop-filter: blur(40px) saturate(220%);
-webkit-backdrop-filter: blur(40px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
box-shadow:
0 20px 64px rgba(0, 0, 0, 0.5),
0 0 80px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Animation for layer transitions */
.z-base, .z-elevated, .z-overlay, .z-modal {
transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hover states with appropriate depth increases */
.z-base:hover {
backdrop-filter: blur(24px) saturate(180%);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.z-elevated:hover {
backdrop-filter: blur(32px) saturate(200%);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.35),
0 0 60px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.z-overlay:hover {
backdrop-filter: blur(40px) saturate(220%);
box-shadow:
0 16px 56px rgba(0, 0, 0, 0.45),
0 0 80px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Active/focus states */
.z-base:active, .z-base:focus {
backdrop-filter: blur(20px) saturate(200%);
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.z-elevated:active, .z-elevated:focus {
backdrop-filter: blur(28px) saturate(220%);
box-shadow:
0 4px 24px rgba(0, 0, 0, 0.35),
0 0 30px var(--glass-dark-glow),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: dynamic-bg
═══════════════════════════════════════════════════════════════════════════ */
body {
position: relative;
overflow: hidden;
margin: 0;
min-height: 100vh;
}
body::before,
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
body::before {
background:
radial-gradient(ellipse at 20% 30%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.05) 0%, transparent 70%),
linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
background-attachment: fixed;
}
body::after {
background:
radial-gradient(circle at 20% 30%, rgba(96, 165, 250, 0.2) 0%, transparent 60%),
radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.2) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.1) 0%, transparent 70%);
filter: blur(60px);
animation: float 25s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.6;
}
25% {
transform: translate(2%, 1.5%) scale(1.05);
opacity: 0.7;
}
50% {
transform: translate(-1.5%, 3%) scale(0.95);
opacity: 0.5;
}
75% {
transform: translate(3%, -1%) scale(1.03);
opacity: 0.65;
}
}
This CSS creates three large blurred gradient orbs (blue, purple, green) that slowly drift across the background over a 25-second cycle. The animation uses subtle translation, scaling, and opacity changes for a natural floating effect. The orbs are applied via `body::after` with a high blur radius (60px) to create the soft glass-like appearance, while `body::before` provides the base gradient background. The animation timing is smooth (`ease-in-out`) and infinite, with keyframes at 25%, 50%, and 75% to create organic drifting motion.
/* ═══════════════════════════════════════════════════════════════════════════
Section: particles
═══════════════════════════════════════════════════════════════════════════ */
.has-particles {
position: relative;
overflow: hidden;
}
.has-particles::before,
.has-particles::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.has-particles::before {
background-image:
radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.12) 0.5px, transparent 1px),
radial-gradient(circle at 30% 50%, rgba(96, 165, 250, 0.1) 0.5px, transparent 1px),
radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.08) 0.5px, transparent 1px),
radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.09) 0.5px, transparent 1px),
radial-gradient(circle at 45% 65%, rgba(74, 222, 128, 0.06) 0.5px, transparent 1px),
radial-gradient(circle at 25% 90%, rgba(255, 255, 255, 0.11) 0.5px, transparent 1px),
radial-gradient(circle at 90% 40%, rgba(96, 165, 250, 0.07) 0.5px, transparent 1px),
radial-gradient(circle at 60% 10%, rgba(167, 139, 250, 0.09) 0.5px, transparent 1px);
background-size: 200px 200px, 180px 180px, 220px 220px, 190px 190px, 210px 210px, 200px 200px, 180px 180px, 195px 195px;
animation: floatParticles 25s infinite linear;
}
.has-particles::after {
background-image:
radial-gradient(circle at 5% 75%, rgba(255, 255, 255, 0.08) 0.5px, transparent 1px),
radial-gradient(circle at 95% 25%, rgba(96, 165, 250, 0.06) 0.5px, transparent 1px),
radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.07) 0.5px, transparent 1px),
radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.1) 0.5px, transparent 1px),
radial-gradient(circle at 20% 30%, rgba(74, 222, 128, 0.05) 0.5px, transparent 1px),
radial-gradient(circle at 65% 85%, rgba(96, 165, 250, 0.08) 0.5px, transparent 1px),
radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.09) 0.5px, transparent 1px),
radial-gradient(circle at 75% 45%, rgba(167, 139, 250, 0.06) 0.5px, transparent 1px);
background-size: 210px 210px, 190px 190px, 200px 200px, 185px 185px, 215px 215px, 195px 195px, 205px 205px, 180px 180px;
animation: floatParticlesReverse 30s infinite linear;
}
@keyframes floatParticles {
0% {
background-position: 0px 0px, 50px 100px, 100px 50px, 150px 200px, 200px 150px, 250px 50px, 300px 100px, 350px 200px;
}
100% {
background-position: 500px 250px, 550px 350px, 600px 300px, 650px 450px, 700px 400px, 750px 300px, 800px 350px, 850px 450px;
}
}
@keyframes floatParticlesReverse {
0% {
background-position: 500px 250px, 550px 350px, 600px 300px, 650px 450px, 700px 400px, 750px 300px, 800px 350px, 850px 450px;
}
100% {
background-position: 0px 0px, 50px 100px, 100px 50px, 150px 200px, 200px 150px, 250px 50px, 300px 100px, 350px 200px;
}
}
/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
.has-particles::before,
.has-particles::after {
animation: none;
}
}
This CSS-only solution creates subtle sparkle/particle effects using:
- Multiple layered radial gradients as tiny gradient dots (0.5px size)
- Two pseudo-elements (::before and ::after) with different particle patterns
- Slow float animations (25s and 30s cycles) for natural drifting movement
- Uses the color palette from your design spec (accent-blue, accent-purple, accent-green with white variations)
- Respects reduced motion preferences
- Maintains glass aesthetic with very low opacity particles (0.05-0.12 range)
- All particles are purely decorative and don't interfere with interaction
/* ═══════════════════════════════════════════════════════════════════════════
Section: perf-optimize
═══════════════════════════════════════════════════════════════════════════ */
.glass-panel,
.glass-panel-elevated,
.strategy-card,
.countdown-cube,
.chart-container,
.trade-table-row,
.mode-indicator,
.header,
.animated-orb {
will-change: transform, opacity, filter, backdrop-filter;
}
.glass-panel:hover,
.glass-panel-elevated:hover,
.strategy-card:hover,
.countdown-cube,
.chart-orb,
.trade-table-row:hover,
.mode-indicator-pulse,
.header-title-glow,
.animated-orb {
transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
.glass-panel,
.glass-panel-elevated,
.strategy-card,
.countdown-cube,
.chart-container,
.trade-table-row,
.mode-indicator,
.header,
.animated-orb,
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Section: integration
═══════════════════════════════════════════════════════════════════════════ */
/*
* LIQUID GLASS STYLE GUIDE
* Kalshi Dashboard Overhaul
* Based on Apple's Liquid Glass design language (WWDC 2025)
*
* CORE PRINCIPLES
* - Glass Material: Backdrop blur (20-40px), transparency (60-80%), subtle refraction, layered depth
* - Color Palette: Dark glass primary with vivid accent colors and gradients
* - Animation: 300-500ms transitions, fluid easing, micro-interactions (150ms), staggered sequencing
* - Typography: SF Pro Display / -apple-system, weights 400-700, text shadows for legibility
*
* MAJOR CLASS CATEGORIES
*
* 1. GLASS PANELS
* Purpose: Core container elements with glass material effects
* Usage: Apply to cards, modals, sidebars, and major UI containers
* Classes:
* .glass-panel - Standard glass panel with 24px blur and base shadow
* .glass-panel-elevated - Elevated variant with 32px blur, stronger glow, and deeper shadow
* Notes: Use elevated for floating elements, overlays, or emphasized content
*
* 2. BACKGROUNDS
* Purpose: Page and section backgrounds with dynamic gradients
* Usage: Apply to body, full-width sections, or background wrappers
* Classes:
* .bg-dynamic-gradient - Multi-layer radial and linear gradient with fixed attachment
* .bg-animated-orbs - Optional large blurred gradient orbs with slow floating animation
* Notes: Dynamic gradient is fixed for parallax effect; orbs are performance-heavy (use sparingly)
*
* 3. HEADER COMPONENTS
* Purpose: Top navigation and title area
* Usage: Main page header, section headers, modal headers
* Classes:
* .glass-header - Full-width top panel with large border-radius
* .gradient-text - Gradient text effect (blue to purple)
* .title-glow - Subtle animated glow behind title text
* Notes: Header has floating effect; gradient text uses CSS linear-gradient on text
*
* 4. STRATEGY CARDS
* Purpose: Display trading strategies with interactive states
* Usage: Dashboard cards, strategy listings, portfolio items
* Classes:
* .strategy-card - Elevated glass panel for strategy content
* .card-glow-border - Colored top border glow (not solid line)
* .leader-state - Inner glow effect for leading/highlighted cards
* .glass-pill - Glass-effect badges for stats and tags
* Notes: Hover state includes lift and increased glow; leader state uses inset shadow
*
* 5. COUNTDOWN TIMER
* Purpose: Animated timer display with glass cubes
* Usage: Market countdowns, event timers, deadline indicators
* Classes:
* .timer-cube - Individual glass cube for each time unit (hours, minutes, etc.)
* .pulse-glow - Pulsing glow animation on active cubes
* .timer-3d-text - Numbers with slight 3D effect
* .glass-connector - Subtle glass bar connecting cubes
* Notes: Cubes are separate elements; pulse animation cycles with easing
*
* 6. CHARTS & DATA VISUALIZATION
* Purpose: Glass-styled graphs and data displays
* Usage: Market charts, performance graphs, analytics
* Classes:
* .chart-container - Glass panel with inner shadow for chart area
* .glow-line - Chart lines with glow effect
* .data-orb - Glass orbs for data points
* .glass-tooltip - Mini glass panel for tooltips
* Notes: Tooltips appear on hover; orbs scale on interaction
*
* 7. TRADE TABLE
* Purpose: Data table with glass styling
* Usage: Trade history, order books, position tables
* Classes:
* .glass-table-header - Glass background for header row
* .row-transparency - Alternating row transparency (zebra striping)
* .row-hover-glow - Glow effect on row hover
* .glass-badge - Pill-shaped badges with glass effect
* Notes: Hover glow uses box-shadow; badges are inline-block elements
*
* 8. MODE INDICATORS
* Purpose: Status badges with animated feedback
* Usage: Trading mode (live/paper), connection status, system state
* Classes:
* .mode-badge - Prominent glass badge for mode display
* .pulse-ring - Animated pulsing ring around badge
* .status-glow-live - Green glow for live mode
* .status-glow-paper - Yellow glow for paper mode
* Notes: Pulse ring uses keyframe animation; status colors match accent palette
*
* 9. RESPONSIVE ADAPTATIONS
* Purpose: Adjust glass effects for different screen sizes
* Usage: Automatically applied via media queries
* Classes:
* .tablet-optimized - Reduced blur effects for tablet performance
* .mobile-simplified - Simplified glass effects for mobile
* .touch-target - Ensures 48px minimum tap targets on mobile
* Notes: Blur reduction improves performance on mid-range devices
*
* 10. UTILITY CLASSES
* Purpose: Reusable helper classes for common effects
* Usage: Combine with component classes for fine-tuning
* Classes:
* .backdrop-blur-24 - 24px backdrop blur utility
* .backdrop-blur-32 - 32px backdrop blur utility
* .glass-border - Standard glass border (1px solid with transparency)
* .inner-glow - Inset white glow for elevated content
* .outer-glow - Colored outer glow for emphasis
* Notes: Use utilities to override or extend component styles
*
* FILE STRUCTURE NOTES
* - Each swarm agent outputs to: liquid-glass-swarm/output/[agent-id].css
* - Final integration combines all into single styles.css
* - Maintain this comment block at top of master styles.css
*
* PERFORMANCE CONSIDERATIONS
* - Use backdrop-filter sparingly on large areas
* - Reduce blur on tablet/mobile for better performance
* - Consider fallbacks for older browsers
* - Test animation smoothness on mid-range devices
*/