/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Ensure anchored sections are not hidden under fixed navbar */
:root { --nav-offset: 90px; }
section { scroll-margin-top: var(--nav-offset); }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: #2563eb;
}
.nav-logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.nav-logo .logo-image {
height: 2.5rem;
margin-right: 0.5rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
color: #2563eb;
}
.nav-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.user-info {
color: #64748b;
font-weight: 500;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: 0.3s;
}
/* Buttons */
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-align: center;
justify-content: center;
}
.btn-primary {
background: linear-gradient(45deg, #2563eb, #3b82f6);
color: white;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-outline {
background: transparent;
color: #2563eb;
border: 2px solid #2563eb;
}
.btn-outline:hover {
background: #2563eb;
color: white;
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #2563eb;
}
.btn-full {
width: 100%;
padding: 1rem;
font-size: 1rem;
}
.btn-social {
background: white;
color: #333;
border: 1px solid #e2e8f0;
justify-content: center;
}
.btn-social:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.btn-social.google {
color: #dc2626;
}
.btn-social.microsoft {
color: #2563eb;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.gradient-text {
background: linear-gradient(45deg, #ffd700, #ff6b6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.hero-stats {
display: flex;
gap: 3rem;
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #ffd700;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
/* Earth Animation */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.earth-container {
position: relative;
width: 300px;
height: 300px;
}
.earth {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #4a90e2, #7b68ee);
position: relative;
animation: rotate 20s linear infinite;
box-shadow: 0 0 50px rgba(74, 144, 226, 0.5);
}
.earth-surface {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(34, 139, 34, 0.8) 0%, transparent 50%),
radial-gradient(circle at 70% 20%, rgba(34, 139, 34, 0.6) 0%, transparent 40%),
radial-gradient(circle at 20% 70%, rgba(34, 139, 34, 0.7) 0%, transparent 45%);
}
.satellite-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 280px;
height: 280px;
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: orbit 10s linear infinite;
}
.satellite {
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
background: #ffd700;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Features Section */
.features {
padding: 6rem 0;
background: #f8fafc;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.2rem;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
/* Light variant for dark backgrounds */
.section-header.light h2,
.section-header.light p { color: #e5e7eb; }
.section-chip {
display: inline-block;
background: rgba(59,130,246,0.15);
color: #93c5fd;
border: 1px solid rgba(147,197,253,0.25);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.feature-icon i {
font-size: 1.5rem;
color: white;
}
.feature-card h3 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
}
.feature-card p {
color: #64748b;
line-height: 1.6;
}
/* Problem/Solution/Government interactive sections */
.problem-section { padding: 4rem 0; background: #f8fafc; }
.problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.problem-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; transition:transform .2s ease, box-shadow .2s ease; }
.problem-card:hover { transform: translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.problem-icon { color:#ef4444; font-size:1.25rem; margin-bottom:.5rem; }
.solution-section { padding: 4rem 0; background: #0b1220; }
.solution-content { display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; }
.solution-features { display:grid; grid-template-columns:1fr; gap:1rem; }
.solution-feature { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; transition:transform .2s ease, box-shadow .2s ease; }
.solution-feature:hover { transform: translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.solution-feature .feature-number { background:#3b82f6; color:#fff; font-weight:700; display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; margin-bottom:.4rem; }
.ai-pipeline { display:flex; align-items:center; gap:1rem; justify-content:center; color:#e5e7eb; }
.pipeline-step { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:10px; padding:.75rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.pipeline-arrow { opacity:.6; }
.government-use-cases { padding:4rem 0; background: #0b1220; }
.gov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.gov-card { background:#0f172a; border:1px solid #1f2937; border-radius:14px; padding:1rem; color:#e5e7eb; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.gov-card:hover { transform: translateY(-6px); box-shadow:0 16px 30px rgba(0,0,0,.35); }
.gov-card .step { position:absolute; top:10px; right:12px; font-weight:700; color:#93c5fd; opacity:.9; }
.gov-card h3 { color:#fff; margin-bottom:.25rem; }
/* Government apps white cards */
.gov-apps-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.gov-app-card { background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem 1.25rem; color:#374151; box-shadow:0 4px 12px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease; }
.gov-app-card:hover { transform: translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.gov-app-card h3 { color:#1e293b; margin:.25rem 0 .5rem; }
.gov-app-card ul { padding-left:1.1rem; }
.gov-app-card li { margin: .25rem 0; }
.gov-app-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(45deg,#667eea,#764ba2); color:#fff; }
.success-stories .stories-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-top:1rem; }
.story-card { background:#0f172a; border:1px solid #1f2937; border-radius:14px; padding:1rem; color:#e5e7eb; transition:transform .2s ease, box-shadow .2s ease; }
.story-card:hover { transform: translateY(-6px); box-shadow:0 16px 30px rgba(0,0,0,.35); }
.story-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.story-logo { font-size:1.25rem; }
.story-metrics { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.story-metrics .metric { background:#111827; border:1px solid #374151; color:#cbd5e1; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; }
/* Impact Section */
.impact {
padding: 6rem 0;
background: #0b1220;
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
.impact-card {
background: #0f172a;
border: 1px solid #1f2937;
border-radius: 16px;
padding: 1.5rem;
color: #e5e7eb;
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
transition: transform .2s ease, box-shadow .2s ease;
}
.impact-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,.35); }
.impact-icon { color: #93c5fd; font-size: 1.5rem; margin-bottom: 0.75rem; }
.impact-card h3 { color: #f9fafb; margin-bottom: 0.5rem; }
.impact-card p { color: #9ca3af; margin-bottom: 0.75rem; }
.impact-metrics { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip { background: #111827; border: 1px solid #374151; color: #cbd5e1; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.8rem; animation: chipPulse 3s infinite; }
@keyframes chipPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(147,197,253,0.0);} 50% { box-shadow: 0 0 0 6px rgba(147,197,253,0.12);} }
/* Interactive cards for Problem & Solution */
.problem-grid, .solution-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.problem-card, .solution-feature {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 14px !important;
padding: 16px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.problem-card:hover, .solution-feature:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 30px rgba(0,0,0,.12) !important;
border-color: #c7d2fe !important;
}
.problem-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #eef2ff;
color: #4f46e5;
margin-bottom: 10px;
}
.feature-number {
color: #93c5fd;
font-weight: 700;
margin-bottom: 6px;
}
/* Government stories/cards */
.stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.story-card {
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 14px !important;
padding: 14px !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.story-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 30px rgba(0,0,0,.12) !important;
border-color: #c7d2fe !important;
}
.story-header {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 8px;
}
.story-logo {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #eef2ff;
}
.story-metrics {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.metric {
background: #f1f5f9;
color: #0f172a;
border-radius: 999px;
padding: 4px 8px;
font-size: 12px;
}
/* Fade-in animation utility */
.fade-in-up { opacity: 0; transform: translateY(18px); transition: all .45s ease; }
.fade-in-up.show { opacity: 1; transform: translateY(0); }
/* Applications Section */
.applications { padding: 4rem 0; background: #0b1220; }
.applications-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.app-card { background: #0f172a; border: 1px solid #1f2937; border-radius: 14px; padding: 1.25rem; color: #e5e7eb; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.app-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.app-card h3 { color: #f3f4f6; margin-bottom: 0.25rem; }
.app-card p { color: #9ca3af; }
/* Advanced Technology Section */
.tech-advanced { padding: 6rem 0; background: linear-gradient(135deg, #5b2dee 0%, #6a35d8 40%, #8a3dc5 100%); color: #e5e7eb; }
.tech-advanced-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.tech-adv-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 1.25rem; transition: transform .2s ease, box-shadow .2s ease; }
.tech-adv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.tech-adv-card h3 { color: #fff; margin-bottom: 0.5rem; }
.tech-adv-card ul { list-style: none; padding-left: 0; }
.tech-adv-card li { color: #e5e7eb; opacity: 0.9; margin: 0.4rem 0; }
/* Roadmap Section */
.roadmap {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.roadmap::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.roadmap .section-header {
text-align: center;
margin-bottom: 4rem;
}
.roadmap .section-header h2 {
color: #ffffff;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.roadmap .section-header p {
color: #b8c5d1;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
/* Interactive Roadmap Cards */
.roadmap-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.roadmap-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.roadmap-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.roadmap-card:hover::before {
opacity: 1;
}
.roadmap-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(79, 70, 229, 0.3);
}
.roadmap-card.active {
border-color: rgba(79, 70, 229, 0.5);
box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
}
.roadmap-card.active::before {
opacity: 1;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #4f46e5, #06b6d4);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: white;
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}
.card-status {
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-status.in-progress {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
.card-status.planned {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}
.card-status.future {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}
.card-status.vision {
background: linear-gradient(135deg, #ec4899, #be185d);
color: white;
box-shadow: 0 2px 10px rgba(236, 72, 153, 0.3);
}
.card-content {
position: relative;
z-index: 2;
}
.phase-number {
color: #06b6d4;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.roadmap-card h3 {
color: #ffffff;
font-size: 1.4rem;
margin-bottom: 1.5rem;
font-weight: 600;
line-height: 1.3;
}
.card-features {
list-style: none;
padding: 0;
margin: 0;
}
.card-features li {
color: #b8c5d1;
font-size: 0.9rem;
margin-bottom: 0.75rem;
padding-left: 1.2rem;
position: relative;
line-height: 1.4;
transition: color 0.3s ease;
}
.card-features li::before {
content: '→';
position: absolute;
left: 0;
color: #4f46e5;
font-weight: bold;
font-size: 0.8rem;
transition: all 0.3s ease;
}
.roadmap-card:hover .card-features li {
color: #e2e8f0;
}
.roadmap-card:hover .card-features li::before {
color: #06b6d4;
transform: translateX(2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.roadmap-cards {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.roadmap-card {
padding: 1.5rem;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.card-status {
align-self: flex-end;
}
}
.back-to-top{position:fixed;right:16px;bottom:16px;width:42px;height:42px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.25);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s ease;z-index:1200}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
/* CTA Section */
.cta {
padding: 6rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Dashboard Styles */
.dashboard-container {
display: grid;
grid-template-columns: 1fr 400px;
height: calc(100vh - 80px);
margin-top: 80px;
}
.map-section {
position: relative;
background: #f8fafc;
display: flex;
}
.left-legend {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
min-width: 140px;
}
#map {
width: 100%;
height: 100%;
z-index: 1;
}
.map-controls {
position: absolute;
top: 20px;
right: 20px;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 180px;
}
.search-container {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
max-width: 200px;
}
.search-container input {
flex: 1;
padding: 0.4rem 0.6rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 0.8rem;
min-width: 120px;
}
.search-container button {
padding: 0.4rem 0.6rem;
background: #2563eb;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
}
.layer-controls h3,
.legend h3 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #1e293b;
}
.layer-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.layer-toggle input[type="checkbox"] {
width: 14px;
height: 14px;
}
.layer-toggle label {
font-size: 0.8rem;
color: #64748b;
cursor: pointer;
}
.legend {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.4rem;
font-size: 0.8rem;
color: #64748b;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
}
.legend-color.glacial {
background: #3b82f6;
}
.legend-color.road {
background: #ef4444;
}
.legend-color.drainage {
background: #10b981;
}
.legend-color.temporary {
background: #000000;
}
/* Threat Panel */
.threat-panel {
background: white;
border-left: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.panel-header {
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.panel-header h2 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.alert-count {
font-size: 0.9rem;
color: #64748b;
}
.alert-count span {
background: #ef4444;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-weight: 600;
margin-right: 0.5rem;
}
.threat-filters {
padding: 1rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
display: flex;
gap: 1rem;
}
.threat-filters select {
flex: 1;
padding: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.9rem;
background: white;
}
.threat-list {
flex: 1;
padding: 1rem;
overflow-y: auto;
}
.threat-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.threat-card:hover {
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}
.threat-card.high {
border-left: 4px solid #ef4444;
}
.threat-card.medium {
border-left: 4px solid #f59e0b;
}
.threat-card.low {
border-left: 4px solid #10b981;
}
.threat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.threat-title {
font-weight: 600;
color: #1e293b;
font-size: 1rem;
}
.threat-level {
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.threat-level.high {
background: #fef2f2;
color: #dc2626;
}
.threat-level.medium {
background: #fffbeb;
color: #d97706;
}
.threat-level.low {
background: #f0fdf4;
color: #059669;
}
.threat-location {
color: #64748b;
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.threat-date {
color: #94a3b8;
font-size: 0.8rem;
}
.threat-description {
color: #64748b;
font-size: 0.9rem;
line-height: 1.4;
margin-top: 0.5rem;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: transparent; /* allow card shadow to be seen */
margin: 5% auto;
padding: 0;
border-radius: 12px;
width: 90%;
max-width: 720px;
position: relative;
}
/* Threat details rich card */
.threat-detail-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:0 12px 28px rgba(0,0,0,.15); }
.td-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.td-icon{ width:40px; height:40px; border-radius:10px; background:#eef2ff; color:#3b82f6; display:flex; align-items:center; justify-content:center; }
.td-icon.blue{ background:#e0f2fe; color:#0284c7; }
.td-titles h2{ font-size:1.1rem; color:#0f172a; margin:0; }
.td-sub{ color:#64748b; font-size:.9rem; }
.td-chip{ margin-left:auto; background:#111827; color:#e5e7eb; border-radius:999px; padding:.25rem .6rem; font-size:.75rem; }
.metric-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.metric-box{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.metric-box .label{ color:#64748b; font-size:.85rem; }
.metric-box .value{ color:#0f172a; font-weight:700; font-size:1.2rem; }
.metric-box.danger .value{ color:#dc2626; }
.alert-banner{ display:flex; align-items:center; gap:8px; background:#fff7ed; color:#b45309; border:1px solid #fde68a; padding:10px 12px; border-radius:10px; margin:6px 0 10px; }
.model-row{ display:flex; align-items:center; gap:8px; color:#374151; margin:8px 0; }
.confidence{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.conf-label{ color:#475569; }
.conf-bar{ grid-column:1/3; height:8px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.conf-fill{ height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); }
.conf-val{ color:#111827; font-weight:700; }
.td-actions{ display:flex; gap:10px; margin-top:12px; }
.close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: #94a3b8;
}
.close:hover {
color: #64748b;
}
/* Authentication Styles */
.auth-body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.auth-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
gap: 2rem;
}
.auth-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
}
.auth-header {
text-align: center;
margin-bottom: 2rem;
}
.auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.auth-logo i {
font-size: 2rem;
color: #2563eb;
}
.auth-logo h1 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
}
.auth-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.auth-header p {
color: #64748b;
font-size: 0.95rem;
}
.auth-form {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group i {
position: absolute;
left: 1rem;
color: #9ca3af;
z-index: 1;
}
.input-group input {
width: 100%;
padding: 0.875rem 1rem 0.875rem 2.5rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
transition: border-color 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.toggle-password {
position: absolute;
right: 1rem;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
z-index: 1;
}
.error-message {
color: #dc2626;
font-size: 0.8rem;
margin-top: 0.25rem;
}
.password-strength {
margin-top: 0.5rem;
}
.strength-bar {
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.strength-fill {
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 2px;
}
.strength-text {
font-size: 0.8rem;
font-weight: 500;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
color: #64748b;
}
.checkbox-container input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #2563eb;
}
.forgot-password {
color: #2563eb;
text-decoration: none;
font-size: 0.9rem;
}
.forgot-password:hover {
text-decoration: underline;
}
.auth-divider {
text-align: center;
margin: 1.5rem 0;
position: relative;
color: #9ca3af;
font-size: 0.9rem;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
z-index: 1;
}
.auth-divider span {
background: white;
padding: 0 1rem;
position: relative;
z-index: 2;
}
.social-login {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.auth-footer {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.auth-footer p {
color: #64748b;
font-size: 0.9rem;
}
.auth-footer a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
}
.auth-footer a:hover {
text-decoration: underline;
}
.demo-credentials {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
color: white;
max-width: 300px;
}
.demo-credentials h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.demo-item {
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.demo-item strong {
color: #ffd700;
}
.link {
color: #2563eb;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
/* Message Container */
.message-container {
position: fixed;
top: 100px;
right: 20px;
z-index: 3000;
}
.message {
background: white;
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 300px;
animation: slideIn 0.3s ease;
}
.message.success {
border-left: 4px solid #10b981;
}
.message.error {
border-left: 4px solid #ef4444;
}
.message i {
font-size: 1.2rem;
}
.message.success i {
color: #10b981;
}
.message.error i {
color: #ef4444;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Footer */
.footer {
background: #1e293b;
color: white;
padding: 4rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: #3b82f6;
margin-bottom: 1rem;
}
.footer-logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.footer-section p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.footer-section h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: white;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #3b82f6;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: #334155;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background: #3b82f6;
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid #334155;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
color: #94a3b8;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3b82f6;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.nav-actions {
display: none;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-stats {
justify-content: center;
gap: 2rem;
}
.tech-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.data-flow {
flex-direction: column;
gap: 1rem;
}
.data-arrow {
width: 2px;
height: 30px;
transform: rotate(90deg);
}
.data-arrow::after {
right: -4px;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #3b82f6;
border-left: none;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.dashboard-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 400px;
}
.left-legend {
position: relative;
top: 0;
left: 0;
transform: none;
margin: 1rem;
width: calc(100% - 2rem);
order: 2;
}
.map-controls {
position: relative;
top: 0;
right: 0;
margin: 1rem;
width: calc(100% - 2rem);
order: 1;
}
.auth-container {
flex-direction: column;
padding: 1rem;
}
.demo-credentials {
max-width: 100%;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.section-header h2 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.feature-card {
padding: 1.5rem;
}
.earth-container {
width: 250px;
height: 250px;
}
.earth {
width: 150px;
height: 150px;
}
.satellite-orbit {
width: 200px;
height: 200px;
}
.auth-card {
padding: 1.5rem;
}
}
.grid { display: grid; gap: 1rem; }
.card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.card-body { padding: 1rem; }
/* History Page Styles */
.history-container {
margin-top: 80px;
padding: 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.history-header {
margin-bottom: 2rem;
}
.history-title h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.history-title p {
color: #64748b;
font-size: 1.1rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 1rem;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.stat-card:nth-child(1) .stat-icon {
background: linear-gradient(45deg, #ef4444, #dc2626);
}
.stat-card:nth-child(2) .stat-icon {
background: linear-gradient(45deg, #3b82f6, #2563eb);
}
.stat-card:nth-child(3) .stat-icon {
background: linear-gradient(45deg, #10b981, #059669);
}
.stat-card:nth-child(4) .stat-icon {
background: linear-gradient(45deg, #8b5cf6, #7c3aed);
}
.stat-content h3 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.stat-content p {
color: #64748b;
font-size: 0.9rem;
}
.history-controls {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filter-group label {
font-weight: 500;
color: #374151;
font-size: 0.9rem;
}
.filter-group select {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.9rem;
background: white;
min-width: 120px;
}
.history-timeline {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.timeline-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
}
.timeline-controls {
display: flex;
gap: 1rem;
}
.timeline-container {
max-height: 600px;
overflow-y: auto;
}
.timeline-item {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #f3f4f6;
position: relative;
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-marker {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.5rem;
}
.timeline-item.critical .timeline-marker {
background: #dc2626;
}
.timeline-item.high .timeline-marker {
background: #ef4444;
}
.timeline-item.medium .timeline-marker {
background: #f59e0b;
}
.timeline-item.low .timeline-marker {
background: #10b981;
}
.timeline-content {
flex: 1;
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.timeline-header h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.timeline-meta {
display: flex;
gap: 1rem;
align-items: center;
}
.timeline-time {
color: #64748b;
font-size: 0.8rem;
}
.timeline-body p {
margin-bottom: 0.5rem;
color: #64748b;
font-size: 0.9rem;
}
.timeline-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
.history-map {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.map-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
}
.map-controls {
display: flex;
gap: 0.5rem;
}
.history-map-container {
height: 400px;
border-radius: 8px;
overflow: hidden;
}
.no-data {
text-align: center;
padding: 3rem;
color: #64748b;
font-size: 1.1rem;
}
.threat-detail {
max-width: 800px;
}
.threat-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.detail-section {
background: #f8fafc;
padding: 1rem;
border-radius: 8px;
}
.detail-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
}
.detail-item {
margin-bottom: 0.75rem;
padding: 0.5rem;
background: white;
border-radius: 6px;
font-size: 0.9rem;
}
.threat-description {
margin: 1.5rem 0;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
}
.threat-description h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.75rem;
}
.threat-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.modal.large .modal-content {
max-width: 900px;
width: 95%;
}
/* Responsive Design for History Page */
@media (max-width: 768px) {
.history-container {
padding: 1rem;
}
.history-title h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.history-controls {
flex-direction: column;
align-items: stretch;
}
.filter-group {
width: 100%;
}
.timeline-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.timeline-controls {
width: 100%;
justify-content: stretch;
}
.timeline-controls .btn {
flex: 1;
}
.map-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.map-controls {
width: 100%;
justify-content: stretch;
}
.map-controls .btn {
flex: 1;
}
.threat-detail-grid {
grid-template-columns: 1fr;
}
.threat-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-card {
padding: 1rem;
}
.timeline-item {
flex-direction: column;
gap: 0.5rem;
}
.timeline-marker {
align-self: flex-start;
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Loading animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content > * {
animation: fadeInUp 0.8s ease-out;
}
.hero-content > *:nth-child(2) {
animation-delay: 0.2s;
}
.hero-content > *:nth-child(3) {
animation-delay: 0.4s;
}
.hero-content > *:nth-child(4) {
animation-delay: 0.6s;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: #2563eb;
}
.nav-logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.nav-logo .logo-image {
height: 2.5rem;
margin-right: 0.5rem;
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-menu a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
color: #2563eb;
}
.nav-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.user-info {
color: #64748b;
font-weight: 500;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: 0.3s;
}
/* Buttons */
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-align: center;
justify-content: center;
}
.btn-primary {
background: linear-gradient(45deg, #2563eb, #3b82f6);
color: white;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}
.btn-outline {
background: transparent;
color: #2563eb;
border: 2px solid #2563eb;
}
.btn-outline:hover {
background: #2563eb;
color: white;
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #2563eb;
}
.btn-full {
width: 100%;
padding: 1rem;
font-size: 1rem;
}
.btn-social {
background: white;
color: #333;
border: 1px solid #e2e8f0;
justify-content: center;
}
.btn-social:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.btn-social.google {
color: #dc2626;
}
.btn-social.microsoft {
color: #2563eb;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.gradient-text {
background: linear-gradient(45deg, #ffd700, #ff6b6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.hero-stats {
display: flex;
gap: 3rem;
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #ffd700;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
/* Earth Animation */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.earth-container {
position: relative;
width: 300px;
height: 300px;
}
.earth {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #4a90e2, #7b68ee);
position: relative;
animation: rotate 20s linear infinite;
box-shadow: 0 0 50px rgba(74, 144, 226, 0.5);
}
.earth-surface {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(34, 139, 34, 0.8) 0%, transparent 50%),
radial-gradient(circle at 70% 20%, rgba(34, 139, 34, 0.6) 0%, transparent 40%),
radial-gradient(circle at 20% 70%, rgba(34, 139, 34, 0.7) 0%, transparent 45%);
}
.satellite-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 280px;
height: 280px;
border: 2px dashed rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: orbit 10s linear infinite;
}
.satellite {
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
background: #ffd700;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes orbit {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Features Section */
.features {
padding: 6rem 0;
background: #f8fafc;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.2rem;
color: #64748b;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.feature-card {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.feature-icon i {
font-size: 1.5rem;
color: white;
}
.feature-card h3 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
}
.feature-card p {
color: #64748b;
line-height: 1.6;
}
/* Technology Section */
.technology {
padding: 6rem 0;
background: white;
}
.tech-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.tech-text h2 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
}
.tech-text p {
font-size: 1.2rem;
color: #64748b;
margin-bottom: 2rem;
line-height: 1.6;
}
.tech-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.tech-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.tech-feature i {
font-size: 1.5rem;
color: #2563eb;
margin-top: 0.2rem;
}
.tech-feature h4 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.tech-feature p {
color: #64748b;
font-size: 0.95rem;
}
.tech-visual {
display: flex;
justify-content: center;
align-items: center;
}
.data-flow {
display: flex;
align-items: center;
gap: 2rem;
}
.data-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem;
background: #f8fafc;
border-radius: 15px;
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}
.data-node:hover {
border-color: #2563eb;
background: #eff6ff;
}
.data-node i {
font-size: 2rem;
color: #2563eb;
}
.data-node span {
font-weight: 600;
color: #1e293b;
font-size: 0.9rem;
}
.data-arrow {
width: 30px;
height: 2px;
background: linear-gradient(90deg, #2563eb, #3b82f6);
position: relative;
}
.data-arrow::after {
content: '';
position: absolute;
right: -5px;
top: -4px;
width: 0;
height: 0;
border-left: 8px solid #3b82f6;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* CTA Section */
.cta {
padding: 6rem 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Dashboard Styles */
.dashboard-container {
display: grid;
grid-template-columns: 1fr 400px;
height: calc(100vh - 80px);
margin-top: 80px;
}
.map-section {
position: relative;
background: #f8fafc;
display: flex;
}
.left-legend {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
min-width: 140px;
}
#map {
width: 100%;
height: 100%;
z-index: 1;
}
.map-controls {
position: absolute;
top: 20px;
right: 20px;
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 180px;
}
.search-container {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
max-width: 200px;
}
.search-container input {
flex: 1;
padding: 0.4rem 0.6rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 0.8rem;
min-width: 120px;
}
.search-container button {
padding: 0.4rem 0.6rem;
background: #2563eb;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
}
.layer-controls h3,
.legend h3 {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: #1e293b;
}
.layer-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
.layer-toggle input[type="checkbox"] {
width: 14px;
height: 14px;
}
.layer-toggle label {
font-size: 0.8rem;
color: #64748b;
cursor: pointer;
}
.legend {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.4rem;
font-size: 0.8rem;
color: #64748b;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
}
.legend-color.glacial {
background: #3b82f6;
}
.legend-color.road {
background: #ef4444;
}
.legend-color.drainage {
background: #10b981;
}
.legend-color.temporary {
background: #000000;
}
/* Threat Panel */
.threat-panel {
background: white;
border-left: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.panel-header {
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.panel-header h2 {
font-size: 1.3rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.alert-count {
font-size: 0.9rem;
color: #64748b;
}
.alert-count span {
background: #ef4444;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-weight: 600;
margin-right: 0.5rem;
}
.threat-filters {
padding: 1rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
display: flex;
gap: 1rem;
}
.threat-filters select {
flex: 1;
padding: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.9rem;
background: white;
}
.threat-list {
flex: 1;
padding: 1rem;
overflow-y: auto;
}
.threat-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1rem;
margin-bottom: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.threat-card:hover {
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}
.threat-card.high {
border-left: 4px solid #ef4444;
}
.threat-card.medium {
border-left: 4px solid #f59e0b;
}
.threat-card.low {
border-left: 4px solid #10b981;
}
.threat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.threat-title {
font-weight: 600;
color: #1e293b;
font-size: 1rem;
}
.threat-level {
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.threat-level.high {
background: #fef2f2;
color: #dc2626;
}
.threat-level.medium {
background: #fffbeb;
color: #d97706;
}
.threat-level.low {
background: #f0fdf4;
color: #059669;
}
.threat-location {
color: #64748b;
font-size: 0.9rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.threat-date {
color: #94a3b8;
font-size: 0.8rem;
}
.threat-description {
color: #64748b;
font-size: 0.9rem;
line-height: 1.4;
margin-top: 0.5rem;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 2rem;
border-radius: 12px;
width: 90%;
max-width: 600px;
position: relative;
}
.close {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: #94a3b8;
}
.close:hover {
color: #64748b;
}
/* Authentication Styles */
.auth-body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.auth-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
gap: 2rem;
}
.auth-card {
background: white;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 450px;
}
.auth-header {
text-align: center;
margin-bottom: 2rem;
}
.auth-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.auth-logo i {
font-size: 2rem;
color: #2563eb;
}
.auth-logo h1 {
font-size: 1.8rem;
font-weight: 700;
color: #1e293b;
}
.auth-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.5rem;
}
.auth-header p {
color: #64748b;
font-size: 0.95rem;
}
.auth-form {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.input-group {
position: relative;
display: flex;
align-items: center;
}
.input-group i {
position: absolute;
left: 1rem;
color: #9ca3af;
z-index: 1;
}
.input-group input {
width: 100%;
padding: 0.875rem 1rem 0.875rem 2.5rem;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 0.95rem;
transition: border-color 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.toggle-password {
position: absolute;
right: 1rem;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
z-index: 1;
}
.error-message {
color: #dc2626;
font-size: 0.8rem;
margin-top: 0.25rem;
}
.password-strength {
margin-top: 0.5rem;
}
.strength-bar {
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.strength-fill {
height: 100%;
width: 0%;
transition: all 0.3s ease;
border-radius: 2px;
}
.strength-text {
font-size: 0.8rem;
font-weight: 500;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
color: #64748b;
}
.checkbox-container input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #2563eb;
}
.forgot-password {
color: #2563eb;
text-decoration: none;
font-size: 0.9rem;
}
.forgot-password:hover {
text-decoration: underline;
}
.auth-divider {
text-align: center;
margin: 1.5rem 0;
position: relative;
color: #9ca3af;
font-size: 0.9rem;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
z-index: 1;
}
.auth-divider span {
background: white;
padding: 0 1rem;
position: relative;
z-index: 2;
}
.social-login {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.auth-footer {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.auth-footer p {
color: #64748b;
font-size: 0.9rem;
}
.auth-footer a {
color: #2563eb;
text-decoration: none;
font-weight: 500;
}
.auth-footer a:hover {
text-decoration: underline;
}
.demo-credentials {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
color: white;
max-width: 300px;
}
.demo-credentials h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
.demo-item {
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.demo-item strong {
color: #ffd700;
}
.link {
color: #2563eb;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
/* Message Container */
.message-container {
position: fixed;
top: 100px;
right: 20px;
z-index: 3000;
}
.message {
background: white;
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 300px;
animation: slideIn 0.3s ease;
}
.message.success {
border-left: 4px solid #10b981;
}
.message.error {
border-left: 4px solid #ef4444;
}
.message i {
font-size: 1.2rem;
}
.message.success i {
color: #10b981;
}
.message.error i {
color: #ef4444;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Footer */
.footer {
background: #1e293b;
color: white;
padding: 4rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: #3b82f6;
margin-bottom: 1rem;
}
.footer-logo i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.footer-section p {
color: #94a3b8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.footer-section h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: white;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #3b82f6;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: #334155;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-links a:hover {
background: #3b82f6;
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid #334155;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
color: #94a3b8;
}
.footer-links {
display: flex;
gap: 2rem;
}
.footer-links a {
color: #94a3b8;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3b82f6;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
.nav-actions {
display: none;
}
.hero-container {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.hero-title {
font-size: 2.5rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.hero-stats {
justify-content: center;
gap: 2rem;
}
.tech-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.data-flow {
flex-direction: column;
gap: 1rem;
}
.data-arrow {
width: 2px;
height: 30px;
transform: rotate(90deg);
}
.data-arrow::after {
right: -4px;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #3b82f6;
border-left: none;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.dashboard-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 400px;
}
.left-legend {
position: relative;
top: 0;
left: 0;
transform: none;
margin: 1rem;
width: calc(100% - 2rem);
order: 2;
}
.map-controls {
position: relative;
top: 0;
right: 0;
margin: 1rem;
width: calc(100% - 2rem);
order: 1;
}
.auth-container {
flex-direction: column;
padding: 1rem;
}
.demo-credentials {
max-width: 100%;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.section-header h2 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.feature-card {
padding: 1.5rem;
}
.earth-container {
width: 250px;
height: 250px;
}
.earth {
width: 150px;
height: 150px;
}
.satellite-orbit {
width: 200px;
height: 200px;
}
.auth-card {
padding: 1.5rem;
}
}
/* History Page Styles */
.history-container {
margin-top: 80px;
padding: 2rem;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.history-header {
margin-bottom: 2rem;
}
.history-title h1 {
font-size: 2.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.history-title p {
color: #64748b;
font-size: 1.1rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.stat-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 1rem;
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.stat-card:nth-child(1) .stat-icon {
background: linear-gradient(45deg, #ef4444, #dc2626);
}
.stat-card:nth-child(2) .stat-icon {
background: linear-gradient(45deg, #3b82f6, #2563eb);
}
.stat-card:nth-child(3) .stat-icon {
background: linear-gradient(45deg, #10b981, #059669);
}
.stat-card:nth-child(4) .stat-icon {
background: linear-gradient(45deg, #8b5cf6, #7c3aed);
}
.stat-content h3 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.stat-content p {
color: #64748b;
font-size: 0.9rem;
}
.history-controls {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filter-group label {
font-weight: 500;
color: #374151;
font-size: 0.9rem;
}
.filter-group select {
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 0.9rem;
background: white;
min-width: 120px;
}
.history-timeline {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.timeline-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
}
.timeline-controls {
display: flex;
gap: 1rem;
}
.timeline-container {
max-height: 600px;
overflow-y: auto;
}
.timeline-item {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #f3f4f6;
position: relative;
}
.timeline-item:last-child {
border-bottom: none;
}
.timeline-marker {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.5rem;
}
.timeline-item.critical .timeline-marker {
background: #dc2626;
}
.timeline-item.high .timeline-marker {
background: #ef4444;
}
.timeline-item.medium .timeline-marker {
background: #f59e0b;
}
.timeline-item.low .timeline-marker {
background: #10b981;
}
.timeline-content {
flex: 1;
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.timeline-header h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.timeline-meta {
display: flex;
gap: 1rem;
align-items: center;
}
.timeline-time {
color: #64748b;
font-size: 0.8rem;
}
.timeline-body p {
margin-bottom: 0.5rem;
color: #64748b;
font-size: 0.9rem;
}
.timeline-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
.history-map {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.map-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1e293b;
}
.map-controls {
display: flex;
gap: 0.5rem;
}
.history-map-container {
height: 400px;
border-radius: 8px;
overflow: hidden;
}
.no-data {
text-align: center;
padding: 3rem;
color: #64748b;
font-size: 1.1rem;
}
.threat-detail {
max-width: 800px;
}
.threat-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.detail-section {
background: #f8fafc;
padding: 1rem;
border-radius: 8px;
}
.detail-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 1rem;
}
.detail-item {
margin-bottom: 0.75rem;
padding: 0.5rem;
background: white;
border-radius: 6px;
font-size: 0.9rem;
}
.threat-description {
margin: 1.5rem 0;
padding: 1rem;
background: #f8fafc;
border-radius: 8px;
}
.threat-description h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 0.75rem;
}
.threat-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.modal.large .modal-content {
max-width: 900px;
width: 95%;
}
/* Responsive Design for History Page */
@media (max-width: 768px) {
.history-container {
padding: 1rem;
}
.history-title h1 {
font-size: 2rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.history-controls {
flex-direction: column;
align-items: stretch;
}
.filter-group {
width: 100%;
}
.timeline-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.timeline-controls {
width: 100%;
justify-content: stretch;
}
.timeline-controls .btn {
flex: 1;
}
.map-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.map-controls {
width: 100%;
justify-content: stretch;
}
.map-controls .btn {
flex: 1;
}
.threat-detail-grid {
grid-template-columns: 1fr;
}
.threat-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-card {
padding: 1rem;
}
.timeline-item {
flex-direction: column;
gap: 0.5rem;
}
.timeline-marker {
align-self: flex-start;
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Loading animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content > * {
animation: fadeInUp 0.8s ease-out;
}
.hero-content > *:nth-child(2) {
animation-delay: 0.2s;
}
.hero-content > *:nth-child(3) {
animation-delay: 0.4s;
}
.hero-content > *:nth-child(4) {
animation-delay: 0.6s;
}
/ * D e m o V i d e o S e c t i o n * /
. d e m o - s e c t i o n {
p a d d i n g : 6 r e m 0 ;
b a c k g r o u n d : # f 8 f a f c ;
}
. d e m o - v i d e o - c o n t a i n e r {
m a x - w i d t h : 8 0 0 p x ;
m a r g i n : 0 a u t o ;
t e x t - a l i g n : c e n t e r ;
}
. v i d e o - w r a p p e r {
p o s i t i o n : r e l a t i v e ;
b o r d e r - r a d i u s : 1 6 p x ;
o v e r f l o w : h i d d e n ;
b o x - s h a d o w : 0 2 0 p x 4 0 p x r g b a ( 0 , 0 , 0 , 0 . 1 5 ) ;
b a c k g r o u n d : # 0 0 0 ;
m a r g i n - b o t t o m : 2 r e m ;
}
. d e m o - v i d e o {
w i d t h : 1 0 0 % ;
h e i g h t : a u t o ;
d i s p l a y : b l o c k ;
b o r d e r - r a d i u s : 1 6 p x ;
}
. v i d e o - o v e r l a y {
p o s i t i o n : a b s o l u t e ;
t o p : 0 ;
l e f t : 0 ;
r i g h t : 0 ;
b o t t o m : 0 ;
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 4 ) ;
d i s p l a y : f l e x ;
f l e x - d i r e c t i o n : c o l u m n ;
a l i g n - i t e m s : c e n t e r ;
j u s t i f y - c o n t e n t : c e n t e r ;
c u r s o r : p o i n t e r ;
t r a n s i t i o n : a l l 0 . 3 s e a s e ;
b o r d e r - r a d i u s : 1 6 p x ;
}
. v i d e o - o v e r l a y : h o v e r {
b a c k g r o u n d : r g b a ( 0 , 0 , 0 , 0 . 6 ) ;
}
. v i d e o - o v e r l a y . h i d d e n {
o p a c i t y : 0 ;
p o i n t e r - e v e n t s : n o n e ;
}
. p l a y - b u t t o n {
w i d t h : 8 0 p x ;
h e i g h t : 8 0 p x ;
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 4 5 d e g , # 2 5 6 3 e b , # 3 b 8 2 f 6 ) ;
b o r d e r - r a d i u s : 5 0 % ;
d i s p l a y : f l e x ;
a l i g n - i t e m s : c e n t e r ;
j u s t i f y - c o n t e n t : c e n t e r ;
m a r g i n - b o t t o m : 1 r e m ;
t r a n s i t i o n : a l l 0 . 3 s e a s e ;
b o x - s h a d o w : 0 8 p x 2 5 p x r g b a ( 3 7 , 9 9 , 2 3 5 , 0 . 4 ) ;
}
. p l a y - b u t t o n : h o v e r {
t r a n s f o r m : s c a l e ( 1 . 1 ) ;
b o x - s h a d o w : 0 1 2 p x 3 5 p x r g b a ( 3 7 , 9 9 , 2 3 5 , 0 . 6 ) ;
}
. p l a y - b u t t o n i {
f o n t - s i z e : 2 r e m ;
c o l o r : w h i t e ;
m a r g i n - l e f t : 4 p x ;
}
. v i d e o - i n f o h 3 {
c o l o r : w h i t e ;
f o n t - s i z e : 1 . 5 r e m ;
f o n t - w e i g h t : 6 0 0 ;
m a r g i n - b o t t o m : 0 . 5 r e m ;
}
. v i d e o - i n f o p {
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 9 ) ;
f o n t - s i z e : 1 r e m ;
}
. v i d e o - c o n t r o l s {
d i s p l a y : f l e x ;
g a p : 1 r e m ;
j u s t i f y - c o n t e n t : c e n t e r ;
f l e x - w r a p : w r a p ;
}
. v i d e o - c o n t r o l s . b t n {
p a d d i n g : 0 . 7 5 r e m 1 . 5 r e m ;
f o n t - s i z e : 0 . 9 r e m ;
}
/ * V i d e o l o a d i n g s t a t e s * /
. v i d e o - l o a d i n g {
p o s i t i o n : r e l a t i v e ;
}
. v i d e o - l o a d i n g : : a f t e r {
c o n t e n t : ' ' ;
p o s i t i o n : a b s o l u t e ;
t o p : 5 0 % ;
l e f t : 5 0 % ;
w i d t h : 4 0 p x ;
h e i g h t : 4 0 p x ;
m a r g i n : - 2 0 p x 0 0 - 2 0 p x ;
b o r d e r : 3 p x s o l i d r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 3 ) ;
b o r d e r - t o p : 3 p x s o l i d # 2 5 6 3 e b ;
b o r d e r - r a d i u s : 5 0 % ;
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
}
@ k e y f r a m e s s p i n {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
}
/ * R e s p o n s i v e v i d e o * /
@ m e d i a ( m a x - w i d t h : 7 6 8 p x ) {
. d e m o - v i d e o - c o n t a i n e r {
m a r g i n : 0 1 r e m ;
}
. p l a y - b u t t o n {
w i d t h : 6 0 p x ;
h e i g h t : 6 0 p x ;
}
. p l a y - b u t t o n i {
f o n t - s i z e : 1 . 5 r e m ;
}
. v i d e o - i n f o h 3 {
f o n t - s i z e : 1 . 2 r e m ;
}
. v i d e o - c o n t r o l s {
f l e x - d i r e c t i o n : c o l u m n ;
a l i g n - i t e m s : c e n t e r ;
}
. v i d e o - c o n t r o l s . b t n {
w i d t h : 1 0 0 % ;
m a x - w i d t h : 2 0 0 p x ;
}
}
/ * G o o g l e O A u t h L o a d i n g A n i m a t i o n * /
@ k e y f r a m e s s p i n {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
}
. f a - s p i n n e r {
a n i m a t i o n : s p i n 1 s l i n e a r i n f i n i t e ;
}
/ * G o o g l e O A u t h B u t t o n S t a t e s * /
. b t n - s o c i a l . g o o g l e : d i s a b l e d {
o p a c i t y : 0 . 7 ;
c u r s o r : n o t - a l l o w e d ;
}
. b t n - s o c i a l . g o o g l e : d i s a b l e d : h o v e r {
b a c k g r o u n d : # f 8 f a f c ;
b o r d e r - c o l o r : # c b d 5 e 1 ;
t r a n s f o r m : n o n e ;
}