/* ============================================================ rolfcore.com — design tokens + shared styles Step 2 design pass. Dark-only. Mobile-first. Tokens here are the source of truth for Step 3 (Claude Code). ============================================================ */ /* ---- Fonts (prototype: Google Fonts; production: self-host) ---- */ /* Fonts: self-hosted (woff2 in assets/fonts/). To revert to the Google Fonts CDN, replace this @import with the commented CDN line below. */ @import url('fonts.css'); /* @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Silkscreen:wght@400;700&display=swap'); */ /* ============================================================ TOKENS ============================================================ */ :root { /* --- Night base (cool, blue-black derived from moonlight) --- */ --bg: #06070d; /* page base — deepest night */ --bg-1: #0a0c16; /* raised sections */ --surface: #10131f; /* cards */ --surface-2: #161a2a; /* nested / hover */ --surface-3: #1d2237; /* inputs, chips */ /* --- Hairlines & overlays --- */ --line: rgba(205, 214, 244, 0.10); --line-strong: rgba(205, 214, 244, 0.18); --scrim: rgba(4, 5, 10, 0.72); /* --- Moonlit text --- */ --text: #e8ebf7; /* primary */ --text-dim: #a3abc6; /* secondary */ --text-faint: #6a7290; /* tertiary / meta */ --text-ghost: #444b66; /* disabled, placeholders */ /* --- Primary accent = moonlight --- */ --moon: #cdd6f4; --moon-soft: #aeb8de; --moon-glow: rgba(205, 214, 244, 0.16); --moon-glow-2: rgba(157, 180, 255, 0.10); /* --- Moon alignment colors (the trio) --- */ --blood: #d4566a; /* evil */ --blood-glow: rgba(212, 86, 106, 0.22); --meow: #d4a6d8; /* neutral — soft lilac */ --meow-glow: rgba(212, 166, 216, 0.20); --harvest: #e0a955; /* good — warm gold */ --harvest-glow:rgba(224, 169, 85, 0.20); /* --- additional event moons (same scheme: shared chroma, varied hue) --- */ --holy: #ece4c2; /* good — radiant pale gold */ --holy-glow: rgba(236, 228, 194, 0.22); --quiet: #cdd6f4; /* neutral — plain moonlight */ --quiet-glow: rgba(205, 214, 244, 0.18); --black: #4a5680; /* evil — drained cold steel */ --black-glow: rgba(157, 180, 255, 0.20); --gaunt: #c2c096; /* evil — sallow ash */ --gaunt-glow: rgba(194, 192, 150, 0.20); --phantom: #8ec9d8; /* evil — spectral cyan */ --phantom-glow:rgba(142, 201, 216, 0.22); --beckoning: #93d6b0; /* good — soul green */ --beckoning-glow:rgba(147, 214, 176, 0.20); /* --- Eclipse / withheld --- */ --eclipse: #11141f; --eclipse-rim: rgba(157, 180, 255, 0.22); /* --- EVENT SKIN (see "EVENT SKIN" section below) --- Default = ordinary moonlight. When a revealed full-moon event is active, mark.js sets data-moon-event on and these three tokens re-map to that moon's alignment color. Any surface that should "feel the moon" uses these instead of --moon directly. */ --event: var(--moon); --event-soft: var(--moon-soft); --event-glow: var(--moon-glow); /* --- Status --- */ --online: #6fcf8e; --online-glow: rgba(111, 207, 142, 0.18); /* --- Type --- */ --font-body: 'Public Sans', system-ui, -apple-system, sans-serif; --font-pixel: 'Silkscreen', monospace; /* type scale (mobile-first, fluid) */ --t-display: clamp(2.6rem, 9vw, 5rem); --t-h1: clamp(2rem, 6.2vw, 3.25rem); --t-h2: clamp(1.55rem, 4.2vw, 2.25rem); --t-h3: clamp(1.2rem, 3vw, 1.5rem); --t-lead: clamp(1.05rem, 2.4vw, 1.3rem); --t-body: 1.0625rem; --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-pixel-sm:0.6875rem; /* --- Spacing scale --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* --- Radii --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* --- Shadows / glows --- */ --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -24px rgba(0,0,0,0.8); --shadow-pop: 0 24px 60px -28px rgba(0,0,0,0.9); /* --- Layout --- */ --maxw: 1120px; --maxw-prose: 720px; --nav-h: 64px; --tab-h: 64px; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* scrollbar-gutter reserves the scrollbar so short↔tall pages don't shift horizontally on navigation. The living logo also seeds its last-known phase from localStorage (mark.js) so it paints the correct moon instantly on each page rather than flashing a clock fallback. (A true never-unloads header is a separate SPA-shell change — see notes.) */ body { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } :focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; border-radius: 3px; } ::selection { background: rgba(205,214,244,0.22); color: #fff; } /* starfield / night atmosphere applied to via .nightfall */ .nightfall { background: radial-gradient(1200px 700px at 80% -10%, rgba(157,180,255,0.08), transparent 60%), radial-gradient(900px 600px at 10% 0%, rgba(205,214,244,0.05), transparent 55%), var(--bg); } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); } .prose-wrap { width: 100%; max-width: var(--maxw-prose); margin-inline: auto; padding-inline: var(--s-5); } .section { padding-block: var(--s-8); } .section--tight { padding-block: var(--s-7); } .stack > * + * { margin-top: var(--s-4); } /* page shell adds bottom padding on mobile for the tab bar */ .page { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); } @media (min-width: 880px) { .page { padding-bottom: 0; } } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .kicker { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: 0.06em; color: var(--moon-soft); text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--s-2); } .kicker::before { content: ""; width: 7px; height: 7px; background: var(--event); box-shadow: 0 0 10px var(--event-glow); transition: background .8s ease, box-shadow .8s ease; } h1, h2, h3 { line-height: 1.1; letter-spacing: -0.01em; font-weight: 800; } .h1 { font-size: var(--t-h1); } .h2 { font-size: var(--t-h2); } .h3 { font-size: var(--t-h3); font-weight: 700; } .lead { font-size: var(--t-lead); color: var(--text-dim); line-height: 1.5; } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } .pixel { font-family: var(--font-pixel); } .shepherd { font-style: italic; color: var(--moon-soft); letter-spacing: 0.01em; } /* ============================================================ WORDMARK / MOON-MARK ============================================================ */ .wordmark { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .wordmark__mark { --c: var(--moon); width: 1.05em; aspect-ratio: 1; /* height always tracks width — cells stay square even when width is overridden */ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; flex: 0 0 auto; } .wordmark__mark i { background: color-mix(in srgb, var(--c) 88%, transparent); border-radius: 0.5px; } .wordmark__mark i.off { background: rgba(205,214,244,0.10); } /* logo terrain: a couple of darker crater cells once the body fills in */ .wordmark__mark i.mk-crater { background: color-mix(in srgb, var(--c) 52%, #1b2440); } /* new moon: dark disc with a bright, crisp moonlight silhouette outline */ .wordmark__mark--new i { background: rgba(20,24,38,0.92); } .wordmark__mark--new { box-shadow: 0 0 0 1.5px rgba(205,214,244,0.85); border-radius: 1px; } /* living logo: TRUE crossfade between moon states. The next face fades in over the current one via a .mark-xfade overlay — the mark is never empty. Cells are painted with inline colors (not var(--c)) so the old face holds steady beneath the overlay while the glow color transitions. */ .wordmark__mark { position: relative; transition: filter .7s ease, box-shadow .7s ease; } .mark-xfade { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; opacity: 0; transition: opacity .65s ease; pointer-events: none; } .mark-xfade i { border-radius: 0.5px; } /* phase text lines morph via JS scramble (mark.js textMorph) — no CSS fade */ @media (prefers-reduced-motion: reduce) { .wordmark__mark, .mark-xfade { transition: none; } } /* on a full-moon event night the mark glows its alignment */ .wordmark__mark--event { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 65%, transparent)); } .wordmark--lg { font-size: clamp(1.5rem, 4.5vw, 2.4rem); letter-spacing: 0.2em; } .wordmark--xl { font-size: var(--t-display); letter-spacing: 0.14em; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 13px 20px; border-radius: var(--r-md); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.01em; border: 1px solid transparent; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: linear-gradient(180deg, #e7ecfb, var(--moon)); color: #11131d; box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 10px 30px -12px var(--moon-glow); } .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 14px 36px -10px rgba(205,214,244,0.3); } .btn--ghost { background: rgba(205,214,244,0.04); border-color: var(--line-strong); color: var(--text); } .btn--ghost:hover { background: rgba(205,214,244,0.09); border-color: var(--moon-soft); } .btn--block { width: 100%; } .btn__ico { width: 18px; height: 18px; } /* ============================================================ BADGES / CHIPS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-3); color: var(--text-dim); } .badge__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text-faint); } .badge--online { color: #cfeede; border-color: rgba(111,207,142,0.3); background: rgba(111,207,142,0.08); } .badge--online .badge__dot { background: var(--online); box-shadow: 0 0 10px var(--online-glow); animation: pulse 2.4s ease-in-out infinite; } /* asleep = server offline — red, paired with the 404 Moon logo state */ .badge--asleep { color: #f0c4cb; border-color: rgba(212,86,106,0.35); background: rgba(212,86,106,0.10); } .badge--asleep .badge__dot { background: var(--blood); box-shadow: 0 0 10px var(--blood-glow); } .badge--offline { color: var(--text-faint); } .badge--offline .badge__dot { background: var(--text-ghost); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} } @media (prefers-reduced-motion: reduce){ .badge--online .badge__dot { animation: none; } } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-dim); background: rgba(205,214,244,0.03); } /* alignment tags */ .tag { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing:0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-sm); } .tag--evil { color: var(--blood); background: var(--blood-glow); } .tag--neutral { color: var(--meow); background: var(--meow-glow); } .tag--good { color: var(--harvest); background: var(--harvest-glow); } /* ============================================================ CARDS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-card); } .card--link { transition: border-color .18s ease, transform .18s ease, background .18s ease; } .card--link:hover { border-color: var(--line-strong); transform: translateY(-3px); background: var(--surface-2); } .card__eyebrow { display:flex; align-items:center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); } .arrow { color: var(--text-faint); transition: transform .18s ease, color .18s ease; } .card--link:hover .arrow { color: var(--moon); transform: translateX(3px); } /* ============================================================ NAVIGATION — desktop top bar ============================================================ */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: none; align-items: center; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); } .topbar .wrap { display: flex; align-items: center; gap: var(--s-6); width: 100%; } .topbar__links { display: flex; gap: var(--s-2); margin-left: auto; } .navlink { font-size: var(--t-sm); font-weight: 600; color: var(--text-dim); padding: 8px 12px; border-radius: var(--r-sm); transition: color .15s ease, background .15s ease; } .navlink:hover { color: var(--text); background: rgba(205,214,244,0.06); } .navlink[aria-current="page"] { color: var(--text); } .navlink[aria-current="page"]::after { content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background: var(--event); box-shadow: 0 0 8px var(--event-glow); transition: background .8s ease, box-shadow .8s ease; } @media (min-width: 880px) { .topbar { display: flex; } } /* mobile bottom tab bar */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); } .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-faint); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; } .tab svg { width: 21px; height: 21px; } .tab[aria-current="page"] { color: var(--event); transition: color .8s ease; } .tab[aria-current="page"] svg { filter: drop-shadow(0 0 6px var(--event-glow)); } @media (min-width: 880px) { .tabbar { display: none; } } /* mobile mini-header (wordmark + live status) */ .minihead { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; height: 56px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); } @media (min-width: 880px) { .minihead { display: none; } } .minihead .wrap { display: flex; align-items: center; } /* compact live status in the mobile top bar (top-right) */ .status-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); } .status-mini__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--online); box-shadow: 0 0 8px var(--online-glow); animation: pulse 2.4s ease-in-out infinite; } .status-mini__label::after { content: "luna.rolfcore.com"; } html[data-server="offline"] .status-mini__dot { background: var(--blood); box-shadow: 0 0 8px var(--blood-glow); animation: none; } html[data-server="offline"] .status-mini { color: var(--blood); } @media (prefers-reduced-motion: reduce) { .status-mini__dot { animation: none; } } /* ============================================================ MOON SQUARE (rendered by moon.js; styles here) ============================================================ */ .moon { --cell: rgba(205,214,244,0.12); --lit: var(--moon); display: grid; aspect-ratio: 1; width: 120px; gap: 2px; padding: 0; image-rendering: pixelated; position: relative; filter: drop-shadow(0 0 22px var(--moon-glow)); } .moon i { background: var(--cell); } .moon i.lit { background: var(--lit); } /* terrain texture: darker maria (craters/seas) + subtle highlands. Both derive from --lit so event-color moons get texture too. */ .moon i.crater { background: color-mix(in srgb, var(--lit) 58%, #1b2440); } .moon i.hi { background: color-mix(in srgb, var(--lit) 80%, #ffffff); } /* new moon: dark disc, bright crisp moonlight rim tracing the edge */ .moon i.shadow { background: var(--eclipse); } .moon i.rim { background: rgba(205,214,244,0.55); } .moon--new { --cell: var(--eclipse); filter: none; box-shadow: 0 0 0 1px rgba(205,214,244,0.45), 0 0 26px -8px rgba(157,180,255,0.35); border-radius: 2px; } .moon--blood { --lit: var(--blood); filter: drop-shadow(0 0 26px var(--blood-glow)); } .moon--meow { --lit: var(--meow); filter: drop-shadow(0 0 26px var(--meow-glow)); } .moon--harvest { --lit: var(--harvest); filter: drop-shadow(0 0 26px var(--harvest-glow)); } .moon--holy { --lit: var(--holy); filter: drop-shadow(0 0 26px var(--holy-glow)); } .moon--quiet { --lit: var(--quiet); filter: drop-shadow(0 0 26px var(--quiet-glow)); } .moon--black { --lit: var(--black); filter: drop-shadow(0 0 26px var(--black-glow)); } .moon--gaunt { --lit: var(--gaunt); filter: drop-shadow(0 0 26px var(--gaunt-glow)); } .moon--phantom { --lit: var(--phantom); filter: drop-shadow(0 0 26px var(--phantom-glow)); } .moon--beckoning { --lit: var(--beckoning); filter: drop-shadow(0 0 26px var(--beckoning-glow)); } .moon--eclipse { --cell: var(--eclipse); --lit: var(--eclipse); filter: none; box-shadow: 0 0 0 1px var(--eclipse-rim), 0 0 40px -10px rgba(157,180,255,0.25); border-radius: 2px; } .moon--eclipse i { background: var(--eclipse); } .moon--eclipse i.rim { background: rgba(157,180,255,0.16); } .moon--sm { width: 64px; gap: 1px; } .moon--lg { width: 200px; gap: 3px; } /* ============================================================ LIVE WIDGETS (states from §5.4) ============================================================ */ .live { position: relative; } .live[data-state="loading"] .skeleton { display: block; } .live[data-state="loading"] .live__body { display: none; } .skeleton { display:none; } .sk-line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; } .sk-line + .sk-line { margin-top: 10px; } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } @media (prefers-reduced-motion: reduce){ .sk-line { animation: none; } } .live[data-state="stale"] .live__body, .live[data-state="offline"] .live__body { opacity: 0.5; filter: saturate(0.7); } .live__banner { display: none; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--text-dim); margin-bottom: var(--s-3); } .live[data-state="stale"] .live__banner, .live[data-state="offline"] .live__banner { display: flex; } .live__banner .shepherd { color: var(--moon-soft); } /* who's-online strip */ .players { display: flex; flex-wrap: wrap; gap: var(--s-2); } .player { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--t-sm); } .player__av { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; image-rendering: pixelated; background: linear-gradient(135deg, var(--surface-3), #2a3252); flex: 0 0 auto; } /* owner avatar (About bio) — Minecraft head or pixel door */ .owner-avatar { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; } .owner-gamertag { font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em; color: var(--text-faint); text-transform: none; } /* About pull-quote — large editorial anchor (content/about.md) */ .pullquote { margin-block: var(--s-7); } .pullquote__q { border: 0; margin: 0; padding-left: var(--s-5); border-left: 2px solid var(--moon-soft); font-size: var(--t-h2); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--text); font-style: normal; transition: opacity .42s ease; } .pullquote__q.is-fading { opacity: 0; } /* follow CTA + bio refocus feedback */ .follow-cta { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); justify-content: space-between; } /* support page — option cards */ .support-list { display: flex; flex-direction: column; gap: var(--s-3); margin-block: var(--s-5); } .support-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color .18s ease, transform .18s ease, background .18s ease; } .support-card:hover { border-color: var(--line-strong); transform: translateY(-2px); background: var(--surface-2); } .support-card__ico { width: 44px; height: 44px; flex: 0 0 auto; pointer-events: none; } .support-card__ico.social:hover { transform: none; } .support-card__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .support-card__name { font-weight: 800; font-size: var(--t-body); } .support-card__blurb { font-size: var(--t-sm); color: var(--text-dim); } .support-card:hover .arrow { color: var(--moon); transform: translateX(3px); } [data-bio] { transition: box-shadow .3s ease; } .bio-pulse { animation: bioPulse 1.5s ease; } @keyframes bioPulse { 0%, 100% { box-shadow: var(--shadow-card); } 25% { box-shadow: 0 0 0 1px var(--moon-soft), 0 0 34px -6px var(--moon-glow); } 60% { box-shadow: 0 0 0 1px var(--line-strong), 0 0 18px -8px var(--moon-glow); } } .social.wiggle { animation: iconWiggle .55s ease; } @keyframes iconWiggle { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(-9deg); } 55% { transform: translateY(-1px) rotate(7deg); } 80% { transform: translateY(0) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .bio-pulse, .social.wiggle { animation: none; } } .owner-av { width: 56px; height: 56px; border-radius: var(--r-sm); image-rendering: pixelated; border: 1px solid var(--line-strong); background: var(--surface-2); display: block; } .owner-door { position: relative; width: 40px; height: 56px; flex: 0 0 auto; border-radius: 4px 4px 1px 1px; image-rendering: pixelated; background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1px, transparent 1px 25%), linear-gradient(180deg, #7a5536, #5b3f28); box-shadow: inset 0 0 0 3px #4a3220, 0 0 24px -8px var(--moon-glow); } .owner-door i { position: absolute; top: 9px; width: 7px; height: 9px; background: radial-gradient(circle at 60% 30%, #e8ebf7, rgba(157,180,255,.5)); box-shadow: 0 0 6px var(--moon-glow); } .owner-door i:nth-child(1) { left: 7px; } .owner-door i:nth-child(2) { right: 7px; } .owner-door i:nth-child(3) { top: 20px; left: 7px; } .owner-door i:nth-child(4) { top: 20px; right: 7px; } .owner-door b { position: absolute; right: 7px; top: 34px; width: 5px; height: 5px; border-radius: 50%; background: #d9dce8; box-shadow: 0 0 6px rgba(205,214,244,.5); } /* login/logout transitions — newcomers fade+scale in, departed fade out */ .player { transition: opacity .4s ease, transform .4s ease; } .player--entering { opacity: 0; transform: scale(.82) translateY(4px); } .player--leaving { opacity: 0; transform: scale(.82) translateY(-4px); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .player { transition: none; } .player--entering { opacity: 1; transform: none; } } /* at-a-glance strip (hero) — minimal: status · players · phase line. the moon itself now lives in the logo (mark.js). */ .glance { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); padding: var(--s-4) var(--s-5); } .glance .live__body { display: flex; flex-direction: column; gap: var(--s-4); } .glance__row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } .glance__row--1 { grid-template-columns: 1fr; } .glance__row--2 { grid-template-columns: 1fr; } @media (min-width: 620px) { .glance__row--1 { grid-template-columns: 1.1fr 1fr 1.1fr; align-items: center; } .glance__row--2 { grid-template-columns: 1fr 1.2fr; } } .glance__row--2 { border-top: 1px solid var(--line); padding-top: var(--s-4); } .glance__cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .glance__cell .badge { align-self: flex-start; } .glance__cell--link { color: inherit; border-radius: var(--r-sm); transition: background .15s ease; } .glance__cell--link:hover { background: rgba(205,214,244,0.04); } .glance__eyebrow { font-family: var(--font-pixel); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--moon-soft); } .glance__who { font-size: var(--t-sm); color: var(--text-dim); } .glance__label { font-weight: 700; font-size: var(--t-sm); } .glance__sub { font-size: var(--t-xs); color: var(--text-faint); } .glance__sub.pixel { font-size: 10px; letter-spacing: .03em; } .glance__count { display: flex; align-items: baseline; gap: 6px; font-size: 1.5rem; line-height: 1; } .glance__max { font-size: var(--t-xs); color: var(--text-faint); } .glance__cell--moon .glance__label { color: var(--event-soft); transition: color .8s ease; } /* compact standings rows inside the glance */ .spotmini { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; } .spotmini__line { font-size: var(--t-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spotmini__line:first-child { color: var(--text); } @media (min-width: 620px) { .glance__row--1 .glance__cell + .glance__cell { border-left: 1px solid var(--line); padding-left: var(--s-4); } } /* ============================================================ SERVER STATS GRID (Stats page — server-wide tallies) ============================================================ */ .statgrid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } .statcard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; min-height: 0; } .statcard__val { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; color: var(--event); text-shadow: 0 0 24px var(--event-glow); transition: color .8s ease, text-shadow .8s ease; } .statcard__label { font-weight: 700; font-size: var(--t-sm); } .statcard__note { font-size: var(--t-xs); color: var(--text-faint); font-style: italic; } /* list variant — one stat per row, value right-aligned. Shares .lb shell + row height with the standings so the two panels match exactly. */ .statlist { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); } .statrow { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; box-sizing: border-box; padding: 6px var(--s-5); border-bottom: 1px solid var(--line); } .statrow:last-child { border-bottom: none; } .statrow__label { font-weight: 700; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 2px; line-height: 1.25; } .statrow__note { font-weight: 400; font-size: var(--t-xs); color: var(--text-faint); font-style: italic; } .statrow__val { font-size: var(--t-h3); line-height: 1; color: var(--event); text-shadow: 0 0 18px var(--event-glow); transition: color .8s ease, text-shadow .8s ease; white-space: nowrap; } .statrow--blank { } /* empty row — just holds height to match the standings */ /* leaderboard chooser */ .lb-select { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: .03em; color: var(--moon-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 26px 6px 10px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--moon-soft) 50%), linear-gradient(135deg, var(--moon-soft) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; transition: border-color .15s ease, color .15s ease; } .lb-select:hover { border-color: var(--moon-soft); color: var(--text); } .lb-select:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; } /* ============================================================ LEADERBOARD ============================================================ */ .lb { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .lb__head { display:flex; align-items:center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); background: var(--surface-2); } .lb__title { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing:0.04em; text-transform: uppercase; color: var(--moon-soft); } .lb__row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s-3); min-height: 56px; box-sizing: border-box; padding: 13px var(--s-5); border-bottom: 1px solid var(--line); } .lb__row:last-child { border-bottom: none; } .lb__rank { font-family: var(--font-pixel); font-size: var(--t-sm); color: var(--text-faint); } .lb__row--top .lb__rank { color: var(--harvest); } .lb__name { font-weight: 600; } .lb__val { font-family: var(--font-pixel); font-size: var(--t-body); color: var(--text); } .lb__unit { font-size: var(--t-xs); color: var(--text-faint); margin-left: 6px; font-family: var(--font-body); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); background: var(--bg-1); margin-top: var(--s-8); } .footer__grid { display: grid; gap: var(--s-6); padding-block: var(--s-7); grid-template-columns: 1fr; } @media (min-width: 720px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .footer h4 a { color: inherit; font: inherit; letter-spacing: inherit; gap: 0; } .footer h4 a:hover { color: var(--moon-soft); } /* footer support links — text on desktop, icons on mobile (mirrors Find Us) */ .footer .footer__links--support-text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .footer .footer__links--support-icons { display: none; flex-wrap: wrap; gap: 10px; } .footer__links--support-icons .social { width: 40px; height: 40px; } .footer__links--support-icons .social svg { width: 21px; height: 21px; } @media (max-width: 879px) { .footer .footer__links--support-text { display: none; } .footer .footer__links--support-icons { display: flex; } } .footer h4 { font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing:0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--s-4); } .footer a { color: var(--text-dim); font-size: var(--t-sm); display: inline-flex; align-items: center; gap: 8px; } .footer a:hover { color: var(--text); } .footer__links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .footer__links--columns { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; column-gap: var(--s-6); row-gap: 12px; } /* social icon links (footer · Find us) — mobile only; desktop uses text */ .footer__socials { display: none; gap: 10px; } .social { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-dim); background: rgba(205,214,244,.04); line-height: 0; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; } .social:hover { color: var(--bg); transform: translateY(-2px); background: var(--moon-soft); border-color: var(--moon-soft); } .social:active { transform: translateY(0); } .social svg { width: 24px; height: 24px; display: block; } .social--discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; box-shadow: 0 6px 18px -6px rgba(88,101,242,.7); } .social--youtube:hover { background: #ff0033; border-color: #ff0033; color: #fff; box-shadow: 0 6px 18px -6px rgba(255,0,51,.6); } .social--instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888); border-color: #dc2743; color: #fff; box-shadow: 0 6px 18px -6px rgba(220,39,67,.6); } .social--x:hover { background: #000; border-color: #000; color: #fff; box-shadow: 0 6px 18px -6px rgba(0,0,0,.8); } .social--bluesky:hover { background: #1185fe; border-color: #1185fe; color: #fff; box-shadow: 0 6px 18px -6px rgba(17,133,254,.6); } .social--tiktok:hover { background: #25f4ee; border-color: #25f4ee; color: #000; box-shadow: 0 6px 18px -6px rgba(37,244,238,.6); } .social--twitch:hover { background: #9146ff; border-color: #9146ff; color: #fff; box-shadow: 0 6px 18px -6px rgba(145,70,255,.6); } .social--github:hover { background: #e8ebf7; border-color: #e8ebf7; color: #06070d; box-shadow: 0 6px 18px -6px rgba(232,235,247,.5); } .social--reddit:hover { background: #ff4500; border-color: #ff4500; color: #fff; box-shadow: 0 6px 18px -6px rgba(255,69,0,.6); } .social--twitter:hover { background: #1d9bf0; border-color: #1d9bf0; color: #fff; box-shadow: 0 6px 18px -6px rgba(29,155,240,.6); } .social--patreon:hover { background: #f96854; border-color: #f96854; color: #fff; box-shadow: 0 6px 18px -6px rgba(249,104,84,.6); } .social--kofi:hover { background: #ff5e5b; border-color: #ff5e5b; color: #fff; box-shadow: 0 6px 18px -6px rgba(255,94,91,.6); } .social--discord:hover { background: #5865f2; border-color: #5865f2; box-shadow: 0 6px 18px -6px rgba(88,101,242,.7); } .social--youtube:hover { background: #ff0033; border-color: #ff0033; box-shadow: 0 6px 18px -6px rgba(255,0,51,.6); } .social--instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888); border-color: #dc2743; box-shadow: 0 6px 18px -6px rgba(220,39,67,.6); } .social--discord { color: var(--moon-soft); } /* inline social icons (e.g. About bio) — always visible, both breakpoints */ .footer__socials--inline { display: flex; } .footer__socials--inline .social { width: 40px; height: 40px; } .footer__socials--inline .social svg { width: 21px; height: 21px; } /* mobile: hide redundant site-nav + brand columns; swap Find-us text → icons. (brand/logo already in the top-left; server address moved to top-right) */ @media (max-width: 879px) { .footer__brand, .footer__nav { display: none; } .footer__links--find { display: none; } .footer__socials { display: flex; } } .join-pill { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-pixel); font-size: var(--t-pixel-sm); padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--moon-soft); } .disclaimer { border-top: 1px solid var(--line); padding-block: var(--s-5); font-size: var(--t-xs); color: var(--text-ghost); line-height: 1.6; } /* ============================================================ PILLAR / FEATURE GRIDS ============================================================ */ .grid { display: grid; gap: var(--s-4); } @media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2,1fr); } } /* big pillar numerals — moonlit outline with an alignment tint */ .pillar-num { font-family: var(--font-pixel); font-size: var(--t-display); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--pn, var(--moon-soft)); text-shadow: 0 0 28px var(--pn-glow, var(--moon-glow)); user-select: none; } .pillar-num--evil { --pn: color-mix(in srgb, var(--blood) 75%, var(--moon-soft)); --pn-glow: var(--blood-glow); } .pillar-num--neutral { --pn: color-mix(in srgb, var(--meow) 75%, var(--moon-soft)); --pn-glow: var(--meow-glow); } .pillar-num--good { --pn: color-mix(in srgb, var(--harvest) 75%, var(--moon-soft)); --pn-glow: var(--harvest-glow); } /* moon compendium grid */ .moongrid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } @media (min-width: 600px) { .moongrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 920px) { .moongrid { grid-template-columns: repeat(3, 1fr); } } /* compact moon list — small logo-style mark beside each named moon */ .moonlist { display: flex; flex-direction: column; } .moonlist__row { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); } .moonlist__row:last-child { border-bottom: none; } .moonlist__icon { width: 26px !important; gap: 1px !important; margin-top: 2px; flex: 0 0 auto; } .moonlist__text { display: flex; flex-direction: column; gap: 3px; } .moonlist__name { font-weight: 800; font-size: var(--t-body); display: flex; align-items: center; gap: var(--s-3); } .mooncard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-5); } .mooncard .moon { margin-bottom: var(--s-2); } .mooncard__name, .mooncard > p { width: 100%; } .mooncard__name { font-weight: 800; font-size: var(--t-h3); line-height: 1.15; } .mooncard--hidden .mooncard__name { color: var(--text-faint); letter-spacing: 0.28em; } /* ============================================================ PROSE (updates / about) ============================================================ */ .prose { font-size: var(--t-body); line-height: 1.75; color: var(--text-dim); } .prose > * + * { margin-top: var(--s-4); } .prose h2 { color: var(--text); font-size: var(--t-h3); margin-top: var(--s-6); } .prose strong { color: var(--text); } .prose a { color: var(--moon); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); } .prose a:hover { text-decoration-color: var(--moon); } .prose blockquote { border-left: 2px solid var(--moon-soft); padding-left: var(--s-4); color: var(--moon-soft); font-style: italic; } /* update list */ .post-row { display: block; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); transition: padding-left .18s ease; } .post-row:hover { padding-left: 8px; } .post-row__meta { display:flex; gap: var(--s-3); align-items:center; flex-wrap: wrap; margin-bottom: 6px; } /* moon-paired update rows: large 8×8 moon beside the entry */ .post-row--moon { display: flex; gap: var(--s-5); align-items: flex-start; } .post-row--moon:hover { padding-left: 0; } .post-row--moon:hover .post-row__body { padding-left: 8px; } .post-row__body { flex: 1; min-width: 0; transition: padding-left .18s ease; } .post-row__moon { width: 72px !important; flex: 0 0 auto; margin-top: 4px; } @media (max-width: 560px) { .post-row__moon { width: 54px !important; } .post-row--moon { gap: var(--s-4); } } /* hr */ .rule { height:1px; background: var(--line); border:0; margin-block: var(--s-6); } /* utility */ .center { text-align: center; } .muted-box { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s-5); color: var(--text-faint); font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: 0.03em; text-align:center; background: repeating-linear-gradient(45deg, transparent, transparent 9px, rgba(205,214,244,0.025) 9px, rgba(205,214,244,0.025) 18px); } .cluster { display:flex; flex-wrap: wrap; gap: var(--s-3); align-items:center; } .cluster--center { justify-content: center; } .spacer-tab { height: 0; } @media (max-width: 879px){ .spacer-tab { height: var(--s-4); } } /* ============================================================ CLIP SLOTS — config-driven video embeds (clips.js) One component, three states: teaser (pre-footage), click-to-load poster, live embed. Slots must look intentional while empty. ============================================================ */ .clipslot { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); } .clipslot__frame { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; background: radial-gradient(60% 70% at 70% 20%, rgba(157,180,255,.07), transparent 65%), linear-gradient(180deg, #05060c, #0a0d18); cursor: pointer; } .clipslot--tease .clipslot__frame { cursor: default; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(205,214,244,.025) 10px, rgba(205,214,244,.025) 20px), radial-gradient(60% 70% at 70% 20%, rgba(157,180,255,.06), transparent 65%), linear-gradient(180deg, #05060c, #0a0d18); } .clipslot__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; } /* blocky play button — square pad, hard pixel triangle */ .clipslot__play { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; background: var(--event); border-radius: var(--r-sm); box-shadow: 0 0 26px var(--event-glow), 0 4px 0 rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .3s ease, background .8s ease; } .clipslot__play i { width: 0; height: 0; margin-left: 4px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #11131d; } .clipslot__frame:hover .clipslot__play { transform: scale(1.07); } .clipslot__play--ghost { background: transparent; box-shadow: none; border: 2px dashed var(--line-strong); } .clipslot__play--ghost i { border-left-color: var(--text-ghost); } .clipslot__note { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-size: var(--t-sm); color: var(--text-faint); padding-inline: var(--s-5); } .clipslot__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 11px 16px; border-top: 1px solid var(--line); font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); } .clipslot__tag { color: var(--text-faint); } .clipslot__embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } /* ============================================================ EVENT SKIN — the full moon touches the whole site ============================================================ WHAT: when a revealed full-moon event is active on Luna, the site takes on that moon's alignment color — not just the logo. Ordinary nights are pure moonlight; event nights feel different everywhere. HOW IT WORKS (the whole mechanism, for replication): 1. SIGNAL live.js reads the snapshot. If moon.event.active AND the id is on RC_CONFIG.revealedMoons, it publishes the variant via window.RC_EVENT. Withheld moons never set RC_EVENT (spoiler rule: the skin must never leak an unrevealed moon). 2. SWITCH mark.js paintAll() sets data-moon-event="blood|meow|harvest" on while an event is active, and removes it otherwise. (The demo control and ?moonevent= drive the same path.) 3. TOKENS the attribute re-maps three custom properties — that's the entire skin. No element rules change per-event: --event solid accent (default: --moon) --event-soft text-grade (default: --moon-soft) --event-glow shadow/glow (default: --moon-glow) 4. SURFACES any rule that should feel the moon uses the --event tokens instead of --moon, with a .8s ease transition so the tint arrives like light, not a repaint. Current surfaces: · kicker dots (.kicker::before) · active nav underline (.navlink[aria-current]::after) · active tab icon/label (.tab[aria-current]) · hero glance: border tint + phase-label color · the living logo itself (mark.js paints cells + glow) TO ADD A SURFACE: swap its var(--moon*) for var(--event*) and add a transition on the affected property. Nothing else. TO ADD A MOON: add one html[data-moon-event=""] block below and the matching entry in mark.js EVENT. Keep tints SUBTLE — the skin should be felt, not noticed; the logo stays the loudest element. ============================================================ */ html[data-moon-event="blood"] { --event: var(--blood); --event-soft: color-mix(in srgb, var(--blood) 65%, var(--moon-soft)); --event-glow: var(--blood-glow); } html[data-moon-event="meow"] { --event: var(--meow); --event-soft: color-mix(in srgb, var(--meow) 65%, var(--moon-soft)); --event-glow: var(--meow-glow); } html[data-moon-event="harvest"] { --event: var(--harvest); --event-soft: color-mix(in srgb, var(--harvest) 65%, var(--moon-soft)); --event-glow: var(--harvest-glow); } /* event-night surface details that need their own rules */ .glance { transition: border-color .8s ease, box-shadow .8s ease; } html[data-moon-event] .glance { border-color: color-mix(in srgb, var(--event) 30%, var(--line)); box-shadow: var(--shadow-card), 0 0 34px -14px var(--event-glow); } @media (prefers-reduced-motion: reduce) { .kicker::before, .navlink[aria-current="page"]::after, .tab[aria-current="page"], .glance, .glance__cell--moon .glance__label { transition: none; } } /* homepage stat spotlight (rotating top-3) */ .spot__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); } .spot__row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--s-3); padding: 7px 0; border-top: 1px solid var(--line); } .spot__row .lb__val { font-size: var(--t-sm); } .spot__rank--top { color: var(--harvest); } /* ============================================================ JOIN CTA — phase-aware call to action (cta.js, §4.0) ============================================================ */ .cta-sub { font-size: var(--t-sm); color: var(--text-dim); max-width: 44ch; margin-top: var(--s-3); line-height: 1.6; } .cta-sub strong { color: var(--text); } .cta-steps { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-sm); color: var(--text-dim); } .cta-steps li { display: flex; align-items: center; gap: 10px; } .cta-steps li strong { color: var(--text); } .cta-steps .pixel { width: 22px; height: 22px; display: grid; place-items: center; font-size: 10px; color: var(--moon-soft); background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); flex: 0 0 auto; } /* the open-phase address pill — the address IS the button. Border endpoints are LITERAL rgba (not color-mix) so the .2s border-color transition can actually interpolate — same class of bug as the logo-cell color-mix transitions. */ .cta-addr { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: var(--r-md); border: 1px solid rgba(111, 207, 142, 0.35); background: var(--surface); box-shadow: 0 0 24px -8px var(--online-glow), var(--shadow-card); cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease, transform .12s ease; } .cta-addr:hover { border-color: rgba(111, 207, 142, 0.75); box-shadow: 0 0 30px -6px var(--online-glow), var(--shadow-card); } .cta-addr:active { transform: translateY(1px); } .cta-addr .pixel { font-size: var(--t-body); color: var(--text); letter-spacing: .04em; } .cta-addr__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--online); box-shadow: 0 0 10px var(--online-glow); animation: pulse 2.4s ease-in-out infinite; } .cta-addr__hint { font-size: var(--t-xs); color: var(--text-faint); } @media (prefers-reduced-motion: reduce){ .cta-addr__dot { animation: none; } } html[data-server="offline"] .cta-addr { border-color: rgba(212, 86, 106, 0.45); box-shadow: 0 0 24px -8px var(--blood-glow), var(--shadow-card); } html[data-server="offline"] .cta-addr__dot { background: var(--blood); box-shadow: 0 0 10px var(--blood-glow); } /* ============================================================ SERVER-OFFLINE STATE — the 404 Moon ============================================================ When the snapshot says Luna is unreachable (server.online false, stale past threshold, or no snapshot at all), live.js sets data-server="offline" on and RC_OFFLINE for mark.js: · the living logo runs a blood-red full moon — "The 404 Moon" / "celestial body not found" (mark.js face()) · the status badge renders .badge--asleep (red "Luna is asleep") · the surfaces below turn red Distinct from the EVENT SKIN: offline does NOT re-map the --event tokens — only the logo + status surfaces go red, so an outage never masquerades as a Blood Moon night. ============================================================ */ html[data-server="offline"] .join-pill { border-color: rgba(212,86,106,0.4); } html[data-server="offline"] .join-pill .badge__dot { background: var(--blood) !important; /* dot color is inline in markup */ box-shadow: 0 0 10px var(--blood-glow); } html[data-server="offline"] .glance__cell--moon .glance__label { color: var(--blood); } /* the glance's offline state is designed content (404 moon, asleep badge, door-closed line) — don't wash it out like generic stale widgets */ .glance.live[data-state="offline"] .live__body { opacity: 1; filter: none; } .join-pill, .join-pill .badge__dot { transition: border-color .8s ease, background .8s ease, box-shadow .8s ease; }