/* =========================================================================== RUNNING LIGHT — the header and footer, made cinematic, sitewide =========================================================================== THE GAP THIS CLOSES. A travelling gold comet across the footer's top edge already existed — but only on the home page and its three language mirrors (css/elevate.css, loaded on 4 of 137 public pages). The header never had one at all: only a static, unmoving gradient line (atelier.css, header.nav::after). So "running lights in the headers and footers" was true of four pages and false of the rest of the site. This file is the sitewide baseline. It is linked BEFORE elevate.css in , so on the 4 pages that still carry elevate.css, elevate.css's more elaborate home-page-only version cascades on top of this baseline rather than fighting it. SELECTOR MAP, checked against every other stylesheet before writing this (a first draft got this wrong — see the git history of this file if curious — by reusing header.nav::after, which atelier.css already owns for the header's static line, silently deleting it): header.nav::before FREE -> the header's travelling comet header.nav::after atelier.css owns this (the static rail) — untouched footer::before FREE -> the footer's new static rail footer::after FREE -> the footer's travelling comet (elevate.css defines the same selector for its 4-page bespoke version, which cascades over this wherever both are loaded) THE TECHNIQUE. A dim, static rail — an always-visible hairline, so the edge reads as finished even for a visitor with reduced motion — and, riding it, a bright travelling core with a soft drop-shadow bloom, so it reads unmistakably as a point of LIGHT crossing the edge, not a moving stripe. Header and footer share a period but run on opposite phase (delay offset by half the period) so the two are never seen pulsing in lockstep. REVISED from the first pass, which kept the line at 1.5px with no glow at all: correct in mechanism, invisible in effect — a visitor would need to know exactly where to look and when. This version is built to be seen at a glance: thicker core, a real bloom via layered drop-shadow (cheap — still one pseudo-element, no extra paint layer), a hotter white centre, and a longer visible dwell in the cycle. footer:not(.ap-foot) excludes the admission-apply page's own bespoke footer, which already carries an equivalent thread (css/apply.css, .ap-foot-thread). THE LUXURY PASS. header.nav has exactly one free pseudo-element (::after belongs to atelier.css's static rail — see the selector map above, and the git history's account of the draft that silently deleted it by reusing that same selector). footer:not(.ap-foot) has likewise already spent both of its own (::before the rail, ::after the comet). So a richer effect cannot come from adding elements — every upgrade below lives inside the ONE pseudo-element each edge already had, still one paint layer, still no JS: - the core gradient gained two colour stops either side of the hot centre (a deep bronze shoulder before the amber, an amber shoulder before the white) so the light reads as metal catching a real light source, not a three-stop blend; - a third drop-shadow ring, wide and faint, seats the comet in an ambient wash rather than a hard-edged glow; - layered box-shadow places two small trailing sparks behind the main point — box-shadow is free relative to filter, so this costs nothing extra to paint — reading as a comet WITH a tail, the way a real point of light dragging through darkness leaves an afterglow, rather than a single travelling blip; - a mid-cycle scale pulse (98% -> 100% -> 98%) gives the travel a very slight breathing quality, the difference between a light that moves and a light that is alive. */ header.nav{ position:relative; --rl-period:15s; --rl-delay:0s; } footer:not(.ap-foot){ position:relative; --rl-period:15s; --rl-delay:-7.5s; } /* ---- the rail: brighter and wider than before, so the edge itself reads as gilt even with the comet mid-fade ---- */ footer:not(.ap-foot)::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:2; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(var(--lv-gs,198,161,91),.26) 14%, rgba(var(--lv-gs,198,161,91),.26) 86%, transparent 100%); } /* ---- the comets: a bright core with a real bloom, not a thin gradient line — the drop-shadow is what makes it read as LIGHT rather than as a stripe sliding past ---- */ header.nav::before{ content:""; position:absolute; left:0; bottom:0; height:3px; width:32%; z-index:3; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(var(--lv-gs,198,161,91),.5) 14%, rgba(var(--lv-gbs,233,206,138),.85) 34%, rgb(var(--lv-w36,255,248,228)) 50%, rgba(var(--lv-gbs,233,206,138),.85) 66%, rgba(var(--lv-gs,198,161,91),.5) 86%, transparent 100%); filter: drop-shadow(0 0 3px rgba(var(--lv-gbs,233,206,138),.95)) drop-shadow(0 0 9px rgba(var(--lv-gbs,233,206,138),.6)) drop-shadow(0 0 20px rgba(var(--lv-gbs,233,206,138),.28)); box-shadow: -14px 0 5px -2px rgba(var(--lv-gbs,233,206,138),.22), -26px 0 8px -3px rgba(var(--lv-gs,198,161,91),.13); animation: rl-travel var(--rl-period) cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--rl-delay); will-change: transform, opacity; } footer:not(.ap-foot)::after{ content:""; position:absolute; left:0; top:0; height:3px; width:32%; z-index:3; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(var(--lv-gs,198,161,91),.5) 14%, rgba(var(--lv-gbs,233,206,138),.85) 34%, rgb(var(--lv-w36,255,248,228)) 50%, rgba(var(--lv-gbs,233,206,138),.85) 66%, rgba(var(--lv-gs,198,161,91),.5) 86%, transparent 100%); filter: drop-shadow(0 0 3px rgba(var(--lv-gbs,233,206,138),.95)) drop-shadow(0 0 9px rgba(var(--lv-gbs,233,206,138),.6)) drop-shadow(0 0 20px rgba(var(--lv-gbs,233,206,138),.28)); box-shadow: -14px 0 5px -2px rgba(var(--lv-gbs,233,206,138),.22), -26px 0 8px -3px rgba(var(--lv-gs,198,161,91),.13); animation: rl-travel var(--rl-period) cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--rl-delay); will-change: transform, opacity; } @keyframes rl-travel{ 0% { transform:translateX(-140%) scaleX(.98); opacity:0; } 8% { opacity:1; } 50% { transform:translateX(130%) scaleX(1); } 92% { opacity:1; } 100% { transform:translateX(400%) scaleX(.98); opacity:0; } } /* Reading direction: in RTL the comet — and its trailing sparks, which box-shadow offsets in the opposite direction — travels the way the eye does. */ [dir="rtl"] header.nav::before, [dir="rtl"] footer:not(.ap-foot)::after{ left:auto; right:0; animation-name: rl-travel-rtl; box-shadow: 14px 0 5px -2px rgba(var(--lv-gbs,233,206,138),.22), 26px 0 8px -3px rgba(var(--lv-gs,198,161,91),.13); } @keyframes rl-travel-rtl{ 0% { transform:translateX(140%) scaleX(.98); opacity:0; } 8% { opacity:1; } 50% { transform:translateX(-130%) scaleX(1); } 92% { opacity:1; } 100% { transform:translateX(-400%) scaleX(.98); opacity:0; } } /* The personalisation and reduced-motion systems this site already has — honoured here exactly as the rest of the ambient-motion set is. */ html[data-pc-motion="reduced"] header.nav::before, html[data-pc-motion="reduced"] footer:not(.ap-foot)::after{ animation:none; opacity:0; } @media (prefers-reduced-motion:reduce){ header.nav::before, footer:not(.ap-foot)::after{ animation:none; opacity:0; } }