daemon.css (28929B)
1 /* ============================================================================ 2 daemon.css — the daemon-sec.xyz form language, ported to the cheatsheet. 3 4 The redesigned home route and the shared chrome (masthead, footer) are 5 re-compositions of the main site's own components: Masthead, SectionHeader, 6 RecordRow, Callout, Footer, the dual-lane marquee, the operator band, the 7 shelves grid and the mirrors band. Every value here is the main site's, 8 translated from its Tailwind classes into plain CSS against the tokens in 9 tokens.css. Nothing hardcodes a colour. 10 11 Measure is 1560px / 44px gutter (`--container-archive`). Paper sections use 12 the theme-relative tokens (--base/--text/--pine…) so they invert with the 13 mode; the dark bands (operator, mirrors, footer, the marquee cap) pin the 14 fixed --color-night-* / --color-signal-* palette and stay dark in both. 15 ========================================================================== */ 16 17 /* ---- Measure ------------------------------------------------------------- */ 18 .archive { 19 width: 100%; 20 max-width: var(--container-archive); 21 margin-inline: auto; 22 padding-inline: 44px; 23 box-sizing: border-box; 24 } 25 @media (max-width: 700px) { 26 .archive { padding-inline: clamp(18px, 5.4vw, 44px); } 27 } 28 29 /* ---- Shared timing + status animations ----------------------------------- */ 30 .dmn-tt { 31 transition: 32 background-color 240ms ease, color 200ms ease, border-color 220ms ease, 33 transform 220ms var(--ease-in), padding-left 280ms var(--ease-in), opacity 200ms ease; 34 } 35 .dmn-anim-pulse { animation: dmn-pulse 2.4s ease-in-out infinite; } 36 .dmn-anim-ring { animation: dmn-ring-status 4.2s ease-out infinite; } 37 @keyframes dmn-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } } 38 @keyframes dmn-ring-status { 39 0% { transform: scale(1); opacity: 0.7; } 40 70%,100% { transform: scale(2.6); opacity: 0; } 41 } 42 /* A hard terminal-cursor blink — a steps() square wave, not a fade. */ 43 .dmn-blink { 44 display: inline-block; width: 0.5em; height: 1.05em; 45 transform: translateY(0.12em); background: currentColor; 46 animation: dmn-cursor 1.1s steps(1, end) infinite; 47 } 48 @keyframes dmn-cursor { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } 49 @media (prefers-reduced-motion: reduce) { 50 .dmn-anim-pulse, .dmn-anim-ring, .dmn-blink { animation: none; } 51 } 52 53 /* A 7px status dot with a pulse and an expanding ring pushing out of it. */ 54 .dmn-dot { position: relative; display: block; width: 7px; height: 7px; } 55 .dmn-dot > i, .dmn-dot > u { 56 position: absolute; inset: 0; border-radius: 50%; display: block; 57 } 58 .dmn-dot > i { background: var(--dot, var(--love)); } 59 .dmn-dot > u { border: 1px solid var(--dot, var(--love)); } 60 61 /* ============================================================================ 62 1 · MASTHEAD — sticky, wordmark chip, numbered mono nav, status + actions. 63 ========================================================================== */ 64 .mast { 65 position: sticky; top: 0; z-index: 60; 66 border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); 67 background: color-mix(in srgb, var(--base) 92%, transparent); 68 backdrop-filter: blur(10px); 69 -webkit-backdrop-filter: blur(10px); 70 } 71 .mast__row { 72 display: flex; align-items: center; justify-content: space-between; 73 gap: 24px; height: 62px; 74 } 75 .mast__brand { display: inline-flex; align-items: center; } 76 .mast__chip { 77 display: inline-flex; align-items: center; gap: 7px; 78 background: var(--text); color: var(--base); 79 padding: 6px 9px 7px; 80 font-family: var(--font-wordmark); font-weight: 800; font-size: 15px; 81 line-height: 1; letter-spacing: -0.02em; font-stretch: 88%; 82 } 83 .mast__chip svg { height: 0.72em; width: auto; flex: none; transform: translateY(-0.045em); } 84 85 .mast__nav { 86 display: none; align-items: center; gap: 22px; 87 font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; 88 } 89 @media (min-width: 1024px) { .mast__nav { display: flex; } } 90 .mast__navitem { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 6px 0; } 91 .mast__navitem .n { font-size: 10px; letter-spacing: 0.1em; color: var(--acc, var(--pine)); } 92 .mast__navitem .lbl { display: inline-block; color: var(--subtle); transition: color 200ms ease, transform 200ms var(--ease-in); } 93 .mast__navitem:hover .lbl { color: var(--text); transform: translateY(-1px); } 94 .mast__navitem[aria-current='page'] .lbl { color: var(--text); } 95 .mast__navitem .rule { 96 position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; 97 background: var(--acc, var(--pine)); transform: scaleX(0); transform-origin: left; 98 transition: transform 260ms var(--ease-in); 99 } 100 .mast__navitem:hover .rule, .mast__navitem[aria-current='page'] .rule { transform: scaleX(1); } 101 102 .mast__actions { display: flex; align-items: center; gap: 14px; } 103 .mast__status { 104 display: none; align-items: center; gap: 9px; 105 font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); 106 } 107 @media (min-width: 1180px) { .mast__status { display: flex; } } 108 .mast__icon { 109 display: inline-flex; align-items: center; gap: 7px; color: var(--subtle); 110 transition: color 200ms ease; 111 } 112 .mast__icon:hover { color: var(--text); } 113 .mast__icon svg { width: 15px; height: 15px; } 114 .mast__icon kbd { 115 font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.06em; 116 border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); padding: 1px 5px; color: var(--muted); 117 } 118 .mast__mode .icon-sun { display: inline-flex; } 119 .mast__mode .icon-moon { display: none; } 120 :root[data-theme='dark'] .mast__mode .icon-sun { display: none; } 121 :root[data-theme='dark'] .mast__mode .icon-moon { display: inline-flex; } 122 123 .mast__burger { 124 display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; 125 width: 34px; height: 34px; margin-right: -8px; 126 } 127 @media (min-width: 1024px) { .mast__burger { display: none; } } 128 .mast__burger i { 129 display: block; width: 20px; height: 1.5px; background: var(--text); 130 transition: opacity 200ms ease, transform 300ms var(--ease-in); 131 } 132 .mast__burger[aria-expanded='true'] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } 133 .mast__burger[aria-expanded='true'] i:nth-child(2) { opacity: 0; } 134 .mast__burger[aria-expanded='true'] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } 135 136 .mast__mobile { border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); background: var(--base); } 137 @media (min-width: 1024px) { .mast__mobile { display: none; } } 138 .mast__mobile a { 139 display: flex; align-items: center; gap: 14px; 140 padding: 14px 44px; border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); 141 font-family: var(--font-plex); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); 142 transition: padding-left 260ms var(--ease-in), color 200ms ease; 143 } 144 .mast__mobile a:hover { padding-left: 50px; color: var(--text); } 145 .mast__mobile a .n { font-size: 10px; color: var(--acc, var(--pine)); } 146 .mast__mobile a .arrow { margin-left: auto; color: var(--acc, var(--pine)); } 147 148 /* ============================================================================ 149 2 · SECTION HEADER — three columns: mono eyebrow, oversized head, intro. 150 ========================================================================== */ 151 .sec-head { 152 display: grid; gap: 40px; align-items: start; 153 grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.6fr) minmax(0, 1fr); 154 } 155 @media (max-width: 1023px) { .sec-head { grid-template-columns: 1fr; gap: 16px; } } 156 .sec-head__eyebrow { 157 padding-top: 10px; font-family: var(--font-plex); font-size: 10.5px; 158 letter-spacing: 0.18em; text-transform: uppercase; color: var(--tone, var(--pine)); 159 } 160 .sec-head__title { 161 margin: 0; font-family: var(--font-archivo); font-weight: 800; 162 font-size: clamp(46px, 6vw, 92px); line-height: 0.86; letter-spacing: -0.04em; 163 font-stretch: 88%; text-transform: uppercase; color: var(--tone, var(--text)); text-wrap: balance; 164 } 165 .sec-head__intro { 166 margin: 2px 0 0; max-width: 36ch; font-family: var(--font-archivo); 167 font-size: 15px; line-height: 1.55; color: var(--intro, var(--subtle)); text-wrap: pretty; 168 } 169 170 /* Section wrapper — centred measure, top rhythm. */ 171 .dsection { margin-inline: auto; width: 100%; max-width: var(--container-archive); padding: 96px 44px 0; box-sizing: border-box; } 172 @media (max-width: 700px) { .dsection { padding: 72px clamp(18px, 5.4vw, 44px) 0; } } 173 174 /* ============================================================================ 175 3 · RECORD ROW — one line, paper wash on hover (titles stay ink, ≥4.5:1), 176 excerpt disclosure. Rule #6: paper wash, never the solid ink wipe. 177 ========================================================================== */ 178 .rec { 179 position: relative; display: block; color: var(--text); 180 border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); 181 padding: 22px 28px; 182 background-image: linear-gradient(to right, var(--overlay) 50%, transparent 50%); 183 background-size: 200% 100%; background-position: 100% 0; background-repeat: no-repeat; 184 transition: background-position 260ms var(--ease-in); 185 } 186 .rec:hover, .rec:focus-visible { background-position: 0 0; } 187 .rec__grid { 188 display: grid; align-items: center; 189 grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 18px; 190 } 191 @media (min-width: 768px) { 192 .rec__grid { grid-template-columns: 46px 118px minmax(0, 1fr) 112px 20px; gap: 8px 18px; } 193 } 194 .rec__n { grid-column: 1; grid-row: 1; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iris); } 195 .rec__kind { 196 grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 8px; 197 font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc, var(--foam)); 198 } 199 .rec__kind svg { width: 11px; height: 11px; } 200 @media (min-width: 768px) { .rec__kind { grid-column: 2; grid-row: 1; } } 201 .rec__title { grid-column: 2; grid-row: 1; min-width: 0; font-family: var(--font-archivo); font-size: 17px; line-height: 1.3; font-weight: 600; } 202 @media (min-width: 768px) { .rec__title { grid-column: 3; } } 203 .rec__date { display: none; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.12em; color: var(--subtle); } 204 @media (min-width: 768px) { .rec__date { display: block; grid-column: 4; grid-row: 1; } } 205 .rec__arrow { grid-column: 3; grid-row: 1; justify-self: end; font-size: 11px; line-height: 1; color: var(--subtle); } 206 .rec__arrow svg { width: 13px; height: 13px; } 207 @media (min-width: 768px) { .rec__arrow { grid-column: 5; } } 208 .rec__reveal { 209 grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-rows: 0fr; opacity: 0; 210 transition: grid-template-rows 380ms var(--ease-in), opacity 240ms ease; 211 } 212 @media (min-width: 768px) { .rec__reveal { grid-column: 3 / 4; grid-row: 2; } } 213 .rec__reveal > * { min-height: 0; overflow: hidden; } 214 .rec:hover .rec__reveal, .rec:focus-within .rec__reveal { grid-template-rows: 1fr; opacity: 1; } 215 .rec__reveal > * > * { display: block; } 216 .rec__excerpt { display: block; max-width: 62ch; padding-top: 10px; font-family: var(--font-archivo); font-size: 13.5px; line-height: 1.5; color: var(--subtle); text-wrap: pretty; } 217 .rec__tagline { display: block; padding-top: 8px; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } 218 @media (hover: none) { .rec__reveal { grid-template-rows: 1fr; opacity: 1; } } 219 @media (prefers-reduced-motion: reduce) { .rec, .rec__reveal { transition: none; } } 220 221 /* ============================================================================ 222 4 · MANIFEST BAND — dual-lane counter-scrolling marquee + inverse cap. 223 ========================================================================== */ 224 @keyframes vaultLane { from { transform: translateX(0); } to { transform: translateX(-50%); } } 225 @keyframes vaultLaneRev { from { transform: translateX(-50%); } to { transform: translateX(0); } } 226 .vault-lanes { 227 display: grid; grid-template-columns: 1fr auto; overflow: hidden; 228 background: var(--base); 229 border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); 230 } 231 .vault-lanes__body { display: grid; grid-template-rows: 56px 34px; overflow: hidden; } 232 .vault-lane-wrap { position: relative; overflow: hidden; } 233 .vault-lane-wrap--top { border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent); } 234 .vault-lane { display: flex; align-items: center; height: 56px; width: max-content; animation: vaultLane 50s linear infinite; } 235 .vault-lane-rev { display: flex; align-items: center; height: 34px; width: max-content; animation: vaultLaneRev 80s linear infinite; } 236 .vault-lanes:hover .vault-lane, .vault-lanes:hover .vault-lane-rev { animation-play-state: paused; } 237 .vault-title { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 34px; white-space: nowrap; } 238 .vault-title .n { font-family: var(--font-plex); font-size: 12px; letter-spacing: 0.12em; padding: 3px 7px; background: var(--acc, var(--iris)); color: var(--base); } 239 .vault-title .t { font-family: var(--font-archivo); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--text); } 240 .vault-meta { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 26px; white-space: nowrap; font-family: var(--font-plex); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } 241 .vault-meta .tag { color: var(--acc, var(--iris)); letter-spacing: 0.14em; } 242 .vault-meta .tx { color: var(--muted); } 243 .vault-meta .sep { color: var(--muted); margin-left: 10px; } 244 .vault-cap { 245 display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 26px; white-space: nowrap; 246 background: var(--color-night-base); color: var(--color-signal-meta); 247 font-family: var(--font-plex); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; 248 } 249 .vault-cap .verified { display: flex; align-items: center; gap: 8px; color: var(--color-night-subtle); } 250 .vault-cap .verified i { width: 7px; height: 7px; border-radius: 4px; background: var(--color-night-pine); display: inline-block; } 251 @media (prefers-reduced-motion: reduce) { .vault-lane, .vault-lane-rev { animation: none; } } 252 @media (max-width: 640px) { .vault-cap { display: none; } .vault-lanes { grid-template-columns: 1fr; } } 253 254 /* ============================================================================ 255 5 · OPERATOR BAND — dark plate: grid texture, chips, terminal readout, rail. 256 ========================================================================== */ 257 .operator { 258 position: relative; isolation: isolate; overflow: hidden; 259 background: var(--color-night-base); color: var(--color-night-text); padding: 92px 0 84px; 260 } 261 .operator__grid { 262 position: absolute; inset: 0; pointer-events: none; 263 background-image: 264 linear-gradient(color-mix(in srgb, var(--color-night-text) 5%, transparent) 1px, transparent 1px), 265 linear-gradient(90deg, color-mix(in srgb, var(--color-night-text) 5%, transparent) 1px, transparent 1px); 266 background-size: 64px 64px; 267 } 268 .operator__inner { position: relative; z-index: 2; } 269 .operator__cols { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px; align-items: center; } 270 @media (max-width: 900px) { .operator__cols { grid-template-columns: 1fr; gap: 36px; } } 271 .op-chips { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } 272 .op-chip { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--chip, var(--color-night-iris)) 55%, transparent); color: var(--chip, var(--color-night-iris)); } 273 .op-chip .pip { width: 6px; height: 6px; border-radius: 3px; background: var(--chip, var(--color-night-iris)); } 274 .op-readout { margin-top: 36px; max-width: 56ch; font-family: var(--font-plex); font-size: 12.5px; line-height: 1.6; } 275 .op-readout__cmd { display: flex; align-items: center; gap: 8px; color: var(--color-night-muted); } 276 .op-readout__cmd .u { color: var(--color-night-pine); } 277 .op-readout__cmd .c { color: var(--color-night-text); } 278 .op-readout dl { margin: 14px 0 0; display: grid; grid-template-columns: 5rem 1fr; gap: 7px 20px; border-top: 1px solid color-mix(in srgb, var(--color-night-text) 20%, transparent); padding-top: 14px; color: var(--color-night-subtle); } 279 .op-readout dt { color: var(--color-night-muted); } 280 .op-readout dd { margin: 0; } 281 .op-readout .on { color: var(--color-night-gold); } 282 .op-rail { border: 1px solid color-mix(in srgb, var(--color-night-text) 30%, transparent); background: var(--color-night-surface); padding: 22px 26px 26px; } 283 .op-rail__eyebrow { font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-night-pine); } 284 .op-search { margin-top: 14px; display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid color-mix(in srgb, var(--color-night-text) 30%, transparent); padding: 12px 14px; font-family: var(--font-plex); text-align: left; } 285 .op-search:hover { border-color: color-mix(in srgb, var(--color-night-text) 55%, transparent); } 286 .op-search .slash { color: var(--color-night-foam); font-size: 13px; } 287 .op-search .ph { flex: 1; color: var(--color-night-subtle); font-size: 13px; } 288 .op-search kbd { font-size: 10px; letter-spacing: 0.1em; color: var(--color-night-muted); border: 1px solid color-mix(in srgb, var(--color-night-text) 30%, transparent); padding: 2px 6px; } 289 .op-stats { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; border-top: 1px solid color-mix(in srgb, var(--color-night-text) 30%, transparent); padding-top: 16px; font-family: var(--font-plex); font-size: 11px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-night-text); } 290 .op-stats dd { margin: 0; } 291 .op-cta-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-plex); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } 292 .op-cta { display: flex; align-items: center; gap: 16px; padding: 15px 20px; color: var(--color-night-base); background: var(--cta, var(--color-night-pine)); transition: background-color 220ms ease; } 293 .op-cta .count { margin-left: auto; opacity: 0.7; letter-spacing: 0.14em; } 294 .op-cta--pine:hover { background: var(--color-night-text); } 295 .op-cta--text { background: var(--color-night-text); } 296 .op-cta--text:hover { background: var(--color-night-pine); } 297 .op-cta--love { background: var(--color-night-love); } 298 .op-cta--love:hover { background: var(--color-night-text); } 299 300 /* ============================================================================ 301 6 · INDEX — filter pills + record rows + show-more + footer meta. 302 ========================================================================== */ 303 .filters { margin-top: 62px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } 304 .pill { 305 cursor: pointer; border: 1px solid var(--text); padding: 13px 20px; 306 font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; 307 background: transparent; color: var(--text); 308 transition: transform 200ms var(--ease-in), background-color 200ms ease, color 200ms ease; 309 } 310 .pill:hover { transform: translateY(-3px); background: var(--text); color: var(--base); } 311 .pill[aria-pressed='true'] { background: var(--text); color: var(--base); } 312 .filters__count { margin-left: auto; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iris); } 313 .index-list { margin-top: 26px; border-top: 1px solid var(--text); } 314 .rec[hidden] { display: none; } 315 .show-more { 316 display: flex; width: 100%; align-items: center; justify-content: space-between; 317 border: 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); background: transparent; 318 padding: 24px 28px; font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); 319 transition: background-color 220ms ease, color 200ms ease; 320 } 321 .show-more:hover { background: var(--text); color: var(--base); } 322 .index-foot { display: flex; justify-content: space-between; padding: 26px 28px 0; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--iris); } 323 .index-foot a { color: var(--iris); } 324 325 /* ============================================================================ 326 7 · SHELVES GRID — 4-col hairline grid of the taxonomy. 327 ========================================================================== */ 328 .shelves-grid { 329 margin-top: 62px; display: grid; grid-template-columns: repeat(4, 1fr); 330 border-top: 1px solid var(--text); border-left: 1px solid var(--text); 331 } 332 @media (max-width: 900px) { .shelves-grid { grid-template-columns: repeat(2, 1fr); } } 333 @media (max-width: 520px) { .shelves-grid { grid-template-columns: 1fr; } } 334 .shelf { 335 display: flex; flex-direction: column; justify-content: space-between; gap: 36px; 336 min-height: 150px; padding: 18px 20px; box-sizing: border-box; color: var(--text); 337 border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); 338 transition: background-color 200ms ease; 339 } 340 .shelf:hover { background: var(--panel); } 341 .shelf__top { display: flex; justify-content: space-between; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc, var(--pine)); } 342 .shelf__title { font-family: var(--font-archivo); font-weight: 900; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; font-stretch: 86%; text-transform: uppercase; text-wrap: pretty; } 343 344 /* ============================================================================ 345 8 · MIRRORS BAND — signal plate: borrowed trees + upstream manifest panel. 346 ========================================================================== */ 347 .mirrors { 348 position: relative; margin-top: 100px; overflow: hidden; 349 background: var(--color-signal-plate); color: var(--color-night-text); padding: 88px 0; 350 } 351 .mirrors__scrim { 352 position: absolute; inset: 0; pointer-events: none; 353 background: linear-gradient(180deg, 354 color-mix(in srgb, var(--color-signal-plate) 93%, transparent) 0%, 355 color-mix(in srgb, var(--color-signal-plate) 62%, transparent) 34%, 356 color-mix(in srgb, var(--color-signal-plate) 58%, transparent) 66%, 357 color-mix(in srgb, var(--color-signal-plate) 90%, transparent) 100%); 358 } 359 .mirrors__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; } 360 @media (max-width: 900px) { .mirrors__inner { grid-template-columns: 1fr; } } 361 .mirrors__eyebrow { font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-signal-meta); } 362 .mirrors__title { margin: 14px 0 0; font-family: var(--font-archivo); font-weight: 800; font-size: clamp(46px, 6vw, 92px); line-height: 0.86; letter-spacing: -0.04em; font-stretch: 88%; text-transform: uppercase; } 363 .mirrors__body { margin: 20px 0 0; max-width: 46ch; font-family: var(--font-archivo); font-size: 15px; line-height: 1.6; color: var(--color-night-text); text-wrap: pretty; } 364 .mirrors__dl { margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 40px; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; } 365 .mirrors__dl dt { color: var(--color-signal-meta); } 366 .mirrors__dl dd { margin: 8px 0 0; color: var(--color-plate-ink); } 367 .mirrors__chip { display: inline-flex; border: 1px solid color-mix(in srgb, var(--color-night-love) 55%, transparent); padding: 3px 8px; color: var(--color-night-love-lift); } 368 .mirrors__cta { margin-top: 36px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--color-night-text); padding: 16px 24px; font-family: var(--font-plex); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-night-text); transition: background-color 220ms ease, color 200ms ease; } 369 .mirrors__cta:hover { background: var(--color-night-text); color: var(--color-signal-plate); } 370 .mirror-panel { border: 1px solid color-mix(in srgb, var(--color-night-love) 34%, transparent); background: color-mix(in srgb, var(--color-signal-plate) 42%, transparent); } 371 .mirror-panel__head { display: flex; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--color-night-love) 28%, transparent); padding: 14px 20px; font-family: var(--font-plex); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-night-love); } 372 .mirror-panel__head .lic { color: var(--color-signal-dim); } 373 .mirror-row { display: grid; grid-template-columns: 34px 1fr 90px; align-items: center; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-night-love) 14%, transparent); padding: 14px 20px; font-family: var(--font-plex); font-size: 11.5px; } 374 .mirror-row .n { color: var(--color-signal-meta); } 375 .mirror-row .path { color: var(--color-night-text); } 376 .mirror-row .count { color: var(--color-signal-dim); text-align: right; } 377 378 /* ============================================================================ 379 9 · CALLOUT — flat plate, 2px accent rule, mono eyebrow. 380 ========================================================================== */ 381 .dcallout { border-left: 2px solid var(--tone, var(--pine)); background: var(--surface); padding: 18px 20px; } 382 .dcallout__label { margin-bottom: 9px; display: flex; align-items: center; gap: 10px; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tone, var(--pine)); } 383 .dcallout__label svg { width: 13px; height: 13px; } 384 .dcallout__body { font-family: var(--font-archivo); font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; } 385 386 /* ============================================================================ 387 10 · HERO — the host the loop mounts into. The loop sets its own inner 388 styles inline (canvas ≥1280px, fluid flow below); this is the frame. 389 ========================================================================== */ 390 .hero-loop { position: relative; width: 100%; overflow: hidden; background: var(--base); min-height: 560px; } 391 .hero-loop a { color: inherit; text-decoration: none; } 392 393 /* ============================================================================ 394 11 · FOOTER — the page's closing dark band, on the signal plate. 395 ========================================================================== */ 396 .dfooter { position: relative; overflow: hidden; background: var(--color-signal-plate); color: var(--color-night-text); } 397 .dfooter__scrim { 398 position: absolute; inset: 0; pointer-events: none; 399 background: linear-gradient(180deg, 400 color-mix(in srgb, var(--color-signal-plate) 92%, transparent) 0%, 401 color-mix(in srgb, var(--color-signal-plate) 55%, transparent) 30%, 402 color-mix(in srgb, var(--color-signal-plate) 50%, transparent) 62%, 403 color-mix(in srgb, var(--color-signal-plate) 86%, transparent) 100%); 404 } 405 .dfooter__inner { position: relative; padding-top: 56px; padding-bottom: 64px; } 406 .dfooter__grid { display: grid; gap: 48px 44px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } 407 .dfooter__wordmark { font-family: var(--font-wordmark); font-weight: 800; letter-spacing: -0.025em; font-stretch: 80%; line-height: 0.88; font-size: clamp(40px, 5vw, 74px); color: var(--color-plate-ink); white-space: nowrap; } 408 .dfooter__wordmark .hy { color: var(--color-night-love); } 409 .dfooter__motto { margin-top: 20px; max-width: 32ch; font-family: var(--font-archivo); font-size: 15px; line-height: 1.55; color: var(--color-night-text); text-wrap: pretty; } 410 .dfooter__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; align-self: start; font-family: var(--font-plex); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } 411 .dfooter__nav a { display: flex; gap: 12px; color: var(--color-plate-ink); transition: padding-left 280ms var(--ease-in), color 200ms ease; } 412 .dfooter__nav a:hover { padding-left: 6px; color: var(--color-night-foam); } 413 .dfooter__nav a .n { color: var(--acc, var(--color-night-foam)); } 414 .dfooter__meta { align-self: start; font-family: var(--font-plex); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-signal-meta); } 415 .dfooter__meta .live { display: flex; align-items: center; gap: 10px; color: var(--color-plate-ink); } 416 .dfooter__meta .row { margin-top: 10px; } 417 .dfooter__meta a { color: var(--color-signal-meta); } 418 .dfooter__meta a:hover { color: var(--color-night-foam); }