154 lines
3.3 KiB
CSS
154 lines
3.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-heading: 'Inter', system-ui, sans-serif;
|
|
--font-body: 'Inter', system-ui, sans-serif;
|
|
|
|
--color-primary: #001a4d; /* Deep Blue */
|
|
--color-primary-dark: #000d26;
|
|
--color-primary-light: #e6ebf5;
|
|
|
|
--color-secondary: #003d82;
|
|
--color-secondary-light: #0056b3;
|
|
|
|
--color-accent: #82ed20; /* Sustainability Green */
|
|
--color-accent-dark: #6bc41a;
|
|
--color-accent-light: #f0f9e6;
|
|
|
|
--color-neutral: #f8f9fa;
|
|
--color-neutral-light: #ffffff;
|
|
--color-neutral-dark: #0a0a0a;
|
|
--color-neutral-medium: #e5e7eb;
|
|
|
|
--color-text-primary: #111827;
|
|
--color-text-secondary: #4b5563;
|
|
--color-text-light: #9ca3af;
|
|
|
|
--color-success: #10b981;
|
|
--color-warning: #f59e0b;
|
|
--color-danger: #ef4444;
|
|
--color-info: #3b82f6;
|
|
|
|
--animate-fade-in: fade-in 0.5s ease-out;
|
|
--animate-slide-up: slide-up 0.6s ease-out;
|
|
--animate-slow-zoom: slow-zoom 20s linear infinite;
|
|
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes slide-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes slow-zoom {
|
|
from { transform: scale(1); }
|
|
to { transform: scale(1.1); }
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply text-text-primary bg-neutral-light antialiased;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-heading font-bold tracking-tight;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.glass-panel {
|
|
@apply bg-white/80 backdrop-blur-md border border-white/20 shadow-lg;
|
|
}
|
|
.image-overlay-gradient {
|
|
@apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent;
|
|
}
|
|
.premium-card {
|
|
@apply bg-white rounded-xl border border-neutral-medium shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
|
|
}
|
|
}
|
|
|
|
/* Custom Utilities */
|
|
@utility touch-target {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@utility mobile-hidden {
|
|
@media (max-width: 767px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility tablet-hidden {
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility desktop-hidden {
|
|
@media (min-width: 1024px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility mobile-only {
|
|
@media (min-width: 768px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility tablet-only {
|
|
@media (max-width: 767px), (min-width: 1024px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility desktop-only {
|
|
@media (max-width: 1023px) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@utility fluid-spacing {
|
|
padding: clamp(1rem, 3vw, 3rem);
|
|
margin: clamp(0.5rem, 2vw, 2rem);
|
|
}
|
|
|
|
@utility text-start-mobile {
|
|
@media (max-width: 767px) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@utility text-center-mobile {
|
|
@media (max-width: 767px) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@utility text-end-mobile {
|
|
@media (max-width: 767px) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
@utility grid-mobile-stacked {
|
|
@media (max-width: 767px) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@utility safe-area-p {
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|