/* ============================================================================ NordMove — THE ROUND "TOP" BUTTON ============================================================================ Replaces the little 3D robot in the bottom-right corner. Two lights live on the edge of the circle: 1. the POINTER light — follows the mouse: it always sits on the side where the cursor is (the angle is written by top-button.js into --top-ring-angle); 2. the IDLE light — when no pointer is driving it, the ring turns by itself, slowly, all the way round. The two never fight: while the pointer drives, the animation stands still and the angle jumps straight to the cursor; when the pointer lets go, the animation carries on from the same angle (a registered property can be animated, which is what makes that handover seamless). Colours: the warm gold of the site (--brand-gold / --accent), with a bright core so the light reads as light on the dark ground. Motion is optional, as everywhere else on this site: with `prefers-reduced-motion: reduce` the ring stands still as a plain gold border. The file has no dependency on any library. ========================================================================= */ /* The light turns with `transform: rotate()`, one animation for all three layers (ring, glow, spark) so they can never drift apart. NOTHING steers it: the owner's word was "маусот сеушто го прати светлото - требаше да се тргне", so there is no pointer input anywhere in this file or in top-button.js. An earlier version animated the gradient's `from` angle through a registered property instead. It was measured and it did not work: five frames taken 0.8 s apart came out pixel-identical (peak 304 degrees every time), so the ring never actually turned. Rotating the element itself needs no such support and cannot fail silently. The layers are square and centred rather than inset with the button's radius: the gradient and the mask are both round, so turning the square turns only the light and changes nothing else. */ @keyframes top-ring-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .top-btn { --top-ring-size: 48px; /* the diameter of the button */ position: fixed; right: 22px; bottom: 22px; z-index: 80; /* above the page, below nothing else */ display: inline-flex; align-items: center; justify-content: center; width: var(--top-ring-size); height: var(--top-ring-size); padding: 0; border: 0; border-radius: 50%; /* Real button, not a decorated div: it stays reachable with the keyboard. */ font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; /* Sentence case on purpose. An all-caps label with wide tracking is one of the stock signals of a generated page (frontend-design names it), and the word is the clearest label on this button, so nothing is added to it. */ color: var(--page-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; /* Dark glass, exactly like the rest of the site's floating controls; the glow underneath (::after) lifts it off the page. The soft inner line is what makes the button readable where the ring is dark: without it the face sat at 1.1:1 against the page (measured), which is under the 3:1 a control boundary needs. At .40 it gives 3.55:1 against the face. */ background: radial-gradient(120% 120% at 50% 0%, rgba(var(--accent-rgb), .14), rgba(0, 0, 0, 0) 62%), var(--section-alt); box-shadow: inset 0 0 0 1px rgba(246, 242, 234, .40), 0 10px 30px rgba(0, 0, 0, .45); /* It arrives when the page has been scrolled: the same quiet courtesy as the link it replaces. Hidden away it is not clickable and not focusable. */ opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .35s, color .2s ease; } /* The label. Nothing else: at this size a second glyph would only compete with the word (measured earlier with an arrow above it - the arrow carried no meaning the word did not already carry). */ .top-btn__face { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; /* the cursor stays on the button itself */ } /* ------------------------------ the ring -------------------------------- */ /* A hairline ring: the border lives in the square's own 1.5px padding box, and the mask keeps only that outer band, so the glass and the word stay clean. The gradient runs from transparent through the warm gold and ends in a bright head — that head is the light. It starts at the top (0deg) and JavaScript feeds the cursor angle straight into the rotation. */ .top-btn__ring, .top-btn__glow, .top-btn__spark { position: absolute; top: 50%; left: 50%; width: var(--top-ring-size); height: var(--top-ring-size); margin: calc(var(--top-ring-size) / -2) 0 0 calc(var(--top-ring-size) / -2); border-radius: 50%; pointer-events: none; } .top-btn__ring { padding: 1.5px; /* The dark part of the ring is NOT invisible: at alpha .20 it gave 1.5:1 against the page, below the 3:1 that WCAG asks of a non-text control boundary (measured). At .45 the dark side of the ring reads 3.11:1 and the bright head still stands far above it, so the light keeps its contrast against the ring it travels on. */ background: conic-gradient( rgba(var(--accent-rgb), .45) 0deg, rgba(var(--accent-rgb), .45) 210deg, #e0a327 272deg, #ffd97a 318deg, #fff6dc 344deg, #ffd97a 352deg, #e0a327 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } /* The soft light spilling off the edge. Weak, because it sits under the ring and only exists to make the circle look lit rather than drawn. */ .top-btn__glow { /* 3px wider on every side, so the halo reaches past the ring. */ width: calc(var(--top-ring-size) + 6px); height: calc(var(--top-ring-size) + 6px); margin: calc((var(--top-ring-size) + 6px) / -2) 0 0 calc((var(--top-ring-size) + 6px) / -2); background: conic-gradient( rgba(var(--accent-rgb), 0) 0deg, rgba(var(--accent-rgb), 0) 225deg, rgba(243, 193, 75, .45) 300deg, rgba(255, 244, 214, .60) 344deg, rgba(243, 193, 75, .45) 360deg ); -webkit-mask: radial-gradient(closest-side, transparent 68%, #000 84%); mask: radial-gradient(closest-side, transparent 68%, #000 84%); filter: blur(7px); } /* The bright head of the light, riding on the ring at the same angle. */ .top-btn__spark { background: radial-gradient( 6px 6px at 50% 1.5%, #fffdf6 0%, #ffd97a 42%, rgba(255, 217, 122, 0) 100% ); } /* --------------------------- the states ---------------------------------- */ /* THE LIGHT TURNS BY ITSELF, ALWAYS. No pointer drives it any more (the owner's word, 13.10.2026: "маусот сеушто го прати светлото - требаше да се тргне"). One animation for all three layers, so they can never drift apart. */ .top-btn__ring, .top-btn__glow, .top-btn__spark { animation: top-ring-turn 5.5s linear infinite; } /* It has arrived on screen. */ .top-btn--in { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s, color .2s ease; } /* A HOVER STILL ANSWERS, it just does not steer the light. */ .top-btn:hover { color: var(--brand-gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 22px rgba(var(--accent-rgb), .22); } /* THE KEYBOARD IS ON IT: unmistakable, and it uses the site's own focus treatment rather than inventing a second one. */ .top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .top-btn:focus-visible .top-btn__ring { background: var(--accent); } /* A finger gets a slightly larger target than a cursor needs (44px is the smallest comfortable touch target, and this is well past it). */ @media (pointer: coarse) { .top-btn { --top-ring-size: 92px; right: 16px; bottom: 16px; } } /* Motion is optional here too: a still gold ring, no turning. */ @media (prefers-reduced-motion: reduce) { .top-btn, .top-btn--in { transition: none; } .top-btn__ring, .top-btn__glow, .top-btn__spark { animation: none; } .top-btn__ring { background: linear-gradient(160deg, var(--accent), var(--accent-2)); } .top-btn__glow { display: none; } .top-btn__spark { display: none; } } /* Nothing of this belongs on paper. */ @media print { .top-btn { display: none !important; } } /* ============================================================================ THE LIGHT ON THE PILL BUTTONS (owner's word, 13.10.2026 - second attempt) ============================================================================ "сите пилули + копчето - да се движи тоа светлото по линијата - не мора да прати глушец. на сите страни" THE FIRST ATTEMPT FAILED and is the reason this one is built differently. It put a masked conic gradient on the button's `::after` and rotated it. On a pill shape the conic gradient's seam (where 0deg meets 360deg) is not fully removed by `mask-composite`, so every pill grew a gold TAIL hanging out of its bottom edge down the page. The owner saw it before I did. THIS ONE CANNOT DO THAT, BY CONSTRUCTION: - there is no conic gradient and no mask anywhere in it; - the light lives INSIDE the button: `overflow: hidden` on the button clips it to the pill's own rounded shape, so nothing can escape the outline - that is the whole reason for this shape of the effect; - it is one linear-gradient band (a soft warm window) that travels across the button from left to right, over the button's own colour, for ever: 3.6 s. It is a light passing over the button, not a light walking on its rim. On a pill that is short and wide this reads better anyway - a rim light on a 54 px-tall pill is a hairline nobody notices. A real