/* These styles are generated from project.scss. */
/* ============================================
DESIGN SYSTEM FOUNDATION
Phase 1: Foundation & Visual Polish
============================================ */
/* CSS Custom Properties (Variables) */
:root {
/* Color System - Primary Palette */
--color-primary: #667eea;
--color-primary-dark: #5568d3;
--color-primary-light: #7c8ef0;
--color-secondary: #764ba2;
--color-secondary-dark: #5d3a7f;
--color-secondary: #764ba2;
/* Color System - Accent Colors */
--color-accent-gold: #ffd700;
--color-accent-gold-light: #ffed4e;
--color-accent-gold-dark: #bfa100;
/* Color System - Semantic Colors */
--color-success: #28a745;
--color-success-light: #34ce57;
--color-success-dark: #218838;
--color-warning: #ffc107;
--color-warning-light: #ffcd39;
--color-warning-dark: #e0a800;
--color-error: #dc3545;
--color-error-light: #e4606d;
--color-error-dark: #c82333;
--color-info: #17a2b8;
--color-info-light: #3fc1d8;
--color-info-dark: #138496;
/* Color System - Neutral Colors */
--color-text-primary: #212529;
--color-text-secondary: #6c757d;
--color-text-muted: #adb5bd;
--color-text-inverse: #ffffff;
--color-bg-primary: #ffffff;
--color-bg-secondary: #f8f9fa;
--color-bg-tertiary: #e9ecef;
--color-border: #dee2e6;
--color-border-light: #e9ecef;
--color-border-dark: #adb5bd;
/* Spacing Scale (8px base) */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
--spacing-2xl: 3rem; /* 48px */
--spacing-3xl: 4rem; /* 64px */
/* Typography Scale */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-family-heading: var(--font-family-base);
--font-family-brand: "Dancing Script", cursive;
--font-family-monospace: "Courier New", Courier, monospace;
/* Font Sizes */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Letter Spacing */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Border Radius */
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-2xl: 1.25rem; /* 20px */
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Z-index Scale */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* Dark Mode Theme */
[data-theme="dark"] {
/* Color System - Primary Palette (Dark) */
--color-primary: #7c8ef0;
--color-primary-dark: #667eea;
--color-primary-light: #9aa5f5;
--color-secondary: #8b6fb8;
--color-secondary-dark: #764ba2;
--color-secondary-light: #a08bc5;
/* Color System - Accent Colors (Dark) */
--color-accent-gold: #ffd700;
--color-accent-gold-light: #ffed4e;
--color-accent-gold-dark: #bfa100;
/* Color System - Semantic Colors (Dark) */
--color-success: #34ce57;
--color-success-light: #4dd66f;
--color-success-dark: #28a745;
--color-warning: #ffcd39;
--color-warning-light: #ffd966;
--color-warning-dark: #ffc107;
--color-error: #e4606d;
--color-error-light: #eb7a85;
--color-error-dark: #dc3545;
--color-info: #3fc1d8;
--color-info-light: #5ccde5;
--color-info-dark: #17a2b8;
/* Color System - Neutral Colors (Dark) */
--color-text-primary: #e9ecef;
--color-text-secondary: #adb5bd;
--color-text-muted: #6c757d;
--color-text-inverse: #212529;
--color-bg-primary: #1a1d24;
--color-bg-secondary: #252932;
--color-bg-tertiary: #2d3139;
--color-border: #3d4149;
--color-border-light: #2d3139;
--color-border-dark: #4d5159;
}
/* System Dark Mode Preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Color System - Primary Palette (Dark) */
--color-primary: #7c8ef0;
--color-primary-dark: #667eea;
--color-primary-light: #9aa5f5;
--color-secondary: #8b6fb8;
--color-secondary-dark: #764ba2;
--color-secondary-light: #a08bc5;
/* Color System - Accent Colors (Dark) */
--color-accent-gold: #ffd700;
--color-accent-gold-light: #ffed4e;
--color-accent-gold-dark: #bfa100;
/* Color System - Semantic Colors (Dark) */
--color-success: #34ce57;
--color-success-light: #4dd66f;
--color-success-dark: #28a745;
--color-warning: #ffcd39;
--color-warning-light: #ffd966;
--color-warning-dark: #ffc107;
--color-error: #e4606d;
--color-error-light: #eb7a85;
--color-error-dark: #dc3545;
--color-info: #3fc1d8;
--color-info-light: #5ccde5;
--color-info-dark: #17a2b8;
/* Color System - Neutral Colors (Dark) */
--color-text-primary: #e9ecef;
--color-text-secondary: #adb5bd;
--color-text-muted: #6c757d;
--color-text-inverse: #212529;
--color-bg-primary: #1a1d24;
--color-bg-secondary: #252932;
--color-bg-tertiary: #2d3139;
--color-border: #3d4149;
--color-border-light: #2d3139;
--color-border-dark: #4d5159;
}
}
/* Force Light Theme */
[data-theme="light"] {
--color-primary: #667eea;
--color-primary-dark: #5568d3;
--color-primary-light: #7c8ef0;
--color-secondary: #764ba2;
--color-secondary-dark: #5d3a7f;
--color-secondary-light: #8b6fb8;
--color-text-primary: #212529;
--color-text-secondary: #6c757d;
--color-text-muted: #adb5bd;
--color-text-inverse: #ffffff;
--color-bg-primary: #ffffff;
--color-bg-secondary: #f8f9fa;
--color-bg-tertiary: #e9ecef;
--color-border: #dee2e6;
--color-border-light: #e9ecef;
--color-border-dark: #adb5bd;
}
/* Typography System */
/* Base Typography */
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
letter-spacing: var(--letter-spacing-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Headings */
h1, .h1 {
font-family: var(--font-family-heading);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-lg);
}
h2, .h2 {
font-family: var(--font-family-heading);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-md);
}
h3, .h3 {
font-family: var(--font-family-heading);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
letter-spacing: var(--letter-spacing-normal);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-md);
}
h4, .h4 {
font-family: var(--font-family-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-md);
}
h5, .h5 {
font-family: var(--font-family-heading);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-normal);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-sm);
}
h6, .h6 {
font-family: var(--font-family-heading);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
}
/* Body Text */
p, .text-body {
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
color: var(--color-text-primary);
margin-top: 0;
margin-bottom: var(--spacing-md);
}
.lead {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
color: var(--color-text-primary);
}
small, .text-sm {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.text-xs {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
}
/* Text Utilities */
.text-muted {
color: var(--color-text-secondary) !important;
}
.text-secondary {
color: var(--color-text-secondary) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
/* Font Weight Utilities */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }
/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--letter-spacing-widest); }
/* Brand Font (Dancing Script) - Preserve existing usage */
.dancing-script-topsite {
font-family: var(--font-family-brand);
font-weight: var(--font-weight-bold);
font-style: normal;
font-size: 3rem !important;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-normal);
}
.dancing-script-topsite-sm {
font-family: var(--font-family-brand);
font-weight: var(--font-weight-bold);
font-style: normal;
font-size: 2rem !important;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-normal);
}
/* Responsive Typography */
@media (max-width: 768px) {
h1, .h1 { font-size: var(--font-size-3xl); }
h2, .h2 { font-size: var(--font-size-2xl); }
h3, .h3 { font-size: var(--font-size-xl); }
h4, .h4 { font-size: var(--font-size-lg); }
.dancing-script-topsite {
font-size: 2.5rem !important;
}
.dancing-script-topsite-sm {
font-size: 1.75rem !important;
}
}
/* ============================================
CARD DESIGN SYSTEM
Phase 1.4: Enhanced Card Design
============================================ */
/* Base Card Styles */
.card,
.site-card,
.article-card,
.content-card,
.sidebar-card {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
/* Card Hover States */
.card:hover,
.site-card:hover,
.article-card:hover,
.content-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
border-color: var(--color-primary-light);
}
/* Card Elevation Levels */
.card-elevated {
box-shadow: var(--shadow-lg);
}
.card-elevated:hover {
box-shadow: var(--shadow-xl);
transform: translateY(-4px);
}
/* Card Header Styles */
.card-header,
.site-card-header,
.article-card-header {
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid var(--color-border-light);
background: var(--color-bg-secondary);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-lg);
color: var(--color-text-primary);
}
/* Card Body */
.card-body,
.site-card-body,
.article-card-body {
padding: var(--spacing-xl);
}
/* Card Footer */
.card-footer {
padding: var(--spacing-lg) var(--spacing-xl);
border-top: 1px solid var(--color-border-light);
background: var(--color-bg-secondary);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
/* Premium Card Styling */
.site-card.premium,
.site-card.gold-premium,
.card.premium {
background: linear-gradient(135deg, #fffbe6 0%, #fff7c2 100%);
border: 2.5px solid var(--color-accent-gold);
box-shadow: 0 0 24px 4px rgba(255, 215, 0, 0.25), var(--shadow-md);
position: relative;
z-index: 2;
}
.site-card.premium:hover,
.site-card.gold-premium:hover,
.card.premium:hover {
box-shadow: 0 0 36px 8px rgba(255, 215, 0, 0.35), var(--shadow-lg);
transform: translateY(-3px) scale(1.01);
border-color: var(--color-accent-gold-light);
}
/* Card Border Radius Variants */
.card-rounded-sm { border-radius: var(--radius-lg); }
.card-rounded-md { border-radius: var(--radius-xl); }
.card-rounded-lg { border-radius: var(--radius-2xl); }
/* Card Padding Variants */
.card-padding-sm { padding: var(--spacing-md); }
.card-padding-md { padding: var(--spacing-lg); }
.card-padding-lg { padding: var(--spacing-xl); }
.card-padding-xl { padding: var(--spacing-2xl); }
/* Card with Image */
.card-image {
width: 100%;
height: auto;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
object-fit: cover;
}
/* Card Loading State (Skeleton) */
.card-skeleton {
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
var(--color-bg-tertiary) 50%,
var(--color-bg-secondary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Card Interactive States */
.card-interactive {
cursor: pointer;
}
.card-interactive:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
/* Card with Gradient Background */
.card-gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
border: none;
}
.card-gradient .card-header,
.card-gradient .card-footer {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
/* Card Focus States (Accessibility) */
.card:focus-within {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Responsive Card Adjustments */
@media (max-width: 768px) {
.card,
.site-card,
.article-card,
.content-card {
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
}
.card-header,
.card-body,
.card-footer {
padding: var(--spacing-md) var(--spacing-lg);
}
}
/* ============================================
END CARD DESIGN SYSTEM
============================================ */
/* ============================================
BUTTON SYSTEM
Phase 2.2: Unified Button Component System
============================================ */
/* Base Button Styles */
.btn,
.btn-gradient,
.btn-vote-purple {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
font-family: var(--font-family-base);
font-weight: var(--font-weight-semibold);
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 2px solid transparent;
border-radius: var(--radius-full);
transition: all var(--transition-base);
min-height: 44px; /* Touch target size */
line-height: var(--line-height-normal);
position: relative;
overflow: hidden;
}
/* Button Sizes */
.btn-sm,
.btn-gradient.btn-sm {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
min-height: 36px;
border-radius: var(--radius-lg);
}
.btn,
.btn-gradient {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-base);
}
.btn-lg,
.btn-gradient.btn-lg {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-lg);
min-height: 52px;
}
/* Primary Button (Gradient) */
.btn-gradient {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
border: none;
box-shadow: var(--shadow-md);
}
.btn-gradient:hover,
.btn-gradient:focus {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
color: var(--color-text-inverse);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
.btn-gradient:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
/* Secondary Button (Outline) */
.btn-outline {
background: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
/* Button States */
.btn:disabled,
.btn-gradient:disabled,
.btn.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Loading State */
.btn.loading,
.btn-gradient.loading {
color: transparent;
pointer-events: none;
position: relative;
}
.btn.loading::after,
.btn-gradient.loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: currentColor;
animation: button-spin 0.6s linear infinite;
}
@keyframes button-spin {
to { transform: rotate(360deg); }
}
/* Button Variants */
.btn-success {
background: var(--color-success);
color: var(--color-text-inverse);
border-color: var(--color-success);
}
.btn-success:hover {
background: var(--color-success-dark);
border-color: var(--color-success-dark);
color: var(--color-text-inverse);
}
.btn-warning {
background: var(--color-warning);
color: var(--color-text-primary);
border-color: var(--color-warning);
}
.btn-warning:hover {
background: var(--color-warning-dark);
border-color: var(--color-warning-dark);
}
.btn-error,
.btn-danger {
background: var(--color-error);
color: var(--color-text-inverse);
border-color: var(--color-error);
}
.btn-error:hover,
.btn-danger:hover {
background: var(--color-error-dark);
border-color: var(--color-error-dark);
color: var(--color-text-inverse);
}
.btn-info {
background: var(--color-info);
color: var(--color-text-inverse);
border-color: var(--color-info);
}
.btn-info:hover {
background: var(--color-info-dark);
border-color: var(--color-info-dark);
color: var(--color-text-inverse);
}
/* Icon Buttons */
.btn-icon-only {
width: 44px;
height: 44px;
padding: 0;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-icon-only.btn-sm {
width: 36px;
height: 36px;
min-width: 36px;
}
.btn-icon-only.btn-lg {
width: 52px;
height: 52px;
min-width: 52px;
}
/* Button with Icon */
.btn .btn-icon,
.btn-gradient .btn-icon {
font-size: 1.1em;
line-height: 1;
display: inline-flex;
align-items: center;
}
/* Button Focus States (Accessibility) */
.btn:focus,
.btn-gradient:focus,
.btn-outline:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Button Group */
.btn-group {
display: inline-flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.btn-group .btn {
margin: 0;
}
/* Full Width Button */
.btn-block,
.btn-full-width {
width: 100%;
display: flex;
justify-content: center;
}
/* Vote Button (Purple Gradient) - Preserve existing style */
.btn-vote-purple {
background: linear-gradient(90deg, #7b2ff2 0%, #f357a8 100%);
color: var(--color-text-inverse) !important;
font-weight: var(--font-weight-bold);
border: none;
box-shadow: 0 4px 16px rgba(123, 47, 242, 0.15);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-vote-purple:hover,
.btn-vote-purple:focus {
background: linear-gradient(90deg, #f357a8 0%, #7b2ff2 100%);
color: var(--color-text-inverse);
transform: scale(1.05);
box-shadow: 0 6px 24px rgba(123, 47, 242, 0.25);
}
.btn-vote-purple:active {
transform: scale(1.02);
}
/* Responsive Button Adjustments */
@media (max-width: 768px) {
.btn,
.btn-gradient {
width: 100%;
justify-content: center;
}
.btn-group {
flex-direction: column;
width: 100%;
}
.btn-group .btn {
width: 100%;
}
}
/* ============================================
END BUTTON SYSTEM
============================================ */
/* ============================================
FORM SYSTEM
Phase 2.4: Enhanced Form Elements
============================================ */
/* Form Container */
.form-container {
max-width: 600px;
margin: 0 auto;
}
/* Form Groups */
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
}
.form-label.required::after {
content: ' *';
color: var(--color-error);
font-weight: var(--font-weight-bold);
}
/* Form Controls */
.form-control,
.form-select,
textarea.form-control {
display: block;
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
transition: all var(--transition-base);
min-height: 44px; /* Touch target */
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
background-color: var(--color-bg-primary);
}
.form-control::placeholder {
color: var(--color-text-muted);
opacity: 1;
}
/* Form Control Sizes */
.form-control-sm {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
min-height: 36px;
border-radius: var(--radius-md);
}
.form-control-lg {
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-lg);
min-height: 52px;
border-radius: var(--radius-xl);
}
/* Form Control States */
.form-control:disabled,
.form-select:disabled {
background-color: var(--color-bg-tertiary);
border-color: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.6;
}
.form-control.is-valid {
border-color: var(--color-success);
padding-right: calc(var(--spacing-md) + 24px);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
background-size: 20px 20px;
}
.form-control.is-invalid {
border-color: var(--color-error);
padding-right: calc(var(--spacing-md) + 24px);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
background-size: 20px 20px;
}
/* Error Messages */
.invalid-feedback {
display: block;
width: 100%;
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--color-error);
font-weight: var(--font-weight-medium);
}
.valid-feedback {
display: block;
width: 100%;
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--color-success);
font-weight: var(--font-weight-medium);
}
/* Form Help Text */
.form-text {
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* Input Groups */
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group-text {
display: flex;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
text-align: center;
white-space: nowrap;
background-color: var(--color-bg-secondary);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
}
.input-group > .form-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group > .form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
.input-group > .form-control:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.input-group-text:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.input-group-text:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
/* Checkboxes and Radio Buttons */
.form-check {
display: block;
min-height: 1.5rem;
padding-left: 1.75em;
margin-bottom: var(--spacing-sm);
}
.form-check-input {
width: 1.25em;
height: 1.25em;
margin-top: 0.125em;
margin-left: -1.75em;
vertical-align: top;
background-color: var(--color-bg-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-base);
appearance: none;
-webkit-appearance: none;
position: relative;
}
.form-check-input[type="checkbox"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.form-check-input[type="radio"] {
border-radius: var(--radius-full);
}
.form-check-input[type="radio"]:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
background-size: 50% 50%;
background-position: center;
background-repeat: no-repeat;
}
.form-check-input:focus {
border-color: var(--color-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-check-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-check-label {
cursor: pointer;
color: var(--color-text-primary);
font-size: var(--font-size-base);
}
/* File Upload */
.form-control[type="file"] {
padding: var(--spacing-sm);
}
.form-control[type="file"]::file-selector-button {
padding: var(--spacing-xs) var(--spacing-md);
margin-right: var(--spacing-md);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--transition-base);
}
.form-control[type="file"]::file-selector-button:hover {
background-color: var(--color-bg-tertiary);
border-color: var(--color-primary);
}
/* Select Dropdown */
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
background-size: 16px 12px;
padding-right: calc(var(--spacing-md) + 24px);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Textarea */
textarea.form-control {
min-height: 120px;
resize: vertical;
font-family: var(--font-family-base);
}
/* Enhanced Captcha Styling */
.captcha-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 2px solid rgba(102, 126, 234, 0.2);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.captcha-container:hover {
border-color: rgba(102, 126, 234, 0.4);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.captcha {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
border: 2px solid rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
padding: var(--spacing-sm);
transition: all var(--transition-base);
}
.captcha:hover {
box-shadow: var(--shadow-md);
transform: scale(1.02);
}
.captcha-controls {
display: flex;
align-items: center;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.captcha-refresh {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border: none;
color: var(--color-text-inverse);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-base);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: var(--spacing-xs);
min-height: 44px;
}
.captcha-refresh:hover {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.captcha-refresh:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.captcha-label {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-align: center;
}
/* Form Validation Animation */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.form-control.is-invalid {
animation: shake 0.5s ease-in-out;
}
/* Form Focus Ring (Accessibility) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Responsive Form Adjustments */
@media (max-width: 768px) {
.form-control,
.form-select {
font-size: 16px; /* Prevents zoom on iOS */
}
.input-group {
flex-direction: column;
}
.input-group-text {
border-radius: var(--radius-lg);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .form-control {
border-radius: var(--radius-lg);
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
/* ============================================
END FORM SYSTEM
============================================ */
/* ============================================
SITE DETAIL PAGE ENHANCEMENTS
Phase 3.3: Improved Hierarchy & Information Presentation
============================================ */
/* Site Detail Hero Section */
.site-detail-hero {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-2xl);
padding: var(--spacing-2xl) var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-xl);
color: var(--color-text-inverse);
position: relative;
overflow: hidden;
}
.site-detail-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-light), var(--color-accent-gold));
animation: rainbow 3s ease-in-out infinite;
}
.site-detail-hero h1 {
color: var(--color-text-inverse);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.site-detail-hero .site-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
align-items: center;
justify-content: center;
margin-top: var(--spacing-lg);
}
/* Site Detail Main Card */
.site-detail-card {
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border-light);
overflow: hidden;
position: relative;
}
.site-detail-card.premium-main-card {
border: 3px solid var(--color-accent-gold);
background: linear-gradient(135deg, #fffbe6 0%, #fff7c2 100%);
box-shadow: 0 0 32px 8px rgba(255, 215, 0, 0.3), var(--shadow-xl);
}
/* Server Banner */
.server-banner {
margin-bottom: var(--spacing-xl);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
position: relative;
}
.server-banner img {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-slow);
}
.server-banner:hover img {
transform: scale(1.02);
}
/* Server URL Section */
.server-url {
padding: var(--spacing-lg);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border-radius: var(--radius-xl);
border: 1px solid rgba(102, 126, 234, 0.1);
margin-bottom: var(--spacing-xl);
}
.server-url h2 {
color: var(--color-text-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.server-url a {
color: var(--color-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: var(--color-bg-primary);
border-radius: var(--radius-lg);
border: 2px solid var(--color-primary);
transition: all var(--transition-base);
}
.server-url a:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Server Description */
.server-description {
margin-bottom: var(--spacing-xl);
}
.server-description h2 {
color: var(--color-text-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--color-border-light);
}
.server-description-content {
color: var(--color-text-primary);
line-height: var(--line-height-relaxed);
font-size: var(--font-size-base);
}
.server-description-content p {
margin-bottom: var(--spacing-md);
}
.server-description-content a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-semibold);
border-bottom: 1px solid transparent;
transition: all var(--transition-base);
}
.server-description-content a:hover {
border-bottom-color: var(--color-primary);
}
/* Server Statistics Cards */
.server-statistics {
margin-bottom: var(--spacing-xl);
}
.server-statistics h2 {
color: var(--color-text-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.stat-card {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
border: 2px solid transparent;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
transition: all var(--transition-slow);
opacity: 0;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: rgba(255, 255, 255, 0.3);
}
.stat-card:hover::before {
opacity: 1;
animation: shimmer 2s ease-in-out infinite;
}
.stat-card .stat-icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-sm);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.stat-card .stat-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
opacity: 0.9;
}
.stat-card .stat-value {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
line-height: 1.2;
}
/* Vote Buttons */
.vote-btn-top,
.vote-btn-bottom {
z-index: 10;
}
.vote-btn-top .btn-vote-purple,
.vote-btn-bottom .btn-vote-purple {
box-shadow: var(--shadow-lg);
font-size: var(--font-size-lg);
padding: var(--spacing-md) var(--spacing-xl);
min-height: 56px;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
/* Related Resources */
.related-resources {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 2px solid var(--color-border-light);
}
.related-resources h2 {
color: var(--color-text-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
}
.related-resources ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-resources li {
margin-bottom: var(--spacing-md);
}
.related-resources a {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background: var(--color-bg-secondary);
border-radius: var(--radius-lg);
color: var(--color-text-primary);
text-decoration: none;
border: 1px solid var(--color-border-light);
transition: all var(--transition-base);
}
.related-resources a:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-color: var(--color-primary);
transform: translateX(8px);
box-shadow: var(--shadow-sm);
color: var(--color-primary);
}
/* Sidebar Enhancements */
.site-detail-sidebar .card {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
overflow: hidden;
margin-bottom: var(--spacing-lg);
}
.site-detail-sidebar .card-header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
border: none;
padding: var(--spacing-md) var(--spacing-lg);
font-weight: var(--font-weight-semibold);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.site-detail-sidebar .card-body {
padding: var(--spacing-lg);
}
/* Filter and Attribute Badges */
.filter-badge,
.attribute-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
margin: var(--spacing-xs);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
transition: all var(--transition-base);
}
.filter-badge:hover,
.attribute-badge:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.filter-label,
.attribute-label {
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
margin-right: var(--spacing-xs);
}
.filter-badge:hover .filter-label,
.attribute-badge:hover .attribute-label {
color: var(--color-text-inverse);
}
.filter-value,
.attribute-value {
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.filter-badge:hover .filter-value,
.attribute-badge:hover .attribute-value {
color: var(--color-text-inverse);
}
/* Claim Section */
.claim-section {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 237, 78, 0.1) 100%);
border: 2px solid var(--color-accent-gold);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.claim-site-card-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-md);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
/* Breadcrumb Enhancements */
.breadcrumb-custom {
background: transparent;
padding: var(--spacing-sm) 0;
margin-bottom: var(--spacing-md);
margin-top: var(--spacing-sm);
}
.breadcrumb-custom .breadcrumb-item a {
color: var(--color-primary);
text-decoration: none;
transition: all var(--transition-base);
}
.breadcrumb-custom .breadcrumb-item a:hover {
color: var(--color-secondary);
text-decoration: underline;
}
.breadcrumb-custom .breadcrumb-item.active {
color: var(--color-text-secondary);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.site-detail-hero {
padding: var(--spacing-xl) var(--spacing-md);
}
.site-detail-hero h1 {
font-size: var(--font-size-2xl);
}
.server-url a {
font-size: var(--font-size-base);
padding: var(--spacing-sm) var(--spacing-md);
}
.stat-card {
padding: var(--spacing-md);
}
.vote-btn-top {
position: static;
margin-bottom: var(--spacing-md);
}
}
/* ============================================
END SITE DETAIL PAGE ENHANCEMENTS
============================================ */
/* ============================================
BLOG & ARTICLE PAGE ENHANCEMENTS
Phase 3.4: Enhanced Card Design & Reading Experience
============================================ */
/* Articles Grid */
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
@media (max-width: 768px) {
.articles-grid {
grid-template-columns: 1fr;
}
}
/* Enhanced Article Card */
.article-card {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border-light);
overflow: hidden;
transition: all var(--transition-base);
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.article-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0;
transition: opacity var(--transition-base);
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.article-card:hover::before {
opacity: 1;
}
/* Article Image */
.article-image {
width: 100%;
height: 200px;
overflow: hidden;
background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.article-card:hover .article-image img {
transform: scale(1.1);
}
.article-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
opacity: 0.1;
}
.placeholder-icon {
font-size: var(--font-size-4xl);
opacity: 0.5;
}
/* Article Content */
.article-content {
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
flex: 1;
}
.article-header {
margin-bottom: var(--spacing-md);
}
.article-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin: 0 0 var(--spacing-sm) 0;
}
.article-title a {
color: var(--color-text-primary);
text-decoration: none;
transition: color var(--transition-base);
display: block;
}
.article-title a:hover {
color: var(--color-primary);
}
/* Article Meta */
.article-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
align-items: center;
margin-top: auto;
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border-light);
}
.article-category {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-primary);
border: 1px solid rgba(102, 126, 234, 0.2);
}
.article-category.uncategorized {
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border-color: var(--color-border);
}
.category-icon {
font-size: var(--font-size-base);
line-height: 1;
}
.article-date {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-left: auto;
}
/* Article Detail Page */
.article-detail-hero {
margin-bottom: var(--spacing-2xl);
}
.article-detail-title {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-text-primary);
margin-bottom: var(--spacing-lg);
}
.article-meta-badges {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
}
.article-type-badge,
.article-category-badge,
.article-date-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.article-type-badge:hover,
.article-category-badge:hover,
.article-date-badge:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Article Hero Image */
.article-hero-image {
margin: var(--spacing-2xl) 0;
text-align: center;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.article-hero-image img {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-slow);
}
.article-hero-image:hover img {
transform: scale(1.02);
}
/* Article Content */
.article-content-body {
max-width: 800px;
margin: 0 auto;
padding: var(--spacing-xl) 0;
color: var(--color-text-primary);
line-height: var(--line-height-relaxed);
font-size: var(--font-size-lg);
}
.article-content-body h1,
.article-content-body h2,
.article-content-body h3,
.article-content-body h4 {
color: var(--color-text-primary);
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-lg);
font-weight: var(--font-weight-bold);
}
.article-content-body h2 {
font-size: var(--font-size-3xl);
border-bottom: 2px solid var(--color-border-light);
padding-bottom: var(--spacing-sm);
}
.article-content-body h3 {
font-size: var(--font-size-2xl);
}
.article-content-body h4 {
font-size: var(--font-size-xl);
}
.article-content-body p {
margin-bottom: var(--spacing-lg);
text-align: justify;
}
.article-content-body a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-semibold);
border-bottom: 1px solid transparent;
transition: all var(--transition-base);
}
.article-content-body a:hover {
border-bottom-color: var(--color-primary);
color: var(--color-secondary);
}
.article-content-body ul,
.article-content-body ol {
margin-bottom: var(--spacing-lg);
padding-left: var(--spacing-xl);
}
.article-content-body li {
margin-bottom: var(--spacing-sm);
}
.article-content-body blockquote {
border-left: 4px solid var(--color-primary);
padding: var(--spacing-md) var(--spacing-lg);
margin: var(--spacing-xl) 0;
background: var(--color-bg-secondary);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
font-style: italic;
color: var(--color-text-secondary);
}
.article-content-body code {
background: var(--color-bg-tertiary);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-family: var(--font-family-monospace);
font-size: 0.9em;
color: var(--color-error);
}
.article-content-body pre {
background: var(--color-bg-tertiary);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
overflow-x: auto;
margin-bottom: var(--spacing-lg);
border: 1px solid var(--color-border);
}
.article-content-body pre code {
background: transparent;
padding: 0;
color: var(--color-text-primary);
}
.article-content-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin: var(--spacing-xl) 0;
}
/* Article Footer */
.article-footer {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-xl);
border-top: 2px solid var(--color-border-light);
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
justify-content: space-between;
align-items: center;
}
.article-share {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.article-share-label {
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.article-share-buttons {
display: flex;
gap: var(--spacing-xs);
}
.share-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
text-decoration: none;
transition: all var(--transition-base);
}
.share-button:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* Pagination Section */
.pagination-section {
margin: var(--spacing-2xl) 0;
}
.pagination-nav {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.pagination-item {
flex: 0 0 auto;
}
.pagination-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: var(--color-bg-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text-primary);
text-decoration: none;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-base);
min-height: 44px;
}
.pagination-link:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.pagination-icon {
font-size: var(--font-size-lg);
line-height: 1;
}
.pagination-info {
padding: var(--spacing-sm) var(--spacing-lg);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.article-detail-title {
font-size: var(--font-size-2xl);
}
.article-content-body {
font-size: var(--font-size-base);
padding: var(--spacing-lg) 0;
}
.article-content-body h2 {
font-size: var(--font-size-2xl);
}
.article-content-body h3 {
font-size: var(--font-size-xl);
}
.article-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================
END BLOG & ARTICLE PAGE ENHANCEMENTS
============================================ */
/* ============================================
ANIMATIONS & MICRO-INTERACTIONS
Phase 4.1: Smooth Animations with Reduced-Motion Support
============================================ */
/* Base Animation Settings */
@media (prefers-reduced-motion: no-preference) {
/* Fade In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Slide In From Left */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Slide In From Right */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Scale In */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Bounce Animation */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Pulse Animation */
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
/* Shimmer Animation */
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
/* Float Animation */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Spin Animation */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Gradient Shift */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Rainbow Animation */
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}
/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Page Load Animations */
.page-load-animate {
animation: fadeIn 0.6s ease-out;
}
.stagger-animate {
animation: fadeIn 0.6s ease-out;
animation-fill-mode: both;
}
.stagger-animate:nth-child(1) { animation-delay: 0.1s; }
.stagger-animate:nth-child(2) { animation-delay: 0.2s; }
.stagger-animate:nth-child(3) { animation-delay: 0.3s; }
.stagger-animate:nth-child(4) { animation-delay: 0.4s; }
.stagger-animate:nth-child(5) { animation-delay: 0.5s; }
.stagger-animate:nth-child(6) { animation-delay: 0.6s; }
/* Card Entrance Animations */
.site-card,
.article-card,
.content-card {
animation: fadeIn 0.5s ease-out;
}
/* Hover Micro-interactions */
.interactive-element {
transition: all var(--transition-base);
cursor: pointer;
}
.interactive-element:hover {
transform: translateY(-2px);
}
.interactive-element:active {
transform: translateY(0);
}
/* Button Animations */
.btn,
.btn-gradient {
position: relative;
overflow: hidden;
}
.btn::before,
.btn-gradient::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn:active::before,
.btn-gradient:active::before {
width: 300px;
height: 300px;
}
/* Loading Spinner */
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: currentColor;
animation: spinner 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}
/* Skeleton Loading Animation */
@keyframes skeleton-loading {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.skeleton {
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
var(--color-bg-tertiary) 50%,
var(--color-bg-secondary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background: var(--color-bg-tertiary);
}
}
/* Scroll Reveal Animation */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* Focus Ring Animation */
@keyframes focusRing {
0% {
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
}
100% {
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0);
}
}
.focus-animated:focus {
animation: focusRing 0.3s ease-out;
}
/* Badge Pulse Animation */
.badge-pulse {
animation: pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.badge-pulse {
animation: none;
}
}
/* Icon Animations */
.icon-bounce {
display: inline-block;
animation: bounce 2s infinite;
}
.icon-float {
display: inline-block;
animation: float 3s ease-in-out infinite;
}
.icon-spin {
display: inline-block;
animation: spin 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.icon-bounce,
.icon-float,
.icon-spin {
animation: none;
}
}
/* Progress Bar Animation */
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
.progress-bar-animated {
animation: progress 2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.progress-bar-animated {
animation: none;
}
}
/* Notification Slide In */
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.notification-enter {
animation: slideInDown 0.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.notification-enter {
animation: none;
}
}
/* Tooltip Fade In */
@keyframes tooltipFade {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tooltip-enter {
animation: tooltipFade 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.tooltip-enter {
animation: none;
}
}
/* Smooth Scroll Behavior */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* Transition Utilities */
.transition-fast {
transition: all var(--transition-fast);
}
.transition-base {
transition: all var(--transition-base);
}
.transition-slow {
transition: all var(--transition-slow);
}
/* Animation Utilities */
.animate-fade-in {
animation: fadeIn 0.6s ease-out;
}
.animate-slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.animate-slide-in-right {
animation: slideInRight 0.6s ease-out;
}
.animate-scale-in {
animation: scaleIn 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.animate-fade-in,
.animate-slide-in-left,
.animate-slide-in-right,
.animate-scale-in {
animation: none;
}
}
/* ============================================
END ANIMATIONS & MICRO-INTERACTIONS
============================================ */
/* ============================================
DARK MODE THEME TOGGLE
Phase 4.2: Theme Toggle Component
============================================ */
/* Theme Toggle Button */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
color: var(--color-text-inverse);
cursor: pointer;
transition: all var(--transition-base);
position: relative;
overflow: hidden;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.theme-toggle:focus {
outline: 2px solid var(--color-accent-gold);
outline-offset: 2px;
}
.theme-toggle-icon {
font-size: var(--font-size-lg);
line-height: 1;
transition: transform var(--transition-base);
}
.theme-toggle:hover .theme-toggle-icon {
transform: rotate(15deg);
}
/* Theme Toggle in Header */
.enhanced-header .theme-toggle {
margin-left: var(--spacing-sm);
}
/* Theme Toggle in Mobile Menu */
.mobile-menu-drawer .theme-toggle {
width: 100%;
justify-content: flex-start;
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
/* Smooth Theme Transition */
* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none;
}
}
/* Dark Mode Specific Adjustments */
[data-theme="dark"] .enhanced-header {
background: linear-gradient(135deg, #4a5bc8 0%, #5d3a7f 100%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .enhanced-header {
background: linear-gradient(135deg, #4a5bc8 0%, #5d3a7f 100%);
}
}
[data-theme="dark"] .enhanced-footer {
background: linear-gradient(135deg, #4a5bc8 0%, #5d3a7f 100%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .enhanced-footer {
background: linear-gradient(135deg, #4a5bc8 0%, #5d3a7f 100%);
}
}
[data-theme="dark"] .card,
[data-theme="dark"] .site-card,
[data-theme="dark"] .article-card,
[data-theme="dark"] .content-card {
background: var(--color-bg-secondary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .site-card,
:root:not([data-theme="light"]) .article-card,
:root:not([data-theme="light"]) .content-card {
background: var(--color-bg-secondary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
}
/* Dark mode for Bootstrap components */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
background-color: var(--color-bg-secondary) !important;
color: var(--color-text-primary) !important;
}
[data-theme="dark"] .text-muted {
color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .text-dark {
color: var(--color-text-primary) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-light {
border-color: var(--color-border) !important;
}
/* ============================================
END DARK MODE THEME TOGGLE
============================================ */
/* ============================================
PERFORMANCE OPTIMIZATIONS
Phase 4.3: Critical CSS, Image Optimization, Code Splitting
============================================ */
/* Lazy Loading Images */
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* Image Optimization */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Prevent Layout Shift */
img[width][height] {
aspect-ratio: attr(width) / attr(height);
}
/* Content Visibility for Performance */
.content-visibility-auto {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
/* Will-change for Animations (use sparingly) */
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
/* GPU Acceleration for Smooth Animations */
.gpu-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* Reduce Repaints */
.no-repaint {
transform: translate3d(0, 0, 0);
}
/* Font Display Optimization */
@font-face {
font-display: swap;
}
/* Preload Critical Resources */
.preload-link {
display: none;
}
/* Defer Non-Critical Styles */
.deferred-styles {
display: none;
}
/* Intersection Observer for Scroll Animations */
.scroll-observer {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-observer.visible {
opacity: 1;
transform: translateY(0);
}
/* Resource Hints */
.resource-hint {
display: none;
}
/* Optimize Reflows */
.optimize-reflow {
contain: layout style paint;
}
/* Reduce Motion for Performance */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Print Optimizations */
@media print {
* {
background: white !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
.no-print {
display: none !important;
}
}
/* Critical Above-the-Fold Styles */
.above-the-fold {
min-height: 100vh;
}
/* Optimize Font Loading */
.font-display-swap {
font-display: swap;
}
/* Image Placeholder */
.image-placeholder {
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
var(--color-bg-tertiary) 50%,
var(--color-bg-secondary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
}
/* Lazy Load Container */
.lazy-container {
min-height: 200px;
background: var(--color-bg-secondary);
}
/* Performance Monitoring */
.performance-mark {
display: none;
}
/* ============================================
END PERFORMANCE OPTIMIZATIONS
============================================ */
/* ============================================
ACCESSIBILITY ENHANCEMENTS
Phase 4.4: ARIA Labels, Keyboard Navigation, Focus Indicators
============================================ */
/* Skip Link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: var(--color-text-inverse);
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
z-index: 10000;
border-radius: 0 0 var(--radius-md) 0;
font-weight: var(--font-weight-bold);
}
.skip-link:focus {
top: 0;
outline: 3px solid var(--color-accent-gold);
outline-offset: 2px;
}
/* Enhanced Focus Indicators */
*:focus {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
*:focus:not(:focus-visible) {
outline: none;
}
*:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Focus Styles for Interactive Elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
* {
border-color: currentColor !important;
}
.btn,
.btn-gradient {
border: 2px solid currentColor;
}
.card,
.site-card {
border: 2px solid currentColor;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Screen Reader Only Content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
padding: inherit;
margin: inherit;
overflow: visible;
clip: auto;
white-space: normal;
}
/* ARIA Live Regions */
[aria-live] {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Keyboard Navigation Indicators */
.keyboard-user *:focus {
outline: 3px solid var(--color-primary) !important;
outline-offset: 3px !important;
}
.mouse-user *:focus:not(:focus-visible) {
outline: none;
}
/* Focus Trap for Modals */
.focus-trap {
position: relative;
}
/* Accessible Button Styles */
button:disabled,
.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
/* Accessible Form Labels */
label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
label.required::after {
content: ' *';
color: var(--color-error);
font-weight: var(--font-weight-bold);
}
/* Error States for Accessibility */
.form-control.is-invalid:focus {
border-color: var(--color-error);
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}
/* Loading States for Screen Readers */
[aria-busy="true"] {
position: relative;
}
[aria-busy="true"]::after {
content: '';
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
/* Accessible Dropdowns */
.dropdown-menu[aria-hidden="true"] {
display: none;
}
.dropdown-menu[aria-hidden="false"] {
display: block;
}
/* Accessible Navigation */
nav[aria-label] {
position: relative;
}
/* Accessible Tables */
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
font-weight: var(--font-weight-bold);
padding: var(--spacing-sm);
border-bottom: 2px solid var(--color-border);
}
td {
padding: var(--spacing-sm);
border-bottom: 1px solid var(--color-border-light);
}
/* Accessible Images */
img[alt=""] {
border: 2px dashed var(--color-border);
}
/* Accessible Icons */
.icon-only {
position: relative;
}
.icon-only::after {
content: attr(aria-label);
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Accessible Color Contrast */
.text-contrast-high {
color: var(--color-text-primary);
background: var(--color-bg-primary);
}
/* Accessible Links */
a:not([href]) {
cursor: default;
text-decoration: none;
}
a[href]:hover {
text-decoration: underline;
}
/* Accessible Headings */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
/* Accessible Lists */
ul, ol {
margin: var(--spacing-md) 0;
padding-left: var(--spacing-xl);
}
li {
margin-bottom: var(--spacing-xs);
}
/* Accessible Landmarks */
main {
position: relative;
}
aside {
position: relative;
}
/* Accessible Dialogs */
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-modal);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* Accessible Tooltips */
[role="tooltip"] {
position: absolute;
z-index: var(--z-tooltip);
background: var(--color-text-primary);
color: var(--color-text-inverse);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-lg);
max-width: 200px;
}
/* Accessible Progress Bars */
progress {
width: 100%;
height: 8px;
border-radius: var(--radius-full);
background: var(--color-bg-tertiary);
}
progress::-webkit-progress-bar {
background: var(--color-bg-tertiary);
border-radius: var(--radius-full);
}
progress::-webkit-progress-value {
background: var(--color-primary);
border-radius: var(--radius-full);
}
/* Accessible Status Messages */
[role="status"],
[role="alert"] {
padding: var(--spacing-md);
border-radius: var(--radius-lg);
margin: var(--spacing-md) 0;
}
[role="alert"] {
background: rgba(220, 53, 69, 0.1);
border: 1px solid var(--color-error);
color: var(--color-error);
}
[role="status"] {
background: rgba(40, 167, 69, 0.1);
border: 1px solid var(--color-success);
color: var(--color-success);
}
/* Accessible Breadcrumbs */
nav[aria-label="breadcrumb"] ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
nav[aria-label="breadcrumb"] li {
margin: 0;
padding: 0;
}
nav[aria-label="breadcrumb"] li + li::before {
content: '/';
margin: 0 var(--spacing-sm);
color: var(--color-text-secondary);
}
/* Accessible Pagination */
nav[aria-label*="pagination"] {
display: flex;
justify-content: center;
align-items: center;
}
/* Accessible Search */
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
/* Accessible Tabs */
[role="tablist"] {
display: flex;
border-bottom: 2px solid var(--color-border);
}
[role="tab"] {
padding: var(--spacing-md) var(--spacing-lg);
border: none;
background: transparent;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
[role="tab"][aria-selected="true"] {
border-bottom-color: var(--color-primary);
color: var(--color-primary);
font-weight: var(--font-weight-bold);
}
[role="tabpanel"] {
padding: var(--spacing-lg);
}
/* Accessible Accordion */
[role="button"][aria-expanded] {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--spacing-md);
border: none;
background: transparent;
text-align: left;
}
[role="button"][aria-expanded="true"]::after {
content: '−';
}
[role="button"][aria-expanded="false"]::after {
content: '+';
}
/* ============================================
END ACCESSIBILITY ENHANCEMENTS
============================================ */
/* ============================================
SPACING FIXES
Fix long blank gaps between header and content
============================================ */
/* CRITICAL: Add small spacing between header and content */
/* This must be at the end to override everything */
/* Add small bottom margin to header */
header.enhanced-header,
.enhanced-header {
margin-bottom: var(--spacing-sm) !important;
}
/* Add small top margin to main element */
main#main-content.container,
main.container#main-content,
main#main-content,
#main-content.container,
#main-content,
main.container,
body > main,
body > main.container,
body > main#main-content {
margin-top: var(--spacing-sm) !important;
padding-top: 0 !important;
}
/* Target main that comes after header - add small spacing */
header.enhanced-header + main,
header.enhanced-header ~ main,
header.enhanced-header + main.container,
header.enhanced-header ~ main.container,
header.enhanced-header + main#main-content,
header.enhanced-header ~ main#main-content,
header.enhanced-header + main#main-content.container,
header.enhanced-header ~ main#main-content.container,
.enhanced-header + main,
.enhanced-header ~ main,
.enhanced-header + main.container,
.enhanced-header ~ main.container {
margin-top: var(--spacing-sm) !important;
padding-top: 0 !important;
}
/* Remove top margin from first child in main */
main#main-content > *:first-child,
main.container > *:first-child,
#main-content > *:first-child,
main#main-content.container > *:first-child,
main > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Override Bootstrap mb-5 and other margin utilities */
.hero-section.mb-5,
main.mb-5,
main.mb-5.container,
main#main-content.mb-5,
.mb-5:first-child {
margin-top: 0 !important;
}
/* Override Bootstrap utility classes */
.container.my-5,
.container.my-4,
div.container.my-5,
div.container.my-4 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove spacing from mobile menu (shouldn't affect layout but just in case) */
.mobile-menu-overlay,
.mobile-menu-drawer {
position: fixed;
margin: 0;
padding: 0;
}
/* Ensure body/html have no default spacing */
body {
margin: 0 !important;
padding: 0 !important;
}
html {
margin: 0 !important;
padding: 0 !important;
}
/* ============================================
END SPACING FIXES
============================================ */
/* ============================================
BREADCRUMBS SYSTEM
Phase 5: Standardized & Enhanced Breadcrumbs
============================================ */
/* NOTE: Breadcrumb styles are defined later in the file at line 7551 */
/* This section removed to avoid duplication - see "BREADCRUMB NAVIGATION" section */
/* ============================================
END BREADCRUMBS SYSTEM
============================================ */
/* ============================================
END DESIGN SYSTEM FOUNDATION
============================================ */
.alert-debug {
color: black;
background-color: white;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.protest-strike-regular {
font-family: "Protest Strike", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 4.5rem !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
}
.dancing-script-topsite {
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size: 3rem !important;
}
.dancing-script-topsite-sm {
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 1400;
font-style: normal;
font-size: 2rem !important;
}
.neon_a {
color: #0000008f;
font-weight: bold;
text-shadow: 0 -2px 2px hsl(189,100%,52%),0 2px 2px hsl(292,100%,50%);
}
.neon_b {
color: #000000; /* Black for high contrast */
font-weight: bold;
text-shadow:
0 -2px 2px hsl(270, 100%, 45%), /* Darker Vibrant Purple */
0 2px 2px hsl(39, 100%, 55%); /* Darker Neon Orange */
}
.neon_c {
color: #000000; /* Black for visibility */
font-weight: bold;
text-shadow:
0 -2px 2px hsl(350, 100%, 50%), /* Darker Bright Red */
0 2px 2px hsl(174, 100%, 45%); /* Darker Neon Cyan */
}
.neon_c a {
color: #000000; /* Black for visibility */
font-weight: bold;
font-size: 23px;
text-shadow:
0 -2px 2px hsl(350, 100%, 50%), /* Darker Bright Red */
0 2px 2px hsl(174, 100%, 45%); /* Darker Neon Cyan */
}
.neon_c a:hover {
color: #000000; /* White for visibility */
}
.neon_d {
color: #000000; /* Black for strong contrast */
font-weight: bold;
text-shadow:
0 -2px 2px hsl(120, 100%, 40%), /* Darker Neon Green */
0 2px 2px hsl(180, 100%, 45%); /* Darker Electric Blue */
}
.neon_e {
color: #000000; /* Black text for clarity */
font-weight: bold;
text-shadow:
0 -2px 2px hsl(330, 100%, 50%), /* Darker Neon Pink */
0 2px 2px hsl(112, 100%, 50%); /* Darker Neon Lime */
}
.neonsparkles_a {
color: #0000008f;
font-weight: bold;
text-shadow: 0 -2px 2px hsl(189,100%,52%),0 2px 2px hsl(292,100%,50%);
background: url("/static/images/style_sparkles.f42adbbb1dc2.webp")
}
.neonsparkles_b {
color: #0000008f;
font-weight: bold;
text-shadow: 0 -2px 2px hsl(189,100%,52%),0 2px 2px hsl(292,100%,50%);
background: url("/static/images/style_sparkles2.8f002c2a0994.webp")
}
.sparkles_2b {
color: #0000008f;
font-weight: bold;
text-shadow: 0 -2px 2px hsl(120, 100%, 50%),0 2px 2px hsl(330, 100%, 50%);
background: url("/static/images/style_sparkles2.8f002c2a0994.webp")
}
.frameneon::after {
background: url("/static/images/frame_neon.85b9f2ad439e.png");
background-size: contain;
background-repeat: no-repeat;
content: '';
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0
}
.centered-text {
text-align: center;
font-size: 2rem; /* Adjust the font size as needed */
font-weight: bold; /* Make the text bold if needed */
margin: 0; /* Ensure no margin is applied */
padding: 0; /* Ensure no padding is applied */
}
.background-pattern {
color: #747474;
background-image: radial-gradient(currentColor 0.5px, transparent 0.1px);
background-size: calc(10 * 1px) calc(10 * 1px);
}
.div-border-special {
border: 1px solid rgb(255, 0, 0);
padding: 10px;
margin: 10px;
}
/* Card hover now handled by card design system above */
.logoshadow {
text-shadow: 1px 1px 2px rgba(0,0,0,0.56);
}
/* Enhanced Footer Styles */
.enhanced-footer {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem 0 1rem 0;
margin-top: 3rem;
position: relative;
overflow: hidden;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}
.enhanced-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
animation: rainbow 3s ease-in-out infinite;
}
@keyframes rainbow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.enhanced-footer .footer-content {
position: relative;
z-index: 2;
}
.enhanced-footer .footer-brand {
font-family: "Dancing Script", cursive;
font-size: 1.8rem;
font-weight: 700;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 0.5rem;
}
.enhanced-footer .footer-tagline {
font-size: 1.1rem;
font-weight: 600;
color: #f8f9fa;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 0.5rem;
}
.enhanced-footer .vote-reset {
font-size: 0.9rem;
color: #e9ecef;
opacity: 0.9;
}
.enhanced-footer .footer-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 20px;
margin: 0 0.25rem;
}
.enhanced-footer .footer-links a:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.enhanced-footer .social-links a {
color: white;
font-size: 1.5rem;
margin: 0 0.5rem;
transition: all 0.3s ease;
display: inline-block;
}
.enhanced-footer .social-links a:hover {
transform: scale(1.2) rotate(5deg);
color: #ffd700;
}
.enhanced-footer .footer-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
margin: 1rem 0;
}
.enhanced-footer .gaming-icons {
font-size: 1.2rem;
margin: 0 0.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.enhanced-footer {
padding: 1.5rem 0 1rem 0;
}
.enhanced-footer .footer-brand {
font-size: 1.5rem;
}
.enhanced-footer .footer-tagline {
font-size: 1rem;
}
}
/* Enhanced Header Styles */
.enhanced-header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: var(--color-text-inverse);
padding: var(--spacing-md) 0;
position: relative;
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-sm);
z-index: var(--z-sticky);
overflow: visible;
transition: all var(--transition-base);
}
/* Sticky Header with Backdrop Blur */
.enhanced-header.sticky {
position: sticky;
top: 0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
box-shadow: var(--shadow-lg);
padding: var(--spacing-sm) 0;
}
.enhanced-header.sticky .brand-logo {
font-size: 1.8rem;
}
.enhanced-header.sticky .nav-menu .nav-link {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-sm);
}
.enhanced-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
animation: rainbow 3s ease-in-out infinite;
}
.enhanced-header .header-content {
position: relative;
z-index: 2;
overflow: visible;
}
.enhanced-header .brand-logo {
font-family: "Dancing Script", cursive;
font-size: 2.2rem;
font-weight: 700;
color: white;
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.3),
0 0 10px rgba(255, 215, 0, 0.5),
0 0 20px rgba(255, 215, 0, 0.3),
0 0 30px rgba(255, 215, 0, 0.1);
text-decoration: none;
transition: all 0.4s ease;
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.enhanced-header .brand-logo::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.6s ease;
opacity: 0;
}
.enhanced-header .brand-logo:hover::before {
opacity: 1;
animation: shimmer 1.5s ease-in-out;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
50% { transform: translateX(0%) translateY(0%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.enhanced-header .brand-logo:hover {
color: #ffd700;
transform: scale(1.08) rotate(1deg);
text-shadow:
3px 3px 6px rgba(0, 0, 0, 0.4),
0 0 15px rgba(255, 215, 0, 0.8),
0 0 25px rgba(255, 215, 0, 0.6),
0 0 35px rgba(255, 215, 0, 0.4),
0 0 45px rgba(255, 215, 0, 0.2);
filter: brightness(1.2) contrast(1.1);
}
.enhanced-header .brand-logo .logo-icon {
font-size: 1.8rem;
animation: pulse 2s infinite, bounce 3s infinite;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
50% {
transform: scale(1.15);
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
.enhanced-header .brand-logo span:last-child {
background: linear-gradient(45deg, #ffffff, #ffd700, #ffffff);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientShift 3s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.enhanced-header .nav-dropdown .btn {
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.enhanced-header .nav-dropdown .btn:hover,
.enhanced-header .nav-dropdown .btn:focus {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.enhanced-header .nav-dropdown {
position: relative;
z-index: 1000;
overflow: visible;
}
.enhanced-header .nav-dropdown .dropdown-menu {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
margin-top: 0.5rem;
z-index: 9999 !important;
position: absolute !important;
min-width: 200px;
max-height: 400px;
overflow-y: auto;
transform: none !important;
top: 100% !important;
left: 0 !important;
}
/* Force dropdown to be visible when shown */
.enhanced-header .nav-dropdown.show .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure dropdowns can extend beyond viewport */
.enhanced-header .nav-dropdown .dropdown-menu {
max-width: none;
width: auto;
min-width: 200px;
}
.enhanced-header .nav-dropdown .dropdown-item {
color: #333;
font-weight: 500;
padding: 0.75rem 1.5rem;
transition: all 0.3s ease;
border-radius: 8px;
margin: 0.25rem;
white-space: nowrap;
display: block;
width: 100%;
text-decoration: none;
}
.enhanced-header .nav-dropdown .dropdown-item:hover {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
transform: translateX(5px);
}
.enhanced-header .nav-menu {
display: flex;
align-items: center;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.enhanced-header .nav-menu .nav-item {
margin: 0;
}
.enhanced-header .nav-menu .nav-link {
color: white;
text-decoration: none;
font-weight: 600;
padding: 0.75rem 1.25rem;
border-radius: 25px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.enhanced-header .nav-menu .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.enhanced-header .nav-menu .nav-link:hover::before {
left: 100%;
}
.enhanced-header .nav-menu .nav-link:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.enhanced-header .nav-menu .nav-link.active {
background: rgba(255, 255, 255, 0.25);
color: var(--color-accent-gold);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Active state indicator */
.enhanced-header .nav-menu .nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: var(--color-accent-gold);
border-radius: var(--radius-full) var(--radius-full) 0 0;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}
.enhanced-header .user-menu {
display: flex;
align-items: center;
gap: 0.5rem;
}
.enhanced-header .user-menu .nav-link {
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
.enhanced-header .user-menu .nav-link small {
font-size: 0.8rem;
opacity: 0.9;
}
.enhanced-header .admin-link {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
font-weight: 700;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.enhanced-header .admin-link:hover {
background: linear-gradient(135deg, #ee5a24, #ff6b6b);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(238, 90, 36, 0.3);
}
/* Responsive header adjustments */
@media (max-width: 992px) {
.enhanced-header .brand-logo {
font-size: 1.8rem;
}
.enhanced-header .nav-menu {
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.enhanced-header .nav-menu .nav-link {
width: 100%;
text-align: center;
}
.enhanced-header .user-menu {
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: none;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--color-text-inverse);
padding: var(--spacing-sm);
border-radius: var(--radius-md);
cursor: pointer;
flex-direction: column;
gap: 4px;
z-index: var(--z-fixed);
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
}
.mobile-menu-toggle:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
}
.mobile-menu-toggle span {
display: block;
width: 24px;
height: 3px;
background: currentColor;
border-radius: var(--radius-sm);
transition: all var(--transition-base);
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Mobile Menu Drawer */
.mobile-menu-drawer {
position: fixed !important;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-2xl);
z-index: var(--z-modal);
transition: right var(--transition-slow);
overflow-y: auto;
padding: var(--spacing-xl);
margin: 0 !important;
/* Ensure it doesn't affect document flow */
display: block;
}
.mobile-menu-drawer.open {
right: 0;
}
.mobile-menu-drawer .drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.mobile-menu-drawer .drawer-close {
background: rgba(255, 255, 255, 0.15);
border: none;
color: var(--color-text-inverse);
width: 44px;
height: 44px;
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
transition: all var(--transition-base);
}
.mobile-menu-drawer .drawer-close:hover {
background: rgba(255, 255, 255, 0.25);
}
.mobile-menu-overlay {
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: calc(var(--z-modal) - 1);
opacity: 0;
visibility: hidden;
transition: all var(--transition-base);
margin: 0 !important;
padding: 0 !important;
/* Ensure it doesn't affect document flow */
display: block;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.enhanced-header {
padding: var(--spacing-sm) 0;
}
.enhanced-header .brand-logo {
font-size: var(--font-size-xl);
}
.mobile-menu-toggle {
display: flex;
}
.enhanced-header .nav-menu {
display: none;
}
.enhanced-header .nav-dropdown .btn {
font-size: var(--font-size-sm);
padding: var(--spacing-xs) var(--spacing-md);
}
.enhanced-header .user-menu {
flex-wrap: wrap;
justify-content: center;
}
}
/* Smooth Scroll Behavior */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.enhanced-header,
.enhanced-header.sticky,
.mobile-menu-drawer,
.mobile-menu-overlay {
transition: none;
}
}
/* Main content container should have lower z-index */
.container {
position: relative;
z-index: 1;
overflow: visible;
}
/* CRITICAL: Remove ALL spacing from main content container */
main#main-content.container,
main.container,
#main-content.container,
main#main-content,
#main-content,
main.container#main-content {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Override Bootstrap container padding for main elements */
main.container,
main#main-content.container {
padding-left: 15px;
padding-right: 15px;
padding-top: 0 !important;
}
/* Fix spacing between header and content - Strong Overrides */
html,
body {
margin: 0 !important;
padding: 0 !important;
}
/* Target all possible main content containers */
main#main-content,
main.main-content,
main.container,
.container > main,
body > main,
#main-content,
main,
.container {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove all top margins from first child elements */
body > main > *:first-child,
#main-content > *:first-child,
main > *:first-child,
.container > *:first-child:not(.enhanced-header),
main.container > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Specifically target the main-content container */
#main-content.container,
main#main-content.container,
main.container#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove any spacing from body > main structure */
body > main.container,
body > main#main-content,
body > main.container#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Ensure no gap between header and main */
header.enhanced-header + main,
header.enhanced-header + main.container,
header.enhanced-header + main#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove spacing from any element directly after header */
.enhanced-header ~ * {
margin-top: 0 !important;
}
.enhanced-header ~ main,
.enhanced-header ~ .container {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Override Bootstrap container default padding */
.container {
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 576px) {
.container {
padding-left: 15px;
padding-right: 15px;
}
}
/* Override Bootstrap utility classes - Keep reasonable spacing */
.mt-5:first-child {
margin-top: var(--spacing-md) !important;
}
.mt-4:first-child {
margin-top: var(--spacing-md) !important;
}
/* Fix spacing after header */
.enhanced-header + *,
.enhanced-header ~ main,
.enhanced-header ~ .container {
margin-top: var(--spacing-sm) !important;
padding-top: var(--spacing-sm) !important;
}
/* Ensure body allows overflow for dropdowns */
body {
overflow-x: hidden;
overflow-y: auto;
}
/* Enhanced Home Page Styles */
.hero-section {
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
border-radius: var(--radius-2xl);
padding: var(--spacing-3xl) var(--spacing-xl);
margin: var(--spacing-xl) 0;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 100%;
border: 1px solid var(--color-border);
box-sizing: border-box;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
animation: rainbow 3s ease-in-out infinite;
}
.hero-section .hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: none !important;
}
.hero-main {
padding-right: 2rem;
}
.hero-logo {
margin-bottom: 2rem;
}
.hero-icon {
font-size: 4rem;
display: block;
margin-bottom: 1rem;
/* Remove distracting animation */
/* animation: float 3s ease-in-out infinite; */
}
.hero-title {
margin-bottom: 0.5rem;
}
.hero-title .dancing-script-topsite {
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 3.5rem;
text-shadow: none;
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--color-text-secondary);
font-weight: 500;
margin-bottom: 2rem;
}
.hero-description {
margin-bottom: 3rem;
color: var(--color-text-primary);
}
.hero-description .lead {
font-size: 1.1rem;
line-height: 1.8;
color: var(--color-text-primary);
}
.hero-image-container {
margin: 2rem 0;
text-align: center;
}
.hero-image {
width: 100%;
max-width: none;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.hero-image:hover {
transform: scale(1.02);
}
.hero-features {
margin: var(--spacing-xl) 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-lg);
max-width: 600px;
margin: 0 auto;
}
.feature-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-xl);
backdrop-filter: blur(10px);
border: 1px solid rgba(102, 126, 234, 0.15);
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
}
.feature-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 0.95);
border-color: var(--color-primary-light);
}
.feature-icon {
font-size: var(--font-size-2xl);
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: transform var(--transition-base);
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-text {
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-size: var(--font-size-base);
}
/* Dark mode support for hero section */
[data-theme="dark"] .hero-section,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero-section {
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .hero-subtitle {
color: var(--color-text-secondary);
}
:root:not([data-theme="light"]) .hero-description,
:root:not([data-theme="light"]) .hero-description .lead {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .feature-item {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .feature-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-primary-light);
}
:root:not([data-theme="light"]) .feature-text {
color: var(--color-text-primary);
}
}
.hero-cta {
margin-top: 2rem;
}
.btn-gradient {
pointer-events: auto !important;
z-index: 10;
position: relative;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 25px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-gradient:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-icon {
font-size: 1.1rem;
}
/* Hero Sidebar */
.hero-sidebar {
background: rgba(255, 255, 255, 0.9);
border-radius: var(--radius-2xl);
padding: var(--spacing-xl);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(102, 126, 234, 0.15);
height: fit-content;
box-shadow: var(--shadow-lg);
transition: all var(--transition-base);
}
.hero-sidebar:hover {
box-shadow: var(--shadow-xl);
border-color: rgba(102, 126, 234, 0.25);
}
/* Welcome Section */
.welcome-section {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(102, 126, 234, 0.2);
margin-bottom: 2rem;
overflow: hidden;
}
.welcome-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.welcome-icon {
font-size: 1.5rem;
animation: pulse 2s infinite;
}
.welcome-title {
font-size: 1.3rem;
font-weight: 700;
color: #495057;
margin: 0;
}
.welcome-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.quick-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
width: 100%;
min-width: 0;
}
.stat-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-sm) var(--spacing-xs);
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
border: 1px solid rgba(102, 126, 234, 0.15);
transition: all var(--transition-base);
box-shadow: var(--shadow-sm);
min-width: 0;
overflow: hidden;
position: relative;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0;
transition: opacity var(--transition-base);
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: rgba(255, 255, 255, 1);
border-color: var(--color-primary-light);
}
.stat-item:hover::before {
opacity: 1;
}
.stat-number {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-xs);
line-height: 1;
transition: all var(--transition-base);
}
.stat-item:hover .stat-number {
transform: scale(1.1);
}
.stat-label {
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xs);
line-height: var(--line-height-tight);
margin-top: var(--spacing-xs);
text-align: center;
width: 100%;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
/* Sidebar Sections */
.sidebar-section {
margin-bottom: 2rem;
}
.sidebar-section:last-child {
margin-bottom: 0;
}
.section-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}
.section-title-sm {
font-size: 1.1rem;
font-weight: 700;
color: #495057;
margin: 0;
}
.section-icon {
font-size: 1.2rem;
}
.content-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.list-item {
transition: all 0.3s ease;
}
.list-link {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
border-radius: var(--radius-lg);
text-decoration: none;
color: var(--color-text-primary);
transition: all var(--transition-base);
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(102, 126, 234, 0.1);
box-shadow: var(--shadow-sm);
}
.list-link:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
color: var(--color-primary);
transform: translateX(8px);
text-decoration: none;
box-shadow: var(--shadow-md);
border-color: var(--color-primary-light);
}
.list-link.active {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-text-inverse);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.list-icon {
font-size: 1.1rem;
flex-shrink: 0;
}
.list-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.list-text {
font-weight: 600;
font-size: 0.9rem;
}
.list-category {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
}
/* Responsive adjustments for home page */
@media (max-width: 991.98px) {
.hero-main {
padding-right: 0;
margin-bottom: 2rem;
}
.hero-sidebar-wrapper {
flex: none;
width: 100%;
max-width: none;
}
.quick-stats {
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
}
}
@media (max-width: 768px) {
.hero-section {
padding: 2rem 2rem;
width: 98%;
}
.hero-title .dancing-script-topsite {
font-size: 2.5rem;
}
.hero-icon {
font-size: 2.5rem;
}
.feature-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.quick-stats {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.hero-sidebar {
padding: 1.5rem;
}
.welcome-section {
padding: 1rem;
}
}
/* Page Header Styles */
.page-header-section {
background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 50%, #f0f8ff 100%);
border-radius: 20px;
padding: 2rem;
margin: 2rem 0;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1);
}
.page-header-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
animation: rainbow 3s ease-in-out infinite;
}
.page-title-section {
position: relative;
z-index: 2;
}
.page-title {
font-size: 3rem;
font-weight: 700;
color: #fff !important; /* Pure white for maximum lightness */
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.title-icon {
color: #fff6d6; /* Lighter gold/white for better contrast */
font-size: 2.5rem;
animation: pulse 2s infinite;
}
.page-subtitle {
font-size: 1.2rem;
color: #bfcfff; /* Lighter blue for better contrast */
font-weight: 500;
margin-bottom: 1rem;
}
.last-updated {
margin-top: 1rem;
}
.update-badge {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
/* Content Card Styles */
.content-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.1);
margin-bottom: 2rem;
}
.card-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.card-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.section-title {
font-size: 1.8rem;
font-weight: 700;
color: #495057;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.section-icon {
font-size: 1.5rem;
animation: pulse 2s infinite;
}
.section-content {
color: #495057;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.section-content:last-child {
margin-bottom: 0;
}
.highlight-link {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.highlight-link:hover {
color: #764ba2;
text-decoration: underline;
}
/* Feature Grid Styles */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.feature-card {
background: rgba(255, 255, 255, 0.8);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
background: rgba(255, 255, 255, 0.95);
}
.feature-card .feature-icon {
font-size: 2rem;
margin-bottom: 1rem;
display: block;
animation: pulse 2s infinite;
}
.feature-card .feature-title {
font-size: 1.3rem;
font-weight: 700;
color: #495057;
margin-bottom: 1rem;
}
.feature-card .feature-description {
color: #6c757d;
line-height: 1.6;
font-size: 1rem;
}
/* Info Box Styles */
.info-box {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(102, 126, 234, 0.2);
margin: 1.5rem 0;
}
.info-title {
font-size: 1.3rem;
font-weight: 700;
color: #495057;
margin-bottom: 1rem;
}
.info-content {
color: #495057;
line-height: 1.6;
margin-bottom: 0;
}
.info-list {
color: #495057;
line-height: 1.8;
padding-left: 1.5rem;
}
.info-list li {
margin-bottom: 0.75rem;
}
.info-list li:last-child {
margin-bottom: 0;
}
/* CTA Section */
.cta-section {
text-align: center;
margin-top: 2rem;
}
/* Responsive adjustments for pages */
@media (max-width: 768px) {
.page-header-section {
padding: 1.5rem;
margin: 1rem 0;
}
.page-title {
font-size: 2.2rem;
flex-direction: column;
gap: 0.5rem;
}
.title-icon {
font-size: 2rem;
}
.content-card {
padding: 1.5rem;
}
.section-title {
font-size: 1.5rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.feature-card {
padding: 1.25rem;
}
.info-box {
padding: 1.25rem;
}
}
/* Site Category Detail Page Styles */
.category-hero {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
margin-bottom: var(--spacing-xl);
border: 1px solid rgba(102, 126, 234, 0.1);
}
.hero-background {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
position: relative;
}
.hero-overlay {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
}
.hero-content {
text-align: center;
color: white;
max-width: 800px;
}
.category-title {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-family: "Dancing Script", cursive;
}
.category-description {
font-size: 1.2rem;
line-height: 1.6;
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Category Page Filters and Sorting */
.category-filters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: var(--color-bg-secondary);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-light);
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
flex: 1;
min-width: 200px;
}
.filter-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-xs);
}
.filter-select,
.sort-select {
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-size: var(--font-size-base);
transition: all var(--transition-base);
min-height: 44px;
}
.filter-select:focus,
.sort-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* View Toggle (Grid/List) */
.view-toggle {
display: flex;
gap: var(--spacing-xs);
background: var(--color-bg-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-xs);
}
.view-toggle-btn {
padding: var(--spacing-xs) var(--spacing-md);
border: none;
background: transparent;
color: var(--color-text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-base);
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.view-toggle-btn.active {
background: var(--color-primary);
color: var(--color-text-inverse);
box-shadow: var(--shadow-sm);
}
.view-toggle-btn:hover:not(.active) {
background: var(--color-bg-tertiary);
color: var(--color-text-primary);
}
/* Sites Grid */
.sites-grid {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.sites-grid.grid-view {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-lg);
}
@media (max-width: 768px) {
.sites-grid.grid-view {
grid-template-columns: 1fr;
}
}
/* Enhanced Site Card Base Styles (using design system) */
.site-card {
background: var(--color-bg-primary);
border-radius: var(--radius-xl);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-base);
border: 2px solid var(--color-border-light);
position: relative;
overflow: hidden;
}
/* Top Border Accent */
.site-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
opacity: 0;
transition: opacity var(--transition-base);
z-index: 1;
}
/* Enhanced Hover Effects */
.site-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--color-primary);
}
.site-card:hover::before {
opacity: 1;
}
/* Premium Card Enhancements */
.site-card.premium {
background: linear-gradient(135deg, #fffbe6 0%, #fff7c2 100%);
border: 2.5px solid var(--color-accent-gold);
box-shadow: 0 0 24px 4px rgba(255, 215, 0, 0.25), var(--shadow-md);
}
.site-card.premium::before {
background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-light));
height: 4px;
}
.site-card.premium:hover {
border-color: var(--color-accent-gold-light);
box-shadow: 0 0 36px 8px rgba(255, 215, 0, 0.35), var(--shadow-lg);
transform: translateY(-6px);
}
/* Loading Skeleton for Site Cards */
.site-card.skeleton {
pointer-events: none;
}
.site-card.skeleton .site-rank,
.site-card.skeleton .site-title,
.site-card.skeleton .site-description {
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
var(--color-bg-tertiary) 50%,
var(--color-bg-secondary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--radius-md);
color: transparent;
}
.site-card.skeleton .site-rank {
width: 64px;
height: 64px;
}
.site-card.skeleton .site-title {
height: 24px;
width: 60%;
margin-bottom: var(--spacing-sm);
}
.site-card.skeleton .site-description {
height: 16px;
width: 100%;
margin-bottom: var(--spacing-xs);
}
/* Site Card Layout */
.site-card {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
border-radius: var(--radius-xl);
}
/* Enhanced Rank Badge */
.site-rank {
flex-shrink: 0;
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
position: relative;
transition: all var(--transition-base);
}
.site-card:hover .site-rank {
transform: scale(1.1) rotate(5deg);
box-shadow: var(--shadow-lg);
}
.site-card.premium .site-rank {
background: linear-gradient(135deg, var(--color-accent-gold) 0%, var(--color-accent-gold-light) 100%);
box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}
.site-card.premium:hover .site-rank {
box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}
/* Rank Number with Enhanced Styling */
.rank-number {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-inverse);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1;
}
/* Top 3 Special Styling */
.site-card[data-rank="1"] .site-rank {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.site-card[data-rank="2"] .site-rank {
background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
box-shadow: 0 0 15px rgba(192, 192, 192, 0.5);
}
.site-card[data-rank="3"] .site-rank {
background: linear-gradient(135deg, #cd7f32 0%, #e6a857 100%);
box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}
.site-content {
flex: 1;
min-width: 0;
}
.site-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
/* Enhanced Premium Badge */
.premium-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
background: linear-gradient(135deg, var(--color-accent-gold) 0%, var(--color-accent-gold-light) 100%);
color: var(--color-accent-gold-dark);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
border: 1px solid rgba(255, 215, 0, 0.5);
position: relative;
overflow: hidden;
transition: all var(--transition-base);
}
.premium-badge::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
animation: badge-shimmer 3s infinite;
}
@keyframes badge-shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.premium-badge:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}
.badge-icon {
font-size: 1em;
line-height: 1;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.site-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
}
.site-title a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.site-title a:hover {
color: #667eea;
}
.site-card.premium .site-title a {
color: #8b6914;
}
.site-card.premium .site-title a:hover {
color: #d4af37;
}
/* Enhanced Site Banner with Aspect Ratio */
.site-banner {
margin: var(--spacing-md) 0;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
position: relative;
background: var(--color-bg-secondary);
aspect-ratio: 16 / 3;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
}
.site-card:hover .site-banner {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.site-banner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.site-card:hover .site-banner img {
transform: scale(1.05);
}
/* Lazy Loading Placeholder */
.site-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
var(--color-bg-secondary) 25%,
var(--color-bg-tertiary) 50%,
var(--color-bg-secondary) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
z-index: 1;
}
.site-banner img.loaded + .site-banner::before,
.site-banner img[loading="lazy"]:not([src=""]) + .site-banner::before {
display: none;
}
.site-description {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.95rem;
}
/* Enhanced Site Stats Display */
.site-stats {
display: flex;
justify-content: flex-end;
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
flex-wrap: wrap;
}
.site-stats .stat-item {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--color-bg-secondary);
border-radius: var(--radius-full);
transition: all var(--transition-base);
border: 1px solid var(--color-border-light);
min-height: 32px;
}
.site-stats .stat-item:hover {
background: var(--color-bg-tertiary);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
border-color: var(--color-primary-light);
}
.stat-icon {
font-size: var(--font-size-lg);
line-height: 1;
opacity: 0.8;
}
.stat-value {
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
font-size: var(--font-size-base);
line-height: 1;
}
.stat-label {
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
font-weight: var(--font-weight-medium);
}
/* Stat Item Color Variants */
.stat-item.stat-votes {
border-left: 3px solid var(--color-primary);
}
.stat-item.stat-votes .stat-icon {
color: var(--color-primary);
}
.stat-item.stat-visits {
border-left: 3px solid var(--color-info);
}
.stat-item.stat-visits .stat-icon {
color: var(--color-info);
}
.stat-item.stat-rank {
border-left: 3px solid var(--color-accent-gold);
}
.stat-item.stat-rank .stat-icon {
color: var(--color-accent-gold-dark);
}
/* Enhanced Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xs);
margin: var(--spacing-xl) 0;
flex-wrap: wrap;
}
.page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-text-primary);
background: var(--color-bg-primary);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-base);
}
.page-link:hover {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
text-decoration: none;
}
.page-link.active,
.page-item.active .page-link {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: var(--color-text-inverse);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
cursor: default;
}
.page-link.disabled,
.page-item.disabled .page-link {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Empty State */
.empty-state {
text-align: center;
padding: var(--spacing-3xl) var(--spacing-xl);
background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
border-radius: var(--radius-2xl);
border: 2px dashed var(--color-border);
margin: var(--spacing-xl) 0;
box-shadow: var(--shadow-sm);
}
.empty-icon {
font-size: var(--font-size-6xl);
margin-bottom: var(--spacing-lg);
opacity: 0.6;
filter: grayscale(0.3);
transition: all var(--transition-base);
}
.empty-state:hover .empty-icon {
opacity: 0.8;
transform: scale(1.05);
}
.empty-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-primary);
margin-bottom: var(--spacing-sm);
}
.empty-description {
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xl);
font-size: var(--font-size-base);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Articles List */
.articles-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.article-item {
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.article-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.article-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.article-link:hover {
color: #667eea;
}
.article-icon {
font-size: 1.2rem;
opacity: 0.7;
}
.article-title {
font-weight: 500;
line-height: 1.4;
}
/* Sidebar Styles */
.sidebar-card {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
position: sticky;
top: 2rem;
}
.sidebar-section {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e9ecef;
}
.sidebar-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.section-title-sm {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
.section-icon {
font-size: 1.2rem;
}
.info-box {
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
border-left: 4px solid #667eea;
}
.info-content {
color: #6c757d;
line-height: 1.6;
margin-bottom: 1rem;
}
.content-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.list-item {
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.list-item:hover {
background: #e9ecef;
transform: translateX(3px);
}
.list-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.list-link:hover {
color: #667eea;
}
.list-icon {
font-size: 1rem;
opacity: 0.7;
}
.list-text {
font-weight: 500;
}
/* Promotion Card */
.promotion-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 15px;
padding: 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.promotion-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.promotion-header {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.promotion-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}
.promotion-title {
font-size: 1.3rem;
font-weight: 600;
margin: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.promotion-text {
position: relative;
z-index: 2;
line-height: 1.6;
margin-bottom: 1.5rem;
opacity: 0.95;
}
/* Button Styles */
.btn-gradient {
pointer-events: auto !important;
z-index: 10;
position: relative;
background: linear-gradient(135deg, #667eea, #764ba2);
border: none;
color: white;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 25px;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-gradient:hover {
background: linear-gradient(135deg, #764ba2, #667eea);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-icon {
font-size: 1.1rem;
}
.btn-gradient.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.btn-outline-gradient {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.btn-outline-gradient:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-decoration: none;
transform: translateY(-2px);
}
.btn-icon {
font-size: 1rem;
}
/* Responsive Design */
@media (max-width: 992px) {
.category-title {
font-size: 2.5rem;
}
.hero-overlay {
padding: 2rem;
}
.site-card {
flex-direction: column;
text-align: center;
}
.site-rank {
align-self: center;
}
.site-stats {
justify-content: center;
}
.sidebar-card {
position: static;
margin-top: 2rem;
}
}
@media (max-width: 768px) {
.category-title {
font-size: 2rem;
}
.hero-overlay {
padding: 1.5rem;
}
.category-description {
font-size: 1rem;
}
.site-card {
padding: 1rem;
}
.site-title {
font-size: 1.3rem;
}
.site-stats {
gap: 1rem;
}
.stat-item {
padding: 0.4rem 0.8rem;
}
.sidebar-card {
padding: 1.5rem;
}
.promotion-card {
padding: 1rem;
}
.promotion-title {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.site-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.site-stats {
flex-direction: column;
gap: 0.5rem;
}
.stat-item {
justify-content: center;
}
}
/* Emulators Page Styles */
.emulators-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.emulator-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.emulator-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
opacity: 0;
transition: opacity 0.3s ease;
}
.emulator-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border-color: #667eea;
}
.emulator-card:hover::before {
opacity: 1;
}
.emulator-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.emulator-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
flex-shrink: 0;
}
.emulator-icon .icon {
font-size: 1.8rem;
}
.emulator-title .title {
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
line-height: 1.3;
}
.emulator-content {
margin-bottom: 1.5rem;
}
.emulator-website {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.emulator-website .label {
font-weight: 600;
color: #2c3e50;
min-width: 80px;
}
.website-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #667eea;
text-decoration: none;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 25px;
transition: all 0.3s ease;
font-weight: 500;
}
.website-link:hover {
background: #e9ecef;
color: #5a6fd8;
text-decoration: none;
transform: translateY(-1px);
}
.link-icon {
font-size: 1rem;
}
.link-text {
font-size: 0.9rem;
}
.emulator-description {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.emulator-description .label {
font-weight: 600;
color: #2c3e50;
min-width: 100px;
margin-top: 0.25rem;
}
.description-content {
flex: 1;
color: #6c757d;
line-height: 1.6;
font-size: 0.95rem;
}
.description-content ul,
.description-content ol {
margin-top: 1em;
}
.description-content p {
margin-bottom: 1em;
}
.emulator-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
/* Related Links */
.related-links {
display: flex;
flex-direction: column;
gap: 1rem;
}
.link-item {
background: #f8f9fa;
border-radius: 12px;
transition: all 0.3s ease;
overflow: hidden;
}
.link-item:hover {
background: #e9ecef;
transform: translateX(5px);
}
.link-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.link-card:hover {
color: #667eea;
text-decoration: none;
}
.link-icon {
font-size: 1.5rem;
opacity: 0.8;
}
.link-content {
flex: 1;
}
.link-title {
display: block;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.link-description {
display: block;
color: #6c757d;
font-size: 0.9rem;
}
/* Tips Section */
.tips-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tip-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.tip-item:hover {
background: #e9ecef;
transform: translateX(3px);
}
.tip-icon {
font-size: 1.1rem;
opacity: 0.7;
}
.tip-text {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.4;
}
/* Responsive Design for Emulators */
@media (max-width: 992px) {
.emulator-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.emulator-title .title {
font-size: 1.5rem;
}
.emulator-website {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.emulator-description {
flex-direction: column;
gap: 0.5rem;
}
.emulator-description .label {
min-width: auto;
}
.emulator-actions {
justify-content: center;
}
.link-card {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
}
@media (max-width: 768px) {
.emulator-card {
padding: 1.5rem;
}
.emulator-icon {
width: 50px;
height: 50px;
}
.emulator-icon .icon {
font-size: 1.5rem;
}
.emulator-title .title {
font-size: 1.3rem;
}
.website-link {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.tip-item {
padding: 0.6rem 0.8rem;
}
.tip-text {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.emulator-card {
padding: 1rem;
}
.emulator-header {
gap: 0.75rem;
}
.emulator-icon {
width: 45px;
height: 45px;
}
.emulator-icon .icon {
font-size: 1.3rem;
}
.emulator-title .title {
font-size: 1.2rem;
}
.emulator-actions {
flex-direction: column;
gap: 0.5rem;
}
.btn-gradient.btn-sm {
width: 100%;
justify-content: center;
}
}
/* Home Page Custom Layout */
.hero-layout {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.hero-main-content {
flex: 8;
min-width: 0;
}
.hero-sidebar-wrapper {
flex: 4;
min-width: 0;
max-width: 500px; /* Give sidebar even more space */
}
/* Responsive adjustments for home page */
@media (max-width: 991.98px) {
.hero-section {
padding: 2rem 2rem;
width: 98%;
}
.hero-layout {
flex-direction: column;
gap: 1.5rem;
}
.hero-main-content {
flex: none;
width: 100%;
}
.hero-sidebar-wrapper {
flex: none;
width: 100%;
max-width: none;
}
}
/* Blog Articles Page Styles */
.filter-section {
margin-bottom: 1rem;
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.filter-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #f8f9fa;
border: 2px solid transparent;
border-radius: 25px;
color: #6c757d;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.filter-btn:hover {
background: #e9ecef;
color: #495057;
text-decoration: none;
transform: translateY(-1px);
}
.filter-btn.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-color: #667eea;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.filter-icon {
font-size: 1rem;
}
.filter-text {
font-size: 0.9rem;
}
/* Articles Grid */
.articles-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.article-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.article-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
opacity: 0;
transition: opacity 0.3s ease;
}
.article-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
border-color: #667eea;
}
.article-card:hover::before {
opacity: 1;
}
.article-image {
flex-shrink: 0;
width: 120px;
height: 80px;
border-radius: 10px;
overflow: hidden;
background: #f8f9fa;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.placeholder-icon {
font-size: 2rem;
opacity: 0.5;
}
.article-content {
flex: 1;
min-width: 0;
}
.article-header {
margin-bottom: 1rem;
}
.article-title {
font-size: 1.3rem;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.article-title a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.article-title a:hover {
color: #667eea;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.article-category,
.article-type,
.article-date {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.8rem;
background: #f8f9fa;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
color: #6c757d;
}
.article-category.uncategorized {
background: #e9ecef;
color: #6c757d;
}
.category-icon,
.type-icon,
.date-icon {
font-size: 0.9rem;
opacity: 0.7;
}
/* Pagination */
.pagination-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e9ecef;
}
.pagination-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.pagination-item {
list-style: none;
}
.pagination-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: #f8f9fa;
border: 2px solid transparent;
border-radius: 25px;
color: #6c757d;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.pagination-link:hover {
background: #e9ecef;
color: #495057;
text-decoration: none;
transform: translateY(-1px);
}
.pagination-link.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.pagination-icon {
font-size: 0.9rem;
}
.pagination-info {
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
margin: 0 0.5rem;
}
/* Stats Grid */
.stats-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 12px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
}
.stat-card:hover {
background: #e9ecef;
transform: translateX(3px);
}
.stat-card .stat-icon {
font-size: 1.5rem;
opacity: 0.7;
}
.stat-content {
flex: 1;
}
.stat-card .stat-number {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
line-height: 1;
margin-bottom: 0.2rem;
}
.stat-card .stat-label {
font-size: 0.8rem;
color: #6c757d;
font-weight: 500;
}
/* Active Link States */
.list-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.list-link.active:hover {
color: white;
transform: translateX(3px);
}
/* Responsive Design for Blog Articles */
@media (max-width: 992px) {
.article-card {
flex-direction: column;
text-align: center;
}
.article-image {
width: 100%;
height: 120px;
}
.article-meta {
justify-content: center;
}
.filter-buttons {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.article-card {
padding: 1rem;
}
.article-title {
font-size: 1.1rem;
}
.article-meta {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.filter-buttons {
flex-direction: column;
align-items: stretch;
}
.filter-btn {
justify-content: center;
}
.pagination-nav {
flex-direction: column;
gap: 0.75rem;
}
.pagination-info {
margin: 0;
}
}
@media (max-width: 576px) {
.article-image {
height: 100px;
}
.article-title {
font-size: 1rem;
}
.article-category,
.article-type,
.article-date {
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
}
.pagination-link {
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
}
}
/* ===== BLOG ARTICLE DETAIL PAGE ===== */
/* Page Header */
.page-header-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem 0;
margin-top: -2rem;
margin-bottom: 3rem;
}
.breadcrumb-nav {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1rem 1.5rem;
margin: 0;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.breadcrumb-nav .breadcrumb-item a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.breadcrumb-nav .breadcrumb-item a:hover {
color: #fff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.breadcrumb-nav .breadcrumb-item.active {
color: #fff;
font-weight: 600;
}
/* Article Header */
.article-header-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 3rem;
margin-bottom: 3rem;
position: relative;
overflow: hidden;
}
.article-header-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.article-header-content {
position: relative;
z-index: 2;
}
.article-meta-badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.article-type-badge,
.article-category-badge,
.article-date-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
padding: 0.5rem 1rem;
color: #fff;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.article-type-badge:hover,
.article-category-badge:hover,
.article-date-badge:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.badge-icon {
font-size: 1rem;
}
.badge-text {
font-weight: 600;
}
.article-title {
color: #fff;
font-size: 3rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.article-hero-image {
margin-top: 2rem;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.article-hero-image img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-hero-image:hover img {
transform: scale(1.05);
}
/* Article Content */
.article-content-wrapper {
font-size: 1.1rem;
line-height: 1.8;
color: #333;
}
.article-content-wrapper h1,
.article-content-wrapper h2,
.article-content-wrapper h3,
.article-content-wrapper h4,
.article-content-wrapper h5,
.article-content-wrapper h6 {
color: #2c3e50;
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 600;
}
.article-content-wrapper h1 { font-size: 2.2rem; }
.article-content-wrapper h2 { font-size: 1.8rem; }
.article-content-wrapper h3 { font-size: 1.5rem; }
.article-content-wrapper p {
margin-bottom: 1.5rem;
}
.article-content-wrapper img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 1.5rem 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.article-content-wrapper blockquote {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #667eea;
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 10px 10px 0;
font-style: italic;
font-size: 1.1rem;
}
.article-content-wrapper code {
background: #f8f9fa;
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: #e83e8c;
}
.article-content-wrapper pre {
background: #2d3748;
color: #e2e8f0;
padding: 1.5rem;
border-radius: 10px;
overflow-x: auto;
margin: 1.5rem 0;
}
.article-content-wrapper pre code {
background: none;
color: inherit;
padding: 0;
}
/* Related Resources */
.related-resources {
display: grid;
gap: 1rem;
margin-top: 1.5rem;
}
.resource-item {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.resource-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.resource-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.resource-link:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.resource-icon {
font-size: 2rem;
flex-shrink: 0;
}
.resource-content {
flex: 1;
}
.resource-title {
display: block;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.resource-description {
display: block;
font-size: 0.9rem;
opacity: 0.7;
}
/* Sidebar Styles */
.sidebar-card {
position: sticky;
top: 2rem;
}
.sidebar-section {
background: #fff;
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.section-icon {
font-size: 1.5rem;
}
.section-title-sm {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}
/* Article Info */
.article-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
border-left: 3px solid #667eea;
}
.info-label {
font-weight: 600;
color: #495057;
}
.info-value {
color: #2c3e50;
font-weight: 500;
}
/* Share Buttons */
.share-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.share-btn {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
text-decoration: none;
color: #fff;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.share-btn.twitter {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}
.share-btn.facebook {
background: linear-gradient(135deg, #4267b2 0%, #365899 100%);
}
.share-btn.linkedin {
background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.share-icon {
font-size: 1.2rem;
}
.share-text {
font-weight: 600;
}
/* Content List */
.content-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.list-item {
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.list-item:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.list-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
text-decoration: none;
color: #495057;
transition: all 0.3s ease;
}
.list-item:hover .list-link {
color: #fff;
}
.list-icon {
font-size: 1.1rem;
}
.list-text {
font-weight: 500;
}
/* Info Box */
.info-box {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border-radius: 10px;
padding: 1.5rem;
border-left: 4px solid #2196f3;
}
.info-content {
margin-bottom: 1rem;
color: #1565c0;
font-weight: 500;
line-height: 1.6;
}
/* Promotion Card */
.promotion-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
padding: 2rem;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.promotion-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,');
opacity: 0.3;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(180deg); }
}
.promotion-header {
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
.promotion-icon {
font-size: 3rem;
display: block;
margin-bottom: 0.5rem;
}
.promotion-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.promotion-text {
position: relative;
z-index: 2;
margin-bottom: 1.5rem;
line-height: 1.6;
opacity: 0.95;
}
/* Responsive Design */
@media (max-width: 991.98px) {
.article-header-section {
padding: 2rem;
}
.article-title {
font-size: 2.5rem;
}
.article-meta-badges {
justify-content: center;
}
.sidebar-card {
position: static;
margin-top: 2rem;
}
}
@media (max-width: 767.98px) {
.article-header-section {
padding: 1.5rem;
}
.article-title {
font-size: 2rem;
}
.article-meta-badges {
flex-direction: column;
align-items: center;
}
.article-type-badge,
.article-category-badge,
.article-date-badge {
width: fit-content;
}
.related-resources {
grid-template-columns: 1fr;
}
.share-buttons {
flex-direction: row;
flex-wrap: wrap;
}
.share-btn {
flex: 1;
min-width: 120px;
}
}
@media (max-width: 575.98px) {
.article-header-section {
padding: 1rem;
}
.article-title {
font-size: 1.75rem;
}
.article-content-wrapper {
font-size: 1rem;
}
.promotion-card {
padding: 1.5rem;
}
.promotion-title {
font-size: 1.25rem;
}
}
/* ===== BREADCRUMB NAVIGATION ===== */
/* Standardized breadcrumb system - consolidated from multiple implementations */
/* Breadcrumb Section Container */
.breadcrumb-section {
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border);
padding: var(--spacing-sm) 0;
margin-bottom: var(--spacing-lg);
width: 100%;
box-sizing: border-box;
}
/* Ensure breadcrumb container aligns with main content containers */
.breadcrumb-section .container {
padding-left: 15px;
padding-right: 15px;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 576px) {
.breadcrumb-section .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.breadcrumb-section .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.breadcrumb-section .container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.breadcrumb-section .container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.breadcrumb-section .container {
max-width: 1320px;
}
}
/* All breadcrumb navigation styles - unified */
.breadcrumb,
.breadcrumb-nav,
.breadcrumb-custom {
background: transparent;
border-radius: 0;
padding: 0;
margin: 0;
border: none;
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
font-size: var(--font-size-sm);
gap: var(--spacing-xs);
}
.breadcrumb-item,
.breadcrumb-nav li,
.breadcrumb-custom li {
display: flex;
align-items: center;
color: #212529 !important; /* Dark color for light mode visibility */
font-size: var(--font-size-sm);
}
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-nav li + li::before,
.breadcrumb-custom li + li::before {
content: '/';
color: #6c757d !important; /* Medium grey for separators */
margin: 0 var(--spacing-sm);
font-weight: var(--font-weight-normal);
pointer-events: none;
}
.breadcrumb-item a,
.breadcrumb-nav a,
.breadcrumb-custom a {
color: #212529 !important; /* Dark color for light mode visibility */
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--transition-base);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
}
.breadcrumb-item a:hover,
.breadcrumb-nav a:hover,
.breadcrumb-custom a:hover {
color: var(--color-primary) !important;
background: rgba(102, 126, 234, 0.1);
text-decoration: none;
}
.breadcrumb-item.active,
.breadcrumb-nav li.active,
.breadcrumb-custom li.active {
color: #212529 !important; /* Dark color for light mode visibility */
font-weight: var(--font-weight-semibold);
padding: var(--spacing-xs) var(--spacing-sm);
}
/* Legacy Bootstrap Breadcrumb Override - make it consistent */
.breadcrumb.p-3.bg-body-tertiary.rounded-3 {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0;
border: none;
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item {
font-size: var(--font-size-sm);
color: #212529 !important; /* Dark color for light mode visibility */
display: flex;
align-items: center;
}
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item:not(:last-child)::after {
content: '/';
color: #6c757d !important; /* Medium grey for separators */
margin: 0 var(--spacing-sm);
font-weight: var(--font-weight-normal);
}
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item a {
color: #212529 !important; /* Dark color for light mode visibility */
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--transition-base);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
}
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item a:hover {
color: var(--color-primary) !important;
background: rgba(102, 126, 234, 0.1);
text-decoration: none;
}
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item.active {
color: #212529 !important; /* Dark color for light mode visibility */
font-weight: var(--font-weight-semibold);
}
/* Dark Mode Support for Breadcrumbs */
[data-theme="dark"] .breadcrumb-section,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .breadcrumb-section {
background: var(--color-bg-secondary);
border-bottom-color: var(--color-border);
}
:root:not([data-theme="light"]) .breadcrumb-item,
:root:not([data-theme="light"]) .breadcrumb-nav li,
:root:not([data-theme="light"]) .breadcrumb-custom li {
color: #e9ecef !important; /* Light color for dark mode */
}
:root:not([data-theme="light"]) .breadcrumb-item + .breadcrumb-item::before,
:root:not([data-theme="light"]) .breadcrumb-nav li + li::before,
:root:not([data-theme="light"]) .breadcrumb-custom li + li::before {
color: #adb5bd !important; /* Lighter grey for separators in dark mode */
}
:root:not([data-theme="light"]) .breadcrumb-item a,
:root:not([data-theme="light"]) .breadcrumb-nav a,
:root:not([data-theme="light"]) .breadcrumb-custom a {
color: #e9ecef !important; /* Light color for dark mode */
}
:root:not([data-theme="light"]) .breadcrumb-item a:hover,
:root:not([data-theme="light"]) .breadcrumb-nav a:hover,
:root:not([data-theme="light"]) .breadcrumb-custom a:hover {
color: var(--color-primary) !important;
background: rgba(124, 142, 240, 0.15);
}
:root:not([data-theme="light"]) .breadcrumb-item.active,
:root:not([data-theme="light"]) .breadcrumb-nav li.active,
:root:not([data-theme="light"]) .breadcrumb-custom li.active {
color: #e9ecef !important; /* Light color for dark mode */
}
}
/* Responsive */
@media (max-width: 768px) {
.breadcrumb-section {
padding: var(--spacing-xs) 0;
margin-bottom: var(--spacing-md);
}
.breadcrumb,
.breadcrumb-nav,
.breadcrumb-custom,
.breadcrumb.p-3.bg-body-tertiary.rounded-3 {
font-size: var(--font-size-xs);
gap: var(--spacing-xs);
}
.breadcrumb-item,
.breadcrumb-nav li,
.breadcrumb-custom li,
.breadcrumb.p-3.bg-body-tertiary.rounded-3 .breadcrumb-item {
font-size: var(--font-size-xs);
}
}
.hero-features {
margin: 1.2rem 0;
max-width: 500px;
}
.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1rem;
max-width: 500px;
margin: 0 auto;
}
/* Gold Premium Card Enhancements */
.site-card.gold-premium {
border: 3px solid #ffd700;
background: linear-gradient(100deg, #fffbe6 0%, #fff7c2 100%);
box-shadow: 0 0 24px 4px rgba(255, 215, 0, 0.25), 0 2px 8px 0 rgba(0,0,0,0.04);
position: relative;
z-index: 2;
transform: scale(1.03);
transition: box-shadow 0.2s, transform 0.2s;
}
.site-card.gold-premium:hover {
box-shadow: 0 0 36px 8px rgba(255, 215, 0, 0.35), 0 4px 16px 0 rgba(0,0,0,0.08);
transform: scale(1.045);
}
.site-card.gold-premium::before {
content: "GOLD";
position: absolute;
top: -12px;
right: -12px;
background: linear-gradient(90deg, #ffd700 60%, #fffbe6 100%);
color: #7c5c00;
font-weight: bold;
font-size: 0.85em;
padding: 4px 16px 4px 10px;
border-radius: 0 0 0 16px;
box-shadow: 0 2px 8px 0 rgba(255, 215, 0, 0.18);
letter-spacing: 1px;
z-index: 10;
border-top: 2px solid #ffd700;
border-right: 2px solid #ffd700;
}
/* ============================================
FINAL SPACING FIX - Highest Priority (End of File)
============================================ */
/* CRITICAL: Add small spacing - This must override ALL other rules */
header.enhanced-header {
margin-bottom: var(--spacing-sm) !important;
}
main#main-content.container,
main.container#main-content {
margin-top: var(--spacing-sm) !important;
padding-top: 0 !important;
}
header.enhanced-header + main#main-content.container,
header.enhanced-header ~ main#main-content.container {
margin-top: var(--spacing-sm) !important;
padding-top: 0 !important;
}
main#main-content.container > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ============================================
COMPREHENSIVE DARK MODE SUPPORT
============================================ */
/* Page Header Section Dark Mode */
[data-theme="dark"] .page-header-section,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .page-header-section {
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
border-color: var(--color-border);
}
}
/* Content Card Dark Mode */
[data-theme="dark"] .content-card,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .content-card {
background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .section-title,
:root:not([data-theme="light"]) .section-content {
color: var(--color-text-primary);
}
}
/* Site Card Dark Mode */
[data-theme="dark"] .site-card,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-card {
background: var(--color-bg-primary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .site-title a {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .site-description {
color: var(--color-text-secondary);
}
}
/* Sidebar Card Dark Mode */
[data-theme="dark"] .sidebar-card,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sidebar-card {
background: var(--color-bg-primary);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .section-title-sm {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .list-link {
color: var(--color-text-primary);
background: var(--color-bg-secondary);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .list-link:hover {
background: var(--color-bg-tertiary);
color: var(--color-primary);
}
:root:not([data-theme="light"]) .list-text {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .list-category {
color: var(--color-text-secondary);
}
}
/* Hero Sidebar Dark Mode */
[data-theme="dark"] .hero-sidebar,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero-sidebar {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .welcome-section {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .welcome-title {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .welcome-description {
color: var(--color-text-secondary);
}
:root:not([data-theme="light"]) .stat-item {
background: var(--color-bg-secondary);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .stat-label {
color: var(--color-text-secondary);
}
:root:not([data-theme="light"]) .section-header {
border-bottom-color: var(--color-border);
}
:root:not([data-theme="light"]) .section-title-sm {
color: var(--color-text-primary);
}
}
/* Article Card Dark Mode */
[data-theme="dark"] .article-card,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .article-card {
background: var(--color-bg-primary);
border-color: var(--color-border);
}
:root:not([data-theme="light"]) .article-title a {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .article-category,
:root:not([data-theme="light"]) .article-type,
:root:not([data-theme="light"]) .article-date {
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
}
}
/* Info Box Dark Mode */
[data-theme="dark"] .info-box,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .info-box {
background: var(--color-bg-secondary);
border-left-color: var(--color-primary);
}
:root:not([data-theme="light"]) .info-content {
color: var(--color-text-primary);
}
}
/* Site Stats Dark Mode */
[data-theme="dark"] .site-stats,
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .site-stats .stat-item {
background: var(--color-bg-secondary);
}
:root:not([data-theme="light"]) .stat-value {
color: var(--color-text-primary);
}
:root:not([data-theme="light"]) .stat-label {
color: var(--color-text-secondary);
}
}
/* ============================================
END COMPREHENSIVE DARK MODE SUPPORT
============================================ */
/* ============================================
END FINAL SPACING FIX
============================================ */