.hero {
position: relative;
min-height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--ifm-background-color);
}
.header {
position: relative;
z-index: 2;
text-align: center;
padding: 2rem;
flex: 0 0 auto;
min-height: 33vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.header.visible {
opacity: 1;
transform: translateY(0);
}
.headerFade {
position: relative;
z-index: 1;
height: 60px;
background: linear-gradient(to bottom, var(--ifm-background-color), transparent);
margin-top: -20px;
pointer-events: none;
}
.title {
font-family: var(--ifm-heading-font-family);
font-size: clamp(2.5rem, 7vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.04em;
margin-bottom: 0.75rem;
line-height: 1;
background: linear-gradient(120deg, #2C2416 0%, #0891B2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme='dark'] .title {
background: linear-gradient(120deg, #e8dfc8 0%, #06d6f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tagline {
font-size: 1.1rem;
color: var(--ifm-font-color-secondary);
max-width: 580px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.metrics {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.metric {
display: inline-flex;
align-items: center;
text-decoration: none;
transition: opacity 0.2s;
}
.metric:hover {
opacity: 0.8;
}
.shieldBadge {
height: 22px;
border-radius: 4px;
}
.ctas {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1.25rem;
}
.ctaPrimary {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
background: var(--ifm-color-primary);
color: #ffffff;
text-decoration: none;
transition: background 0.2s, transform 0.15s;
}
.ctaPrimary:hover {
background: var(--ifm-color-primary-light);
transform: translateY(-1px);
text-decoration: none;
color: #ffffff;
}
[data-theme='dark'] .ctaPrimary {
color: #0d1117;
}
[data-theme='dark'] .ctaPrimary:hover {
color: #0d1117;
}
.ctaSecondary {
display: inline-flex;
align-items: center;
padding: 0.6rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
background: transparent;
color: var(--ifm-font-color-secondary);
border: 1px solid var(--ifm-color-emphasis-300);
text-decoration: none;
transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.ctaSecondary:hover {
border-color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
transform: translateY(-1px);
text-decoration: none;
}
.registryLinks {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.registryLink {
font-size: 0.8rem;
color: var(--ifm-font-color-secondary);
opacity: 0.5;
text-decoration: none;
transition: color 0.2s, opacity 0.2s;
}
.registryLink:hover {
color: var(--ifm-color-primary);
opacity: 1;
text-decoration: none;
}
.registrySep {
color: var(--ifm-color-emphasis-300);
font-size: 0.7rem;
}