/* ============================================
PULSE DESIGN SYSTEM - BOOTSTRAP 5 OVERRIDES
Version: 2.0.0
Updated to match the Pulse UI design system.
Import after Bootstrap CSS:
============================================ */
/* ------------------------------------------
1. CSS VARIABLES & COLOR SYSTEM
------------------------------------------ */
:root {
/* ── Core Brand Palette ── */
--pulse-teal-dark: #0d6b72;
--pulse-teal-mid: #0e9e9a;
--pulse-teal-light: #12c4b8;
--pulse-cyan: #2ee8ce;
--pulse-gradient: linear-gradient(135deg, #0d6b72 0%, #0e9e9a 45%, #12c4b8 75%, #2ee8ce 100%);
--pulse-gradient-h: linear-gradient(90deg, #0d6b72 0%, #0e9e9a 50%, #2ee8ce 100%);
/* ── Legacy aliases (kept for backward compatibility) ── */
--pulse-blue: #0e9e9a;
--pulse-green: #0e9e9a;
--pulse-blue-light: #12c4b8;
--pulse-blue-dark: #0d6b72;
--pulse-green-light: #12c4b8;
--pulse-green-dark: #0d6b72;
/* ── Semantic Colors ── */
--pulse-success: #10b981;
--pulse-warning: #f59e0b;
--pulse-danger: #ef4444;
--pulse-info: #3b82f6;
/* ── App Background & Surface ── */
--pulse-bg: #f0f7f8;
--pulse-surface: #ffffff;
--pulse-surface-alt: #f8fbfc;
--pulse-border: #dde8ea;
/* ── Text Colors ── */
--pulse-text-dark: #0f2027;
--pulse-text-mid: #3d5a60;
--pulse-text-light: #7a9da3;
/* ── Neutrals (mapped to teal-aware palette) ── */
--pulse-gray-50: #f8fbfc;
--pulse-gray-100: #f0f7f8;
--pulse-gray-200: #dde8ea;
--pulse-gray-300: #b0c4c8;
--pulse-gray-400: #7a9da3;
--pulse-gray-500: #5a7f86;
--pulse-gray-600: #3d5a60;
--pulse-gray-700: #264248;
--pulse-gray-800: #162c30;
--pulse-gray-900: #0f2027;
/* ── Typography ── */
--pulse-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--pulse-font-mono: 'DM Mono', 'Courier New', monospace;
/* ── Spacing ── */
--pulse-spacing-xs: 0.25rem;
--pulse-spacing-sm: 0.5rem;
--pulse-spacing-md: 1rem;
--pulse-spacing-lg: 1.5rem;
--pulse-spacing-xl: 2rem;
--pulse-spacing-2xl: 3rem;
/* ── Border Radius ── */
--pulse-radius-sm: 6px;
--pulse-radius-md: 9px;
--pulse-radius-lg: 14px;
--pulse-radius-xl: 20px;
--pulse-radius-full: 9999px;
/* ── Shadows ── */
--pulse-shadow-sm: 0 1px 4px rgba(13, 107, 114, 0.06);
--pulse-shadow-md: 0 4px 16px rgba(13, 107, 114, 0.10);
--pulse-shadow-lg: 0 8px 28px rgba(13, 107, 114, 0.13);
--pulse-shadow-xl: 0 20px 48px rgba(13, 107, 114, 0.16);
--pulse-shadow-gradient: 0 4px 18px rgba(13, 107, 114, 0.35);
/* ── Transitions ── */
--pulse-transition: all 0.2s ease;
}
/* ------------------------------------------
2. SVG ICON UTILITIES
------------------------------------------ */
@import url('/css/pulse-icons.css');
/* ------------------------------------------
3. BOOTSTRAP COLOR OVERRIDES
------------------------------------------ */
.btn-primary,
.badge-primary {
--bs-primary-rgb: 14, 158, 154;
}
.bg-primary {
--bs-primary-rgb: 14, 158, 154;
background: var(--pulse-gradient) !important;
}
.btn-success,
.badge-success {
--bs-success-rgb: 16, 185, 129;
}
.bg-success {
--bs-success-rgb: 16, 185, 129;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1));
}
.btn-warning,
.badge-warning {
--bs-warning-rgb: 245, 158, 11;
}
.bg-warning {
--bs-warning-rgb: 245, 158, 11;
background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1));
}
.btn-danger,
.badge-danger {
--bs-danger-rgb: 239, 68, 68;
}
.bg-danger {
--bs-danger-rgb: 239, 68, 68;
background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1));
}
.btn-info,
.badge-info {
--bs-info-rgb: 59, 130, 246;
}
.bg-info {
--bs-info-rgb: 59, 130, 246;
background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1));
}
/* Subtle background variants */
.bg-primary-subtle {
background-color: rgba(14, 158, 154, 0.10);
color: var(--pulse-teal-dark);
border: 1px solid rgba(14, 158, 154, 0.22);
}
.bg-success-subtle {
background-color: rgba(16, 185, 129, 0.10);
color: #065f46;
border: 1px solid rgba(16, 185, 129, 0.20);
}
.bg-warning-subtle {
background-color: rgba(245, 158, 11, 0.10);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.20);
}
.bg-danger-subtle {
background-color: rgba(239, 68, 68, 0.10);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.20);
}
.bg-info-subtle {
background-color: rgba(59, 130, 246, 0.10);
color: #1e40af;
border: 1px solid rgba(59, 130, 246, 0.20);
}
/* Text utilities */
.text-primary { color: var(--pulse-teal-dark) !important; }
.text-success { color: var(--pulse-success) !important; }
.text-warning { color: var(--pulse-warning) !important; }
.text-danger { color: var(--pulse-danger) !important; }
.text-info { color: var(--pulse-info) !important; }
.text-muted { color: var(--pulse-text-light) !important; }
/* Background opacity utilities */
.bg-opacity-10 { --bs-bg-opacity: 0.10; }
.bg-opacity-25 { --bs-bg-opacity: 0.25; }
.bg-opacity-50 { --bs-bg-opacity: 0.50; }
.bg-opacity-75 { --bs-bg-opacity: 0.75; }
/* ------------------------------------------
4. GLOBAL BASE
------------------------------------------ */
body {
font-family: var(--pulse-font-family);
color: var(--pulse-text-dark);
background-color: var(--pulse-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--pulse-font-family);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--pulse-text-dark);
}
code, pre, .font-mono {
font-family: var(--pulse-font-mono);
}
/* ------------------------------------------
5. BUTTON SYSTEM
------------------------------------------ */
.btn {
font-family: var(--pulse-font-family);
font-weight: 700;
border-radius: var(--pulse-radius-md);
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
transition: var(--pulse-transition);
border: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
line-height: 1.5;
letter-spacing: -0.01em;
}
.btn-sm {
padding: 0.375rem 0.875rem;
font-size: 0.8125rem;
border-radius: var(--pulse-radius-sm);
}
.btn-lg {
padding: 0.875rem 1.75rem;
font-size: 1rem;
border-radius: var(--pulse-radius-lg);
}
/* ── Primary / Gradient ── */
.btn-gradient,
.btn-primary {
background: var(--pulse-gradient);
color: white;
border: none;
box-shadow: 0 3px 14px rgba(13, 107, 114, 0.30);
}
.btn-gradient:hover,
.btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: var(--pulse-shadow-gradient);
color: white;
}
.btn-gradient:active,
.btn-primary:active {
transform: translateY(0);
filter: brightness(0.96);
}
.btn-gradient:focus,
.btn-primary:focus {
box-shadow: 0 0 0 3px rgba(14, 158, 154, 0.25);
color: white;
}
/* ── Outline Gradient ── */
.btn-outline-gradient {
background: white;
border: 1.5px solid rgba(14, 158, 154, 0.35);
color: var(--pulse-teal-dark);
}
.btn-outline-gradient:hover {
background: rgba(14, 158, 154, 0.06);
border-color: var(--pulse-teal-mid);
color: var(--pulse-teal-dark);
transform: translateY(-1px);
}
/* ── Outline Primary ── */
.btn-outline-primary {
background: transparent;
border: 1.5px solid rgba(14, 158, 154, 0.35);
color: var(--pulse-teal-dark);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background: rgba(14, 158, 154, 0.07);
border-color: var(--pulse-teal-mid);
color: var(--pulse-teal-dark);
transform: translateY(-1px);
}
/* ── Secondary ── */
.btn-secondary {
background: var(--pulse-surface);
color: var(--pulse-text-mid);
border: 1.5px solid var(--pulse-border);
}
.btn-secondary:hover,
.btn-secondary:focus {
background: var(--pulse-gray-100);
border-color: var(--pulse-gray-300);
color: var(--pulse-text-dark);
transform: translateY(-1px);
}
/* ── Outline Secondary ── */
.btn-outline-secondary {
background: transparent;
border: 1.5px solid var(--pulse-border);
color: var(--pulse-text-mid);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
background: var(--pulse-gray-100);
border-color: var(--pulse-gray-300);
color: var(--pulse-text-dark);
transform: translateY(-1px);
}
/* ── Ghost ── */
.btn-ghost {
background: transparent;
color: var(--pulse-text-mid);
border: none;
}
.btn-ghost:hover {
background: rgba(14, 158, 154, 0.07);
color: var(--pulse-teal-dark);
}
/* ── Success ── */
.btn-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
box-shadow: 0 3px 12px rgba(16, 185, 129, 0.30);
}
.btn-success:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.38);
color: white;
}
.btn-success:focus {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
color: white;
}
/* ── Warning ── */
.btn-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 3px 12px rgba(245, 158, 11, 0.30);
}
.btn-warning:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.38);
color: white;
}
.btn-warning:focus {
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
color: white;
}
/* ── Danger ── */
.btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
box-shadow: 0 3px 12px rgba(239, 68, 68, 0.30);
}
.btn-danger:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(239, 68, 68, 0.38);
color: white;
}
.btn-danger:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
color: white;
}
/* ── Outline variants ── */
.btn-outline-success {
background: transparent;
border: 1.5px solid rgba(16, 185, 129, 0.40);
color: #065f46;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
background: rgba(16, 185, 129, 0.08);
border-color: #10b981;
color: #065f46;
transform: translateY(-1px);
}
.btn-outline-warning {
background: transparent;
border: 1.5px solid rgba(245, 158, 11, 0.40);
color: #92400e;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
background: rgba(245, 158, 11, 0.08);
border-color: #f59e0b;
color: #92400e;
transform: translateY(-1px);
}
.btn-outline-danger {
background: transparent;
border: 1.5px solid rgba(239, 68, 68, 0.40);
color: #991b1b;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
background: rgba(239, 68, 68, 0.08);
border-color: #ef4444;
color: #991b1b;
transform: translateY(-1px);
}
.btn-outline-info {
background: transparent;
border: 1.5px solid rgba(59, 130, 246, 0.40);
color: #1e40af;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
background: rgba(59, 130, 246, 0.08);
border-color: #3b82f6;
color: #1e40af;
transform: translateY(-1px);
}
/* ── Icon Button ── */
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--pulse-radius-md);
background: var(--pulse-bg);
border: 1.5px solid var(--pulse-border);
color: var(--pulse-text-light);
transition: var(--pulse-transition);
}
.btn-icon:hover {
background: var(--pulse-surface);
border-color: var(--pulse-teal-mid);
color: var(--pulse-teal-dark);
}
.btn-icon.btn-sm {
width: 32px;
height: 32px;
}
.btn-icon.btn-lg {
width: 48px;
height: 48px;
}
/* ── Loading state ── */
.btn-loading {
position: relative;
pointer-events: none;
opacity: 0.75;
}
.btn-loading::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
margin: -7.5px 0 0 -7.5px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: pulse-spin 0.6s linear infinite;
}
@keyframes pulse-spin {
to { transform: rotate(360deg); }
}
/* ------------------------------------------
6. BADGE SYSTEM
------------------------------------------ */
.badge {
font-family: var(--pulse-font-family);
padding: 0.275rem 0.7rem;
border-radius: var(--pulse-radius-full);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.badge-gradient {
background: var(--pulse-gradient);
color: white;
}
.badge-subtle {
background: rgba(14, 158, 154, 0.10);
color: var(--pulse-teal-dark);
border: 1px solid rgba(14, 158, 154, 0.22);
}
.badge-gray {
background: var(--pulse-gray-100);
color: var(--pulse-text-mid);
border: 1px solid var(--pulse-border);
}
.badge-success {
background: rgba(16, 185, 129, 0.10);
color: #065f46;
border: 1px solid rgba(16, 185, 129, 0.22);
}
.badge-warning {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.22);
}
.badge-danger {
background: rgba(239, 68, 68, 0.10);
color: #991b1b;
border: 1px solid rgba(239, 68, 68, 0.22);
}
/* Live pulse badge */
.badge-live {
background: rgba(16, 185, 129, 0.10);
color: #065f46;
border: 1px solid rgba(16, 185, 129, 0.22);
}
.badge-live::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
animation: badge-pulse 1.4s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes badge-pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
/* Code badge (session codes) */
.badge-code {
font-family: var(--pulse-font-mono);
font-size: 0.7rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0.04em;
background: rgba(14, 158, 154, 0.10);
color: var(--pulse-teal-dark);
border: 1px solid rgba(14, 158, 154, 0.22);
border-radius: var(--pulse-radius-sm);
padding: 0.2rem 0.6rem;
}
/* ------------------------------------------
7. CARD SYSTEM
------------------------------------------ */
.card {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-lg);
border: 1px solid var(--pulse-border);
background: var(--pulse-surface);
box-shadow: var(--pulse-shadow-sm);
transition: var(--pulse-transition);
}
.card:hover {
box-shadow: var(--pulse-shadow-md);
transform: translateY(-2px);
}
.card-gradient {
background: var(--pulse-gradient);
color: white;
border: none;
box-shadow: var(--pulse-shadow-gradient);
}
.card-gradient .card-title,
.card-gradient .card-text {
color: white;
}
/* Stat card accent border */
.card-accent-teal { border-left: 4px solid var(--pulse-teal-mid); }
.card-accent-green { border-left: 4px solid var(--pulse-success); }
.card-accent-blue { border-left: 4px solid var(--pulse-info); }
.card-accent-warning{ border-left: 4px solid var(--pulse-warning); }
.card-accent-danger { border-left: 4px solid var(--pulse-danger); }
/* White card on teal bg (used in session presentation) */
.card-session {
background: var(--pulse-surface);
border-radius: 16px;
border: 1px solid var(--pulse-border);
box-shadow: 0 4px 24px rgba(13, 107, 114, 0.14);
}
/* ------------------------------------------
8. FORM CONTROLS
------------------------------------------ */
.form-control,
.form-select {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-md);
border: 1.5px solid var(--pulse-border);
background: var(--pulse-bg);
color: var(--pulse-text-dark);
font-size: 0.875rem;
padding: 0.5rem 0.875rem;
transition: var(--pulse-transition);
}
.form-control:focus,
.form-select:focus {
border-color: var(--pulse-teal-mid);
background: var(--pulse-surface);
box-shadow: 0 0 0 3px rgba(14, 158, 154, 0.15);
color: var(--pulse-text-dark);
outline: none;
}
.form-control::placeholder {
color: var(--pulse-text-light);
}
.form-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pulse-text-light);
margin-bottom: 0.4rem;
}
/* ------------------------------------------
9. ALERTS
------------------------------------------ */
.alert {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-lg);
border: none;
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
/* Review mode banner (amber) */
.alert-review {
background: #fffbeb;
border: 1.5px solid #f59e0b;
color: var(--pulse-text-dark);
border-radius: var(--pulse-radius-lg);
}
.alert-review .alert-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #b45309;
display: block;
margin-bottom: 0.25rem;
}
.alert-gradient {
background: linear-gradient(135deg, rgba(14, 158, 154, 0.08) 0%, rgba(46, 232, 206, 0.08) 100%);
color: var(--pulse-teal-dark);
border-left: 4px solid var(--pulse-teal-mid);
}
.alert-success {
background: rgba(16, 185, 129, 0.10);
color: #065f46;
border-left: 4px solid var(--pulse-success);
}
.alert-warning {
background: rgba(245, 158, 11, 0.10);
color: #92400e;
border-left: 4px solid var(--pulse-warning);
}
.alert-danger {
background: rgba(239, 68, 68, 0.10);
color: #991b1b;
border-left: 4px solid var(--pulse-danger);
}
.alert-info {
background: rgba(59, 130, 246, 0.10);
color: #1e40af;
border-left: 4px solid var(--pulse-info);
}
/* ------------------------------------------
10. TABLES
------------------------------------------ */
.table {
font-family: var(--pulse-font-family);
font-size: 0.875rem;
border-radius: var(--pulse-radius-lg);
overflow: hidden;
--bs-table-striped-bg: var(--pulse-gray-50);
--bs-table-hover-bg: #f5fbfb;
}
.table thead tr {
background: var(--pulse-surface-alt);
}
.table thead th {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--pulse-text-light);
border-bottom: 1px solid var(--pulse-border);
padding: 0.7rem 1rem;
}
.table tbody td {
padding: 1rem;
color: var(--pulse-text-dark);
border-bottom: 1px solid #f0f5f6;
vertical-align: middle;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table-hover tbody tr:hover {
background: #f5fbfb;
cursor: pointer;
}
/* ------------------------------------------
11. UTILITIES
------------------------------------------ */
/* Gradient backgrounds */
.bg-gradient {
background: var(--pulse-gradient) !important;
color: white;
}
.bg-gradient-subtle {
background: linear-gradient(135deg, rgba(14, 158, 154, 0.05) 0%, rgba(46, 232, 206, 0.05) 100%);
}
/* The teal app page background */
.bg-app {
background: linear-gradient(135deg, #0d6b72 0%, #0fa99e 45%, #2ee8ce 100%);
}
/* Gradient text */
.text-gradient {
background: var(--pulse-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Teal text shorthand */
.text-teal { color: var(--pulse-teal-dark) !important; }
.text-teal-mid { color: var(--pulse-teal-mid) !important; }
.text-teal-light { color: var(--pulse-teal-light)!important; }
/* Shadow utilities */
.shadow-sm { box-shadow: var(--pulse-shadow-sm) !important; }
.shadow { box-shadow: var(--pulse-shadow-md) !important; }
.shadow-lg { box-shadow: var(--pulse-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--pulse-shadow-xl) !important; }
.shadow-gradient { box-shadow: var(--pulse-shadow-gradient) !important; }
/* Spacing utilities */
.gap-xs { gap: var(--pulse-spacing-xs); }
.gap-sm { gap: var(--pulse-spacing-sm); }
.gap-md { gap: var(--pulse-spacing-md); }
.gap-lg { gap: var(--pulse-spacing-lg); }
.gap-xl { gap: var(--pulse-spacing-xl); }
/* Border radius utilities */
.rounded-pulse-sm { border-radius: var(--pulse-radius-sm) !important; }
.rounded-pulse-md { border-radius: var(--pulse-radius-md) !important; }
.rounded-pulse-lg { border-radius: var(--pulse-radius-lg) !important; }
.rounded-pulse-xl { border-radius: var(--pulse-radius-xl) !important; }
/* ------------------------------------------
12. NAVIGATION
------------------------------------------ */
/* Sticky top navbar */
.pulse-navbar {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--pulse-border);
box-shadow: 0 1px 12px rgba(13, 107, 114, 0.06);
height: 60px;
display: flex;
align-items: center;
padding: 0 2.5rem;
}
/* Logo mark */
.pulse-logo-mark {
width: 34px;
height: 34px;
background: var(--pulse-gradient);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(14, 158, 154, 0.35);
flex-shrink: 0;
}
/* Session topbar (dark teal, used in presentation mode) */
.pulse-session-bar {
background: rgba(10, 80, 85, 0.80);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
height: 58px;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.pulse-session-bar .nav-link,
.pulse-session-bar .btn-ghost {
color: rgba(255, 255, 255, 0.80);
}
.pulse-session-bar .nav-link:hover,
.pulse-session-bar .btn-ghost:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
/* Nav pills */
.nav-pills .nav-link {
font-family: var(--pulse-font-family);
font-weight: 600;
font-size: 0.8125rem;
border-radius: var(--pulse-radius-md);
color: var(--pulse-text-mid);
padding: 0.4rem 0.875rem;
transition: var(--pulse-transition);
}
.nav-pills .nav-link.active {
background: var(--pulse-gradient);
color: white;
box-shadow: 0 2px 8px rgba(13, 107, 114, 0.25);
}
.nav-pills .nav-link:hover:not(.active) {
background: var(--pulse-gray-100);
color: var(--pulse-teal-dark);
}
/* Navbar links */
.navbar-light .navbar-brand {
color: var(--pulse-text-dark);
font-weight: 800;
letter-spacing: -0.02em;
}
.navbar-light .navbar-nav .nav-link {
color: var(--pulse-text-mid);
font-weight: 600;
font-size: 0.875rem;
}
.navbar-light .navbar-nav .nav-link:hover {
color: var(--pulse-teal-dark);
}
/* ------------------------------------------
13. PAGINATION
------------------------------------------ */
.pagination .page-link {
font-family: var(--pulse-font-family);
font-weight: 600;
font-size: 0.8125rem;
border-radius: var(--pulse-radius-md);
margin: 0 0.2rem;
border: 1.5px solid var(--pulse-border);
color: var(--pulse-text-mid);
background: var(--pulse-surface);
transition: var(--pulse-transition);
}
.pagination .page-link:hover {
background: var(--pulse-gray-100);
border-color: var(--pulse-teal-mid);
color: var(--pulse-teal-dark);
}
.pagination .page-item.active .page-link {
background: var(--pulse-gradient);
border-color: transparent;
color: white;
box-shadow: 0 2px 8px rgba(13, 107, 114, 0.25);
}
/* ------------------------------------------
14. PROGRESS BARS
------------------------------------------ */
.progress {
height: 6px;
border-radius: var(--pulse-radius-full);
background: var(--pulse-gray-200);
overflow: hidden;
}
.progress-bar {
background: var(--pulse-gradient-h);
border-radius: var(--pulse-radius-full);
transition: width 0.4s ease;
}
/* Session activity progress (used in bottom bar) */
.progress-session {
height: 4px;
width: 160px;
background: rgba(255, 255, 255, 0.20);
border-radius: var(--pulse-radius-full);
overflow: hidden;
}
.progress-session .progress-bar {
background: linear-gradient(90deg, #7fffed, #22c55e);
}
/* ------------------------------------------
15. MODAL OVERRIDES
------------------------------------------ */
.modal-content {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-xl);
border: 1px solid var(--pulse-border);
box-shadow: var(--pulse-shadow-xl);
}
.modal-header {
border-bottom: 1px solid var(--pulse-border);
padding: 1.25rem 1.5rem;
}
.modal-header .modal-title {
font-weight: 800;
font-size: 1.125rem;
letter-spacing: -0.02em;
color: var(--pulse-text-dark);
}
.modal-footer {
border-top: 1px solid var(--pulse-border);
padding: 1.25rem 1.5rem;
}
/* ------------------------------------------
16. DROPDOWN OVERRIDES
------------------------------------------ */
.dropdown-menu {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-lg);
border: 1px solid var(--pulse-border);
box-shadow: var(--pulse-shadow-lg);
padding: 0.375rem;
background: var(--pulse-surface);
min-width: 180px;
}
.dropdown-item {
border-radius: var(--pulse-radius-md);
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--pulse-text-mid);
transition: var(--pulse-transition);
}
.dropdown-item:hover {
background: rgba(14, 158, 154, 0.07);
color: var(--pulse-teal-dark);
}
.dropdown-item.active,
.dropdown-item:active {
background: var(--pulse-gradient);
color: white;
}
.dropdown-divider {
border-color: var(--pulse-border);
margin: 0.25rem 0;
}
/* ------------------------------------------
17. TOAST NOTIFICATIONS
------------------------------------------ */
.toast {
font-family: var(--pulse-font-family);
border-radius: var(--pulse-radius-lg);
border: 1px solid var(--pulse-border);
box-shadow: var(--pulse-shadow-lg);
background: var(--pulse-surface);
}
.toast-header {
background: var(--pulse-surface-alt);
border-bottom: 1px solid var(--pulse-border);
font-weight: 700;
color: var(--pulse-text-dark);
}
/* ------------------------------------------
18. ACCORDION OVERRIDES
------------------------------------------ */
.accordion-item {
border: 1.5px solid var(--pulse-border);
border-radius: var(--pulse-radius-lg) !important;
margin-bottom: 0.5rem;
overflow: hidden;
background: var(--pulse-surface);
}
.accordion-button {
font-family: var(--pulse-font-family);
font-weight: 700;
font-size: 0.9375rem;
color: var(--pulse-text-dark);
background: var(--pulse-surface);
border-radius: var(--pulse-radius-lg) !important;
}
.accordion-button:not(.collapsed) {
background: var(--pulse-gradient);
color: white;
box-shadow: none;
}
.accordion-button:focus {
box-shadow: 0 0 0 3px rgba(14, 158, 154, 0.15);
border-color: var(--pulse-teal-mid);
}
/* ------------------------------------------
19. SPINNER / LOADING STATES
------------------------------------------ */
.spinner-border {
border-color: var(--pulse-teal-light);
border-right-color: transparent;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
border-width: 0.15rem;
}
/* ------------------------------------------
20. BREADCRUMB OVERRIDES
------------------------------------------ */
.breadcrumb {
font-size: 0.8125rem;
font-weight: 500;
}
.breadcrumb-item a {
color: var(--pulse-teal-mid);
text-decoration: none;
}
.breadcrumb-item a:hover {
color: var(--pulse-teal-dark);
}
.breadcrumb-item.active {
color: var(--pulse-text-mid);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--pulse-gray-300);
}
/* ------------------------------------------
21. LIST GROUP OVERRIDES
------------------------------------------ */
.list-group-item {
font-family: var(--pulse-font-family);
border-color: var(--pulse-border);
color: var(--pulse-text-dark);
font-size: 0.875rem;
transition: var(--pulse-transition);
}
.list-group-item:hover {
background: rgba(14, 158, 154, 0.04);
}
.list-group-item.active {
background: var(--pulse-gradient);
border-color: transparent;
}
/* ------------------------------------------
22. PULSE-SPECIFIC COMPONENTS
------------------------------------------ */
/* ── Session bottom bar ── */
.pulse-bottom-bar {
background: rgba(10, 80, 85, 0.80);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
height: 58px;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
/* ── Activity badge (ITEM SCORING, WORD CLOUD, etc.) ── */
.activity-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 0.25rem 0.625rem;
border-radius: var(--pulse-radius-sm);
}
.activity-badge-teal {
color: var(--pulse-teal-dark);
background: rgba(14, 158, 154, 0.10);
border: 1px solid rgba(14, 158, 154, 0.22);
}
.activity-badge-purple {
color: #6d28d9;
background: rgba(109, 40, 217, 0.10);
border: 1px solid rgba(109, 40, 217, 0.22);
}
.activity-badge-red {
color: #b91c1c;
background: rgba(185, 28, 28, 0.10);
border: 1px solid rgba(185, 28, 28, 0.22);
}
.activity-badge-blue {
color: #1d4ed8;
background: rgba(29, 78, 216, 0.10);
border: 1px solid rgba(29, 78, 216, 0.22);
}
/* ── Poll option row ── */
.poll-option {
display: flex;
align-items: center;
background: var(--pulse-surface-alt);
border: 1.5px solid var(--pulse-border);
border-radius: var(--pulse-radius-lg);
padding: 1rem 1.25rem;
position: relative;
overflow: hidden;
transition: border-color 0.18s;
cursor: pointer;
}
.poll-option:hover {
border-color: var(--pulse-gray-300);
}
.poll-option-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: rgba(14, 158, 154, 0.07);
border-radius: var(--pulse-radius-lg) 0 0 var(--pulse-radius-lg);
pointer-events: none;
transition: width 0.5s ease;
}
.poll-option-pct {
font-family: var(--pulse-font-mono);
font-size: 1rem;
font-weight: 700;
color: var(--pulse-teal-mid);
}
/* ── Poll input positioning (participant view) ── */
.poll-input-position {
top: 1.25rem;
left: 1rem;
}
.poll-option-interactive {
cursor: pointer;
}
.poll-option-interactive.cursor-not-allowed {
cursor: not-allowed;
opacity: 0.7;
}
/* ── Poll check icon (shown when selected) ── */
.poll-check-icon {
top: 50%;
right: 1.25rem;
transform: translateY(-50%);
font-size: 1.5rem;
pointer-events: none;
}
.poll-option-selected {
border-width: 2px;
}
/* ------------------------------------------
PULSE ICON SYSTEM
Centralized SVG icon utilities for TechWayFit Pulse
------------------------------------------ */
/* Base icon class (ics = icon-svg) */
.ics, .icon-svg {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
vertical-align: middle;
}
/* Icon sizes (ic = icon) */
.ic-xs, .icon-xs { width: 16px; height: 16px; }
.ic-sm, .icon-sm { width: 20px; height: 20px; }
.ic-md, .icon-md { width: 32px; height: 32px; }
.ic-lg, .icon-lg { width: 48px; height: 48px; }
.ic-xl, .icon-xl { width: 64px; height: 64px; }
.ic-2xl, .icon-2xl { width: 80px; height: 80px; }
/* Icon spacing helpers */
.ic-mr, .icon-mr { margin-right: 0.5rem; }
.ic-ml, .icon-ml { margin-left: 0.5rem; }
/* Individual SVG icon classes (90+ icons) */
.ics-alarm { background-image: url('/images/icons/alarm.svg'); }
.ics-bar-chart { background-image: url('/images/icons/bar-chart.svg'); }
.ics-bolt { background-image: url('/images/icons/bolt.svg'); }
.ics-bomb { background-image: url('/images/icons/bomb.svg'); }
.ics-book-open { background-image: url('/images/icons/book-open.svg'); }
.ics-bookmark-tabs { background-image: url('/images/icons/bookmark-tabs.svg'); }
.ics-books { background-image: url('/images/icons/books.svg'); }
.ics-bust { background-image: url('/images/icons/bust.svg'); }
.ics-busts { background-image: url('/images/icons/busts.svg'); }
.ics-calendar { background-image: url('/images/icons/calendar.svg'); }
.ics-calendar-tear-off { background-image: url('/images/icons/calendar-tear-off.svg'); }
.ics-chart { background-image: url('/images/icons/chart.svg'); }
.ics-chart-decreasing { background-image: url('/images/icons/chart-decreasing.svg'); }
.ics-chart-increasing { background-image: url('/images/icons/chart-increasing.svg'); }
.ics-chat { background-image: url('/images/icons/chat.svg'); }
.ics-check-mark { background-image: url('/images/icons/check-mark.svg'); }
.ics-clipboard { background-image: url('/images/icons/clipboard.svg'); }
.ics-collision { background-image: url('/images/icons/collision.svg'); }
.ics-confetti { background-image: url('/images/icons/confetti.svg'); }
.ics-confused { background-image: url('/images/icons/confused.svg'); }
.ics-cross-mark { background-image: url('/images/icons/cross-mark.svg'); }
.ics-document { background-image: url('/images/icons/document.svg'); }
.ics-down-arrow { background-image: url('/images/icons/down-arrow.svg'); }
.ics-email { background-image: url('/images/icons/email.svg'); }
.ics-exclamation { background-image: url('/images/icons/exclamation.svg'); }
.ics-family { background-image: url('/images/icons/family.svg'); }
.ics-fire { background-image: url('/images/icons/fire.svg'); }
.ics-folder { background-image: url('/images/icons/folder.svg'); }
.ics-folder-open { background-image: url('/images/icons/folder-open.svg'); }
.ics-globe { background-image: url('/images/icons/globe.svg'); }
.ics-grinning { background-image: url('/images/icons/grinning.svg'); }
.ics-grinning-big { background-image: url('/images/icons/grinning-big.svg'); }
.ics-handshake { background-image: url('/images/icons/handshake.svg'); }
.ics-heart { background-image: url('/images/icons/heart.svg'); }
.ics-hourglass { background-image: url('/images/icons/hourglass.svg'); }
.ics-house { background-image: url('/images/icons/house.svg'); }
.ics-hundred { background-image: url('/images/icons/hundred.svg'); }
.ics-info { background-image: url('/images/icons/info.svg'); }
.ics-key { background-image: url('/images/icons/key.svg'); }
.ics-laptop { background-image: url('/images/icons/laptop.svg'); }
.ics-left-arrow { background-image: url('/images/icons/left-arrow.svg'); }
.ics-lightbulb { background-image: url('/images/icons/lightbulb.svg'); }
.ics-lightning { background-image: url('/images/icons/lightning.svg'); }
.ics-location { background-image: url('/images/icons/location.svg'); }
.ics-locked { background-image: url('/images/icons/locked.svg'); }
.ics-medal { background-image: url('/images/icons/medal.svg'); }
.ics-medal-sports { background-image: url('/images/icons/medal-sports.svg'); }
.ics-memo { background-image: url('/images/icons/memo.svg'); }
.ics-minus { background-image: url('/images/icons/minus.svg'); }
.ics-mobile { background-image: url('/images/icons/mobile.svg'); }
.ics-office { background-image: url('/images/icons/office.svg'); }
.ics-ok-hand { background-image: url('/images/icons/ok-hand.svg'); }
.ics-party { background-image: url('/images/icons/party.svg'); }
.ics-pen { background-image: url('/images/icons/pen.svg'); }
.ics-pencil { background-image: url('/images/icons/pencil.svg'); }
.ics-people { background-image: url('/images/icons/people.svg'); }
.ics-pin { background-image: url('/images/icons/pin.svg'); }
.ics-plus { background-image: url('/images/icons/plus.svg'); }
.ics-pushpin { background-image: url('/images/icons/pushpin.svg'); }
.ics-question { background-image: url('/images/icons/question.svg'); }
.ics-raised-hand { background-image: url('/images/icons/raised-hand.svg'); }
.ics-right-arrow { background-image: url('/images/icons/right-arrow.svg'); }
.ics-robot { background-image: url('/images/icons/robot.svg'); }
.ics-rocket { background-image: url('/images/icons/rocket.svg'); }
.ics-sad { background-image: url('/images/icons/sad.svg'); }
.ics-save { background-image: url('/images/icons/save.svg'); }
.ics-school { background-image: url('/images/icons/school.svg'); }
.ics-search { background-image: url('/images/icons/search.svg'); }
.ics-settings { background-image: url('/images/icons/settings.svg'); }
.ics-smile { background-image: url('/images/icons/smile.svg'); }
.ics-smiling { background-image: url('/images/icons/smiling.svg'); }
.ics-speech-balloon { background-image: url('/images/icons/speech-balloon.svg'); }
.ics-star { background-image: url('/images/icons/star.svg'); }
.ics-stopwatch { background-image: url('/images/icons/stopwatch.svg'); }
.ics-target { background-image: url('/images/icons/target.svg'); }
.ics-thinking { background-image: url('/images/icons/thinking.svg'); }
.ics-thought-balloon { background-image: url('/images/icons/thought-balloon.svg'); }
.ics-thumbs-down { background-image: url('/images/icons/thumbs-down.svg'); }
.ics-thumbs-up { background-image: url('/images/icons/thumbs-up.svg'); }
.ics-trash { background-image: url('/images/icons/trash.svg'); }
.ics-trophy { background-image: url('/images/icons/trophy.svg'); }
.ics-unlocked { background-image: url('/images/icons/unlocked.svg'); }
.ics-up-arrow { background-image: url('/images/icons/up-arrow.svg'); }
.ics-warning { background-image: url('/images/icons/warning.svg'); }
.ics-waving-hand { background-image: url('/images/icons/waving-hand.svg'); }
.ics-wrench { background-image: url('/images/icons/wrench.svg'); }
.ics-zzz { background-image: url('/images/icons/zzz.svg'); }
.ics-sparkles { background-image: url('/images/icons/robot.svg'); }
/* ?? Additional Icons (Aliases to existing icons) ?? */
.ics-add { background-image: url('/images/icons/plus.svg'); }
/* ?? Font Awesome Fallback Icons ?? */
/* These icons use Font Awesome when SVG doesn't exist */
.ics-fa {
background-image: none !important;
width: auto;
height: auto;
}
.ics-fa::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-style: normal;
display: inline-block;
}
.ics-more-horiz {
background-image: none !important;
width: auto;
height: auto;
}
.ics-more-horiz::before {
content: '\f141';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
.ics-eye {
background-image: none !important;
width: auto;
height: auto;
}
.ics-eye::before {
content: '\f06e';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
.ics-copy {
background-image: none !important;
width: auto;
height: auto;
}
.ics-copy::before {
content: '\f0c5';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
/* Size adjustments for Font Awesome fallback icons */
.ics-more-horiz.ic-xs::before,
.ics-eye.ic-xs::before,
.ics-copy.ic-xs::before { font-size: 14px; }
.ics-more-horiz.ic-sm::before,
.ics-eye.ic-sm::before,
.ics-copy.ic-sm::before { font-size: 16px; }
.ics-more-horiz.ic-md::before,
.ics-eye.ic-md::before,
.ics-copy.ic-md::before { font-size: 24px; }
.ics-more-horiz.ic-lg::before,
.ics-eye.ic-lg::before,
.ics-copy.ic-lg::before { font-size: 32px; }
/* Promotional MVC View Components
Derived from Pulse design tokens in pulse.css */
.promo-arrow-icon {
transition: transform 0.2s ease;
}
.promo-btn-light,
.promo-btn-outline-light,
.promo-btn-small-light {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pulse-spacing-sm);
font-weight: 600;
transition: all 0.2s ease;
}
.promo-btn-light {
background: #fff;
color: var(--pulse-blue);
padding: 0.75rem 1.75rem;
border-radius: var(--pulse-radius-md);
border: 1px solid #fff;
}
.promo-btn-light:hover {
color: var(--pulse-blue-dark);
transform: translateY(-2px);
box-shadow: var(--pulse-shadow-lg);
}
.promo-btn-light:hover .promo-arrow-icon {
transform: translateX(3px);
}
.promo-btn-outline-light {
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.75rem 1.75rem;
border-radius: var(--pulse-radius-md);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.promo-btn-outline-light:hover {
color: #fff;
background: rgba(255, 255, 255, 0.3);
}
.promo-btn-small-light {
background: #fff;
color: var(--pulse-gray-900);
padding: 0.5rem 1.25rem;
border-radius: var(--pulse-radius-md);
border: 1px solid var(--pulse-gray-200);
font-size: 0.875rem;
}
.promo-btn-small-light:hover {
color: var(--pulse-gray-900);
border-color: var(--pulse-gray-300);
box-shadow: var(--pulse-shadow-sm);
}
.promo-hero-banner {
background: var(--pulse-gradient);
border-radius: var(--pulse-radius-xl);
padding: var(--pulse-spacing-2xl);
color: #fff;
position: relative;
overflow: hidden;
box-shadow: var(--pulse-shadow-xl);
}
.promo-hero-banner::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
z-index: 0;
}
.promo-hero-content {
position: relative;
z-index: 1;
max-width: 700px;
}
.promo-hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.375rem 0.875rem;
border-radius: var(--pulse-radius-full);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--pulse-spacing-md);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.promo-hero-title {
margin: 0 0 var(--pulse-spacing-md);
font-size: 2.625rem;
font-weight: 700;
line-height: 1.2;
}
.promo-hero-description {
margin: 0 0 var(--pulse-spacing-xl);
font-size: 1.125rem;
opacity: 0.95;
line-height: 1.6;
}
.promo-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--pulse-spacing-md);
}
.promo-announcement-banner {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: var(--pulse-radius-lg);
padding: var(--pulse-spacing-lg) var(--pulse-spacing-xl);
border: 2px solid #fcd34d;
box-shadow: var(--pulse-shadow-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pulse-spacing-md);
}
.promo-announcement-content {
display: flex;
align-items: center;
gap: var(--pulse-spacing-md);
flex: 1;
}
.promo-announcement-icon {
width: 40px;
height: 40px;
border-radius: var(--pulse-radius-md);
background: #fff;
color: var(--pulse-warning);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.promo-announcement-title {
font-size: 1rem;
font-weight: 700;
color: var(--pulse-gray-900);
margin-bottom: 0.125rem;
}
.promo-announcement-description {
font-size: 0.875rem;
color: var(--pulse-gray-700);
}
.promo-announcement-action {
flex-shrink: 0;
}
.promo-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--pulse-spacing-lg);
}
.promo-feature-card {
background: #fff;
border-radius: var(--pulse-radius-xl);
padding: var(--pulse-spacing-xl);
border: 2px solid var(--pulse-gray-200);
transition: all 0.3s ease;
}
.promo-feature-card:hover {
border-color: var(--pulse-blue);
box-shadow: var(--pulse-shadow-lg);
transform: translateY(-4px);
}
.promo-feature-icon {
width: 56px;
height: 56px;
border-radius: var(--pulse-radius-lg);
background: var(--pulse-gradient);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: var(--pulse-spacing-md);
}
.promo-feature-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--pulse-gray-900);
margin-bottom: var(--pulse-spacing-sm);
}
.promo-feature-description {
font-size: 0.875rem;
color: var(--pulse-gray-600);
line-height: 1.6;
margin-bottom: var(--pulse-spacing-md);
}
.promo-feature-link {
text-decoration: none;
color: var(--pulse-blue);
font-size: 0.875rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.promo-feature-link:hover {
color: var(--pulse-blue-dark);
}
.promo-feature-link:hover .promo-arrow-icon {
transform: translateX(3px);
}
.promo-stats-banner {
background: #fff;
border-radius: var(--pulse-radius-xl);
border: 2px solid var(--pulse-gray-200);
padding: var(--pulse-spacing-2xl);
}
.promo-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--pulse-spacing-xl);
}
.promo-stat-item {
text-align: center;
}
.promo-stat-value {
font-size: 3rem;
line-height: 1;
font-weight: 700;
margin-bottom: var(--pulse-spacing-sm);
background: var(--pulse-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.promo-stat-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--pulse-gray-600);
}
.promo-stat-sublabel {
font-size: 0.75rem;
color: var(--pulse-gray-400);
margin-top: 0.25rem;
}
.promo-cta-card {
background: var(--pulse-gradient);
border-radius: var(--pulse-radius-xl);
overflow: hidden;
box-shadow: var(--pulse-shadow-xl);
display: grid;
grid-template-columns: 1fr 1fr;
}
.promo-cta-content {
color: #fff;
padding: var(--pulse-spacing-2xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.promo-cta-badge {
display: inline-block;
width: fit-content;
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 0.375rem 0.875rem;
border-radius: var(--pulse-radius-full);
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: var(--pulse-spacing-md);
}
.promo-cta-title {
margin: 0 0 var(--pulse-spacing-md);
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
}
.promo-cta-description {
margin: 0 0 var(--pulse-spacing-xl);
font-size: 1rem;
opacity: 0.95;
}
.promo-cta-image {
background: rgba(255, 255, 255, 0.1);
color: #fff;
padding: var(--pulse-spacing-xl);
display: flex;
align-items: center;
justify-content: center;
}
.promo-cta-image-content {
text-align: center;
color: rgba(255, 255, 255, 0.8);
}
.promo-cta-image-content i {
font-size: 4rem;
opacity: 0.4;
}
.promo-cta-image-content p {
margin: var(--pulse-spacing-md) 0 0;
font-size: 0.875rem;
}
.promo-notification-strip {
background: var(--pulse-gray-900);
color: #fff;
border-radius: var(--pulse-radius-lg);
padding: var(--pulse-spacing-md) var(--pulse-spacing-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pulse-spacing-md);
}
.promo-notification-content {
display: flex;
align-items: center;
gap: var(--pulse-spacing-md);
}
.promo-notification-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pulse-success);
animation: promo-notification-pulse 2s infinite;
}
@keyframes promo-notification-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.promo-notification-text {
font-size: 0.875rem;
}
.promo-notification-link {
color: var(--pulse-blue-light);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.promo-notification-link:hover {
color: var(--pulse-blue-light);
text-decoration: underline;
}
.promo-testimonial-card {
background: #fff;
border-radius: var(--pulse-radius-xl);
border: 2px solid var(--pulse-gray-200);
padding: var(--pulse-spacing-xl);
}
.promo-testimonial-quote {
margin: 0 0 var(--pulse-spacing-lg);
font-size: 1.25rem;
font-style: italic;
line-height: 1.6;
color: var(--pulse-gray-900);
font-weight: 500;
}
.promo-testimonial-author {
display: flex;
align-items: center;
gap: var(--pulse-spacing-md);
}
.promo-testimonial-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--pulse-gradient);
color: #fff;
font-size: 1.125rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.promo-testimonial-info {
flex: 1;
}
.promo-testimonial-name {
font-size: 1rem;
font-weight: 700;
color: var(--pulse-gray-900);
}
.promo-testimonial-role {
font-size: 0.875rem;
color: var(--pulse-gray-500);
}
.promo-testimonial-stars {
display: flex;
gap: 0.25rem;
color: var(--pulse-warning);
}
.promo-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--pulse-spacing-md);
}
.promo-quick-action {
background: #fff;
border: 2px solid var(--pulse-gray-200);
border-radius: var(--pulse-radius-lg);
padding: var(--pulse-spacing-lg);
text-decoration: none;
color: var(--pulse-gray-900);
text-align: center;
transition: all 0.2s ease;
}
.promo-quick-action:hover {
color: var(--pulse-gray-900);
border-color: var(--pulse-blue);
transform: translateY(-2px);
box-shadow: var(--pulse-shadow-md);
}
.promo-quick-action-icon {
font-size: 2rem;
margin-bottom: var(--pulse-spacing-sm);
}
.promo-quick-action-label {
font-size: 0.875rem;
font-weight: 600;
}
.hero-title-accent {
color: var(--pulse-teal, #0e9e9a);
position: relative;
display: inline;
}
.hero-title-accent::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
right: 0;
height: 3px;
background: linear-gradient(90deg, #12c4b8, #2ee8ce);
border-radius: 2px;
display: block;
}
/* Hero visual wrapper with floating stats */
.hero-visual-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 320px;
}
.hero-float-stat {
position: absolute;
background: #fff;
border-radius: 12px;
padding: 10px 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
border: 1px solid #dde8ea;
font-size: 12px;
font-weight: 600;
color: #3d5a60;
white-space: nowrap;
animation: heroFloat 4s ease-in-out infinite;
}
.hero-float-n {
font-size: 20px;
font-weight: 800;
color: #0d6b72;
line-height: 1;
margin-bottom: 2px;
}
.hero-float-stat.s1 {
top: 30px;
right: -10px;
animation-delay: 0.5s;
}
.hero-float-stat.s2 {
bottom: 50px;
left: -10px;
animation-delay: 1.2s;
}
.hero-float-stat.s3 {
top: 50%;
right: -20px;
animation-delay: 0.8s;
transform: translateY(-50%);
}
@@keyframes heroFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* AI Section Mockup */
.ai-mockup-area {
height: 100%;
min-height: 340px;
background: linear-gradient(135deg, #e8f6f6 0%, #d4eff0 100%);
border-radius: 0 16px 16px 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 14px;
padding: 28px;
}
.mockup-card {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(14,158,154,0.15);
box-shadow: 0 8px 28px rgba(13,107,114,0.14);
padding: 16px;
position: relative;
overflow: hidden;
}
.mockup-poll {
grid-column: 1;
grid-row: 1 / 3;
transform: rotate(-1deg);
}
.mockup-swot {
grid-column: 2;
grid-row: 1;
transform: rotate(1deg);
}
.mockup-cloud {
grid-column: 2;
grid-row: 2;
transform: rotate(1.5deg);
}
.mc-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #7a9da3;
margin-bottom: 7px;
}
.mc-title {
font-size: 10px;
font-weight: 700;
color: #0f2027;
margin-bottom: 9px;
}
.mc-bar-row {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #64748b;
margin-bottom: 2px;
}
.mc-pct {
font-weight: 700;
}
.mc-pct.teal {
color: #0e9e9a;
}
.mc-pct.blue {
color: #3b82f6;
}
.mc-pct.amber {
color: #f59e0b;
}
.mc-bar {
height: 6px;
border-radius: 4px;
margin-bottom: 5px;
background: linear-gradient(90deg, #0e9e9a, #2ee8ce);
}
.mc-bar-blue {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.mc-bar-amber {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.mc-words {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.mc-swot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.mc-swot-cell {
padding: 5px;
border-radius: 4px;
font-size: 8px;
font-weight: 600;
}
.mc-swot-cell.s {
background: #dcfce7;
color: #166534;
}
.mc-swot-cell.w {
background: #fee2e2;
color: #991b1b;
}
.mc-swot-cell.o {
background: #dbeafe;
color: #1e40af;
}
.mc-swot-cell.t {
background: #fef9c3;
color: #854d0e;
}
/* Template Items */
.template-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 16px;
background: #f0f7f8;
border: 1px solid #dde8ea;
border-radius: 14px;
cursor: pointer;
transition: all 0.22s;
text-decoration: none;
height: 100%;
}
.template-item:hover {
background: #fff;
border-color: #0e9e9a;
box-shadow: 0 6px 20px rgba(14,158,154,0.13);
transform: translateY(-3px);
text-decoration: none;
}
.template-emoji {
font-size: 34px;
margin-bottom: 12px;
line-height: 1;
}
.template-name {
font-size: 14px;
font-weight: 700;
color: #0f2027;
margin-bottom: 5px;
letter-spacing: -0.01em;
}
.template-desc {
font-size: 11px;
color: #7a9da3;
font-weight: 500;
margin: 0;
}
.template-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 16px;
background: #fff;
border: 1px solid #dde8ea;
border-radius: 14px;
cursor: pointer;
transition: all 0.22s;
text-decoration: none;
height: 100%;
box-shadow: 0 4px 12px rgba(13, 107, 114, 0.08);
}
.template-item:hover {
background: #fff;
border-color: #0e9e9a;
box-shadow: 0 8px 24px rgba(14, 158, 154, 0.18);
transform: translateY(-4px);
text-decoration: none;
}
.template-emoji {
font-size: 34px;
margin-bottom: 12px;
line-height: 1;
}
.template-name {
font-size: 14px;
font-weight: 700;
color: #0f2027;
margin-bottom: 5px;
letter-spacing: -0.01em;
}
.template-desc {
font-size: 11px;
color: #7a9da3;
font-weight: 500;
margin: 0;
}
/* Template Cards on Templates Page */
.template-card-item {
background: #fff;
border: 2.5px solid #7a9da3 !important;
transition: all 0.25s ease;
box-shadow: 0 6px 16px rgba(13, 107, 114, 0.12);
}
.template-card-item:hover {
border-color: #0e9e9a !important;
box-shadow: 0 10px 28px rgba(14, 158, 154, 0.22);
transform: translateY(-5px);
}
@media (max-width: 768px) {
.promo-hero-title {
font-size: 2rem;
}
.promo-announcement-banner {
flex-direction: column;
text-align: center;
}
.promo-cta-card {
grid-template-columns: 1fr;
}
.promo-cta-image {
min-height: 180px;
}
.promo-notification-strip {
flex-direction: column;
text-align: center;
}
}
/* ============================================
PULSE CUSTOM STYLES
Minimal custom styles not covered by Bootstrap
============================================ */
/* Navbar - Sticky Header Background */
.pulse-navbar {
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Main Content - Spacing from Sticky Navbar */
main.flex-grow-1 {
padding-top: 2rem;
}
/* Brand Badge - Logo Component */
.brand-badge {
width: 40px;
height: 40px;
border-radius: var(--pulse-radius-md);
background: var(--pulse-gradient);
box-shadow: var(--pulse-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}
.brand-title {
font-weight: 700;
font-size: 1.125rem;
color: var(--pulse-gray-900);
line-height: 1.2;
}
.brand-sub {
font-size: 0.65rem;
color: var(--pulse-gray-500);
line-height: 1;
display: block;
font-weight: 400;
}
/* User Initials Badge */
.user-initials-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
}
/* Container Wide - Custom Layout */
.container-wide {
max-width: 1400px;
}
/* Navbar Custom Animation */
.nav-link-animated {
position: relative;
transition: color 0.2s ease;
}
.nav-link-animated::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--pulse-gradient);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-link-animated:hover::after {
width: 100%;
}
/* Fullscreen Mode - Keep as is */
/* This is functional, not styling */
/* Footer Dark Theme */
.footer-dark {
background: var(--pulse-gray-900);
color: var(--pulse-gray-300);
padding: 0.75rem 0;
margin-top: auto;
}
.footer-grid {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright {
font-size: 0.875rem;
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer-links a {
color: var(--pulse-gray-400);
font-size: 0.875rem;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: var(--pulse-blue-light);
}
/* Utility Classes for Common Patterns */
/* Icon Circle Sizes */
.icon-circle {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-circle-48 {
width: 48px;
height: 48px;
}
.icon-circle-50 {
width: 50px;
height: 50px;
}
.icon-circle-56 {
width: 56px;
height: 56px;
}
.icon-circle-64 {
width: 64px;
height: 64px;
}
/* Container max-widths */
.container-narrow {
max-width: 800px;
}
.container-medium {
max-width: 900px;
}
.container-large {
max-width: 1200px;
}
/* Modal body with scroll */
.modal-body-scroll {
max-height: 70vh;
overflow-y: auto;
}
/* List with scroll */
.list-scroll {
max-height: 300px;
overflow-y: auto;
}
/* Font size utilities to complement Bootstrap */
.fs-xxxl {
font-size: 2rem;
}
/* Letter spacing */
.letter-spacing-wide {
letter-spacing: 0.1em;
}
.letter-spacing-ultra {
letter-spacing: 0.5em;
}
/* Layout Utilities */
.min-h-content {
min-height: calc(100vh - 200px);
}
.h-viewport {
height: 100vh;
}
/* Container Sizes */
.container-xs {
max-width: 500px;
}
.container-sm-custom {
max-width: 800px;
}
.container-lg-custom {
max-width: 1200px;
}
/* Avatar Sizes */
.avatar-lg {
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 32px;
font-weight: 600;
}
/* Progress Bar Variants */
.progress-sm {
height: 8px;
}
/* Line Height Utilities */
.lh-tight {
line-height: 1.3;
}
.lh-snug {
line-height: 1.4;
}
/* Small Font Sizes */
.fs-7 {
font-size: 0.75rem;
}
.fs-8 {
font-size: 0.65rem;
}
/* Min-height utilities */
.min-h-350 {
min-height: 350px;
}
/* Icon Spacer - Tree Component */
.icon-spacer {
width: 24px;
}
/* ===== STAT CARDS ===== */
/* Stat Cards - Base Styles */
.stat-card {
background: white;
border-radius: var(--pulse-radius-xl);
padding: 18px 20px;
box-shadow: 0 2px 10px rgba(13,107,114,0.05);
transition: all 0.2s ease;
border: 1px solid #dde8ea;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
}
.stat-card:hover {
box-shadow: 0 6px 20px rgba(13,107,114,0.1);
transform: translateY(-2px);
}
.stat-card-icon {
width: 44px;
height: 44px;
border-radius: var(--pulse-radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stat-card-value {
font-size: 28px;
font-weight: 800;
color: #0f2027;
line-height: 1;
margin-bottom: 3px;
letter-spacing: -0.03em;
}
.stat-card-label {
font-size: 12px;
font-weight: 600;
color: #7a9da3;
letter-spacing: 0.01em;
}
/* Blue Variant */
.stat-card-blue {
border-left-color: var(--pulse-blue);
}
.stat-card-blue .stat-card-icon {
background: linear-gradient(135deg, var(--pulse-blue) 0%, var(--pulse-blue-dark) 100%);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
/* Green Variant */
.stat-card-green {
border-left-color: var(--pulse-green);
}
.stat-card-green .stat-card-icon {
background: linear-gradient(135deg, var(--pulse-green) 0%, var(--pulse-green-dark) 100%);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
/* Info Variant */
.stat-card-info {
border-left-color: var(--pulse-info);
}
.stat-card-info .stat-card-icon {
background: linear-gradient(135deg, var(--pulse-info) 0%, var(--pulse-blue-dark) 100%);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
/* Gray Variant */
.stat-card-gray {
border-left-color: var(--pulse-gray-500);
}
.stat-card-gray .stat-card-icon {
background: linear-gradient(135deg, var(--pulse-gray-500) 0%, var(--pulse-gray-600) 100%);
box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}
/* ===== TEMPLATE CARD OVERLAY ===== */
/* Desktop: Hover overlay */
@media (min-width: 768px) {
.template-card-item .template-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(249, 250, 251, 0.98) 0%, rgba(249, 250, 251, 0.95) 50%, transparent 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 3rem 1.5rem 1.5rem;
border-radius: 0 0 var(--pulse-radius-lg) var(--pulse-radius-lg);
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
pointer-events: none;
}
.template-card-item:hover .template-card-overlay {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.template-card-item.card:hover {
transform: translateY(-4px);
box-shadow: var(--pulse-shadow-lg);
}
}
/* Mobile: Always visible as footer */
@media (max-width: 767.98px) {
.template-card-overlay {
padding: 1rem;
background: var(--pulse-gray-50);
border-top: 1px solid var(--pulse-gray-200);
}
}
/* ===== DASHBOARD COMPONENTS ===== */
/* Filter Toggle Button (Mobile) */
.filter-toggle-wrapper {
margin-bottom: 1rem;
}
.filter-toggle-btn {
width: 100%;
padding: 0.75rem 1rem;
background: white;
border: 1px solid var(--pulse-gray-300);
border-radius: var(--pulse-radius-md);
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
color: var(--pulse-gray-700);
transition: all 0.2s ease;
}
.filter-toggle-btn:hover {
border-color: var(--pulse-blue);
color: var(--pulse-blue);
}
.filter-toggle-arrow {
transition: transform 0.2s ease;
}
.filter-toggle-btn[aria-expanded="true"] .filter-toggle-arrow {
transform: rotate(180deg);
}
/* Fix dropdown clipping in collapse */
#filterSection .card {
overflow: visible;
}
#filterSection .card-body {
overflow: visible;
}
#filterSection .card:hover {
transform: none;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 3rem 1.5rem;
}
.empty-state-icon {
margin-bottom: 1rem;
}
.empty-state-title {
color: var(--pulse-gray-700);
margin-bottom: 0.5rem;
}
.empty-state-text {
color: var(--pulse-gray-500);
margin-bottom: 1.5rem;
}
/* Session Mobile Cards */
.session-mobile-card {
background: white;
border: 1px solid var(--pulse-gray-200);
border-radius: var(--pulse-radius-lg);
margin-bottom: 1rem;
transition: all 0.2s ease;
}
.session-mobile-card:hover {
box-shadow: var(--pulse-shadow-md);
}
.session-mobile-card-header {
padding: 1rem;
border-bottom: 1px solid var(--pulse-gray-200);
display: flex;
justify-content: space-between;
align-items: center;
}
.session-mobile-card-body {
padding: 1rem;
}
.session-mobile-title {
font-weight: 600;
color: var(--pulse-gray-900);
margin-bottom: 0.5rem;
}
.session-mobile-goal {
color: var(--pulse-gray-600);
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.session-mobile-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--pulse-gray-500);
}
.session-mobile-card-footer {
padding: 1rem;
border-top: 1px solid var(--pulse-gray-200);
background: var(--pulse-gray-50);
}
/* Pagination Footer */
.pagination-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-top: 1px solid var(--pulse-gray-200);
background: var(--pulse-gray-50);
}
.pagination-info {
font-size: 0.875rem;
color: var(--pulse-gray-600);
}
.session-count-badge {
text-align: center;
padding: 1rem;
color: var(--pulse-gray-600);
font-size: 0.875rem;
border-top: 1px solid var(--pulse-gray-200);
background: var(--pulse-gray-50);
}
/* Sort Controls */
.sort-controls {
display: flex;
align-items: center;
}
/* Session Code Badge */
.session-code {
font-family: var(--pulse-font-mono, 'Space Mono', monospace);
font-size: 11px;
font-weight: 700;
color: #0d6b72;
background: rgba(14, 158, 154, 0.1);
border: 1px solid rgba(14, 158, 154, 0.22);
padding: 4px 9px;
border-radius: 6px;
white-space: nowrap;
letter-spacing: 0.04em;
text-decoration: none;
}
.session-code:hover {
background: rgba(14, 158, 154, 0.18);
color: #0d6b72;
}
/* Sort Pills */
.sort-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: #7a9da3;
background: transparent;
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
user-select: none;
}
.sort-pill:hover {
background: rgba(14, 158, 154, 0.07);
color: #0d6b72;
}
.sort-pill.active {
background: rgba(14, 158, 154, 0.12);
color: #0d6b72;
border-color: rgba(14, 158, 154, 0.3);
}
.sort-pills {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
/* Status Dot */
.status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
margin-right: 5px;
vertical-align: middle;
flex-shrink: 0;
}
.badge.status-live .status-dot,
.status-live .status-dot {
animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.75); }
}
/* Filter Card */
.filter-card {
background: white;
border-radius: var(--pulse-radius-xl);
border: 1px solid #dde8ea;
padding: 16px 20px;
box-shadow: 0 2px 10px rgba(13, 107, 114, 0.04);
margin-bottom: 1.25rem;
}
/* Filter Labels */
.filter-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7a9da3;
margin-bottom: 5px;
display: block;
}
/* ============================================
GROUP TREE COMPONENTS - Minimal Custom Styles
============================================ */
/* Groups container */
.groups-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Group Cards - Enhanced visual design */
.card[data-group-id] {
margin-bottom: 0;
overflow: visible;
}
.card[data-group-id]:hover {
border-color: rgba(14, 158, 154, 0.3) !important;
}
/* Card headers - Modern design */
.card[data-group-id] > .card-header {
transition: background 0.2s ease;
}
.card[data-group-id] > .card-header:hover {
background: rgba(14, 158, 154, 0.03) !important;
}
/* Session items - Enhanced styling */
.session-item {
transition: all 0.2s ease;
}
.session-item:hover {
transform: translateX(4px);
border-color: rgba(14, 158, 154, 0.3) !important;
box-shadow: 0 4px 12px rgba(14, 158, 154, 0.12) !important;
}
/* Child groups container - Visual hierarchy */
.child-groups {
position: relative;
}
.child-groups::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, rgba(14, 158, 154, 0.15) 0%, transparent 100%);
border-radius: 2px;
}
/* Expand/Collapse Animation */
.expand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: transform 0.2s ease;
}
.expand-icon.expanded {
transform: rotate(90deg);
}
.expand-icon i {
transition: color 0.2s ease;
}
.card-header:hover .expand-icon i {
color: var(--pulse-teal-mid) !important;
}
/* Custom scrollbar for sessions list */
.sessions-list {
max-height: none;
}
/* Icon & Color Picker sizing */
.icon-picker-display {
width: 60px;
height: 60px;
display: flex !important;
align-items: center;
justify-content: center;
}
.color-preview {
width: 60px;
height: 60px;
border: 1.5px solid var(--pulse-border) !important;
}
.picker-btn {
font-size: 0.75rem;
padding: 0.25rem 0.75rem;
}
/* Session status badges */
.session-status-scheduled {
color: var(--pulse-info);
font-weight: 600;
}
.session-status-active,
.session-status-live {
color: var(--pulse-success);
font-weight: 600;
}
.session-status-completed {
color: var(--pulse-text-light);
font-weight: 600;
}
/* Drag and drop enhancements for groups */
.card-header.drop-target {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
border: 2px dashed var(--pulse-green) !important;
transform: scale(1.02);
transition: all 0.2s ease;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}
/* Hover effects for interactive elements */
.cursor-pointer:hover {
cursor: pointer;
}
/* ============================================
BLAZOR ERROR BOUNDARY
============================================ */
/* Blazor Error Boundary */
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* Hero visual wrapper with floating stats */
.hero-visual-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 380px;
}
/* ── Gradient Orb (Main Circle) ── */
.gradient-orb {
position: relative;
width: 450px;
height: 450px;
border-radius: 50%;
background: var(--pulse-gradient);
box-shadow: 0 20px 60px rgba(14, 158, 154, 0.4);
display: flex;
align-items: center;
justify-content: center;
animation: orbPulse 4s ease-in-out infinite;
}
@keyframes orbPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 20px 60px rgba(14, 158, 154, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 24px 72px rgba(14, 158, 154, 0.5);
}
}
/* ── Pulse Overlay (SVG Waveform) ── */
.pulse-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 110px;
opacity: 0.95;
}
/* ── Animated Pulse Line ── */
.animated-pulse-line {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: drawPulseLine 3s ease-in-out infinite;
}
@keyframes drawPulseLine {
0% {
stroke-dashoffset: 500;
opacity: 0;
}
20% {
opacity: 1;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
.hero-float-stat {
position: absolute;
background: #fff;
border-radius: 12px;
padding: 10px 14px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
border: 1px solid #dde8ea;
font-size: 12px;
font-weight: 600;
color: #3d5a60;
white-space: nowrap;
animation: heroFloat 4s ease-in-out infinite;
}
/* ============================================
PULSE MOBILE & RESPONSIVE STYLES
Mobile-first responsive overrides for Pulse Design System
Version: 1.0.0
============================================ */
/* ===== MOBILE NAVBAR ===== */
@media (max-width: 767.98px) {
.pulse-navbar {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pulse-navbar .container {
padding-left: 1rem;
padding-right: 1rem;
}
.navbar-toggler {
padding: 0.375rem 0.5rem;
font-size: 1.25rem;
border: none;
border-radius: var(--pulse-radius-sm);
background: rgba(14, 165, 233, 0.05);
transition: all 0.2s ease;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
background: rgba(14, 165, 233, 0.1);
box-shadow: none;
outline: none;
}
.navbar-toggler-icon {
width: 1.5rem;
height: 1.5rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(14, 165, 233, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Brand adjustments */
.brand-badge {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
.brand-badge svg {
width: 16px;
height: 16px;
}
.brand-title {
font-size: 0.95rem;
}
.brand-sub {
font-size: 0.625rem;
}
/* Main content spacing */
main.flex-grow-1 {
padding-top: 1.25rem;
}
}
/* ===== TABLET & MOBILE NAVBAR COLLAPSE ===== */
@media (max-width: 991.98px) {
.navbar-collapse {
margin-top: 0.75rem;
padding: 0;
background: transparent;
overflow: hidden;
}
.navbar-collapse.show,
.navbar-collapse.collapsing {
padding: 1rem;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: var(--pulse-radius-md);
box-shadow: var(--pulse-shadow-md);
border: 1px solid rgba(14, 165, 233, 0.08);
}
.navbar-nav {
gap: 0.375rem;
}
.navbar-nav .nav-item {
width: 100%;
}
.navbar-nav .nav-link {
padding: 0.625rem 0.75rem;
border-radius: var(--pulse-radius-sm);
background: rgba(14, 165, 233, 0.03);
border: 1px solid rgba(14, 165, 233, 0.1);
transition: all 0.2s ease;
}
.navbar-nav .nav-link:hover {
background: rgba(14, 165, 233, 0.08);
border-color: rgba(14, 165, 233, 0.2);
}
.navbar-nav .dropdown-menu {
border: none;
box-shadow: none;
background: transparent;
padding: 0.5rem 0 0 1rem;
}
.navbar-nav .dropdown-item {
padding: 0.5rem 0.75rem;
border-radius: var(--pulse-radius-sm);
background: rgba(14, 165, 233, 0.03);
border: 1px solid rgba(14, 165, 233, 0.1);
margin-bottom: 0.375rem;
}
.navbar-nav .btn-primary {
width: 100%;
justify-content: center;
padding: 0.75rem;
}
}
/* ===== MOBILE FOOTER ===== */
@media (max-width: 767.98px) {
.footer-dark {
padding: 1.5rem 0;
}
.footer-grid {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.footer-links {
flex-direction: column;
gap: 0.5rem;
}
.footer-copyright {
font-size: 0.75rem;
}
}
/* ===== MOBILE CONTAINERS & SPACING ===== */
@media (max-width: 767.98px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.card {
border-radius: var(--pulse-radius-md);
}
.card-body {
padding: 1rem;
}
}
/* ===== TABLET LAYOUT ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
.container {
max-width: 720px;
}
.card-body {
padding: 1.25rem;
}
h1, .h1 {
font-size: 2.25rem;
}
}
/* ===== TOUCH-FRIENDLY TARGETS ===== */
@media (hover: none) and (pointer: coarse) {
.btn,
.nav-link,
.card {
min-height: 44px;
}
}
/* ===== MOBILE BUTTONS & FORMS ===== */
@media (max-width: 767.98px) {
.btn {
font-size: 0.875rem;
padding: 0.625rem 1rem;
}
.pagination .page-link {
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
}
}
/* ===== MOBILE MODALS ===== */
@media (max-width: 767.98px) {
.modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
.modal-footer {
flex-direction: column;
gap: 0.5rem;
}
.modal-footer .btn {
width: 100%;
margin: 0;
}
}
/* ===== MOBILE BADGES & ALERTS ===== */
@media (max-width: 767.98px) {
.badge {
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
}
.alert {
padding: 0.75rem;
font-size: 0.875rem;
}
}
/* ===== MOBILE DASHBOARD COMPONENTS ===== */
@media (max-width: 767.98px) {
/* Stat cards */
.stat-card {
padding: 0.75rem;
border-radius: var(--pulse-radius-md);
}
.stat-card-icon {
width: 44px;
height: 44px;
}
.stat-card-value {
font-size: 1.5rem;
}
.stat-card-label {
font-size: 0.7rem;
}
/* Session mobile cards */
.session-mobile-card {
border-radius: var(--pulse-radius-md);
}
.session-mobile-card-header,
.session-mobile-card-body,
.session-mobile-card-footer {
padding: 0.875rem;
}
.session-mobile-title {
font-size: 0.9375rem;
}
.session-mobile-goal {
font-size: 0.8125rem;
}
.session-mobile-meta {
font-size: 0.75rem;
}
/* Filter toggle */
.filter-toggle-wrapper {
margin-bottom: 0.875rem;
}
.filter-toggle-btn {
padding: 0.75rem;
}
/* Pagination */
.pagination-footer {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.pagination-info {
text-align: center;
font-size: 0.8125rem;
}
}
/* ===== MOBILE TEMPLATE CARDS ===== */
@media (max-width: 767.98px) {
.template-card-overlay {
padding: 1rem;
background: var(--pulse-gray-50);
border-top: 1px solid var(--pulse-gray-200);
}
}
/* ══════════════════════════════════════════════════════
Live Session – Two-Panel Mentimeter-Style Layout
Updated with Sprint Retrospective Redesign Styling
══════════════════════════════════════════════════════ */
/* ── Enhanced Color Variables ── */
:root {
--live-primary: #1abc9c;
--live-primary-dark: #16a085;
--live-primary-light: #48dbcc;
--live-secondary: #3498db;
--live-accent: #e74c3c;
--live-success: #27ae60;
--live-warning: #f39c12;
--live-pending: #95a5a6;
--live-bg-dark: #1a1a2e;
--live-bg-light: #f8f9fa;
--live-surface: #ffffff;
--live-text-primary: #2c3e50;
--live-text-secondary: #7f8c8d;
--live-border: #ecf0f1;
--live-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
--live-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--live-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
}
/* ── Fix the flex chain when the live shell is on screen ── */
body.live-layout-active,
body:has(.live-page-shell) {
height: 100vh;
overflow: hidden;
}
body.live-layout-active .pulse-navbar,
body:has(.live-page-shell) .pulse-navbar,
body.live-layout-active .footer-dark,
body:has(.live-page-shell) .footer-dark {
display: none !important;
}
body.live-layout-active > main.flex-grow-1,
body:has(.live-page-shell) > main {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 !important;
margin: 0 !important;
}
/* ── Page shell: fills 100% of the flex slot ── */
.live-page-shell {
display: flex;
flex-direction: column;
flex: 1 1 0;
height: 100%;
min-height: 0;
overflow: hidden;
background: linear-gradient(135deg, var(--live-bg-light) 0%, #f0f4f8 100%);
}
/* ══════════════════════════════════════════════════════
ENHANCED TOP BAR
══════════════════════════════════════════════════════ */
.live-top-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem 2rem;
min-height: 60px;
background: var(--live-surface);
border-bottom: 1px solid var(--live-border);
flex-shrink: 0;
z-index: 100;
box-shadow: var(--live-shadow-sm);
position: sticky;
top: 0;
}
.live-top-bar-title {
font-size: 20px;
font-weight: 600;
color: var(--live-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
flex-shrink: 1;
}
.live-top-bar-current {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex: 1 1 280px;
}
.live-top-bar-current-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--live-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.live-top-bar-divider {
width: 1px;
height: 20px;
background: var(--live-border);
flex-shrink: 0;
}
.live-top-bar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-left: auto;
min-width: 0;
flex-shrink: 0;
}
/* ── Session ID Badge (Enhanced) ── */
.session-id {
display: inline-block;
background: linear-gradient(135deg, var(--live-primary) 0%, var(--live-primary-light) 100%);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-left: 0.5rem;
box-shadow: 0 2px 8px rgba(26, 188, 156, 0.3);
}
/* ── Stat pills in top bar (Enhanced) ── */
.live-stat-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
font-weight: 600;
padding: 0.4rem 0.7rem;
border-radius: 20px;
white-space: nowrap;
background: var(--live-bg-light);
color: var(--live-text-secondary);
flex-shrink: 0;
transition: all 0.2s ease;
}
.live-stat-pill:hover {
transform: translateY(-1px);
box-shadow: var(--live-shadow-sm);
}
.live-stat-pill--users { background: #e0f2fe; color: #0369a1; }
.live-stat-pill--active { background: #dcfce7; color: #15803d; }
.live-stat-pill--done { background: #f0fdf4; color: #166534; }
.live-stat-pill--total { background: var(--live-bg-light); color: var(--live-text-secondary); }
/* ── Sidebar toggle button (Enhanced) ── */
.live-sidebar-toggle {
width: 32px;
height: 32px;
border: 1px solid var(--live-border);
border-radius: 6px;
background: transparent;
color: var(--live-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s ease;
}
.live-sidebar-toggle:hover {
background: var(--live-bg-light);
border-color: var(--live-primary);
color: var(--live-primary);
transform: translateY(-1px);
}
/* ── Workspace row (sidebar + stage) ── */
.live-workspace {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
/* ══════════════════════════════════════════════════════
ENHANCED SIDEBAR
══════════════════════════════════════════════════════ */
.live-sidebar {
width: 300px;
min-width: 300px;
display: flex;
flex-direction: column;
background: var(--live-surface);
border-right: 1px solid var(--live-border);
overflow: hidden;
min-height: 0;
transition: width 0.25s ease, min-width 0.25s ease;
flex-shrink: 0;
box-shadow: var(--live-shadow-sm);
}
.live-sidebar.live-sidebar--collapsed {
width: 0;
min-width: 0;
}
.live-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--live-border);
flex-shrink: 0;
}
.live-sidebar-label {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--live-text-secondary);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ── Activity Count Badge (Enhanced) ── */
.activity-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--live-primary);
color: white;
border-radius: 50%;
font-size: 12px;
font-weight: bold;
}
/* ── Scrollable queue (Enhanced) ── */
.live-sidebar-queue {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.75rem;
scrollbar-width: thin;
scrollbar-color: var(--live-border) transparent;
}
.live-sidebar-queue::-webkit-scrollbar { width: 4px; }
.live-sidebar-queue::-webkit-scrollbar-track { background: transparent; }
.live-sidebar-queue::-webkit-scrollbar-thumb {
background: var(--live-border);
border-radius: 2px;
}
.live-sidebar-queue::-webkit-scrollbar-thumb:hover {
background: var(--live-text-secondary);
}
/* ── Enhanced Activity Queue Item ── */
.live-activity-item {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 1rem 0.75rem;
border-radius: 8px;
border: 1px solid var(--live-border);
border-left: 4px solid var(--live-text-secondary);
background: #ffffff;
box-shadow: var(--live-shadow-sm);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
margin-bottom: 0.75rem;
}
.live-activity-item:hover {
background: linear-gradient(135deg, rgba(26, 188, 156, 0.05) 0%, rgba(52, 152, 219, 0.05) 100%);
transform: translateX(4px);
border-left-color: var(--live-primary);
box-shadow: var(--live-shadow-md);
}
.live-activity-item--clickable {
cursor: pointer;
}
.live-activity-item--clickable:focus-visible {
outline: 2px solid rgba(26, 188, 156, 0.35);
outline-offset: 2px;
}
.live-activity-item--selected {
border-color: var(--live-primary);
border-left-color: var(--live-primary);
box-shadow: 0 6px 18px rgba(26, 188, 156, 0.25);
background: rgba(26, 188, 156, 0.08);
}
.live-activity-item--live {
background: #f0fdf4;
border-color: #86efac !important;
border-left-color: var(--live-success) !important;
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
animation: live-pulse-glow 2s ease-in-out infinite;
}
@keyframes live-pulse-glow {
0%, 100% { box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2); }
50% { box-shadow: 0 6px 20px rgba(39, 174, 96, 0.35); }
}
.live-activity-item--completed {
background: #f8fafc;
border-color: var(--live-border);
border-left-color: var(--live-pending);
opacity: 0.85;
}
.live-activity-item--pending {
border-left-color: var(--live-primary);
}
.live-sidebar-queue .live-activity-item:last-child {
margin-bottom: 0;
}
.live-activity-item-order {
font-size: 0.75rem;
font-weight: 700;
color: var(--live-text-secondary);
min-width: 20px;
padding-top: 2px;
flex-shrink: 0;
}
.live-activity-item-body {
flex: 1;
min-width: 0;
}
.live-activity-item-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--live-text-primary);
line-height: 1.4;
margin-bottom: 0.5rem;
}
.live-activity-item--completed .live-activity-item-title {
color: var(--live-text-secondary);
}
.live-activity-item-meta {
font-size: 0.7rem;
color: var(--live-text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.live-activity-item-actions {
display: flex;
gap: 0.3rem;
margin-top: 0.35rem;
opacity: 0;
transition: opacity 0.2s ease;
position: absolute;
top: 1rem;
right: 1rem;
}
.live-activity-item:hover .live-activity-item-actions {
opacity: 1;
}
.live-activity-item-status-text {
font-size: 0.7rem;
font-weight: 600;
margin-top: 0.35rem;
}
.live-activity-item-status-text--live {
color: var(--live-success);
}
.live-activity-item-status-text--completed {
color: var(--live-text-secondary);
}
.live-activity-item-status-text--pending {
color: var(--live-pending);
}
.live-activity-item-status {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
}
.live-activity-item-status--live { background: var(--live-success); animation: live-dot-pulse 1.5s ease-in-out infinite; }
.live-activity-item-status--completed { background: var(--live-success); }
.live-activity-item-status--pending { background: var(--live-pending); }
@keyframes live-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.7); }
}
/* ── Enhanced Activity Label Badges ── */
.activity-label {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 0.3rem 0.6rem;
border-radius: 4px;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.activity-label.wordcloud {
background: rgba(26, 188, 156, 0.1);
color: var(--live-primary);
}
.activity-label.poll {
background: rgba(26, 188, 156, 0.1);
color: var(--live-primary);
}
.activity-label.quadrant {
background: rgba(46, 204, 113, 0.1);
color: var(--live-success);
}
.activity-label.feedback {
background: rgba(230, 126, 34, 0.1);
color: #e67e22;
}
.activity-label.rating {
background: rgba(243, 156, 18, 0.1);
color: var(--live-warning);
}
.activity-label.fivewhys {
background: rgba(52, 152, 219, 0.1);
color: var(--live-secondary);
}
/* ── Sidebar "Add Activity" footer (Enhanced) ── */
.live-sidebar-add {
border-top: 1px solid var(--live-border);
padding: 1rem 1rem 1.25rem;
flex-shrink: 0;
background: var(--live-bg-light);
}
.live-sidebar-add-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--live-text-secondary);
margin-bottom: 0.75rem;
text-align: center;
}
.live-add-activity-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.live-add-activity-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.65rem 0.35rem;
border: 1px dashed var(--live-border);
border-radius: 6px;
background: transparent;
color: var(--live-text-secondary);
font-size: 0.65rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
line-height: 1.2;
}
.live-add-activity-btn i {
font-size: 1rem;
}
.live-add-activity-btn:hover {
background: rgba(26, 188, 156, 0.05);
border-color: var(--live-primary);
border-style: solid;
color: var(--live-primary);
transform: translateY(-2px);
box-shadow: var(--live-shadow-sm);
}
/* ══════════════════════════════════════════════════════
ENHANCED MAIN STAGE
══════════════════════════════════════════════════════ */
.live-stage {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(135deg, var(--live-bg-light) 0%, #f0f4f8 100%);
min-width: 0;
min-height: 0;
position: relative;
}
/* ── Enhanced Floating Metrics ── */
.live-stage-floating-metrics {
position: absolute;
top: 1.5rem;
right: 2rem;
z-index: 12;
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-end;
max-width: calc(100% - 4rem);
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--live-border);
border-radius: 12px;
box-shadow: var(--live-shadow-lg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: fadeInDown 0.4s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Enhanced Idle state ── */
.live-stage-idle {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 3rem 2rem;
min-height: 0;
overflow-y: auto;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--live-text-secondary);
animation: fadeIn 0.5s ease;
}
.empty-state-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, rgba(26, 188, 156, 0.1) 0%, rgba(52, 152, 219, 0.1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
}
.empty-state h3 {
font-size: 18px;
font-weight: 600;
color: var(--live-text-primary);
margin-bottom: 0.5rem;
}
.empty-state p {
font-size: 14px;
margin-bottom: 1.5rem;
}
/* ── Active activity stage (Enhanced) ── */
.live-stage-active {
flex: 1 1 0;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── The visualization area (Enhanced) ── */
.live-stage-viz {
flex: 1;
overflow-y: auto;
padding: 5.5rem 2rem 2rem;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--live-border) transparent;
}
.live-stage-viz::-webkit-scrollbar { width: 6px; }
.live-stage-viz::-webkit-scrollbar-track { background: transparent; }
.live-stage-viz::-webkit-scrollbar-thumb {
background: var(--live-border);
border-radius: 3px;
}
.live-stage-viz::-webkit-scrollbar-thumb:hover {
background: var(--live-text-secondary);
}
/* ── Enhanced Stage footer ── */
.live-stage-footer {
padding: 1rem 2rem;
background: var(--live-surface);
border-top: 1px solid var(--live-border);
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
/* ── Enhanced Timer Badge ── */
.live-timer-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--live-primary);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-weight: 700;
font-size: 0.82rem;
box-shadow: 0 3px 12px rgba(26, 188, 156, 0.3);
white-space: nowrap;
flex-shrink: 0;
}
.live-timer-badge.timer-warning {
background: var(--live-warning);
box-shadow: 0 3px 12px rgba(243, 156, 18, 0.4);
animation: timer-pulse-warning 2s ease-in-out infinite;
}
.live-timer-badge.timer-expired {
background: var(--live-accent);
box-shadow: 0 3px 12px rgba(231, 76, 60, 0.4);
animation: timer-pulse-danger 1s ease-in-out infinite;
}
.live-timer-badge .timer-text {
font-variant-numeric: tabular-nums;
}
@keyframes timer-pulse-warning {
0%, 100% { box-shadow: 0 3px 12px rgba(243, 156, 18, 0.3); }
50% { box-shadow: 0 6px 20px rgba(243, 156, 18, 0.6); }
}
@keyframes timer-pulse-danger {
0%, 100% { box-shadow: 0 3px 12px rgba(231, 76, 60, 0.3); }
50% { box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6); }
}
/* ── Enhanced Response Badge ── */
.live-response-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--live-bg-light);
color: var(--live-text-secondary);
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
flex-shrink: 0;
transition: all 0.2s ease;
}
.live-response-badge:hover {
transform: translateY(-1px);
box-shadow: var(--live-shadow-sm);
}
/* ── Enhanced Pulse Dot for Live Badge ── */
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
animation: pulse-dot-animation 1.5s ease-in-out infinite;
}
@keyframes pulse-dot-animation {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
/* ── Enhanced Activity Card ── */
.activity-card {
background: var(--live-surface);
border: 1px solid var(--live-border);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--live-shadow-sm);
transition: all 0.3s ease;
animation: fadeInUp 0.5s ease;
}
.activity-card:hover {
border-color: var(--live-primary);
box-shadow: var(--live-shadow-md);
transform: translateY(-2px);
}
/* ── Enhanced Stats Grid ── */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.stat-box {
background: linear-gradient(135deg, var(--live-bg-light) 0%, #f5f8fb 100%);
padding: 1.5rem 1rem;
border-radius: 8px;
text-align: center;
border: 1px solid var(--live-border);
transition: all 0.2s ease;
}
.stat-box:hover {
background: linear-gradient(135deg, rgba(26, 188, 156, 0.05) 0%, rgba(52, 152, 219, 0.05) 100%);
border-color: var(--live-primary);
transform: translateY(-2px);
box-shadow: var(--live-shadow-sm);
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: var(--live-primary);
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
font-size: 12px;
font-weight: 600;
color: var(--live-text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── Enhanced Status Badges ── */
.status-badge {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.status-pending {
background: rgba(243, 156, 18, 0.1);
color: var(--live-warning);
}
.status-live {
background: rgba(39, 174, 96, 0.1);
color: var(--live-success);
}
/* ══════════════════════════════════════════════════════
RESPONSIVE – collapse sidebar on tablet/mobile
══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
/* On mobile, hide sidebar stats in top bar to save space */
.live-top-bar-stats { display: none !important; }
.live-top-bar-title { max-width: 160px; }
/* Sidebar becomes a slide-over drawer on mobile */
.live-sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
height: 100dvh;
z-index: 200;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.14);
transform: translateX(-100%);
transition: transform 0.25s ease;
width: 300px !important;
min-width: 300px !important;
}
.live-sidebar.live-sidebar--open {
transform: translateX(0);
}
/* Sidebar-collapsed on desktop resets to hidden on mobile */
.live-sidebar.live-sidebar--collapsed {
transform: translateX(-100%);
}
/* When both collapsed and open are present (toggled on mobile), open wins */
.live-sidebar.live-sidebar--collapsed.live-sidebar--open {
transform: translateX(0);
}
.live-stage-floating-metrics {
top: 0.75rem;
right: 1rem;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
}
.live-stage-viz {
padding-top: 6rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.live-top-bar {
padding: 1rem 1.5rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.activity-card {
padding: 1.5rem;
}
}