121 lines
2.9 KiB
CSS
121 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-maroon: #188754;
|
|
--color-maroon-dark: #0c5030;
|
|
--color-maroon-light: #2ea670;
|
|
--color-gold: #d8c396;
|
|
--color-gold-light: #e4d7bc;
|
|
--color-gold-dark: #bc9e65;
|
|
--color-wood: #1e1412;
|
|
--color-stone: #3A3B3C;
|
|
--color-brass: #d8c396;
|
|
--color-orange: #d8c396;
|
|
--color-darkbg: #050c08; /* Dark green-cocoa tone background */
|
|
--color-darkbg-light: #0d1e14;
|
|
|
|
--font-serif: var(--font-cinzel);
|
|
--font-sans: var(--font-montserrat);
|
|
|
|
/* Custom breakpoint: show desktop nav above 992px */
|
|
--breakpoint-desk: 62rem; /* 992px */
|
|
}
|
|
|
|
:root {
|
|
--background: #FAF7F2; /* Premium warm ivory background */
|
|
--foreground: #1c2d24; /* Dark forest green-black text */
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans), sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-maroon);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--background);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-gold);
|
|
}
|
|
|
|
/* Custom transitions and glow effects */
|
|
.text-glow {
|
|
text-shadow: 0 0 10px rgba(24, 135, 84, 0.15), 0 0 20px rgba(24, 135, 84, 0.05);
|
|
}
|
|
|
|
.gold-border {
|
|
border-image: linear-gradient(to right, #bc9e65, #d8c396, #e4d7bc, #d8c396, #bc9e65) 1;
|
|
}
|
|
|
|
.brass-glow {
|
|
box-shadow: 0 0 15px rgba(216, 195, 150, 0.2), inset 0 0 15px rgba(216, 195, 150, 0.1);
|
|
}
|
|
|
|
.diya-flame {
|
|
filter: drop-shadow(0 0 12px rgba(230, 126, 34, 0.8)) drop-shadow(0 0 25px rgba(216, 195, 150, 0.6));
|
|
animation: flicker 2s infinite alternate;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0% { transform: scale(1) rotate(-1deg); opacity: 0.95; }
|
|
20% { transform: scale(1.05) rotate(1deg); opacity: 1; }
|
|
40% { transform: scale(0.95) rotate(-2deg); opacity: 0.9; }
|
|
60% { transform: scale(1.1) rotate(2deg); opacity: 1; }
|
|
80% { transform: scale(1) rotate(-1deg); opacity: 0.95; }
|
|
100% { transform: scale(1.05) rotate(0deg); opacity: 1; }
|
|
}
|
|
|
|
.custom-cursor {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2.5px solid #188754; /* Green accent cursor */
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.custom-cursor-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #188754;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Hide default cursor on desktop */
|
|
@media (min-width: 1024px) {
|
|
body, a, button, select, input, textarea {
|
|
cursor: none;
|
|
}
|
|
}
|
|
|
|
/* Glassmorphism - Premium light layout */
|
|
.glass {
|
|
background: rgba(253, 251, 247, 0.85);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(24, 135, 84, 0.18);
|
|
}
|
|
|
|
/* Hide custom cursor on touchscreens */
|
|
@media (pointer: coarse) {
|
|
.custom-cursor-container {
|
|
display: none !important;
|
|
}
|
|
}
|