/* ghost-light — a bare bulb burning on an empty stage. No artwork. The lamp is one inline SVG; everything else is light. Layering note, learned the hard way: #main-background makes its own stacking context, so anything drawn into its pseudo-elements is trapped behind the page and never appears. The ground therefore goes on that element directly, and the lamp hangs off . The lamp and its glow share an anchor so they stay together at any size. --gl-x is the horizontal position, --gl-y the height of the bulb off the floor. The SVG is 900 units tall with the bulb centred 58 from the top, so the image is sized to fill the element height, so the filament lands on --gl-y. Move the lamp with those two values and nothing else. */ :root { --gl-x: calc(50% - 640px); /* just outside the login panel, which is a fixed width centred on the page — a percentage drifts under it as the window narrows */ --gl-y: 56vmin; --gl-warm: 255, 186, 104; --gl-ink: #06070a; --gl-crest: clamp(66px, 11vh, 124px); /* the emblem, and everything spaced off it */ } /* ---- the stage ------------------------------------------------------- */ #main-background { background: /* the floor catching the light */ radial-gradient(ellipse 70vmin 16vmin at var(--gl-x) 100%, rgba(var(--gl-warm), 0.13), transparent 70%), /* boards receding into the dark */ linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, #000 100%), radial-gradient(ellipse 120% 80% at var(--gl-x) 40%, #12131a 0%, var(--gl-ink) 60%, #000 100%) !important; } /* ---- the light ------------------------------------------------------- */ body.join::before { content: ""; position: fixed; left: var(--gl-x); bottom: var(--gl-y); width: 0; height: 0; border-radius: 50%; z-index: 1; pointer-events: none; box-shadow: 0 0 5vmin 2vmin rgba(var(--gl-warm), 0.60), 0 0 18vmin 7vmin rgba(var(--gl-warm), 0.26), 0 0 52vmin 20vmin rgba(var(--gl-warm), 0.13), 0 0 100vmin 42vmin rgba(var(--gl-warm), 0.06); animation: gl-breathe 7.3s ease-in-out infinite; } /* ---- the lamp -------------------------------------------------------- */ body.join::after { content: ""; position: fixed; left: var(--gl-x); bottom: 0; width: 20vmin; height: calc(var(--gl-y) + 4vmin); transform: translateX(-50%); z-index: 2; pointer-events: none; background: url("data:image/svg+xml,") center bottom / auto 100% no-repeat; animation: gl-breathe 7.3s ease-in-out infinite; } /* ---- everything the player reads ------------------------------------- */ body.join #main-header, body.join #join-game, body.join #watermark { position: relative; z-index: 4; } /* Foundry builds this page client-side and everything sits in one flex column, so an empty panel takes no height and the title starts low, then gets shoved up when the content lands. Rather than animate over that shift, wait it out: nothing is shown until the panel has children, by which point the layout has settled and a transform is the only thing moving. */ html.gl-anim:not(.gl-ready) body #main-header { opacity: 0; } /* Your silhouette in place of the d20. Foundry draws its logo as the header's own background, so this is a swap rather than any change to the markup. A black shape on a black stage would vanish, so the halo goes behind it — the same warm light as the bulb, and he reads as someone standing in front of it. Layers paint front to back, so the logo is listed first. */ body.join #main-header { height: auto; /* Foundry fixes this at the title height; the emblem needs room above it */ padding-top: calc(var(--gl-crest) * 1.15); background-image: none; background-repeat: no-repeat, no-repeat; } html.gl-ready body #main-header { animation: gl-raise 1300ms 100ms cubic-bezier(.65, 0, .25, 1) both; } /* The emblem, as an element rather than a background layer. A background is clipped to the header box, which sheared the top off the glow; an element can overflow, and drop-shadow follows the alpha channel — so the light traces the silhouette instead of sitting behind it as a disc. */ body.join #main-header::before { content: ""; position: absolute; top: 0; left: 50%; width: var(--gl-crest); height: var(--gl-crest); transform: translateX(-50%); background: url("/login-theme/img/fantom-logo.png") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(var(--gl-warm), 0.75)) drop-shadow(0 0 18px rgba(var(--gl-warm), 0.40)); } #main-header h1 { font-family: Signika, "Trebuchet MS", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.08em; color: #f7efdd; text-shadow: 0 0 30px rgba(var(--gl-warm), 0.42), 0 3px 10px rgba(0, 0, 0, 0.9); } /* Hidden only while theme.js says the panel is still empty. Keyed on a class never loads, neither class is set, nothing hides, and the page renders plainly. See theme.js. */ html.gl-anim:not(.gl-ready) body #join-game { opacity: 0; } #join-game { background: rgba(6, 7, 10, 0.74); backdrop-filter: blur(7px); border: 1px solid rgba(var(--gl-warm), 0.20); border-radius: 4px; box-shadow: 0 0 60px rgba(var(--gl-warm), 0.09), 0 22px 60px rgba(0, 0, 0, 0.75); opacity: 0; /* revealed below, once it has content */ } #world-description { color: #a9a294; line-height: 1.6; } /* Pinned: it is a footnote, not part of the composition, so it should not ride up and down as the panel changes height. */ body.join #watermark { position: fixed; bottom: 1.2rem; left: 0; right: 0; opacity: 0.28; } /* Foundry publishes every username here and gives no setting to stop it. This only hides it — the names remain in the page source. Delete the rule if you would rather people picked their name from a list. */ #autocomplete { display: none !important; } /* ---- motion ---------------------------------------------------------- */ /* A filament settling, not a candle guttering. Irregular on purpose: even spacing reads as a pulse, and a pulse reads as a machine. */ @keyframes gl-breathe { 0%, 100% { opacity: 1; } 17% { opacity: 0.94; } 21% { opacity: 1; } 46% { opacity: 0.89; } 49% { opacity: 0.98; } 73% { opacity: 0.93; } 78% { opacity: 1; } } /* Centre stage first, then up out of the way. The bulb is already lit when this starts, so the title reads as something the light found. */ @keyframes gl-raise { 0%, 30% { opacity: 1; transform: translateY(30vh) scale(1.05); } /* hold centre stage */ 100% { opacity: 1; transform: none; } } @keyframes gl-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.join::before, body.join::after, #join-game { animation: none; } body.join #main-header { opacity: 1; } } /* Below this the panel reaches the lamp, so it steps behind and the light does the work instead. */ @media (max-width: 1450px) { :root { --gl-x: 50%; --gl-y: 64vmin; } body.join::after { opacity: 0.3; } body.join::before { opacity: 0.45; } } /* Foundry builds the login panel client-side, so for a moment it exists as an empty box. Styling it before then shows a bare bar across the screen. Reveal it only once something is actually inside. */ html.gl-ready body #join-game { animation: gl-arrive 700ms 1200ms ease-out both; } /* On a short screen there is no room above the title — stock Foundry only just fits the panel at 768, and the crest was costing about a hundred pixels we did not have. So the emblem moves alongside the title instead of above it, which adds no height at all. The offset is measured from the centre because the title is a fixed size, so it sits just clear of the F. */ @media (max-height: 900px) and (min-width: 1250px) { body.join #main-header { padding-top: 0; } body.join #main-header::before { --gl-crest: 84px; top: 50%; left: calc(50% - 390px); transform: translate(-50%, -50%); } }