/* The landing plate: a measuring grid, the mark, and one address. */ /* This stylesheet belongs to the plate alone, so it can speak for the root element: the page is one fixed screen. Saying it here too stops the mobile browsers that ignore it on from claiming a drag for panning. */ html { height: 100%; overflow: hidden; touch-action: none; overscroll-behavior: none; } .plate { position: relative; width: 100%; min-height: 100svh; overflow: hidden; /* the whole surface is drawable: a finger drag must reach the script instead of being swallowed by panning, a pinch must not zoom, and a long press must not start a selection or a callout mid-stroke */ touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-size: var(--micro); line-height: 1.6; letter-spacing: var(--track); text-transform: uppercase; } @supports not (height: 100svh) { .plate { min-height: 100vh; } } .plate > * { position: absolute; } /* --------------------------------------------------------------- layers */ .grid, .trace, .rails, .scan, .sweep, .vignette, .cells { inset: 0; pointer-events: none; } /* --cell-w / --cell-h are written on :root by site.js so the grid, the tick rails and the painted cells always agree on one measurement. */ .grid { background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: var(--cell-w, 72px) var(--cell-h, 72px); } .trace { width: 100%; height: 100%; } .rails > i { position: absolute; display: block; } .rail { background-repeat: repeat; } .rail--top { top: 0; left: 0; right: 0; height: 9px; background-image: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 8px); } .rail--left { top: 0; bottom: 0; left: 0; width: 9px; background-image: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 8px); } .ticks { opacity: 0.55; } .ticks--top { top: 0; left: 0; right: 0; height: 16px; background-size: var(--cell-w, 72px) 100%; background-image: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 100%); } .ticks--left { top: 0; bottom: 0; left: 0; width: 16px; background-size: 100% var(--cell-h, 72px); background-image: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 100%); } /* corner crop marks */ .crop { width: 26px; height: 26px; } .crop::before, .crop::after { content: ''; position: absolute; background: var(--ink); } .crop::before { width: 26px; height: 1px; } .crop::after { width: 1px; height: 26px; } .crop--tl { top: var(--edge); left: var(--edge); } .crop--tr { top: var(--edge); right: var(--edge); } .crop--bl { bottom: var(--edge); left: var(--edge); } .crop--br { bottom: var(--edge); right: var(--edge); } .crop--tl::before, .crop--tl::after { top: 0; left: 0; } .crop--tr::before { top: 0; right: 0; } .crop--tr::after { top: 0; right: 0; } .crop--bl::before { bottom: 0; left: 0; } .crop--bl::after { bottom: 0; left: 0; } .crop--br::before { bottom: 0; right: 0; } .crop--br::after { bottom: 0; right: 0; } .reticle { top: 24px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border: 1px solid var(--ink); border-radius: 50%; } .reticle::before, .reticle::after { content: ''; position: absolute; background: var(--ink); } .reticle::before { top: 50%; left: -7px; right: -7px; height: 1px; } .reticle::after { left: 50%; top: -7px; bottom: -7px; width: 1px; } /* ------------------------------------------------------------- readouts */ .readout { display: flex; flex-direction: column; gap: 7px; margin: 0; } .readout p { margin: 0; display: flex; gap: 18px; align-items: baseline; } .readout--tl { top: var(--edge); left: 72px; } .readout--tr { top: var(--edge); right: 72px; align-items: flex-end; } .readout--br { bottom: var(--edge); right: 72px; align-items: flex-end; } .readout--bc { bottom: var(--edge); left: 50%; transform: translateX(-50%); } .ink { color: var(--ink); font-weight: 500; } /* ----------------------------------------------------------------- card */ .card { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 96px 32px; } .card__mark { display: block; color: var(--ink); } .wordmark { display: block; width: clamp(150px, 24vw, 268px); height: auto; } .card__rule { position: relative; width: clamp(150px, 24vw, 268px); height: 5px; margin: 0; border-top: 1px solid var(--line); translate: 0 2px; } .card__rule i { position: absolute; top: -2px; width: 1px; height: 5px; background: var(--ink); } .card__rule i:first-child { left: 0; } .card__rule i:last-child { right: 0; } .card__mail { color: var(--mute); font-size: 12px; letter-spacing: 0.2em; text-transform: lowercase; /* a comfortable tap target, and the one thing worth copying by hand */ padding: 12px 8px; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; transition: color 140ms ease; } .card__mail:hover, .card__mail:focus-visible { color: var(--ink); } /* -------------------------------------------------------------- palette */ .palette { bottom: 56px; left: 72px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .palette p { margin: 0; display: flex; gap: 14px; align-items: baseline; white-space: nowrap; } .palette__stops { display: flex; border: 1px solid var(--line); cursor: pointer; } .palette__stops i { flex: 0 0 auto; width: 22px; height: 22px; transform-origin: bottom; transition: transform 120ms ease; } /* the three stops, in CSS so they survive with scripting off */ .palette__stops i:nth-child(1) { background: oklch(0.65 0.26 28); } .palette__stops i:nth-child(2) { background: oklch(0.78 0.24 145); } .palette__stops i:nth-child(3) { background: oklch(0.55 0.25 265); } .palette__stops:hover i:hover, .palette__stops i.is-lit { transform: scaleY(1.45); } .palette__foot { color: var(--faint); } /* ------------------------------------------------------------------ crt */ .scan { background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 5%) 0 1px, transparent 1px 3px); } .sweep { inset: 0 0 auto; height: 22%; background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 2.8%) 55%, rgb(0 0 0 / 0%)); animation: sweep 7s linear infinite; } .vignette { background: radial-gradient(135% 115% at 50% 50%, rgb(0 0 0 / 0%) 58%, rgb(0 0 0 / 5%) 84%, rgb(0 0 0 / 13%) 100%); } @keyframes sweep { from { transform: translateY(-20%); } to { transform: translateY(120%); } } /* The trail is one canvas, not one layer per cell: painting a hundred cells costs the compositor the same as painting one. Filled white under a difference blend it inverts what is beneath — the wordmark turns white as the trail crosses it. Without blending support the script fills ink instead, which is the version that must never fail. */ .cells { z-index: 50; width: 100%; height: 100%; } @supports (mix-blend-mode: difference) { .cells { mix-blend-mode: difference; } } /* cover every cell and the plate answers back */ .flash { inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--paper); pointer-events: none; } .flash[hidden] { display: none; } .flash span { color: var(--ink); font-weight: 500; font-size: clamp(40px, 13vw, 64px); letter-spacing: -0.02em; text-transform: lowercase; } /* ---------------------------------------------------------- small plate */ @media (max-width: 900px) { :root { --edge: 20px; } .readout--tl { left: 44px; } .readout--tr, .readout--br { right: 44px; } .palette { left: 44px; bottom: 44px; } } @media (max-width: 620px) { .readout--tr { display: none; } .readout--tl { top: 28px; left: 28px; } .readout--br { bottom: 28px; right: 28px; } .palette { left: 28px; bottom: 28px; } .card { padding: 120px 28px; } /* no room along the bottom edge next to the palette and the notice */ .readout--bc { top: 66px; bottom: auto; left: 28px; transform: none; } /* no room for the top reticle or the stop counter on a phone */ .rails > .reticle, .palette > .palette__foot { display: none; } } /* landscape on a phone: the plate cannot scroll, so the card has to fit */ @media (max-height: 520px) { .card { padding: 64px 28px; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .sweep { animation: none; opacity: 0; } .palette__stops i, .card__mail { transition: none; } }