86 lines
2.4 KiB
CSS
86 lines
2.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Great+Vibes&family=Inter:wght@300;400;500;600&display=swap');
|
|
|
|
/* ─── CSS Custom Properties ─────────────────────────────── */
|
|
:root {
|
|
--brand-purple: #5B1E8C;
|
|
--brand-purple-dark: #3A1260;
|
|
--brand-purple-mid: #7B3DB8;
|
|
--brand-lavender: #DCC6F2;
|
|
--brand-light-lavender:#EFE4FA;
|
|
--brand-card: #F8F2FD;
|
|
--brand-gold: #D4A24C;
|
|
--brand-gold-light: #FFD36B;
|
|
--brand-gold-core: #FFF3C4;
|
|
--brand-text: #2D0D52;
|
|
--brand-muted: #7B5A9E;
|
|
--brand-border: #D5BEF0;
|
|
/* */
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-serif: 'Cormorant Garamond', serif;
|
|
--font-display: 'Cinzel', serif;
|
|
--font-script: 'Great Vibes', cursive;
|
|
}
|
|
/* */
|
|
/* ─── Reset / Base ───────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--brand-light-lavender);
|
|
color: var(--brand-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-serif);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* ─── Keyframe Animations ────────────────────────────────── */
|
|
@keyframes flame-flicker {
|
|
0%, 100% { transform: scale(1) translateY(0); opacity: 0.9; }
|
|
50% { transform: scale(1.05) translateY(-2px); opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(24px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ─── Global Utility Classes ─────────────────────────────── */
|
|
.animate-flame {
|
|
animation: flame-flicker 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.font-script {
|
|
font-family: var(--font-script);
|
|
}
|
|
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
.font-serif {
|
|
font-family: var(--font-serif);
|
|
}
|