/* ===================================
CPS Accelerate - Dark Theme
=================================== */
:root {
/* Font Families - CPS Website Match */
--font-primary: 'Montserrat', sans-serif;
--font-secondary: 'Open Sans', sans-serif;
--font-tertiary: 'Roboto', sans-serif;
--font-headings: 'Montserrat', sans-serif;
--font-body: 'Open Sans', sans-serif;
/* Dark Mode Color Palette */
--theme-primary: #60a5fa;
--theme-secondary: #3b82f6;
--theme-accent: #0ea5e9;
--theme-success: #34d399;
--theme-warning: #fbbf24;
--theme-error: #f87171;
/* Background Colors */
--theme-bg-primary: #0f172a;
--theme-bg-secondary: #1e293b;
--theme-bg-tertiary: #334155;
--theme-bg-accent: #475569;
/* Text Colors */
--theme-text-primary: #f8fafc;
--theme-text-secondary: #cbd5e1;
--theme-text-tertiary: #94a3b8;
--theme-text-inverse: #0f172a;
/* Border Colors */
--theme-border-primary: #374151;
--theme-border-secondary: #4b5563;
--theme-border-accent: rgba(96, 165, 250, 0.2);
/* Shadow Colors */
--theme-shadow-light: rgba(0, 0, 0, 0.3);
--theme-shadow-medium: rgba(0, 0, 0, 0.5);
--theme-shadow-heavy: rgba(0, 0, 0, 0.7);
/* Gradient Colors */
--theme-gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
--theme-gradient-secondary: linear-gradient(135deg, #1e293b 0%, #334155 100%);
--theme-gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%);
/* Component Specific Colors */
--theme-navbar-bg: rgba(15, 23, 42, 0.95);
--theme-card-bg: #1e293b;
--theme-input-bg: #334155;
--theme-dropdown-bg: #1e293b;
/* Hover States */
--theme-hover-primary: #2563eb;
--theme-hover-secondary: #60a5fa;
--theme-hover-bg: #334155;
/* Theme Identifier */
--current-theme: 'dark';
}
/* ===================================
Base Styling
=================================== */
body {
background-color: var(--theme-bg-primary);
color: var(--theme-text-primary);
font-family: var(--font-body);
transition: background-color 0.3s ease, color 0.3s ease;
}
/* App Container */
#app {
background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
color: var(--theme-text-primary);
min-height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* ===================================
Typography - CPS Website Match
=================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-headings);
font-weight: 700;
color: var(--theme-text-primary);
}
h1, .h1 {
font-weight: 800;
}
.section-title, .hero-title, .highlights-title {
font-family: var(--font-headings);
font-weight: 800;
}
.navbar-brand, .btn, .form-control, .form-select, .form-input {
font-family: var(--font-secondary);
}
.navbar-nav .nav-link {
font-family: var(--font-secondary);
font-weight: 500;
}
p, .text-body, .card-text {
font-family: var(--font-body);
line-height: 1.6;
}
.stat-label, .session-title, .tab-title {
font-family: var(--font-secondary);
font-weight: 600;
}
/* ===================================
Navigation
=================================== */
.navbar {
background: var(--theme-navbar-bg) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--theme-border-accent);
box-shadow: 0 2px 10px var(--theme-shadow-medium);
}
.navbar-brand {
color: var(--theme-primary) !important;
display: flex;
align-items: center;
}
.navbar-nav .nav-link {
color: var(--theme-text-secondary) !important;
}
.navbar-nav .nav-link:hover {
color: var(--theme-primary) !important;
}
/* ===================================
Cards & Components
=================================== */
.card {
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-primary);
box-shadow: 0 4px 15px var(--theme-shadow-light);
}
.auth-card {
background: var(--theme-card-bg);
box-shadow: 0 20px 60px var(--theme-shadow-heavy);
border: 1px solid var(--theme-border-accent);
}
.faculty-card {
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-accent);
box-shadow: 0 20px 60px var(--theme-shadow-medium);
}
/* ===================================
Forms & Inputs
=================================== */
.form-input,
.form-control,
.form-select {
background: var(--theme-input-bg);
border: 2px solid var(--theme-border-primary);
color: var(--theme-text-primary);
}
.form-input:focus,
.form-control:focus,
.form-select:focus {
background: var(--theme-input-bg);
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
color: var(--theme-text-primary);
}
.form-input::placeholder,
.form-control::placeholder,
.form-select::placeholder {
color: var(--theme-text-tertiary);
}
/* ===================================
Dropdowns
=================================== */
.dropdown-menu {
background: var(--theme-dropdown-bg) !important;
border: 1px solid var(--theme-border-accent) !important;
box-shadow: 0 10px 40px var(--theme-shadow-heavy) !important;
}
.dropdown-item {
color: var(--theme-text-secondary) !important;
}
.dropdown-item:hover {
background: var(--theme-hover-bg) !important;
color: var(--theme-primary) !important;
}
/* ===================================
Buttons
=================================== */
.btn-primary {
background: var(--theme-gradient-primary);
border: none;
color: var(--theme-text-primary);
}
.btn-primary:hover {
background: var(--theme-hover-primary);
color: var(--theme-text-primary);
}
.btn-outline-primary {
border: 2px solid var(--theme-primary);
color: var(--theme-primary);
background: transparent;
}
.btn-outline-primary:hover {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
/* Google OAuth Button */
.btn-google {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
background: #2d3748;
border: 2px solid #4a5568;
border-radius: 8px;
color: #e2e8f0;
text-decoration: none;
font-weight: 500;
font-size: 14px;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.btn-google:hover {
background: #374151;
border-color: #6b7280;
color: #f3f4f6;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.btn-google:focus {
outline: none;
box-shadow: 0 0 0 2px #4285f4;
}
/* Social Login Divider */
.social-divider {
display: flex;
align-items: center;
margin: 24px 0;
text-align: center;
}
.social-divider::before,
.social-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--theme-border-secondary);
}
.social-divider span {
padding: 0 16px;
color: var(--theme-text-secondary);
font-size: 14px;
background: var(--theme-bg-primary);
}
.social-login {
margin-bottom: 24px;
}
.btn-hero-primary {
background: rgba(96, 165, 250, 0.9);
color: var(--theme-text-inverse);
}
.btn-hero-primary:hover {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
.btn-hero-secondary {
background: transparent;
color: var(--theme-text-primary);
border: 2px solid rgba(248, 250, 252, 0.5);
}
.btn-hero-secondary:hover {
background: rgba(248, 250, 252, 0.1);
border-color: rgba(248, 250, 252, 0.8);
color: var(--theme-text-primary);
}
/* ===================================
Special Components
=================================== */
.highlight-item {
background: var(--theme-gradient-secondary);
border: 1px solid var(--theme-border-accent);
}
.highlight-item:hover {
border-color: var(--theme-primary);
box-shadow: 0 15px 40px var(--theme-shadow-medium);
}
.stat-item {
background: var(--theme-card-bg);
box-shadow: 0 4px 15px var(--theme-shadow-light);
border: 1px solid var(--theme-border-primary);
text-align: center;
padding: 1rem;
border-radius: 1rem;
min-width: 120px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.stat-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--theme-shadow-light);
}
.stat-icon {
color: var(--theme-primary);
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.stat-number {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--theme-primary);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--theme-text-secondary);
font-weight: 500;
}
.video-container {
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-accent);
box-shadow: 0 20px 60px var(--theme-shadow-medium);
}
/* ===================================
Hero Section Dark Mode
=================================== */
.hero-badge {
background: rgba(96, 165, 250, 0.2);
border: 1px solid rgba(96, 165, 250, 0.3);
}
.time-unit {
background: rgba(248, 250, 252, 0.1);
border: 1px solid rgba(248, 250, 252, 0.2);
}
.time-unit:hover {
background: rgba(248, 250, 252, 0.15);
}
/* ===================================
Achievement Section
=================================== */
.achievement-section {
background: var(--theme-gradient-primary);
}
/* ===================================
Stream Section
=================================== */
.live-indicator {
background: #ef4444;
color: white;
}
.program-section {
background: var(--theme-bg-primary);
}
/* ===================================
Text Colors
=================================== */
.text-primary {
color: var(--theme-primary) !important;
}
.text-secondary {
color: var(--theme-text-secondary) !important;
}
.text-muted {
color: var(--theme-text-tertiary) !important;
}
.section-title {
color: var(--theme-primary);
}
.section-subtitle {
color: var(--theme-text-secondary);
}
.stream-title {
color: var(--theme-primary);
}
.stream-subtitle {
color: var(--theme-text-secondary);
}
.highlights-title {
color: var(--theme-primary);
}
.highlight-content h4 {
color: var(--theme-primary);
}
.highlight-content p {
color: var(--theme-text-secondary);
}
.faculty-header h3 {
color: var(--theme-primary);
}
.faculty-header p {
color: var(--theme-text-secondary);
}
.faculty-stat .stat-number {
color: var(--theme-primary);
}
.faculty-stat .stat-label {
color: var(--theme-text-secondary);
}
.stat-number {
color: var(--theme-primary);
}
.stat-label {
color: var(--theme-text-secondary);
}
.stat-icon {
color: var(--theme-primary);
}
/* ===================================
Authentication Pages
=================================== */
.auth-container {
min-height: 100vh;
background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
.auth-card {
background: var(--theme-card-bg);
border-radius: 1.5rem;
padding: 3rem 2rem;
width: 100%;
max-width: 450px;
box-shadow: 0 20px 60px var(--theme-shadow-heavy);
border: 1px solid var(--theme-border-accent);
position: relative;
overflow: hidden;
}
.auth-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--theme-gradient-primary);
}
.auth-header {
text-align: center;
margin-bottom: 2rem;
}
.auth-logo {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
}
.auth-header h1 {
color: var(--theme-primary);
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.auth-header p {
color: var(--theme-text-secondary);
font-size: 1rem;
margin: 0;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
color: var(--theme-text-primary);
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.form-input {
background: var(--theme-input-bg);
border: 2px solid var(--theme-border-primary);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
color: var(--theme-text-primary);
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus {
background: var(--theme-input-bg);
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
color: var(--theme-text-primary);
}
.form-input::placeholder {
color: var(--theme-text-tertiary);
}
.form-input.error {
border-color: var(--theme-error);
background: rgba(248, 113, 113, 0.1);
}
.error-message {
color: var(--theme-error);
font-size: 0.875rem;
margin-top: 0.5rem;
font-weight: 500;
}
.checkbox-group {
flex-direction: row !important;
align-items: center;
gap: 0.75rem;
}
.checkbox-label {
color: var(--theme-text-secondary);
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
margin: 0;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--theme-primary);
border-radius: 0.25rem;
}
.btn-primary {
background: var(--theme-gradient-primary);
border: none;
border-radius: 0.75rem;
padding: 1rem 2rem;
color: var(--theme-text-primary);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
margin-top: 0.5rem;
}
.btn-primary:hover {
background: var(--theme-hover-primary);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);
color: var(--theme-text-primary);
}
.btn-primary:active {
transform: translateY(0);
}
.forgot-password {
color: var(--theme-primary);
text-decoration: none;
font-size: 0.9rem;
text-align: center;
margin-top: 1rem;
font-weight: 500;
transition: all 0.3s ease;
}
.forgot-password:hover {
color: var(--theme-hover-primary);
text-decoration: underline;
}
.auth-footer {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--theme-border-primary);
}
.auth-footer p {
color: var(--theme-text-secondary);
font-size: 0.9rem;
margin: 0;
}
.auth-footer a {
color: var(--theme-primary);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.auth-footer a:hover {
color: var(--theme-hover-primary);
text-decoration: underline;
}
/* Registration specific styling */
.registration-container {
min-height: 100vh;
background: linear-gradient(135deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%);
padding: 2rem 0;
}
.registration-card {
background: var(--theme-card-bg);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 20px 60px var(--theme-shadow-heavy);
border: 1px solid var(--theme-border-accent);
}
.registration-form-section {
padding: 3rem 2rem;
}
.registration-image-section {
background: var(--theme-gradient-primary);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
position: relative;
overflow: hidden;
}
.registration-image-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: float 20s ease-in-out infinite;
}
.faculty-team-image {
border-radius: 1rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.faculty-team-image:hover {
transform: scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
/* Form Select Styling */
.form-select {
background: var(--theme-input-bg);
border: 2px solid var(--theme-border-primary);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
color: var(--theme-text-primary);
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
cursor: pointer;
}
.form-select:focus {
background: var(--theme-input-bg);
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
color: var(--theme-text-primary);
}
.form-select option {
background: var(--theme-input-bg);
color: var(--theme-text-primary);
}
/* Form Labels & Text */
.form-label,
.form-group label {
color: var(--theme-text-primary);
}
.checkbox-label {
color: var(--theme-text-secondary);
}
/* Responsive Auth Pages */
@media (max-width: 768px) {
.auth-container {
padding: 1rem;
}
.auth-card {
padding: 2rem 1.5rem;
margin: 1rem 0;
}
.auth-header h1 {
font-size: 1.75rem;
}
.registration-form-section {
padding: 2rem 1.5rem;
}
.registration-image-section {
padding: 1.5rem;
}
}
/* ===================================
Footer
=================================== */
footer {
background: var(--theme-gradient-primary) !important;
color: var(--theme-text-inverse) !important;
}
footer h5,
footer h6 {
color: var(--theme-text-inverse) !important;
}
footer p {
color: rgba(248, 250, 252, 0.9) !important;
}
footer a {
color: rgba(248, 250, 252, 0.7) !important;
transition: color 0.3s ease;
}
footer a:hover {
color: var(--theme-text-inverse) !important;
text-decoration: none;
}
footer .text-white-50 {
color: rgba(248, 250, 252, 0.6) !important;
}
footer hr {
border-color: rgba(248, 250, 252, 0.2) !important;
}
.footer-logo {
filter: brightness(1.1) contrast(1.1);
transition: filter 0.3s ease;
}
footer:hover .footer-logo {
filter: brightness(1.2) contrast(1.2);
}
/* ===================================
Error States
=================================== */
.error-message {
color: var(--theme-error);
}
.form-input.error {
border-color: var(--theme-error);
}
.is-invalid {
border-color: var(--theme-error);
}
.invalid-feedback {
color: var(--theme-error);
}
/* ===================================
Theme Indicator
=================================== */
.theme-indicator {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
background: rgba(96, 165, 250, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(96, 165, 250, 0.3);
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
color: #60a5fa;
animation: themeGlow 2s ease-in-out infinite;
}
@keyframes themeGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}
}
/* ===================================
Logo Container
=================================== */
.logo-container {
color: white;
width: 120px;
height: 50px;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.2rem;
margin-right: 0.75rem;
}
/* ===================================
Gradient Backgrounds
=================================== */
.gradient-bg {
background: var(--theme-gradient-primary) !important;
}
/* ===================================
Hero Section Components
=================================== */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: float 20s ease-in-out infinite;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
color: white;
text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: 3rem;
color: rgba(248, 250, 252, 0.9);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.text-gradient-white {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===================================
Countdown Timer
=================================== */
/* Countdown Timer Dark Mode */
.countdown-title {
color: var(--theme-text-primary);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
text-align: center;
opacity: 0.9;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
/* ===================================
Hero Action Buttons
=================================== */
.hero-actions {
margin-top: 2rem;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ===================================
Dark Mode Specific Enhancements
=================================== */
/* Glowing effects for dark mode */
.hero-title {
text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}
.highlight-icon {
box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
}
.faculty-image {
border: 2px solid var(--theme-border-accent);
}
/* Better contrast for readability */
.countdown-title {
color: var(--theme-text-primary);
opacity: 0.9;
}
.hero-subtitle {
color: var(--theme-text-primary);
opacity: 0.9;
}
/* Dark mode selection styling */
::selection {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
::-moz-selection {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
/* Scrollbar styling for dark mode */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--theme-bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--theme-border-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--theme-primary);
}
/* ===================================
Enhanced Animations & Transitions
=================================== */
* {
transition: background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Preserve existing animations */
.animate-fade-in {
animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* Mind-blowing entrance animations */
@keyframes slideInFromLeft {
0% {
opacity: 0;
transform: translateX(-100px) rotateY(-30deg);
}
100% {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
}
@keyframes slideInFromRight {
0% {
opacity: 0;
transform: translateX(100px) rotateY(30deg);
}
100% {
opacity: 1;
transform: translateX(0) rotateY(0deg);
}
}
@keyframes scaleInBounce {
0% {
opacity: 0;
transform: scale(0.3) rotate(-10deg);
}
60% {
opacity: 1;
transform: scale(1.1) rotate(5deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@keyframes morphIn {
0% {
opacity: 0;
transform: scale(0.8) skewX(-15deg);
filter: blur(10px);
}
50% {
opacity: 0.8;
transform: scale(1.05) skewX(5deg);
filter: blur(2px);
}
100% {
opacity: 1;
transform: scale(1) skewX(0deg);
filter: blur(0px);
}
}
/* Apply animations when elements come into view */
.highlight-item {
opacity: 0;
animation: slideInFromLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.highlight-item:nth-child(even) {
animation: slideInFromRight 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.faculty-card {
opacity: 0;
animation: scaleInBounce 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
animation-delay: 0.3s;
}
.section-badge {
opacity: 1;
animation: morphIn 0.8s ease-out forwards;
animation-delay: 0.1s;
}
.section-title {
opacity: 1;
animation: fadeInUp 1s ease-out forwards;
animation-delay: 0.2s;
}
.section-subtitle {
opacity: 0;
animation: fadeInUp 1s ease-out forwards;
animation-delay: 0.4s;
}
/* Magical hover effects */
.highlight-item {
background-image:
radial-gradient(circle at 20% 50%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(14, 165, 233, 0.07) 0%, transparent 50%);
}
.faculty-card {
background-image:
radial-gradient(circle at 30% 40%, rgba(96, 165, 250, 0.06) 0%, transparent 60%),
radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}
/* Glowing text effects for dark mode */
.section-title {
position: relative;
text-shadow: 0 0 30px rgba(96, 165, 250, 0.3);
}
.section-title::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 50%, var(--theme-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: blur(25px);
opacity: 0.8;
z-index: -1;
}
/* Particle effects */
.program-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(96, 165, 250, 0.4), transparent),
radial-gradient(1px 1px at 40% 70%, rgba(59, 130, 246, 0.3), transparent),
radial-gradient(1px 1px at 90% 40%, rgba(14, 165, 233, 0.5), transparent),
radial-gradient(1px 1px at 60% 20%, rgba(96, 165, 250, 0.4), transparent),
radial-gradient(1px 1px at 10% 80%, rgba(59, 130, 246, 0.3), transparent);
background-repeat: repeat;
background-size: 300px 200px, 250px 300px, 200px 250px, 350px 280px, 180px 320px;
animation: floatingParticles 30s linear infinite;
z-index: 1;
pointer-events: none;
}
@keyframes floatingParticles {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: 0.8;
}
25% {
transform: translate(-30px, -40px) rotate(90deg);
opacity: 1;
}
50% {
transform: translate(40px, -20px) rotate(180deg);
opacity: 0.6;
}
75% {
transform: translate(-20px, 30px) rotate(270deg);
opacity: 0.9;
}
100% {
transform: translate(0, 0) rotate(360deg);
opacity: 0.8;
}
}
/* Dark mode glow animation */
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(96, 165, 250, 0.5);
}
}
.dark-glow {
animation: glow 3s ease-in-out infinite;
}
/* ===================================
Program Highlights Section
=================================== */
.program-highlights {
padding: 3rem 0;
}
.highlights-title {
color: var(--theme-primary);
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
}
.highlight-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.highlight-item {
background: var(--theme-gradient-secondary);
border: 1px solid var(--theme-border-accent);
border-radius: 1rem;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.highlight-item:hover {
border-color: var(--theme-primary);
box-shadow: 0 15px 40px var(--theme-shadow-medium);
transform: translateY(-5px);
}
.highlight-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.1), transparent);
transition: left 0.5s ease;
}
.highlight-item:hover::before {
left: 100%;
}
.highlight-icon {
background: var(--theme-primary);
color: var(--theme-text-inverse);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.5rem;
box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
transition: all 0.3s ease;
}
.highlight-item:hover .highlight-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
}
.highlight-content h4 {
color: var(--theme-primary);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.highlight-content p {
color: var(--theme-text-secondary);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
/* ===================================
Innovative Stream Tabs - Dark Theme
=================================== */
.stream-tabs-container {
margin: 2rem 0;
position: relative;
}
.stream-tabs-wrapper {
position: relative;
background: var(--theme-card-bg);
border-radius: 1.5rem;
padding: 0.5rem;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(25px);
}
.stream-tabs {
display: flex;
position: relative;
z-index: 2;
gap: 0.5rem;
}
.stream-tab {
flex: 1;
background: transparent;
border: none;
padding: 1.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
min-height: 80px;
}
.stream-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(30, 64, 175, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 1rem;
}
.stream-tab:hover::before {
opacity: 1;
}
.stream-tab.active {
color: white;
}
.stream-tab.active::before {
opacity: 0;
}
.tab-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(30, 64, 175, 0.08));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--theme-primary);
transition: all 0.4s ease;
flex-shrink: 0;
border: 1px solid rgba(59, 130, 246, 0.2);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}
.stream-tab:hover .tab-icon {
transform: scale(1.05);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(30, 64, 175, 0.1));
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}
.stream-tab.active .tab-icon {
background: rgba(255, 255, 255, 0.15);
color: white;
transform: scale(1.1);
box-shadow: 0 8px 30px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.tab-content {
flex: 1;
text-align: left;
}
.tab-title {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: var(--theme-text-primary);
margin-bottom: 0.25rem;
transition: color 0.3s ease;
}
.tab-subtitle {
display: block;
font-size: 0.85rem;
color: var(--theme-text-secondary);
transition: color 0.3s ease;
}
.stream-tab.active .tab-title,
.stream-tab.active .tab-subtitle {
color: white;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}
.tab-indicator {
width: 4px;
height: 24px;
background: var(--theme-primary);
border-radius: 2px;
opacity: 0;
transform: scaleY(0);
transition: all 0.3s ease;
box-shadow: 0 0 10px var(--theme-primary);
}
.stream-tab.active .tab-indicator {
opacity: 1;
transform: scaleY(1);
background: white;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
/* Tab Slider Background - Enhanced for Dark Theme */
.tab-slider {
position: absolute;
top: 0.5rem;
left: 0.5rem;
height: calc(100% - 1rem);
background: var(--theme-gradient-primary);
border-radius: 1rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4),
0 5px 20px rgba(30, 64, 175, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Tab Content Areas */
.stream-tab-content {
margin-top: 2rem;
}
.content-wrapper {
animation: slideInUp 0.6s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Session Info Styles - Dark Theme */
.session-info {
margin-top: 2rem;
background: var(--theme-card-bg);
border-radius: 1.5rem;
padding: 2rem;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.session-details h3 {
color: var(--theme-primary);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}
.session-details p {
color: var(--theme-text-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.session-highlights h4 {
color: var(--theme-primary);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
}
.session-highlights ul {
list-style: none;
padding: 0;
}
.session-highlights li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: var(--theme-text-secondary);
}
.session-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--theme-success);
font-weight: bold;
text-shadow: 0 0 10px var(--theme-success);
}
.session-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.next-session h4,
.chat-integration h4 {
color: var(--theme-primary);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
}
.next-session-card {
background: var(--theme-bg-secondary);
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid var(--theme-border-primary);
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.next-session-card:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.3);
border-color: var(--theme-primary);
}
.session-date {
font-size: 0.9rem;
color: var(--theme-text-tertiary);
margin-bottom: 0.5rem;
}
.session-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--theme-text-primary);
margin-bottom: 0.5rem;
}
.session-time {
font-size: 0.9rem;
color: var(--theme-primary);
font-weight: 600;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}
.chat-placeholder {
background: var(--theme-bg-secondary);
border-radius: 1rem;
padding: 2rem 1rem;
text-align: center;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.chat-placeholder i {
font-size: 2rem;
color: var(--theme-text-tertiary);
margin-bottom: 1rem;
}
.chat-placeholder p {
color: var(--theme-text-secondary);
margin: 0;
}
/* History Tab Specific Styles - Dark Theme */
.video-history-content {
background: transparent;
padding: 0;
}
.history-header {
margin-bottom: 2rem;
padding: 2rem;
background: var(--theme-card-bg);
border-radius: 1.5rem;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.history-header h3 {
color: var(--theme-primary);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 2px 15px rgba(59, 130, 246, 0.4);
}
.history-header p {
color: var(--theme-text-secondary);
margin: 0;
}
.archive-stats {
display: flex;
justify-content: flex-end;
}
.archive-stats .stat-item {
background: var(--theme-bg-secondary);
border: 1px solid var(--theme-border-primary);
border-radius: 1rem;
padding: 1rem 1.5rem;
text-align: center;
min-width: 120px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.archive-stats .stat-number {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--theme-primary);
margin-bottom: 0.25rem;
text-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}
.archive-stats .stat-label {
font-size: 0.9rem;
color: var(--theme-text-secondary);
font-weight: 500;
}
/* Upcoming Sessions Styles - Dark Theme */
.upcoming-sessions {
background: transparent;
padding: 0;
}
.upcoming-header {
text-align: center;
margin-bottom: 3rem;
padding: 2rem;
background: var(--theme-card-bg);
border-radius: 1.5rem;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.upcoming-header h3 {
color: var(--theme-primary);
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 2px 20px rgba(59, 130, 246, 0.5);
}
.upcoming-header p {
color: var(--theme-text-secondary);
font-size: 1.1rem;
margin: 0;
}
.sessions-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
}
.session-card {
background: var(--theme-card-bg);
border-radius: 1.5rem;
padding: 2rem;
border: 1px solid var(--theme-border-primary);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
gap: 2rem;
transition: all 0.3s ease;
}
.session-card:hover {
transform: translateY(-5px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.3);
border-color: var(--theme-primary);
}
.session-date-badge {
background: var(--theme-gradient-primary);
color: white;
border-radius: 1rem;
padding: 1rem;
text-align: center;
min-width: 80px;
flex-shrink: 0;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}
.session-date-badge .date {
display: block;
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.session-date-badge .year {
display: block;
font-size: 0.9rem;
opacity: 0.8;
margin-top: 0.25rem;
}
.session-content {
flex: 1;
}
.session-content h4 {
color: var(--theme-text-primary);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.session-content p {
color: var(--theme-text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.session-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.session-meta span {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--theme-text-tertiary);
font-size: 0.9rem;
}
.session-meta i {
color: var(--theme-primary);
text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}
.session-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 140px;
}
/* ===================================
Video History Section - Dark Theme
=================================== */
.video-history-section {
padding: 6rem 0;
background: linear-gradient(180deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 50%, var(--theme-bg-primary) 100%);
position: relative;
overflow: hidden;
}
.video-history-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.06) 0%, transparent 50%);
z-index: 1;
}
.video-history-section .container-fluid {
position: relative;
z-index: 2;
}
.video-history-section .section-header {
margin-bottom: 4rem;
}
.title-accent {
background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Video Controls - Dark Theme */
.video-controls {
margin-bottom: 3rem;
padding: 2rem;
background: var(--theme-card-bg);
border-radius: 1.5rem;
border: 1px solid var(--theme-border-accent);
box-shadow: 0 8px 32px var(--theme-shadow-medium);
backdrop-filter: blur(20px);
}
.search-box {
position: relative;
}
.search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--theme-text-tertiary);
z-index: 2;
}
.search-input {
padding-left: 3rem;
padding-right: 3rem;
border-radius: 0.75rem;
border: 2px solid var(--theme-border-primary);
background: var(--theme-input-bg);
color: var(--theme-text-primary);
transition: all 0.3s ease;
}
.search-input:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
background: var(--theme-input-bg);
color: var(--theme-text-primary);
}
.search-input::placeholder {
color: var(--theme-text-tertiary);
}
.search-loader {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
display: none;
}
.search-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--theme-border-primary);
border-top: 2px solid var(--theme-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.filter-controls {
display: flex;
gap: 1rem;
align-items: center;
justify-content: flex-end;
}
.sort-dropdown .form-select {
min-width: 160px;
border-radius: 0.75rem;
background: var(--theme-input-bg);
border: 2px solid var(--theme-border-primary);
color: var(--theme-text-primary);
}
.sort-dropdown .form-select:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}
.view-toggle {
display: flex;
gap: 0.5rem;
}
.view-btn {
padding: 0.5rem 0.75rem;
border: 2px solid var(--theme-border-primary);
background: transparent;
color: var(--theme-text-secondary);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.view-btn:hover {
border-color: var(--theme-primary);
color: var(--theme-primary);
}
.view-btn.active {
background: var(--theme-primary);
border-color: var(--theme-primary);
color: var(--theme-text-inverse);
}
/* Video Grid - Dark Theme */
.video-grid {
min-height: 400px;
margin-bottom: 3rem;
}
.video-grid.grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 2rem;
}
.video-grid.list-view {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Video Cards - Dark Theme */
.video-card {
background: var(--theme-card-bg);
border-radius: 1.25rem;
overflow: hidden;
border: 1px solid var(--theme-border-accent);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 20px var(--theme-shadow-medium);
position: relative;
cursor: pointer;
backdrop-filter: blur(10px);
}
.video-card.grid-view {
transform-style: preserve-3d;
}
.video-card.grid-view:hover {
transform: translateY(-8px) rotateX(2deg);
box-shadow: 0 20px 60px var(--theme-shadow-heavy);
border-color: var(--theme-primary);
}
.video-card.list-view {
display: flex;
align-items: stretch;
cursor: default;
}
.video-card.list-view:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px var(--theme-shadow-heavy);
border-color: var(--theme-primary);
}
/* Video Thumbnail - Dark Theme */
.video-thumbnail {
position: relative;
overflow: hidden;
border-radius: 1rem;
}
.video-card.grid-view .video-thumbnail {
aspect-ratio: 16/9;
border-radius: 1.25rem 1.25rem 0 0;
}
.video-card.list-view .video-thumbnail {
width: 300px;
flex-shrink: 0;
border-radius: 1.25rem 0 0 1.25rem;
}
.video-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.video-card:hover .video-thumbnail img {
transform: scale(1.05);
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(96, 165, 250, 0.3));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
}
.video-card:hover .video-overlay {
opacity: 1;
}
.play-button {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-primary);
font-size: 1.5rem;
transform: scale(0.8);
transition: all 0.3s ease;
}
.video-card:hover .play-button {
transform: scale(1);
background: white;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.video-actions-overlay {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
gap: 0.5rem;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.video-card:hover .video-actions-overlay {
opacity: 1;
transform: translateY(0);
}
.overlay-btn {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
color: var(--theme-primary);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.overlay-btn:hover {
background: white;
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.video-duration {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
}
/* Video Info - Dark Theme */
.video-info {
padding: 1.5rem;
}
.video-card.list-view .video-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.video-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--theme-text-primary);
margin-bottom: 0.75rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-description {
color: var(--theme-text-secondary);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-card.list-view .video-description {
-webkit-line-clamp: 3;
margin-bottom: 1.5rem;
}
.video-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.video-card.list-view .video-meta-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.video-card.list-view .video-stats {
display: flex;
gap: 1rem;
align-items: center;
}
.video-date,
.video-views {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--theme-text-tertiary);
}
.video-topics {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.topic-tag {
background: rgba(96, 165, 250, 0.1);
color: var(--theme-primary);
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid rgba(96, 165, 250, 0.2);
transition: all 0.3s ease;
}
.topic-tag:hover {
background: var(--theme-primary);
color: var(--theme-text-inverse);
border-color: var(--theme-primary);
}
/* List View Video Actions - Dark Theme */
.video-card.list-view .video-actions {
padding: 1.5rem;
border-left: 1px solid var(--theme-border-primary);
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
justify-content: center;
min-width: 120px;
}
.action-btn {
padding: 0.5rem 1rem;
border: 2px solid var(--theme-primary);
background: transparent;
color: var(--theme-primary);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
justify-content: center;
}
.action-btn.watch-btn:hover {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
.action-btn.share-btn {
padding: 0.5rem;
min-width: auto;
width: auto;
}
.action-btn.share-btn:hover {
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
/* No Videos State - Dark Theme */
.no-videos {
text-align: center;
padding: 4rem 2rem;
color: var(--theme-text-secondary);
}
.no-videos i {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.no-videos h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--theme-text-primary);
}
/* Pagination - Dark Theme */
.pagination-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
padding: 2rem;
background: var(--theme-card-bg);
border-radius: 1.5rem;
border: 1px solid var(--theme-border-accent);
box-shadow: 0 4px 20px var(--theme-shadow-medium);
flex-wrap: wrap;
gap: 1rem;
backdrop-filter: blur(20px);
}
.pagination-info {
color: var(--theme-text-secondary);
font-weight: 500;
}
.page-info {
color: var(--theme-text-primary);
}
.pagination {
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.page-item .page-link {
padding: 0.75rem 1rem;
border: 2px solid var(--theme-border-primary);
background: transparent;
color: var(--theme-text-secondary);
border-radius: 0.5rem;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.page-item .page-link:hover {
border-color: var(--theme-primary);
background: var(--theme-primary);
color: var(--theme-text-inverse);
}
.page-item.active .page-link {
background: var(--theme-primary);
border-color: var(--theme-primary);
color: var(--theme-text-inverse);
}
.page-item.disabled .page-link {
opacity: 0.5;
cursor: not-allowed;
}
.page-item.disabled .page-link:hover {
border-color: var(--theme-border-primary);
background: transparent;
color: var(--theme-text-secondary);
}
.pagination-controls .form-select {
min-width: 120px;
border-radius: 0.5rem;
background: var(--theme-input-bg);
border: 2px solid var(--theme-border-primary);
color: var(--theme-text-primary);
}
.pagination-controls .form-select:focus {
border-color: var(--theme-primary);
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}
/* Video Modal - Dark Theme */
.video-modal {
z-index: 9999 !important; /* Just above navbar (9998) */
padding-top: 50px;
max-height: 800px;
}
/* Force hide modal backdrop */
.modal-backdrop {
display: none !important;
}
.video-modal .modal-dialog {
max-width: 90vw;
width: 90vw;
margin: 2rem auto;
}
.video-modal .modal-content {
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-accent);
border-radius: 1.5rem;
box-shadow: 0 20px 80px var(--theme-shadow-heavy);
backdrop-filter: blur(30px);
}
.video-modal .modal-header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
border-bottom: none;
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
border-radius: 1.5rem 1.5rem 0 0;
}
.modal-title-container {
flex: 1;
margin-right: 1rem;
}
.modal-title {
font-size: 1.3rem;
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
line-height: 1.3;
max-width: 100%;
}
.video-modal .video-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.85rem;
opacity: 0.9;
}
.video-modal .video-meta span {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 0.85rem;
}
.video-modal .modal-close-btn {
background: rgba(255, 255, 255, 0.2) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
color: white !important;
border-radius: 50% !important;
width: 45px !important;
height: 45px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.2rem !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
.video-modal .modal-close-btn:hover,
.video-modal .modal-close-btn:focus {
background: rgba(255, 255, 255, 0.3) !important;
transform: scale(1.1) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
.video-modal .modal-close-btn:active {
transform: scale(0.95) !important;
}
.video-modal .modal-body {
padding: 0;
position: relative;
}
.video-modal .video-player-container {
position: relative;
background: #000;
width: 100%;
min-height: 400px; /* Ensure minimum height */
display: flex;
align-items: center;
justify-content: center;
}
.video-modal .video-responsive-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 40%; /* 16:9 aspect ratio */
overflow: hidden;
max-height: 70vh; /* Limit height to 70% of viewport */
min-height: 400px; /* Ensure minimum height */
}
.video-modal .video-responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
object-fit: contain; /* Ensure proper video scaling */
}
.video-modal .video-details {
padding: 2rem;
max-height: 25vh;
overflow-y: auto;
}
.video-description h4 {
color: var(--theme-primary);
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.video-description p {
color: var(--theme-text-secondary);
line-height: 1.6;
}
.video-topics h5 {
color: var(--theme-primary);
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}
.video-modal .modal-footer {
padding: 1rem 2rem 2rem;
border-top: 1px solid var(--theme-border-primary);
}
.video-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Toast Notifications - Dark Theme */
.toast-notification {
position: fixed;
top: 2rem;
right: 2rem;
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-accent);
border-radius: 0.75rem;
padding: 1rem 1.5rem;
box-shadow: 0 10px 40px var(--theme-shadow-heavy);
color: var(--theme-text-primary);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.75rem;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 10000;
backdrop-filter: blur(20px);
}
.toast-notification.show {
transform: translateX(0);
}
.toast-notification.toast-success {
border-color: var(--theme-success);
color: var(--theme-success);
}
.toast-notification.toast-success i {
color: var(--theme-success);
}
/* Responsive Design - Dark Theme */
@media (max-width: 1200px) {
.video-grid.grid-view {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.video-details {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 992px) {
.video-history-section {
padding: 4rem 0;
}
.video-controls {
padding: 1.5rem;
}
.filter-controls {
justify-content: center;
margin-top: 1rem;
}
.video-grid.grid-view {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.pagination-wrapper {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.video-modal .modal-dialog {
max-width: 90vw;
}
}
@media (max-width: 768px) {
.video-history-section {
padding: 3rem 0;
}
.video-history-section .section-header {
margin-bottom: 3rem;
}
.video-controls {
padding: 1rem;
}
.video-controls .row {
flex-direction: column;
gap: 1rem;
}
.filter-controls {
justify-content: space-between;
margin-top: 0;
}
.video-grid.grid-view {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.video-card.list-view {
flex-direction: column;
}
.video-card.list-view .video-thumbnail {
width: 100%;
aspect-ratio: 16/9;
border-radius: 1.25rem 1.25rem 0 0;
}
.video-card.list-view .video-actions {
padding: 1rem 1.5rem;
border-left: none;
border-top: 1px solid var(--theme-border-primary);
flex-direction: row;
min-width: auto;
}
.pagination {
flex-wrap: wrap;
justify-content: center;
}
.video-modal .modal-header,
.video-modal .modal-body {
padding-left: 1rem;
padding-right: 1rem;
}
.video-actions {
justify-content: center;
}
.toast-notification {
right: 1rem;
left: 1rem;
transform: translateY(-100%);
}
.toast-notification.show {
transform: translateY(0);
}
}
@media (max-width: 576px) {
.search-input {
font-size: 16px; /* Prevent zoom on iOS */
}
.video-card.list-view .video-meta-row {
flex-direction: column;
gap: 0.75rem;
}
.video-card.list-view .video-stats {
justify-content: space-between;
}
}
.highlight-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.highlight-item {
background: var(--theme-gradient-secondary);
border: 1px solid var(--theme-border-accent);
border-radius: 1rem;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.highlight-item:hover {
border-color: var(--theme-primary);
box-shadow: 0 15px 40px var(--theme-shadow-medium);
transform: translateY(-5px);
}
.highlight-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.1), transparent);
transition: left 0.5s ease;
}
.highlight-item:hover::before {
left: 100%;
}
.highlight-icon {
background: var(--theme-primary);
color: var(--theme-text-inverse);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 1.5rem;
box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
transition: all 0.3s ease;
}
.highlight-item:hover .highlight-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
}
.highlight-content h4 {
color: var(--theme-primary);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.highlight-content p {
color: var(--theme-text-secondary);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
/* ===================================
Faculty Section
=================================== */
.faculty-header h3 {
color: var(--theme-primary);
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
}
.faculty-header p {
color: var(--theme-text-secondary);
font-size: 1.2rem;
text-align: center;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.faculty-image {
border-radius: 1rem;
box-shadow: 0 20px 60px var(--theme-shadow-medium);
transition: all 0.3s ease;
border: 2px solid var(--theme-border-accent);
}
.faculty-image:hover {
transform: scale(1.02);
box-shadow: 0 25px 80px var(--theme-shadow-heavy);
border-color: var(--theme-primary);
}
.faculty-stat {
text-align: center;
padding: 1.5rem;
background: var(--theme-card-bg);
border-radius: 1rem;
border: 1px solid var(--theme-border-primary);
transition: all 0.3s ease;
}
.faculty-stat:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--theme-shadow-light);
border-color: var(--theme-border-accent);
}
.faculty-stat .stat-number {
color: var(--theme-primary);
font-size: 2.5rem;
font-weight: 800;
display: block;
line-height: 1;
}
.faculty-stat .stat-label {
color: var(--theme-text-secondary);
font-size: 0.9rem;
text-transform: uppercase;
font-weight: 600;
margin-top: 0.5rem;
}
.stat-icon {
color: var(--theme-primary);
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* ===================================
Stream Section
=================================== */
.stream-section {
background: linear-gradient(180deg, var(--theme-bg-secondary) 0%, var(--theme-bg-primary) 100%);
padding: 4rem 0;
}
.live-indicator {
background: #ef4444;
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.live-indicator::before {
content: '';
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* ===================================
Achievement Section
=================================== */
.achievement-section {
background: var(--theme-gradient-primary);
color: white;
padding: 4rem 0;
text-align: center;
}
.achievement-section h3 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
}
.achievement-section p {
font-size: 1.2rem;
margin-bottom: 0;
opacity: 0.9;
}
/* ===================================
Enhanced Responsive Design
=================================== */
@media (max-width: 1200px) {
.section-title {
font-size: 3rem;
}
.highlight-item {
padding: 1rem 1.25rem;
gap: 0.875rem;
}
.highlight-icon {
width: 38px;
height: 38px;
font-size: 1rem;
}
.faculty-card {
padding: 2.5rem;
}
}
@media (max-width: 992px) {
.program-section {
padding: 5rem 0;
}
.section-title {
font-size: 2.5rem;
}
.section-subtitle {
font-size: 1.2rem;
}
.highlights-title {
font-size: 1.8rem;
margin-bottom: 2rem;
}
.highlight-item {
flex-direction: column;
text-align: center;
padding: 1.5rem 1.25rem;
gap: 0.75rem;
}
.highlight-item:nth-child(even) {
flex-direction: column;
}
.highlight-icon {
margin-bottom: 0.5rem;
}
.faculty-stats {
flex-direction: column;
gap: 1.5rem;
}
.faculty-stat {
padding: 2rem 1.5rem;
}
}
@media (max-width: 768px) {
.program-section {
padding: 4rem 0;
}
.program-section::before,
.program-section::after {
display: none; /* Reduce complexity on mobile */
}
.section-title {
font-size: 2.2rem;
line-height: 1.3;
text-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}
.section-subtitle {
font-size: 1.1rem;
padding: 0 1rem;
}
.highlights-title {
font-size: 1.6rem;
margin-bottom: 1.5rem;
}
.highlight-item {
padding: 1.25rem 1rem;
border-radius: 0.75rem;
gap: 0.625rem;
/* Simplify effects on mobile */
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(10px);
}
.highlight-item:hover {
transform: translateY(-3px);
/* Reduce 3D effects on mobile */
}
.highlight-icon {
width: 36px;
height: 36px;
font-size: 0.95rem;
}
.highlight-content h4 {
font-size: 1rem;
margin-bottom: 0.4rem;
}
.highlight-content p {
font-size: 0.85rem;
}
.faculty-card {
padding: 2rem 1.5rem;
border-radius: 1.5rem;
/* Simplify effects on mobile */
background: rgba(30, 41, 59, 0.95);
backdrop-filter: blur(15px);
}
.faculty-card:hover {
transform: translateY(-8px);
/* Reduce 3D effects on mobile */
}
.faculty-header h3 {
font-size: 1.8rem;
}
.faculty-stat .stat-number {
font-size: 2rem;
}
.faculty-stat .stat-label {
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.program-section {
padding: 3rem 0;
}
.section-header {
margin-bottom: 3rem;
}
.section-title {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 1rem;
}
.highlights-title {
font-size: 1.4rem;
margin-bottom: 1.25rem;
}
.highlight-item {
padding: 1rem 0.875rem;
gap: 0.625rem;
}
.highlight-icon {
width: 34px;
height: 34px;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.highlight-content h4 {
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.highlight-content p {
font-size: 0.8rem;
line-height: 1.3;
}
.faculty-card {
padding: 1.8rem 1.2rem;
}
.faculty-header h3 {
font-size: 1.6rem;
}
.faculty-header p {
font-size: 1rem;
}
.faculty-stats {
gap: 1rem;
}
.faculty-stat {
padding: 1.5rem 1rem;
}
.faculty-stat .stat-number {
font-size: 1.8rem;
}
}
/* High-resolution displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.highlight-icon,
.faculty-image {
backface-visibility: hidden;
transform: translateZ(0);
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.highlight-item,
.faculty-card,
.section-badge,
.section-title,
.section-subtitle {
animation: none;
opacity: 1;
}
.program-section::before,
.program-section::after {
animation: none;
}
.highlight-item:hover,
.faculty-card:hover {
transform: none;
}
.highlight-icon:hover {
transform: scale(1.05);
}
}
/* ===================================
Dashboard Hero Section - ENHANCED
=================================== */
.dashboard-hero {
position: relative;
min-height: 100vh;
max-height: 80vh;
background: var(--theme-gradient-hero);
overflow: hidden;
display: flex;
align-items: flex-start;
margin-top: -100px;
padding: 120px 0 40px 0;
}
.dashboard-hero .row {
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
width: 100%;
}
.dashboard-hero .col-12 {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 160px);
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.4), transparent),
radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.4), transparent),
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.3), transparent);
z-index: 1;
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.2), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(99, 102, 241, 0.3), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(139, 92, 246, 0.2), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.1), transparent);
background-repeat: repeat;
background-size: 150px 100px;
animation: float 20s infinite linear;
z-index: 1;
}
@keyframes float {
0% { transform: translate(0, 0); }
100% { transform: translate(-100px, -50px); }
}
.hero-badge {
display: inline-block;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(99, 102, 241, 0.5);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
color: white;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.text-gradient-white {
background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.3rem;
opacity: 0.9;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: rgba(255, 255, 255, 0.8);
animation: fadeInUp 0.8s ease-out 0.4s both;
}
/* ===================================
Enhanced Countdown Timer
=================================== */
.countdown-container {
margin: 3rem auto;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(20px);
border-radius: 1.5rem;
padding: 2rem;
border: 1px solid rgba(99, 102, 241, 0.3);
animation: fadeInUp 0.8s ease-out 0.6s both;
max-width: 800px;
}
.countdown-title {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
color: white;
text-align: center;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.time-unit {
text-align: center;
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 1rem;
padding: 1.5rem 1rem;
min-width: 100px;
transition: all 0.3s ease;
}
.time-unit:hover {
transform: translateY(-5px);
background: rgba(30, 41, 59, 0.9);
border-color: rgba(99, 102, 241, 0.6);
}
.time-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: white;
}
.time-label {
display: block;
font-size: 0.9rem;
opacity: 0.8;
margin-top: 0.5rem;
color: rgba(255, 255, 255, 0.7);
}
/* ===================================
Enhanced Hero Actions
=================================== */
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
animation: fadeInUp 0.8s ease-out 0.8s both;
flex-wrap: wrap;
}
.btn-hero-primary, .btn-hero-secondary {
padding: 1rem 2rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1.1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.btn-hero-primary {
background: rgba(255, 255, 255, 0.9);
color: var(--theme-primary);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.btn-hero-primary:hover {
background: white;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
color: var(--theme-primary);
}
.btn-hero-secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.4);
}
.btn-hero-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.7);
transform: translateY(-3px);
color: white;
}
/* ===================================
Scroll Indicator
=================================== */
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
animation: bounce 2s infinite;
}
.scroll-arrow {
width: 2rem;
height: 2rem;
border: 2px solid white;
border-top: none;
border-left: none;
transform: rotate(45deg);
opacity: 0.7;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
/* ===================================
Enhanced Stream Section
=================================== */
.stream-section {
padding: 2rem;
background: linear-gradient(180deg, var(--theme-bg-secondary) 0%, var(--theme-bg-primary) 100%);
}
.stream-header {
padding: 2rem 0;
}
.stream-title-container {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
}
.live-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
background: #dc2626;
color: white;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-weight: 600;
font-size: 0.9rem;
animation: pulse 2s infinite;
}
.pulse-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.stream-title {
font-size: 2rem;
font-weight: 700;
color: var(--theme-primary);
margin: 0;
}
.stream-subtitle {
color: var(--theme-text-secondary);
margin: 0.5rem 0 0 0;
font-size: 1.1rem;
}
.stream-stats {
display: flex;
gap: 1rem;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
.stream-stat {
text-align: center;
padding: 1rem;
background: var(--theme-card-bg);
border-radius: 1rem;
border: 1px solid var(--theme-border-primary);
min-width: 120px;
transition: all 0.3s ease;
}
.stream-stat:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--theme-shadow-light);
}
.stat-number {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--theme-primary);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--theme-text-secondary);
font-weight: 500;
}
/* Header Stats (inline style for stream header) */
.header-stat {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-left: 0;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 120px;
flex-shrink: 0;
}
.header-stat:first-child {
margin-left: 0;
}
.header-stat-icon {
color: var(--theme-primary);
font-size: 1rem;
}
.header-stat-number {
color: var(--theme-text-primary);
font-weight: 700;
font-size: 1.1rem;
}
.header-stat-label {
color: var(--theme-text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
/* Mobile Enhancement for Stream Section */
@media (max-width: 768px) {
.stream-section {
padding: 1.5rem 1rem;
text-align: center;
}
.stream-header {
padding: 1rem 0 2rem 0;
}
.stream-title-container {
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.live-indicator {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
padding: 0.75rem 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
font-size: 0.85rem;
font-weight: 700;
}
.pulse-dot {
width: 10px;
height: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.stream-title {
font-size: 1.8rem;
font-weight: 800;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
line-height: 1.2;
}
.stream-subtitle {
font-size: 1rem;
text-align: center;
opacity: 0.9;
margin: 0.75rem 0 0 0;
}
.stream-stats {
flex-direction: column;
gap: 0.75rem;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 1rem;
}
.header-stat {
display: flex;
width: auto;
max-width: 240px;
margin: 0;
padding: 0.75rem 1.25rem;
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.8) 0%,
rgba(51, 65, 85, 0.9) 100%);
backdrop-filter: blur(20px);
border-radius: 1rem;
border: 1px solid rgba(96, 165, 250, 0.15);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-width: 140px;
}
.header-stat:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(96, 165, 250, 0.2);
}
.header-stat-icon {
font-size: 1.2rem;
width: 20px;
text-align: center;
}
.header-stat-number {
font-size: 1.3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-stat-label {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
/* ===================================
Enhanced Video Container
=================================== */
.video-container {
background: var(--theme-card-bg);
border: 1px solid var(--theme-border-accent);
border-radius: 1.5rem;
padding: 1.5rem;
box-shadow: 0 20px 60px var(--theme-shadow-medium);
transition: all 0.3s ease;
}
.video-container:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px var(--theme-shadow-heavy);
}
.video-wrapper {
position: relative;
width: 100%;
height: 500px;
border-radius: 1rem;
overflow: hidden;
background: var(--theme-bg-tertiary);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* ===================================
Enhanced Program Section
=================================== */
.program-section {
padding: 6rem 0;
background: radial-gradient(ellipse at top, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
linear-gradient(180deg, var(--theme-bg-secondary) 0%, var(--theme-bg-primary) 100%);
position: relative;
overflow: hidden;
}
.program-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 200px 200px;
animation: floatBackground 25s ease-in-out infinite;
z-index: 0;
}
@keyframes floatBackground {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(-20px, -30px) rotate(2deg); }
50% { transform: translate(30px, -20px) rotate(-1deg); }
75% { transform: translate(-15px, 25px) rotate(1deg); }
}
.section-header {
position: relative;
z-index: 2;
margin-bottom: 4rem;
}
.section-badge {
display: inline-block;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
color: var(--theme-text-inverse);
padding: 0.6rem 2rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);
position: relative;
overflow: hidden;
animation: badgeShimmer 3s ease-in-out infinite;
}
.section-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.8s ease;
}
.section-badge:hover::before {
left: 100%;
}
@keyframes badgeShimmer {
0%, 100% { box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4); }
50% { box-shadow: 0 12px 35px rgba(96, 165, 250, 0.6); }
}
.section-title {
font-size: 3.5rem;
font-weight: 800;
color: var(--theme-text-primary); /* Fallback color */
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 50%, var(--theme-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: 1.5rem;
line-height: 1.2;
position: relative;
animation: titleGlow 4s ease-in-out infinite;
}
/* Fallback for browsers that don't support background-clip */
@supports not (background-clip: text) {
.section-title {
color: var(--theme-primary) !important;
-webkit-text-fill-color: var(--theme-primary) !important;
}
}
@keyframes titleGlow {
0%, 100% { filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.4)); }
50% { filter: drop-shadow(0 0 25px rgba(96, 165, 250, 0.6)); }
}
.section-subtitle {
color: var(--theme-text-secondary);
text-align: center;
font-size: 1.3rem;
margin-bottom: 0;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
position: relative;
z-index: 2;
}
/* Enhanced Highlights */
.program-highlights {
position: relative;
z-index: 2;
}
.highlights-title {
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2.5rem;
text-align: center;
position: relative;
}
.highlights-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
border-radius: 2px;
}
.highlight-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
perspective: 1000px;
}
.highlight-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.95) 0%,
rgba(51, 65, 85, 0.98) 50%,
rgba(71, 85, 105, 0.95) 100%);
backdrop-filter: blur(15px);
border: 1px solid rgba(96, 165, 250, 0.15);
border-radius: 0.875rem;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 3px 15px rgba(96, 165, 250, 0.08),
0 1px 3px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
min-height: 70px;
}
.highlight-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(96, 165, 250, 0.08),
rgba(59, 130, 246, 0.06),
transparent);
transition: left 0.5s ease;
z-index: 1;
}
.highlight-item:hover::before {
left: 100%;
}
.highlight-item:hover {
transform: translateY(-4px) rotateX(2deg);
box-shadow: 0 12px 35px rgba(96, 165, 250, 0.15),
0 6px 20px rgba(59, 130, 246, 0.12),
0 3px 10px rgba(0, 0, 0, 0.4);
border-color: rgba(96, 165, 250, 0.3);
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.98) 0%,
rgba(51, 65, 85, 1) 50%,
rgba(71, 85, 105, 0.98) 100%);
}
.highlight-item:nth-child(even) {
flex-direction: row-reverse;
}
.highlight-item:nth-child(1) { animation-delay: 0.1s; }
.highlight-item:nth-child(2) { animation-delay: 0.15s; }
.highlight-item:nth-child(3) { animation-delay: 0.2s; }
.highlight-item:nth-child(4) { animation-delay: 0.25s; }
.highlight-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 50%, var(--theme-accent) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-text-inverse);
font-size: 1.1rem;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(96, 165, 250, 0.3),
0 2px 8px rgba(59, 130, 246, 0.2);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
overflow: hidden;
}
.highlight-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.highlight-item:hover .highlight-icon {
transform: scale(1.08) rotate(5deg);
box-shadow: 0 12px 30px rgba(96, 165, 250, 0.4),
0 6px 15px rgba(59, 130, 246, 0.3);
}
.highlight-item:hover .highlight-icon::before {
width: 100%;
height: 100%;
}
.highlight-content {
flex: 1;
position: relative;
z-index: 2;
}
.highlight-content h4 {
font-size: 1.05rem;
font-weight: 700;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.25rem;
line-height: 1.2;
}
.highlight-content p {
color: var(--theme-text-secondary);
margin: 0;
line-height: 1.4;
font-size: 0.9rem;
font-weight: 400;
}
/* ===================================
Enhanced Faculty Card
=================================== */
.faculty-card {
background: linear-gradient(145deg,
rgba(30, 41, 59, 0.95) 0%,
rgba(51, 65, 85, 0.9) 100%);
backdrop-filter: blur(30px);
border-radius: 2rem;
padding: 3rem;
box-shadow: 0 25px 80px rgba(96, 165, 250, 0.15),
0 10px 40px rgba(59, 130, 246, 0.12),
0 5px 20px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(96, 165, 250, 0.2);
height: 100%;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.faculty-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(96, 165, 250, 0.08) 0%,
transparent 30%);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.faculty-card:hover::before {
opacity: 1;
transform: rotate(45deg) scale(1.2);
}
.faculty-card:hover {
transform: translateY(-15px) rotateX(8deg) rotateY(-2deg);
box-shadow: 0 40px 100px rgba(96, 165, 250, 0.2),
0 20px 60px rgba(59, 130, 246, 0.18),
0 10px 30px rgba(0, 0, 0, 0.5);
border-color: rgba(96, 165, 250, 0.35);
}
.faculty-header {
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.faculty-header h3 {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.8rem;
position: relative;
}
.faculty-header h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-secondary) 100%);
border-radius: 2px;
}
.faculty-header p {
color: var(--theme-text-secondary);
margin: 0;
font-size: 1.1rem;
font-weight: 500;
}
.faculty-image-container {
text-align: center;
margin: 2.5rem 0;
position: relative;
z-index: 2;
}
.faculty-image {
max-width: 100%;
height: auto;
border-radius: 1.5rem;
box-shadow: 0 20px 60px rgba(96, 165, 250, 0.25),
0 10px 30px rgba(59, 130, 246, 0.2);
border: 4px solid rgba(96, 165, 250, 0.2);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.faculty-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(96, 165, 250, 0.15) 0%,
transparent 50%,
rgba(59, 130, 246, 0.15) 100%);
border-radius: 1.2rem;
opacity: 0;
transition: opacity 0.4s ease;
}
.faculty-card:hover .faculty-image {
transform: scale(1.05) rotate(-1deg);
box-shadow: 0 30px 80px rgba(96, 165, 250, 0.3),
0 15px 40px rgba(59, 130, 246, 0.25);
border-color: rgba(96, 165, 250, 0.4);
}
.faculty-card:hover .faculty-image::before {
opacity: 1;
}
.faculty-footer {
position: relative;
z-index: 2;
}
.faculty-stats {
display: flex;
justify-content: space-between;
margin-top: 2.5rem;
gap: 2rem;
}
.faculty-stat {
text-align: center;
padding: 0;
background: transparent;
border: none;
transition: all 0.3s ease;
flex: 1;
position: relative;
}
.faculty-stat:hover {
transform: translateY(-2px);
}
.faculty-stat .stat-number {
display: block;
font-size: 2.2rem;
font-weight: 800;
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.5rem;
position: relative;
}
.faculty-stat .stat-label {
font-size: 0.85rem;
color: var(--theme-text-secondary);
margin-top: 0.5rem;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1.2;
}
/* ===================================
Enhanced Achievement Section
=================================== */
.achievement-section {
padding: 4rem 0;
background: var(--theme-gradient-primary);
color: white;
text-align: center;
}
.achievement-item {
padding: 2rem 1rem;
text-align: center;
}
.achievement-number {
font-size: 3rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: rgba(255, 255, 255, 0.15);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}
.achievement-label {
font-size: 1rem;
opacity: 0.85;
font-weight: 500;
}
/* ===================================
Enhanced Animations
=================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* ===================================
Enhanced Responsive Design
=================================== */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.countdown-timer {
gap: 1rem;
}
.time-unit {
min-width: 80px;
padding: 1rem 0.5rem;
}
.time-number {
font-size: 2rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.btn-hero-primary,
.btn-hero-secondary {
width: 100%;
max-width: 300px;
}
.section-title {
font-size: 2rem;
}
.faculty-stats {
flex-direction: column;
gap: 1rem;
}
.highlight-list {
gap: 1.5rem;
}
.highlight-item {
flex-direction: column;
text-align: center;
}
.highlight-icon {
align-self: center;
}
}
/* ===================================
Mobile Responsive - Stream Tabs - Dark Theme
=================================== */
/* Large tablets and small desktops */
@media (max-width: 992px) {
.stream-tabs-wrapper {
padding: 0.4rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.stream-tab {
padding: 1.2rem 0.8rem;
gap: 0.8rem;
min-height: 70px;
}
.tab-icon {
width: 42px;
height: 42px;
font-size: 1.1rem;
box-shadow: 0 3px 12px rgba(59, 130, 246, 0.08);
}
.tab-title {
font-size: 1rem;
}
.tab-subtitle {
font-size: 0.8rem;
}
}
/* Tablets */
@media (max-width: 768px) {
.stream-tabs-container {
margin: 1.5rem 0;
}
.stream-tabs-wrapper {
padding: 0.3rem;
border-radius: 1.2rem;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.stream-tabs {
flex-direction: column;
gap: 0.3rem;
}
.stream-tab {
flex: none;
padding: 1rem;
border-radius: 0.8rem;
min-height: 60px;
gap: 0.75rem;
}
.tab-icon {
width: 38px;
height: 38px;
font-size: 1rem;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.1);
}
.tab-content {
text-align: left;
}
.tab-title {
font-size: 0.95rem;
margin-bottom: 0.2rem;
}
.tab-subtitle {
font-size: 0.75rem;
}
.tab-indicator {
width: 3px;
height: 20px;
box-shadow: 0 0 10px var(--theme-primary);
}
.stream-tab.active .tab-indicator {
box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
/* Tab slider for vertical layout - Dark theme enhanced */
.tab-slider {
top: 0.3rem;
left: 0.3rem;
right: 0.3rem;
width: calc(100% - 0.6rem) !important;
height: auto;
transform: translateY(0px) !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 12px 35px rgba(59, 130, 246, 0.3),
0 4px 15px rgba(30, 64, 175, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* Mobile phones */
@media (max-width: 576px) {
.stream-tabs-container {
margin: 1rem 0;
}
.stream-tabs-wrapper {
padding: 0.25rem;
border-radius: 1rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.stream-tab {
padding: 0.8rem;
gap: 0.6rem;
min-height: 55px;
border-radius: 0.7rem;
}
.tab-icon {
width: 34px;
height: 34px;
font-size: 0.9rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.stream-tab:hover .tab-icon {
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}
.stream-tab.active .tab-icon {
box-shadow: 0 6px 25px rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.tab-title {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
}
.tab-subtitle {
font-size: 0.7rem;
line-height: 1.2;
}
.stream-tab.active .tab-title,
.stream-tab.active .tab-subtitle {
text-shadow: 0 1px 8px rgba(255, 255, 255, 0.2);
}
.tab-indicator {
width: 2px;
height: 16px;
}
/* Optimize for small screens - Dark theme */
.session-info {
padding: 1.5rem;
margin-top: 1.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.session-details h3 {
font-size: 1.3rem;
text-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.session-highlights h4 {
font-size: 1.1rem;
text-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}
.next-session-card {
padding: 1.2rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.chat-placeholder {
padding: 1.5rem 0.8rem;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
}
/* Extra small devices */
@media (max-width: 480px) {
.stream-tabs-wrapper {
margin: 0 -0.5rem;
border-radius: 0.8rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.stream-tab {
padding: 0.7rem;
gap: 0.5rem;
min-height: 50px;
}
.tab-icon {
width: 30px;
height: 30px;
font-size: 0.8rem;
border-radius: 6px;
}
.tab-title {
font-size: 0.85rem;
font-weight: 600;
}
.tab-subtitle {
font-size: 0.65rem;
opacity: 0.8;
}
/* Simplify hover effects on very small screens - Dark theme */
.stream-tab::before {
display: none;
}
.stream-tab:hover .tab-icon {
transform: scale(1.02);
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.12);
}
.stream-tab.active .tab-icon {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
}
/* Landscape orientation optimization for phones - Dark theme */
@media (max-width: 768px) and (orientation: landscape) {
.stream-tabs {
flex-direction: row;
gap: 0.3rem;
}
.stream-tab {
flex: 1;
padding: 0.6rem;
min-height: 50px;
}
.tab-content {
text-align: center;
}
.tab-title {
font-size: 0.8rem;
margin-bottom: 0.1rem;
}
.tab-subtitle {
font-size: 0.65rem;
}
.tab-icon {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
/* Reset slider for horizontal layout - Dark theme enhanced */
.tab-slider {
top: 0.3rem;
left: 0.3rem;
right: auto;
width: auto !important;
height: calc(100% - 0.6rem) !important;
transform: translateX(0px) translateY(0px) !important;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4),
0 3px 12px rgba(30, 64, 175, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
/* ===================================
Mobile Responsive - Upcoming Sessions - Dark Theme
=================================== */
/* Large tablets */
@media (max-width: 992px) {
.upcoming-header {
padding: 1.5rem;
margin-bottom: 2.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.upcoming-header h3 {
font-size: 1.8rem;
text-shadow: 0 2px 15px rgba(59, 130, 246, 0.4);
}
.upcoming-header p {
font-size: 1rem;
}
.session-card {
padding: 1.5rem;
gap: 1.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.session-card:hover {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.3);
}
.session-date-badge {
min-width: 70px;
padding: 0.8rem;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
.session-date-badge .date {
font-size: 1.1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.session-content h4 {
font-size: 1.2rem;
}
.session-actions {
min-width: 130px;
}
}
/* Tablets */
@media (max-width: 768px) {
.upcoming-header {
padding: 1.2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.upcoming-header h3 {
font-size: 1.6rem;
margin-bottom: 0.8rem;
text-shadow: 0 2px 12px rgba(59, 130, 246, 0.4);
}
.upcoming-header p {
font-size: 0.95rem;
}
.session-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
gap: 1.2rem;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.session-card:hover {
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.4);
}
.session-date-badge {
align-self: center;
min-width: 80px;
padding: 1rem;
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}
.session-date-badge .date {
font-size: 1.2rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.session-content {
text-align: center;
}
.session-content h4 {
font-size: 1.2rem;
margin-bottom: 0.8rem;
}
.session-content p {
margin-bottom: 1.2rem;
}
.session-meta {
justify-content: center;
gap: 1rem;
}
.session-meta i {
text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
.session-actions {
min-width: auto;
flex-direction: row;
justify-content: center;
gap: 1rem;
}
.session-actions .btn {
min-width: 120px;
}
}
/* Mobile phones */
@media (max-width: 576px) {
.upcoming-header {
padding: 1rem;
margin-bottom: 1.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.upcoming-header h3 {
font-size: 1.4rem;
text-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}
.upcoming-header p {
font-size: 0.9rem;
}
.sessions-timeline {
gap: 1.5rem;
}
.session-card {
padding: 1.2rem;
gap: 1rem;
border-radius: 1.2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.session-card:hover {
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.5);
}
.session-date-badge {
min-width: 70px;
padding: 0.8rem;
border-radius: 0.8rem;
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.session-date-badge .date {
font-size: 1.1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.session-date-badge .year {
font-size: 0.8rem;
}
.session-content h4 {
font-size: 1.1rem;
margin-bottom: 0.6rem;
}
.session-content p {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.session-meta {
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.session-meta span {
font-size: 0.8rem;
}
.session-meta i {
text-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}
.session-actions {
flex-direction: column;
gap: 0.8rem;
align-items: center;
}
.session-actions .btn {
width: 100%;
max-width: 200px;
padding: 0.7rem 1rem;
font-size: 0.9rem;
}
/* Stream stats mobile fix */
.stream-stats {
gap: 0.5rem;
margin-top: 0.5rem;
}
.header-stat {
max-width: 180px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
border-radius: 0.8rem;
min-width: 120px;
}
.header-stat-icon {
font-size: 0.9rem;
}
.header-stat-number {
font-size: 1rem;
font-weight: 700;
}
.header-stat-label {
font-size: 0.75rem;
font-weight: 600;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.upcoming-sessions {
padding: 0 0.5rem;
}
.upcoming-header {
padding: 0.8rem;
margin-bottom: 1.2rem;
border-radius: 1.2rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.upcoming-header h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
text-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}
.upcoming-header p {
font-size: 0.85rem;
line-height: 1.4;
}
.sessions-timeline {
gap: 1.2rem;
}
.session-card {
padding: 1rem;
gap: 0.8rem;
margin: 0 -0.5rem;
border-radius: 1rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.session-card:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(59, 130, 246, 0.6);
}
.session-date-badge {
min-width: 60px;
padding: 0.6rem;
border-radius: 0.6rem;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.5);
}
.session-date-badge .date {
font-size: 1rem;
line-height: 1;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.session-date-badge .year {
font-size: 0.75rem;
margin-top: 0.2rem;
}
.session-content h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.session-content p {
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 0.8rem;
}
.session-meta {
gap: 0.4rem;
}
.session-meta span {
font-size: 0.75rem;
}
.session-meta i {
font-size: 0.7rem;
text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}
.session-actions {
gap: 0.6rem;
}
.session-actions .btn {
padding: 0.6rem 0.8rem;
font-size: 0.8rem;
border-radius: 0.5rem;
}
.session-actions .btn-primary {
min-height: 40px;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.session-actions .btn-outline-primary {
min-height: 40px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
}
/* Landscape orientation for phones - Dark theme */
@media (max-width: 768px) and (orientation: landscape) {
.upcoming-header {
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.upcoming-header h3 {
font-size: 1.4rem;
margin-bottom: 0.5rem;
text-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}
.upcoming-header p {
font-size: 0.9rem;
}
.session-card {
flex-direction: row;
text-align: left;
padding: 1rem;
gap: 1rem;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.session-card:hover {
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.4);
}
.session-date-badge {
align-self: flex-start;
min-width: 60px;
padding: 0.6rem;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.session-content {
text-align: left;
flex: 1;
}
.session-content h4 {
font-size: 1rem;
margin-bottom: 0.4rem;
}
.session-content p {
font-size: 0.8rem;
margin-bottom: 0.6rem;
}
.session-meta {
flex-direction: row;
justify-content: flex-start;
gap: 1rem;
}
.session-meta i {
text-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
}
.session-actions {
flex-direction: row;
min-width: auto;
gap: 0.5rem;
}
.session-actions .btn {
padding: 0.5rem 0.8rem;
font-size: 0.8rem;
min-width: 80px;
}
}