` (with
`.cover-eyebrow` + `.cover-title` + optional `.cover-subtitle`) +
`
` inside.
The landing (index.html) layers a canvas + halo + wordmark inside
the same `.cover` container — they sit above `.cover-bg`'s grid and
gradients via z-index.
========================================================================
*/
.cover {
min-height: 100vh;
min-height: 100dvh;
background: var(--dark);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 72px 88px;
position: relative;
overflow: hidden;
}
/* Atmospheric base — three soft pools blooming on the dark ground. */
.cover-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 60% 50% at 78% 20%, rgba(86, 103, 72, 0.11) 0%, transparent 65%),
radial-gradient(ellipse 42% 40% at 22% 80%, rgba(176, 78, 40, 0.08) 0%, transparent 55%),
radial-gradient(ellipse 30% 30% at 50% 50%, rgba(86, 103, 72, 0.04) 0%, transparent 70%);
}
/* 56px cream grid — architectural texture sitting on top of the orbs
but below content. */
.cover::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(var(--cream-rgb), 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--cream-rgb), 0.022) 1px, transparent 1px);
background-size: 56px 56px;
}
.cover-content {
position: relative;
z-index: 2;
max-width: 900px;
}
.cover-eyebrow {
font-family: var(--f-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--moss-lt);
margin-bottom: 48px;
}
.cover-title {
font-family: var(--f-display);
font-size: clamp(64px, 10vw, 136px);
font-weight: 300;
line-height: 0.88;
letter-spacing: -0.025em;
color: var(--cream);
margin-bottom: 48px;
}
.cover-title em {
font-style: italic;
color: var(--terra-lt);
}
.cover-subtitle {
font-family: var(--f-display);
font-size: clamp(19px, 2.2vw, 28px);
font-weight: 300;
font-style: italic;
color: var(--cream-soft);
max-width: 620px;
line-height: 1.55;
}
.cover-subtitle em {
font-style: italic;
color: rgba(var(--cream-rgb), 0.85); /* slightly lifted accent on the sub */
/* override below for the terra emphasis when paired with terra-lt */
}
/* When the subtitle uses an italic em as a *terra* accent (instead of
just a brightness lift), authors can apply this modifier on the em. */
.cover-subtitle em {
color: var(--terra-lt);
opacity: 0.88;
}
.cover-meta {
position: absolute;
bottom: 88px;
right: 72px;
z-index: 2;
text-align: right;
}
.cover-meta-line {
font-family: var(--f-mono);
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(var(--cream-rgb), 0.18);
line-height: 2;
}
@media (max-width: 720px) {
.cover { padding: 0 28px 64px; }
.cover-meta { right: 28px; bottom: 56px; }
.cover-eyebrow { margin-bottom: 32px; }
.cover-title { margin-bottom: 32px; }
}