211 lines
No EOL
3.1 KiB
CSS
211 lines
No EOL
3.1 KiB
CSS
/* =========================
|
|
FOOTER
|
|
========================= */
|
|
|
|
.footer {
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
border-top: 1px solid var(--color-line);
|
|
|
|
padding-block: var(--space-2xl) var(--space-lg);
|
|
}
|
|
|
|
.watermark {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -0.34em;
|
|
|
|
z-index: 0;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
font-size: clamp(120px, 22vw, 360px);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.06em;
|
|
|
|
color: transparent;
|
|
|
|
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
|
|
|
|
white-space: nowrap;
|
|
|
|
pointer-events: none;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
/* =========================
|
|
CTA
|
|
========================= */
|
|
|
|
.cta {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.eyebrow {
|
|
color: var(--color-muted);
|
|
|
|
font-size: var(--fs-overline);
|
|
font-weight: 500;
|
|
letter-spacing: var(--ls-overline);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.title {
|
|
max-width: 18em;
|
|
|
|
font-size: var(--fs-display);
|
|
font-weight: 800;
|
|
line-height: var(--lh-tight);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.titleAccent {
|
|
color: var(--color-faint);
|
|
}
|
|
|
|
.text {
|
|
max-width: var(--text-measure);
|
|
|
|
color: var(--color-muted);
|
|
|
|
font-size: var(--fs-body);
|
|
line-height: var(--lh-body);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
gap: var(--space-md);
|
|
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.button,
|
|
.buttonGhost {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
gap: var(--space-xs);
|
|
|
|
padding: var(--space-sm) var(--space-lg);
|
|
|
|
border-radius: 100px;
|
|
|
|
font-size: var(--fs-body);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
|
|
transition:
|
|
transform 0.3s ease,
|
|
box-shadow 0.3s ease,
|
|
background 0.3s ease,
|
|
color 0.3s ease,
|
|
border-color 0.3s ease;
|
|
}
|
|
|
|
.button {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-2px);
|
|
|
|
box-shadow: 0 18px 40px rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.buttonGhost {
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.buttonGhost:hover {
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
|
|
background: rgba(255, 255, 255, 0.06);
|
|
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* =========================
|
|
BOTTOM ROW
|
|
========================= */
|
|
|
|
.bottom {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
gap: var(--space-md);
|
|
|
|
margin-top: var(--space-2xl);
|
|
padding-top: var(--space-md);
|
|
|
|
border-top: 1px solid var(--color-line);
|
|
}
|
|
|
|
.wordmark {
|
|
font-size: var(--fs-logo);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.06em;
|
|
}
|
|
|
|
.nav ul {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
gap: var(--space-md);
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
}
|
|
|
|
.nav a {
|
|
color: var(--color-muted);
|
|
|
|
font-size: var(--fs-small);
|
|
text-decoration: none;
|
|
|
|
transition: color 0.25s ease;
|
|
}
|
|
|
|
.nav a:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.copy {
|
|
color: var(--color-faint);
|
|
|
|
font-size: var(--fs-caption);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.bottom {
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
} |