dmn.css (4552B)
1 /* ═══════════════════════════════════════════════════════ 2 * Shared with daemon-sec.xyz: the dot field, the cursor pill and the 3 * image viewer. Scripts: src/scripts/dmn/. 4 * ═══════════════════════════════════════════════════════ */ 5 6 /* Every field arrives on a long fade the first time it draws. */ 7 .signal-field { opacity: 0; transition: opacity 2400ms var(--ease-out-soft); } 8 .signal-field.is-live { opacity: 1; } 9 10 /* The hero plate's dots stay out of the way of its words: full strength 11 in the open upper half where the icon forms, a trace over the copy. */ 12 .dmn-plate-dots { 13 opacity: 0; 14 transition: opacity 2400ms var(--ease-out-soft); 15 -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, #000 14%, #000 46%, rgb(0 0 0 / 0.12) 60%, rgb(0 0 0 / 0.08) 100%); 16 mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, #000 14%, #000 46%, rgb(0 0 0 / 0.12) 60%, rgb(0 0 0 / 0.08) 100%); 17 } 18 .dmn-plate-dots.is-live { opacity: 1; } 19 20 /* ── Skip link ── */ 21 .skip-link { 22 position: absolute; 23 left: 12px; 24 top: -60px; 25 z-index: 100; 26 padding: 10px 16px; 27 background: var(--fg); 28 color: var(--bg); 29 font: 500 11px/1 var(--font-mono); 30 letter-spacing: 0.16em; 31 text-transform: uppercase; 32 } 33 .skip-link:focus { top: 12px; } 34 35 /* ── The cursor ── */ 36 @media (pointer: fine) { 37 html.has-dmn-cursor, 38 html.has-dmn-cursor * { cursor: none; } 39 40 .dmn-cursor { 41 position: fixed; 42 top: 0; 43 left: 0; 44 z-index: 99999; 45 width: 9px; 46 height: 9px; 47 border: 1px solid transparent; 48 border-radius: 50%; 49 background: var(--love); 50 pointer-events: none; 51 transform: translate(-50%, -50%); 52 transition: width 180ms ease, height 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 200ms ease; 53 } 54 .dmn-cursor.on-dark { background: var(--color-night-love); } 55 .dmn-cursor.hot { width: 34px; height: 34px; background: transparent; border-color: var(--love); } 56 .dmn-cursor.hot.on-dark { border-color: var(--color-night-love); } 57 58 .dmn-cursor-pill { 59 position: absolute; 60 top: 50%; 61 left: 50%; 62 display: inline-flex; 63 align-items: center; 64 gap: 8px; 65 padding: 8px 14px 8px 11px; 66 border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); 67 border-radius: 999px; 68 background: var(--surface); 69 color: var(--text); 70 font: 500 11.5px/1 var(--font-mono); 71 letter-spacing: 0.08em; 72 text-transform: uppercase; 73 white-space: nowrap; 74 opacity: 0; 75 transform: translate(-50%, -50%) scale(0); 76 transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 160ms ease; 77 } 78 .dmn-cursor-icon { display: inline-flex; } 79 .dmn-cursor[data-mode] { background: transparent; border-color: transparent; } 80 .dmn-cursor[data-mode] .dmn-cursor-pill { 81 opacity: 1; 82 transform: translate(-50%, -50%) scale(1); 83 transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease; 84 } 85 .dmn-cursor.on-dark .dmn-cursor-pill { 86 border-color: color-mix(in srgb, var(--color-night-text) 28%, transparent); 87 background: var(--color-night-surface); 88 color: var(--color-night-text); 89 } 90 } 91 @media (pointer: coarse) { .dmn-cursor { display: none; } } 92 93 /* ── Image viewer ── */ 94 .prose img[data-zoomable] { cursor: zoom-in; } 95 .dmn-viewer { 96 max-width: min(96vw, 1600px); 97 max-height: 94vh; 98 padding: 0; 99 border: 1px solid var(--rule-hi); 100 background: var(--plate); 101 color: var(--color-night-text); 102 } 103 .dmn-viewer::backdrop { background: rgb(25 23 36 / 0.82); } 104 .dmn-viewer__img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; object-fit: contain; } 105 .dmn-viewer__cap { margin: 0; padding: 10px 14px; font: 400 12px/1.5 var(--font-mono); color: var(--color-night-subtle); } 106 .dmn-viewer__close { 107 position: absolute; 108 top: 8px; 109 right: 8px; 110 padding: 6px 10px; 111 border: 1px solid color-mix(in srgb, var(--color-night-text) 30%, transparent); 112 background: var(--color-night-base); 113 color: var(--color-night-text); 114 font: 500 11px/1 var(--font-mono); 115 letter-spacing: 0.12em; 116 text-transform: uppercase; 117 } 118 @media (prefers-reduced-motion: no-preference) { 119 .dmn-viewer[open] { animation: dmn-viewer-in 420ms var(--ease-out-expo); } 120 } 121 @keyframes dmn-viewer-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }