/* Mimic — coming soon page. Plain static CSS, no build step, no web fonts. */
:root {
--bg: #0a0a0c;
--grid: rgba(230, 183, 87, 0.09);
--gold: #e6b757;
--heading: #f4ede0;
--text: #d0cac1;
--muted: #77716a;
--dim: #55524d;
--mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo,
Consolas, "DejaVu Sans Mono", "Noto Sans Mono CJK SC", "Noto Sans CJK SC",
monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
background-color: var(--bg);
}
/* The artwork hangs off so that 's own layers can stack above it:
::before carries the grid (below the mimic) and ::after the scrim (above it).
Dimming lives here as a filter, keeping the shipped image untouched. */
html::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("/assets/backdrop.webp") center 40% / cover no-repeat;
filter: grayscale(0.8) sepia(0.45) brightness(0.58) contrast(0.95);
}
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2rem;
padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 7vw, 6rem);
color: var(--text);
font-family: var(--mono);
font-size: 16px;
line-height: 1.7;
}
/* Blueprint grid. Sits between the artwork and the mimic: the chest is drawn
after it, so the grid never runs across the chest. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 76px 76px;
background-position: center;
}
/* The scrim: swallows the corridor and the grid towards the edges and under
the text column, so the masonry never competes with the copy. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(10, 10, 12, 0.93) 0%,
rgba(10, 10, 12, 0.78) 32%,
rgba(10, 10, 12, 0.3) 58%,
transparent 76%
),
radial-gradient(125% 105% at 30% 45%, transparent 10%, var(--bg) 90%);
}
/* Fixed on the wrapper, not on the ![]()
: a positioned stays out of
the page grid, otherwise it would claim a row and shove the content down.
*/
.chest {
position: fixed;
right: -3vw;
bottom: -7vh;
z-index: 0;
width: min(41vw, 500px);
pointer-events: none;
}
.chest img {
display: block;
width: 100%;
height: auto;
opacity: 0.92;
filter: drop-shadow(0 0 110px rgba(230, 183, 87, 0.16));
animation: breathe 7s ease-in-out infinite;
}
/* The chest is alive: a slow, barely-there breath. */
@keyframes breathe {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-12px) rotate(-1deg);
}
}
header,
main,
footer {
position: relative;
z-index: 1;
}
header {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.82rem;
letter-spacing: 0.14em;
color: var(--dim);
}
/* 36px is the floor at which the chest still reads as a chest — below that
the teeth and eyes mush together. */
.mark {
width: 36px;
height: 36px;
opacity: 0.9;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 44rem;
}
.prompt {
margin: 0;
font-size: clamp(0.8rem, 2.4vw, 0.95rem);
letter-spacing: 0.04em;
color: var(--muted);
}
.prompt b {
font-weight: 400;
color: var(--gold);
}
.title {
margin: 0.5rem 0 0;
font-size: clamp(2.9rem, 11vw, 6rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--heading);
}
.cursor {
display: inline-block;
width: 0.09em;
height: 0.82em;
margin-left: 0.34em;
transform: translateY(0.08em);
background: var(--gold);
animation: blink 1.15s steps(1) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
.lede {
margin: 1.5rem 0 0;
max-width: 32rem;
font-size: clamp(0.95rem, 2.7vw, 1.08rem);
}
.facts {
margin: 2.6rem 0 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 2rem;
font-size: 0.9rem;
}
.facts dt {
color: var(--dim);
}
.facts dd {
margin: 0;
color: var(--text);
}
.facts .now {
color: var(--gold);
}
.facts .now::after {
content: "";
display: inline-block;
width: 0.45em;
height: 0.45em;
margin-left: 0.6em;
border-radius: 50%;
background: var(--gold);
vertical-align: middle;
animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.25;
}
50% {
opacity: 1;
}
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.6rem 1.5rem;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--muted);
}
footer nav {
display: flex;
gap: 1.2rem;
}
footer a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease;
}
footer a:hover,
footer a:focus-visible {
color: var(--gold);
border-bottom-color: rgba(230, 183, 87, 0.45);
}
footer [aria-current="page"] {
color: var(--heading);
cursor: default;
}
@media (max-width: 860px) {
body {
gap: 1.5rem;
}
/* Narrow screens have no empty right-hand side for the corridor to show
through, so the scrim runs top-to-bottom instead: it shields the copy and
lets the backdrop surface in the empty space below it. */
body::after {
background:
linear-gradient(
180deg,
rgba(10, 10, 12, 0.92) 0%,
rgba(10, 10, 12, 0.88) 58%,
rgba(10, 10, 12, 0.55) 100%
),
radial-gradient(140% 90% at 50% 45%, transparent 20%, var(--bg) 95%);
}
.chest {
width: 74vw;
right: -14vw;
bottom: -4vh;
}
.chest img {
opacity: 0.28;
animation: none;
}
.facts {
gap: 0.3rem 1.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.chest img,
.cursor,
.facts .now::after {
animation: none;
}
footer a {
transition: none;
}
}