www_projectmycelium_io/poc_threefold/static/css/index.css

103 lines
1.7 KiB
CSS
Raw Permalink Normal View History

2024-11-15 13:01:00 +00:00
/* Hero Section Styles */
.hero-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 80vh;
padding: 2rem;
background-color: var(--body-background);
color: var(--body-text);
}
.hero-title {
font-family: 'Inter', sans-serif;
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 2rem;
max-width: 900px;
letter-spacing: -0.02em;
text-transform: none;
}
.hero-description {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 2rem;
max-width: 800px;
color: var(--body-text);
opacity: 0.9;
}
.hero-tagline {
font-size: 1.5rem;
margin-bottom: 3rem;
font-weight: 500;
}
.hero-tagline strong {
font-weight: 700;
}
.hero-buttons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.btn {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
text-transform: none;
border: none;
}
.btn-primary {
background-color: white;
color: var(--body-background);
}
.btn-primary:hover {
background-color: #f0f0f0;
}
.btn-secondary {
background-color: transparent;
color: var(--body-text);
border: 1px solid var(--body-text);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1.1rem;
}
.hero-tagline {
font-size: 1.25rem;
}
.hero-buttons {
flex-direction: column;
}
.btn {
width: 100%;
}
}