dmn.css (3871B)
1 /* ═══════════════════════════════════════════════════════ 2 * Shared with daemon-sec.xyz: the dot field band and the cursor pill. 3 * Scripts: src/scripts/dmn/. Tokens are this site's mode-flipping set. 4 * ═══════════════════════════════════════════════════════ */ 5 6 /* The dot field behind the top of the page, on the plain ground. It 7 fades out downward so it never sits behind a long read. Page content 8 is positioned (without a z-index, so no new stacking context) and so 9 paints over it in document order. */ 10 .dmn-page-field { 11 position: absolute; 12 inset-inline: 0; 13 top: 0; 14 height: 70vh; 15 max-height: 720px; 16 overflow: hidden; 17 pointer-events: none; 18 z-index: 0; 19 /* Thins out early: this site's pages open straight into dense mono 20 text and controls, and the dots must stay behind the words. */ 21 -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 35%, transparent 85%); 22 mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.55) 35%, transparent 85%); 23 } 24 .dmn-page-field canvas { 25 display: block; 26 width: 100%; 27 height: 100%; 28 opacity: 0; 29 transition: opacity 2400ms var(--ease-out-soft, ease-out); 30 } 31 .dmn-page-field canvas.is-live { opacity: 0.6; } 32 #main, .dfooter { position: relative; } 33 34 /* ── The cursor ── 35 A disc that trails the pointer, a ring over anything clickable, and a 36 pill that names the action over links, images and PDFs. */ 37 @media (pointer: fine) { 38 html.has-dmn-cursor, 39 html.has-dmn-cursor * { cursor: none; } 40 41 .dmn-cursor { 42 position: fixed; 43 top: 0; 44 left: 0; 45 z-index: 99999; 46 width: 9px; 47 height: 9px; 48 border: 1px solid transparent; 49 border-radius: 50%; 50 background: var(--love); 51 pointer-events: none; 52 transform: translate(-50%, -50%); 53 transition: width 180ms ease, height 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 200ms ease; 54 } 55 .dmn-cursor.on-dark { background: var(--color-night-love); } 56 .dmn-cursor.hot { width: 34px; height: 34px; background: transparent; border-color: var(--love); } 57 .dmn-cursor.hot.on-dark { border-color: var(--color-night-love); } 58 59 .dmn-cursor-pill { 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 display: inline-flex; 64 align-items: center; 65 gap: 8px; 66 padding: 8px 14px 8px 11px; 67 border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); 68 border-radius: 999px; 69 background: var(--surface); 70 color: var(--text); 71 font: 500 11.5px/1 var(--font-mono); 72 letter-spacing: 0.08em; 73 text-transform: uppercase; 74 white-space: nowrap; 75 opacity: 0; 76 transform: translate(-50%, -50%) scale(0); 77 transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms ease; 78 } 79 .dmn-cursor-icon { display: inline-flex; } 80 .dmn-cursor[data-mode] { background: transparent; border-color: transparent; } 81 .dmn-cursor[data-mode] .dmn-cursor-pill { 82 opacity: 1; 83 transform: translate(-50%, -50%) scale(1); 84 transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease; 85 } 86 .dmn-cursor.on-dark .dmn-cursor-pill { 87 border-color: color-mix(in srgb, var(--color-night-text) 28%, transparent); 88 background: var(--color-night-surface); 89 color: var(--color-night-text); 90 } 91 } 92 @media (pointer: coarse) { .dmn-cursor { display: none; } } 93 94 /* The site's own motion switch, for every page: it used to live in the 95 catalog's stylesheet, so it only took effect on /catalog. */ 96 html[data-motion=reduce] *, 97 html[data-motion=reduce] *::before, 98 html[data-motion=reduce] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }