harmony-unification / style.css
nkjoy's picture
์ „์ œ์ ์œผ๋กœ ํ”„๋ฆฌ๋ฏธ์—„ ๋””์ž์ธ์œผ๋กœ ํ•ด์ค˜ , ๊ธ€์ž์ฒด๋„ ์ด์œ๊ฑธ๋กœ ๋ณ€๊ฒฝ๋ถ€ํƒ
2ab122f verified
/* Font faces */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');
/* Base styles */
:root {
--primary-color: #8B0000;
--secondary-color: #D4AF37;
--accent-color: #2C3E50;
--light-color: #F8F8F8;
--dark-color: #1A1A1A;
--transition: all 0.3s ease;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.7;
color: #333;
background-color: #FAFAFA;
}
.font-serif {
font-family: 'Playfair Display', serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: var(--accent-color);
}
/* Custom animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 1s ease-out;
}
.fade-in-up {
animation: fadeInUp 1s ease-out;
}
/* Custom components */
.hero-overlay {
background: linear-gradient(135deg, rgba(139, 0, 0, 0.85) 0%, rgba(44, 62, 80, 0.7) 100%);
}
.section-title {
position: relative;
padding-bottom: 15px;
margin-bottom: 30px;
}
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
border-radius: 3px;
}
.card {
background: #FFFFFF;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: var(--transition);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #A52A2A 100%);
color: white;
padding: 12px 30px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: var(--transition);
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.2);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(139, 0, 0, 0.3);
color: white;
}
/* Responsive tweaks */
@media (min-width: 1024px) {
.hero-content {
max-width: 60%;
}
}
/* Premium section styling */
.premium-section {
background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
}
.premium-section:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjAuNSIgZmlsbD0iI0Q0QUYzNyIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
}