108 lines
1.8 KiB
CSS
108 lines
1.8 KiB
CSS
:root {
|
|
--primary-bg: #1a1a1a;
|
|
--secondary-bg: #2d2d2d;
|
|
--accent: #00ff9d;
|
|
--accent-hover: #00e68e;
|
|
--hazard: #ff9f43;
|
|
--danger: #ee5253;
|
|
--text-light: #f8f9fa;
|
|
--text-muted: #adb5bd;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--primary-bg);
|
|
color: var(--text-light);
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.font-heading {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
.text-accent {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.bg-secondary-dark {
|
|
background-color: var(--secondary-bg);
|
|
}
|
|
|
|
.btn-accent {
|
|
background-color: var(--accent);
|
|
color: #1a1a1a;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-accent:hover {
|
|
background-color: var(--accent-hover);
|
|
color: #1a1a1a;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 255, 157, 0.3);
|
|
}
|
|
|
|
.border-accent {
|
|
border-color: var(--accent) !important;
|
|
}
|
|
|
|
.border-dashed {
|
|
border-style: dashed !important;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.animate-glow {
|
|
animation: glow 3s infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px rgba(0, 255, 157, 0.2);
|
|
}
|
|
to {
|
|
text-shadow: 0 0 30px rgba(0, 255, 157, 0.6);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.upload-zone {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.upload-zone:hover .border-dashed {
|
|
border-color: var(--accent) !important;
|
|
background-color: rgba(0, 255, 157, 0.05);
|
|
}
|
|
|
|
.table-dark {
|
|
background-color: var(--secondary-bg);
|
|
}
|
|
|
|
.table-secondary-dark {
|
|
background-color: #333;
|
|
}
|
|
|
|
.hero-section {
|
|
background: radial-gradient(circle at top right, rgba(0, 255, 157, 0.1), transparent);
|
|
}
|
|
|
|
.result-card {
|
|
animation: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} |