File size: 2,995 Bytes
a812b4e 2880a16 a812b4e 2880a16 a812b4e 2880a16 a812b4e 2880a16 a812b4e 2880a16 a812b4e 2880a16 a812b4e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/* Global & Reset */
:root {
--color-primary: #22c55e; /* Green */
--color-secondary: #f97316; /* Orange */
--color-void: #050505;
--color-void-light: #0a0a0a;
--color-gold: #ffd700;
--color-red: #ef4444;
}
body {
background-color: var(--color-void);
color: #e5e5e5;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-void);
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #444;
}
/* Sacred Geometry Patterns (SVG Backgrounds) */
.pattern-metatron {
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z' fill='none' stroke='%2322c55e' stroke-width='0.5'/%3E%3Cpath d='M50 0 L6.7 25 M50 0 L93.3 25 M50 100 L6.7 75 M50 100 L93.3 75 M6.7 25 L6.7 75 M93.3 25 L93.3 75 M50 0 L50 100 M6.7 25 L93.3 75 M93.3 25 L6.7 75' stroke='%2322c55e' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 200px 200px;
animation: rotateSlow 120s linear infinite;
}
.pattern-flower {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='10' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='50' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='50' cy='30' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='12.7' cy='17.3' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3Ccircle cx='47.3' cy='42.7' r='10' fill='none' stroke='%23ffd700' stroke-width='0.5'/%3E%3C/svg%3E");
background-size: 120px 120px;
animation: rotateReverse 240s linear infinite;
}
@keyframes rotateSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rotateReverse {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
/* Utility Animations */
.animate-pulse-gold {
animation: pulse-gold 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-gold {
0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--color-gold); }
50% { opacity: .7; text-shadow: 0 0 2px var(--color-gold); }
}
/* Glassmorphism Helpers */
.glass-panel {
background: rgba(10, 10, 10, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
} |