* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: #04060e;
font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}
#scene {
position: fixed;
inset: 0;
display: block;
}
/* The blend lives on #copy, which is a direct child of , on purpose. mix-blend-mode
composites an element against the backdrop of its own stacking context - so putting it
on the headline INSIDE this fixed, centred wrapper would blend it against the wrapper's
empty background rather than against the crystal. The wrapper blends as a whole and its
children simply inherit the result. */
#copy {
position: fixed;
inset: 0;
z-index: 1;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
opacity: 1;
mix-blend-mode: difference;
text-align: center;
pointer-events: none;
user-select: none;
}
#headline {
margin: 0;
font-weight: 300;
/* 13vw is the intent; the clamp keeps it readable on a phone and stops it becoming
absurd on an ultrawide display. */
font-size: clamp(2.1rem, 13vw, 15rem);
line-height: 0.75;
letter-spacing: -0.1155em;
}
/* Each word is its own block, so the two lines are structural rather than dependent on
where the text happens to wrap at a given viewport width. */
#headline span {
display: block;
white-space: nowrap;
/* Negative tracking leaves a phantom gap after the final letter, which pushes centred
text visually left. Pulling the same amount back off the right edge re-centres it.
This must track the letter-spacing above exactly. */
margin-right: -0.1155em;
}
/* Deliberately the opposite of the headline: small and openly tracked against something
very large and very tight. */
#tagline {
margin: clamp(1.1rem, 2.8vh, 2.3rem) 0 0;
font-weight: 300;
font-size: clamp(0.74rem, 1.45vw, 1.25rem);
letter-spacing: 0.1em;
line-height: 1.4;
opacity: 0.78;
max-width: 90vw;
}
/* The call to action composites normally rather than through difference: a control has to
stay legible and obviously clickable whatever passes behind it. */
#cta {
position: fixed;
left: 50%;
bottom: clamp(1.6rem, 5.5vh, 3.75rem);
transform: translateX(-50%);
z-index: 2;
display: inline-block;
padding: 0.85em 1.9em;
font-weight: 400;
font-size: clamp(0.72rem, 1vw, 0.95rem);
letter-spacing: 0.14em;
white-space: nowrap;
text-decoration: none;
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
#cta:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.1);
}
#cta:focus-visible {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.72);
outline: 2px solid rgba(255, 255, 255, 0.65);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
#cta {
transition: none;
}
}