174 lines
2.9 KiB
CSS
174 lines
2.9 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Base styles */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Gradient text utility (cross-browser) */
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
background-color: #072C21;
|
|
color: #F5F2E9;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Playfair Display', serif;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #072C21;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #C59D59;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #D4AF37;
|
|
}
|
|
|
|
/* Custom animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200px 0;
|
|
}
|
|
100% {
|
|
background-position: calc(200px + 100%) 0;
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-fadeInLeft {
|
|
animation: fadeInLeft 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-fadeInRight {
|
|
animation: fadeInRight 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 2s infinite linear;
|
|
background: linear-gradient(to right, transparent 0%, rgba(197, 157, 89, 0.4) 50%, transparent 100%);
|
|
background-size: 200px 100%;
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
.focus-visible:focus {
|
|
outline: 2px solid #C59D59;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Selection styling */
|
|
::selection {
|
|
background-color: rgba(197, 157, 89, 0.3);
|
|
color: #F5F2E9;
|
|
}
|
|
|
|
/* Backdrop blur fix for Firefox */
|
|
@supports not (backdrop-filter: blur(10px)) {
|
|
.backdrop-blur-sm {
|
|
background-color: rgba(7, 44, 33, 0.8);
|
|
}
|
|
.backdrop-blur-md {
|
|
background-color: rgba(7, 44, 33, 0.85);
|
|
}
|
|
.backdrop-blur-lg {
|
|
background-color: rgba(7, 44, 33, 0.9);
|
|
}
|
|
}
|
|
|
|
/* Loading state */
|
|
.loading {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: linear-gradient(90deg, transparent, rgba(197, 157, 89, 0.4), transparent);
|
|
transform: translateX(-100%);
|
|
animation: loading 1.5s infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|