/* ========================================================================== WAVE 155 - DIE GOLDENE IRIS Two things were true at once and only one of them was the pupil. 1) The dial's own hole is a fixed dark disc about 32% wide. That is what the eye was reading as "the pupil", and it never changed size, because it is a hole, not a pupil. The real core now carries a thin gold rim, so its growth is visible against that hole from the very first pixel. 2) At full black the hole was still legible as a darker circle inside the black. Instead of fighting it: at the moment everything goes black, that inner circle turns gold. ========================================================================== */ /* the growing core gets an edge, so growth is readable at any size */ .w134-center { box-shadow: inset 0 0 22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(236, 196, 120, calc(.30 + var(--ka-pe, 0) * .45)), 0 0 calc(4px + var(--ka-pe, 0) * 18px) rgba(236, 176, 94, calc(.16 + var(--ka-pe, 0) * .5)) !important; } /* the iris: sized to the dial's hole, black until the orb is black, then gold */ .w134-iris { position: absolute; inset: 34%; border-radius: 50%; z-index: 11; pointer-events: none; opacity: var(--ka-iris, 0); /* it has to out-glow the nodes, or it reads as a flat gold disc sitting in a black hole instead of the one thing still alight */ background: radial-gradient(circle, #fffaf0 0%, #ffe9b8 26%, #f3c964 58%, #dba53a 84%, rgba(196, 141, 44, .7) 95%, rgba(196, 141, 44, 0) 100%); box-shadow: 0 0 calc(8px + var(--ka-iris, 0) * 22px) calc(2px + var(--ka-iris, 0) * 8px) rgba(255, 216, 130, calc(var(--ka-iris, 0) * .95)), 0 0 calc(22px + var(--ka-iris, 0) * 54px) calc(6px + var(--ka-iris, 0) * 20px) rgba(216, 172, 92, calc(var(--ka-iris, 0) * .6)), inset 0 0 12px rgba(255, 236, 190, .35); transition: opacity .12s linear; } @media (prefers-reduced-motion: reduce) { .w134-iris { transition: none; } } /* ========================================================================== WAVE 155 - DER TICKER BEKOMMT EINEN FESTEN PLATZ It used to mount after whatever the first block on the page happened to be, so it sat under the nav on one page, mid-page on the next, and inside the hero on a third. Now it is always the first thing in main and it sticks directly under the navigation on every route. ========================================================================== */ .wave22a-signal-slot { position: sticky; top: var(--header-height, 72px); z-index: 46; width: 100%; margin: 0; } .wave22a-signal-bar { width: 100%; border-bottom: 1px solid rgba(226, 237, 252, .10); background: linear-gradient(180deg, rgba(6, 11, 20, .96), rgba(4, 7, 13, .94)); backdrop-filter: blur(8px); } /* the homepage stage starts under the ticker, not behind it */ body.home-page .wave22a-signal-slot { z-index: 46; } /* the labels now hang below the line, so they anchor from their top edge */ .ka-rail__stop { transform: translate(-50%, 0) scale(var(--sc, 1)) !important; transform-origin: 50% 0 !important; padding: 12px 0 0 !important; } .ka-rail__stop::before { top: 0; bottom: auto !important; } /* ========================================================================== WAVE 155 - DER TICKER SPRICHT DIE SPRACHE DES HEADERS The left-hand label was gold at .54rem in a different rhythm to the nav directly above it, so the two bands read as two systems stacked. It now uses the same mono, the same tracking and the same white as the navigation. ========================================================================== */ .wave22a-signal-bar .signal-ticker__label { display: inline-flex !important; align-items: center; gap: .5rem; color: rgba(246, 241, 231, .92) !important; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-weight: 700 !important; font-size:0.6875rem !important; letter-spacing: .18em !important; text-transform: uppercase; white-space: nowrap; } .wave22a-signal-bar .signal-ticker__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d8ac5c; box-shadow: 0 0 8px rgba(216, 172, 92, .9); } .wave22a-signal-bar .signal-ticker__inner { width: min(100% - clamp(1.5rem, 4vw, 3rem), 1480px); padding-block: .58rem; } @media (max-width: 900px) { .wave22a-signal-bar .signal-ticker__label { font-size:0.6875rem !important; letter-spacing: .14em !important; } } /* the left block was a gold slab plus a navy slab with a chevron between them - a third visual idiom, right under the navigation. It now reads as one quiet mono label in the header's own white. */ .wave22a-signal-bar .signal-ticker__brand, .wave22a-signal-bar .signal-ticker__sig { display: inline-block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: uppercase; } .wave22a-signal-bar .signal-ticker__brand::before, .wave22a-signal-bar .signal-ticker__brand::after, .wave22a-signal-bar .signal-ticker__sig::before, .wave22a-signal-bar .signal-ticker__sig::after { content: none !important; } .wave22a-signal-bar .signal-ticker__sig { color: rgba(246, 241, 231, .55) !important; } .wave22a-signal-bar .signal-ticker__sig::before { content: "ยท " !important; } /* the gold slab sat on the label itself, not on its children */ .wave22a-signal-bar .signal-ticker__label { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; clip-path: none !important; -webkit-clip-path: none !important; filter: none !important; } .wave22a-signal-bar .signal-ticker__label::after { content: none !important; } .wave22a-signal-bar .signal-ticker__label { align-self: center !important; font-size:0.6875rem !important; gap: .55rem; } .wave22a-signal-bar .signal-ticker__label::before { width: 5px; height: 5px; } /* ========================================================================== WAVE 164 - der Ticker deckt nichts mehr zu Sticky was right, but the bar was half transparent, so headings sliding under it read as broken rather than as passing behind. It is now opaque, and the document reserves the bar's height for anchor jumps so nothing lands underneath it. The signal dot moves from gold to cyan - cyan is the system-and-data colour in this house, and gold at that size read as a second brand mark right under the first one. ========================================================================== */ :root { --ka-ticker-h: 40px; } html { scroll-padding-top: calc(var(--header-height, 72px) + var(--ka-ticker-h) + 12px); } .wave22a-signal-bar { background: #060b14 !important; backdrop-filter: none !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); } .wave22a-signal-bar .signal-ticker__label::before { width: 4px !important; height: 4px !important; background: #5dc9d6 !important; box-shadow: 0 0 6px rgba(93, 201, 214, .9) !important; } /* WAVE 197 - das schwarze Loch im weissen Zifferblatt, 67 Prozent kleiner. Der innere Rand der weissen Skala lag bei 46 Prozent des Zifferblatts, also stand in der Mitte eine schwarze Scheibe fast so breit wie die Marke selbst. Der Rand liegt jetzt bei 15 Prozent: ein Drittel des alten Radius. */ .w134-white { -webkit-mask: radial-gradient(circle, transparent 0 15%, #000 21% 95%, transparent 100%) !important; mask: radial-gradient(circle, transparent 0 15%, #000 21% 95%, transparent 100%) !important; } /* die Marke behaelt ihren schwarzen Grund: eine kleine Scheibe, ein Drittel der alten Flaeche, exakt hinter dem Zeichen. Der Haken sitzt am Iris-Layer, weil .w134-orb::after schon vom Glanz belegt ist. */ .w134-iris::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, #000 0 56%, rgba(0,0,0,.94) 74%, rgba(0,0,0,0) 100%); opacity: 1; pointer-events: none; } .w134-iris { opacity: 1; } .w134-iris > *, .w134-iris { background-clip: padding-box; } /* die Goldfaerbung der Iris bleibt an ihr Signal gebunden */ .w134-iris { background: radial-gradient(circle, rgba(255,250,240, var(--ka-iris, 0)) 0%, rgba(255,233,184, var(--ka-iris, 0)) 26%, rgba(243,201,100, var(--ka-iris, 0)) 58%, rgba(219,165,58, calc(var(--ka-iris, 0) * .9)) 84%, rgba(219,165,58, 0) 100%) !important; } /* ========================================================================== WAVE 230 - die Marke kommt zurueck in die Pupille Forensics: nothing was ever deleted. The span (.w134-sig), the asset and the --dk fade in wave23e-companion.js were all still in place and correct. Wave 197 (block above) gave the mark a black ground - "exakt hinter dem Zeichen" - but hung it on .w134-iris::before. .w134-iris carries z-index 11 and .w134-sig carries 8, so the ground never landed behind the mark: it landed three layers on top of it, an opaque ~50px disc over a ~51px mark, and the same block forced .w134-iris{opacity:1} so it painted permanently instead of only in the gold state. script.js injects this sheet on every route, so the DK went dark estate-wide in one step. Two corrections, no new element and no new !important: 1) the mark is lifted above its own ground (12 > 11). The engine already fades --dk to 0 between pupil 0.20 and 0.42, well before --ka-iris lights the gold, so the iris state is untouched. 2) it is cut out of the tightly trimmed original mark and filled with gold at low alpha. dk-white.png carries a large transparent margin, so at center/96% it stamped a small off-centre white glyph; masked, sized to the dial's hole and lit at .38 it reads as an engraving in the black. ========================================================================== */ .w134-orb .w134-sig { inset: 36%; z-index: 12; background-image: none; background-color: rgb(226, 186, 106); -webkit-mask: url(/assets/logo-kulic-dk-original-transparent.png) center/contain no-repeat; mask: url(/assets/logo-kulic-dk-original-transparent.png) center/contain no-repeat; filter: drop-shadow(0 0 5px rgba(216, 172, 92, .20)); opacity: calc(var(--dk, .96) * .38); }