138 lines
2.4 KiB
CSS
138 lines
2.4 KiB
CSS
/* Google Fonts Import */
|
|
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Merriweather:wght@700&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #2A9D8F;
|
|
--secondary-color: #E9C46A;
|
|
--background-color: #F4F1DE;
|
|
--surface-color: #FFFFFF;
|
|
--text-color: #264653;
|
|
--heading-font: 'Merriweather', serif;
|
|
--body-font: 'Lato', sans-serif;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--body-font);
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6, .navbar-brand, .hero-title {
|
|
font-family: var(--heading-font);
|
|
}
|
|
|
|
.section-title {
|
|
color: var(--primary-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.navbar {
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.75rem;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
.nav-link {
|
|
font-weight: 700;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.hero-section {
|
|
background: url('https://picsum.photos/seed/community/1600/900') no-repeat center center;
|
|
background-size: cover;
|
|
color: white;
|
|
padding: 10rem 0;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.hero-section .container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 4rem;
|
|
font-weight: 700;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
border-radius: 9999px;
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 700;
|
|
border: none;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, var(--primary-color), #89CDBF);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: var(--secondary-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.hero-cta .btn {
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.step {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.step h3 {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
#contact form .form-control {
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
footer {
|
|
background-color: var(--text-color);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--secondary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.img-fluid {
|
|
border-radius: 0.5rem;
|
|
} |