:root {
--background: 220 20% 97%;
--foreground: 220 30% 15%;
--card: 0 0% 100%;
--card-foreground: 220 30% 15%;
--popover: 0 0% 100%;
--popover-foreground: 220 30% 15%;
--primary: 220 40% 20%;
--primary-foreground: 45 30% 96%;
--secondary: 40 20% 94%;
--secondary-foreground: 220 30% 20%;
--muted: 220 15% 92%;
--muted-foreground: 220 15% 45%;
--accent: 38 70% 50%;
--accent-foreground: 220 40% 12%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 220 15% 88%;
--input: 220 15% 88%;
--ring: 38 70% 50%;
--radius: 0.75rem;
--hero-gradient: linear-gradient(135deg, hsl(220 40% 12%) 0%, hsl(220 35% 22%) 50%, hsl(220 30% 28%) 100%);
--card-shadow: 0 4px 24px -4px hsl(220 30% 15% / 0.08);
--card-shadow-hover: 0 12px 40px -8px hsl(220 30% 15% / 0.15);
--gold-glow: 0 0 40px hsl(38 70% 50% / 0.3);
--font-display: 'Playfair Display', serif;
--font-body: 'Inter', sans-serif;
} * {
border-color: hsl(var(--border));
}
html {
scroll-behavior: smooth;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
} .text-gradient {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-image: linear-gradient(135deg, hsl(38 70% 55%) 0%, hsl(38 50% 65%) 100%);
}
.hero-gradient {
background: var(--hero-gradient);
}
.card-elevated {
box-shadow: var(--card-shadow);
transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.card-elevated:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-4px);
}
.section-padding {
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (min-width: 768px) {
.section-padding {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
@media (min-width: 1024px) {
.section-padding {
padding-top: 8rem;
padding-bottom: 8rem;
}
}
.container-narrow {
max-width: 72rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.container-narrow {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.container-narrow {
padding-left: 2rem;
padding-right: 2rem;
}
} .btn-hero {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
height: 3.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
font-size: 1.125rem;
font-weight: 500;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
transition: all 0.3s;
text-decoration: none;
cursor: pointer;
border: none;
}
.btn-hero:hover {
background-color: hsl(38 70% 43%);
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
transform: translateY(-2px);
color: hsl(var(--accent-foreground));
text-decoration: none;
}
.btn-hero-outline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
border: 2px solid hsl(45 30% 96% / 0.3);
color: hsl(var(--primary-foreground));
background: transparent;
height: 3.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
font-size: 1.125rem;
font-weight: 500;
transition: all 0.3s;
text-decoration: none;
cursor: pointer;
}
.btn-hero-outline:hover {
background-color: hsl(45 30% 96% / 0.1);
border-color: hsl(45 30% 96% / 0.5);
color: hsl(var(--primary-foreground));
text-decoration: none;
}
.btn-gold {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
transition: all 0.3s;
text-decoration: none;
font-weight: 500;
cursor: pointer;
border: none;
padding: 0.5rem 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.btn-gold:hover {
background-color: hsl(38 70% 43%);
color: hsl(var(--accent-foreground));
text-decoration: none;
}
.btn-gold-lg {
height: 3rem;
padding-left: 2rem;
padding-right: 2rem;
font-size: 1rem;
}
.btn-gold-sm {
height: 2.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
}
.btn-default {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
height: 3rem;
padding-left: 2rem;
padding-right: 2rem;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s;
text-decoration: none;
cursor: pointer;
border: none;
}
.btn-default:hover {
background-color: hsl(220 40% 28%);
color: hsl(var(--primary-foreground));
text-decoration: none;
} .animate-fade-up {
animation: fadeUp 0.8s ease-out forwards;
opacity: 0;
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out forwards;
opacity: 0;
}
.animate-scale-in {
animation: scaleIn 0.5s ease-out forwards;
opacity: 0;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounceY {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(10px); }
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.scroll-indicator {
animation: bounceY 2s ease-in-out infinite;
} [x-cloak] { display: none !important; } .form-success {
background-color: #dcfce7;
border: 1px solid #16a34a;
color: #15803d;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
font-size: 0.9375rem;
}
.form-error {
background-color: #fee2e2;
border: 1px solid #dc2626;
color: #b91c1c;
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1rem;
font-size: 0.9375rem;
} .gallery-thumbs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar {
display: none;
}