/* --------------------------------------------------------------- Christian Müller — placeholder Text is WHITE + mix-blend-mode: difference, so it inverts whatever the blurred sphere puts underneath it. Do NOT add opacity / transform / filter / isolation to or to any ancestor of .hud — that isolates the blend group and the inversion stops working. --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: #ffffff; overflow: hidden; } body { font-family: "owners", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- background ------------------------------------------------- Oversized on every side so the blur pulls in real pixels instead of transparency — otherwise you get a dark vignette frame around the viewport edge. ------------------------------------------------------------------ */ #bg { position: fixed; touch-action: none; top: -60px; left: -60px; width: calc(100% + 120px); height: calc(100% + 120px); display: block; filter: blur(15px) grayscale(1); z-index: 0; } /* --- text overlay ------------------------------------------------ */ .hud { position: relative; z-index: 1; height: 100vh; height: 100dvh; /* Grid, not flex: with justify-content:center the single column shrink-wraps to the widest line (the e-mail), and justify-items:stretch then hands that exact width to every other row — which is how the degree readout can span the e-mail without anyone hard-coding a width. */ display: grid; grid-auto-flow: row; justify-content: center; align-content: center; justify-items: stretch; gap: clamp(0.15em, 0.5vw, 0.3em); padding: 6vmin; text-align: center; letter-spacing: 2px; color: #ffffff; mix-blend-mode: difference; /* the whole page is the grab handle, so no text drag-select and no browser pan/zoom stealing the gesture on touch */ touch-action: none; user-select: none; -webkit-user-select: none; } body { cursor: grab; } html.dragging, html.dragging body, html.dragging a { cursor: grabbing; } .line { margin: 0; font-size: 20px; font-weight: 400; /* the

would otherwise come out bold / line-height: 1.12; text-indent: 2px; / balances the trailing letter-space when centred / white-space: nowrap; } .line--mail a { color: inherit; cursor: pointer; user-select: text; -webkit-user-select: text; text-decoration: none; display: inline-block; padding: 0.1em 0.2em; margin: -0.1em -0.2em; / keeps the tap target big without shifting layout / } / --- degree readout ---------------------------------------------- / .readout { display: flex; align-items: center; justify-content: space-between; / outer edges land on the e-mail's edges / gap: 0.6em; / a floor, in case the line ever gets short / font-size: 20px; font-weight: 400; line-height: 1.12; } .axis { display: flex; align-items: center; gap: 0.22em; } .dial { width: 0.72em; height: 0.72em; flex: 0 0 auto; overflow: visible; } .dial .rim { fill: none; stroke: currentColor; stroke-width: 7; } .dial .wedge { fill: currentColor; stroke: none; } .deg { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; min-width: 2em; / room for three tracked digits — stops the row jittering / text-align: left; } / The last number's slot is what touches the right edge, so its digits have to sit right — otherwise the padding inside the slot reads as a ragged edge. */ .axis:last-child .deg { text-align: right; }