:root {
--ev-bg: #f6f7f9;
--ev-ink: #1b2a41;
--ev-muted: #4f5d73;
--ev-accent: #2f6f8f;
--ev-line: #d8dde5;
--ev-focus: #2f6f8f;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--ev-bg: #0e1521;
--ev-ink: #e8edf5;
--ev-muted: #a5b1c4;
--ev-accent: #8cc4dc;
--ev-line: #26344a;
--ev-focus: #8cc4dc;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--ev-bg);
color: var(--ev-ink);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1.125rem;
line-height: 1.6;
}
a {
color: var(--ev-accent);
text-underline-offset: 0.18em;
}
a:focus-visible {
outline: 3px solid var(--ev-focus);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute;
left: 1rem;
top: -4rem;
padding: 0.5rem 0.9rem;
background: var(--ev-ink);
color: var(--ev-bg);
border-radius: 0.4rem;
z-index: 10;
}
.skip-link:focus {
top: 1rem;
}
.page {
flex: 1;
display: flex;
flex-direction: column;
padding: 2rem 1rem;
}
.hero {
margin: auto;
width: 100%;
max-width: 68rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: center;
}
.hero__field {
order: -1;
width: min(100%, 24.4rem);
margin: 0 auto;
}
.hero__text {
text-align: center;
}
.hero__text {
container-type: inline-size;
}
.hero__name {
margin: 0;
font-size: clamp(2.4rem, 21cqi, 5.75rem);
font-weight: 650;
letter-spacing: -0.035em;
line-height: 1;
}
.hero__line {
margin: 1.25rem auto 0;
max-width: 22ch;
font-size: clamp(1.3rem, 3.6vw, 1.75rem);
line-height: 1.35;
text-wrap: balance;
}
.hero__by {
margin: 2.5rem 0 0;
color: var(--ev-muted);
font-size: 1rem;
letter-spacing: 0.02em;
}
.hero__by::before {
content: "";
display: inline-block;
width: 2.25rem;
height: 1px;
margin-right: 0.8rem;
vertical-align: middle;
background: currentColor;
}
@media (min-width: 52rem) {
.hero {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 3rem;
}
.hero__field {
order: 0;
width: 100%;
max-width: 36.4rem;
}
.hero__text {
text-align: left;
}
.hero__line {
margin-inline: 0;
}
}
.field {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.field line {
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
}
.field path {
fill: currentColor;
}
.vn {
transform-box: fill-box;
transform-origin: center;
transition: opacity 0.8s ease, color 0.8s ease;
}
.hero__title {
position: relative;
padding-top: 2.75rem;
}
.hero__gloss {
position: absolute;
top: 0.7rem;
left: 0;
margin: 0;
color: var(--ev-accent);
font-size: 1.35rem;
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%);
transform-origin: center bottom;
pointer-events: none;
}
.hero__gloss.is-rising {
animation: ev-gloss 5.4s cubic-bezier(0.33, 0, 0.4, 1) forwards;
}
.hero__title.is-paused .hero__gloss {
animation-play-state: paused;
}
@keyframes ev-gloss {
0% {
opacity: 0;
transform: translate(-50%, 0.35rem) scale(1);
}
15%,
35% {
opacity: 0.85;
transform: translate(-50%, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -1.8rem) scale(0.55);
}
}
.hero__name [data-part] {
transition: color 1.2s ease;
}
.hero__name .is-lit {
color: color-mix(in srgb, var(--ev-ink) 55%, var(--ev-accent));
}
.hero__field {
position: relative;
padding: 1.2rem 1.2rem 0;
}
.field__pause {
position: absolute;
top: 0;
right: 0;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
margin: 0;
padding: 0;
border: 1px solid var(--ev-line);
border-radius: 50%;
background: none;
color: var(--ev-muted);
cursor: pointer;
}
.field__pause .icon {
width: 0.75rem;
height: 0.75rem;
fill: currentColor;
}
.field__pause[aria-pressed="false"] .icon--play,
.field__pause[aria-pressed="true"] .icon--pause {
display: none;
}
.field__pause:hover {
color: var(--ev-ink);
border-color: var(--ev-muted);
}
.field__pause:focus-visible {
outline: 3px solid var(--ev-focus);
outline-offset: 2px;
}
.field__pause[hidden] {
display: none;
}
.is-paused .vn {
animation-play-state: paused;
}
.w0 {
color: var(--ev-muted);
opacity: 0.3;
}
.w1 {
color: var(--ev-muted);
opacity: 0.55;
}
.w2 {
color: var(--ev-accent);
opacity: 0.75;
}
.w3 {
color: var(--ev-accent);
}
.w3 line {
stroke-width: 2.1;
}
@media (prefers-reduced-motion: no-preference) {
.vn {
animation-name: ev-fade;
animation-duration: 1.4s, 2.2s;
animation-timing-function: ease-out, cubic-bezier(0.22, 0.8, 0.25, 1);
animation-fill-mode: backwards;
}
.d0 { animation-delay: 0.1s; }
.d1 { animation-delay: 0.3s; }
.d2 { animation-delay: 0.5s; }
.d3 { animation-delay: 0.7s; }
.d4 { animation-delay: 0.9s; }
.mn150 { animation-name: ev-fade, ev-mn150; }
.mn110 { animation-name: ev-fade, ev-mn110; }
.mn75 { animation-name: ev-fade, ev-mn75; }
.mn45 { animation-name: ev-fade, ev-mn45; }
.mn20 { animation-name: ev-fade, ev-mn20; }
.m20 { animation-name: ev-fade, ev-m20; }
.m45 { animation-name: ev-fade, ev-m45; }
.m75 { animation-name: ev-fade, ev-m75; }
.m110 { animation-name: ev-fade, ev-m110; }
.m150 { animation-name: ev-fade, ev-m150; }
.hero__text {
animation: ev-rise 0.9s cubic-bezier(0.22, 0.8, 0.25, 1) both;
}
}
@keyframes ev-fade { from { opacity: 0; } }
@keyframes ev-mn150 { from { transform: rotate(150deg); } }
@keyframes ev-mn110 { from { transform: rotate(110deg); } }
@keyframes ev-mn75 { from { transform: rotate(75deg); } }
@keyframes ev-mn45 { from { transform: rotate(45deg); } }
@keyframes ev-mn20 { from { transform: rotate(20deg); } }
@keyframes ev-m20 { from { transform: rotate(-20deg); } }
@keyframes ev-m45 { from { transform: rotate(-45deg); } }
@keyframes ev-m75 { from { transform: rotate(-75deg); } }
@keyframes ev-m110 { from { transform: rotate(-110deg); } }
@keyframes ev-m150 { from { transform: rotate(-150deg); } }
@keyframes ev-rise {
from {
opacity: 0;
transform: translateY(0.6rem);
}
}
.teaser {
margin: auto;
max-width: 34rem;
text-align: center;
}
.teaser__mark {
display: block;
margin: 0 auto 1.5rem;
color: var(--ev-accent);
}
.teaser__mark--lost {
transform: rotate(180deg);
}
.teaser__name {
margin: 0;
font-size: clamp(2.6rem, 9vw, 4.2rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
}
.teaser__name--small {
font-size: clamp(1.8rem, 6vw, 2.6rem);
}
.teaser__line {
margin: 1.25rem 0 0;
font-size: clamp(1.15rem, 3.2vw, 1.4rem);
text-wrap: balance;
}
.teaser__by {
margin: 2.25rem 0 0;
color: var(--ev-muted);
font-size: 1rem;
}
.legal {
width: 100%;
max-width: 42rem;
margin: 0 auto;
}
.legal h1 {
margin: 0.5rem 0 1.5rem;
font-size: 2rem;
line-height: 1.2;
}
.legal h2 {
margin: 2rem 0 0.5rem;
font-size: 1.25rem;
}
.legal h3 {
margin: 1.5rem 0 0.4rem;
font-size: 1.05rem;
}
.legal p,
.legal address {
margin: 0 0 1rem;
overflow-wrap: anywhere;
}
.legal address {
font-style: normal;
}
.legal__back {
font-size: 1rem;
}
.footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
column-gap: 2.5rem;
row-gap: 0.4rem;
padding: 1.25rem 1rem 1.5rem;
border-top: 1px solid var(--ev-line);
color: var(--ev-muted);
font-size: 1rem;
}
.footer nav {
display: flex;
gap: 0.6rem;
}
.footer p {
margin: 0;
}
sup {
font-size: 0.6em;
line-height: 0;
}