/* --- Readability fixes for stats section (reduce blur/tint overlay) --- */
.enhanced-stats-sanitasi {
position: relative;
z-index: 2; /* lift above header overlays */
}
.enhanced-stats-sanitasi .glass-card-ultra {
backdrop-filter: blur(0px); /* neutralize heavy blur */
-webkit-backdrop-filter: blur(0px);
background-color: rgba(255,255,255,0.12); /* subtle glass without washing out */
}
.enhanced-stats-sanitasi .stats-header .stat-icon {
filter: none;
opacity: 1;
}
.enhanced-page-header .page-header-background::before,
.enhanced-page-header .page-header-background::after,
.enhanced-page-header .header-pattern-overlay::before,
.enhanced-page-header .header-pattern-overlay::after {
opacity: 0.35 !important; /* reduce heavy overlay over content */
}
/* Ensure text contrast on dark gradients */
.enhanced-stats-sanitasi .stat-label,
.enhanced-stats-sanitasi .stats-description,
.enhanced-stats-sanitasi .stats-unit { color: rgba(255,255,255,0.92); }
.enhanced-stats-sanitasi .stats-number { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.enhanced-stats-sanitasi .stats-progress .progress-bar-modern { box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); }
/* --- Custom Gradient Utilities for Stats Section --- */
.text-gradient-sanitasi {
background: linear-gradient(90deg, #00b4d8 0%, #48cae4 40%, #90e0ef 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #00b4d8;
font-weight: 700;
}
.text-gradient-alert {
background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #ffc107;
font-weight: 700;
}
.text-gradient-health {
background: linear-gradient(90deg, #007bff 0%, #00b4d8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #007bff;
font-weight: 700;
}
.text-gradient-environmental {
background: linear-gradient(90deg, #28a745 0%, #43ea7c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: #28a745;
font-weight: 700;
}
.bg-gradient-primary {
background: linear-gradient(135deg, #00b4d8 0%, #48cae4 100%);
}
.bg-gradient-alert {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.bg-gradient-health {
background: linear-gradient(135deg, #007bff 0%, #00b4d8 100%);
}
.bg-gradient-environmental {
background: linear-gradient(135deg, #28a745 0%, #43ea7c 100%);
}
.shadow-lg {
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1.5px 4px rgba(0,180,216,0.08);
}
/*--------------------------------------------------------------
# Sanitasi Hero Cards (Status Summary under Header)
--------------------------------------------------------------*/
.sanitasi-hero-card {
position: relative;
border-radius: 22px;
padding: 18px 18px 16px;
color: #fff;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 18px 45px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.35);
transform: translateZ(0);
display: flex;
flex-direction: column;
}
.sanitasi-hero-card::after{
content: '';
position: absolute;
right: -30px;
top: -30px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 70%, transparent 72%);
filter: blur(2px);
}
.sanitasi-hero-card .icon-badge{
width: 46px;
height: 46px;
border-radius: 14px;
background: rgba(255,255,255,0.18);
display:flex;align-items:center;justify-content:center;
color:#fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 24px rgba(0,0,0,0.15);
}
.sanitasi-hero-card .icon-badge i{ font-size: 1.1rem; }
.hero-card-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hero-card-body{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.hero-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font-size:.85rem; opacity:.95; }
.metric-kicker{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.trend-badge{
font-size: 0.72rem;
font-weight: 800;
letter-spacing: .02em;
padding: 6px 10px;
border-radius: 999px;
color: #fff;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.35);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.trend-badge.up{ background: rgba(16,185,129,.25); border-color: rgba(16,185,129,.55); }
.trend-badge.down{ background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.55); }
.trend-badge.stable{ background: rgba(3,105,161,.25); border-color: rgba(3,105,161,.45); }
.hero-number{ font-size: 2.4rem; font-weight: 800; line-height: 1; text-shadow: 0 6px 16px rgba(0,0,0,.22); }
.hero-number .unit{ font-size: .9rem; font-weight: 700; opacity: .95; margin-left: 4px; }
.hero-title{ font-weight: 800; letter-spacing: .01em; margin-top: 2px; }
.hero-desc{ opacity: .95; font-size: .9rem; }
.progress-thin{ height: 8px; width: 100%; background: rgba(255,255,255,.28); border-radius: 999px; overflow: hidden; position: relative; }
.progress-thin .progress-bar{ height:100%; width:0; background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.7)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 10px rgba(0,0,0,.15); border-radius: inherit; transition: width 1s ease; }
.status-pill{ padding: 4px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .02em; color:#fff; box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.status-pill.good{ background: rgba(16,185,129,.95); }
.status-pill.warning{ background: rgba(245,158,11,.95); }
.status-pill.critical{ background: rgba(239,68,68,.95); }
/* Variant Gradients */
.card-selesai{ background: linear-gradient(135deg, #10b981 0%, #22c55e 100%); border-color: rgba(16,185,129,.35); }
.card-menunggu{ background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); border-color: rgba(245,158,11,.35); }
.card-proses{ background: linear-gradient(135deg, #fda4af 0%, #ef4444 100%); border-color: rgba(239,68,68,.35); }
.card-total{ background: linear-gradient(135deg, #06b6d4 0%, #15307c 100%); border-color: rgba(21,48,124,.35); }
/* Tidy grid spacing just below header */
.hero-grid{ margin-top:-6px; }
.enhanced-stats-sanitasi .container{ max-width: 1200px; }
.enhanced-stats-sanitasi .sanitasi-hero-card .stretched-link{ position:absolute; inset:0; }
.enhanced-stats-sanitasi .sanitasi-hero-card:hover{ transform: translateY(-2px); box-shadow: 0 22px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4); }
.enhanced-stats-sanitasi .sanitasi-hero-card:active{ transform: translateY(0); }
/* White Summary Card */
.summary-card{
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 55px rgba(0,0,0,0.12);
border: 1px solid rgba(21,48,124,0.08);
}
.summary-metric{ text-align: center; }
.summary-metric .metric-value{ font-size: 1.75rem; font-weight: 800; color: var(--gray-800); }
.summary-metric .metric-label{ font-size: .85rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.summary-gauge{ --value: 72; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: conic-gradient(var(--sanitasi-primary) calc(var(--value) * 1%), #e5e7eb 0); position: relative; box-shadow: 0 12px 28px rgba(21,48,124,.15); }
.summary-gauge .gauge-inner{ width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); text-align: center; }
.summary-gauge .gauge-value{ font-weight: 800; color: var(--gray-800); line-height: 1; }
.summary-gauge .gauge-label{ font-size: .75rem; color: var(--gray-500); margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 576px){
.sanitasi-hero-card{ border-radius: 18px; padding: 16px; }
.hero-number{ font-size: 2rem; }
.summary-gauge{ width: 96px; height: 96px; }
.summary-gauge .gauge-inner{ width: 68px; height: 68px; }
.hero-meta{ font-size:.8rem; }
}
@media (prefers-reduced-motion: reduce){
.progress-thin .progress-bar{ transition: none; }
}
/*--------------------------------------------------------------
# Enhanced Modern Header System
--------------------------------------------------------------*/
/* Header Variables - Sanitasi Theme Colors */
:root {
--header-height: 80px;
--topbar-height: 45px;
--header-bg: rgba(249, 250, 251, 0.95);
--header-shadow: 0 2px 30px rgba(0, 0, 0, 0.1);
--topbar-bg: linear-gradient(135deg, #0f766e, #14b8a6);
--nav-link-color: #1f2937;
--nav-link-active: #0d9488;
--mobile-nav-bg: rgba(255, 255, 255, 0.98);
/* Sanitasi Theme Color Palette */
--sanitasi-primary: #0d9488; /* Teal - Clean water theme */
--sanitasi-secondary: #0f766e; /* Dark teal */
--sanitasi-accent: #14b8a6; /* Light teal */
--sanitasi-success: #059669; /* Green - healthy/clean */
--sanitasi-warning: #d97706; /* Orange - caution */
--sanitasi-danger: #dc2626; /* Red - emergency */
--sanitasi-info: #0284c7; /* Blue - information */
/* Text Colors */
--text-primary: #111827; /* Dark gray for main text */
--text-secondary: #374151; /* Medium gray for secondary text */
--text-muted: #6b7280; /* Light gray for muted text */
--text-light: #f9fafb; /* Light text for dark backgrounds */
--text-accent: #0d9488; /* Teal for accent text */
/* Background Colors */
--bg-primary: #ffffff;
--bg-secondary: #f9fafb;
--bg-accent: #f0fdfa; /* Very light teal */
--bg-dark: #1f2937;
/* Spacing Variables */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
}
/* Enhanced Header Container */
.header-modern {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--header-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--header-shadow);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-modern.scrolled {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(25px);
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.15);
}
/* Enhanced Topbar */
.topbar-modern {
background: var(--topbar-bg);
padding: 8px 0;
font-size: 14px;
color: var(--text-light);
position: relative;
overflow: hidden;
}
.topbar-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: topbarShine 3s infinite;
}
@keyframes topbarShine {
0% { left: -100%; }
50% { left: 100%; }
100% { left: -100%; }
}
.contact-info-modern {
font-weight: 500;
}
.contact-item-modern {
display: flex;
align-items: center;
font-size: 13px;
transition: all 0.3s ease;
}
.contact-item-modern:hover {
transform: translateY(-1px);
color: var(--text-light);
}
.contact-item-modern i {
font-size: 12px;
opacity: 0.9;
}
/* Enhanced Social Links */
.social-links-modern {
display: flex;
gap: 8px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--text-light);
text-decoration: none;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-link:hover::before {
transform: scale(1);
}
.social-link:hover {
transform: translateY(-2px) scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* Emergency Button */
.btn-emergency {
background: linear-gradient(135deg, var(--sanitasi-danger), #b91c1c);
border: none;
color: var(--text-light);
border-radius: 20px;
padding: 6px 16px;
font-weight: 600;
font-size: 12px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
animation: emergencyPulse 2s infinite;
}
@keyframes emergencyPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.btn-emergency:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
color: white;
}
/* Enhanced Branding Section */
.branding-modern {
padding: 15px 0;
background: var(--header-bg);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* Enhanced Logo */
.logo-modern {
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-container {
display: flex;
align-items: center;
gap: 15px;
}
.logo-image {
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.logo-modern:hover .logo-image {
transform: scale(1.05);
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}
.sitename-modern {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
line-height: 1.2;
background: linear-gradient(135deg, var(--sanitasi-secondary), var(--sanitasi-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.accent-dot {
color: var(--sanitasi-accent);
font-size: 28px;
animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.tagline-modern {
font-size: 12px;
color: var(--text-muted);
margin: 0;
font-weight: 500;
letter-spacing: 0.5px;
}
/* Enhanced Navigation */
.navmenu-modern {
position: relative;
}
.nav-list-modern {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
gap: 5px;
}
.nav-item-modern {
position: relative;
}
.nav-link-modern {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
color: var(--nav-link-color);
text-decoration: none;
font-weight: 500;
font-size: 14px;
border-radius: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.nav-link-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(30, 58, 138, 0.1));
border-radius: 25px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link-modern:hover::before,
.nav-link-modern.active::before {
transform: scaleX(1);
}
.nav-link-modern:hover,
.nav-link-modern.active {
color: var(--nav-link-active);
transform: translateY(-1px);
}
.nav-icon {
font-size: 12px;
transition: all 0.3s ease;
}
.nav-link-modern:hover .nav-icon {
transform: scale(1.1);
}
/* Enhanced Dropdown */
.dropdown-modern {
position: relative;
}
.dropdown-toggle-modern {
cursor: pointer;
}
.dropdown-arrow {
font-size: 10px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-modern:hover .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-menu-modern {
position: absolute;
top: 100%;
left: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
list-style: none;
margin: 10px 0 0 0;
padding: 8px;
}
.dropdown-modern:hover .dropdown-menu-modern {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-link-modern {
display: flex;
align-items: center;
padding: 10px 15px;
color: var(--text-secondary);
text-decoration: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-link-modern:hover {
background: rgba(13, 148, 136, 0.1);
color: var(--sanitasi-primary);
transform: translateX(5px);
}
/* Enhanced Action Buttons */
.btn-primary-modern {
background: linear-gradient(135deg, var(--sanitasi-primary), var(--sanitasi-secondary));
border: none;
border-radius: 25px;
padding: 10px 20px;
color: var(--text-light);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
}
.btn-primary-modern::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;
}
.btn-primary-modern:hover::before {
left: 100%;
}
.btn-primary-modern:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(59, 130, 246, 0.3);
color: white;
}
/* Enhanced Search Toggle */
.search-toggle-modern {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(13, 148, 136, 0.1);
color: var(--sanitasi-primary);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.search-toggle-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #3b82f6;
border-radius: 50%;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-toggle-modern:hover::before {
transform: scale(1);
}
.search-toggle-modern:hover {
color: var(--text-light);
transform: scale(1.1);
}
.search-toggle-modern i {
position: relative;
z-index: 2;
}
/* Enhanced Theme Toggle */
.theme-toggle-modern {
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(156, 163, 175, 0.1);
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.theme-toggle-modern .dark-icon {
display: none;
}
[data-theme="dark"] .theme-toggle-modern .light-icon {
display: none;
}
[data-theme="dark"] .theme-toggle-modern .dark-icon {
display: block;
}
.theme-toggle-modern:hover {
background: rgba(156, 163, 175, 0.2);
transform: rotate(180deg) scale(1.1);
}
/* Enhanced Mobile Navigation */
.mobile-nav-toggle-modern {
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-line {
width: 25px;
height: 2px;
background: #374151;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.mobile-nav-toggle-modern.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-nav-toggle-modern.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle-modern.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Enhanced Search Modal */
.search-modal-content {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: none;
border-radius: 20px;
overflow: hidden;
}
.search-modal-header {
background: linear-gradient(135deg, #3b82f6, #1e3a8a);
color: white;
border: none;
padding: 20px 30px;
}
.search-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.search-input-group {
position: relative;
margin-bottom: 20px;
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
z-index: 2;
}
.search-input-modern {
width: 100%;
padding: 15px 20px 15px 55px;
border: 2px solid rgba(13, 148, 136, 0.1);
border-radius: 25px;
font-size: 16px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-primary);
}
.search-input-modern:focus {
outline: none;
border-color: var(--sanitasi-primary);
box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
background: var(--bg-primary);
}
.search-submit-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #3b82f6, #1e3a8a);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-submit-btn:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}
/* Search Suggestions */
.suggestions-title {
font-size: 14px;
font-weight: 600;
color: #6b7280;
margin-bottom: 15px;
}
.suggestion-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.suggestion-tag {
background: rgba(13, 148, 136, 0.1);
border: 1px solid rgba(13, 148, 136, 0.2);
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
color: var(--sanitasi-primary);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 8px;
}
.suggestion-tag:hover {
background: var(--sanitasi-primary);
color: var(--text-light);
transform: translateY(-2px);
}
/* Enhanced Progress Bar */
.reading-progress-modern {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #1e3a8a, #ef4444);
width: 0%;
transition: width 0.1s ease;
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8));
animation: progressShine 2s infinite;
}
@keyframes progressShine {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/* Header Notification */
.header-notification {
background: linear-gradient(135deg, var(--sanitasi-warning), #b45309);
color: var(--text-light);
padding: 8px 0;
font-size: 14px;
animation: slideDownNotification 0.3s ease;
}
@keyframes slideDownNotification {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.notification-close {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.notification-close:hover {
transform: scale(1.2);
opacity: 0.8;
}
/* Mobile Responsiveness */
@media (max-width: 1199.98px) {
.nav-list-modern {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: var(--mobile-nav-bg);
backdrop-filter: blur(20px);
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 0;
padding: 80px 20px 20px;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}
.nav-list-modern.active {
right: 0;
}
.nav-item-modern {
width: 100%;
}
.nav-link-modern {
width: 100%;
padding: 15px 20px;
border-radius: 12px;
margin-bottom: 5px;
}
.dropdown-menu-modern {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(59, 130, 246, 0.05);
margin: 5px 0 10px 20px;
}
}
@media (max-width: 768px) {
.topbar-modern {
display: none;
}
.sitename-modern {
font-size: 20px;
}
.tagline-modern {
font-size: 11px;
}
.logo-container {
gap: 10px;
}
.branding-modern {
padding: 10px 0;
}
}
@media (max-width: 576px) {
.header-actions {
gap: 10px;
}
.btn-primary-modern {
padding: 8px 16px;
font-size: 13px;
}
.search-toggle-modern,
.theme-toggle-modern {
width: 40px;
height: 40px;
}
}
/* Complete CSS Variables System */
:root {
/* Core Sanitasi Colors */
--sanitasi-primary: #15307c; /* Official Sanitasi Blue */
--sanitasi-secondary: #10b981; /* Environmental Green */
--sanitasi-accent: #06b6d4; /* Cyan */
--sanitasi-warning: #f59e0b; /* Amber */
--sanitasi-danger: #ef4444; /* Red */
--sanitasi-success: #10b981; /* Emerald */
--sanitasi-info: #3b82f6; /* Blue */
/* Extended Color Palette */
--primary-color: #15307c;
--primary-dark: #0f2054;
--primary-light: #4f80c7;
--primary-50: #eff6ff;
--primary-100: #dbeafe;
--primary-200: #bfdbfe;
--primary-300: #93c5fd;
--primary-400: #60a5fa;
--primary-500: #3b82f6;
--primary-600: #2563eb;
--primary-700: #1d4ed8;
--primary-800: #1e40af;
--primary-900: #1e3a8a;
/* Semantic Colors */
--success-color: #10b981;
--success-dark: #047857;
--error-color: #ef4444;
--error-dark: #dc2626;
--warning-color: #f59e0b;
--warning-dark: #d97706;
--info-color: #06b6d4;
--info-dark: #0891b2;
/* Gray Scale */
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Modern Gradients */
--gradient-primary: linear-gradient(135deg, #15307c 0%, #10b981 50%, #06b6d4 100%);
--gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
--gradient-dark: linear-gradient(135deg, #1f2937 0%, #374151 100%);
--gradient-environmental: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
--gradient-health: linear-gradient(135deg, #15307c 0%, #10b981 100%);
--gradient-alert: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
/* Typography */
--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Font Sizes */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Spacing System */
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-32: 8rem;
/* Border Radius */
--radius-none: 0;
--radius-sm: 0.25rem;
--radius-base: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
--shadow-lg: 0 10px 25px rgba(0,0,0,0.2);
--shadow-xl: 0 20px 40px rgba(0,0,0,0.25);
--shadow-2xl: 0 25px 50px rgba(0,0,0,0.3);
--shadow-primary: 0 4px 20px rgba(21, 48, 124, 0.4);
/* Transitions */
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-all: all 0.3s ease;
--transition-fast: all 0.15s ease;
--transition-slow: all 0.5s ease;
/* 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;
}
/*--------------------------------------------------------------
# Global Styles & Reset
--------------------------------------------------------------*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
line-height: var(--line-height-normal);
color: var(--gray-700);
background: var(--gray-50);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container-fluid {
padding: 0;
}
/* Performance Optimizations */
.form-control,
.btn,
.card {
will-change: transform, box-shadow;
transform: translateZ(0);
backface-visibility: hidden;
}
/*--------------------------------------------------------------
# Enhanced Sanitasi Form System (Ultra-Modern Integration)
--------------------------------------------------------------*/
.appointment {
padding: var(--space-24) 0 var(--space-32);
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.05) 0%,
rgba(255, 255, 255, 0.98) 15%,
rgba(255, 255, 255, 1) 85%,
rgba(16, 185, 129, 0.05) 100%);
position: relative;
overflow: hidden;
min-height: 100vh;
}
.appointment::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(21, 48, 124, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
url('data:image/svg+xml,') repeat;
background-size: 100% 100%, 100% 100%, 40px 40px;
opacity: 0.6;
pointer-events: none;
animation: floatBackground 20s ease-in-out infinite;
}
.appointment::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--gradient-primary);
opacity: 0.8;
box-shadow: 0 0 20px rgba(21, 48, 124, 0.3);
}
/* Enhanced Section Header */
.appointment .section-header {
text-align: center;
margin-bottom: var(--space-20);
position: relative;
}
.appointment .section-header h2 {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
margin-bottom: var(--space-6);
position: relative;
display: inline-block;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
letter-spacing: -0.025em;
}
.appointment .section-header h2::after {
content: '';
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
box-shadow: 0 4px 12px rgba(21, 48, 124, 0.3);
}
.appointment .section-header p {
font-size: var(--font-size-lg);
color: var(--gray-600);
margin: 0;
max-width: 700px;
margin: 0 auto;
line-height: var(--line-height-relaxed);
font-weight: var(--font-weight-medium);
}
/* Enhanced Process Guide */
.process-guide {
margin-bottom: var(--space-16);
}
.process-card {
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
border-radius: 20px;
padding: var(--space-8);
position: relative;
overflow: hidden;
}
.process-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
}
.process-card:hover::before {
opacity: 1;
}
.process-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(21, 48, 124, 0.1),
0 10px 20px rgba(21, 48, 124, 0.05);
}
.process-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.step-number {
font-family: var(--font-family-display);
font-size: 0.75rem;
z-index: 10;
}
/* Modern Form Wrapper */
.modern-form-wrapper {
position: relative;
border-radius: 24px;
padding: var(--space-12);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 25px 50px rgba(21, 48, 124, 0.08),
0 15px 35px rgba(21, 48, 124, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.modern-form-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-primary);
border-radius: 24px 24px 0 0;
}
/* Form Section Modern */
.form-section-modern {
position: relative;
margin-bottom: var(--space-10);
padding: var(--space-8);
border-radius: 16px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.7) 0%,
rgba(248, 250, 252, 0.8) 100%);
border: 1px solid rgba(21, 48, 124, 0.08);
transition: all 0.3s ease;
}
.form-section-modern:hover {
border-color: rgba(21, 48, 124, 0.15);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(248, 250, 252, 0.9) 100%);
}
.section-header-modern {
margin-bottom: var(--space-6);
}
.section-header-modern h4 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
margin-bottom: var(--space-2);
letter-spacing: -0.025em;
}
.section-header-modern p {
color: var(--gray-600);
font-size: var(--font-size-sm);
margin: 0;
line-height: var(--line-height-relaxed);
}
/* Enhanced Form Controls */
.modern-textarea {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--gray-800);
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(21, 48, 124, 0.1);
border-radius: 12px;
padding: 16px 20px;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
backdrop-filter: blur(10px);
box-shadow:
0 2px 8px rgba(21, 48, 124, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.modern-textarea:focus {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.95);
box-shadow:
0 0 0 4px rgba(21, 48, 124, 0.1),
0 8px 25px rgba(21, 48, 124, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
outline: none;
transform: translateY(-1px);
}
.modern-textarea::placeholder {
color: var(--gray-500);
opacity: 0.8;
font-weight: var(--font-weight-normal);
}
/* Floating Labels Enhancement */
.form-floating > label {
color: var(--gray-600);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
padding-left: 20px;
padding-right: 20px;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
color: var(--primary-color);
font-weight: var(--font-weight-bold);
transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
/* Enhanced Button Styles */
.modern-submit {
background: var(--gradient-primary);
border: none;
color: white;
font-weight: var(--font-weight-bold);
letter-spacing: 0.025em;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.modern-submit::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;
}
.modern-submit:hover::before {
left: 100%;
}
.modern-submit:hover {
transform: translateY(-2px);
box-shadow:
0 12px 30px rgba(21, 48, 124, 0.4),
0 8px 20px rgba(21, 48, 124, 0.2);
}
.modern-submit:active {
transform: translateY(0);
}
/* Form Actions Modern */
.form-actions-modern {
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: 1px solid rgba(21, 48, 124, 0.1);
}
/* Security Info Enhancement */
.form-security-info {
margin-top: var(--space-8);
}
.security-item {
font-size: var(--font-size-sm);
color: var(--gray-700);
font-weight: var(--font-weight-medium);
}
/* Alert Enhancement */
.modern-alert {
border-radius: 16px;
padding: var(--space-6);
border: none;
backdrop-filter: blur(10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.alert-icon .icon-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
/* Animation Enhancements */
@keyframes floatBackground {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes shimmerEffect {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Responsive Enhancements */
@media (max-width: 768px) {
.appointment {
padding: var(--space-16) 0 var(--space-20);
}
.modern-form-wrapper {
padding: var(--space-8);
border-radius: 16px;
}
.form-section-modern {
padding: var(--space-6);
margin-bottom: var(--space-8);
}
.section-header-modern h4 {
font-size: var(--font-size-lg);
}
.modern-textarea {
padding: 14px 16px;
font-size: var(--font-size-sm);
}
}
/* Enhanced Form Groups */
.form-group {
margin-bottom: var(--space-6);
position: relative;
}
.form-group label {
display: block;
margin-bottom: var(--space-2);
color: var(--gray-700);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.form-group label::after {
content: '*';
color: var(--error-color);
margin-left: var(--space-1);
font-weight: var(--font-weight-bold);
}
.form-group label.optional::after {
content: '(opsional)';
color: var(--gray-400);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
text-transform: none;
letter-spacing: normal;
}
/* Environmental themed form elements */
.form-group.environmental .form-control:focus {
border-color: var(--sanitasi-secondary);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
/* Advanced Form Controls */
.form-control {
width: 100%;
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
color: var(--gray-800);
background-color: var(--white);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
transition: var(--transition-all);
outline: none;
position: relative;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.form-control::placeholder {
color: var(--gray-400);
font-weight: var(--font-weight-normal);
font-style: italic;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow:
0 0 0 4px rgba(21, 48, 124, 0.1),
0 4px 12px rgba(21, 48, 124, 0.15),
inset 0 1px 2px rgba(0, 0, 0, 0.02);
transform: translateY(-1px);
background-color: rgba(255, 255, 255, 0.98);
}
.form-control:hover:not(:focus) {
border-color: var(--gray-300);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
.form-control.is-invalid {
border-color: var(--error-color);
box-shadow:
0 0 0 4px rgba(239, 68, 68, 0.1),
0 4px 12px rgba(239, 68, 68, 0.15);
animation: formShake 0.5s ease-in-out;
}
.form-control.is-valid {
border-color: var(--success-color);
box-shadow:
0 0 0 4px rgba(16, 185, 129, 0.1),
0 4px 12px rgba(16, 185, 129, 0.15);
}
.form-control:focus-visible {
outline: 3px solid var(--primary-color);
outline-offset: 2px;
}
/* Advanced Textarea Styling */
textarea.form-control {
min-height: 150px;
resize: vertical;
font-family: inherit;
line-height: var(--line-height-relaxed);
}
textarea.form-control:focus {
min-height: 180px;
}
/* Custom Scrollbar for Textareas */
.php-email-form textarea::-webkit-scrollbar {
width: 8px;
}
.php-email-form textarea::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: var(--radius-base);
}
.php-email-form textarea::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: var(--radius-base);
}
.php-email-form textarea::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* Enhanced Select Styling */
select.form-control {
cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
background-color: var(--white);
appearance: none;
padding-right: var(--space-12);
}
select.form-control:focus {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}
/* Advanced Input Groups */
.input-group {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
}
.input-group .form-control {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
color: var(--gray-600);
text-align: center;
white-space: nowrap;
background-color: var(--gray-50);
border: 2px solid var(--gray-200);
border-radius: var(--radius-lg);
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu) {
margin-left: -2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Advanced Button System */
.btn-submit {
background: var(--gradient-primary);
color: var(--white);
border: none;
padding: var(--space-4) var(--space-10);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-xl);
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--transition-all);
box-shadow: var(--shadow-primary);
min-width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-transform: uppercase;
letter-spacing: 0.5px;
will-change: transform;
}
.btn-submit::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;
will-change: transform;
}
.btn-submit:hover::before {
left: 100%;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl), var(--shadow-primary);
}
.btn-submit:active {
transform: translateY(-1px);
}
.btn-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-submit:focus-visible {
outline: 3px solid var(--white);
outline-offset: 3px;
}
.btn-submit i {
font-size: var(--font-size-xl);
}
.btn-environmental {
background: var(--gradient-environmental);
color: var(--white);
border: none;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-environmental:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl), 0 8px 25px rgba(16, 185, 129, 0.4);
}
/* Enhanced Alert System */
.alert {
padding: var(--space-4) var(--space-6);
margin-bottom: var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-lg);
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: var(--font-weight-medium);
box-shadow: var(--shadow-md);
animation: slideInDown 0.5s ease-out;
}
.alert-success {
color: var(--success-dark);
background-color: rgba(16, 185, 129, 0.1);
border-color: var(--success-color);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}
.alert-danger {
color: var(--error-dark);
background-color: rgba(239, 68, 68, 0.1);
border-color: var(--error-color);
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}
.alert i {
font-size: var(--font-size-xl);
opacity: 0.9;
}
.btn-close {
background: none;
border: none;
font-size: var(--font-size-lg);
cursor: pointer;
opacity: 0.5;
transition: var(--transition-all);
margin-left: auto;
padding: var(--space-1);
border-radius: var(--radius-base);
}
.btn-close:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------------------
# Enhanced Contact Section
--------------------------------------------------------------*/
.contact {
background: var(--white);
padding: var(--space-32) 0;
position: relative;
}
.contact .section-title {
text-align: center;
margin-bottom: var(--space-16);
}
.contact .section-title h2 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--primary-color);
margin-bottom: var(--space-4);
position: relative;
display: inline-block;
}
.contact .section-title h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
}
/* Enhanced Map Container */
.contact iframe {
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
border: 4px solid var(--white);
transition: var(--transition-all);
}
.contact iframe:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2xl);
}
/*--------------------------------------------------------------
# Enhanced Loading States
--------------------------------------------------------------*/
.loading {
display: none;
text-align: center;
padding: var(--space-4);
color: var(--primary-color);
font-weight: var(--font-weight-medium);
position: relative;
}
.loading.d-block {
display: block;
}
.loading::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--primary-200);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: loadingSpin 1s linear infinite;
margin-right: var(--space-2);
vertical-align: middle;
will-change: transform;
}
/* Message States */
.error-message,
.sent-message {
display: none;
padding: var(--space-4);
border-radius: var(--radius-lg);
margin-top: var(--space-4);
font-weight: var(--font-weight-medium);
text-align: center;
}
.error-message {
background-color: rgba(239, 68, 68, 0.1);
color: var(--error-color);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.sent-message {
background-color: rgba(16, 185, 129, 0.1);
color: var(--success-color);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.loading-state {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading-state::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #e5e7eb;
border-top-color: var(--sanitasi-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
/*--------------------------------------------------------------
# Enhanced Dashboard System
--------------------------------------------------------------*/
/* Geographic Map Container */
.geographic-map-container {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 20px;
padding: 24px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
margin-bottom: 24px;
}
.geographic-map-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(21, 48, 124, 0.02) 0%, transparent 70%);
opacity: 0.6;
pointer-events: none;
}
.geographic-map-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 2px solid rgba(21, 48, 124, 0.1);
}
.geographic-map-title h3 {
color: var(--sanitasi-primary);
font-size: 1.3rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.geographic-map-title i {
color: var(--sanitasi-secondary);
font-size: 1.4rem;
}
.map-controls {
display: flex;
gap: 8px;
}
.map-control-btn {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(21, 48, 124, 0.2);
border-radius: 8px;
padding: 8px 12px;
color: var(--sanitasi-primary);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.map-control-btn:hover,
.map-control-btn.active {
background: var(--sanitasi-primary);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(21, 48, 124, 0.2);
}
.bontang-map {
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
border-radius: 16px;
padding: 20px;
min-height: 300px;
position: relative;
border: 2px solid rgba(21, 48, 124, 0.1);
overflow: hidden;
}
.area-marker {
position: absolute;
width: 12px;
height: 12px;
background: var(--sanitasi-primary);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
border: 3px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
animation: pulse 2s infinite;
}
.area-marker:hover {
transform: scale(1.5);
background: var(--sanitasi-secondary);
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}
.area-marker.alert {
background: var(--sanitasi-danger);
animation: pulseAlert 1.5s infinite;
}
.area-marker.warning {
background: var(--sanitasi-warning);
}
.area-marker.good {
background: var(--sanitasi-secondary);
}
/* Area marker positions for Bontang */
.area-marker.bontang-utara { top: 15%; left: 30%; }
.area-marker.bontang-selatan { top: 45%; left: 25%; }
.area-marker.bontang-barat { top: 30%; left: 15%; }
.area-marker.bontang-timur { top: 35%; left: 45%; }
.area-marker.guntung { top: 60%; left: 35%; }
/* Geographic Map Detailed View */
.geographic-map-container.detailed-view {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
border: 2px solid #475569;
}
.geographic-map-container.detailed-view .bontang-map {
background: radial-gradient(circle at center, #374151 0%, #1f2937 100%);
}
.geographic-map-container.detailed-view .area-marker {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
border: 2px solid rgba(255, 255, 255, 0.2);
}
/* Performance Dashboard */
.performance-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.performance-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.performance-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
}
.performance-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.performance-value {
font-size: 2.2rem;
font-weight: 800;
color: var(--sanitasi-primary);
margin-bottom: 8px;
display: block;
line-height: 1;
}
.performance-label {
font-size: 0.8rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 12px;
}
.performance-trend {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.performance-trend.up {
color: var(--sanitasi-secondary);
}
.performance-trend.down {
color: var(--sanitasi-danger);
}
.performance-trend.stable {
color: #64748b;
}
/* Alert System */
.alert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.alert-card {
background: white;
border-radius: 12px;
padding: 16px;
border-left: 4px solid;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease;
}
.alert-card:hover {
transform: translateX(4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.alert-card.critical {
border-left-color: var(--sanitasi-danger);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, white 100%);
animation: pulseAlert 2s infinite;
}
.alert-card.warning {
border-left-color: var(--sanitasi-warning);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.02) 0%, white 100%);
}
.alert-card.info {
border-left-color: var(--sanitasi-accent);
background: linear-gradient(135deg, rgba(6, 182, 212, 0.02) 0%, white 100%);
}
.alert-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.alert-title {
font-weight: 600;
color: #1f2937;
font-size: 0.9rem;
}
.alert-time {
font-size: 0.7rem;
color: #9ca3af;
}
.alert-message {
color: #4b5563;
font-size: 0.85rem;
line-height: 1.4;
}
/* Quick Actions */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.quick-action-btn {
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 16px 12px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: #374151;
}
.quick-action-btn:hover {
border-color: var(--sanitasi-primary);
color: var(--sanitasi-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(21, 48, 124, 0.15);
text-decoration: none;
}
.quick-action-btn i {
font-size: 1.5rem;
margin-bottom: 8px;
display: block;
}
.quick-action-btn span {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Chart Container */
.chart-container {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
margin-bottom: 24px;
position: relative;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e5e7eb;
}
.chart-title {
font-size: 1.1rem;
font-weight: 700;
color: #047857;
margin: 0;
}
.chart-actions {
display: flex;
gap: 8px;
}
.chart-actions .btn {
padding: 6px 12px;
font-size: 0.8rem;
border-radius: 6px;
border: 1px solid #e5e7eb;
background: white;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}
.chart-actions .btn:hover,
.chart-actions .btn.active {
background: var(--sanitasi-primary);
color: white;
border-color: var(--sanitasi-primary);
}
.chart-canvas {
height: 300px;
position: relative;
}
/* Dashboard Notification System */
.dashboard-notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
gap: 12px;
min-width: 320px;
max-width: 420px;
z-index: 10000;
animation: notificationSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-left: 4px solid var(--sanitasi-primary);
backdrop-filter: blur(10px);
}
.notification-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
flex-shrink: 0;
}
.notification-content {
flex: 1;
}
.notification-title {
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
font-size: 0.95rem;
}
.notification-message {
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
}
.notification-close {
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 8px;
margin-left: auto;
border-radius: 6px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.notification-close:hover {
background: #f3f4f6;
color: #374151;
}
/* Area Detail Modal */
.area-detail-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.modal-content {
background: white;
border-radius: 16px;
padding: 0;
max-width: 450px;
width: 100%;
position: relative;
animation: modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.modal-header h4 {
margin: 0;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
font-size: 1.1rem;
}
.modal-header h4 i {
color: var(--sanitasi-primary);
}
.modal-header button {
background: none;
border: none;
font-size: 1.2rem;
color: #6b7280;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.2s ease;
}
.modal-header button:hover {
background: rgba(0, 0, 0, 0.05);
color: #374151;
}
.modal-body {
padding: 24px;
}
.area-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.stat-item {
text-align: center;
padding: 20px 16px;
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
border-radius: 12px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}
.stat-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.stat-value {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--sanitasi-primary);
margin-bottom: 4px;
}
.stat-label {
font-size: 0.75rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.area-actions {
display: flex;
gap: 12px;
}
.area-actions .btn {
flex: 1;
padding: 12px 16px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.area-actions .btn-primary {
background: var(--sanitasi-primary);
border-color: var(--sanitasi-primary);
}
.area-actions .btn-outline-primary {
color: var(--sanitasi-primary);
border-color: var(--sanitasi-primary);
background: transparent;
}
.area-actions .btn-outline-primary:hover {
background: var(--sanitasi-primary);
color: white;
}
/*--------------------------------------------------------------
# Enhanced Sanitasi-Specific Animations
--------------------------------------------------------------*/
@keyframes formShake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes slideInDown {
0% {
transform: translateY(-30px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes loadingSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes formFadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes notificationSlideIn {
from {
transform: translateX(100%) scale(0.8);
opacity: 0;
}
to {
transform: translateX(0) scale(1);
opacity: 1;
}
}
@keyframes modalSlideIn {
from {
transform: translateY(-30px) scale(0.9);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes pulseAlert {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatPattern {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-30px) rotate(180deg);
opacity: 0.6;
}
}
@keyframes logoGlow {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/*--------------------------------------------------------------
# Modern Hero Section
--------------------------------------------------------------*/
.modern-hero {
min-height: 90vh;
background: linear-gradient(135deg,
rgba(21,48,124,0.08) 0%,
rgba(16,185,129,0.05) 30%,
rgba(6,182,212,0.08) 70%,
rgba(21,48,124,0.06) 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 5rem 0 3rem 0;
}
.modern-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 10;
width: 100%;
text-align: center;
padding: 2rem 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(21, 48, 124, 0.2);
color: var(--sanitasi-primary);
padding: var(--space-2) var(--space-6);
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.875rem;
margin-bottom: var(--space-8);
box-shadow: var(--shadow-sm);
animation: float 3s ease-in-out infinite;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 6vw, 1.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
color: var(--sanitasi-primary);
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Enhanced gradient text for modern browsers */
@supports (background-clip: text) or (-webkit-background-clip: text) {
.hero-title {
background: linear-gradient(135deg,
var(--sanitasi-primary) 0%,
var(--sanitasi-secondary) 50%,
var(--sanitasi-accent) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
/* Title highlight fallback and enhanced styling */
.title-highlight {
color: var(--sanitasi-secondary);
font-weight: 600;
}
/* Enhanced title highlight for modern browsers */
@supports (background-clip: text) or (-webkit-background-clip: text) {
.title-highlight {
background: linear-gradient(135deg,
var(--sanitasi-secondary) 0%,
var(--sanitasi-accent) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
/* Fix for text rendering issues */
.hero-title,
.hero-subtitle,
.text-shimmer,
.text-glow,
.title-highlight {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Ensure proper visibility on all browsers */
.hero-title strong {
color: inherit;
font-weight: inherit;
background: transparent;
}
.hero-title span {
color: inherit;
background: transparent;
}
/* Fix for any white box issues */
.hero-content * {
background-color: transparent !important;
}
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .text-shimmer,
.hero-content .title-highlight {
background-color: transparent !important;
box-shadow: none;
}
/* Ensure text is visible */
.hero-title, .hero-subtitle {
background-color: transparent !important;
}
.hero-subtitle {
font-size: clamp(1rem, 3vw, 1.25rem);
color: var(--sanitasi-text-secondary);
margin-bottom: 2rem;
max-width: 700px;
line-height: 1.6;
margin-left: auto;
margin-right: auto;
font-weight: 400;
}
.hero-cta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 3rem;
justify-content: center;
align-items: center;
}
.btn-modern {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
position: relative;
overflow: hidden;
min-width: 200px;
justify-content: center;
}
.btn-modern::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;
}
.btn-modern:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--sanitasi-primary) 0%, var(--sanitasi-secondary) 100%);
color: white;
box-shadow: 0 4px 15px rgba(21, 48, 124, 0.3);
border: 1px solid transparent;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(21, 48, 124, 0.4);
color: white;
}
.btn-secondary {
background: rgba(255,255,255,0.95);
color: var(--sanitasi-primary);
border: 2px solid var(--sanitasi-primary);
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: var(--sanitasi-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(21, 48, 124, 0.3);
}
/*--------------------------------------------------------------
# Modern Stats Section
--------------------------------------------------------------*/
.stats-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-6);
margin-top: var(--space-16);
}
/* Enhanced Hero Stats Section */
.hero-stats-section {
margin-top: 3rem;
margin-bottom: 2rem;
padding: 2rem 0;
}
/* Hero Badge Styling */
.hero-badge-section {
margin-bottom: 2rem;
}
.hero-badge.innovation-badge {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(21, 48, 124, 0.15);
color: var(--sanitasi-primary);
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.875rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Hero Main Content */
.hero-main-content {
margin-bottom: 3rem;
}
.hero-title-section {
margin-bottom: 2rem;
}
.hero-subtitle-section {
margin-bottom: 2.5rem;
}
/* Hero Features Section */
.hero-features-section {
margin-top: 2rem;
padding: 2rem 0;
}
/* Hero Responsive Design */
@media (max-width: 992px) {
.modern-hero {
min-height: 80vh;
padding: 4rem 0 2rem 0;
}
.hero-content {
padding: 1.5rem 0;
}
.hero-title {
font-size: clamp(1.75rem, 5vw, 2.5rem);
margin-bottom: 1.25rem;
}
.hero-subtitle {
font-size: clamp(0.95rem, 2.5vw, 1.1rem);
margin-bottom: 1.75rem;
max-width: 90%;
}
.hero-cta {
gap: 1rem;
margin-bottom: 2.5rem;
}
.hero-stats-section {
margin-top: 2.5rem;
padding: 1.5rem 0;
}
}
@media (max-width: 768px) {
.modern-hero {
min-height: 75vh;
padding: 3rem 0 1.5rem 0;
}
.hero-content {
padding: 1rem 0;
}
.hero-title {
font-size: clamp(1.5rem, 4vw, 2rem);
margin-bottom: 1rem;
line-height: 1.3;
}
.hero-subtitle {
font-size: clamp(0.875rem, 2vw, 1rem);
margin-bottom: 1.5rem;
max-width: 95%;
}
.hero-cta {
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.hero-badge.innovation-badge {
font-size: 0.8rem;
padding: 0.6rem 1.25rem;
}
.hero-stats-section {
margin-top: 2rem;
padding: 1rem 0;
}
.hero-features-section {
margin-top: 1.5rem;
padding: 1.5rem 0;
}
}
@media (max-width: 576px) {
.modern-hero {
min-height: 70vh;
padding: 2rem 0 1rem 0;
}
.hero-title {
font-size: clamp(1.25rem, 3.5vw, 1.75rem);
margin-bottom: 0.875rem;
}
.hero-subtitle {
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
margin-bottom: 1.25rem;
}
.hero-cta {
margin-bottom: 1.75rem;
}
.hero-badge.innovation-badge {
font-size: 0.75rem;
padding: 0.5rem 1rem;
}
}
.sanitasi-stats {
max-width: 1400px;
margin: 0 auto;
padding: 0;
}
.hero-stat-item {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem;
margin-bottom: 0;
}
/* Enhanced Stats Item Modern - For detailed stats section */
.stats-item-modern {
padding: 2rem 1.5rem;
margin-bottom: 0;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.sanitasi-stat-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 20px;
overflow: hidden;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.sanitasi-stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.stat-card {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-xl);
padding: var(--space-8);
text-align: center;
position: relative;
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
/* Enhanced Stats Content Layout */
.stats-header {
margin-bottom: 1.5rem;
padding: 0.5rem 0;
}
.stats-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem 0;
}
.stats-number-wrapper {
margin-bottom: 1rem;
}
.stats-number {
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}
.stats-unit {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.25rem;
}
.stats-label {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 0.5rem;
}
.stats-description {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
}
.stats-progress {
margin: 1rem 0;
height: 4px;
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
overflow: hidden;
}
.stats-footer {
margin-top: auto;
padding-top: 1rem;
}
.stats-meta {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.meta-item {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.hero-stats-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 0 1rem;
max-width: 1400px;
margin: 0 auto;
}
.sanitasi-stats {
max-width: 1400px;
margin: 0 auto;
padding: 0;
}
/* Responsive Stats Layout */
@media (max-width: 1400px) {
.hero-stats-wrapper {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
padding: 0 0.5rem;
}
}
@media (max-width: 1200px) {
.hero-stats-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 0 0.5rem;
}
.stats-item-modern {
min-height: 260px;
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.hero-stats-wrapper {
grid-template-columns: 1fr;
gap: 1rem;
padding: 0 0.5rem;
}
.hero-stat-item,
.stats-item-modern {
min-height: 200px;
padding: 1.25rem 1rem;
margin-bottom: 0;
}
.stats-number {
font-size: 2rem;
}
.stats-label {
font-size: 0.9rem;
}
.stats-description {
font-size: 0.75rem;
}
}
@media (max-width: 992px) and (min-width: 769px) {
.hero-stats-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding: 0 0.5rem;
}
.stats-item-modern {
min-height: 240px;
padding: 1.5rem;
}
}@media (max-width: 480px) {
.hero-stats-wrapper {
grid-template-columns: 1fr;
gap: 1rem;
}
.hero-stat-item,
.stats-item-modern {
min-height: 200px;
padding: 1rem;
}
.stats-number {
font-size: 1.8rem;
}
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
font-size: 1.5rem;
color: white;
}
.stat-number {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--sanitasi-primary);
display: block;
margin-bottom: var(--space-2);
}
.stat-label {
color: #6b7280;
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/*--------------------------------------------------------------
# Modern Dashboard Cards
--------------------------------------------------------------*/
.dashboard-section {
padding: var(--space-16) 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.section-header {
text-align: center;
margin-bottom: var(--space-16);
}
.section-title {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: #95ee06e3;
margin-bottom: var(--space-4);
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--gradient-primary);
border-radius: var(--radius-full);
}
.section-subtitle {
color: #6b7280;
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
}
.card-modern {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-primary);
}
.card-modern:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-6);
}
.card-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.card-icon {
width: 40px;
height: 40px;
background: var(--gradient-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.125rem;
}
/*--------------------------------------------------------------
# Chart Containers
--------------------------------------------------------------*/
.chart-container {
position: relative;
height: 400px;
margin: var(--space-6) 0;
}
.chart-container canvas {
border-radius: var(--radius-md);
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
margin-top: var(--space-6);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
color: #6b7280;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
/*--------------------------------------------------------------
# Form Styling
--------------------------------------------------------------*/
.form-modern {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-xl);
padding: var(--space-16);
box-shadow: var(--shadow-md);
}
.form-label {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: var(--space-2);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
/*--------------------------------------------------------------
# Floating Elements & Animations
--------------------------------------------------------------*/
.floating-element {
position: absolute;
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(2) {
animation-delay: -2s;
}
.floating-element:nth-child(3) {
animation-delay: -4s;
}
/*--------------------------------------------------------------
# Ultra Modern Footer Design System
--------------------------------------------------------------*/
.modern-footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e293b 75%, #0f172a 100%);
position: relative;
margin-top: 4rem;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--gradient-primary);
z-index: 10;
}
/* Animated Background Patterns */
.footer-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.pattern-element {
position: absolute;
border-radius: 50%;
background: rgba(21, 48, 124, 0.1);
animation: floatPattern 15s infinite ease-in-out;
}
.pattern-1 {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.pattern-2 {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: -5s;
}
.pattern-3 {
width: 80px;
height: 80px;
bottom: 20%;
left: 60%;
animation-delay: -10s;
}
.pattern-4 {
width: 120px;
height: 120px;
top: 30%;
right: 40%;
animation-delay: -7s;
}
/* Footer Content */
.footer-content {
position: relative;
z-index: 5;
padding: 4rem 0 2rem;
}
/* Glass Card Effect */
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.8s;
}
.glass-card:hover::before {
left: 100%;
}
.glass-card:hover {
transform: translateY(-5px);
border-color: rgba(21, 48, 124, 0.4);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
/* Brand Section */
.footer-brand {
text-align: center;
}
.brand-container {
margin-bottom: var(--space-6);
}
.brand-link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
text-decoration: none;
color: white;
}
.logo-wrapper {
position: relative;
display: inline-block;
}
.brand-logo {
width: 80px;
height: 80px;
object-fit: contain;
filter: brightness(1.2) drop-shadow(0 0 20px rgba(21, 48, 124, 0.5));
transition: var(--transition);
}
.logo-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(21, 48, 124, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: logoGlow 3s ease-in-out infinite;
}
.brand-text {
text-align: center;
}
.brand-name {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: var(--space-2);
background: var(--gradient-primary);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-tagline {
color: #94a3b8;
font-size: 0.9rem;
margin: 0;
font-style: italic;
}
.footer-description {
color: #cbd5e1;
line-height: 1.7;
margin-bottom: var(--space-8);
text-align: center;
}
/* Modern Contact Info */
.contact-modern {
margin-bottom: var(--space-8);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
padding: var(--space-4);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
transition: var(--transition);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.contact-icon {
width: 45px;
height: 45px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(21, 48, 124, 0.3);
}
.contact-text {
flex: 1;
}
.contact-label {
display: block;
font-size: 0.8rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-1);
font-weight: 600;
}
.contact-text p {
color: #e2e8f0;
margin: 0;
font-size: 0.95rem;
}
.contact-link {
color: #e2e8f0;
text-decoration: none;
transition: var(--transition);
}
.contact-link:hover {
color: var(--sanitasi-primary);
}
/* Enhanced Social Links */
.social-modern {
text-align: center;
}
.social-title {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.social-grid {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
.social-btn {
position: relative;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
text-decoration: none;
color: white;
font-size: 1.2rem;
transition: var(--transition);
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
}
.social-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.social-btn.facebook::before { background: #1877f2; }
.social-btn.instagram::before { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn.twitter::before { background: #1da1f2; }
.social-btn.youtube::before { background: #ff0000; }
.social-btn.linkedin::before { background: #0077b5; }
.social-btn:hover {
transform: translateY(-3px) scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
}
.social-btn:hover::before {
opacity: 1;
}
.social-ripple {
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: all 0.5s ease;
}
.social-btn:active .social-ripple {
width: 60px;
height: 60px;
}
/* Footer Menu */
.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu li {
margin-bottom: var(--space-2);
}
.menu-link {
display: flex;
align-items: center;
gap: var(--space-2);
color: #cbd5e1;
text-decoration: none;
font-size: 0.9rem;
padding: var(--space-2) 0;
transition: var(--transition);
position: relative;
}
.menu-link::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
width: 0;
height: 2px;
background: var(--sanitasi-primary);
transform: translateY(-50%);
transition: var(--transition);
}
.menu-link:hover {
color: var(--sanitasi-primary);
padding-left: var(--space-4);
}
.menu-link:hover::before {
width: 20px;
}
.menu-link i {
font-size: 0.8rem;
width: 16px;
color: var(--sanitasi-secondary);
}
/* Newsletter Section */
.newsletter-text {
color: #cbd5e1;
font-size: 0.9rem;
margin-bottom: var(--space-6);
text-align: center;
}
.newsletter-form {
margin-bottom: var(--space-8);
}
.input-group-modern {
display: flex;
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.input-group-modern:focus-within {
border-color: var(--sanitasi-primary);
box-shadow: 0 0 0 3px rgba(21, 48, 124, 0.2);
}
.form-input {
flex: 1;
background: transparent;
border: none;
padding: var(--space-4);
color: white;
font-size: 0.9rem;
outline: none;
}
.form-input::placeholder {
color: #94a3b8;
}
.btn-subscribe {
background: var(--gradient-primary);
border: none;
padding: var(--space-4) var(--space-6);
color: white;
cursor: pointer;
transition: var(--transition);
}
.btn-subscribe:hover {
background: var(--sanitasi-primary);
transform: scale(1.05);
}
/* Quick Stats */
.quick-stats {
display: flex;
gap: var(--space-4);
justify-content: center;
}
.stat-mini {
display: flex;
align-items: center;
gap: var(--space-2);
background: rgba(255, 255, 255, 0.05);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
transition: var(--transition);
}
.stat-mini:hover {
background: rgba(255, 255, 255, 0.1);
}
.stat-mini .stat-icon {
width: 35px;
height: 35px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: white;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-number {
font-size: 1.1rem;
font-weight: 700;
color: var(--sanitasi-primary);
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Footer Bottom */
.footer-bottom {
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-8) 0;
position: relative;
z-index: 5;
}
.bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-6);
}
.copyright-modern {
text-align: center;
flex: 1;
}
.copyright-modern p {
color: #94a3b8;
margin-bottom: var(--space-2);
font-size: 0.9rem;
}
.brand-highlight {
color: var(--sanitasi-primary);
font-weight: 600;
}
.sub-copyright {
color: #64748b;
font-size: 0.8rem;
margin: 0;
}
.footer-extras {
display: flex;
align-items: center;
gap: var(--space-6);
}
.footer-badges {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.badge-item {
display: flex;
align-items: center;
gap: var(--space-1);
background: rgba(255, 255, 255, 0.1);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
color: #cbd5e1;
font-size: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.badge-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--sanitasi-primary);
}
.badge-item i {
color: var(--sanitasi-primary);
}
/*--------------------------------------------------------------
# Enhanced Floating Elements
--------------------------------------------------------------*/
/* Modern Back to Top Button */
.back-to-top-modern {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: 1.2rem;
opacity: 0;
visibility: hidden;
transform: translateY(100px) scale(0.5);
transition: var(--transition);
z-index: 1000;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.back-to-top-modern.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.back-to-top-modern:hover {
background: var(--gradient-primary);
border-color: var(--sanitasi-primary);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 40px rgba(21, 48, 124, 0.4);
}
.btn-content {
position: relative;
z-index: 2;
transition: var(--transition);
}
.back-to-top-modern:hover .btn-content {
transform: translateY(-2px);
}
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.progress-circle {
stroke: var(--sanitasi-primary);
stroke-dasharray: 163;
stroke-dashoffset: 163;
transition: stroke-dashoffset 0.3s ease;
}
/* Enhanced Floating Action Buttons */
.floating-actions-modern {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 999;
}
.fab-menu {
position: relative;
}
.fab-main {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border: none;
border-radius: 50%;
color: white;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 10px 30px rgba(21, 48, 124, 0.4);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.fab-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
}
.fab-main:hover::before {
transform: translateX(100%);
}
.fab-main i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--transition);
}
.fab-main .fa-times {
opacity: 0;
transform: translate(-50%, -50%) rotate(180deg);
}
.fab-main.active .fa-plus {
opacity: 0;
transform: translate(-50%, -50%) rotate(180deg);
}
.fab-main.active .fa-times {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
.fab-main:hover {
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(21, 48, 124, 0.6);
}
.fab-options {
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: var(--space-4);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-menu.active .fab-options {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-10px);
}
.fab-option {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: 1.1rem;
position: relative;
transition: var(--transition);
transform: scale(0);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.fab-menu.active .fab-option {
transform: scale(1);
}
.fab-menu.active .fab-option:nth-child(1) { transition-delay: 0.1s; }
.fab-menu.active .fab-option:nth-child(2) { transition-delay: 0.15s; }
.fab-menu.active .fab-option:nth-child(3) { transition-delay: 0.2s; }
.fab-menu.active .fab-option:nth-child(4) { transition-delay: 0.25s; }
.fab-option.whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
}
.fab-option.phone {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.fab-option.email {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.fab-option.help {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.fab-option:hover {
transform: scale(1.2) translateX(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}
/* Tooltip for FAB */
.fab-option::before {
content: attr(data-tooltip);
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 10;
}
.fab-option::after {
content: '';
position: absolute;
right: 52px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.fab-option:hover::before,
.fab-option:hover::after {
opacity: 1;
visibility: visible;
}
/*--------------------------------------------------------------
# Ultra Modern Footer Design System
--------------------------------------------------------------*/
.modern-footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #1e293b 75%, #0f172a 100%);
position: relative;
margin-top: 4rem;
overflow: hidden;
}
.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--gradient-primary);
z-index: 10;
}
/* Animated Background Patterns */
.footer-bg-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.pattern-element {
position: absolute;
border-radius: 50%;
background: rgba(5, 150, 105, 0.1);
animation: floatPattern 15s infinite ease-in-out;
}
.pattern-1 {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.pattern-2 {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: -5s;
}
.pattern-3 {
width: 80px;
height: 80px;
bottom: 20%;
left: 60%;
animation-delay: -10s;
}
.pattern-4 {
width: 120px;
height: 120px;
top: 30%;
right: 40%;
animation-delay: -7s;
}
@keyframes floatPattern {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-30px) rotate(180deg);
opacity: 0.6;
}
}
/* Footer Content */
.footer-content {
position: relative;
z-index: 5;
padding: 4rem 0 2rem;
}
/* Glass Card Effect */
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.8s;
}
.glass-card:hover::before {
left: 100%;
}
.glass-card:hover {
transform: translateY(-5px);
border-color: rgba(5, 150, 105, 0.4);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
/* Brand Section */
.footer-brand {
text-align: center;
}
.brand-container {
margin-bottom: var(--space-lg);
}
.brand-link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
text-decoration: none;
color: white;
}
.logo-wrapper {
position: relative;
display: inline-block;
}
.brand-logo {
width: 80px;
height: 80px;
object-fit: contain;
filter: brightness(1.2) drop-shadow(0 0 20px rgba(5, 150, 105, 0.5));
transition: var(--transition);
}
.logo-glow {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(5, 150, 105, 0.3) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0.8;
}
}
.brand-text {
text-align: center;
}
.brand-name {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: var(--space-sm);
background: var(--gradient-primary);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-tagline {
color: #94a3b8;
font-size: 0.9rem;
margin: 0;
font-style: italic;
}
.footer-description {
color: #cbd5e1;
line-height: 1.7;
margin-bottom: var(--space-xl);
text-align: center;
}
/* Modern Contact Info */
.contact-modern {
margin-bottom: var(--space-xl);
}
.contact-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding: var(--space-md);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
transition: var(--transition);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.contact-icon {
width: 45px;
height: 45px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}
.contact-text {
flex: 1;
}
.contact-label {
display: block;
font-size: 0.8rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-xs);
font-weight: 600;
}
.contact-text p {
color: #e2e8f0;
margin: 0;
font-size: 0.95rem;
}
.contact-link {
color: #e2e8f0;
text-decoration: none;
transition: var(--transition);
}
.contact-link:hover {
color: var(--sanitasi-primary);
}
/* Enhanced Social Links */
.social-modern {
text-align: center;
}
.social-title {
color: white;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
}
.social-grid {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.social-btn {
position: relative;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
text-decoration: none;
color: white;
font-size: 1.2rem;
transition: var(--transition);
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border: 2px solid transparent;
}
.social-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
opacity: 0;
transition: var(--transition);
z-index: -1;
}
.social-btn.facebook::before { background: #1877f2; }
.social-btn.instagram::before { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn.twitter::before { background: #1da1f2; }
.social-btn.youtube::before { background: #ff0000; }
.social-btn.linkedin::before { background: #0077b5; }
.social-btn:hover {
transform: translateY(-3px) scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
}
.social-btn:hover::before {
opacity: 1;
}
.social-ripple {
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: all 0.5s ease;
}
.social-btn:active .social-ripple {
width: 60px;
height: 60px;
}
/* Section Titles */
.section-title {
color: white;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: var(--space-lg);
display: flex;
align-items: center;
gap: var(--space-sm);
position: relative;
padding-bottom: var(--space-sm);
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--gradient-primary);
border-radius: 2px;
}
/* Footer Menu */
.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu li {
margin-bottom: var(--space-sm);
}
.menu-link {
display: flex;
align-items: center;
gap: var(--space-sm);
color: #cbd5e1;
text-decoration: none;
font-size: 0.9rem;
padding: var(--space-sm) 0;
transition: var(--transition);
position: relative;
}
.menu-link::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
width: 0;
height: 2px;
background: var(--sanitasi-primary);
transform: translateY(-50%);
transition: var(--transition);
}
.menu-link:hover {
color: var(--sanitasi-primary);
padding-left: var(--space-md);
}
.menu-link:hover::before {
width: 20px;
}
.menu-link i {
font-size: 0.8rem;
width: 16px;
color: var(--sanitasi-secondary);
}
/* Newsletter Section */
.newsletter-text {
color: #cbd5e1;
font-size: 0.9rem;
margin-bottom: var(--space-lg);
text-align: center;
}
.newsletter-form {
margin-bottom: var(--space-xl);
}
.input-group-modern {
display: flex;
border-radius: var(--radius-lg);
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.input-group-modern:focus-within {
border-color: var(--sanitasi-primary);
box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
}
.form-input {
flex: 1;
background: transparent;
border: none;
padding: var(--space-md);
color: white;
font-size: 0.9rem;
outline: none;
}
.form-input::placeholder {
color: #94a3b8;
}
.btn-subscribe {
background: var(--gradient-primary);
border: none;
padding: var(--space-md) var(--space-lg);
color: white;
cursor: pointer;
transition: var(--transition);
}
.btn-subscribe:hover {
background: var(--sanitasi-primary);
transform: scale(1.05);
}
/* Quick Stats */
.quick-stats {
display: flex;
gap: var(--space-md);
justify-content: center;
}
.stat-mini {
display: flex;
align-items: center;
gap: var(--space-sm);
background: rgba(255, 255, 255, 0.05);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
transition: var(--transition);
}
.stat-mini:hover {
background: rgba(255, 255, 255, 0.1);
}
.stat-mini .stat-icon {
width: 35px;
height: 35px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: white;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-number {
font-size: 1.1rem;
font-weight: 700;
color: var(--sanitasi-primary);
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Footer Bottom */
.footer-bottom {
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-xl) 0;
position: relative;
z-index: 5;
}
.bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-lg);
}
.copyright-modern {
text-align: center;
flex: 1;
}
.copyright-modern p {
color: #94a3b8;
margin-bottom: var(--space-sm);
font-size: 0.9rem;
}
.brand-highlight {
color: var(--sanitasi-primary);
font-weight: 600;
}
.sub-copyright {
color: #64748b;
font-size: 0.8rem;
margin: 0;
}
.footer-extras {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.footer-badges {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.badge-item {
display: flex;
align-items: center;
gap: var(--space-xs);
background: rgba(255, 255, 255, 0.1);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
color: #cbd5e1;
font-size: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.badge-item:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--sanitasi-primary);
}
.badge-item i {
color: var(--sanitasi-primary);
}
/* Responsive Design */
@media (max-width: 992px) {
.footer-content {
padding: 3rem 0 1.5rem;
}
.glass-card {
padding: var(--space-lg);
}
.bottom-content {
flex-direction: column;
text-align: center;
}
.footer-badges {
justify-content: center;
}
}
@media (max-width: 768px) {
.quick-stats {
flex-direction: column;
gap: var(--space-sm);
}
.social-grid {
gap: var(--space-sm);
}
.social-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.brand-name {
font-size: 1.5rem;
}
.pattern-element {
display: none;
}
}
@media (max-width: 576px) {
.footer-content {
padding: 2rem 0 1rem;
}
.glass-card {
padding: var(--space-md);
}
.input-group-modern {
flex-direction: column;
}
.form-input,
.btn-subscribe {
border-radius: var(--radius-md);
}
.contact-item {
padding: var(--space-sm);
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/*--------------------------------------------------------------
# Enhanced Floating Elements
--------------------------------------------------------------*/
/* Modern Back to Top Button */
.back-to-top-modern {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: 1.2rem;
opacity: 0;
visibility: hidden;
transform: translateY(100px) scale(0.5);
transition: var(--transition);
z-index: 1000;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.back-to-top-modern.show {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.back-to-top-modern:hover {
background: var(--gradient-primary);
border-color: var(--sanitasi-primary);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 40px rgba(5, 150, 105, 0.4);
}
.btn-content {
position: relative;
z-index: 2;
transition: var(--transition);
}
.back-to-top-modern:hover .btn-content {
transform: translateY(-2px);
}
.progress-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.progress-circle {
stroke: var(--sanitasi-primary);
stroke-dasharray: 163;
stroke-dashoffset: 163;
transition: stroke-dashoffset 0.3s ease;
}
/* Enhanced Floating Action Buttons */
.floating-actions-modern {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 999;
}
.fab-menu {
position: relative;
}
.fab-main {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border: none;
border-radius: 50%;
color: white;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 10px 30px rgba(5, 150, 105, 0.4);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.fab-main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
}
.fab-main:hover::before {
transform: translateX(100%);
}
.fab-main i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--transition);
}
.fab-main .fa-times {
opacity: 0;
transform: translate(-50%, -50%) rotate(180deg);
}
.fab-main.active .fa-plus {
opacity: 0;
transform: translate(-50%, -50%) rotate(180deg);
}
.fab-main.active .fa-times {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
.fab-main:hover {
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(5, 150, 105, 0.6);
}
.fab-options {
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: var(--space-md);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-menu.active .fab-options {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-10px);
}
.fab-option {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: 1.1rem;
position: relative;
transition: var(--transition);
transform: scale(0);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.fab-menu.active .fab-option {
transform: scale(1);
}
.fab-menu.active .fab-option:nth-child(1) { transition-delay: 0.1s; }
.fab-menu.active .fab-option:nth-child(2) { transition-delay: 0.15s; }
.fab-menu.active .fab-option:nth-child(3) { transition-delay: 0.2s; }
.fab-menu.active .fab-option:nth-child(4) { transition-delay: 0.25s; }
.fab-option.whatsapp {
background: linear-gradient(135deg, #25D366, #128C7E);
}
.fab-option.phone {
background: linear-gradient(135deg, #3b82f6, #1e40af);
}
.fab-option.email {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.fab-option.help {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.fab-option:hover {
transform: scale(1.2) translateX(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,0.4);
}
/* Tooltip for FAB */
.fab-option::before {
content: attr(data-tooltip);
position: absolute;
right: 60px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 10;
}
.fab-option::after {
content: '';
position: absolute;
right: 52px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.fab-option:hover::before,
.fab-option:hover::after {
opacity: 1;
visibility: visible;
}
/* Responsive Design for Floating Elements */
@media (max-width: 768px) {
.back-to-top-modern,
.floating-actions-modern {
bottom: 1rem;
}
.back-to-top-modern {
right: 1rem;
width: 50px;
height: 50px;
}
.floating-actions-modern {
left: 1rem;
}
.fab-main {
width: 50px;
height: 50px;
font-size: 1.1rem;
}
.fab-option {
width: 45px;
height: 45px;
font-size: 1rem;
}
.fab-option::before {
right: 50px;
font-size: 0.75rem;
}
.fab-option::after {
right: 42px;
}
}
/*--------------------------------------------------------------
# Enhanced Stats Section Background System
--------------------------------------------------------------*/
/* Stats Background Container */
.stats-background-system {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.bg-gradient-sanitasi {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.95) 0%,
rgba(21, 48, 124, 0.85) 25%,
rgba(16, 185, 129, 0.8) 75%,
rgba(16, 185, 129, 0.9) 100%);
}
.stats-pattern-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
}
.stats-pattern-overlay .pattern-dots.pattern-1 {
position: absolute;
top: 15%;
left: 8%;
width: 150px;
height: 150px;
background: url('data:image/svg+xml,') repeat;
background-size: 20px 20px;
animation: float 8s ease-in-out infinite;
}
.stats-pattern-overlay .pattern-dots.pattern-2 {
position: absolute;
bottom: 15%;
right: 10%;
width: 120px;
height: 120px;
background: url('data:image/svg+xml,') repeat;
background-size: 15px 15px;
animation: float 10s ease-in-out infinite reverse;
}
.stats-pattern-overlay .pattern-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 40px 40px;
opacity: 0.6;
}
/* Floating Stats Particles */
.floating-stats-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.stats-particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: floatParticles 15s linear infinite;
}
.stats-particle.particle-1 {
width: 6px;
height: 6px;
top: 25%;
left: 25%;
animation-delay: 0s;
animation-duration: 12s;
}
.stats-particle.particle-2 {
width: 4px;
height: 4px;
top: 70%;
left: 75%;
animation-delay: 4s;
animation-duration: 16s;
}
.stats-particle.particle-3 {
width: 8px;
height: 8px;
top: 50%;
left: 15%;
animation-delay: 8s;
animation-duration: 14s;
}
/* Enhanced Stats Section Container */
.stats-modern.enhanced-stats-sanitasi {
padding: var(--space-20) 0 var(--space-16);
position: relative;
overflow: hidden;
min-height: 600px;
display: flex;
align-items: center;
}
/* Ring Content for Progress Ring */
.ring-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Enhanced Gradient Variables */
:root {
--gradient-info: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
--gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
--gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
--gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
--gradient-primary: linear-gradient(135deg, #15307c 0%, #55b8ff 100%);
}
.text-gradient {
background: var(--gradient-primary);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-effect {
background: rgba(255,255,255,0.25);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
}
.shadow-soft {
box-shadow: var(--shadow-md);
}
.rounded-modern {
border-radius: var(--radius-xl);
}
.transition-smooth {
transition: var(--transition);
}
/*--------------------------------------------------------------
# Loading States
--------------------------------------------------------------*/
.loading-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--sanitasi-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*--------------------------------------------------------------
# Responsive Breakpoints
--------------------------------------------------------------*/
/* Extra Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
.container-xl {
max-width: 1320px;
}
.display-xl {
font-size: 5rem;
}
.hero-content h1 {
font-size: 4rem;
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
.service-grid {
grid-template-columns: repeat(3, 1fr);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1.1rem;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
.stats-grid,
.service-grid,
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-content h1 {
font-size: 2rem;
}
.section-title {
font-size: 2rem;
}
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
.stats-grid,
.service-grid,
.team-grid {
grid-template-columns: 1fr;
}
.hero-content h1 {
font-size: 1.75rem;
}
.hero-content p {
font-size: 1rem;
}
.section-title {
font-size: 1.75rem;
}
.btn-lg {
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
}
.card {
margin-bottom: var(--space-lg);
}
.navbar-brand {
font-size: 1.5rem;
}
.nav-link {
padding: var(--space-sm) 0;
}
}
/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/
@media print {
.navbar,
.footer,
.back-to-top-modern,
.floating-actions-modern {
display: none !important;
}
.container {
max-width: 100% !important;
padding: 0 !important;
}
.card {
break-inside: avoid;
border: 1px solid #ddd !important;
box-shadow: none !important;
}
.text-gradient {
color: var(--sanitasi-primary) !important;
-webkit-text-fill-color: unset !important;
}
body {
font-size: 12pt;
line-height: 1.5;
color: #000 !important;
background: white !important;
}
}
/*--------------------------------------------------------------
# Accessibility Enhancements
--------------------------------------------------------------*/
/* Focus indicators */
.btn:focus,
.form-control:focus,
.form-select:focus,
.nav-link:focus {
outline: 2px solid var(--sanitasi-primary);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.card {
border: 2px solid var(--sanitasi-dark);
}
.btn-primary {
border: 2px solid var(--sanitasi-primary);
}
.text-muted {
color: #666 !important;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.parallax-bg {
transform: none !important;
}
}
/*--------------------------------------------------------------
# Performance Optimizations
--------------------------------------------------------------*/
/* GPU acceleration for transforms */
.card-hover,
.btn,
.social-btn,
.fab-option {
will-change: transform;
}
/* Optimize background images */
.hero-bg,
.section-bg {
background-attachment: scroll;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Lazy loading support */
.lazy-load {
opacity: 0;
transition: opacity 0.3s;
}
.lazy-load.loaded {
opacity: 1;
}
/*--------------------------------------------------------------
# Dark Mode Support
--------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
:root {
--bs-body-bg: #1a1a1a;
--bs-body-color: #e0e0e0;
--bs-border-color: #404040;
}
.card {
background-color: #2a2a2a;
border-color: #404040;
}
.navbar {
background-color: rgba(26, 26, 26, 0.95) !important;
}
.form-control {
background-color: #2a2a2a;
border-color: #404040;
color: #e0e0e0;
}
.form-control::placeholder {
color: #999;
}
}
/* Advanced Glassmorphism Cards */
.glass-card-ultra {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 2rem;
border-radius: var(--radius-2xl);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transition: var(--transition);
contain: layout style paint;
}
.glass-card-ultra::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 100%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.glass-card-ultra:hover::before {
opacity: 1;
}
.glass-card-ultra:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Neumorphism Cards */
.neuro-card {
background: #f0f0f3;
border-radius: var(--radius-2xl);
box-shadow:
20px 20px 60px #d1d1d4,
-20px -20px 60px #ffffff;
border: none;
padding: var(--space-8);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.neuro-card:hover {
box-shadow:
inset 20px 20px 60px #d1d1d4,
inset -20px -20px 60px #ffffff;
transform: scale(0.98);
}
.neuro-card-dark {
background: #2a2a2a;
box-shadow:
20px 20px 60px #1f1f1f,
-20px -20px 60px #353535;
}
.neuro-card-dark:hover {
box-shadow:
inset 20px 20px 60px #1f1f1f,
inset -20px -20px 60px #353535;
}
/* Holographic Cards */
.holo-card {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(20px);
border: 2px solid transparent;
border-radius: var(--radius-2xl);
position: relative;
overflow: hidden;
transition: var(--transition);
}
.holo-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 2px;
background: linear-gradient(135deg,
#667eea 0%,
#764ba2 25%,
#f093fb 50%,
#f5576c 75%,
#4facfe 100%);
border-radius: inherit;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
z-index: -1;
animation: holoRotate 3s linear infinite;
}
.holo-card:hover {
transform: translateY(-5px) rotateX(5deg) rotateY(5deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
@keyframes holoRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Simple Static Elements */
.floating-physics {
position: relative;
animation: none;
}
.floating-physics:nth-child(2n) {
animation: none;
}
.floating-physics:nth-child(3n) {
animation: none;
}
@keyframes floatPhysics {
0%, 100% {
transform: translateY(0px) rotate(0deg);
filter: hue-rotate(0deg);
}
25% {
transform: translateY(-20px) rotate(2deg);
filter: hue-rotate(90deg);
}
50% {
transform: translateY(-10px) rotate(-1deg);
filter: hue-rotate(180deg);
}
75% {
transform: translateY(-15px) rotate(1deg);
filter: hue-rotate(270deg);
}
}
/* Advanced Typography */
.text-shimmer {
color: var(--sanitasi-primary);
}
/* Enhanced shimmer effect for modern browsers */
@supports (background-clip: text) or (-webkit-background-clip: text) {
.text-shimmer {
background: linear-gradient(
120deg,
var(--sanitasi-primary) 0%,
var(--sanitasi-secondary) 50%,
var(--sanitasi-accent) 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s ease-in-out infinite;
}
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.text-glow {
color: var(--sanitasi-primary);
text-shadow: 0 2px 4px rgba(21, 48, 124, 0.2);
font-weight: 600;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Simple Hover Cards */
.card-interactive {
position: relative;
transition: transform 0.3s ease;
cursor: pointer;
}
.card-interactive:hover {
transform: translateY(-2px);
}
.card-interactive::before {
display: none;
}
.card-interactive:hover::before {
display: none;
}
/* Morphing Buttons */
.btn-morph {
position: relative;
overflow: hidden;
border: none;
border-radius: var(--radius-full);
background: var(--gradient-primary);
color: white;
padding: var(--space-4) var(--space-8);
font-weight: var(--font-weight-semibold);
transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
transform-style: preserve-3d;
}
.btn-morph::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.5s;
}
.btn-morph:hover::before {
left: 100%;
}
.btn-morph:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 10px 30px rgba(21, 48, 124, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.2);
}
.btn-morph:active {
transform: translateY(-1px) scale(0.98);
}
/* Liquid Animations */
.liquid-shape {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation: liquidMorph 8s ease-in-out infinite;
background: var(--gradient-primary);
position: absolute;
opacity: 0.1;
}
@keyframes liquidMorph {
0%, 100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transform: translate3d(0, 0, 0) rotateZ(0deg);
}
34% {
border-radius: 70% 60% 20% 40% / 40% 40% 60% 50%;
transform: translate3d(5px, -10px, 0) rotateZ(5deg);
}
67% {
border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
transform: translate3d(-5px, 10px, 0) rotateZ(-5deg);
}
}
/* Advanced Progress Indicators */
.progress-ring-advanced {
position: relative;
width: 120px;
height: 120px;
}
.progress-ring-advanced svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.progress-ring-advanced .progress-ring-circle {
fill: transparent;
stroke: var(--sanitasi-primary);
stroke-width: 8;
stroke-dasharray: 377; /* 2 * π * 60 */
stroke-dashoffset: 377;
stroke-linecap: round;
transition: stroke-dashoffset 1s ease-in-out;
filter: drop-shadow(0 0 10px rgba(21, 48, 124, 0.3));
}
.progress-ring-advanced .progress-ring-bg {
fill: transparent;
stroke: rgba(21, 48, 124, 0.1);
stroke-width: 8;
}
/* Particle System */
.particle-system {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
background: var(--sanitasi-primary);
border-radius: 50%;
opacity: 0.6;
animation: particleFloat 15s linear infinite;
}
.particle:nth-child(1) {
width: 4px; height: 4px;
left: 10%;
animation-delay: -2s;
animation-duration: 12s;
}
.particle:nth-child(2) {
width: 6px; height: 6px;
left: 30%;
animation-delay: -4s;
animation-duration: 18s;
}
.particle:nth-child(3) {
width: 3px; height: 3px;
left: 50%;
animation-delay: -6s;
animation-duration: 15s;
}
.particle:nth-child(4) {
width: 5px; height: 5px;
left: 70%;
animation-delay: -8s;
animation-duration: 20s;
}
.particle:nth-child(5) {
width: 4px; height: 4px;
left: 90%;
animation-delay: -10s;
animation-duration: 14s;
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.6;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
/* Enhanced Data Tables */
.table-modern {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.table-modern thead {
background: var(--gradient-primary);
color: white;
}
.table-modern thead th {
border: none;
padding: var(--space-4) var(--space-6);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: var(--font-size-sm);
}
.table-modern tbody tr {
transition: var(--transition);
border: none;
}
.table-modern tbody tr:hover {
background: rgba(21, 48, 124, 0.05);
transform: scale(1.01);
}
.table-modern tbody td {
border: none;
padding: var(--space-4) var(--space-6);
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* Search Bar Advanced */
.search-advanced {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.search-advanced .search-input {
width: 100%;
padding: var(--space-4) var(--space-6) var(--space-4) var(--space-16);
border: 2px solid rgba(21, 48, 124, 0.2);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
font-size: var(--font-size-base);
transition: var(--transition);
outline: none;
}
.search-advanced .search-input:focus {
border-color: var(--sanitasi-primary);
box-shadow: 0 0 0 4px rgba(21, 48, 124, 0.1);
background: rgba(255, 255, 255, 1);
}
.search-advanced .search-icon {
position: absolute;
left: var(--space-5);
top: 50%;
transform: translateY(-50%);
color: var(--sanitasi-primary);
font-size: var(--font-size-lg);
pointer-events: none;
}
.search-advanced .search-clear {
position: absolute;
right: var(--space-4);
top: 50%;
transform: translateY(-50%);
background: var(--sanitasi-danger);
color: white;
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
cursor: pointer;
opacity: 0;
transition: var(--transition);
}
.search-advanced .search-input:not(:placeholder-shown) + .search-clear {
opacity: 1;
}
/* Status Badges Advanced */
.badge-ultra {
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
overflow: hidden;
}
.badge-ultra::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}
.badge-ultra:hover::before {
left: 100%;
}
.badge-ultra.success {
background: var(--gradient-environmental);
color: white;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.badge-ultra.warning {
background: linear-gradient(135deg, #f59e0b, #f97316);
color: white;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.badge-ultra.danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}
.badge-ultra.info {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: white;
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}
/*--------------------------------------------------------------
# Enhanced Sanitasi Stats Section - Theme Colors & Readability
--------------------------------------------------------------*/
/* Enhanced Stats Section Container with Sanitasi Theme */
.stats-section-clear {
position: relative;
background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 25%, #10b981 75%, #059669 100%);
color: #fff;
overflow: hidden;
padding: 80px 0;
}
/* Clean Background with Sanitasi Pattern */
.stats-bg-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.stats-gradient-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(14, 165, 233, 0.2) 0%, transparent 50%);
}
.stats-pattern-subtle {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 1px, transparent 1px),
linear-gradient(45deg, transparent 49%, rgba(255,255,255,0.03) 50%, transparent 51%);
background-size: 60px 60px, 40px 40px, 80px 80px;
opacity: 0.4;
}
/* Enhanced Section Header */
.stats-section-clear .container {
position: relative;
z-index: 2;
}
.stats-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 14px 28px;
border-radius: 50px;
color: #fff;
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.stats-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
line-height: 1.7;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Enhanced Stats Cards with Sanitasi Theme */
.stats-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
padding: 2.5rem;
height: 100%;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 20px 40px rgba(0,0,0,0.08),
0 8px 16px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.9);
color: #1f2937;
position: relative;
overflow: hidden;
}
.stats-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.stats-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 32px 64px rgba(0,0,0,0.12),
0 16px 32px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,1);
}
.stats-card:hover::before {
opacity: 1;
}
/* Sanitasi Color Variants with High Contrast */
.stats-card-info {
border-left: 6px solid #0ea5e9;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.stats-card-info:hover {
border-left-color: #0284c7;
box-shadow:
0 32px 64px rgba(14, 165, 233, 0.15),
0 16px 32px rgba(14, 165, 233, 0.1),
inset 0 1px 0 rgba(255,255,255,1);
}
.stats-card-warning {
border-left: 6px solid #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.stats-card-warning:hover {
border-left-color: #d97706;
box-shadow:
0 32px 64px rgba(245, 158, 11, 0.15),
0 16px 32px rgba(245, 158, 11, 0.1),
inset 0 1px 0 rgba(255,255,255,1);
}
.stats-card-danger {
border-left: 6px solid #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.stats-card-danger:hover {
border-left-color: #dc2626;
box-shadow:
0 32px 64px rgba(239, 68, 68, 0.15),
0 16px 32px rgba(239, 68, 68, 0.1),
inset 0 1px 0 rgba(255,255,255,1);
}
.stats-card-success {
border-left: 6px solid #10b981;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.stats-card-success:hover {
border-left-color: #059669;
box-shadow:
0 32px 64px rgba(16, 185, 129, 0.15),
0 16px 32px rgba(16, 185, 129, 0.1),
inset 0 1px 0 rgba(255,255,255,1);
}
/* Enhanced Card Header */
.stats-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
}
.stats-icon-container {
position: relative;
}
.stats-progress-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.stats-progress-ring svg {
transform: rotate(-90deg);
}
/* Enhanced Progress Ring Colors */
.stats-card-info .progress-circle {
stroke: #0ea5e9;
transition: all 0.4s ease;
}
.stats-card-info:hover .progress-circle {
stroke: #0284c7;
filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.4));
}
.stats-card-warning .progress-circle {
stroke: #f59e0b;
transition: all 0.4s ease;
}
.stats-card-warning:hover .progress-circle {
stroke: #d97706;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}
.stats-card-danger .progress-circle {
stroke: #ef4444;
transition: all 0.4s ease;
}
.stats-card-danger:hover .progress-circle {
stroke: #dc2626;
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
}
.stats-card-success .progress-circle {
stroke: #10b981;
transition: all 0.4s ease;
}
.stats-card-success:hover .progress-circle {
stroke: #059669;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}
/* Enhanced Stats Icon */
.stats-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.8rem;
color: #1f2937;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stats-card-info .stats-icon {
color: #0ea5e9;
}
.stats-card-warning .stats-icon {
color: #f59e0b;
}
.stats-card-danger .stats-icon {
color: #ef4444;
}
.stats-card-success .stats-icon {
color: #10b981;
}
.stats-card:hover .stats-icon {
transform: translate(-50%, -50%) scale(1.1);
}
/* Enhanced Trend Badges */
.stats-trend-badge {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
border: 2px solid rgba(0,0,0,0.08);
padding: 8px 16px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.trend-up {
color: #059669;
border-color: rgba(5, 150, 105, 0.2);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
}
.trend-down {
color: #dc2626;
border-color: rgba(220, 38, 38, 0.2);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
}
.trend-stable {
color: #6b7280;
border-color: rgba(107, 114, 128, 0.3);
background: rgba(107, 114, 128, 0.1);
}
/* Card Body */
.stats-card-body {
margin-bottom: 1.5rem;
}
.stats-number-section {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 1rem;
}
.stats-number {
font-size: 2.5rem;
font-weight: 700;
color: #1f2937;
line-height: 1;
}
.stats-unit {
font-size: 1rem;
color: #6b7280;
font-weight: 500;
}
.stats-title {
font-size: 1.2rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.stats-card .stats-title {
color: #1f2937;
}
.stats-description {
font-size: 0.9rem;
color: #6b7280;
line-height: 1.4;
margin: 0;
}
/* Card Footer */
.stats-card-footer {
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 1rem;
}
.stats-progress-bar {
background: rgba(0,0,0,0.1);
border-radius: 10px;
height: 6px;
margin-bottom: 1rem;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 10px;
transition: width 2s ease;
}
.stats-card-info .progress-fill {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.stats-card-warning .progress-fill {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.stats-card-danger .progress-fill {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.stats-card-success .progress-fill {
background: linear-gradient(90deg, #10b981, #34d399);
}
.stats-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.stats-badge {
background: rgba(0,0,0,0.05);
padding: 4px 12px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
color: #374151;
}
.stats-completed {
font-size: 0.8rem;
color: #6b7280;
}
/* Performance Summary */
.stats-summary {
margin-top: 3rem;
}
.summary-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.summary-title {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0;
}
.summary-stat {
text-align: center;
}
.summary-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.summary-label {
color: #6b7280;
font-weight: 500;
}
.summary-chart {
position: relative;
}
.chart-circle {
position: relative;
display: inline-block;
}
.chart-circle svg {
transform: rotate(-90deg);
}
.chart-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.chart-number {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
display: block;
}
.chart-text {
font-size: 0.8rem;
color: #6b7280;
}
/* Responsive Design */
@media (max-width: 768px) {
.stats-section-clear .stats-title {
font-size: 2rem;
}
.stats-card {
padding: 1.5rem;
}
.stats-number {
font-size: 2rem;
}
.summary-card {
padding: 1.5rem;
}
.summary-number {
font-size: 1.5rem;
}
.chart-circle svg {
width: 100px;
height: 100px;
}
}
.stats-modern.enhanced-stats-sanitasi .row > [class^="col-"] {
padding: 0 15px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
/* Clean Stats Cards */
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card {
width: 100% !important;
height: 100% !important;
min-height: 260px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 24px !important;
position: relative !important;
z-index: 1 !important;
flex-grow: 1 !important;
background: rgba(255,255,255,0.12) !important;
backdrop-filter: blur(2px) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 16px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
transition: all 0.3s ease !important;
}
/* Simple hover effect */
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}
/* Clean Height Management */
.stats-modern.enhanced-stats-sanitasi .h-100 {
height: auto !important;
min-height: 260px !important;
}
/* Simple positioning */
.stats-modern.enhanced-stats-sanitasi .position-relative {
position: relative !important;
}
.stats-modern.enhanced-stats-sanitasi .position-absolute {
position: absolute !important;
}
/* Clean card override */
.stats-modern.enhanced-stats-sanitasi .glass-card-ultra.stat-card.stats-item-modern.sanitasi-stat-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
min-height: 260px !important;
margin: 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Clean content spacing */
.stats-modern.enhanced-stats-sanitasi .stats-header {
margin-bottom: 16px !important;
flex-shrink: 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
}
.stats-modern.enhanced-stats-sanitasi .stats-content {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin-bottom: 16px !important;
text-align: center !important;
}
.stats-modern.enhanced-stats-sanitasi .stats-progress {
flex-shrink: 0 !important;
margin-bottom: 16px !important;
}
.stats-modern.enhanced-stats-sanitasi .stats-footer {
flex-shrink: 0 !important;
margin-top: auto !important;
}
/* Responsive Design */
@media (max-width: 992px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 60px 0;
}
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card {
min-height: 260px !important;
padding: 25px !important;
}
.stat-number {
font-size: 2rem !important;
}
}
@media (max-width: 768px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 50px 0;
}
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card {
min-height: 240px !important;
padding: 20px !important;
}
.stat-number {
font-size: 1.75rem !important;
}
}
/*--------------------------------------------------------------
# Enhanced Stats Section - Clean & Structured Design (New)
--------------------------------------------------------------*/
/* Stats Overview Summary */
.stats-overview-summary {
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.overall-stats-card {
background: rgba(255,255,255,0.15) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 20px !important;
transition: all 0.3s ease !important;
}
.overall-stats-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
background: rgba(255,255,255,0.18) !important;
}
.summary-item h3 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 800;
letter-spacing: -0.025em;
text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Detailed Stats Grid */
.detailed-stats-grid {
position: relative;
z-index: 2;
}
/* Modern Stats Cards - New Design */
.modern-stat-card {
background: rgba(255,255,255,0.12) !important;
backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 16px !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: hidden !important;
position: relative !important;
min-height: 320px !important;
}
.modern-stat-card:hover {
transform: translateY(-8px) scale(1.02) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.25) !important;
}
/* Accent Bar */
.stat-accent-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
z-index: 1;
}
/* Icon Section */
.stat-icon-modern .icon-circle {
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.modern-stat-card:hover .icon-circle {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Typography */
.stat-value {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 800;
letter-spacing: -0.02em;
transition: all 0.3s ease;
text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.stat-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
}
.stat-desc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
opacity: 0.85;
}
.modern-stat-card:hover .stat-value {
transform: scale(1.05);
text-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
/* Progress Bars */
.stat-progress .progress {
transition: all 0.3s ease;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.stat-progress .progress-bar {
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.stat-progress .progress-bar::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: progressShine 2s infinite;
}
@keyframes progressShine {
0% { left: -100%; }
100% { left: 100%; }
}
/* Trend Indicators */
.trend-indicator .badge {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.modern-stat-card:hover .trend-indicator .badge {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Footer Elements */
.stat-footer {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1rem;
margin-top: auto;
}
.status-badge {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(5px);
}
.update-time {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
opacity: 0.7;
}
/* Responsive Design for New Cards */
@media (max-width: 1200px) {
.modern-stat-card {
min-height: 300px !important;
}
.stat-value {
font-size: 2rem !important;
}
}
@media (max-width: 768px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 60px 0;
}
.modern-stat-card {
min-height: 280px !important;
}
.stat-value {
font-size: 1.75rem !important;
}
.overall-stats-card {
padding: 1.5rem !important;
}
.stats-overview-summary {
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.modern-stat-card {
min-height: 260px !important;
}
.stat-value {
font-size: 1.5rem !important;
}
.overall-stats-card .row .col-6 {
margin-bottom: 1rem;
}
}
/* Animation for stats load */
@keyframes statsSlideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modern-stat-card {
animation: statsSlideUp 0.6s ease-out forwards;
opacity: 0;
}
.modern-stat-card:nth-child(1) { animation-delay: 0.1s; }
.modern-stat-card:nth-child(2) { animation-delay: 0.2s; }
.modern-stat-card:nth-child(3) { animation-delay: 0.3s; }
.modern-stat-card:nth-child(4) { animation-delay: 0.4s; }
@media (max-width: 768px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 50px 0;
}
.stats-modern.enhanced-stats-sanitasi .row {
margin: 0 -10px;
}
.stats-modern.enhanced-stats-sanitasi .row > [class^="col-"] {
padding: 0 10px;
margin-bottom: 20px;
}
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card {
min-height: 240px !important;
padding: 20px !important;
}
.stat-number {
font-size: 2rem !important;
}
.stat-label {
font-size: 14px !important;
}
}
@media (max-width: 576px) {
.stats-modern.enhanced-stats-sanitasi .sanitasi-stat-card {
min-height: 220px !important;
padding: 18px !important;
}
.stat-number {
font-size: 1.8rem !important;
}
}/* Simple background overlay */
.stats-modern.enhanced-stats-sanitasi::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, rgba(16,185,129,0.02) 0%, transparent 60%);
pointer-events: none;
}
/* Clean Glass Card Styling */
.glass-card-ultra.stat-card {
background: rgba(255,255,255,0.12);
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 16px;
padding: 24px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.glass-card-ultra.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.2) 50%,
transparent 100%);
}
.glass-card-ultra.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.glass-card-ultra.stat-card:hover {
transform: translateY(-3px);
box-shadow:
0 12px 35px rgba(0,0,0,0.12),
0 4px 10px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.25);
border-color: rgba(255,255,255,0.28);
}
/* Simple Progress Ring */
.progress-ring-advanced {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.progress-ring-advanced svg {
position: absolute;
top: 0;
left: 0;
transform: rotate(-90deg);
}
.progress-ring-advanced .progress-ring-bg {
fill: none;
stroke: rgba(255,255,255,0.15);
stroke-width: 2;
}
.progress-ring-advanced .progress-ring-circle {
fill: none;
stroke: rgba(255,255,255,0.85);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 157;
transition: stroke-dashoffset 1.2s ease;
}
.progress-ring-advanced .icon-background {
position: absolute;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.15);
}
.progress-ring-advanced i {
position: relative;
z-index: 2;
font-size: 22px;
color: rgba(255,255,255,0.9);
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Refined Badge System */
.badge-ultra {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.badge-ultra.success {
background: linear-gradient(135deg, rgba(16,185,129,0.2) 0%, rgba(16,185,129,0.12) 100%);
color: rgba(255,255,255,0.9);
box-shadow: 0 1px 4px rgba(16,185,129,0.1);
}
.badge-ultra.danger {
background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.12) 100%);
color: rgba(255,255,255,0.9);
box-shadow: 0 1px 4px rgba(239,68,68,0.1);
}
.badge-ultra.info {
background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(59,130,246,0.12) 100%);
color: rgba(255,255,255,0.9);
box-shadow: 0 1px 4px rgba(59,130,246,0.1);
}
/* Simple Stats Content */
.stats-content {
text-align: center;
margin: 16px 0;
}
.stats-number-wrapper {
margin-bottom: 12px;
}
.stats-number {
display: block;
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
margin-bottom: 6px;
color: rgba(255,255,255,0.95);
}
.stats-unit {
display: block;
font-size: 10px;
color: rgba(255,255,255,0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stats-label {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 8px;
color: rgba(255,255,255,0.9);
}
.stats-description {
font-size: 11px;
color: rgba(255,255,255,0.75);
line-height: 1.3;
}
/* Simple Progress Bar */
.stats-progress {
margin: 16px 0;
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 2px;
overflow: hidden;
}
.progress-bar-modern {
height: 100%;
border-radius: 2px;
transition: width 1.2s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Simple Stats Footer */
.stats-footer {
margin-top: 16px;
}
.stats-meta {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.meta-item {
display: inline-flex;
align-items: center;
font-size: 9px;
padding: 3px 6px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
color: rgba(255,255,255,0.85);
font-weight: 500;
}
.meta-item i {
font-size: 8px;
margin-right: 3px;
}
/* Remove complex animations and effects */
.counter {
transition: none;
animation: none;
}
/* Ensure clean display */
.enhanced-stats-sanitasi .glass-card-ultra {
overflow: hidden;
backdrop-filter: blur(15px) !important;
}
.enhanced-stats-sanitasi .progress-ring-advanced svg {
filter: none;
}
.enhanced-stats-sanitasi .progress-ring-advanced .progress-ring-circle {
filter: none;
}
/* Additional utilities for new stats layout */
.text-white-50 {
color: rgba(255,255,255,0.5) !important;
}
.text-white-75 {
color: rgba(255,255,255,0.75) !important;
}
.bg-opacity-10 {
background-color: rgba(255,255,255,0.1) !important;
}
.bg-opacity-20 {
background-color: rgba(255,255,255,0.2) !important;
}
/* Override glass card for cleaner look */
.stats-modern .glass-card-ultra.stat-card.sanitasi-stat-card {
background: rgba(255,255,255,0.12) !important;
backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 20px !important;
transition: all 0.3s ease !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.stats-modern .glass-card-ultra.stat-card.sanitasi-stat-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
background: rgba(255,255,255,0.15) !important;
}
.stats-meta {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.meta-item {
font-size: 9px;
padding: 3px 8px;
}
/* Elegant Insights Grid */
.stats-insights {
margin-top: 50px;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 35px;
}
.insight-card {
padding: 28px 22px;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 16px;
}
.insight-card:hover {
transform: translateY(-2px);
}
.insight-card .insight-icon {
margin-bottom: 18px;
}
.insight-card .insight-icon i {
font-size: 28px;
color: rgba(255,255,255,0.85);
text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.insight-card h4 {
font-size: 1.3rem;
margin-bottom: 12px;
line-height: 1.3;
}
.insight-card p {
font-size: 0.9rem;
color: rgba(255,255,255,0.8);
line-height: 1.5;
margin-bottom: 18px;
}
.insight-progress {
height: 5px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.insight-progress .progress-line {
height: 100%;
border-radius: 3px;
position: relative;
transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Card Type Variations */
.holo-card.insight-card {
background: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.08) 50%,
rgba(255,255,255,0.15) 100%);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(20px);
}
.neuro-card.insight-card {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(15px);
box-shadow:
6px 6px 12px rgba(0,0,0,0.08),
-6px -6px 12px rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
}
.neuro-card.insight-card:hover {
box-shadow:
8px 8px 16px rgba(0,0,0,0.1),
-8px -8px 16px rgba(255,255,255,0.06);
}
/* Minimal Animation */
.floating-physics {
animation: none; /* Removed floating animation */
}
/* Remove excessive keyframe animations */
@keyframes pulseRing {
/* Removed complex pulse animation */
}
@keyframes holoRotate {
/* Removed complex holo animation */
}
/* Responsive Design */
@media (max-width: 992px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 60px 0;
}
.glass-card-ultra.stat-card {
padding: 22px;
}
.stats-number {
font-size: 2.5rem;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 18px;
}
}
@media (max-width: 768px) {
.stats-modern.enhanced-stats-sanitasi {
padding: 40px 0;
}
.glass-card-ultra.stat-card {
padding: 18px;
margin-bottom: 18px;
}
.stats-number {
font-size: 2.2rem;
}
.stats-meta {
flex-direction: column;
align-items: center;
}
.insight-card {
padding: 24px 18px;
}
}
/*--------------------------------------------------------------
# Enhanced Analytics Dashboard System
--------------------------------------------------------------*/
/* Analytics Dashboard Container */
.analytics-dashboard {
padding: var(--space-8) 0;
position: relative;
}
/* Enhanced Chart Card System */
.chart-card-enhanced {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius-xl);
padding: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow:
0 8px 32px rgba(21, 48, 124, 0.08),
0 2px 12px rgba(16, 185, 129, 0.04);
}
.chart-card-enhanced:hover {
transform: translateY(-4px);
box-shadow:
0 16px 48px rgba(21, 48, 124, 0.12),
0 4px 20px rgba(16, 185, 129, 0.08);
}
/* Chart Header */
.chart-header {
padding: var(--space-6) var(--space-8);
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
border-bottom: 1px solid rgba(21, 48, 124, 0.1);
}
.chart-title {
display: flex;
align-items: center;
margin-bottom: var(--space-2);
font-size: 1.125rem;
font-weight: 700;
color: var(--color-primary);
}
.title-icon {
width: 40px;
height: 40px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
color: white;
font-size: 18px;
}
.chart-subtitle {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: 0;
line-height: 1.5;
}
/* Chart Body */
.chart-body {
padding: var(--space-6) var(--space-8);
}
.chart-container-enhanced {
position: relative;
height: 280px;
margin-bottom: var(--space-6);
}
/* Enhanced Status Metrics */
.status-metrics-enhanced .metric-card-mini {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: var(--space-4);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.status-metrics-enhanced .metric-card-mini:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(21, 48, 124, 0.1);
}
.metric-card-mini .metric-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-2);
color: white;
font-size: 14px;
}
.metric-card-mini.warning .metric-icon { background: var(--color-warning); }
.metric-card-mini.info .metric-icon { background: var(--color-info); }
.metric-card-mini.success .metric-icon { background: var(--color-success); }
.metric-card-mini.primary .metric-icon { background: var(--color-primary); }
.metric-card-mini .metric-number {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
margin-bottom: 2px;
}
.metric-card-mini .metric-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.metric-pulse {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: var(--color-success);
border-radius: 50%;
animation: pulse 2s infinite;
}
/* Enhanced Chart Controls */
.chart-controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
.form-select-enhanced {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(21, 48, 124, 0.2);
border-radius: 8px;
padding: 6px 12px;
font-size: 0.875rem;
color: var(--text-primary);
transition: all 0.3s ease;
}
.form-select-enhanced:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(21, 48, 124, 0.1);
outline: none;
}
/* Enhanced Trend Insights */
.trend-insights-enhanced .insight-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: var(--space-3);
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.insight-card:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
.insight-card .insight-icon {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
color: white;
font-size: 12px;
}
.insight-card.success .insight-icon { background: var(--color-success); }
.insight-card.info .insight-icon { background: var(--color-info); }
.insight-content {
flex: 1;
}
.insight-value {
font-weight: 700;
color: var(--text-primary);
font-size: 0.875rem;
display: block;
}
.insight-label {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Performance Monitor Card */
.performance-monitor-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius-xl);
overflow: hidden;
}
.performance-header {
padding: var(--space-6) var(--space-8);
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
border-bottom: 1px solid rgba(21, 48, 124, 0.1);
}
.performance-title {
display: flex;
align-items: center;
margin-bottom: var(--space-2);
font-size: 1.125rem;
font-weight: 700;
color: var(--color-primary);
}
.performance-controls {
display: flex;
align-items: center;
gap: var(--space-4);
}
.live-indicator-enhanced {
display: flex;
align-items: center;
background: rgba(16, 185, 129, 0.1);
padding: 6px 12px;
border-radius: 20px;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.live-dot-pulse {
width: 8px;
height: 8px;
background: var(--color-success);
border-radius: 50%;
margin-right: 8px;
animation: pulse 2s infinite;
}
.live-text {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-success);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.performance-body {
padding: var(--space-6) var(--space-8);
}
/* Enhanced Performance Metrics Grid */
.performance-metrics-grid-enhanced {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
}
.performance-metric-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
padding: var(--space-5);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.performance-metric-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(21, 48, 124, 0.1);
}
.metric-header {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: var(--space-3);
}
.metric-icon-bg {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.performance-metric-card.success .metric-icon-bg { background: var(--gradient-environmental); }
.performance-metric-card.warning .metric-icon-bg { background: var(--gradient-alert); }
.performance-metric-card.info .metric-icon-bg { background: var(--gradient-health); }
.metric-trend {
display: flex;
align-items: center;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metric-trend.up {
background: rgba(16, 185, 129, 0.1);
color: var(--color-success);
}
.metric-trend.down {
background: rgba(239, 68, 68, 0.1);
color: var(--color-danger);
}
.metric-trend i {
margin-right: 4px;
font-size: 10px;
}
.metric-body .metric-value {
font-size: 1.875rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
margin-bottom: var(--space-1);
}
.metric-body .metric-label {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 4px;
}
.metric-body .metric-description {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.4;
}
.chart-container-performance {
height: 220px;
position: relative;
margin-top: var(--space-4);
}
/* Alert System Card */
.alert-system-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius-xl);
overflow: hidden;
}
.alert-header {
padding: var(--space-6) var(--space-6);
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
border-bottom: 1px solid rgba(21, 48, 124, 0.1);
}
.alert-title {
display: flex;
align-items: center;
font-size: 1.125rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0;
}
.alert-body {
padding: var(--space-6);
}
/* Enhanced Alert Cards */
.alert-cards-enhanced {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.alert-card-enhanced {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
padding: var(--space-5);
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.alert-card-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(21, 48, 124, 0.1);
}
.alert-card-enhanced.critical {
border-left: 4px solid #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.alert-card-enhanced.high {
border-left: 4px solid #f59e0b;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.alert-card-enhanced.medium {
border-left: 4px solid #06b6d4;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.alert-card-header {
position: relative;
margin-right: var(--space-4);
}
.alert-icon-enhanced {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
}
.alert-card-enhanced.critical .alert-icon-enhanced { background: #ef4444; }
.alert-card-enhanced.high .alert-icon-enhanced { background: #f59e0b; }
.alert-card-enhanced.medium .alert-icon-enhanced { background: #06b6d4; }
.alert-pulse-ring {
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid #ef4444;
border-radius: 16px;
animation: pulse-ring 2s infinite;
}
.alert-card-enhanced.critical .alert-pulse-ring {
animation: pulse-ring 1.5s infinite;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.1); opacity: 0; }
}
.alert-card-body {
flex: 1;
}
.alert-count-large {
font-size: 1.875rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
margin-bottom: 4px;
}
.alert-title-text {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.alert-description {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.4;
}
/* Enhanced Quick Actions */
.quick-actions-enhanced {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgba(21, 48, 124, 0.1);
}
.quick-actions-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.quick-actions-grid-enhanced {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.quick-action-btn-enhanced {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: var(--space-3);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
color: var(--text-primary);
text-decoration: none;
}
.quick-action-btn-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(21, 48, 124, 0.1);
text-decoration: none;
color: var(--text-primary);
}
.quick-action-btn-enhanced .btn-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-2);
color: white;
font-size: 14px;
}
.quick-action-btn-enhanced.primary .btn-icon { background: var(--color-primary); }
.quick-action-btn-enhanced.info .btn-icon { background: var(--color-info); }
.quick-action-btn-enhanced.success .btn-icon { background: var(--color-success); }
.quick-action-btn-enhanced.secondary .btn-icon { background: var(--color-secondary); }
.quick-action-btn-enhanced .btn-text {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-primary);
}
/*--------------------------------------------------------------
# Enhanced Geographic Map System
--------------------------------------------------------------*/
/* Geographic Map Card */
.geographic-map-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--border-radius-xl);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.geographic-header {
padding: var(--space-6) var(--space-8);
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
border-bottom: 1px solid rgba(21, 48, 124, 0.1);
}
.geographic-title {
display: flex;
align-items: center;
margin-bottom: var(--space-2);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
}
.geographic-controls {
display: flex;
gap: var(--space-3);
}
.control-btn-enhanced {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(21, 48, 124, 0.2);
border-radius: 8px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
color: var(--text-primary);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}
.control-btn-enhanced:hover {
background: rgba(21, 48, 124, 0.1);
border-color: var(--color-primary);
transform: translateY(-1px);
color: var(--text-primary);
text-decoration: none;
}
.geographic-body {
padding: var(--space-8);
}
/* Enhanced Map Controls */
.map-controls-enhanced {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.map-filters-enhanced {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0;
}
/* Enhanced Map Legend */
.map-legend-enhanced {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.legend-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin-right: var(--space-2);
}
.legend-items {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.legend-item-enhanced {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: var(--text-muted);
}
.legend-item-enhanced .legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.legend-item-enhanced.high .legend-color { background: #ef4444; }
.legend-item-enhanced.medium .legend-color { background: #f59e0b; }
.legend-item-enhanced.low .legend-color { background: #10b981; }
.legend-item-enhanced.none .legend-color { background: #94a3b8; }
/* Enhanced Geographic Map Container */
.geographic-map-container-enhanced {
margin: var(--space-6) 0;
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.95) 100%);
border: 1px solid rgba(21, 48, 124, 0.1);
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.heatmap-canvas-enhanced {
height: 400px;
position: relative;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}
.bontang-map-enhanced {
width: 100%;
height: 100%;
position: relative;
background: url('data:image/svg+xml,') repeat;
background-size: 20px 20px;
}
/* Enhanced Area Markers */
.area-marker-enhanced {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.area-marker-enhanced.high {
background: rgba(239, 68, 68, 0.8);
border: 3px solid #ef4444;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
.area-marker-enhanced.medium {
background: rgba(245, 158, 11, 0.8);
border: 3px solid #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}
.area-marker-enhanced.low {
background: rgba(16, 185, 129, 0.8);
border: 3px solid #10b981;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}
.area-marker-enhanced.none {
background: rgba(148, 163, 184, 0.8);
border: 3px solid #94a3b8;
box-shadow: 0 0 20px rgba(148, 163, 184, 0.4);
}
.area-marker-enhanced:hover {
transform: scale(1.2);
z-index: 20;
}
/* Enhanced Marker Pulse */
.marker-pulse-enhanced {
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 50%;
border: 2px solid;
animation: pulse-enhanced 2s infinite;
}
.area-marker-enhanced.high .marker-pulse-enhanced { border-color: #ef4444; }
.area-marker-enhanced.medium .marker-pulse-enhanced { border-color: #f59e0b; }
.area-marker-enhanced.low .marker-pulse-enhanced { border-color: #10b981; }
.area-marker-enhanced.none .marker-pulse-enhanced { border-color: #94a3b8; }
@keyframes pulse-enhanced {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Enhanced Marker Tooltip */
.marker-tooltip {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: var(--space-3);
box-shadow: 0 8px 25px rgba(21, 48, 124, 0.15);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 30;
min-width: 120px;
text-align: center;
}
.area-marker-enhanced:hover .marker-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
.tooltip-header {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.tooltip-body {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.tooltip-count {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-primary);
}
.tooltip-label {
font-size: 0.75rem;
color: var(--text-muted);
}
/* Enhanced Map Statistics */
.map-stats-enhanced {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid rgba(21, 48, 124, 0.1);
}
.map-stat-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: var(--space-4);
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.map-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(21, 48, 124, 0.1);
}
.map-stat-card .stat-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--space-3);
color: white;
font-size: 16px;
}
.map-stat-card.primary .stat-icon { background: var(--gradient-primary); }
.map-stat-card.success .stat-icon { background: var(--gradient-environmental); }
.map-stat-card.warning .stat-icon { background: var(--gradient-alert); }
.map-stat-card.info .stat-icon { background: var(--gradient-health); }
.map-stat-card .stat-content {
flex: 1;
}
.map-stat-card .stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1;
margin-bottom: 4px;
}
.map-stat-card .stat-label {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
}
/* Enhanced Summary Card */
.summary-card-enhanced {
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.95) 0%,
rgba(21, 48, 124, 0.85) 25%,
rgba(16, 185, 129, 0.8) 75%,
rgba(16, 185, 129, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-xl);
overflow: hidden;
color: white;
position: relative;
}
.summary-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 30px 30px;
opacity: 0.5;
pointer-events: none;
}
.summary-header-enhanced {
padding: var(--space-8) var(--space-8) var(--space-6);
position: relative;
z-index: 10;
}
.summary-title {
font-size: 1.875rem;
font-weight: 800;
margin-bottom: var(--space-2);
color: white;
}
.summary-subtitle {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
.summary-body-enhanced {
padding: 0 var(--space-8) var(--space-8);
position: relative;
z-index: 10;
}
/* Enhanced Summary Metric Cards */
.summary-metric-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: var(--space-6);
transition: all 0.3s ease;
text-align: center;
}
.summary-metric-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}
.metric-icon-enhanced {
width: 60px;
height: 60px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-4);
color: white;
font-size: 24px;
}
.summary-metric-card.primary .metric-icon-enhanced {
background: rgba(255, 255, 255, 0.2);
}
.summary-metric-card.success .metric-icon-enhanced {
background: rgba(16, 185, 129, 0.3);
}
.summary-metric-card.info .metric-icon-enhanced {
background: rgba(6, 182, 212, 0.3);
}
.summary-metric-card.warning .metric-icon-enhanced {
background: rgba(245, 158, 11, 0.3);
}
.metric-content-enhanced {
color: white;
}
.metric-number-large {
font-size: 2.25rem;
font-weight: 800;
line-height: 1;
margin-bottom: var(--space-2);
color: white;
}
.metric-label-enhanced {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: var(--space-3);
color: rgba(255, 255, 255, 0.9);
line-height: 1.3;
}
.metric-trend-enhanced {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.metric-trend-enhanced.up {
background: rgba(16, 185, 129, 0.2);
color: rgba(255, 255, 255, 0.95);
}
.metric-trend-enhanced.stable {
background: rgba(6, 182, 212, 0.2);
color: rgba(255, 255, 255, 0.95);
}
.metric-trend-enhanced.down {
background: rgba(245, 158, 11, 0.2);
color: rgba(255, 255, 255, 0.95);
}
/* Responsive Design for Analytics Dashboard */
@media (max-width: 992px) {
.performance-metrics-grid-enhanced {
grid-template-columns: 1fr;
}
.map-controls-enhanced {
flex-direction: column;
align-items: stretch;
}
.legend-items {
justify-content: center;
}
}
@media (max-width: 768px) {
.analytics-dashboard {
padding: var(--space-4) 0;
}
.chart-header, .performance-header, .alert-header, .geographic-header {
padding: var(--space-4) var(--space-4);
}
.chart-body, .performance-body, .alert-body, .geographic-body {
padding: var(--space-4);
}
.chart-container-enhanced {
height: 240px;
}
.heatmap-canvas-enhanced {
height: 300px;
}
.quick-actions-grid-enhanced {
grid-template-columns: 1fr;
}
.summary-header-enhanced {
padding: var(--space-6) var(--space-4) var(--space-4);
}
.summary-body-enhanced {
padding: 0 var(--space-4) var(--space-6);
}
.summary-title {
font-size: 1.5rem;
}
.metric-number-large {
font-size: 1.875rem;
}
}
@media (max-width: 576px) {
.area-marker-enhanced {
width: 32px;
height: 32px;
}
.marker-tooltip {
min-width: 100px;
font-size: 0.8rem;
}
.map-filters-enhanced {
flex-direction: column;
width: 100%;
}
.filter-group {
width: 100%;
}
}
/*--------------------------------------------------------------
# Enhanced Page Header System for Pengaduan
--------------------------------------------------------------*/
/* Enhanced Page Header Base */
.enhanced-page-header {
padding: var(--space-20) 0 var(--space-12);
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.95) 0%,
rgba(21, 48, 124, 0.85) 25%,
rgba(16, 185, 129, 0.8) 75%,
rgba(16, 185, 129, 0.9) 100%);
position: relative;
overflow: hidden;
min-height: 360px;
display: flex;
align-items: center;
}
/* Page Header Background System */
.page-header-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.bg-gradient-sanitasi-header {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.9) 0%,
rgba(21, 48, 124, 0.7) 30%,
rgba(16, 185, 129, 0.6) 70%,
rgba(16, 185, 129, 0.8) 100%);
}
.header-pattern-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.15; /* lower overlay intensity for clarity */
}
/* Header content placement above background */
.enhanced-page-header .page-header-content {
position: relative;
z-index: 2;
color: #fff;
}
/* Ensure text readability */
.enhanced-page-header .page-title {
font-weight: 800;
letter-spacing: 0.2px;
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.enhanced-page-header .page-subtitle {
color: rgba(255,255,255,0.92);
}
.pattern-dots.pattern-1 {
position: absolute;
top: 20%;
left: 10%;
width: 200px;
height: 200px;
background: url('data:image/svg+xml,') repeat;
background-size: 20px 20px;
animation: float 8s ease-in-out infinite;
}
.pattern-dots.pattern-2 {
position: absolute;
bottom: 20%;
right: 15%;
width: 150px;
height: 150px;
background: url('data:image/svg+xml,') repeat;
background-size: 15px 15px;
animation: float 10s ease-in-out infinite reverse;
}
.pattern-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 40px 40px;
opacity: 0.5;
}
/* Floating Header Particles */
.floating-header-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.header-particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: floatParticles 15s linear infinite;
}
.header-particle.particle-1 {
width: 8px;
height: 8px;
top: 20%;
left: 20%;
animation-delay: 0s;
animation-duration: 12s;
}
.header-particle.particle-2 {
width: 6px;
height: 6px;
top: 60%;
left: 70%;
animation-delay: 3s;
animation-duration: 18s;
}
.header-particle.particle-3 {
width: 10px;
height: 10px;
top: 80%;
left: 30%;
animation-delay: 6s;
animation-duration: 15s;
}
@keyframes floatParticles {
0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
25% { transform: translateY(-20px) rotate(90deg); opacity: 0.6; }
50% { transform: translateY(-10px) rotate(180deg); opacity: 0.8; }
75% { transform: translateY(-30px) rotate(270deg); opacity: 0.4; }
}
/* Enhanced Breadcrumb System */
.enhanced-breadcrumb {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 12px 24px;
margin-bottom: 0;
display: inline-flex;
align-items: center;
}
.breadcrumb-link {
display: flex;
align-items: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
padding: 4px 8px;
border-radius: 20px;
}
.breadcrumb-link:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.breadcrumb-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 12px;
}
.breadcrumb-separator {
margin: 0 12px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.breadcrumb-current {
color: white;
font-weight: 600;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
font-size: 0.875rem;
}
/* Enhanced Header Content */
.header-content {
position: relative;
z-index: 10;
}
.header-badge .badge-ultra {
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.header-badge .badge-ultra:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.header-badge .badge-ultra.primary {
background: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.3);
color: #ffffff;
}
.page-title {
color: white;
line-height: 1.2;
margin-bottom: var(--space-4);
}
.title-gradient {
background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
display: flex;
align-items: center;
}
.subtitle-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
font-size: 12px;
}
/* Header Quick Stats */
.header-quick-stats {
position: relative;
z-index: 10;
}
.quick-stat-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 12px 16px;
transition: all 0.3s ease;
}
.quick-stat-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.quick-stat-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 16px;
color: white;
}
.quick-stat-icon.primary { background: rgba(21, 48, 124, 0.3); }
.quick-stat-icon.warning { background: rgba(245, 158, 11, 0.3); }
.quick-stat-icon.success { background: rgba(16, 185, 129, 0.3); }
.quick-stat-content {
display: flex;
flex-direction: column;
}
.quick-stat-number {
font-size: 1.25rem;
font-weight: 700;
color: white;
line-height: 1;
}
.quick-stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Enhanced Header Actions */
.header-actions {
position: relative;
z-index: 10;
}
.live-status-indicator {
display: flex;
align-items: center;
justify-content: flex-end;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 8px 16px;
}
.status-dot {
width: 8px;
height: 8px;
background: #10b981;
border-radius: 50%;
margin-right: 8px;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.status-text {
font-size: 0.875rem;
color: white;
font-weight: 600;
margin-right: 12px;
}
.status-time {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);
font-family: 'Courier New', monospace;
}
/* Enhanced Action Buttons */
.btn-enhanced {
position: relative;
display: flex;
align-items: center;
padding: 14px 28px;
border-radius: 50px;
font-weight: 600;
font-size: 0.875rem;
letter-spacing: 0.5px;
text-transform: uppercase;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
border: 2px solid;
}
.btn-enhanced.btn-outline-primary {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: white;
}
.btn-enhanced.btn-outline-primary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: white;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}
.btn-enhanced.btn-primary {
background: rgba(255, 255, 255, 0.9);
border-color: white;
color: var(--color-primary);
}
.btn-enhanced.btn-primary:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.btn-icon {
margin-right: 10px;
font-size: 14px;
}
.btn-text {
position: relative;
z-index: 2;
}
.btn-shine {
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;
}
.btn-enhanced:hover .btn-shine {
left: 100%;
}
/* Quick Action Buttons */
.btn-glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
color: white;
}
/* Page Header Border */
.page-header-border {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
rgba(21, 48, 124, 0.8) 0%,
rgba(16, 185, 129, 0.8) 50%,
rgba(21, 48, 124, 0.8) 100%);
z-index: 10;
}
/* Responsive Design for Page Header */
@media (max-width: 992px) {
.enhanced-page-header {
padding: var(--space-16) 0 var(--space-12);
min-height: 380px;
}
.header-actions {
margin-top: var(--space-8);
text-align: center !important;
}
.live-status-indicator {
justify-content: center;
margin-bottom: var(--space-4);
}
.action-buttons {
justify-content: center;
gap: 12px;
}
}
@media (max-width: 768px) {
.enhanced-page-header {
padding: var(--space-12) 0 var(--space-10);
min-height: 320px;
}
.page-title {
font-size: 2rem;
}
.page-subtitle {
font-size: 1rem;
}
.enhanced-breadcrumb {
padding: 8px 16px;
}
.btn-enhanced {
padding: 12px 20px;
font-size: 0.8rem;
}
.header-quick-stats .row {
justify-content: center;
}
.quick-stat-item {
margin-bottom: 8px;
}
}
@media (max-width: 576px) {
.enhanced-page-header {
min-height: 280px;
}
.page-title {
font-size: 1.75rem;
}
.btn-enhanced {
width: 100%;
margin-bottom: 8px;
justify-content: center;
}
.btn-enhanced.me-3 {
margin-right: 0 !important;
}
.quick-actions {
justify-content: center;
}
}
/* Progress Ring System for Appointment Forms */
.progress-ring {
transform: rotate(-90deg);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.progress-ring circle {
fill: none;
stroke-width: 4;
stroke-linecap: round;
transition: stroke-dasharray 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.progress-ring .bg {
stroke: rgba(21, 48, 124, 0.1);
}
.progress-ring .progress {
stroke-dasharray: 0 251.2;
animation: progressFillIn 2s ease-out forwards;
}
.progress-ring.ring-primary .progress { stroke: var(--color-primary); }
.progress-ring.ring-success .progress { stroke: var(--color-success); }
.progress-ring.ring-warning .progress { stroke: var(--color-warning); }
.progress-ring.ring-info .progress { stroke: var(--color-info); }
@keyframes progressFillIn {
0% { stroke-dasharray: 0 251.2; }
100% { stroke-dasharray: 188.4 251.2; }
}
/* Enhanced Glass Card for Appointment */
.appointment .glass-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(25px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
box-shadow:
0 12px 40px rgba(21, 48, 124, 0.08),
0 3px 12px rgba(16, 185, 129, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
position: relative;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
padding: var(--space-8);
}
.appointment .glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
opacity: 0;
transition: opacity 0.4s ease;
}
/* Form Header with Enhanced Typography */
.appointment .form-header {
position: relative;
padding-bottom: var(--space-6);
margin-bottom: var(--space-8);
text-align: center;
}
.appointment .form-header::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
}
.appointment .form-header h3 {
color: var(--color-primary);
font-weight: 700;
font-size: 1.375rem;
margin-bottom: var(--space-3);
letter-spacing: -0.025em;
line-height: 1.3;
}
.appointment .form-header p {
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 0;
line-height: 1.6;
font-weight: 400;
}
/* Color-Themed Form Sections */
.form-section-primary {
border-left: 4px solid var(--color-primary);
background: linear-gradient(135deg, rgba(21, 48, 124, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.form-section-success {
border-left: 4px solid var(--color-success);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.form-section-warning {
border-left: 4px solid var(--color-warning);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.form-section-info {
border-left: 4px solid var(--color-info);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(255, 255, 255, 0.8) 100%);
}
/* Enhanced Form Controls for Appointment */
.appointment .form-group {
margin-bottom: var(--space-6);
position: relative;
}
.appointment .form-control {
background: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(21, 48, 124, 0.1);
border-radius: 12px;
padding: 14px 16px;
font-size: 0.95rem;
color: var(--text-primary);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(21, 48, 124, 0.03);
}
.appointment .form-control:focus {
border-color: var(--color-primary);
box-shadow:
0 0 0 3px rgba(21, 48, 124, 0.1),
0 4px 16px rgba(21, 48, 124, 0.08);
background: rgba(255, 255, 255, 0.95);
outline: none;
}
.appointment .form-control::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
/* Enhanced Labels */
.appointment label {
font-weight: 600;
color: var(--color-primary);
font-size: 0.875rem;
margin-bottom: var(--space-2);
display: block;
letter-spacing: 0.025em;
}
/* Premium Button Styling for Appointment */
.appointment .btn-primary {
background: var(--gradient-primary);
border: none;
border-radius: 12px;
padding: 14px 32px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.025em;
color: white;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow:
0 6px 20px rgba(21, 48, 124, 0.2),
0 2px 8px rgba(16, 185, 129, 0.1);
position: relative;
overflow: hidden;
}
.appointment .btn-primary::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;
}
.appointment .btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 10px 30px rgba(21, 48, 124, 0.25),
0 4px 12px rgba(16, 185, 129, 0.15);
}
.appointment .btn-primary:hover::before {
left: 100%;
}
.appointment .btn-primary:active {
transform: translateY(0);
}
/* Responsive Enhancements for Appointment */
@media (max-width: 768px) {
.appointment .glass-card {
padding: var(--space-6);
border-radius: 16px;
}
.appointment .form-header h3 {
font-size: 1.25rem;
}
.appointment .form-control {
padding: 12px 14px;
font-size: 0.9rem;
border-radius: 10px;
}
.appointment .btn-primary {
padding: 12px 28px;
font-size: 0.9rem;
border-radius: 10px;
}
.progress-ring {
width: 70px;
height: 70px;
}
}
@media (max-width: 576px) {
.appointment .glass-card {
margin-bottom: var(--space-6);
}
.appointment .form-header::after {
width: 60px;
height: 2px;
}
.progress-ring {
width: 60px;
height: 60px;
}
}
/*--------------------------------------------------------------
# End of Enhanced Sanitasi CSS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Enhanced Stats Section Animations
--------------------------------------------------------------*/
@keyframes floatParticles {
0%, 100% {
transform: translateY(0px) scale(1);
opacity: 0.6;
}
33% {
transform: translateY(-20px) scale(1.1);
opacity: 0.8;
}
66% {
transform: translateY(10px) scale(0.9);
opacity: 0.4;
}
}
@keyframes progressPulse {
0%, 100% {
stroke: var(--primary-color);
filter: drop-shadow(0 0 6px rgba(21, 48, 124, 0.3));
}
50% {
stroke: var(--accent-color);
filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
}
}
@keyframes levelUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Enhanced Progress Ring Animation */
.progress-ring-advanced circle {
animation: progressPulse 3s ease-in-out infinite;
}
.stats-item-modern:hover .progress-ring-advanced {
animation: levelUp 0.8s ease-out;
}
/* Enhanced Glass Card Effects */
.glass-card-ultra:hover {
transform: translateY(-8px) scale(1.02);
}
/* Floating Physics Enhancement */
.floating-physics::before {
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%);
background-size: 200% 200%;
animation: shimmer 3s ease-in-out infinite;
}
/* Enhanced Background Animation */
.stats-modern.enhanced-stats-sanitasi::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(270deg,
rgba(21, 48, 124, 0.1) 0%,
rgba(16, 185, 129, 0.05) 50%,
rgba(21, 48, 124, 0.1) 100%);
background-size: 400% 400%;
animation: gradientShift 8s ease-in-out infinite;
z-index: -1;
}
/* Particle System Enhancement */
.floating-stats-particles .stats-particle:hover {
transform: scale(1.5);
background: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
/* Ring Content Animation */
.ring-content {
animation: levelUp 2s ease-in-out infinite;
}
.ring-content .fs-5 {
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s ease-in-out infinite;
}
/* Enhanced Responsive Animations */
@media (max-width: 768px) {
.stats-item-modern {
animation: levelUp 1s ease-out;
}
.glass-card-ultra:hover {
transform: translateY(-4px) scale(1.01);
}
.floating-stats-particles {
display: none; /* Hide particles on mobile for performance */
}
}
/*--------------------------------------------------------------
# Enhanced Appointment Background & Particle System
--------------------------------------------------------------*/
/* Appointment Background System */
.appointment-background-system {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.appointment-background-system .bg-gradient-sanitasi {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(21, 48, 124, 0.03) 0%,
rgba(255, 255, 255, 0.02) 25%,
rgba(255, 255, 255, 0.02) 75%,
rgba(16, 185, 129, 0.03) 100%);
}
.appointment-pattern-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
.appointment-pattern-overlay .pattern-dots.pattern-1 {
position: absolute;
top: 20%;
left: 10%;
width: 120px;
height: 120px;
background: url('data:image/svg+xml,') repeat;
background-size: 25px 25px;
animation: float 12s ease-in-out infinite;
}
.appointment-pattern-overlay .pattern-dots.pattern-2 {
position: absolute;
bottom: 20%;
right: 15%;
width: 100px;
height: 100px;
background: url('data:image/svg+xml,') repeat;
background-size: 20px 20px;
animation: float 15s ease-in-out infinite reverse;
}
.appointment-pattern-overlay .pattern-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 60px 60px;
opacity: 0.3;
}
/* Floating Appointment Particles */
.floating-appointment-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.appointment-particle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(16,185,129,0.15));
animation: floatAppointmentParticles 18s linear infinite;
}
.appointment-particle.particle-1 {
width: 8px;
height: 8px;
top: 30%;
left: 20%;
animation-delay: 0s;
animation-duration: 14s;
}
.appointment-particle.particle-2 {
width: 6px;
height: 6px;
top: 60%;
left: 70%;
animation-delay: 5s;
animation-duration: 18s;
}
.appointment-particle.particle-3 {
width: 10px;
height: 10px;
top: 40%;
left: 80%;
animation-delay: 10s;
animation-duration: 16s;
}
@keyframes floatAppointmentParticles {
0%, 100% {
transform: translateY(0px) translateX(0px) scale(1);
opacity: 0.6;
}
25% {
transform: translateY(-25px) translateX(15px) scale(1.1);
opacity: 0.8;
}
50% {
transform: translateY(-10px) translateX(-10px) scale(0.9);
opacity: 0.4;
}
75% {
transform: translateY(15px) translateX(5px) scale(1.05);
opacity: 0.7;
}
}
/* Enhanced Form Header */
.form-header-enhanced {
position: relative;
z-index: 2;
}
.form-header-enhanced .header-icon {
animation: levelUp 3s ease-in-out infinite;
}
/* Enhanced Interactive Effects */
.modern-textarea:focus {
animation: inputFocus 0.3s ease-out;
}
@keyframes inputFocus {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Enhanced Hover Effects for Process Cards */
.process-card:hover .progress-ring-advanced {
animation: progressRingHover 0.8s ease-out;
}
@keyframes progressRingHover {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Enhanced Button Animations */
.modern-submit:hover {
animation: buttonHover 0.3s ease-out;
}
@keyframes buttonHover {
0% { transform: translateY(0); }
50% { transform: translateY(-3px); }
100% { transform: translateY(-2px); }
}
/* Enhanced Section Modern Class */
.section-modern {
position: relative;
z-index: 2;
}
/*--------------------------------------------------------------
# Enhanced Media Upload System
--------------------------------------------------------------*/
/* Upload Area Styling */
.upload-area {
border: 2px dashed rgba(6,182,212,0.3);
border-radius: 16px;
padding: 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(6,182,212,0.05) 0%, rgba(59,130,246,0.05) 100%);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
min-height: 200px;
}
.upload-area:hover {
border-color: rgba(6,182,212,0.6);
background: linear-gradient(135deg, rgba(6,182,212,0.08) 0%, rgba(59,130,246,0.08) 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(6,182,212,0.15);
}
.upload-area.dragover {
border-color: var(--sanitasi-primary);
background: linear-gradient(135deg, rgba(21,48,124,0.1) 0%, rgba(59,130,246,0.1) 100%);
transform: scale(1.02);
}
.upload-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
}
.upload-icon {
font-size: 3rem;
color: var(--sanitasi-primary);
margin-bottom: 0.5rem;
opacity: 0.7;
transition: all 0.3s ease;
}
.upload-area:hover .upload-icon {
opacity: 1;
transform: scale(1.1);
color: #0891b2;
}
.upload-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--sanitasi-primary);
margin-bottom: 0.5rem;
}
.upload-subtitle {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 0.5rem;
}
.upload-info {
font-size: 0.8rem;
line-height: 1.4;
color: #9ca3af;
}
/* File Preview Area */
.upload-preview {
margin-top: 1rem;
padding: 1rem;
background: rgba(255,255,255,0.9);
border-radius: 12px;
border: 1px solid rgba(6,182,212,0.2);
}
.file-preview-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
background: rgba(6,182,212,0.05);
border-radius: 8px;
border: 1px solid rgba(6,182,212,0.15);
transition: all 0.3s ease;
}
.file-preview-item:hover {
background: rgba(6,182,212,0.08);
transform: translateX(5px);
}
.file-preview-icon {
font-size: 1.5rem;
color: var(--sanitasi-primary);
min-width: 40px;
text-align: center;
}
.file-preview-info {
flex: 1;
min-width: 0;
}
.file-preview-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--sanitasi-primary);
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-preview-size {
font-size: 0.8rem;
color: #6b7280;
}
.file-preview-progress {
width: 100%;
height: 4px;
background: rgba(6,182,212,0.2);
border-radius: 2px;
margin-top: 0.5rem;
overflow: hidden;
}
.file-preview-progress-bar {
height: 100%;
background: linear-gradient(90deg, #0891b2, #06b6d4);
border-radius: 2px;
transition: width 0.3s ease;
width: 0%;
}
.file-preview-remove {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.2);
color: #ef4444;
border-radius: 6px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
}
.file-preview-remove:hover {
background: rgba(239,68,68,0.15);
transform: scale(1.1);
}
/* Image Preview Specific */
.image-preview-item {
position: relative;
display: inline-block;
margin: 0.5rem;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.image-preview-item img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
}
.image-preview-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-preview-item:hover .image-preview-overlay {
opacity: 1;
}
.image-preview-remove {
color: white;
background: rgba(239,68,68,0.8);
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.8rem;
}
/* Video Preview Specific */
.video-preview-item {
position: relative;
margin: 0.5rem 0;
}
.video-preview-thumbnail {
width: 100%;
max-width: 200px;
height: 120px;
background: #f3f4f6;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 2rem;
margin-bottom: 0.5rem;
}
/* Upload Progress */
.upload-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(6,182,212,0.2);
overflow: hidden;
}
.upload-progress-bar {
height: 100%;
background: linear-gradient(90deg, #0891b2, #06b6d4);
width: 0%;
transition: width 0.3s ease;
}
/* File Size Validation */
.file-error {
color: #ef4444;
font-size: 0.8rem;
margin-top: 0.5rem;
font-weight: 500;
}
.file-success {
color: #10b981;
font-size: 0.8rem;
margin-top: 0.5rem;
font-weight: 500;
}
/* Responsive Upload Areas */
@media (max-width: 768px) {
.upload-area {
padding: 1.5rem 1rem;
min-height: 150px;
}
.upload-icon {
font-size: 2rem;
}
.upload-title {
font-size: 1rem;
}
.upload-subtitle {
font-size: 0.8rem;
}
.upload-info {
font-size: 0.75rem;
}
.image-preview-item img {
width: 80px;
height: 80px;
}
}